/* The game fits the viewport; interface elements float above it. */
body.playing{height:100dvh;min-height:0;overflow:hidden;background:#000}
.playing .backdrop{display:none}
.playing #play-screen,.playing #play-screen:fullscreen{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;margin:0;padding:0;background:#000;overflow:hidden}
.playing #play-screen #stage,.playing #play-screen:fullscreen #stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,160dvh);height:min(100dvh,62.5vw);min-width:0;max-width:none;aspect-ratio:1.6;margin:0;box-shadow:none}
.playing .hud,.playing .game-help{display:none}
.playing .topbar{position:fixed;top:12px;right:14px;left:auto;width:auto;min-height:0;height:auto;padding:0;margin:0;background:none;z-index:5;pointer-events:none}
.playing .topbar .account-pill,.playing .topbar #network-button,.playing .topbar #news-button,.playing .topbar #support-button{display:none!important}
.playing .topbar .top-actions{gap:7px;pointer-events:auto}
.playing .topbar .top-button.square{width:38px;height:38px;min-width:38px;min-height:38px;padding:7px;border:1px solid #ddc69940;border-radius:8px;background:#15110b77;opacity:.6;box-shadow:none;transition:opacity .2s,background .2s}
.playing .topbar .top-button.square:hover,.playing .topbar .top-button.square:focus-visible{opacity:1;background:#251b11d9;transform:none}
.playing #settings-button{order:0}.playing #top-sound{order:1}.playing #top-fullscreen{order:2}
.playing #online-strip{position:fixed;right:16px;bottom:7px;margin:0;padding:0;z-index:6;display:block}
.playing #current-server,.playing #visible-players{display:none}
.playing #players-in-game{border:0;background:none;color:#e2d5be;opacity:.36;font:11px 'Segoe UI',sans-serif;padding:4px 1px;transition:opacity .2s}
.playing #players-in-game:hover,.playing #players-in-game:focus-visible{opacity:1}
.playing #chat-game{--chat-alpha:.55;position:fixed;right:16px;bottom:36px;z-index:6;width:430px;height:230px;min-width:260px;min-height:140px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 110px);margin:0;border:1px solid rgba(194,183,147,.3);border-radius:3px;background:rgba(12,16,15,var(--chat-alpha));box-shadow:inset 0 0 0 1px #080b0a40;resize:both;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.playing #chat-game:hover,.playing #chat-game:focus-within{border-color:#bdbb9673}
.playing #chat-game .chat-head{border:0;height:21px;min-height:21px;padding:1px 5px;background:#0b121014;color:#bcc2ab;justify-content:flex-end;gap:3px;cursor:default}
.playing #chat-game .chat-head>span{margin-right:auto;font:10px 'Segoe UI',sans-serif;letter-spacing:.5px;color:#bcc4ae80}
.playing #chat-game .chat-head button{height:19px;min-width:23px;padding:0 4px;font:15px/1 'Segoe UI',sans-serif;color:#c2c7b1;opacity:.55}
.playing #chat-game .chat-head button:hover{opacity:1}
.playing #chat-game .chat-body{padding:0;display:flex;flex-direction:column;min-height:0;flex:1}
.playing #chat-game .chat-description{display:none}
.playing #chat-game .chat-messages{order:0;flex:1;min-height:0;height:auto;padding:4px 8px;margin:0;font:12px/1.48 'Segoe UI',sans-serif;text-shadow:0 1px 2px #000,1px 0 2px #000;scrollbar-color:#9f9e7e66 transparent}
.playing #chat-game .chat-message{padding:1px 0;color:#e6d8b2}
.playing #chat-game .chat-message[data-scope=general],.playing #chat-game .chat-message[data-scope=general] strong{color:#e1b852}
.playing #chat-game .chat-message[data-scope=screen],.playing #chat-game .chat-message[data-scope=screen] strong{color:#87cfd3}
.playing #chat-game .chat-message[data-scope=phase],.playing #chat-game .chat-message[data-scope=phase] strong{color:#a7ca79}
.playing #chat-game .chat-message strong{font-weight:600;margin:0 4px 0 0}
.playing #chat-game .chat-channel-label{font-size:10px;opacity:.8;margin-right:5px}
.playing #chat-game .chat-tabs{order:1;gap:0;margin:0;padding:0;border-top:1px solid #c6c4a037;background:#0a120c30}
.playing #chat-game .chat-tabs button{border:0;border-right:1px solid #a1a88928;border-radius:0;background:none;padding:5px 12px;color:#adb59e;font:11px 'Segoe UI',sans-serif}
.playing #chat-game .chat-tabs button.active{background:#b7b89416;color:#e5dbbb;box-shadow:inset 0 2px 0 #c9be88}
.playing #chat-game .chat-tabs button.chat-unread:after{content:'•';margin-left:5px;color:#f2d789}
.playing #chat-game .chat-form{order:2;gap:0;border-top:1px solid #9da58230;background:#060b0633;padding:3px}
.playing #chat-game .chat-form input{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none;padding:5px 6px!important;color:#e8e6c8!important;font:12px 'Segoe UI',sans-serif!important}
.playing #chat-game .chat-form input:focus{outline:none}
.playing #chat-game .chat-form button{border:0;border-left:1px solid #a9ae8a33;border-radius:0;background:none;color:#c8c9ac;padding:4px 9px;font-size:10px}
.playing #chat-game .chat-placeholder{font-size:11px;color:#b8c0aa77}
.playing #chat-game.chat-collapsed{height:23px!important;min-height:23px;resize:none}
.playing #chat-game.chat-collapsed .chat-body{display:none}
.playing #chat-game.chat-new{animation:chat-message-arrived 1.4s ease-out}
@keyframes chat-message-arrived{0%{border-color:#e4d18fb0;box-shadow:0 0 14px #d8ca7420}100%{border-color:rgba(194,183,147,.3);box-shadow:none}}
.chat-adjustments{position:absolute;right:5px;top:24px;width:215px;padding:12px 14px;border:1px solid #b2b59166;border-radius:4px;background:#182019f5;z-index:3;box-shadow:0 5px 22px #0007;color:#d0d2bb;font:11px 'Segoe UI',sans-serif}
.chat-adjustments label{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:7px 0}
.chat-adjustments input{width:120px;min-width:0;padding:0;accent-color:#bdbf8b}
.chat-adjustments p{font-size:10px;color:#a1ad95;margin:8px 0 2px;line-height:1.5}
.playing #touch{position:fixed;left:12px;right:auto;bottom:12px;gap:15px;z-index:5;opacity:.5}
.playing #touch>div{gap:5px}.playing #touch button{height:42px;min-width:40px;border-radius:7px;background:#16170d55;font-size:12px}
@media(max-width:750px){.playing .topbar{top:8px;right:9px}.playing .topbar .top-button.square{width:34px;height:34px;min-width:34px;min-height:34px}.playing #chat-game{right:10px;bottom:31px;width:340px;height:190px;min-width:220px;max-width:calc(100vw - 20px);max-height:45dvh}.playing #chat-game .chat-messages{font-size:11px}.playing #online-strip{right:11px;bottom:4px}.playing #players-in-game{font-size:10px}.playing #touch{left:8px;bottom:8px;gap:8px}.playing #touch button{min-width:34px;height:36px;font-size:10px}.playing #chat-game .chat-tabs button{padding:4px 12px}}
@media(pointer:coarse) and (orientation:portrait){.playing #chat-game{bottom:65px}.playing #online-strip{bottom:43px}}
@media(prefers-reduced-motion:reduce){.playing #chat-game.chat-new{animation:none}}
.chat-adjustments{max-height:calc(100% - 28px);overflow-y:auto}
.settings-session-actions{display:flex;flex-direction:column;gap:8px;border-top:1px solid #8e663b40;margin-top:16px;padding-top:16px}
.sheet-tabs .settings-session-actions button{font-size:11px;line-height:1.7;padding:11px 12px;border-color:#9873474d;background:#b38b5120}
.sheet-tabs .settings-session-actions .settings-exit{color:#854d32}
.sheet-tabs .settings-session-actions button:hover{background:#f6e2b6a3;border-color:#98734799}
.sheet-heading{padding-right:115px}
.sheet-heading #close-sheet{position:absolute;top:-20px;right:-23px;color:#f6e5be;background:linear-gradient(#89683e,#70512f);border-color:#765530;box-shadow:inset 0 1px 0 #e6c39045,0 2px 5px #5f432322}
.sheet-heading #close-sheet:hover{background:linear-gradient(#795a34,#5d4023);border-color:#624322;transform:none}
@media(max-width:1000px){.sheet-heading #close-sheet{top:-16px;right:-16px}}
@media(max-width:750px){.sheet-heading{padding-right:90px}.sheet-heading #close-sheet{top:-13px;right:-10px}.settings-session-actions{width:100%;flex-direction:row;margin-top:8px;padding-top:13px}.sheet-tabs .settings-session-actions button{flex:1;text-align:center;font-size:10px}}

/* Pixel lettering for chat messages, with comfortable line spacing. */
.chat-host .chat-message,.playing #chat-game .chat-message{font-family:var(--pixel);font-size:8px;line-height:1.9;letter-spacing:0;font-weight:400;text-shadow:1px 1px 0 #0009}
.chat-host .chat-message strong,.playing #chat-game .chat-message strong{font-weight:400}


/* Channel, author and message each have a distinct visual weight. */
.chat-host .chat-channel-label,.playing #chat-game .chat-channel-label{font-size:6px;opacity:.55;margin-right:7px;vertical-align:1px;color:#b4b0a6}
.chat-host .chat-message .chat-author,.playing #chat-game .chat-message .chat-author{font-size:8px;margin-right:8px;opacity:1}
.chat-host .chat-message[data-scope=general] .chat-author{color:#e1b852}
.chat-host .chat-message[data-scope=phase] .chat-author{color:#a7ca79}
.chat-host .chat-message[data-scope=screen] .chat-author{color:#87cfd3}
.chat-host .chat-message .chat-text,.playing #chat-game .chat-message .chat-text{font-size:8px;color:#eee7d9}


/* Compact chat remains readable and usable without expanding on arrival. */
.playing #chat-game.chat-collapsed{height:130px!important;min-height:130px;cursor:text}
.playing #chat-game.chat-collapsed .chat-body{display:flex}
.playing #chat-game.chat-collapsed .chat-tabs{display:none}
.playing #chat-game.chat-collapsed.chat-hide-minimized-messages{height:58px!important;min-height:58px}
.playing #chat-game.chat-collapsed.chat-hide-minimized-messages .chat-messages{display:none}
.chat-adjustments .chat-minimized-setting{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-adjustments input[data-minimized-messages]{width:16px;height:16px;accent-color:#d9bc7d}


/* Minimized: recent messages float above the input without a history panel. */
.chat-recent{display:none}
.playing #chat-game.chat-collapsed,.playing #chat-game.chat-collapsed.chat-hide-minimized-messages{height:58px!important;min-height:58px;overflow:visible;border-color:transparent;background:transparent;box-shadow:none}
.playing #chat-game.chat-collapsed .chat-messages{display:none}
.playing #chat-game.chat-collapsed .chat-head{background:transparent}
.playing #chat-game.chat-collapsed .chat-form{background:rgba(12,16,15,.2);border:1px solid #bcb48b25}
.playing #chat-game.chat-collapsed .chat-recent{position:absolute;left:0;right:0;bottom:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;max-height:200px;overflow:hidden;padding:0 8px 8px;background:none;border:0}
.playing #chat-game.chat-collapsed .chat-recent .chat-message{animation:chat-floating-fade 6.5s linear both;text-shadow:1px 1px 0 #000,0 0 3px #000}
.playing #chat-game.chat-collapsed.chat-hide-minimized-messages .chat-recent{display:none}
@keyframes chat-floating-fade{0%,76.923%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.playing #chat-game.chat-collapsed .chat-recent .chat-message{animation-timing-function:steps(1,end)}}


.sword-start{display:flex;align-items:center;gap:10px;align-self:flex-end;margin:-6px 24px 3px;padding:9px 13px;border:1px solid #aa8a5344;border-radius:999px;background:#110e1566;color:#bfb29c;font:7px/1.6 var(--pixel);transition:background .2s,color .2s,transform .2s}.sword-start svg{width:19px;height:19px;flex:none}.sword-start small{font:6px var(--pixel);opacity:.65}.sword-start[aria-pressed=true]{color:#f0cd84;border-color:#d6ae6588;background:#8e653424}.sword-start:hover{transform:translateX(3px);color:#ffe1a3}


.phase-intro{font-size:12px;color:#94734c;margin:0 0 20px}.phase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.phase-card{padding:0;border:1px solid #a88a5655;border-radius:12px;overflow:hidden;background:#1b1516;color:#ead2a3;text-align:left;transition:transform .25s,border-color .25s,box-shadow .25s}.phase-card:not(:disabled):hover{transform:translateY(-4px);border-color:#edc87e;box-shadow:0 9px 24px #22110833}.phase-image{position:relative;aspect-ratio:1.6;overflow:hidden;background:#070708}.phase-image img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.phase-darkness{position:absolute;inset:0;background:#000;opacity:0}.phase-lock{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);color:#c7bca4;filter:drop-shadow(0 2px 3px #000)}.phase-card.is-locked{cursor:not-allowed;color:#9a9286;border-color:#72665233}.phase-card.is-locked img{filter:grayscale(.8)}.phase-card.is-locked .phase-darkness{opacity:.72}.phase-caption{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:12px 10px}.phase-caption strong{font:7px/1.8 var(--pixel)}.phase-caption span{font:10px 'Segoe UI',sans-serif;opacity:.7}.phase-card.is-unlocking .phase-lock{animation:phase-lock-release 1.3s ease forwards}.phase-card.is-unlocking .phase-darkness{animation:phase-reveal 1.4s ease forwards}@keyframes phase-lock-release{0%,20%{opacity:1;transform:translate(-50%,-50%) rotate(0)}35%{transform:translate(-50%,-50%) rotate(-12deg)}45%{transform:translate(-50%,-50%) rotate(12deg)}60%{opacity:1;transform:translate(-50%,-60%) rotate(0)}100%{opacity:0;transform:translate(-50%,-100%) scale(1.3)}}@keyframes phase-reveal{0%,35%{opacity:.72}100%{opacity:0}}@media(max-width:800px){.phase-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}@media(max-width:480px){.phase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.phase-caption strong{font-size:6px}.phase-caption{padding:10px 8px}}@media(prefers-reduced-motion:reduce){.phase-card.is-unlocking .phase-lock{animation:phase-lock-release .01s forwards}.phase-card.is-unlocking .phase-darkness{animation:phase-reveal .01s forwards}}


.battle-rules{font-size:12px;line-height:1.85;color:#785a36}.battle-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.battle-actions .secondary{border-radius:999px;color:#6f4a23;border-color:#9a713e77;background:#f8e9c64d;padding:10px 16px}.battle-actions button:disabled{opacity:.4;cursor:not-allowed}.battle-actions input{max-width:220px}.battle-actions #battle-search,.battle-actions #battle-start,.battle-actions #battle-again{color:#ffe5b1;background:#664323;border-color:#b28b4b}.battle-code{font-family:var(--pixel);font-size:9px;color:#79501e}.battle-standings{margin-top:20px}.battle-player{padding:13px 4px;border-bottom:1px solid #99743f44;display:flex;justify-content:space-between;gap:20px;font-size:12px}.battle-player strong{color:#5c3c1e}.battle-player span{color:#806744}.battle-player[data-status=out]{opacity:.55}.battle-room-list{display:grid;gap:10px;margin-top:20px;font-size:12px;color:#806744}.battle-queue-status{font:10px/2 var(--pixel);color:#785225}#battle-hud{position:fixed;top:16px;left:16px;z-index:5;font:8px/1.8 var(--pixel);color:#edce8a;background:#140e1899;padding:10px 14px;border:1px solid #b58a4944;border-radius:7px;pointer-events:none}@media(max-width:650px){.battle-player{flex-direction:column;gap:6px}#battle-hud{font-size:6px;max-width:55vw;padding:7px;left:8px;top:8px}.battle-queue-status{font-size:8px}}


#battle-hud{pointer-events:auto;cursor:pointer}#battle-notifications{position:fixed;left:50%;top:85px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;max-width:90vw;pointer-events:none}.battle-notice{background:#180f17e8;border:1px solid #c19b6344;border-radius:8px;padding:12px 17px;color:#d8cab5;font:11px/1.6 'Segoe UI',sans-serif;box-shadow:0 5px 25px #0006;animation:battle-notice-in .3s ease-out}.battle-notice strong{color:#e9c47f}.battle-notice span{font-variant-numeric:tabular-nums}@keyframes battle-notice-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}#battle-board{position:fixed;inset:0;z-index:70;background:radial-gradient(ellipse at top,#372218,#0b090ff7 70%);color:#f1dfba;overflow:auto;padding:clamp(24px,6vw,80px);backdrop-filter:blur(12px)}.battle-board-inner{max-width:1350px;margin:0 auto}#battle-board h2{font:clamp(18px,3vw,34px)/1.7 var(--pixel);margin:22px 0;color:#eed09b}.battle-board-note{color:#a99a83;font-size:12px}.battle-board-table{margin:35px 0;min-width:650px}.battle-board-row{display:grid;grid-template-columns:1.4fr 1fr 1.3fr .8fr .9fr;gap:18px;padding:19px 15px;border-bottom:1px solid #b0936030;font:13px/1.6 'Segoe UI',sans-serif;align-items:center;font-variant-numeric:tabular-nums}.battle-board-header{color:#ac9472;font-size:10px;text-transform:uppercase;letter-spacing:1px}.battle-board-row.is-self{background:#ad853414;border-left:2px solid #d7b568}.battle-board-row[data-status=out]{color:#ab6865}.battle-board-row[data-status=complete]{color:#a7c28a}#battle-board-close{max-width:300px;border-radius:999px}#battle-board .battle-board-inner{overflow-x:auto}@media(max-width:650px){#battle-board{padding:24px 15px}#battle-board h2{font-size:16px}.battle-board-row{font-size:11px;gap:10px;padding:14px 8px}#battle-notifications{top:65px}.battle-notice{font-size:10px;padding:9px 12px}}


#battle-notifications{left:auto;right:16px;transform:none;width:340px;max-width:calc(100vw - 32px)}@media(max-width:650px){#battle-notifications{top:auto;bottom:100px;width:280px}}


.battle-identity{display:flex;align-items:center;gap:16px;min-width:0}.battle-avatar{display:flex;align-items:flex-end;justify-content:center;flex:0 0 48px;height:75px;padding:5px 0;background:radial-gradient(ellipse at bottom,#e5be6a1f,transparent 70%);border-bottom:1px solid #b5985a55}.battle-avatar img{height:66px;width:auto;max-width:44px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 #0005)}.battle-player .battle-avatar{height:61px;flex-basis:38px}.battle-player .battle-avatar img{height:54px}.battle-board-row[data-status=out] .battle-avatar img{filter:grayscale(.7) drop-shadow(2px 2px 0 #0005);opacity:.65}.battle-board-row{min-height:104px}.battle-board-header{min-height:0}@media(max-width:650px){.battle-identity{gap:9px}.battle-avatar{flex-basis:35px;height:62px}.battle-avatar img{height:54px;max-width:32px}.battle-board-row{min-height:85px}.battle-board-header{min-height:0}}


.phase-grid{align-items:start}.phase-one-entry{min-width:0}.phase-one-entry .phase-card{width:100%}.phase-one-entry .sword-start{width:100%;margin:8px 0 0;padding:9px 8px;gap:7px;font-size:6px;justify-content:flex-start;background:#39281b0d;color:#785126;border-color:#a07b4744}.phase-one-entry .sword-start span{flex:1;min-width:0;text-align:left}.phase-one-entry .sword-start[aria-pressed=true]{color:#6b4419;background:#b9883426;border-color:#ad7f37aa}.phase-one-entry .sword-start:hover{transform:translateY(-1px);color:#4f3215}.phase-one-entry .sword-start svg{width:17px;height:17px}

/* In-game controls for other players only; independent character/name opacity. */
#ghost-visibility{display:none}body.playing #ghost-visibility{display:inline-flex;order:1}body.playing #top-sound{order:2}body.playing #top-fullscreen{order:3}#ghost-visibility svg{width:22px;height:22px}#ghost-visibility[aria-expanded=true]{opacity:1;border-color:#8bffe4;background:#24354e}
#ghost-visibility-panel{position:fixed;right:14px;top:60px;z-index:12;width:min(300px,calc(100vw - 28px));padding:16px;border:1px solid #8198b9;border-radius:12px;background:#141d32f5;box-shadow:0 8px 28px #0008;color:#dce9fa;pointer-events:auto;font:14px/1.5 'Segoe UI',sans-serif}#ghost-visibility-panel[hidden]{display:none}#ghost-visibility-panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}#ghost-visibility-panel>header>strong{font-size:15px;color:#99f4e4}#ghost-visibility-panel>header button{border:0;background:transparent;color:#dce9fa;font:26px/1 'Segoe UI',sans-serif;padding:4px 8px;min-width:32px;min-height:32px}#ghost-visibility-panel .setting-row{display:grid;grid-template-columns:1fr;gap:8px;padding:12px 0;margin:0;border:0;border-top:1px solid #8198b930}#ghost-visibility-panel .setting-row:first-child{grid-template-columns:1fr auto;align-items:center}#ghost-visibility-panel .setting-row strong{display:flex;justify-content:space-between;font:600 13px/1.4 'Segoe UI',sans-serif;color:#dce9fa}#ghost-visibility-panel .setting-row small{display:block;font:11px/1.5 'Segoe UI',sans-serif;color:#a8bad5}#ghost-visibility-panel input[type=range]{width:100%;min-width:0;accent-color:#8bffe4;cursor:pointer}#ghost-visibility-panel input[type=checkbox]{accent-color:#8bffe4}#ghost-visibility-panel output{color:#a1efdf;font-variant-numeric:tabular-nums}@media(max-width:750px){#ghost-visibility-panel{top:50px;right:9px;width:min(280px,calc(100vw - 18px))}}
/* Message alpha is independent from the chat panel/background and controls. */
.chat-messages .chat-message{opacity:var(--chat-message-opacity,1)}.chat-host .chat-recent{opacity:var(--chat-message-opacity,1)}#ghost-visibility-panel{max-height:calc(100dvh - 76px);overflow-y:auto}
#ghost-visibility-panel>header{position:static;width:auto;max-width:none;min-height:0;padding:0;margin:0 0 6px;background:none;box-shadow:none}#ghost-visibility-panel>header>strong{flex:1;text-align:left;white-space:nowrap}#ghost-visibility-panel>header>button{flex:none}
#phase-stopwatch{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:4;padding:0 12px;color:#f7e2b5;background:#000;font:clamp(10px,1.45vw,20px)/1.4 var(--pixel);font-variant-numeric:tabular-nums;letter-spacing:.08em;pointer-events:none;text-shadow:0 1px 3px #000;}
@media(orientation:landscape) and (any-pointer:coarse){#phase-stopwatch{font-size:11px}}
/* Compact in-game visibility controls. */
#ghost-visibility-panel{width:min(300px,calc(100vw - 20px));padding:12px 14px;border-radius:12px;background:#151e33f5;box-shadow:0 8px 26px #0006;max-height:calc(100dvh - 74px);}
#ghost-visibility-panel>header{margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid #99aaca30;}
#ghost-visibility-panel>header>strong{font-size:14px;}
#ghost-visibility-panel .online-options{margin:0;padding:0;border:0;background:none;box-shadow:none;}
#ghost-visibility-panel .setting-row,#ghost-visibility-panel .setting-row:first-child{display:grid;grid-template-columns:minmax(85px,1fr) 126px;gap:10px;align-items:center;padding:10px 0;margin:0;border:0;border-bottom:1px solid #99aaca18;border-radius:0;min-height:0;}
#ghost-visibility-panel .setting-row small{display:none;}
#ghost-visibility-panel .setting-row strong{font-size:12px;gap:5px;line-height:1.4;}
#ghost-visibility-panel output{font-size:10px;font-variant-numeric:tabular-nums;}
#ghost-visibility-panel .setting-row input[type=range]{margin:0;width:100%;min-width:0;height:22px;}
#ghost-visibility-panel .setting-row input[type=checkbox]{justify-self:end;margin:0;}
#ghost-visibility-panel .ghost-reset{display:block;margin:9px 0 0 auto;padding:4px 0;border:0;background:none;box-shadow:none;color:#a8bad3;font:11px/1.5 system-ui;min-height:26px;}
#ghost-visibility-panel .ghost-reset:hover{color:#a0f8e6;}
@media(orientation:landscape) and (max-height:500px){#ghost-visibility-panel{top:52px;max-height:calc(100dvh - 62px)}#ghost-visibility-panel .setting-row{padding:7px 0}}
.phase-time-result{position:fixed;left:50%;bottom:14dvh;translate:-50% 0;z-index:11;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;color:#bceefa;font:14px/1.5 var(--pixel);text-shadow:0 2px 8px #000;animation:phase-time-arrive 4.2s ease both;}
.phase-time-result>span{font-size:clamp(22px,3.3vw,36px);font-variant-numeric:tabular-nums;}
.phase-time-result.new-record{color:#ffe295;filter:drop-shadow(0 0 12px #ffd65a66);}
.new-record>strong::before,.new-record>strong::after{content:' ✦ ';color:#fff2bc;}
.new-record>strong{animation:record-glow 1s ease-in-out 3;}
@keyframes phase-time-arrive{0%{opacity:0;transform:translateY(18px) scale(.9)}14%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes record-glow{50%{text-shadow:0 0 20px #ffe6a4;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.phase-time-result,.new-record>strong{animation:none}}
#phase-clock-toggle{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:7;width:36px;height:36px;display:grid;place-items:center;padding:7px;border:1px solid #8799bb66;border-radius:9px;background:#172036ba;color:#9eacc3;opacity:.7;transition:opacity .2s,color .2s,border-color .2s;touch-action:manipulation;}
#phase-clock-toggle svg{width:100%;height:100%}
#phase-clock-toggle:hover,#phase-clock-toggle[aria-pressed=true]{opacity:1;color:#a4f5e5;border-color:#8bf4df;}
@media(any-pointer:coarse),(max-width:750px){#phase-clock-toggle{bottom:max(178px,calc(env(safe-area-inset-bottom) + 162px));}}
@media(orientation:landscape) and (any-pointer:coarse){#phase-clock-toggle{bottom:150px;left:24px;}}