/* Site chrome for the Koloss port: the single-card lobby, the load barrier, the countdown, the rankings/error overlays and the house audio strip. Deliberately NOT web/style.css: that stylesheet restyles , buttons and inputs globally, and dropping it on top of upstream's 2.5k-line style.css would repaint the whole game. This file only adds the site-required structures, drawn in upstream's own palette (cream on soot, amber accent, Staatliches / Special Elite) so the port keeps its visual identity. */ :root { --k-cream: #e8e4d8; --k-amber: #c8873a; --k-soot: rgba(7, 11, 18, 0.86); --k-line: rgba(232, 228, 216, 0.18); } /* ------------------------------------------------------------------ lobby */ .site-lobby { width: min(460px, 92vw); display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; background: var(--k-soot); border: 1px solid var(--k-line); border-radius: 4px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); } .site-lobby .lbl, .site-lobby .sub { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 228, 216, 0.6); margin: 0; } .site-lobby #joinSection, .site-lobby #lobbySection { display: flex; flex-direction: column; gap: 10px; } .site-lobby .name-input { width: 100%; padding: 10px 12px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--k-line); border-radius: 3px; color: var(--k-cream); font: inherit; font-size: 16px; letter-spacing: 0.05em; } .site-lobby .name-input:disabled { opacity: 0.75; } .player-list { display: flex; flex-direction: column; gap: 4px; min-height: 34px; max-height: 30vh; overflow-y: auto; } .player-list .player-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(0, 0, 0, 0.35); border-left: 3px solid var(--k-line); font-size: 14px; } .player-list .player-row.is-host { border-left-color: var(--k-amber); } .player-list .player-row .p-name { flex: 1; } .player-list .player-row .p-tag { font-size: 11px; letter-spacing: 0.1em; color: rgba(232, 228, 216, 0.55); } .player-list .player-row .p-tag.ready { color: #86c46a; } .lobby-settings { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); } .lobby-settings .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; } .lobby-settings select, .lobby-settings .toggle-btn { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--k-line); color: var(--k-cream); font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 3px; cursor: pointer; min-width: 132px; text-align: center; } .lobby-settings select:disabled, .lobby-settings .toggle-btn:disabled { opacity: 0.45; cursor: not-allowed; } .lobby-settings .toggle-btn[data-value="1"] { border-color: var(--k-amber); color: var(--k-amber); } .lobby-actions-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .back-to-games { display: block; text-align: center; margin-top: 4px; font-size: 13px; letter-spacing: 0.08em; color: rgba(232, 228, 216, 0.6); text-decoration: none; } .back-to-games:hover { color: var(--k-amber); } /* ------------------------------------------------------- house audio strip */ .audio-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 8px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--k-line); border-radius: 3px; } .audio-controls button { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--k-line); color: var(--k-cream); font: inherit; font-size: 12px; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 3px; cursor: pointer; } .audio-controls button:hover { border-color: var(--k-amber); color: var(--k-amber); } .audio-controls button.muted { opacity: 0.5; } .audio-controls .volume-slider { width: 76px; accent-color: var(--k-amber); } /* In-game: the strip is re-parented into the HUD so the five controls stay reachable during a match (autobattler's trick). */ #gameAudioControls { position: fixed; top: 10px; right: 10px; z-index: 40; pointer-events: auto; } #gameAudioControls:empty { display: none; } #gameAudioControls .audio-controls { transform: scale(0.85); transform-origin: top right; } /* ------------------------------------------------------------- overlays */ .k-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 10, 0.88); backdrop-filter: blur(4px); } .k-overlay.hidden { display: none; } .k-overlay-card { width: min(520px, 92vw); padding: 24px; text-align: center; background: var(--k-soot); border: 1px solid var(--k-line); border-radius: 4px; color: var(--k-cream); } .k-overlay-card h2 { margin: 0 0 8px; letter-spacing: 0.18em; text-transform: uppercase; } #loadingRows { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; } #loadingRows .load-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } #loadingRows .load-row .load-track { flex: 1; height: 6px; background: rgba(232, 228, 216, 0.14); border-radius: 3px; overflow: hidden; } #loadingRows .load-row .load-fill { height: 100%; background: var(--k-amber); width: 0; } #countdownNumber { font-size: 84px; line-height: 1; color: var(--k-amber); letter-spacing: 0.05em; } .rankings-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rankings-table th, .rankings-table td { padding: 6px 8px; border-bottom: 1px solid var(--k-line); text-align: left; } .rankings-table th { color: rgba(232, 228, 216, 0.6); letter-spacing: 0.1em; font-size: 11px; } .k-table-wrap { max-height: 46vh; overflow-y: auto; margin: 10px 0; } /* ------------------------------------------------- menu layout (site delta) Upstream's menu column is short (title + a handful of buttons), so #menu can centre it vertically and the dossier stamps — .menu-corner, absolutely positioned at top: 24px — always sit in empty space above it. This port puts the whole single-card lobby in that column, which makes it tall enough to fill the screen: centring then pushed the title eyebrow ("— WAVE SURVIVAL · SOLO & CO-OP —") up into the stamp band, where it collided with "AKTE NR. 7 // GEHEIM" at the top left. So reserve the stamp band as top padding, and centre SAFELY: `safe center` keeps upstream's centring while the column fits, and falls back to start alignment once it overflows instead of bleeding out past the top edge. The content box now begins below the stamps in both cases. Fixed here rather than in style.css so the delta from upstream stays a single block. */ #menu { padding-top: max(var(--gutter-y), 58px); align-items: safe center; } /* Below this height upstream hides .title-top outright, so there is nothing left to collide and the band can go back to the normal gutter. */ @media (max-height: 620px) { #menu { padding-top: var(--gutter-y); } } @media (max-width: 760px) { .site-lobby { width: min(96vw, 460px); } .lobby-settings select, .lobby-settings .toggle-btn { min-width: 108px; } } /* --------------------------------------------------- results screen The shared renderer (web/shared/fun_stats.css) is theme-neutral and reads --fs-accent from any ancestor, so setting it here is all it takes for the table and the award cards to come out in Koloss's sodium amber. */ #resultsOverlay { /* .k-overlay centres its card in a fixed, non-scrolling box. That is fine for a three-line dialog; the results card is a table plus up to six award cards and WILL be taller than a short phone / a landscape viewport, and a plain `center` then clips the top AND puts RETURN TO LOBBY out of reach. `safe center` degrades to flex-start on overflow, and the box scrolls. */ align-items: safe center; overflow-y: auto; padding: 16px 0; --fs-accent: var(--k-amber); --fs-text: var(--k-cream); --fs-dim: rgba(232, 228, 216, 0.55); --fs-edge: var(--k-line); --fs-panel: rgba(232, 228, 216, 0.05); } /* Wide enough for the full 10-stat table (12 columns with # and Player) at desktop sizes — at 760px the last two columns, Power-ups and POINTS, fell off the right edge of the card with no scrollbar to say so. */ .results-card { width: min(980px, 94vw); text-align: left; } .results-card h2 { text-align: center; } .results-kicker { text-align: center; font-size: 11px; letter-spacing: 0.24em; color: var(--k-amber); margin-bottom: 6px; } #resultsMeta, #resultsNote, #resultsAuto { text-align: center; font-size: 12px; letter-spacing: 0.1em; margin: 0 0 4px; } #resultsNote { color: var(--k-amber); } #resultsAuto { margin-top: 10px; opacity: 0.6; } #resultsTable { max-height: 38vh; overflow: auto; } #resultsOverlay .mbtn { display: block; margin: 14px auto 0; } @media (max-width: 620px) { .results-card { padding: 16px 12px; } } /* ------------------------------------------------- spectator (watch-only) The body HUD belongs to a body. A spectator has none, so every widget that reports one is hidden in a single rule rather than special-cased in each HUD setter. */ #hud.spectating #crosshair, #hud.spectating #hitmarker, #hud.spectating #bottom-right, #hud.spectating #bottom-left .vitals-block, #hud.spectating #bottom-left .points-block, #hud.spectating #perk-icons, #hud.spectating #prompt-wrap, #hud.spectating #lock-hint, #hud.spectating #down-overlay, #hud.spectating #revive-wrap { display: none !important; } #spectate-banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; max-width: 92vw; padding: 6px 12px; background: var(--k-soot); border: 1px solid var(--k-line); border-left: 3px solid var(--k-amber); border-radius: 4px; color: var(--k-cream); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: auto; } #spectate-banner.hidden { display: none; } /* The wave counter also lives at top centre and drew straight through the banner. A spectator needs both, so the counter drops below it. Only where the banner IS top-centre — under 620px it moves out from under the minimap and the counter can keep its place. */ @media (min-width: 621px) { #hud.spectating #wave-progress { top: calc(var(--hud-pad-y) + 56px); } } #spectate-banner .sb-eye { font-size: 15px; } #spectate-banner .sb-title { color: var(--k-amber); } /* One line, always. A long followed name used to wrap the banner into a three line lump ("FOLLOWING / DR. MAXIS- / RIC") that then covered the minimap. */ #spectate-banner > * { flex: none; } #spectate-banner #spectate-name { opacity: 0.85; flex: 0 1 auto; min-width: 0; /* "FOLLOWING " + the 16-character name cap = 26ch, so a legitimate name is never cut here; the ellipsis is only there for a hostile one. */ max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #spectate-banner .sb-hint { opacity: 0.45; font-size: 10px; } #spectate-banner .sb-btn { min-width: 34px; min-height: 34px; padding: 0 8px; background: rgba(232, 228, 216, 0.08); border: 1px solid var(--k-line); border-radius: 3px; color: var(--k-cream); font-size: 16px; line-height: 1; cursor: pointer; } #spectate-banner .sb-btn:active { background: rgba(200, 135, 58, 0.3); } /* On a phone the A/D hint is meaningless and the arrows are the whole control. */ body.touch-device #spectate-banner .sb-hint { display: none; } @media (max-width: 620px) { /* On a phone a top-CENTRED banner sits straight on top of the minimap, which owns the top-left corner and is ~half the screen wide there. Drop it into the free band under the map, left-aligned — the same clearance #tc-top and #mic-indicator already use. */ #spectate-banner { font-size: 10px; gap: 6px; padding: 5px 8px; left: var(--hud-pad-x, 10px); transform: none; top: calc(var(--hud-pad-y, 10px) + var(--map-size, 168px) + 30px); max-width: calc(100vw - 2 * var(--hud-pad-x, 10px)); } }