/* Alice in Borderland: plain screen typography, hard edges, card-red accents. */
:root { --game-red:#df1227; }
body { font-family:"Helvetica Neue",Helvetica,Arial,"Noto Sans",sans-serif; font-weight:400; }
button,input,textarea,select { font-family:inherit; }
button { transition:background .15s,color .15s,border-color .15s; }
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--game-red); outline-offset:4px; }
.game-heading { font-size:clamp(32px,6vw,48px); font-weight:400; letter-spacing:-.045em; margin:0; line-height:1.1; }
.game-suits { display:grid;grid-template-columns:repeat(2,36px);gap:0 6px;font-family:Arial,sans-serif;font-size:42px;line-height:1.05; }
.red { color:var(--game-red); }
.screen { gap:22px; }
.screen .game-heading { margin-bottom:22px; }
.player-clock { width:min(100%,310px);height:auto; margin:24px 0 12px;fill:#111; }
.screen .title { font-size:10px;letter-spacing:.14em;color:#656565; max-width:310px; }
.big-btn { border-radius:0;border-width:1px;min-height:58px;font-size:16px;font-weight:400;letter-spacing:.15em;max-width:310px; }
.big-btn.primary { background:#111; }
.sheet,.overlay.center .sheet,.evidence,.case-file,.lock-btn,.lock-pick-btn,.mem-letters span { border-radius:0;box-shadow:none; }
.sheet { border-top:3px solid #111; }
.sheet h2 { font-weight:400; }
.call { background:#000; }
.avatar { background:transparent;border:1px solid #fff; }
:root:has(.dark-btn) { --bg:#000;--panel:#080808;--line:#484848;--text:#eee;--dim:#a0a0a0;--red:#df1227;--red-text:#ff5868;--ok:#eee; }
.dark-btn,nav button,details,textarea,#alert { border-radius:0; }
.dark-btn { font-weight:400;letter-spacing:.06em; }
.dark-btn.on { color:#fff;border-color:#fff; }
.console-heading { display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:18px; }
.console-heading h1 { font-size:28px;letter-spacing:-.04em;font-weight:400;margin:0; }
.console-heading span { font-size:23px; }.console-heading b { color:var(--game-red);font-weight:400; }
#panel:has(#tabs) { max-width:820px;padding-inline:24px; }
#tabs { gap:0;border-bottom:1px solid var(--line); }
#tabs button { border:0;border-bottom:2px solid transparent;min-height:52px; }
#tabs button.on { color:#fff;border-bottom-color:var(--game-red); }
#timer-display { color:#fff;font-weight:400; }
.online { color:#ddd; }
body:has(#clock.seg),body:has(main > svg#clock) { background:#fff;color:#111; }
body:has(main > svg#clock) main { gap:5vh; }
body:has(main > svg#clock) #clock { width:min(70vw,900px);filter:none;max-height:32vh; }
body:has(main > svg#clock) #clock .seg { fill:transparent; }
body:has(main > svg#clock) #clock .seg.on,body:has(main > svg#clock) #clock .dot { fill:#111; }
body:has(main > svg#clock) .label { color:#555;font-family:inherit;font-weight:400;letter-spacing:.18em; }
body:has(main > svg#clock) .result { color:#111;text-shadow:none;font-family:inherit;font-weight:400; }
body:has(main > svg#clock) .result div:last-child { color:var(--game-red);text-shadow:none; }
/* W-OS shares the monochrome game terminal language. */
:root:has(.workspace) { --bg:#000;--panel:#090909;--panel2:#121212;--raise:#181818;--line:#494949;--text:#eee;--dim:#aaa;--accent:#fff;--accent-ink:#000;--accent-soft:#ffffff14;--red:#df1227;--radius:0px; }
body:has(.workspace) .field { background:#000;border-radius:0; }
body:has(.workspace) .btn { border-radius:0;font-weight:400; }
body:has(.workspace) .workspace { background:#000;background-image:none!important; }
body:has(.workspace) .brand-w { color:#fff;background:transparent;border:1px solid #aaa;border-radius:0; }
/* Real custom dropdowns. The underlying select remains the data/form source. */
.custom-select { display:inline-flex;min-width:150px;position:relative; }
.custom-select-trigger { display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;text-align:left;min-height:44px;padding:10px 12px;border:1px solid var(--line,#555);border-radius:0;background:var(--panel,#fff);color:var(--text,#111);font-size:16px; }
.custom-select-trigger::after { content:'⌄';font-size:18px;color:var(--game-red); }
.custom-select-trigger[aria-expanded=true] { border-color:var(--text,#111); }
.custom-select-menu { position:fixed;inset:auto;margin:0;padding:4px;background:var(--panel,#fff);color:var(--text,#111);border:1px solid var(--line,#555);box-shadow:0 12px 28px #0003;max-height:280px;overflow:auto;z-index:10000; }
.custom-select-menu button { display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:0;text-align:left;background:transparent;color:inherit;font-size:16px; }
.custom-select-menu button:hover,.custom-select-menu button:focus-visible { background:var(--text,#111);color:var(--bg,#fff);outline:0; }
.custom-select-menu button[aria-selected=true]::after { content:'♦';color:var(--game-red); }
.custom-select-trigger:disabled { opacity:.45;cursor:default; }
@media(max-width:480px) { #panel:has(#tabs) { padding-inline:14px; } .console-heading h1 { font-size:25px; } #tabs button { font-size:11px; } .screen { padding-inline:28px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }
body:has(.workspace) .login,body:has(.workspace) .login-box { background:#000;border-radius:0;box-shadow:none; }
body:has(.workspace) .brand { font-family:inherit;font-weight:400; }
body:has(.workspace) .login-build { color:#aaa; }
.boot::before { content:'';width:32px;height:32px;border:4px dotted #fff;border-radius:50%;animation:loading-spin 1.5s linear infinite; }
.boot::after { content:'PLEASE WAIT';font-size:13px;letter-spacing:.12em;border-top:8px solid #fff;padding-top:18px;width:min(280px,70vw);text-align:center; }
@keyframes loading-spin { to { transform:rotate(360deg); } }
:root:has(.screen) { --muted:#686868; }
.big-btn { padding:12px; }
/* Experiment 143 identity — original specimen / pulse insignia. */
.lab-screen { position:relative;min-height:100dvh;gap:20px;background:#f8f8f5;padding-top:100px;padding-bottom:90px; }
.lab-screen::before { content:'';position:absolute;inset:20px;border:1px solid #deded8;pointer-events:none; }
.screen-meta { position:absolute;top:40px;left:40px;right:40px;display:flex;justify-content:space-between;gap:16px;font:10px/1.4 ui-monospace,monospace;letter-spacing:.12em;color:#64645d; }
.lab-screen .game-heading { font-size:clamp(16px,3vw,22px);letter-spacing:.17em;display:flex;flex-direction:column;align-items:center;gap:5px;margin:0; }
.experiment-number { font-size:clamp(55px,10vw,82px);font-weight:300;letter-spacing:-.07em;line-height:1; }
.lab-emblem { position:relative;width:100px;height:100px;flex:none; }
.lab-emblem img { display:block;width:100%;height:100%; }
.lab-emblem::after { content:'';position:absolute;left:19px;right:19px;height:1px;background:#bc2031;top:50%;box-shadow:0 0 10px #bc203140;animation:specimen-scan 4s ease-in-out infinite; }
.lab-screen .player-clock { width:min(100%,275px);margin:12px 0 0; }
.lab-screen .title { margin:0 0 18px;font-size:10px;letter-spacing:.16em; }
.lab-screen .big-btn { width:min(100%,340px);max-width:340px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;font-size:12px;letter-spacing:.1em;background:transparent; }
.lab-screen .big-btn.primary { color:#fff;background:#151515;border-color:#151515; }
#checkin { justify-content:center;position:relative;overflow:hidden; }
#checkin::after { content:'';position:absolute;inset:0;transform:translateX(-101%);background:linear-gradient(100deg,transparent,#ffffff18,transparent);animation:access-sweep 5s ease-in-out infinite; }
.lab-screen .big-btn:hover { border-color:#bc2031;background:#bc2031;color:#fff; }
.action-code { font:11px ui-monospace,monospace;opacity:.6; }
.action-arrow { font-size:20px;font-weight:300; }
.terminal-footer { position:fixed;bottom:36px;left:40px;right:40px;display:flex;justify-content:space-between;gap:12px;font:9px/1.4 ui-monospace,monospace;letter-spacing:.1em;color:#6c6c65;pointer-events:none; }
.lab-screen > :not(.screen-meta) { animation:terminal-reveal .65s ease both; }
.lab-screen .lab-emblem { animation-delay:.1s; }.lab-screen .player-clock { animation-delay:.2s; }.lab-screen .big-btn { animation-delay:.3s; }
.console-id { font:11px ui-monospace,monospace!important;letter-spacing:.14em;color:#aaa; }
.lab-icon { width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:square;stroke-linejoin:miter;display:block; }
@keyframes specimen-scan { 0%,100% { transform:translateY(-25px);opacity:0; } 25%,75% { opacity:.6; } 50% { transform:translateY(25px); } }
@keyframes access-sweep { 0%,65% { transform:translateX(-101%); } 100% { transform:translateX(101%); } }
@keyframes terminal-reveal { from { opacity:0;transform:translateY(10px);filter:blur(3px); } to { opacity:1;transform:none;filter:none; } }
/* Protocols replace generic bottom sheets: a focused, full-screen dossier. */
body.protocol-open { overflow:hidden; }
.overlay.protocol-overlay { background:#080808;align-items:stretch;padding:0;z-index:150;animation:protocol-open .3s ease both;color:#efefea; }
.protocol-overlay::before { content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#ffffff02 4px);pointer-events:none;z-index:1; }
.protocol-overlay .sheet,.protocol-overlay.center .sheet { position:relative;background:transparent;color:#efefea;width:min(100%,900px);max-width:900px;max-height:100dvh;min-height:100dvh;margin:auto;padding:28px 48px;display:flex;flex-direction:column;border:0;border-radius:0;animation:none;text-align:left;overflow:auto; }
.protocol-header { display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #393934;padding-bottom:20px;flex:none; }
.protocol-code { font:11px ui-monospace,monospace;letter-spacing:.14em;color:#babbb1; }
.protocol-code::before { content:'';display:inline-block;width:5px;height:5px;background:#ce3444;margin-right:10px;box-shadow:0 0 8px #ce344455; }
.protocol-close { display:flex;align-items:center;gap:16px;background:transparent;color:#ccc;border:0;font:10px ui-monospace,monospace;letter-spacing:.12em;min-height:44px;padding:0 0 0 12px; }
.protocol-close span { font:300 28px/1 'Helvetica Neue',sans-serif; }
.protocol-close:hover { color:#fff; }
.protocol-heading { padding:44px 0 28px;flex:none;animation:terminal-reveal .45s ease both; }
.protocol-kicker { color:#909187;font:10px ui-monospace,monospace;letter-spacing:.13em; }
.protocol-overlay .sheet h2 { font:300 clamp(30px,5vw,52px)/1.05 'Helvetica Neue',sans-serif;letter-spacing:-.045em;margin:12px 0 0; }
.protocol-body { flex:1;animation:terminal-reveal .5s .08s ease both; }
.protocol-intro { color:#b9b9b0;max-width:450px;font-size:15px;line-height:1.6;margin:0 0 24px; }
.protocol-body > ol { list-style:none;counter-reset:protocol;margin:0;padding:0; }
.protocol-body > ol > li { counter-increment:protocol;position:relative;padding:17px 0 17px 50px;border-top:1px solid #30302c;margin:0;font-size:17px;line-height:1.5;color:#d4d4cd; }
.protocol-body > ol > li::before { content:counter(protocol,decimal-leading-zero);position:absolute;left:0;top:21px;color:#a3a39a;font:11px ui-monospace,monospace; }
.protocol-overlay .actions { position:sticky;bottom:-28px;background:#080808;padding:24px 0;margin-top:24px;gap:12px;flex:none;border-top:1px solid #393934; }
.protocol-overlay .actions .big-btn { min-height:54px;border:1px solid #55554b;border-radius:0;background:transparent;color:#ddd;font:11px/1.4 ui-monospace,monospace;letter-spacing:.09em;max-width:none; }
.protocol-overlay .actions .big-btn.primary { background:#eaeae2;color:#111;border-color:#eaeae2; }
.protocol-overlay .actions .big-btn:hover { background:#bc2031;color:#fff;border-color:#bc2031; }
.protocol-bottom { font:9px ui-monospace,monospace;letter-spacing:.16em;color:#8f8f84;padding:12px 0 0;flex:none; }
.protocol-overlay .lock-pick { grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid #383832;margin-bottom:20px; }
.protocol-overlay .lock-pick-btn { display:grid;grid-template-columns:42px 1fr;grid-template-rows:20px auto;align-items:center;justify-items:start;column-gap:14px;min-height:102px;padding:20px 18px;background:transparent;color:#eee;border:0;border-bottom:1px solid #383832;transition:background .2s; }
.protocol-overlay .lock-pick-btn:nth-child(odd) { border-right:1px solid #383832; }
.protocol-overlay .lock-pick-btn .sym { grid-row:1 / 3; }.protocol-overlay .lock-id { color:#a3a396;font:10px ui-monospace,monospace;letter-spacing:.13em; }
.protocol-overlay .lock-pick-btn .name { font-size:16px;font-weight:400;text-align:left; }
.protocol-overlay .lock-pick-btn:hover { background:#1c1c18; }.protocol-overlay .lock-pick-btn:hover .lab-icon { color:#ef5465; }
.protocol-overlay .lock-pick-btn .used { color:#f16b78;top:12px;right:12px;font:10px ui-monospace,monospace; }
.protocol-overlay .link-btn { color:#b7b7ac;padding:12px 0;font-size:14px;text-underline-offset:5px; }
.protocol-overlay .hint-head { border-bottom:1px solid #393934;padding-bottom:24px;margin-bottom:28px;gap:20px; }
.protocol-overlay .hint-head .lab-icon { width:42px;height:42px;color:#e64a5c; }
.protocol-overlay .card-label { color:#f16b78;font:10px ui-monospace,monospace;letter-spacing:.14em;display:block;margin-bottom:14px; }
.protocol-overlay .hint-list li { border-color:#393934;padding:24px 0;margin:0; }
.protocol-overlay .card-text { font-size:clamp(20px,3vw,28px);font-weight:300;line-height:1.5;color:#e8e8df; }
.protocol-overlay .hint-list li:not(.new) .card-text { color:#a5a59a;font-size:17px; }
.protocol-overlay .status-line,.protocol-overlay .card-time { color:#b1b1a6; }
.protocol-overlay .history li { border-color:#393934;padding:20px 0; }
.protocol-overlay.is-closing { animation:protocol-close .18s ease forwards;pointer-events:none; }
@keyframes protocol-open { from { opacity:0;clip-path:inset(48% 0 48% 0); } to { opacity:1;clip-path:inset(0); } }
@keyframes protocol-close { to { opacity:0;transform:translateY(12px); } }
@media(max-width:600px) { .screen-meta { left:28px;right:28px;top:30px;font-size:8px; }.terminal-footer { left:28px;right:28px;bottom:28px;font-size:7px; }.lab-screen { padding-top:85px;padding-bottom:85px; }.lab-screen::before { inset:12px; }.protocol-overlay .sheet,.protocol-overlay.center .sheet { padding:18px 24px; }.protocol-heading { padding:32px 0 24px; }.protocol-overlay .actions { bottom:-18px;flex-wrap:wrap;padding:18px 0; }.protocol-overlay .actions .big-btn { min-width:130px;font-size:10px; }.protocol-overlay .lock-pick-btn { padding:16px 10px;column-gap:8px;grid-template-columns:28px 1fr; }.protocol-overlay .lock-pick-btn .name { font-size:14px; }.protocol-body > ol > li { font-size:16px;padding-left:36px; }.protocol-code { font-size:9px; }.protocol-overlay .hint-head h2 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }
.hint-locklabel { font:11px ui-monospace,monospace;letter-spacing:.12em;color:#bdbdaf; }
.protocol-overlay .lock-pick-btn,.protocol-body > ol > li { animation:entry-row .4s ease both; }
.protocol-overlay .lock-pick-btn:nth-child(2),.protocol-body > ol > li:nth-child(2) { animation-delay:.04s; }
.protocol-overlay .lock-pick-btn:nth-child(3),.protocol-body > ol > li:nth-child(3) { animation-delay:.08s; }
.protocol-overlay .lock-pick-btn:nth-child(4),.protocol-body > ol > li:nth-child(4) { animation-delay:.12s; }
.protocol-body > ol > li:nth-child(n+5) { animation-delay:.16s; }
@keyframes entry-row { from { opacity:0;transform:translateX(-8px); } to { opacity:1;transform:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }
.console-id { display:flex;align-items:center;gap:12px; }
.console-id img,.render-insignia { width:32px;height:32px;filter:invert(1) grayscale(1); }
.render-insignia { width:20px;height:20px;vertical-align:middle;margin-right:10px; }
body:has(.workspace) .brand-w { border:0; }
.brand-w img { width:100%;height:100%;filter:invert(1) grayscale(1); }
body:has(main > svg#clock) .game-heading { display:flex;align-items:baseline;gap:16px;font-size:22px;letter-spacing:.13em; }
body:has(main > svg#clock) .experiment-number { font-size:52px; }
body:has(main > svg#clock) main { gap:4vh; }
@media(max-height:700px) { .lab-screen { padding-top:70px;padding-bottom:65px;gap:14px; }.lab-screen .lab-emblem { width:76px;height:76px; }.lab-screen .title { margin-bottom:10px; }.lab-screen .status-line { margin:8px 0; } }
.custom-select-menu:not([hidden]) { animation:entry-row .18s ease both; }
#inspector.selected { animation:terminal-reveal .3s ease both; }
.protocol-header { position:sticky;top:-28px;z-index:2;background:#080808; }
@media(max-width:600px) { .protocol-header { top:-18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }
body:has(.lab-screen) { position:relative;background:#f8f8f5; }
body:has(.lab-screen) .terminal-footer { position:absolute; }

/* "I don't know what to do next" — first, full-width choice in the hint sheet. */
.protocol-overlay .lock-pick-next { width:100%;display:grid;grid-template-columns:42px 1fr;align-items:center;column-gap:14px;min-height:76px;padding:16px 18px;margin:0 0 14px;background:#1d1d19;color:#fff;border:1px solid #6a6a5c;text-align:left;font:inherit; }
.protocol-overlay .lock-pick-next .sym { font-size:24px;font-weight:700;text-align:center; }
.protocol-overlay .lock-pick-next .name { font-weight:600; }
