.reel-game{--reel-ink:#244f52;--reel-cream:#fff5dd;--reel-coral:#dd7456;height:100dvh;min-height:620px;color:var(--reel-ink);background:#cee4d5;font-family:DM Sans,sans-serif;position:relative;overflow:hidden}.reel-game button,.reel-dialog button{cursor:pointer}.reel-game button:disabled,.reel-dialog button:disabled{opacity:.45;cursor:default}:is(.reel-game button:focus-visible,.reel-game a:focus-visible,.reel-game input:focus-visible){outline-offset:4px;outline:3px solid #e18b48}.reel-canvas{position:absolute;inset:0}.reel-canvas canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.reel-header{z-index:10;background:linear-gradient(#d6e7d8eb,#d6e7d800);justify-content:space-between;align-items:center;gap:18px;height:86px;padding:0 32px;display:flex;position:relative}.reel-brand{color:var(--reel-ink);white-space:nowrap;align-items:center;gap:9px;font:600 22px Fredoka,sans-serif;text-decoration:none;display:flex}.reel-brand>span:first-child{background:#edaf4f;border-radius:14px;padding:10px;transform:rotate(-7deg)}.reel-dot{color:#cf704c;margin-left:-8px}.reel-menu{z-index:2;grid-template-columns:.95fr 1.35fr;align-items:center;gap:30px;width:min(1230px,93%);margin:max(18px,33.3333dvh - 260px) auto 0;display:grid;position:relative}.reel-menu-copy{background:#fff5ddf5;border:1px solid #fff9eb;border-radius:28px;padding:30px 32px 28px;box-shadow:0 16px 55px #2e676422}.reel-kicker{letter-spacing:1.7px;align-items:center;gap:9px;font-size:10px;font-weight:800;display:flex}.reel-kicker>span{background:#dc7756;border-radius:50%;width:7px;height:7px}.reel-menu h1{letter-spacing:-2px;margin:23px 0 18px;font:600 clamp(48px,5.5vw,77px)/.99 Fredoka,sans-serif;display:block}.reel-menu h1 em{color:#d56e4e;font-style:normal}.reel-menu p{color:#67807a;margin-bottom:19px;font-size:15px;line-height:1.65}.reel-meta{flex-wrap:wrap;gap:17px;margin-bottom:23px;font-size:10px;font-weight:700;display:flex}.reel-meta span{align-items:center;gap:6px;display:flex}.reel-name,.reel-join-form label{flex-direction:column;gap:8px;font-size:11px;font-weight:700;display:flex}.reel-name input,.reel-join-form input{color:#244f52;background:#fffdf3;border:1px solid #d5d9c2;border-radius:10px;outline-color:#dc8c50;width:100%;padding:13px 15px;font-size:13px}.reel-primary{color:#fff5df;background:#285d5d;border:1px solid #1e4e50;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;margin-top:13px;padding:15px 18px;font-size:13px;font-weight:700;transition:transform .15s;display:flex;box-shadow:0 4px #193f43}.reel-primary:hover:not(:disabled){transform:translateY(-2px)}.reel-menu-secondary{gap:10px;margin-top:14px;display:flex}.reel-menu-secondary button{background:0 0;border:1px solid #b4c5b8;border-radius:10px;width:50%;padding:11px;font-size:12px;font-weight:700}.reel-menu-note{text-align:center;color:#788980;margin-top:20px;font-size:10px;display:block}.reel-menu-art{border:9px solid #fff3d9;border-bottom-width:62px;border-radius:10px;margin:0;position:relative;transform:rotate(2deg);box-shadow:0 14px 50px #294f5140}.reel-menu-art img{width:100%;height:auto;display:block}.reel-menu-art figcaption{justify-content:space-between;align-items:center;gap:15px;display:flex;position:absolute;bottom:-47px;left:16px;right:16px}.reel-menu-art figcaption span{letter-spacing:1.3px;font-size:9px;font-weight:800}.reel-menu-art figcaption strong{font:500 19px Fredoka,sans-serif}.reel-scoreboard{z-index:3;background:#fff5dff2;border:1px solid #ffffffa8;border-radius:18px;gap:26px;padding:15px 19px;display:flex;position:absolute;top:98px;left:24px;box-shadow:0 6px 20px #31636113}.reel-scoreboard span,.reel-scoreboard small{letter-spacing:1.2px;font-size:9px;font-weight:800}.reel-scoreboard strong{align-items:center;gap:7px;margin-top:5px;font:600 31px Fredoka,sans-serif;display:flex}.reel-scoreboard strong small{letter-spacing:0;color:#77877b;font:600 12px DM Sans,sans-serif}.reel-scoreboard progress{accent-color:#dd8754;width:160px;height:5px;margin-top:6px;display:block}.reel-clock{border-left:1px solid #ccd3bb;padding-left:22px}.reel-clock.urgent{color:#ce614a}.reel-crew{z-index:3;background:#fff7e8ed;border-radius:18px;width:238px;padding:15px;font-size:11px;position:absolute;top:99px;right:25px}.reel-weather{z-index:3;color:#274e50;background:#fff7e8ed;border-radius:14px;gap:9px;max-width:240px;padding:10px 13px;font-size:14px;display:flex;position:absolute;top:252px;left:27px}.reel-weather svg{flex-shrink:0;margin-top:2px}.reel-weather strong,.reel-weather span{display:block}.reel-weather span{margin-top:3px;font-size:12px}.reel-weather.storm{color:#fff4cd;background:#263e58ed}.reel-weather.rain{background:#dbeaf1ed}.reel-team-pull{color:#33736f;margin:7px 0 0;font-size:12px}.reel-crew-title{letter-spacing:1px;justify-content:space-between;margin-bottom:10px;font-size:9px;font-weight:800;display:flex}.reel-crew-title span{align-items:center;gap:6px;display:flex}.reel-crew-title button{color:#bc694d;background:0 0;border:0;font-size:10px}.reel-crew-person{align-items:center;gap:7px;padding:5px 0;display:flex}.reel-crew-person i{border-radius:50%;flex-shrink:0;width:9px;height:9px}.reel-crew-person span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reel-crew-person small{color:#7b8e82;margin-left:auto;font-size:9px}.reel-gear{color:#6c8278;border-top:1px solid #d8dec6;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;font-size:9px;display:flex}.reel-camera{z-index:3;background:#fff5dfec;border:1px solid #fff7df;border-radius:12px;align-items:center;gap:7px;padding:10px;font-size:11px;display:flex;position:absolute;bottom:164px;right:27px}.reel-line-panel{z-index:3;text-align:center;pointer-events:none;background:#fff8e6f2;border:1px solid #fffaf0;border-radius:14px;width:min(410px,85%);padding:13px 17px;font-size:12px;font-weight:700;position:absolute;bottom:135px;left:50%;transform:translate(-50%)}.reel-line-panel .warning{color:#cc6249}.reel-tension,.reel-fish-stamina{align-items:center;gap:9px;margin-top:8px;display:flex}.reel-tension small,.reel-fish-stamina small{letter-spacing:1px;text-align:left;width:82px;font-size:8px}.reel-tension meter,.reel-fish-stamina progress{accent-color:#529886;flex:1;width:90px;height:10px}.reel-tension b,.reel-fish-stamina span{min-width:44px;font-size:9px}.reel-action-dock{z-index:5;background:#fff6e5ed;border-radius:20px;gap:7px;padding:9px;display:flex;position:absolute;bottom:41px;left:50%;transform:translate(-50%);box-shadow:0 8px 25px #28555225}.reel-action{color:#285758;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff9e9;border:1px solid #c6d1bd;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-height:56px;padding:10px 13px;font-size:11px;font-weight:700;display:flex}.reel-action.active{background:#eeb858;border-color:#cf9740;transform:translateY(1px)}.reel-action span{white-space:nowrap;flex-direction:column;gap:3px;display:flex}.reel-action kbd{color:#7a8d7d;font-family:inherit;font-size:8px;font-weight:500}.reel-movement-hint{color:#315f60;white-space:nowrap;font-size:9px;position:absolute;bottom:15px;left:50%;transform:translate(-50%)}.reel-notice{z-index:20;text-align:center;pointer-events:none;background:#fff7e5ef;border-radius:12px;width:max-content;max-width:min(570px,90%);padding:10px 16px;font-size:11px;position:absolute;top:200px;left:50%;transform:translate(-50%);box-shadow:0 4px 15px #2e625324}.reel-loading{z-index:3;background:#fff5dd;border-radius:14px;align-items:center;gap:10px;padding:12px 16px;font-size:12px;display:flex;position:absolute;bottom:20px;right:25px}.reel-lobby,.reel-results{z-index:5;text-align:center;background:#fff5dff5;border:1px solid #fffdf2;border-radius:25px;width:min(380px,90%);padding:27px;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);box-shadow:0 15px 50px #325f5330}.reel-lobby .reel-kicker,.reel-results .reel-kicker{justify-content:center;margin:12px 0}.reel-lobby h2,.reel-results h2{margin:15px 0;font:600 39px/1.1 Fredoka,sans-serif}.reel-lobby p,.reel-results p{color:#6e8277;font-size:12px;line-height:1.7}.reel-results>svg{color:#dba440;margin:auto}.reel-room-code{letter-spacing:5px;color:#2d5d58;background:#f0eed2;border:1px dashed #a8bba5;border-radius:12px;justify-content:center;align-items:center;gap:14px;width:100%;margin:12px 0;padding:18px 8px;font:500 36px Fredoka,sans-serif;display:flex}.reel-haul{flex-wrap:wrap;justify-content:center;gap:6px;margin:15px 0;display:flex}.reel-haul span{background:#e8ead5;border-radius:8px;padding:5px 8px;font-size:9px}.reel-text-button{background:0 0;border:0;margin-top:15px;font-size:11px;text-decoration:underline}.reel-dialog{color:#285758;background:#fff5dd;border-radius:23px;max-height:88dvh;overflow-y:auto}.reel-help p{margin:10px 0;font-size:12px;line-height:1.6}.reel-join-form{flex-direction:column;gap:15px;display:flex}.reel-small{text-align:center;font-size:11px}.reel-spin{animation:1s linear infinite reel-spin}@keyframes reel-spin{to{transform:rotate(360deg)}}.reel-game .touch-controls,.reel-game .touch-controls .touch-jump{display:none}@media (pointer:coarse){.reel-game .touch-controls{z-index:6;display:block;position:absolute;bottom:125px;left:22px}.reel-game .touch-controls[data-touch-controls] .joystick{color:#285758;background:#fff5df66;border:2px solid #fff9e4b0;border-radius:50%;width:106px;height:106px}.reel-game .joystick>span{background:#f2c368db;border:2px solid #fff9e9;border-radius:50%;width:38px;height:38px}}@media (max-width:1000px){.reel-header{padding:0 18px}.reel-brand{font-size:18px}.reel-menu{grid-template-columns:1fr 1.1fr;gap:20px}.reel-menu-copy{padding:27px}.reel-menu-art figcaption strong{font-size:15px}.reel-action{padding:9px}}@media (max-width:700px){.reel-game{min-height:550px}.reel-game:not(.in-session){height:auto;min-height:100dvh;overflow:auto}.reel-header{flex-wrap:wrap;align-items:flex-start;gap:8px;height:108px;padding:12px 15px}.reel-brand{font-size:18px}.reel-brand>span:first-child{padding:6px}.reel-game .game-toolbar{margin-left:auto}.reel-menu{flex-direction:column;gap:20px;width:calc(100% - 30px);margin:13px auto 40px;display:flex}.reel-menu-copy{width:100%;padding:25px}.reel-menu h1{font-size:62px}.reel-menu-art{width:92%;margin-bottom:25px}.reel-scoreboard{gap:14px;padding:11px;top:117px;left:12px}.reel-scoreboard strong{font-size:24px}.reel-scoreboard progress{width:100px}.reel-scoreboard strong small{font-size:10px}.reel-clock{padding-left:12px}.reel-crew{width:135px;padding:10px;top:117px;right:12px}.reel-weather{gap:5px;width:calc(100% - 171px);max-width:230px;padding:8px;font-size:12px;top:211px;left:12px}.reel-crew-title{letter-spacing:0;font-size:8px}.reel-crew-person{padding:3px 0;font-size:9px}.reel-crew-person small,.reel-gear{display:none}.reel-notice{max-width:calc(100% - 24px);font-size:10px;top:300px}.reel-action-dock{justify-content:center;gap:4px;width:calc(100% - 24px);padding:6px;bottom:17px}.reel-action{flex:1;gap:4px;min-width:0;min-height:48px;padding:6px 4px;font-size:10px}.reel-action>svg{display:none}.reel-line-panel{width:calc(100% - 150px);min-width:160px;padding:10px;font-size:10px;bottom:98px;left:auto;right:12px;transform:none}.reel-tension small,.reel-fish-stamina small{letter-spacing:0;width:47px;font-size:7px}.reel-tension meter,.reel-fish-stamina progress{width:40px}.reel-fish-stamina span,.reel-movement-hint{display:none}.reel-camera{bottom:218px;right:12px}.reel-game .touch-controls{z-index:6;bottom:98px;left:14px}}@media (max-height:650px) and (min-width:701px){.reel-game{min-height:480px}.reel-menu{grid-template-columns:1fr 1.3fr;max-width:980px;margin-top:0}.reel-menu h1{margin:12px 0;font-size:48px}.reel-menu-copy{padding:20px}.reel-menu p{margin-bottom:10px;font-size:12px}.reel-meta{margin-bottom:12px}.reel-menu-note{display:none}.reel-notice{top:186px}}@media (prefers-reduced-motion:reduce){.reel-spin{animation:none}.reel-primary{transition:none}}