:root{--bg:#0a1a14;--fg:#ede8df;--accent:#c8a96e;--font-display:Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;--font-mono:"DM Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--fg);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,sans-serif;display:flex;position:relative;overflow:hidden}.arcade-container{background:#141b18;border:8px solid #23342c;border-radius:24px;width:90vw;max-width:800px;padding:16px;position:relative;box-shadow:0 30px 60px #000c,inset 0 4px 10px #ffffff0d}.screen-wrapper{aspect-ratio:16/9;background-color:#030806;border:8px solid #08100c;border-radius:12px;width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 50px #000}.screen-wrapper:after{content:" ";z-index:10;pointer-events:none;opacity:.85;background:linear-gradient(#12101000 50%,#0000004d 50%) 0 0/100% 4px,linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f) 0 0/6px 100%;display:block;position:absolute;inset:0}canvas{width:100%;height:100%;image-rendering:pixelated;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;display:block}.overlay-screen{z-index:20;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a1a14d9;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;transition:opacity .3s;display:flex;position:absolute;top:0;left:0}.overlay-screen.hidden{display:none}.hidden{display:none!important}#gameOverScreen{padding:8px!important}.game-over-layout{box-sizing:border-box;flex-direction:row;justify-content:space-around;align-items:center;gap:15px;width:100%;height:100%;padding:4px 12px;display:flex}.game-over-left{text-align:center;flex-direction:column;flex:1.1;justify-content:center;align-items:center;display:flex}.game-over-right{flex-direction:column;flex:.9;justify-content:center;align-items:center;width:100%;max-width:320px;max-height:95%;display:flex}h1.game-title{font-family:var(--font-display);color:var(--accent);text-shadow:0 0 15px #c8a96e99;margin-bottom:8px;font-size:2.8rem}.game-subtitle{font-family:var(--font-mono);letter-spacing:2px;color:#8da596;margin-bottom:24px;font-size:.9rem}.btn-start,.btn-action{background-color:var(--accent);color:#0c1c15;font-family:var(--font-mono);cursor:pointer;text-transform:uppercase;border:none;border-radius:8px;padding:12px 28px;font-size:1rem;font-weight:700;transition:all .2s;box-shadow:0 0 15px #c8a96e66}.btn-start:hover,.btn-action:hover{transform:translateY(-2px);box-shadow:0 0 25px #c8a96eb3}.controls-tip{font-family:var(--font-mono);color:#6d8577;margin-top:15px;font-size:.8rem;line-height:1.6}.leaderboard-container{width:100%;max-width:320px;margin-top:16px;margin-bottom:16px}.leaderboard-title{font-family:var(--font-display);color:var(--accent);margin-bottom:12px;font-size:1.4rem}.score-row{font-family:var(--font-mono);opacity:0;border-bottom:1px dashed #c8a96e33;justify-content:space-between;padding:4px 8px;font-size:.95rem;transition:opacity .3s cubic-bezier(.175,.885,.32,1.25),transform .3s cubic-bezier(.175,.885,.32,1.25);display:flex;transform:translate(-15px)}.score-row.reveal{opacity:1;transform:translate(0)}.score-row.current-run{color:#0fc;background:#00ffcc1a;border-bottom:1px solid #0fc;font-weight:700}@keyframes blink{0%,to{opacity:1}50%{opacity:.45}}.score-row.blink-row{color:#0fc;background:#00ffcc26;border-bottom:1px solid #0fc;font-weight:700;animation:.8s infinite blink}.name-input-wrapper{margin:16px 0;transition:opacity .4s,transform .4s}.name-input-wrapper.fade-out{opacity:0;transform:scale(.92)}.name-input-wrapper label{font-family:var(--font-mono);color:#8da596;margin-bottom:6px;font-size:.72rem;line-height:1.35;display:block}.initials-input{border:2px solid var(--accent);color:var(--fg);font-family:var(--font-mono);text-align:center;letter-spacing:8px;text-transform:uppercase;background:0 0;border-radius:6px;outline:none;width:120px;padding:4px;font-size:1.8rem}.site-logo-link{z-index:150;transition:opacity .2s,transform .2s;display:inline-block;position:absolute;top:24px;left:24px}.site-logo-link:hover{opacity:.8;transform:scale(1.02)}.site-logo-link img{width:auto;height:40px;display:block}@media (max-width:768px){.site-logo-link{top:calc(16px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px))}.site-logo-link img{height:28px}}.mobile-controls{z-index:100;pointer-events:none;padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(24px + env(safe-area-inset-right,0px));padding-bottom:env(safe-area-inset-bottom,0px);padding-top:env(safe-area-inset-top,0px);justify-content:space-between;align-items:center;display:none;position:fixed;inset:0}.joystick-container{pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:none;justify-content:center;align-items:center;width:120px;height:120px;display:flex}.joystick-base{background:#101a16a6;border:3px dashed #c8a96e73;border-radius:50%;justify-content:center;align-items:center;width:88px;height:88px;display:flex;position:relative;box-shadow:0 4px 10px #00000080,inset 0 0 15px #000c}.joystick-knob{background:radial-gradient(circle at 35% 35%, #e1c080, var(--accent) 70%, #907640 100%);cursor:grab;touch-action:none;border:2px solid #241a12;border-radius:50%;width:44px;height:44px;transition:transform 50ms ease-out;position:absolute;box-shadow:0 4px 8px #0009,inset 0 2px 4px #ffffff4d}.joystick-knob:active{cursor:grabbing;background:radial-gradient(circle at 35% 35%, #ebd7ab, var(--accent) 70%, #a48c58 100%)}.mobile-actions{pointer-events:auto;flex-direction:column;gap:16px;display:flex}.ctrl-btn,.ctrl-btn-square{color:var(--accent);font-family:var(--font-mono);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;cursor:pointer;background:#101a16b8;border:2px solid #c8a96e73;justify-content:center;align-items:center;font-weight:700;display:flex;box-shadow:0 4px 6px #0000004d}.ctrl-btn{border-radius:50%;width:58px;height:58px;font-size:1.1rem}.ctrl-btn-square{border-radius:6px;place-self:center;width:36px;height:36px;font-size:1.1rem}.ctrl-btn:active,.ctrl-btn-square:active{background:var(--accent);color:#0c1c15}#btnFish{color:#3c6;background:#336644b8;border-color:#33cc6673}#btnFish:active{color:#0c1c15;background:#3c6}#btnFish.disabled{cursor:not-allowed;opacity:.5;pointer-events:none;color:#66776b!important;background:#282d2a66!important;border-color:#646e6940!important}#btnRun{color:#ac3c;background:#55661966;border-color:#aacc3340}#btnRun:active,#btnRun.active{color:#0c1c15;background:#aacc33a6;border-color:#ddee66bf;box-shadow:0 0 6px #aacc3340}.ctrl-btn-run-icon{width:28px;height:28px;display:block}.ctrl-btn-fish-icon{background-color:currentColor;width:32px;height:32px;display:inline-block;-webkit-mask:url(/logo-cream.png) 50%/contain no-repeat;mask:url(/logo-cream.png) 50%/contain no-repeat}.ctrl-btn-jump-icon{width:28px;height:28px;display:block}.orientation-screen{color:#c8a96e;z-index:1000;text-align:center;box-sizing:border-box;background:#09120e;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:24px;display:none;position:fixed;top:0;left:0}.rotation-visual{justify-content:center;align-items:center;width:120px;height:120px;margin-bottom:24px;display:flex;position:relative}.phone-device{border:3px solid var(--accent);background:#c8a96e0d;border-radius:6px;width:40px;height:72px;animation:2.5s ease-in-out infinite phoneRotate;position:relative;box-shadow:0 0 15px #c8a96e33}.phone-screen{border-bottom:1px solid #c8a96e40;position:absolute;inset:6px 3px 10px}.phone-home-button{border:1px solid var(--accent);border-radius:50%;width:4px;height:4px;position:absolute;bottom:3px;left:50%;transform:translate(-50%)}.rotate-text{font-size:.95rem;font-family:var(--font-mono);max-width:280px;line-height:1.5}@keyframes phoneRotate{0%{transform:rotate(0)}30%,70%{transform:rotate(-90deg)}to{transform:rotate(-90deg)}}@media (pointer:coarse){.arcade-container.game-active~.mobile-controls{display:flex}}@media (max-height:480px) and (orientation:landscape){body{justify-content:center;padding:4px 0}.site-logo-link{top:calc(8px + env(safe-area-inset-top,0px))!important;left:calc(8px + env(safe-area-inset-left,0px))!important}.site-logo-link img{height:20px!important}.arcade-container{aspect-ratio:16/9;border-width:4px;border-radius:12px;width:auto;height:96vh;max-height:96vh;padding:6px}.screen-wrapper{aspect-ratio:16/9;border-width:4px;border-radius:8px;width:auto;height:100%}.mobile-controls{padding-left:calc(8px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px));padding-bottom:env(safe-area-inset-bottom,0px);padding-top:env(safe-area-inset-top,0px);inset:0}.joystick-container{width:80px;height:80px}.joystick-base{border-width:2px;width:64px;height:64px}.joystick-knob{width:32px;height:32px}.mobile-actions{gap:10px}.ctrl-btn{width:46px;height:46px}.ctrl-btn-fish-icon{width:24px;height:24px}.ctrl-btn-jump-icon{stroke-width:2.5px;width:20px;height:20px}.game-over-layout{gap:8px;padding:2px 6px}.game-over-left h1.game-title{margin-bottom:2px!important;font-size:1.5rem!important}.game-over-left .game-subtitle{margin-bottom:4px!important;font-size:.75rem!important}.name-input-wrapper{margin:6px 0!important}.name-input-wrapper label{margin-bottom:4px!important;font-size:.6rem!important}.initials-input{width:80px!important;padding:1px!important;font-size:1.1rem!important}.btn-action{padding:6px 14px!important;font-size:.75rem!important}.leaderboard-title{margin-bottom:4px!important;font-size:.9rem!important}#leaderboardRows{max-height:80px!important}.score-row{padding:2px 4px!important;font-size:.8rem!important}}.pwa-mode-install .arcade-container{display:none!important}.pwa-mode-install .pwa-install-screen{display:flex!important}.pwa-install-screen{color:#ede8df;z-index:2000;text-align:center;box-sizing:border-box;background:#08120e;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:24px;display:none;position:fixed;top:0;left:0}.pwa-visual{justify-content:center;align-items:center;width:100px;height:100px;margin-bottom:16px;display:flex;position:relative}.pwa-phone{border:3px solid var(--accent);z-index:2;background:#c8a96e0d;border-radius:5px;width:32px;height:56px;position:relative}.pwa-phone-screen{justify-content:center;align-items:center;width:100%;height:100%;font-size:1.1rem;display:flex}.pwa-glow{background:var(--accent);filter:blur(40px);opacity:.15;z-index:1;width:80px;height:80px;position:absolute}.pwa-title{font-family:var(--font-display);color:var(--accent);letter-spacing:1px;text-shadow:0 0 10px #c8a96e4d;margin-bottom:12px;font-size:1.6rem}.pwa-desc{font-family:var(--font-mono);color:#8da596;max-width:380px;margin-bottom:24px;font-size:.8rem;line-height:1.4}.pwa-steps-container{flex-direction:row;justify-content:center;gap:16px;width:100%;max-width:520px;display:flex}.pwa-step-box{text-align:left;background:#101a16b3;border:1px solid #c8a96e33;border-radius:8px;flex:1;padding:12px}.pwa-step-box h3{font-family:var(--font-display);color:var(--accent);border-bottom:1px solid #c8a96e33;margin-bottom:8px;padding-bottom:4px;font-size:.95rem}.pwa-step-box p{font-family:var(--font-mono);color:#ede8df;margin-bottom:6px;font-size:.72rem;line-height:1.4}@media (max-width:480px){.pwa-steps-container{flex-direction:column;gap:10px}}.confirm-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2100;background:#040a08d9;justify-content:center;align-items:center;width:100vw;height:100vh;padding:16px;display:none;position:fixed;top:0;left:0}.confirm-modal-card{border:2px solid var(--accent);text-align:center;background:#08120e;border-radius:16px;width:100%;max-width:340px;padding:24px;animation:.25s cubic-bezier(.16,1,.3,1) forwards modal-fade-in;box-shadow:0 20px 50px #000000e6}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.confirm-modal-card h3{font-family:var(--font-display);color:var(--accent);letter-spacing:.5px;margin-bottom:8px;font-size:1.35rem}.confirm-modal-card p{font-family:var(--font-mono);color:#8da596;margin-bottom:20px;font-size:.75rem;line-height:1.4}.confirm-modal-buttons{justify-content:center;gap:12px;display:flex}.confirm-btn-primary{background:var(--accent)!important;color:#0a1a14!important}.confirm-btn-secondary{color:#ede8df!important;background:0 0!important;border:1px solid #c8a96e4d!important}.confirm-btn-secondary:hover{background:#c8a96e1a!important}
