/* 吞噬 2026 — JKGame 2026 house style.
   Tokens match portal-2026/tailwind.config.ts so the game looks like the rest of the site. */

:root {
    --bg: #050505;
    --panel: #0a0a0c;
    --fg: #f2f2f2;
    --mute: #9a9aa2;
    --dim: #5c5c66;
    --lime: #c8ff3d;
    --cyan: #4de1ff;
    --line: rgba(255, 255, 255, 0.08);
    --line2: rgba(255, 255, 255, 0.16);
    --card: rgba(255, 255, 255, 0.035);
    --display: 'Space Grotesk', 'Noto Sans HK', sans-serif;
    --cjk: 'Noto Sans HK', 'PingFang HK', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--cjk);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: rgba(200, 255, 61, 0.35); }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.display { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; }
.lime { color: var(--lime); }
.dim { color: var(--dim); }
.label { color: var(--mute); margin: 0 0 6px; }

/* ---------------------------------------------------------------- game area */
#gameAreaWrapper {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
#gameAreaWrapper.playing { opacity: 1; pointer-events: auto; }

#cvs { display: block; width: 100%; height: 100%; cursor: crosshair; }

#hud {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    pointer-events: none;
}

.panel-hud {
    min-width: 180px;
    padding: 10px 12px;
    background: rgba(10, 10, 12, 0.78);
    border: 1px solid var(--line);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

#status .title {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 6px;
}

#liveBoard { list-style: none; margin: 0; padding: 0; font-size: 13px; }
#liveBoard li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 1px 0;
    color: var(--mute);
    white-space: nowrap;
}
#liveBoard li .nm { overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
#liveBoard li.me { color: var(--lime); font-weight: 700; }
#liveBoard li .ms { font-family: var(--mono); font-size: 11px; color: var(--dim); }
#liveBoard li.me .ms { color: var(--lime); }
#liveBoard li .vf { color: var(--lime); }
#liveBoard li .boss {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: #ff6b5e;
}
#liveBoard li .bot {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--dim);
}

#runStats { display: flex; gap: 16px; }
/* An explicit `display` beats the browser's default [hidden] rule, so say it again here —
   without this the panel stayed on screen while its .hidden property was true. */
#runStats[hidden] { display: none !important; }
#runStats .k {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--mute);
}
#runStats b { font-family: var(--display); font-size: 20px; }

#shield { display: flex; align-items: baseline; gap: 8px; border-color: rgba(200,255,61,0.4); }
#shield[hidden] { display: none !important; }
#shield .k {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--lime);
}
#shield b { font-family: var(--display); font-size: 18px; color: var(--lime); }
#bestBox[hidden] { display: none !important; }

#merge { display: flex; align-items: baseline; gap: 8px; border-color: rgba(77,225,255,0.4); }
#merge[hidden] { display: none !important; }
#merge .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--cyan); }
#merge b { font-family: var(--display); font-size: 18px; color: var(--cyan); }

/* Bottom-right minimap: the map is 5000x5000 and a screen shows a fraction of it. */
#minimap {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    width: 150px;
    height: 150px;
    border: 1px solid var(--line);
    border-radius: 10px;
    /* Nearly opaque: at 0.72 the field showed through and a virus behind the map made the
       dots unreadable. */
    background: rgba(8, 8, 10, 0.94);
    pointer-events: none;
}
@media (max-width: 860px) { #minimap { width: 96px; height: 96px; } }

#roundBox { display: flex; align-items: baseline; gap: 10px; }
#roundBox[hidden] { display: none !important; }
#roundBox .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--mute); }
#roundBox > b { font-family: var(--display); font-size: 18px; }
#roundBox.ending > b { color: #ff6b6b; }

#roundCard {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7;
    width: min(380px, 86vw);
    padding: 18px 20px;
    background: rgba(10, 10, 12, 0.92);
    border: 1px solid rgba(200, 255, 61, 0.45);
    border-radius: 14px;
    pointer-events: none;
    animation: feedIn 0.3s cubic-bezier(.2,.9,.3,1.4) both;
}
#roundCard[hidden] { display: none !important; }
#roundCard h3 {
    font-family: var(--display);
    font-size: 24px;
    margin: 0 0 12px;
    color: var(--lime);
}
#roundCard ol { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
#roundCard li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    border-top: 1px solid var(--line);
    color: var(--mute);
}
#roundCard li:first-child { border-top: 0; }
#roundCard li b { color: var(--fg); font-weight: 500; }
#roundCard .bot { font-family: var(--mono); font-size: 9px; color: var(--dim); }
#roundCard p:last-child { margin: 0; }

ol.rounds { list-style: none; margin: 10px 0 0; padding: 0; }
ol.rounds li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--mute);
}
ol.rounds .no { font-family: var(--mono); font-size: 10px; color: var(--dim); }

#spectateBar {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(10, 10, 12, 0.88);
    border: 1px solid var(--line2);
    border-radius: 999px;
}
#spectateBar[hidden] { display: none !important; }
#spectateBar .btn { padding: 8px 16px; font-size: 14px; }

/* Reconnecting: centred, over the frozen field, above everything but the round card. */
#reconnect {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 22px;
    border-color: rgba(255, 107, 107, 0.5);
    text-align: center;
}
#reconnect[hidden] { display: none !important; }
#reconnect b { font-family: var(--display); font-size: 20px; color: #ff6b6b; }
#reconnect i { font-style: normal; color: var(--fg); }

/* Kill feed: three lines, top centre, gone in a few seconds. */
#killFeed {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 6;
    text-align: center;
    pointer-events: none;
}
#killFeed li {
    margin-bottom: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.75);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--fg);
    animation: feedIn 0.25s cubic-bezier(.2,.9,.3,1.4) both;
}
#killFeed li.mine { border-color: rgba(200,255,61,0.5); color: var(--lime); font-weight: 700; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }

#fieldPreview {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 8px;
    border-radius: 8px;
    background: #070707;
    border: 1px solid var(--line);
}

/* -------------------------------------------------------------------- chat */
.chatbox {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 340px;
    max-width: 46vw;
    z-index: 5;
}
.chat-list {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    max-height: 190px;
    overflow: hidden;
    font-size: 13px;
}
.chat-list li {
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(10, 10, 12, 0.6);
    margin-top: 2px;
    color: var(--fg);
    overflow-wrap: anywhere;
}
.chat-list li.system { color: var(--mute); background: transparent; font-size: 12px; }
.chat-list li.me .who { color: var(--lime); }
.chat-list li .who { font-weight: 700; color: var(--cyan); }
.chat-list li .who .vf { color: var(--lime); }

.chat-input {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--cjk);
    font-size: 13px;
    color: var(--fg);
    background: rgba(10, 10, 12, 0.8);
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
}
.chat-input:focus { border-color: rgba(200, 255, 61, 0.5); }

/* ------------------------------------------------------------ mobile buttons */
#mobile { display: none; }
#mobile input {
    position: absolute;
    bottom: max(24px, env(safe-area-inset-bottom));
    width: 84px;
    opacity: 0.9;
    touch-action: manipulation;
}
#mobile .split { right: 118px; }
#mobile .feed { right: 20px; }
#cvs { touch-action: none; }          /* the canvas is a joystick, not a scrollable page */

/* --------------------------------------------------------------- start menu */
#startMenuWrapper {
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow-y: auto;
    background: var(--bg);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
#startMenuWrapper.hidden { opacity: 0; transform: translateY(-12px); pointer-events: none; }

.grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(128, 128, 128, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128, 128, 128, 0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
    pointer-events: none;
}

#startMenu {
    position: relative;
    max-width: 1080px;
    min-height: 100%;
    margin: 0 auto;
    padding: 22px 22px 30px;
    display: flex;
    flex-direction: column;
}

.brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.brand-link { display: flex; align-items: center; gap: 10px; }
.brand-link img { display: block; border-radius: 7px; }
.ghost { color: var(--mute); border: 0; background: none; cursor: pointer; padding: 0; }
.ghost:hover { color: var(--lime); }

.columns {
    display: grid;
    /* Three columns on a wide screen. The side panels used to stack into one, which made a
       1300px column next to a 500px one and a screen of empty space under the title. */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    /* The wardrobe spans the whole width on its own row: it holds nearly eighty items and
       a live preview, and in a column it was 200px of usable space. */
    grid-template-areas: "main side-a side-b" "look look look";
    gap: 28px;
    align-items: start;
    align-content: center;      /* tall screens: sit in the middle, not pinned to the top */
    flex: 1;
}
.col-main { grid-area: main; }
.col-side { grid-area: side-a; }
.col-side-b { grid-area: side-b; }
.col-look { grid-area: look; }

@media (max-width: 1340px) {
    /* Two columns: the second stack moves UNDER the title, where the space already was. */
    .columns {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-areas: "main side-a" "side-b side-a" "look look";
    }
}

h1.display { font-size: clamp(44px, 8vw, 92px); line-height: 0.92; margin: 0 0 14px; }
.lede { color: var(--mute); line-height: 1.7; margin: 0 0 22px; font-size: 15px; }

.play { display: flex; flex-wrap: wrap; gap: 10px; }
#playerNameInput {
    flex: 1 1 220px;
    min-width: 180px;
    padding: 13px 14px;
    font-family: var(--cjk);
    font-size: 15px;
    color: var(--fg);
    background: var(--card);
    border: 1px solid var(--line2);
    border-radius: 10px;
    outline: none;
}
#playerNameInput:focus { border-color: var(--lime); }
#playerNameInput:disabled { color: var(--lime); border-style: dashed; }

.btn {
    padding: 13px 22px;
    font-family: var(--cjk);
    font-weight: 700;
    font-size: 15px;
    color: var(--fg);
    background: var(--card);
    border: 1px solid var(--line2);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(200, 255, 61, 0.45); }
.btn.primary { background: var(--lime); border-color: var(--lime); color: #050505; }
.btn.primary:hover { background: #d6ff6b; }

.input-error { display: block; margin: 10px 0 0; color: #ff6b6b; font-size: 13px; opacity: 0; }
.input-error.show { opacity: 1; }

.keys { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 8px; color: var(--dim); }
.keys kbd {
    font-family: var(--mono);
    background: var(--card);
    border: 1px solid var(--line2);
    border-radius: 5px;
    padding: 2px 6px;
    margin-right: 5px;
    color: var(--fg);
}

#settings { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
#settings.open { max-height: 260px; }
#settings label {
    display: block;
    margin: 10px 0;
    color: var(--mute);
    font-size: 14px;
    cursor: pointer;
}
#settings input { accent-color: var(--lime); margin-right: 8px; }

/* -------------------------------------------------------------- side panels */
.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}
/* A title and a set of tabs. When the panel is too narrow for both on one line, the TABS
   move down as a block — they used to shrink until each word broke in half, which is how
   「排行榜 · 深空場」 ended up spread over two lines with 「擊殺」 sitting on its own. */
.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
    flex-wrap: wrap;
}
.panel-head .label { white-space: nowrap; }
/* The label carries the room name, which is the part that grows: let it be dropped rather
   than let it push the tabs off the panel. */
.panel-head .label #rankMode { white-space: nowrap; }
.tabs { display: flex; gap: 4px; flex: 0 0 auto; flex-wrap: nowrap; }
.tab {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dim);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    cursor: pointer;
}
.tab.active { color: #050505; background: var(--lime); }

.jkid-body { display: flex; flex-direction: column; gap: 10px; }
.jkid-who { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.jkid-who .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; }
.jkid-body p { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.6; }
.jkid-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.jkid-actions a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 12px;
    border: 1px solid var(--line2);
    border-radius: 8px;
    color: var(--fg);
}
.jkid-actions a.primary { background: var(--lime); border-color: var(--lime); color: #050505; font-weight: 700; }
.jkid-actions a:hover { border-color: var(--lime); }



.goal {
    position: relative;
    margin: 12px 0 0;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--fg);
    border: 1px solid var(--line2);
    border-radius: 8px;
    overflow: hidden;
}
.goal:empty { display: none; }
.goal::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--fill, 0%);
    background: rgba(200, 255, 61, 0.18);
}
.goal { z-index: 0; }
.jkid-body p.since { color: var(--lime); font-size: 12px; }
#lookBalance { color: var(--lime); }

ol.rank { list-style: none; margin: 10px 0 0; padding: 0; }
ol.rank li {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
}
ol.rank li:first-child { border-top: 0; }
ol.rank .no { font-family: var(--mono); font-size: 11px; color: var(--dim); }
ol.rank li:nth-child(1) .no { color: var(--lime); }
ol.rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.rank .sc { font-family: var(--mono); font-size: 12px; color: var(--mute); }
ol.rank li.me { color: var(--lime); }
ol.rank li.me .sc { color: var(--lime); }
ol.rank li.empty { display: block; color: var(--dim); font-size: 13px; padding: 10px 0; }

#rankFoot { margin: 12px 0 0; }

#startMenu footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
#startMenu footer a { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- run over card */
#runOver {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 5, 0.82);
    backdrop-filter: blur(6px);
}
#runOver[hidden] { display: none !important; }
#runOver .card {
    width: min(460px, 92vw);
    padding: 26px;
    background: var(--panel);
    border: 1px solid var(--line2);
    border-radius: 16px;
    text-align: left;
}
#runOver h2 { font-size: 34px; margin: 0 0 18px; }
.run-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.run-grid .k { display: block; color: var(--mute); margin-bottom: 4px; }
.run-grid b { font-family: var(--display); font-size: 26px; }
#runNote { color: var(--lime); font-size: 14px; min-height: 18px; margin: 0 0 18px; }
.run-actions { display: flex; gap: 10px; }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 860px) {
    .columns { grid-template-columns: 1fr; grid-template-areas: "main" "look" "side-a" "side-b"; }
    h1.display { font-size: 52px; }
    .chatbox { display: none; }

    /* The HUD was a fifth of a phone screen: ten rows of board at desktop size, then the
       stats. Everything shrinks, the board shows five (renderLiveBoard), and the panels
       lose the min-width that was sized for a mouse-and-keyboard screen. */
    #hud { top: 8px; right: 8px; gap: 5px; }
    #perf { top: 8px; left: 8px; }
    .panel-hud { min-width: 0; padding: 6px 8px; border-radius: 8px; }
    #status .title { font-size: 9px; margin-bottom: 3px; }
    #liveBoard { font-size: 11px; }
    #liveBoard li { gap: 8px; }
    #liveBoard li .nm { max-width: 96px; }
    #liveBoard li .ms { font-size: 10px; }
    #liveBoard li.gap { margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--line2); }
    #runStats { gap: 10px; }
    #runStats .k { font-size: 9px; }
    #runStats b { font-size: 14px; }
    #roundBox > b, #shield b, #merge b { font-size: 14px; }
}

@media (pointer: coarse) {
    #mobile { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------- power-up HUD */
.buffs { display: flex; flex-direction: column; gap: 5px; }
.buffs:empty { display: none; }
.buff {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(6, 6, 8, 0.72);
    border: 1px solid currentColor;
    font-family: var(--cjk);
    font-size: 12px;
}
.buff b { font-family: var(--mono); font-size: 11px; min-width: 26px; text-align: right; }
/* The time left, as a bar that empties — readable without reading the number. */
.buff i {
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.85;
    transform-origin: left center;
}





/* ============================================================== dressing room
   A wide panel in the wide column. Everything below assumes ~560px, which is what
   the layout now gives it — the previous version had 120px and it showed. */
.look-row { display: flex; gap: 18px; align-items: flex-start; margin-top: 12px; }

.look-stage { position: relative; flex: none; }
#lookPreview {
    display: block;
    width: 196px;
    height: 196px;
    border-radius: 12px;
    /* Drawn at 260 and shown at 172: the effects are thin lines and they alias badly at 1:1. */
    background: radial-gradient(circle at 50% 38%, #101014 0%, #08080a 70%);
    border: 1px solid var(--line);
}
/* Says the cell is showing something you have not bought, so a preview is never mistaken
   for what you are wearing. */
#lookPreviewTag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 7px;
    font-size: 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: var(--lime);
    border: 1px solid var(--lime);
}
#lookPreviewTag[hidden] { display: none; }

.look-picks { flex: 1; min-width: 0; }

/* --- tabs */
.look-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.look-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    font-size: 11px;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--line2);
    border-radius: 7px 7px 0 0;
    background: transparent;
    color: var(--mute);
    cursor: pointer;
}
.look-tabs button:hover { color: var(--fg); background: var(--card); }
.look-tabs button.on {
    color: var(--lime);
    background: var(--card);
    border-color: var(--line2);
    border-bottom-color: transparent;
}
/* How many are still locked in there, so "anything left in this tab?" is answerable
   without opening it. */
.look-tabs button i {
    padding: 0 5px;
    font-size: 9px;
    font-style: normal;
    border-radius: 999px;
    background: var(--line2);
    color: var(--fg);
}
.look-tabs button.on i { background: var(--lime); color: #050505; }

/* --- how a flag is worn */
.look-style { display: flex; gap: 5px; margin: 10px 0 0; }
.look-style[hidden] { display: none; }
.look-style button {
    padding: 4px 12px;
    font-size: 10px;
    border: 1px solid var(--line2);
    border-radius: 999px;
    background: transparent;
    color: var(--mute);
    cursor: pointer;
}
.look-style button.on { border-color: var(--lime); color: var(--lime); background: var(--card); }

/* --- the items themselves
   A grid, not a wrapping row: rows line up, nothing is clipped by the panel edge, and a
   slot with 61 items looks the same as one with 8. */
.look-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 6px;
    margin-top: 10px;
    max-height: 268px;
    overflow-y: auto;
    padding-right: 6px;
}
.look-grid::-webkit-scrollbar { width: 8px; }
.look-grid::-webkit-scrollbar-track { background: transparent; }
.look-grid::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }

.look-grid button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 5px 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--mute);
    font-family: var(--cjk);
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.look-grid button:hover { border-color: var(--line2); color: var(--fg); }
.look-grid button.on { border-color: var(--lime); color: var(--lime); }
.look-grid button.locked { color: var(--dim); }
.look-grid button.locked .chip-art { opacity: 0.6; }
/* Previewed once, waiting for the second click that actually spends the points. */
.look-grid button.armed {
    border-color: var(--lime);
    color: var(--lime);
    box-shadow: 0 0 0 1px var(--lime);
}
.look-grid button.armed .chip-art { opacity: 1; }
.look-grid .chip-art { width: 40px; height: 40px; border-radius: 50%; }
.look-grid .cost {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--dim);
}
.look-grid button.on .cost, .look-grid button.armed .cost { color: inherit; }

/* Colours need no label and no box. */
.look-grid.colors { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
.look-grid.colors button { padding: 0; border: none; background: none; }
.look-grid.colors .chip-art {
    width: 28px;
    height: 28px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.look-grid.colors button.on .chip-art { border-color: var(--fg); }

/* 61 flags: the tile IS the label. The name is on hover and under the preview. */
.look-grid.flags { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.look-grid.flags button { padding: 4px; gap: 0; }
.look-grid.flags .chip-art { width: 40px; height: 27px; border-radius: 2px; }

#lookNote { margin: 10px 0 0; min-height: 15px; }

@media (max-width: 900px) {
    /* Stacked, the preview goes on top and gets the full width to itself. */
    .look-row { flex-direction: column; align-items: stretch; }
    .look-stage { align-self: center; }
}

/* ---------------------------------------------------------------- room picker */
.rooms { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.rooms button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 14px;
    min-width: 132px;
    text-align: left;
    border: 1px solid var(--line2);
    border-radius: 10px;
    background: var(--card);
    color: var(--mute);
    font-family: var(--cjk);
    cursor: pointer;
}
.rooms button:hover { border-color: var(--mute); color: var(--fg); }
.rooms button.on { border-color: var(--lime); color: var(--lime); }
.rooms button b { font-size: 14px; font-weight: 700; }
.rooms button .who { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; }
.rooms button .blurb { font-size: 11px; color: var(--dim); }
.rooms button.on .blurb { color: var(--mute); }
#roomNote { margin: 0 0 14px; }
#roomNote:empty { display: none; }

/* ------------------------------------------------------------- FPS and ping
   Diagnostics, so: small, monospaced, and no wider than they need to be. The rest of the
   HUD has a 180px floor to keep the numbers from jumping about as they change; two short
   readings do not need it. */
#perf {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    min-width: 0;
    display: flex;
    gap: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
}
#perf[hidden] { display: none !important; }
#perf > div { display: flex; align-items: baseline; gap: 5px; }
#perf > div[hidden] { display: none !important; }
#perf .k { color: var(--dim); font-size: 9px; letter-spacing: 0.12em; }
#perf b { font-size: 13px; color: var(--fg); font-weight: 500; }
#perf .u { color: var(--dim); font-size: 9px; }
/* Under 30fps the cell stops following the mouse; over 150ms you are reacting to the past.
   Both are worth colouring, and nothing else is. */
#perf.bad b { color: #ff6b5e; }

/* Gravity drag: the same shape as the other HUD chips, in the colour of the field itself. */
#drag {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
    border-color: rgba(140, 170, 255, 0.45);
}
#drag[hidden] { display: none !important; }
#drag .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: #8caaff; }
#drag b { font-family: var(--display); font-size: 18px; color: #8caaff; }
#drag .u { font-family: var(--mono); font-size: 10px; color: var(--dim); }

/* ══════════════════════════════════════════════════════════════════════════
   黑洞 2026 — its own page.
   
   Not 吞噬 2026 with a different accent: a different game gets a different room
   to stand in. JKGame keeps the top bar and the footer, and everything between
   them belongs to this game. The palette is the disk's own — warm white through
   amber on near-black — and the lime that means "JKGame" everywhere else is
   used only where it still means that.
   ══════════════════════════════════════════════════════════════════════════ */
#hero, #heroGpu { display: none; }

body.deepspace-page {
    --bg: #03040a;
    --panel: rgba(9, 11, 20, 0.72);
    --line: rgba(190, 205, 255, 0.10);
    --line2: rgba(190, 205, 255, 0.20);
    --card: rgba(190, 205, 255, 0.045);
    --mute: #97a0bd;
    --dim: #616a89;
    /* The disk's own colours. Lime survives only where it still means "JK ID". */
    --lime: #ffd9a8;
    --cyan: #9bb8ff;
}

body.deepspace-page .grid-bg { display: none; }

body.deepspace-page #hero,
body.deepspace-page #heroGpu {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* The GPU hero sits directly on top of the 2D one and fades in when it has a frame, so the
   swap is never a flash of black — there is always a hole on screen. */
body.deepspace-page #heroGpu {
    opacity: 0;
    transition: opacity 900ms ease;
}
body.deepspace-page #heroGpu.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    body.deepspace-page #heroGpu { transition: none; }
}
/* The hole is bright; the copy sits on a gradient that keeps it readable without
   putting a box over the artwork. */
body.deepspace-page #startMenuWrapper::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, #03040a 4%, rgba(3, 4, 10, 0.86) 34%, rgba(3, 4, 10, 0.15) 62%, rgba(3, 4, 10, 0.5) 100%);
}
body.deepspace-page #startMenu { position: relative; z-index: 1; max-width: 1180px; }

/* The one JK-branded strip, kept deliberately quiet. */
body.deepspace-page .brand { margin-bottom: 6vh; }
body.deepspace-page .brand-link span { color: var(--mute); }

/* The hero copy: bigger, looser, and standing on the artwork rather than in a column. */
body.deepspace-page .col-main { padding: 4vh 0 6vh; }
body.deepspace-page h1.display {
    font-size: clamp(64px, 11vw, 148px);
    line-height: 0.92;
    letter-spacing: -0.045em;
    text-shadow: 0 0 80px rgba(255, 217, 168, 0.28);
}
body.deepspace-page h1.display .lime { color: #ffd9a8; }
body.deepspace-page .lede { font-size: 17px; max-width: 27em; color: #c3cbe4; }
body.deepspace-page .label { letter-spacing: 0.3em; color: #8b93b4; }

body.deepspace-page .play input {
    background: rgba(6, 8, 16, 0.8);
    border-color: var(--line2);
}
body.deepspace-page .btn.primary {
    background: linear-gradient(180deg, #fff1dc, #ffc978);
    border-color: #ffd9a8;
    color: #180f02;
    box-shadow: 0 0 34px rgba(255, 201, 120, 0.34);
}
body.deepspace-page .btn.primary:hover { box-shadow: 0 0 48px rgba(255, 201, 120, 0.5); }

/* Panels float over the sky instead of sitting on a page. */
body.deepspace-page .panel {
    background: var(--panel);
    backdrop-filter: blur(14px);
    border-color: var(--line);
}
body.deepspace-page .rooms button.on { border-color: #ffd9a8; color: #ffd9a8; }
body.deepspace-page .look-tabs button.on { color: #ffd9a8; }
body.deepspace-page .look-tabs button.on i { background: #ffd9a8; color: #180f02; }
body.deepspace-page .look-grid button.on { border-color: #ffd9a8; color: #ffd9a8; }
body.deepspace-page .look-grid button.armed { border-color: #ffd9a8; color: #ffd9a8; box-shadow: 0 0 0 1px #ffd9a8; }
body.deepspace-page .tabs .tab.active { background: #ffd9a8; color: #180f02; }
body.deepspace-page #lookPreviewTag { color: #ffd9a8; border-color: #ffd9a8; }
body.deepspace-page .goal::before { background: rgba(255, 217, 168, 0.16); }
/* JK ID's own marks stay JK ID's colour: it is the one thing on this page that is not
   this game's, and pretending otherwise would be worse than the colour clash. */
body.deepspace-page .jkid-actions a.primary { background: #c8ff3d; border-color: #c8ff3d; color: #050505; }

@media (max-width: 900px) {
    body.deepspace-page #startMenuWrapper::after {
        background: linear-gradient(180deg, rgba(3, 4, 10, 0.35) 0%, rgba(3, 4, 10, 0.88) 46%, #03040a 72%);
    }
    body.deepspace-page h1.display { font-size: clamp(52px, 15vw, 92px); }
}