#online{height:100%;min-height:0;display:flex;flex-direction:column;gap:10px;max-width:580px;margin:auto;padding:12px}
#online[hidden]{display:none}
/* Cold/slow/failed image loads show the navy canvas, never the legacy scene. */
body[data-screen=online]::before{background-image:none}
.online-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.online-head h1{font-size:19px;flex:1;margin:0}.online-head button{font-size:13px;min-height:44px}
#onlineLibrary{margin-left:auto;flex-shrink:0}#onlineDissolve{flex-shrink:0}
#onlineNotice{margin:0;min-height:1.4em;font-size:14px;color:#e1f3fa}
.online-scroll{flex:1;min-height:0;overflow:auto;padding:2px 8px 24px;overscroll-behavior:contain}
#onlineQR{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:12px;border:1px solid #b2dbe55c;border-radius:16px;background:linear-gradient(135deg,#b2dbe51a,transparent),#1b31425c}
#onlineQR[hidden]{display:none}
#onlineQR canvas{display:block;width:var(--online-qr-size,120px);height:var(--online-qr-size,120px);border-radius:3px}
.online-qr-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
#onlineQR #onlineCode{margin:0;text-align:left;font-size:18px;line-height:1.5;overflow-wrap:anywhere}
#onlineCopy{min-height:44px;padding:8px 12px;font-size:14px}
.online-qr-frame{position:relative;display:inline-block;padding:5px;border:1px solid #b2dbe5a6;border-radius:9px;background:linear-gradient(145deg,#b2dbe530,#10283ca6);box-shadow:inset 0 1px 0 #effaff66,0 6px 24px #06142150}
.online-qr-frame:before,.online-qr-frame:after{content:"";position:absolute;pointer-events:none;width:8px;height:8px;border:1px solid #d8f0f6;transform:rotate(45deg);background:#26465a;top:-5px;left:calc(50% - 4px)}
.online-qr-frame:after{top:auto;bottom:-5px}
#onlineCode,#onlineCount{text-align:center;font-size:15px;margin:10px 0}
.online-ring{position:relative;aspect-ratio:1;max-width:430px;width:100%;margin:12px auto;background:radial-gradient(ellipse at center,#b2dbe508,transparent 64%);isolation:isolate}
.online-ring:before{content:none}
.online-ring button{position:absolute;transform:translate(-50%,-50%);width:56px;height:62px;min-height:44px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:7px 7px 15px 15px;font-size:13px;line-height:1.25;background:linear-gradient(145deg,#b2dbe51f,transparent 50%),#183347c9;border:1px solid #b2dbe590;border-top:2px solid #b2dbe5b3;color:#f4f8f9;box-shadow:inset 0 1px 0 #ffffff1f,0 5px 12px #07152170;touch-action:manipulation}
.online-ring button:before{content:"";position:absolute;top:-5px;width:6px;height:6px;background:#8cbacb;border:1px solid #d6edf3;transform:rotate(45deg);pointer-events:none}
.online-ring button strong{font-size:20px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.online-ring button small{font-size:10px;line-height:1.4;white-space:nowrap}
.online-ring button.mine{background:linear-gradient(145deg,#e4f6fa66,transparent 65%),#b2dbe5;color:#102536;box-shadow:0 0 17px #b2dbe533,inset 0 1px 0 #ffffff99}
.online-ring button.occupied{border-color:#e8d09b;background:linear-gradient(145deg,#e8d09b14,transparent 60%),#354756}
.online-ring button:disabled{opacity:.8}.online-ring button.mine:disabled{opacity:1}
.online-ring button:focus-visible{outline:2px solid #f4f8f9;outline-offset:4px}
#onlineRing button,#onlineRing button:active,#onlineRing button:focus{transform:translate(-50%,-50%);transition:box-shadow .15s ease,border-color .15s ease}
#onlineRing button.pending{border-color:#f4f8f9;box-shadow:inset 0 0 12px #b2dbe54d,0 0 12px #b2dbe526}
.online-ring button{background:linear-gradient(145deg,#b2dbe51a,transparent 42%,#13212d24),#1b31424d;border-color:#b2dbe578;box-shadow:inset 0 1px 0 #e5f5fa33,inset 0 -1px 0 #82abbd33,0 4px 10px #07152140;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);text-shadow:0 1px 3px #081622,0 0 7px #081622}
.online-ring button.occupied{background:linear-gradient(145deg,#e8d09b12,transparent 65%),#35475670;border-color:#e8d09b99}
.online-ring button.mine{background:linear-gradient(145deg,#e4f6fa66,transparent 65%),#b2dbe5c4;color:#102536;text-shadow:none}
.online-ring button:disabled{opacity:1}
@supports not ((backdrop-filter:blur(3px)) or (-webkit-backdrop-filter:blur(3px))){.online-ring button{background-color:#1b3142b3}.online-ring button.occupied{background-color:#354756c4}.online-ring button.mine{background-color:#b2dbe5}}
.online-footer{display:flex;gap:10px;padding:6px 0 max(4px,env(safe-area-inset-bottom));flex-shrink:0}.online-footer button{flex:1;min-height:48px}
#online .online-footer{position:static;margin:0;background:none;border:0;width:100%;z-index:auto}#online .online-footer button{font-size:16px}
#onlineDeal.not-full{background:#344653;color:#c8dbe6;opacity:.75}
.online-card{display:block;position:relative;margin:10px auto;width:min(100%,340px);aspect-ratio:5/7;padding:0!important;background:none!important;border:0!important;perspective:1000px}
.online-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s}.online-card.revealed .online-card-inner{transform:rotateY(180deg)}
.online-card-back,.online-card-front{position:absolute;inset:0;border:1px solid #b2dbe5;border-radius:18px;backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:linear-gradient(145deg,#244c60,#0a192b);color:#f4f8f9}
.online-card-back img{width:55%;height:auto}.online-card-front{transform:rotateY(180deg);gap:0}.online-card-front img{width:100%;height:90%;object-fit:contain}.online-card-front strong{font-size:22px;padding:8px}
.online-card-back{background:radial-gradient(ellipse at 50% 40%,#4b83932b,transparent 60%),linear-gradient(150deg,#24465a,#0b1b2d 75%);gap:12px;box-shadow:inset 0 0 35px #aadbea12}
.online-card-back:before{content:"";position:absolute;inset:12px;border:1px solid #b2dbe563;border-radius:11px;pointer-events:none}
.online-card-back:after{content:"";position:absolute;inset:20px;border:1px solid #b2dbe526;border-radius:4px;pointer-events:none;background:linear-gradient(45deg,transparent 48%,#c2e4ed66 49%,#c2e4ed66 51%,transparent 52%) left top/16px 16px no-repeat,linear-gradient(-45deg,transparent 48%,#c2e4ed66 49%,#c2e4ed66 51%,transparent 52%) right top/16px 16px no-repeat,linear-gradient(-45deg,transparent 48%,#c2e4ed66 49%,#c2e4ed66 51%,transparent 52%) left bottom/16px 16px no-repeat,linear-gradient(45deg,transparent 48%,#c2e4ed66 49%,#c2e4ed66 51%,transparent 52%) right bottom/16px 16px no-repeat}
.online-moons{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 4px;position:relative;width:68%}
.online-moons:before,.online-moons:after{content:"";height:1px;background:linear-gradient(90deg,transparent,#b2dbe580);width:23%;position:absolute;left:0}
.online-moons:after{left:auto;right:0;transform:rotate(180deg)}
.online-moons i{display:block;width:9px;height:9px;border-radius:50%;box-shadow:3px 0 0 #b2dbe5;transform:translateX(-2px)}
.online-moons i:nth-child(2){width:12px;height:12px;background:#d7eef3;box-shadow:0 0 12px #b2dbe550;transform:none}
.online-moons i:last-child{box-shadow:-3px 0 0 #b2dbe5;transform:translateX(2px)}
.online-card-back>strong{font-size:18px;letter-spacing:.08em}.online-card-back>#onlineCardSeat{font-size:15px;letter-spacing:.03em}.online-card-back>span:last-child{font-size:12px;color:#b4cedb}
.online-card-front .wolf{color:#f0a3b0}.online-card-front .god{color:#e8d09b}.online-card-front .villager{color:#c8dbe6}
.online-card.privacy-covered .online-card-inner{transition:none;transform:none}
#hostModeDialog .actions{flex-direction:column}#hostModeDialog button{min-height:52px}#hostModeDialog p{line-height:1.6}
#hostModeDialog .primary,#online .primary{background:linear-gradient(135deg,#b2dbe5d9,#638caaa6);border:1px solid #d4f1fa;color:#102b3c;box-shadow:inset 0 1px 0 #ffffff75,0 4px 18px #82c6df18;font-weight:700}
@media(max-width:340px){.online-ring button{width:46px;height:54px;font-size:12px}.online-ring button strong{font-size:18px}.online-head h1{font-size:17px}}
@media(prefers-reduced-motion:reduce){.online-card-inner{transition:none}}

/* Glass review, stage 3: stable seat geometry, original card faces and room behavior. */
#online :is(.online-head,.online-footer,.online-qr-info)>button{
 position:relative;
 background-image:linear-gradient(115deg,rgb(178 219 229 / .16),transparent 48%),linear-gradient(170deg,transparent 58%,rgb(232 208 155 / .045));
 border-color:var(--review-edge);box-shadow:var(--review-shadow);
 backdrop-filter:blur(10px) saturate(110%);-webkit-backdrop-filter:blur(10px) saturate(110%);
}
/* Reflect the plaza's cool sky and restrained lantern light without painting over labels. */
#online :is(#onlineLibrary,#onlineCopy,#onlineLeave,#onlineHome){background-color:rgb(27 49 66 / .56);text-shadow:0 1px 3px rgb(8 20 32 / .8)}
#online :is(.online-head,.online-footer,.online-qr-info)>button::before{content:'';position:absolute;top:2px;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgb(244 248 249 / .48),transparent);pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#online :is(#onlineLibrary,#onlineCopy,#onlineLeave,#onlineHome){background-color:rgb(27 49 66 / .88)}}
#online #onlineDeal:not(.not-full){
 background-image:linear-gradient(135deg,rgb(237 249 250 / .47),transparent 50%,rgb(74 133 153 / .18));
 background-color:rgb(178 219 229 / .7);border-color:rgb(210 238 244 / .8);color:var(--b3-on-primary);
}
#online #onlineDeal.not-full{background-color:rgb(27 49 66 / .78);background-image:var(--review-sheen);color:var(--b3-text-secondary);box-shadow:inset 0 1px 0 rgb(244 248 249 / .12)}
#onlineQR{background-image:var(--review-sheen);box-shadow:inset 0 1px 0 rgb(244 248 249 / .18),0 6px 16px rgb(3 12 23 / .12)}
#online .online-qr-frame{box-shadow:inset 0 1px 0 rgb(244 248 249 / .35),0 6px 16px rgb(3 12 23 / .16)}
#onlineRing button{
 background-image:linear-gradient(120deg,rgb(178 219 229 / .065),transparent 65%);
 box-shadow:inset 0 1px 0 rgb(244 248 249 / .22),inset 0 -1px 0 rgb(8 20 32 / .24),0 4px 10px rgb(3 12 23 / .2);
}
#onlineRing button.occupied{background-image:linear-gradient(120deg,rgb(232 208 155 / .07),transparent 65%)}
#onlineRing button.mine{background-image:linear-gradient(135deg,rgb(237 249 250 / .47),transparent 50%,rgb(74 133 153 / .18));box-shadow:inset 0 1px 0 rgb(244 248 249 / .45),0 0 0 2px rgb(178 219 229 / .15),0 6px 16px rgb(3 12 23 / .18)}
/* Only opacity animates; never move a seat or delay server-confirmed state. */
#onlineRing button::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--b3-primary),inset 0 0 18px rgb(178 219 229 / .14);opacity:0;transition:opacity .14s ease-out;pointer-events:none}
#onlineRing button:active:not(:disabled)::after,#onlineRing button.pending::after{opacity:1}
#onlineRing button.pending{border-color:var(--b3-text)}
#online :is(button:not(.online-card)):focus-visible{outline:2px solid var(--b3-text);outline-offset:-3px}
#online :is(.online-head,.online-footer,.online-qr-info)>button:active:not(:disabled){box-shadow:inset 0 2px 8px rgb(8 20 32 / .22),inset 0 0 0 1px var(--b3-primary)}
@media(hover:hover) and (pointer:fine){#onlineRing button:hover:not(:disabled)::after{opacity:.65}}
@media(prefers-reduced-motion:reduce){#onlineRing button::after{transition:none}}