:root {
  color-scheme:dark;
  --ink:#eef8ff;--muted:#8eaac2;--line:rgba(148,207,238,.16);--panel:rgba(5,27,52,.9);
  --cyan:#5de6ff;--gold:#ffd76a;--red:#ff6577;--green:#52e0a0;
  font-family:Inter,"Noto Sans JP",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#031326}body{min-height:100vh;min-height:100dvh;color:var(--ink);overflow-x:hidden;background:radial-gradient(circle at 50% -10%,#12648a 0,transparent 35%),linear-gradient(#061d38,#020d1b 60%,#020812)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(circle at 20% 10%,rgba(130,229,255,.8) 0 1px,transparent 2px),radial-gradient(circle at 75% 30%,rgba(130,229,255,.45) 0 1px,transparent 2px);background-size:90px 110px,140px 170px;animation:drift 20s linear infinite}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.38;filter:saturate(.5)}
.panel{border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(15px)}
.eyebrow{margin:0 0 7px;color:var(--cyan);font-size:10px;font-weight:950;letter-spacing:.22em}.primary,.secondary,.refresh,.text-button{border:0;color:white}.primary{width:100%;min-height:54px;padding:12px 18px;border-radius:14px;color:#052035;font-weight:950;background:linear-gradient(135deg,#67ebff,#4de2ad);box-shadow:0 8px 24px rgba(59,222,207,.22)}.primary:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.06)}
.secondary{min-height:45px;padding:10px 15px;border:1px solid rgba(154,211,239,.24);border-radius:12px;font-weight:800;background:rgba(98,174,215,.1)}.text-button{padding:9px 12px;color:var(--muted);background:transparent}.refresh{min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:#bcecff;font-size:10px;font-weight:900;background:rgba(87,189,227,.1)}
input,select{width:100%;min-height:49px;padding:0 13px;border:1px solid rgba(148,207,238,.22);border-radius:12px;outline:none;color:white;background:#04152a}input:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(93,230,255,.1)}
.notice{min-height:21px;padding-top:7px;color:#ff8d9a;font-size:12px;text-align:center}.notice[data-kind=info]{color:var(--cyan)}.notice[data-kind=success]{color:var(--green)}
.sub-logo{position:relative;display:grid;place-items:center;width:74px;height:54px;border:2px solid rgba(160,229,255,.65);border-radius:55% 55% 42% 42%;color:#05172b;background:linear-gradient(#71efff,#2eb6e0);box-shadow:0 8px 0 #116e93,0 0 35px rgba(79,216,255,.28)}.sub-logo::before{content:"";position:absolute;right:-18px;width:22px;height:32px;border:4px solid #42c9ec;border-left:0;border-radius:0 20px 20px 0}.sub-logo i{position:absolute;top:-17px;width:21px;height:19px;border:5px solid #4fd7f4;border-bottom:0;border-radius:8px 8px 0 0}.sub-logo b{font-size:14px;letter-spacing:.08em}.sub-logo.small{width:49px;height:35px;border-width:1px;box-shadow:0 4px 0 #116e93}.sub-logo.small::before{right:-10px;width:13px;height:20px;border-width:2px}.sub-logo.small i{top:-10px;width:14px;height:12px;border-width:3px}.sub-logo.small b{font-size:9px}
.boot{display:grid;place-items:center;align-content:center;gap:24px;min-height:100vh;color:var(--muted)}.boot .sub-logo{animation:sub-float 1.6s ease-in-out infinite alternate}

.landing{display:grid;grid-template-columns:minmax(440px,1.1fr) minmax(370px,.9fr);gap:20px;width:min(1160px,calc(100% - 30px));min-height:100vh;margin:0 auto;padding:5vh 0}.landing-hero{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:690px;padding:54px;overflow:hidden;border:1px solid rgba(145,222,255,.18);border-radius:32px;background:radial-gradient(circle at 78% 18%,rgba(61,205,240,.22),transparent 27%),linear-gradient(155deg,rgba(8,72,110,.9),rgba(3,22,48,.94) 62%,#020b18);box-shadow:0 30px 80px rgba(0,0,0,.35)}.landing-hero h1{position:relative;z-index:2;margin:26px 0 18px;font-size:clamp(62px,8vw,106px);line-height:.76;letter-spacing:-.08em}.landing-hero h1 em{color:transparent;font-style:normal;-webkit-text-stroke:1px #76eaff;letter-spacing:.01em}.hero-copy{position:relative;z-index:2;color:#c2dce9;font-size:16px;font-weight:700;line-height:1.85}.rule-chips{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.rule-chips span{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:#aac4d5;font-size:9px;font-weight:900;background:rgba(49,142,184,.1)}.rule-chips b{color:var(--gold);font-size:14px}.ocean-art{position:absolute;right:-40px;bottom:-25px;width:330px;height:300px;opacity:.28}.mini-sub{position:absolute;right:10px;top:70px;width:160px;height:65px;border-radius:60% 55% 45% 50%;background:#52d7f4;box-shadow:0 8px 0 #1c8eb0}.mini-sub::before{content:"";position:absolute;right:-34px;top:14px;width:45px;height:38px;border:12px solid #52d7f4;border-left:0;border-radius:0 50% 50% 0}.mini-sub i{position:absolute;top:-25px;left:66px;width:36px;height:29px;border:10px solid #52d7f4;border-bottom:0}.ocean-art>span{position:absolute;border:2px solid #7fe9ff;border-radius:50%;animation:bubble-up 3s ease-in infinite}.ocean-art>span:nth-of-type(1){left:50px;top:190px;width:18px;height:18px}.ocean-art>span:nth-of-type(2){left:95px;top:235px;width:10px;height:10px;animation-delay:.7s}.ocean-art>span:nth-of-type(3){left:20px;top:255px;width:28px;height:28px;animation-delay:1.4s}
.landing-side{display:grid;align-content:center;gap:14px}.entry-panel,.rooms-panel{padding:27px}.entry-panel h2,.rooms-panel h2{margin:0 0 20px}.entry-panel label{display:grid;gap:7px;margin-bottom:13px;color:var(--muted);font-size:11px;font-weight:800}.entry-panel .demo-start{display:flex;flex-direction:column;gap:2px;width:100%;margin-top:8px}.demo-start small{color:#8fb7cc;font-size:8px;font-weight:600}.divider{display:flex;align-items:center;gap:9px;margin:15px 0;color:#66859e;font-size:9px}.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}.join-row{display:grid;grid-template-columns:1fr auto;gap:8px}.code-input{text-transform:uppercase;letter-spacing:.15em;font-weight:900}.rooms-panel header,.crew-lobby>header,.chat>header,.ocean-board>header,.log-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.rooms-panel header h2,.crew-lobby h2,.chat h2,.ocean-board h2,.log-panel h2{margin:0;font-size:17px}.room-list{display:grid;gap:8px;max-height:270px;margin-top:15px;overflow:auto}.room-card{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;width:100%;padding:12px;border:1px solid var(--line);border-radius:13px;color:white;text-align:left;background:rgba(86,166,207,.07)}.room-card:hover{border-color:rgba(93,230,255,.48);background:rgba(67,178,221,.13)}.room-card>span{grid-row:span 2;padding:5px 7px;border-radius:7px;color:var(--cyan);font-size:9px;font-weight:950;background:rgba(74,205,237,.1)}.room-card strong{font-size:13px}.room-card small{color:var(--muted);font-size:10px}.room-card>b{grid-row:span 2;color:#9fefff;font-size:10px}.empty-list{padding:25px;color:var(--muted);font-size:12px;text-align:center}.empty-list.error{color:#ff8d9a}

.lobby{width:min(1050px,calc(100% - 28px));margin:0 auto;padding:6vh 0}.lobby-header{display:flex;align-items:end;justify-content:space-between;margin-bottom:15px;padding:0 6px}.lobby-header h1{margin:0;font-size:clamp(44px,8vw,70px);letter-spacing:.12em}.lobby-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.crew-lobby{padding:25px}.crew-lobby>header p{margin:4px 0 0;color:var(--muted);font-size:11px}.crew-lobby>header>strong{color:var(--cyan);font-size:23px}.crew-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0}.captain-wait{padding:18px;color:var(--cyan);text-align:center;animation:pulse 1.4s ease-in-out infinite}.crew-lobby>.leave{display:block;margin:10px auto 0}
.crew-card{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:13px;background:rgba(75,151,190,.06)}.crew-card.current{border-color:rgba(255,215,106,.68);box-shadow:0 0 0 2px rgba(255,215,106,.08)}.crew-card.you{background:rgba(72,191,221,.11)}.crew-token{display:grid;place-items:center;width:31px;height:31px;border:3px solid rgba(255,255,255,.82);border-radius:50%;color:#031321;font-style:normal;background:var(--crew);box-shadow:0 4px 9px rgba(0,0,0,.25)}.crew-token b{font-size:10px}.crew-card>div{min-width:0}.crew-card>div strong,.crew-card>div small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crew-card>div strong{font-size:13px}.crew-card>div small{margin-top:2px;color:var(--muted);font-size:10px}.crew-card>span{color:#a9c6d8;font-size:10px;white-space:nowrap}.crew-card>b{color:var(--gold);font-size:13px;white-space:nowrap}
.chat{display:flex;flex-direction:column;min-height:380px;padding:18px}.chat header{padding:2px 3px 12px}.live-dot{padding:4px 7px;border-radius:6px;color:#042019;font-size:8px;font-weight:950;background:var(--green)}.chat-messages{display:flex;flex:1;flex-direction:column;gap:6px;min-height:210px;max-height:360px;padding:8px;overflow:auto;border:1px solid rgba(139,204,235,.1);border-radius:12px;background:rgba(0,10,23,.48)}.chat-line{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:7px}.chat-line>span{padding:3px 6px;border-left:3px solid var(--crew,#65869e);border-radius:4px;color:#cde7f3;font-size:10px;font-weight:900;background:rgba(91,142,172,.09)}.chat-line p{margin:1px 0;color:#dceaf1;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.chat-line time{color:#54738c;font-size:9px}.chat-line.mine p{color:#8feaff}.chat-empty{margin:auto;color:#54738c;font-size:12px}.chat-form{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:8px}.chat-form input{min-height:43px;font-size:13px}.chat-form button{padding:0 14px;border:0;border-radius:10px;color:#052035;font-size:12px;font-weight:950;background:var(--cyan)}

.game{display:flex;flex-direction:column;width:min(1550px,100%);height:100dvh;margin:0 auto;padding:8px 13px 10px;overflow:auto}.game-header{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:56px;padding:7px 15px}.game-brand{display:flex;align-items:center;gap:14px}.game-brand strong,.game-brand small{display:block}.game-brand strong{font-size:14px;letter-spacing:.08em}.game-brand small{margin-top:2px;color:var(--muted);font-size:10px;letter-spacing:.13em}.round-status{text-align:center}.round-status small,.round-status strong{display:block}.round-status small{color:var(--gold);font-size:10px;font-weight:950;letter-spacing:.13em}.round-status strong{margin-top:3px;font-size:15px}.game-header>.leave{justify-self:end}.crew-strip{flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);gap:7px;margin:8px 0;overflow-x:auto;padding:2px 2px 6px}.game-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(560px,1.6fr) minmax(330px,.72fr);gap:11px;align-items:stretch}.board-column,.control-column{display:flex;flex-direction:column;gap:9px;min-height:0}
.oxygen-card{flex:none;padding:8px 15px;border:1px solid rgba(90,226,255,.32);border-radius:15px;background:linear-gradient(135deg,rgba(7,65,95,.96),rgba(4,31,59,.94));box-shadow:0 12px 35px rgba(0,0,0,.24)}.oxygen-line{display:flex;align-items:center;gap:13px}.oxygen-line p{margin:0;color:#bfeaf6;font-size:13px;font-weight:900;white-space:nowrap}.oxygen-line>b{color:#82f1ff;font-size:23px;line-height:1;white-space:nowrap}.oxygen-line>b small{color:#6c92aa;font-size:12px}.oxygen-track{flex:1;height:13px;overflow:hidden;border-radius:999px;background:#02101f;box-shadow:inset 0 2px 5px #000}.oxygen-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#43d7ff,#7bf5ca);box-shadow:0 0 14px rgba(74,226,255,.6);transition:width .35s}.oxygen-card.warning .oxygen-track span{background:linear-gradient(90deg,#ffd75e,#ff9c43)}.oxygen-card.warning .oxygen-line>b{color:#ffd76a}.oxygen-card.critical{border-color:rgba(255,89,111,.55);animation:critical-pulse 1.2s ease-in-out infinite}.oxygen-card.critical .oxygen-track span{background:linear-gradient(90deg,#ff5b71,#ff9a61)}.oxygen-card.critical .oxygen-line>b{color:#ff7d8d}
.ocean-board{flex:1;min-height:0;display:flex;flex-direction:column;padding:13px 15px;overflow:hidden;background:linear-gradient(#0a476a 0,#073554 28%,#05243f 58%,#031326 100%)}.ocean-board>header{flex:none;position:relative;z-index:2;margin-bottom:4px}.depth-legend{display:flex;gap:5px}.depth-legend span{padding:4px 8px;border-radius:5px;color:#dff4fb;font-size:9px;font-weight:900;background:rgba(255,255,255,.07);border-left:3px solid transparent}.depth-legend .lv1{border-color:#37b3cc}.depth-legend .lv2{border-color:#5b8fd0}.depth-legend .lv3{border-color:#8672d6}.depth-legend .lv4{border-color:#d8a054}
.board-stage{flex:1;min-height:0;position:relative;container-type:size;display:grid;place-items:center}
.board3d{--tilt:38deg;position:relative;perspective:1800px;perspective-origin:50% 24%;display:grid;place-items:center;width:100%;height:100%}
.board-plane{position:relative;aspect-ratio:calc(var(--bw)/var(--bh));width:min(91cqw,calc(100cqh/.82*var(--bw)/var(--bh)));transform:translateY(-9%) rotateX(var(--tilt));transform-style:preserve-3d;border-radius:14px;background:linear-gradient(rgba(28,110,152,.34),rgba(6,32,60,.55) 30%,rgba(20,17,58,.5) 66%,rgba(60,32,20,.42));box-shadow:0 40px 70px rgba(0,0,0,.4),inset 0 0 0 1px rgba(140,220,250,.18),inset 0 0 60px rgba(2,10,24,.6)}
.route-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.road-base{fill:none;stroke:rgba(206,240,255,.17);stroke-width:.52;stroke-linejoin:round;stroke-linecap:round}.road-flow{fill:none;stroke:rgba(132,233,255,.85);stroke-width:.08;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:.26 .5;animation:route-flow 1.15s linear infinite;filter:drop-shadow(0 0 .12px rgba(132,233,255,.9))}
.route-cell{position:absolute;z-index:1;display:grid;place-items:center;width:calc(100%/var(--bw)*.74);aspect-ratio:1;color:#eafaff;transform:translate(-50%,-50%)}.route-cell::before{content:"";position:absolute;inset:9%;border:2px solid rgba(195,239,255,.6);background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.25),transparent 24%),linear-gradient(145deg,#387ca1,#174766);box-shadow:0 5px 0 rgba(4,26,44,.85),0 9px 16px rgba(0,0,0,.3);transform:rotate(45deg);border-radius:14%}.route-cell>span{position:absolute;z-index:2;left:50%;top:-6%;transform:translate(-50%,-50%);min-width:17px;padding:1px 5px;border-radius:999px;background:rgba(3,20,36,.88);border:1px solid rgba(150,220,247,.45);color:#cdeeff;font-size:10px;font-weight:950;text-align:center}.route-cell>i{position:relative;z-index:1;font-size:clamp(11px,1.9cqw,20px);font-style:normal;font-weight:950;line-height:1;text-shadow:0 2px 4px rgba(0,0,0,.5)}.route-cell>b{position:absolute;z-index:2;right:2%;bottom:0;padding:1px 4px;border-radius:5px;color:#051728;font-size:7px;background:var(--gold)}
.route-cell.level-1::before{background:linear-gradient(145deg,#31a6bf,#146179)}.route-cell.level-2::before{background:linear-gradient(145deg,#477fc2,#214b7b)}.route-cell.level-3::before{background:linear-gradient(145deg,#705db9,#352e75)}.route-cell.level-4::before{border-color:#e8ca73;background:linear-gradient(145deg,#a96d3c,#5f352e);box-shadow:0 5px 0 #2c1a22,0 0 22px rgba(255,190,78,.2)}.route-cell.empty{opacity:.5}.route-cell.empty::before{border-style:dashed;background:rgba(14,54,78,.62);box-shadow:none}
.dock-sprite{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translate(-50%,-72%) rotateX(calc(var(--tilt)*-1));transform-origin:50% 100%}.dock-sprite em{padding:2px 9px;border-radius:999px;background:var(--gold);color:#3a2708;font-size:10px;font-style:normal;font-weight:950;letter-spacing:.14em;box-shadow:0 3px 8px rgba(0,0,0,.4)}.submarine{position:relative;width:92px;height:34px;border:3px solid #b7f3ff;border-radius:58% 58% 43% 46%;color:#06304b;background:linear-gradient(#8cf0ff,#3ab9df);box-shadow:0 5px 0 #126b91,0 9px 16px rgba(0,0,0,.3)}.submarine::before{content:"";position:absolute;right:-19px;top:6px;width:21px;height:19px;border:6px solid #61d6ee;border-left:0;border-radius:0 50% 50% 0}.submarine i{position:absolute;top:-14px;left:37px;width:19px;height:15px;border:5px solid #6de0f3;border-bottom:0;border-radius:6px 6px 0 0}.submarine b{position:absolute;left:18px;top:11px;font-size:7px;letter-spacing:.08em}.aboard-tokens{display:flex;gap:2px;min-height:19px}.aboard-tokens i{display:grid;place-items:center;width:20px;height:20px;border:2px solid white;border-radius:50%;color:#031321;font-size:9px;font-style:normal;font-weight:950;background:var(--crew)}
.goal-flag{position:absolute;z-index:4;transform:translate(-50%,62%) rotateX(calc(var(--tilt)*-1));transform-origin:50% 0}.goal-flag em{padding:2px 8px;border-radius:6px;border:1px solid rgba(232,202,115,.5);background:rgba(52,30,16,.8);color:#f0cf82;font-size:9px;font-style:normal;font-weight:900;letter-spacing:.1em}
.cell-divers{position:absolute;z-index:7;display:flex;gap:2px;transform:translate(-50%,-88%) rotateX(calc(var(--tilt)*-1));transform-origin:50% 100%}.path-diver{display:grid;place-items:center;width:29px;height:29px;border:3px solid white;border-radius:50%;color:#031321;font-style:normal;background:var(--crew);box-shadow:0 4px 0 color-mix(in srgb,var(--crew),#000 32%),0 7px 9px rgba(0,0,0,.35)}.path-diver b{font-size:11px}.path-diver.current{animation:diver-bob .65s ease-in-out infinite alternate;box-shadow:0 4px 0 color-mix(in srgb,var(--crew),#000 32%),0 0 0 4px var(--gold)}
.path-diver.you{width:34px;height:34px;border-color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--crew),#000 32%),0 0 0 3px #041a2e,0 0 0 6px var(--cyan),0 0 18px rgba(93,230,255,.6)}.path-diver.you b{font-size:13px}.path-diver.you.current{box-shadow:0 4px 0 color-mix(in srgb,var(--crew),#000 32%),0 0 0 3px #041a2e,0 0 0 6px var(--gold),0 0 18px rgba(255,215,106,.6)}
.you-flag{position:absolute;left:50%;top:-21px;transform:translateX(-50%);padding:2px 7px;border-radius:999px;background:var(--cyan);color:#04202f;font-size:9px;font-style:normal;font-weight:950;letter-spacing:.1em;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.4);animation:you-bounce 1.4s ease-in-out infinite}
.route-cell.active-cell::before{border-color:var(--gold);box-shadow:0 5px 0 rgba(4,26,44,.85),0 0 0 3px rgba(255,215,106,.35),0 0 22px rgba(255,215,106,.35)}
.move-sprite{position:absolute;z-index:9;transform:translate(-50%,-88%) rotateX(calc(var(--tilt)*-1));transform-origin:50% 100%;transition:left .16s ease,top .16s ease}.move-sprite .path-diver{animation:diver-hop .18s ease-in-out infinite alternate}
.action-panel{flex:none;min-height:0;padding:16px 18px}.action-panel h2{margin:0 0 13px;font-size:20px}.next-air{margin-bottom:15px;padding:10px;border:1px solid var(--line);border-radius:10px;color:#a9c2d3;font-size:12px;text-align:center;background:rgba(84,158,192,.06)}.next-air b{color:var(--gold)}.next-air small{display:block;margin-top:4px;color:#7f9cb1;font-size:10px}.direction-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.direction-buttons button,.salvage-buttons button{display:flex;align-items:center;gap:9px;min-height:80px;padding:10px;border:1px solid var(--line);border-radius:14px;color:white;text-align:left;background:rgba(74,153,191,.08)}.direction-buttons button:hover:not(:disabled),.salvage-buttons button:hover:not(:disabled){border-color:rgba(93,230,255,.55);background:rgba(66,174,213,.14);transform:translateY(-2px)}.direction-buttons i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:23px;font-style:normal;font-weight:950;background:#137da8}.direction-buttons .return-up i{color:#06233b;background:var(--gold)}.direction-buttons span,.salvage-buttons span{display:flex;flex-direction:column;font-size:13px;font-weight:900}.direction-buttons small,.salvage-buttons small{margin-top:3px;color:#8baabd;font-size:9px;font-weight:600;line-height:1.4}.dice-note{margin:10px 0 0;color:#7d9cb3;font-size:10px;text-align:center}.turn-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:150px;color:var(--muted);text-align:center}.turn-wait strong{color:white;font-size:18px}.turn-wait span{font-size:11px}.turn-wait .secondary{margin-top:12px;font-size:11px}.sonar-wait{display:grid;place-items:center;width:64px;height:64px;border:1px solid rgba(93,230,255,.35);border-radius:50%;background:radial-gradient(circle,rgba(71,222,245,.15),transparent 62%)}.sonar-wait i{width:50%;height:1px;background:var(--cyan);transform-origin:right;animation:sonar 1.7s linear infinite}.rolled{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.rolled>span{display:flex;gap:6px}.rolled>span b{display:grid;place-items:center;width:42px;height:42px;border:2px solid #d8f8ff;border-radius:9px;color:#08213a;font-size:19px;background:#e9fbff;box-shadow:0 4px 0 #77abc0}.rolled>strong{color:var(--cyan)}.salvage-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.salvage-buttons button>b{display:grid;place-items:center;width:38px;height:38px;border:2px solid #f7dc87;transform:rotate(45deg);color:#3c2608;background:#ffd56a}.salvage-buttons button>b+span{margin-left:4px}.skip-treasure>b{border-radius:50%!important;border-color:#83dff1!important;color:#05233a!important;background:#5eddf7!important;transform:none!important}.drop-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:8px}.drop-row select{min-height:42px;font-size:9px}.drop-row button{padding:0 12px;border:1px solid #d1b766;border-radius:10px;color:#2e2109;font-size:9px;font-weight:900;background:var(--gold)}
.side-panel{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 14px}.tab-bar{flex:none;display:flex;align-items:center;gap:6px;padding-bottom:9px}.tab-btn{padding:8px 14px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:12px;font-weight:900;background:transparent}.tab-btn.active{border-color:rgba(93,230,255,.45);color:#bff0ff;background:rgba(93,230,255,.13)}.tab-bar .live-dot{margin-left:auto}.tab-body{flex:1;min-height:0;display:flex;flex-direction:column}.side-panel[data-tab=chat] .log-pane{display:none}.side-panel[data-tab=log] .chat-pane{display:none}.side-panel .chat-messages{flex:1;min-height:80px;max-height:none}.log-list{flex:1;min-height:80px;display:flex;flex-direction:column;gap:5px;overflow:auto;padding:8px;border:1px solid rgba(139,204,235,.1);border-radius:12px;background:rgba(0,10,23,.48)}.log-list p{margin:0;padding:7px 9px;border-left:2px solid rgba(113,174,207,.25);color:#9cb8c9;font-size:11px;line-height:1.5;background:rgba(82,142,174,.04)}.log-list .log-return,.log-list .log-finish{border-color:var(--gold);color:#ead995}.log-list .log-treasure{border-color:#ad8cff;color:#cbb9ee}.log-list .log-round{border-color:var(--cyan);color:#9cdae8}
.result-overlay{position:fixed;z-index:900;inset:0;display:grid;place-items:center;padding:18px;background:radial-gradient(circle,rgba(10,82,111,.42),rgba(1,8,18,.92));backdrop-filter:blur(10px)}.result-card{width:min(470px,100%);padding:30px;border:1px solid rgba(105,224,247,.32);border-radius:25px;text-align:center;background:linear-gradient(145deg,#0a3454,#06182d);box-shadow:0 30px 90px #000}.result-card h1{margin:4px 0 20px;font-size:34px}.result-list{display:grid;gap:7px;margin-bottom:22px}.result-list>div{display:grid;grid-template-columns:24px 34px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:11px;text-align:left;background:rgba(63,136,173,.07)}.result-list>div>b{color:#6589a0}.result-list i{display:grid;place-items:center;width:29px;height:29px;border:2px solid white;border-radius:50%;color:#031321;font-size:9px;font-style:normal;background:var(--crew)}.result-list strong{font-size:11px}.result-list span{color:var(--gold);font-size:15px;font-weight:950}.result-list .winner{border-color:rgba(255,215,106,.6);background:rgba(255,215,106,.1)}
.summary-reason{margin:0 0 16px;padding:9px 12px;border-radius:10px;color:#a8e6f5;font-size:13px;font-weight:800;background:rgba(74,205,237,.1)}.summary-reason.oxygen{color:#ffb3be;background:rgba(255,101,119,.12)}.summary-list{display:grid;gap:8px;margin-bottom:22px}.summary-list>div{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;text-align:left;background:rgba(63,136,173,.07)}.summary-list>div.returned{border-color:rgba(82,224,160,.4);background:rgba(82,224,160,.07)}.summary-list>div.failed{opacity:.85}.summary-list i{display:grid;place-items:center;width:31px;height:31px;border:2px solid white;border-radius:50%;color:#031321;font-size:12px;font-style:normal;font-weight:950;background:var(--crew)}.summary-list strong{display:block;font-size:13px}.summary-list em{display:block;margin-top:3px;color:#9db9cb;font-size:11px;font-style:normal}.summary-list em b{color:var(--gold)}.summary-list>div>span{color:var(--gold);font-size:17px;font-weight:950;white-space:nowrap}
#fx-layer{position:fixed;z-index:1000;inset:0;pointer-events:none;opacity:0;transition:opacity .12s}#fx-layer.visible{opacity:1}
.dice-fx{position:absolute;left:50%;top:44%;display:flex;gap:14px;padding:18px 22px;border-radius:22px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(9,86,117,.88),rgba(3,26,48,.9));border:1px solid rgba(140,224,250,.35);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 60px rgba(72,205,240,.25)}.dice-fx .dice-row{display:flex;gap:14px}.dice-fx b{display:grid;place-items:center;width:74px;height:74px;border:5px solid white;border-radius:16px;color:#072038;font-size:37px;background:#e9fbff;box-shadow:0 7px 0 #6da4ba,0 14px 28px rgba(0,0,0,.35)}.dice-fx b.rolling{animation:die-roll .12s linear infinite alternate}.dice-fx b.settled{animation:dice-pop .5s cubic-bezier(.2,1.5,.4,1)}
#toast-layer{position:fixed;z-index:950;left:14px;bottom:16px;display:flex;flex-direction:column;gap:7px;max-width:min(430px,62vw);pointer-events:none}.toast{padding:10px 14px;border-left:3px solid var(--cyan);border-radius:10px;color:#d8eef8;font-size:13px;font-weight:700;line-height:1.45;background:rgba(4,24,44,.92);box-shadow:0 10px 28px rgba(0,0,0,.4);animation:toast-in .28s cubic-bezier(.2,1.2,.4,1)}.toast-gold{border-left-color:var(--gold);color:#f4e3ad}.toast.leaving{opacity:0;transform:translateX(-14px);transition:opacity .3s,transform .3s}
@keyframes route-flow{to{stroke-dashoffset:-.76}}@keyframes you-bounce{50%{transform:translateX(-50%) translateY(-4px)}}@keyframes diver-hop{to{transform:translateY(-7px)}}@keyframes die-roll{0%{transform:rotate(-14deg) translateY(-4px)}100%{transform:rotate(14deg) translateY(3px)}}@keyframes toast-in{from{opacity:0;transform:translateX(-16px)}}@keyframes drift{to{background-position:0 -110px,0 -170px}}@keyframes sub-float{to{transform:translateY(-9px)}}@keyframes bubble-up{to{transform:translateY(-90px);opacity:0}}@keyframes pulse{50%{opacity:.45}}@keyframes sonar{to{transform:rotate(360deg)}}@keyframes diver-bob{to{transform:translateY(-6px)}}@keyframes critical-pulse{50%{box-shadow:0 0 25px rgba(255,75,99,.22)}}@keyframes dice-pop{from{transform:scale(.25) rotate(-80deg);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:1000px){.game-grid{grid-template-columns:minmax(430px,1.5fr) minmax(280px,.8fr)}.landing{grid-template-columns:1fr;max-width:760px}.landing-hero{min-height:500px}.lobby-grid{grid-template-columns:1fr}.chat{min-height:340px}}
@media(max-width:620px){.landing{width:calc(100% - 18px);padding:10px 0 25px}.landing-hero{min-height:460px;padding:28px;border-radius:23px}.landing-hero h1{font-size:63px}.ocean-art{width:240px;height:230px}.entry-panel,.rooms-panel{padding:19px}.join-row{grid-template-columns:1fr}.lobby{width:calc(100% - 18px);padding:18px 0}.lobby-header{align-items:center}.lobby-header h1{font-size:37px}.crew-list{grid-template-columns:1fr}
.game{padding:3px 6px 4px}.game-header{min-height:0;grid-template-columns:auto 1fr auto;gap:8px;padding:4px 9px}.game-header .round-status{text-align:left}.game-header .round-status strong{font-size:11px}.game-brand{gap:8px}.game-brand>div>strong{display:none}.game-brand small{margin-top:0}.crew-strip{grid-auto-columns:minmax(128px,1fr);margin:2px 0;padding-bottom:2px}.crew-card{padding:5px 8px;gap:6px}.crew-card>span{display:none}.crew-card>div strong{font-size:12px}.crew-card>div small{font-size:9px}.crew-card>b{font-size:12px}.crew-token{width:24px;height:24px;border-width:2px}
.game-grid{display:flex;flex-direction:column;gap:7px}.board-column{flex:none;gap:7px}.control-column{flex:1;min-height:0;gap:7px}
.oxygen-card{padding:7px 12px}.oxygen-line{gap:9px}.oxygen-line>b{font-size:19px}.oxygen-line p{font-size:12px}.oxygen-track{height:10px}
.ocean-board{padding:8px 9px;border-radius:15px}.ocean-board>header{margin-bottom:2px}.ocean-board h2{font-size:13px}.depth-legend span{padding:3px 5px;font-size:6px}
.board-stage{container-type:inline-size;min-height:auto}.board-plane{width:97cqw;transform:rotateX(var(--tilt))}.board3d{height:auto;aspect-ratio:calc(var(--bw)/(var(--bh)*.8))}.route-cell>span{font-size:9px;min-width:15px}.path-diver{width:23px;height:23px;border-width:2px}.path-diver b{font-size:9px}.path-diver.you{width:27px;height:27px}.you-flag{top:-18px;font-size:8px}.dock-sprite em{font-size:8px}.submarine{width:66px;height:25px;border-width:2px}.submarine::before{right:-13px;top:5px;width:14px;height:13px;border-width:4px}.submarine i{top:-10px;left:27px;width:13px;height:10px;border-width:4px}.submarine b{left:12px;top:8px;font-size:6px}
.action-panel{padding:10px 12px}.action-panel h2{margin-bottom:8px;font-size:15px}.next-air{margin-bottom:8px;padding:7px;font-size:11px}.direction-buttons button,.salvage-buttons button{min-height:56px;padding:7px}.direction-buttons i{width:32px;height:32px;font-size:17px}.salvage-buttons button>b{width:28px;height:28px}.dice-note{margin-top:6px}.turn-wait{min-height:96px}.turn-wait strong{font-size:15px}.sonar-wait{width:44px;height:44px}.rolled{margin-bottom:8px}.rolled>span b{width:32px;height:32px;font-size:15px}
.side-panel{padding:8px 10px}.tab-btn{padding:6px 11px}.chat-form{grid-template-columns:1fr 52px}.chat-form input{min-height:38px}
.result-card{padding:23px}.dice-fx{top:38%;padding:12px 15px}.dice-fx b{width:54px;height:54px;font-size:27px;border-width:4px}#toast-layer{left:8px;right:8px;top:96px;bottom:auto;max-width:none}.toast{font-size:12px;padding:8px 11px}.rule-chips span{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}