/* The stone UI skin (src/skin/, design: the prototype artifact "Giga Blow prototyp UI", docs/ART-DIRECTION.md).
   Everything here is scoped under html.skin (set by src/skin/skin.js; ?oldui shows the old look for comparison).
   Rules of the look:
   - frames, bars, buttons and markers are pixel art: hewn stone drawn on canvases (src/skin/frames.js, 3 screen px per art px)
     or hard-edged CSS in the same palette (box-shadow steps of 3 px, hard colour bands), never soft gradients, pills or glows
   - colour means rarity / danger only; text is bone on dark stone with a hard 2–3 px drop shadow
   - type: Jersey 10 for numbers and short labels, Grenze for sentences, Jacquarda Bastarda 9 for the logo only
   - icons are the game's own glyphs as pixel sprites (src/skin/pixicon.js) */
html.skin {
  --bone: #ece4d2; --bone2: #b9b2a4; --bone3: #7d786e; --ink: #07090b; --out: #05070a;
  --rune: #c8fff2; --rune2: #6fd9c2; --sgold: #ffd23f; --sblood: #d8402c; --sember: #ff9a6a;
  --f-px: 'Jersey 10', 'Courier New', monospace;
  --f-text: 'Grenze', Georgia, serif;
  --f-title: 'Jacquarda Bastarda 9', 'Grenze', Georgia, serif;
  --px-shadow: 0 2px 0 var(--ink);
  --px-shadow3: 0 3px 0 var(--ink);
  /* a socket / tab drawn in CSS: dark outline, lit lower lip (a hollow) */
  --socket: 0 0 0 3px var(--out), inset 0 3px 0 #05070a, inset 0 -3px 0 #2a3a44;
  --tab: 0 0 0 3px var(--out), inset 0 3px 0 #2e4250, inset 0 -3px 0 #06080b;
}
html.skin .framed { background-size: 100% 100% !important; background-repeat: no-repeat !important; background-position: 0 0 !important; image-rendering: pixelated; } /* the stone frame is the background (frames.js) */
html.skin canvas.px { display: block; image-rendering: pixelated; }
html.skin svg.gi.px { overflow: visible; }

/* ---------------------------------------------------------------- shared bits */
html.skin kbd, html.skin .key { min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: 0; background: #10161c; color: var(--bone);
  font: 400 1em/1 var(--f-px); box-shadow: 0 0 0 2px var(--out), inset 0 2px 0 #2a3a44, inset 0 -2px 0 #05070a; text-shadow: var(--px-shadow); }
html.skin .modal { background: rgba(4, 7, 9, .8); }

/* ---------------------------------------------------------------- HUD: top left (level tablet, HP channel, XP, loot) */
html.skin #topleft { top: 14px; left: 14px; gap: 8px; }
html.skin .lvlwrap { width: 60px; height: 60px; flex: 0 0 60px; border: 0; border-radius: 0; background: none; box-shadow: none;
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 1px; }
html.skin #lvl { font: 40px/.8 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin .lvlwrap small { font: 18px/1 var(--f-px); letter-spacing: 0; color: var(--bone2); text-shadow: var(--px-shadow); margin: 0; }
html.skin .bars { gap: 4px; padding-top: 0; }
html.skin #hpbar { width: 300px; height: 27px; padding: 6px; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.skin .hptrack { border-radius: 0; background: #12070a; }
html.skin .hptrack::after { content: none; }
html.skin #hpFill { background: linear-gradient(180deg, #ff8a6a 0 3px, #e84a32 3px 6px, #c8301e 6px 9px, #9c1c18 9px 12px, #6a0f10 12px); }
html.skin #hpChip { background: #ffd0b8; opacity: 1; }
html.skin #hpOver { background: linear-gradient(180deg, #fff3b0 0 3px, #ffd23f 3px 9px, #c8901e 9px); box-shadow: none; }
html.skin #hpShield { height: 6px; background: linear-gradient(180deg, #f0fcff 0 3px, #8fd8ee 3px); opacity: 1; }
html.skin #hpText { font: 26px/1 var(--f-px); color: #fff4ea; text-shadow: 0 2px 0 #3a0806; padding-bottom: 2px; }
html.skin #hpbar.over #hpText { color: #fff3b0; }
html.skin #hpbar::after { inset: 0; border-radius: 0; box-shadow: 0 0 0 3px var(--sblood); }
html.skin #hpbar.low::after { animation: skinBlink .5s steps(2) infinite; }
@keyframes skinBlink { 50% { opacity: 0; } }
/* XP: moved under the HP channel (skin.js); a 1-art-px outline, a lit top row */
html.skin #xpbar { position: relative; inset: auto; width: 300px; height: 12px; border: 3px solid var(--out); background: #0a1418; box-shadow: none; }
html.skin #xpFill { background: linear-gradient(180deg, #c8fbff 0 3px, #3ab6d8 3px); box-shadow: none; transition: transform .12s steps(6); }
html.skin #xpbar::after { content: none; }
html.skin #xpbar.rainbow #xpFill { background: linear-gradient(180deg, #fff3b0 0 3px, #ffd23f 3px); box-shadow: none; }
html.skin #xpbar.rainbow::before { width: 9px; background: #fff8dc; animation: xpSheen .7s steps(12) infinite; }
html.skin .stats { gap: 16px; margin-top: 4px; }
html.skin .chip { height: auto; padding: 0; gap: 6px; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.skin .chip i { width: auto; height: auto; filter: none; }
html.skin .chip b { font: 24px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .c-curse b { color: var(--sember); }
html.skin .c-silver b { color: #d8e4f0; }

/* powerup timers: a socket with the glyph, seconds on a tab, a pixel bar under it */
html.skin #buffs { top: 118px; left: 14px; gap: 12px; }
html.skin .buff { width: 48px; padding-bottom: 9px; }
html.skin .buff i { width: 42px; height: 42px; padding: 5px; border-radius: 0; background: #10161c; color: var(--bc); box-shadow: var(--socket); }
html.skin .buff i svg { filter: none; }
html.skin .buff b { right: -8px; top: 24px; min-width: 24px; padding: 0 4px; border: 0; border-radius: 0; background: #121920; box-shadow: var(--tab); font: 22px/22px var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .buff s { left: 0; right: 0; bottom: 0; height: 6px; border-radius: 0; background: #0a0e12; box-shadow: 0 0 0 3px var(--out); }
html.skin .buff s u { background: var(--bc); }

/* ---------------------------------------------------------------- top centre: the clock tablet, the stage line, the boss */
html.skin #phase { top: 12px; width: 288px; padding: 10px 16px 14px; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.skin #phase .pl { gap: 10px; }
html.skin #phaseIcon { flex: 0 0 30px; width: 30px; height: 30px; color: var(--sgold); filter: none; }
html.skin #phase.night #phaseIcon { color: #c8dcf0; filter: none; }
html.skin #phase.final #phaseIcon, html.skin #phase.boss #phaseIcon { color: var(--sblood); filter: none; }
html.skin #phaseLabel { font: 22px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone); text-shadow: var(--px-shadow); }
html.skin #phaseTag { font: 20px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin #phase.swarm #phaseTag { color: var(--sember); }
html.skin #phase.boss #phaseTag, html.skin #phase.final #phaseTag { color: #ff7a5e; }
html.skin #phaseTime { font: 44px/.85 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin #phase .pbar { height: 9px; margin-top: 9px; border-radius: 0; background: #0a0f12; box-shadow: 0 0 0 3px var(--out); }
html.skin #phaseFill { border-radius: 0; background: linear-gradient(180deg, #d8ccb0 0 3px, #8a7e64 3px); }
html.skin #phase.final #phaseFill { background: linear-gradient(180deg, #ff8a6a 0 3px, #9c1c18 3px); }
html.skin #phaseTicks i { top: -3px; width: 3px; height: 15px; margin-left: -1px; border-radius: 0; box-shadow: 0 0 0 1px var(--out); }
html.skin #phaseTicks i.past { opacity: .35; box-shadow: none; }
html.skin #phase.swarm, html.skin #phase.boss, html.skin #phase.final { border: 0; box-shadow: none; background: none; }
html.skin #bossbar { top: 112px; width: min(560px, 52vw); }
html.skin .bbhead { gap: 8px; margin-bottom: 6px; }
html.skin #bossIcon { width: 30px; height: 30px; color: var(--sblood); filter: none; }
html.skin #bossName { font: 34px/1 var(--f-px); letter-spacing: 0; color: #ffe6e3; text-shadow: 0 3px 0 #3a0806, 0 5px 0 var(--ink); }
html.skin .bb { height: 27px; padding: 6px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
html.skin .bb::after { content: none; }
html.skin .bb > div { inset: 6px; }
html.skin #bossChip { background: #ffd0b8; opacity: 1; }
html.skin #bossFill { background: linear-gradient(180deg, #ff8a6a 0 3px, #d8402c 3px 6px, #9c1c18 6px 12px, #6a0f10 12px); }
html.skin .bb::before { content: ''; position: absolute; inset: 6px; background: #1c0609; }
html.skin #bossHp { font: 22px/1 var(--f-px); color: #fff4ea; text-shadow: 0 2px 0 #3a0806; padding-bottom: 2px; }

/* ---------------------------------------------------------------- top right: the round map, the counter, the combo */
html.skin #mmwrap { top: 12px; right: 14px; background: none; border: 0; box-shadow: none; }
html.skin #shrinecount { top: 202px; right: 14px; width: 178px; gap: 0; padding: 9px 12px 10px; border: 0; border-radius: 0; background: none; }
html.skin #shrinecount span { height: 24px; gap: 9px; padding: 0; font: 22px/1 var(--f-px); color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin #shrinecount span::before { flex: 0 0 9px; height: 9px; border-radius: 0; box-shadow: 0 0 0 3px var(--out); }
html.skin #shrinecount span b { font: 22px/1 var(--f-px); color: var(--bone); }
html.skin #combo { right: 16px; top: 350px; }
html.skin #comboN { font: 60px/.9 var(--f-px); text-shadow: 0 3px 0 #2a1a06, 0 6px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink); }
html.skin #combo .ctxt { font: 22px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--sember); text-shadow: var(--px-shadow); }
html.skin #comboLabel { font: 30px/1 var(--f-px); color: #ffe7b8; text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink); }
html.skin #debugline { font: 18px/1 var(--f-px); color: var(--bone3); text-shadow: var(--px-shadow); }

/* ---------------------------------------------------------------- prompt, mouse-lock hint, banners */
html.skin #prompt { padding: 9px 18px 11px 10px; border: 0; border-radius: 0; background: none; box-shadow: none; font: 600 19px/1.25 var(--f-text); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin #prompt > b:first-child { width: 36px; height: 36px; border-radius: 0; background: #10161c; color: var(--bone); font: 28px/1 var(--f-px); box-shadow: var(--socket); text-shadow: var(--px-shadow); }
html.skin #lockhint { top: 112px; padding: 8px 16px 10px; border: 0; border-radius: 0; background: none; font: 600 16px/1.2 var(--f-text); color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin #lockhint b { color: var(--bone); }
html.skin #banner h1 { font: 400 clamp(56px, 7vw, 108px)/1 var(--f-px); letter-spacing: 0; color: var(--bone); -webkit-text-stroke: 0;
  text-shadow: 0 .05em 0 #2a2622, 0 .09em 0 var(--ink), .04em 0 0 var(--ink), -.04em 0 0 var(--ink), 0 -.04em 0 var(--ink); }
html.skin #banner.good h1 { color: var(--sgold); text-shadow: 0 .05em 0 #5a4214, 0 .09em 0 var(--ink), .04em 0 0 var(--ink), -.04em 0 0 var(--ink), 0 -.04em 0 var(--ink); }
html.skin #banner.lore h1 { font: 800 clamp(52px, 6.6vw, 100px)/1 var(--f-text); color: #ffd8cc; -webkit-text-stroke: 0;
  text-shadow: 0 .05em 0 #5a0c10, 0 .09em 0 var(--ink), .03em 0 0 var(--ink), -.03em 0 0 var(--ink), 0 -.03em 0 var(--ink); }
html.skin body.isNight #banner:not(.good):not(.lore) h1 { color: #ffd8cc; }
html.skin #banner p { padding: 0; border: 0; border-radius: 0; background: none; font: 600 clamp(18px, 1.6vw, 24px)/1.25 var(--f-text); color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin #banner.lore p { border: 0; }

/* ---------------------------------------------------------------- bottom: the slot tiles (baked stones, src/skin/hud.js) */
html.skin #slots { left: 14px; bottom: 14px; gap: 9px; }
html.skin #slots .row { gap: 9px; }
html.skin .slot, html.skin .slot.w, html.skin .slot.h, html.skin .slot.w.split { width: 62px; height: 62px; padding: 13px; border: 0; border-radius: 0; color: var(--bone);
  background: #161b21; box-shadow: 0 0 0 3px var(--out); }
html.skin .item { width: 54px; height: 54px; padding: 11px; border: 0; border-radius: 0; color: var(--bone); background: #15181c; box-shadow: 0 0 0 3px var(--out), inset 0 0 0 3px var(--rc); }
html.skin .slot.baked, html.skin .item.baked { background: none; box-shadow: none; }
html.skin .slot.baked > svg.gi, html.skin .item.baked > svg.gi { visibility: hidden; }
html.skin .slot > svg.gi, html.skin .item > svg.gi { filter: none; }
html.skin .slot .stone, html.skin .item .stone { position: absolute; inset: 0; pointer-events: none; }
html.skin .stone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html.skin .stone .s2 { opacity: 0; }
html.skin .slot .cd, html.skin .slot .wbadge, html.skin .slot.h::before { display: none; }
html.skin .slot.empty, html.skin .slot.locked { display: none; } /* no ghost squares: a free slot is simply not there */
/* the level / count tab: a little stone tab on the tile's corner */
html.skin .slot b, html.skin .item b { right: -9px; bottom: -9px; z-index: 3; min-width: 27px; height: 24px; padding: 0 5px 0 6px; border: 0; border-radius: 0;
  background: #121920; box-shadow: var(--tab); font: 24px/24px var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .slot b.max { color: var(--sgold); background: #121920; }
html.skin #items { right: 14px; bottom: 14px; gap: 9px; }

/* ---------------------------------------------------------------- modals: titles, stone panels, stone buttons (frames: skin.js MODAL_FRAMES) */
html.skin .mtitle { font: 400 clamp(56px, 6vw, 80px)/1 var(--f-px); letter-spacing: 0; color: var(--bone); -webkit-text-stroke: 0;
  text-shadow: 0 4px 0 #2a2622, 0 7px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink); }
html.skin .msub { font: 26px/1.1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin .mpanel { gap: 12px; padding: 22px 30px 26px; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; animation: none; }
html.skin .btns { gap: 14px; margin-top: 8px; }
html.skin .btn { gap: 10px; padding: 10px 20px 12px 12px; border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
  font: 28px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone); text-shadow: var(--px-shadow); transition: transform .08s steps(2); }
html.skin .btn:hover, html.skin .btn.sel { transform: translateY(-3px); border: 0; box-shadow: 0 0 0 3px var(--bone2); }
html.skin .btn:active { transform: translateY(3px); }
html.skin .btn .key { font-size: 24px; min-width: 30px; height: 30px; }
html.skin .btn.tool { padding: 8px 14px 10px 10px; font-size: 26px; }
html.skin .btn.tool b { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--rune); font: 26px/1 var(--f-px); text-shadow: var(--px-shadow); }
html.skin .btn.tool.off { opacity: .45; } html.skin .btn.tool.off b { background: none; color: var(--bone3); }
html.skin .btn.tool.on { background-color: transparent; border: 0; box-shadow: 0 0 0 3px var(--sblood); color: #ffd8cc; }
/* the Esc menu: labels, pixel sliders and selects */
html.skin .vol { grid-template-columns: 190px 240px 70px; gap: 9px 18px; font: 24px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .vol b { font: 24px/1 var(--f-px); color: var(--bone2); }
html.skin .vol input[type=range] { -webkit-appearance: none; appearance: none; width: 240px; height: 9px; background: linear-gradient(90deg, #d8ccb0 0 var(--p, 50%), #0a0e12 var(--p, 50%)); box-shadow: 0 0 0 3px var(--out); border-radius: 0; }
html.skin .vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 24px; background: var(--bone); border: 0; border-radius: 0; box-shadow: 0 0 0 3px var(--out), inset 0 -3px 0 #a5977c, inset 0 3px 0 #fffaf0; cursor: pointer; }
html.skin .vol input[type=range]::-moz-range-thumb { width: 15px; height: 24px; background: var(--bone); border: 0; border-radius: 0; box-shadow: 0 0 0 3px var(--out); }
html.skin .vol select { font: 24px/1 var(--f-px); color: var(--bone); background: #10161c; border: 0; border-radius: 0; padding: 4px 8px 5px; box-shadow: var(--socket); }
html.skin .pchar { max-width: 620px; padding: 10px 16px 12px; border-radius: 0; background: none; font: 500 16px/1.35 var(--f-text); color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin .pchar b { color: var(--bone); font-weight: 700; }
html.skin .dbg { font: 18px/1.2 var(--f-px); color: var(--bone3); }
/* your build (pause) */
html.skin .pbuild::before, html.skin .endload::before { font: 26px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin .pwrow { gap: 12px; padding: 8px 12px 9px 9px; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; }
html.skin .pwrow span b { font: 26px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .pwrow span small { font: 600 14px/1.15 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--bone2); }
html.skin .pwrow em { font: 28px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); } html.skin .pwrow em small { font: 20px/1 var(--f-px); color: var(--bone2); letter-spacing: 0; }
html.skin .pwrow.evo { box-shadow: 0 0 0 3px var(--sgold); }
/* weapon medallions in lists: a socket with the glyph in bone (the attack badge stays, as a small socket) */
html.skin .wmed, html.skin .wmed.split, html.skin .prow.w i, html.skin .prow.w.split i { border-radius: 0; background: #10161c; color: var(--bone); box-shadow: var(--socket); padding: 6px; }
html.skin .wmed > svg.gi, html.skin .prow.w i > svg.gi, html.skin .wmed.pale > svg.gi, html.skin .prow.w.pale i > svg.gi { color: var(--bone); filter: none; }
html.skin .wbadge { border-radius: 0; background: #10161c; color: var(--bone2); box-shadow: 0 0 0 2px var(--out); }
html.skin .wbadge svg { stroke-linecap: square; stroke-linejoin: miter; }
/* end screen */
html.skin .modal.end .mtitle { color: #ffb8a8; }
html.skin .modal.end.won .mtitle { color: var(--sgold); text-shadow: 0 4px 0 #5a4214, 0 7px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink); }
html.skin .statsgrid .tile { gap: 4px; padding: 10px 14px 12px; border: 0; border-radius: 0; background: none; }
html.skin .statsgrid .tile small { font: 22px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone2); }
html.skin .statsgrid .tile b { font: 36px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .statsgrid:not(.tiled) span { font: 22px/1 var(--f-px); color: var(--bone2); } html.skin .statsgrid:not(.tiled) b { font: 24px/1 var(--f-px); color: var(--bone); }
html.skin .endload { gap: 14px 12px; }
html.skin .endload .slot, html.skin .endload .item { width: 52px; height: 52px; padding: 11px; margin: 0; }
html.skin .endload .slot b { font-size: 22px; }
html.skin .modal.pause .mpanel { max-width: min(1260px, 96vw); }
html.skin .pcols { display: flex; gap: 40px; align-items: flex-start; justify-content: center; }
html.skin .pcol { display: flex; flex-direction: column; gap: 14px; align-items: center; min-width: 0; }
html.skin .pcols .pbuild { width: min(560px, 44vw); }
html.skin .pcols .pweps { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- level-up: stone cards on the 3D stage (src/skin/cards.js, stage.js) */
html.skin #skinStage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 11; pointer-events: none; display: none; }
html.skin .modal.stoned .cards { gap: clamp(22px, 2.2vw, 40px); padding-top: 30px; align-items: center; }
html.skin .modal.stoned .card { width: clamp(190px, min(17.5vw, 33vh), 310px); min-height: 0; aspect-ratio: 1.5 / 2.2; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; transform: none; }
html.skin .modal.stoned .card > *:not(.ckey) { visibility: hidden; }
html.skin .modal.stoned .card:hover, html.skin .modal.stoned .card.sel { transform: none; box-shadow: none; }
html.skin .modal.stoned .card .ckey { position: absolute; z-index: 12; left: 50%; top: auto; bottom: -62px; transform: translateX(-50%); visibility: visible; }
html.skin .modal.stoned .card.sel .ckey { color: var(--sgold); }
html.skin .skindetail { min-height: 52px; max-width: min(760px, 90vw); margin-top: 40px; text-align: center; font: 600 18px/1.35 var(--f-text); color: var(--bone); text-shadow: var(--px-shadow); text-wrap: balance; }
html.skin .skindetail b { font-weight: 800; color: #fff; }
html.skin .skindetail small { display: block; margin-top: 4px; font: 22px/1.1 var(--f-px); color: var(--bone2); }
/* the build panel next to the cards: off unless the player switches it on (Esc menu → Build panel) */
html.skin:not(.lvpanel-on) .modal.levelup .lvpanel { display: none; }
html.skin .lvhint { font: 22px/1 var(--f-px); color: #ffb8a8; text-shadow: var(--px-shadow); }

/* ---------------------------------------------------------------- the big chest (src/skin/chest.js): words above and below the 3D chest */
html.skin .modal.bigchest { background: rgba(4, 7, 9, .62); cursor: pointer; }
html.skin .modal.bigchest .mpanel { position: static; padding: 0; background-image: none !important; }
html.skin .modal.bigchest .btns { display: none; }
html.skin .chestwords .mtitle { position: fixed; left: 0; right: 0; top: 15vh; margin: 0; text-align: center; }
html.skin .chestwords .msub { position: fixed; left: 0; right: 0; top: calc(15vh + 82px); width: 100%; margin: 0; text-align: center; }
html.skin .chestwords .chestdetail { position: fixed; left: 50%; bottom: 4vh; transform: translateX(-50%); width: min(640px, 90vw); text-align: center; font: 600 20px/1.35 var(--f-text); color: var(--bone); text-shadow: var(--px-shadow3); text-wrap: balance; }

/* ---------------------------------------------------------------- the start menu (src/skin/menu.js): your wretch on the left, one plain list on the right */
html.skin #start { background: none; overflow: hidden; }
html.skin #start .mshade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(4, 7, 9, 0) 0%, rgba(4, 7, 9, 0) 44%, rgba(4, 7, 9, .7) 60%, rgba(4, 7, 9, .9) 100%), linear-gradient(0deg, rgba(4, 7, 9, .8) 0%, rgba(4, 7, 9, 0) 30%); }
html.skin #start .mtint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; transition: background-color 1.2s ease; }
html.skin .startwrap { position: relative; z-index: 1; justify-content: flex-end; height: 100%; }
html.skin .startleft { flex: 0 0 min(540px, 46vw); align-items: stretch; gap: 0; padding: 40px 46px 26px 20px; }
html.skin .startleft > :first-child { margin-top: 0; }
html.skin #start .stage { display: none; }
html.skin #start .logo { margin: 0 0 26px; font: 400 clamp(76px, 7.2vw, 104px)/.86 var(--f-title); letter-spacing: 0; color: var(--bone); -webkit-text-stroke: 0; text-shadow: 0 5px 0 #3b3530, 0 9px 0 var(--ink); text-align: left; }
html.skin #start .logo span { display: block; margin-left: .56em; color: #e8c86a; text-shadow: 0 5px 0 #5a4214, 0 9px 0 var(--ink); }
html.skin #start .tagline, html.skin #start details.howto, html.skin #start > .startwrap .dbg { display: none; }
html.skin #start .credits { position: fixed; left: 18px; bottom: 12px; z-index: 2; margin: 0; padding: 0; max-width: 40vw; font: 17px/1.2 var(--f-px); color: #55615e; opacity: 1; }
html.skin #menuScreen { flex: 1; display: flex; min-height: 0; }
html.skin .smenu { flex: 1; display: flex; flex-direction: column; min-height: 0; }
html.skin .mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
html.skin .mi { position: relative; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 14px 0 46px; cursor: pointer; font: 38px/1 var(--f-px); color: #9aa39f; text-shadow: 0 3px 0 var(--ink); }
html.skin .mi:not(.on) { background-image: none !important; }
html.skin .mi.on { color: var(--bone); }
html.skin .mi .cur { position: absolute; left: 12px; top: 11px; width: 18px; height: 30px; visibility: hidden; }
html.skin .mi.on .cur { visibility: visible; }
html.skin .mi .val { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 30px; color: var(--bone2); }
html.skin .mi.on .val { color: var(--bone); }
html.skin .mi .val canvas.arr { width: 15px; height: 21px; cursor: pointer; }
html.skin .mi .sub { margin-left: auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26px; color: #c9b06a; }
html.skin .mi.play { height: 64px; font-size: 52px; }
html.skin .mi.play .sub { font-size: 24px; color: var(--bone2); }
html.skin .mmoons { display: flex; gap: 6px; }
html.skin .mmoons canvas { width: 27px; height: 27px; opacity: .5; cursor: pointer; }
html.skin .mmoons canvas.sel { opacity: 1; outline: 3px solid var(--bone); outline-offset: 1px; }
html.skin .mdesc { min-height: 64px; margin: 18px 0 0 46px; max-width: 42ch; font: 600 17px/1.4 var(--f-text); color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin .mdesc b { color: var(--bone); } html.skin .mdesc .dim { color: #7d8783; }
html.skin .macct { margin-top: auto; margin-left: 46px; display: flex; align-items: center; gap: 12px; font: 22px/1 var(--f-px); color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin .macct .lvt { width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
html.skin .macct .lvt b { font: 32px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin .macct .t { flex: 1; min-width: 0; } html.skin .macct .t b { display: block; margin-bottom: 7px; font: 26px/1 var(--f-px); color: var(--bone); }
html.skin .pxbar { position: relative; height: 9px; background: #0a1418; box-shadow: 0 0 0 3px var(--out); }
html.skin .pxbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #c8fbff 0 3px, #3ab6d8 3px); }
html.skin .mkeys { margin: 14px 0 0 46px; font: 17px/1 var(--f-px); color: #6f7c79; text-shadow: none; }
html.skin .mkeys b { display: inline-block; min-width: 18px; padding: 1px 5px; margin: 0 3px 0 6px; text-align: center; color: var(--bone2); background: #141c1f; box-shadow: inset 0 -2px 0 #070a0b; }
html.skin .mkeys b:first-child { margin-left: 0; }
html.skin .msubp h3 { margin: 0 0 12px 46px; font: 44px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin .msubp .qtop { margin: 0 0 8px 46px; font: 22px/1.1 var(--f-px); color: var(--bone2); }
html.skin .msubp .q { margin-left: 46px; padding: 7px 0 9px; }
html.skin .msubp .q b { display: block; font: 27px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .msubp .q p { margin: 3px 0 7px; font: 600 15px/1.3 var(--f-text); color: var(--bone2); }
html.skin .msubp .qb { display: flex; align-items: center; gap: 12px; font: 21px/1 var(--f-px); color: var(--bone2); }
html.skin .msubp .qb .pxbar { flex: 1; min-width: 0; }
html.skin .msubp .howbody { margin-left: 46px; font: 600 16px/1.45 var(--f-text); color: var(--bone2); }
html.skin .msubp .howbody .keys { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
html.skin .msubp .howbody b { color: var(--bone); }
html.skin .mback { margin: 14px 0 0 46px; font: 26px/1 var(--f-px); color: var(--bone2); background: none; border: 0; cursor: pointer; text-shadow: var(--px-shadow); }
html.skin .mback small { font-size: 18px; color: #6f7c79; } html.skin .mback:hover { color: var(--bone); }
/* the wretch's name on the ground under them */
html.skin .mplate { position: absolute; z-index: 2; left: 30%; top: 74%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; background: none; border: 0; text-align: center; cursor: pointer; }
html.skin .mplate h2 { margin: 0; font: 46px/1 var(--f-px); color: var(--bone); text-shadow: 0 3px 0 var(--ink); }
html.skin .mplate .kit { display: flex; gap: 18px; font: 24px/1 var(--f-px); color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin .mplate .kit span { display: flex; align-items: center; gap: 6px; }
html.skin .mplate svg.pk { width: 26px; height: 26px; color: var(--bone2); }
html.skin .mplate small { margin-top: 2px; font: 19px/1 var(--f-px); color: #6f7c79; }
html.skin .mplate:hover h2 { color: #fff; }
@media (max-width: 900px) { html.skin .startleft { flex-basis: 100%; padding: 24px 16px; background: rgba(4, 7, 9, .72); } html.skin .mplate { display: none; } }
html.skin #start .mfade { position: absolute; inset: 0; z-index: 3; background: #030506; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
html.skin .mi.play.long .sub { display: none; }
html.skin .mkeys { white-space: nowrap; overflow: hidden; }
html.skin .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Play is a list row like the others (the old menu's #menuPlay rules pinned it to the screen's bottom) */
html.skin #menuScreen li#menuPlay { position: relative; left: auto; right: auto; bottom: auto; transform: none; max-width: none; width: auto; min-width: 0; align-self: stretch; flex-wrap: nowrap; padding-inline: 0 14px; padding-left: 46px; margin: 0; }
html.skin #menuScreen li#menuPlay:hover { transform: none; }
html.skin .mplate .medit { margin-top: 6px; padding: 6px 14px 8px; font: 24px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .mplate .medit kbd { margin-left: 6px; font-size: 18px; }
html.skin .mplate:hover .medit { filter: brightness(1.2); }
/* shorter screens: the whole list still fits */
@media (max-height: 780px) {
  html.skin .startleft { padding-top: 24px; }
  html.skin #start .logo { margin-bottom: 14px; font-size: 68px; }
  html.skin .mi { height: 44px; font-size: 32px; }
  html.skin .mi.play { height: 54px; font-size: 44px; }
  html.skin .mi .cur { top: 7px; }
  html.skin .mdesc { min-height: 0; margin-top: 10px; font-size: 15px; }
}
@media (max-height: 720px) {
  html.skin .mi { height: 36px; font-size: 26px; }
  html.skin .mi.play { height: 46px; font-size: 38px; }
  html.skin .mi .cur { display: none; }
  html.skin .mdesc, html.skin .mkeys { display: none; }
}
html.skin .pxbar.ticks::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(25% - 1.5px), var(--out) calc(25% - 1.5px) calc(25% + 1.5px), transparent calc(25% + 1.5px) calc(50% - 1.5px), var(--out) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px) calc(75% - 1.5px), var(--out) calc(75% - 1.5px) calc(75% + 1.5px), transparent calc(75% + 1.5px)); }
html.skin #start .mflies { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; image-rendering: pixelated; pointer-events: none; }
html.skin .msubp .mlinks { display: flex; gap: 26px; align-items: baseline; }
html.skin .msubp .mlinks .mback { margin-left: 0; } html.skin .msubp .mlinks .mback:first-child { margin-left: 46px; }

/* ================================================================ round 20: the in-game screens exactly as the prototype */
/* the clock tablet: just the time (the prototype's "12:47"); what comes next sits under it (#phaseNext, skin.js) */
html.skin #phase { width: auto; min-width: 96px; padding: 6px 18px 9px; }
html.skin #phase .pl { gap: 0; justify-content: center; }
html.skin #phaseIcon, html.skin #phase .pcol, html.skin #phase .pbar { display: none; }
html.skin #phaseTime { font: 40px/1 var(--f-px); }
html.skin #phaseNext { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font: 22px/1 var(--f-px); color: #ff9a6a; text-shadow: var(--px-shadow); white-space: nowrap; }
html.skin #phaseNext.now { color: #ff7a5e; }
html.skin #bossbar { top: 104px; }
/* the loot row is gold + kills; difficulty only once it is not the base 100 % */
html.skin .chip.base { display: none; }
/* the HP channel: quarter ticks and a pale dash row on the blood, as the prototype's */
html.skin .hptrack::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 0;
  background: linear-gradient(90deg, transparent calc(25% - 1.5px), #12070a calc(25% - 1.5px) calc(25% + 1.5px), transparent calc(25% + 1.5px) calc(50% - 1.5px), #12070a calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px) calc(75% - 1.5px), #12070a calc(75% - 1.5px) calc(75% + 1.5px), transparent calc(75% + 1.5px)); }
html.skin #hpFill { background: repeating-linear-gradient(90deg, transparent 0 6px, #ffd0b8 6px 12px, transparent 12px 21px) 0 3px / 100% 3px no-repeat, linear-gradient(180deg, #ff8a6a 0 3px, #e84a32 3px 6px, #c8301e 6px 9px, #9c1c18 9px 12px, #6a0f10 12px); }
html.skin #hpText { z-index: 3; }
html.skin #xpbar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.3% - 1.5px), var(--out) calc(33.3% - 1.5px) calc(33.3% + 1.5px), transparent calc(33.3% + 1.5px) calc(66.6% - 1.5px), var(--out) calc(66.6% - 1.5px) calc(66.6% + 1.5px), transparent calc(66.6% + 1.5px)); pointer-events: none; }
/* not in the prototype's HUD: the map counter (the minimap shows the places), the mouse-lock hint while a card picker is up */
html.skin #shrinecount { display: none; }
html.skin body:has(#modal.show) #lockhint { display: none !important; }
/* a card picker: the HUD stays sharp over a blurred, darkened scene (the prototype); no subtitle, no key numbers */
html.skin body:has(#modal.show.stoned) #game { filter: blur(5px) brightness(.5) saturate(.85); }
html.skin .modal.stoned { background: transparent; }
html.skin body:has(#modal.show.stoned) #hud { z-index: 11; }
html.skin .modal.stoned .msub, html.skin .modal.stoned .card .ckey { display: none !important; }
html.skin .modal.stoned .mtitle { margin-top: 64px; }
/* the tools as in the prototype: a socket key, the name, the charges as pips */
html.skin .lvtools { gap: 16px; margin-top: 30px; }
html.skin .btn.tool .pips { display: flex; gap: 4px; margin-left: 4px; }
html.skin .btn.tool .pips i { width: 9px; height: 9px; background: var(--rune); box-shadow: inset 0 -3px 0 #6fd9c2; }
html.skin .btn.tool .pips i.off { background: #2a3a3c; box-shadow: inset 0 3px 0 #141c1f; }
html.skin .btn.tool .key { min-width: 30px; height: 30px; background: #10161c; box-shadow: 0 0 0 3px var(--out), inset 0 3px 0 #05070a, inset 0 -3px 0 #2a3a44; }
html.skin .btn.tool > b[data-pp] { display: none !important; }
/* the prototype's spacing: cards ~0.38 of a card apart, the tools close under them, the hovered card's text between */
html.skin .modal.stoned .cards { gap: clamp(56px, 7.6vw, 124px); padding-top: 22px; }
html.skin .modal.stoned .mtitle { margin-top: 40px; }
html.skin .skindetail { min-height: 44px; margin-top: 22px; }
html.skin .modal.stoned .lvtools { margin-top: 4px; }
html.skin .modal.stoned .mtitle { margin-top: 8px; }
html.skin #fsBtn { width: 30px; height: 30px; padding: 6px; border: 0; border-radius: 0; background: #10161c; color: var(--bone2); box-shadow: var(--socket); opacity: .7; }
html.skin #fsBtn:hover { transform: none; color: var(--bone); opacity: 1; }
html.skin .modal.stoned .card { width: clamp(200px, min(21vw, 37vh), 330px); }
html.skin .modal.levelup.stoned { justify-content: flex-start; padding-top: 84px; }
html.skin .modal.stoned .mtitle { margin-top: 0; }
html.skin .modal.levelup.stoned { padding-top: 66px; }
html.skin .modal.stoned .cards { padding-top: 14px; }
html.skin .skindetail { min-height: 40px; margin-top: 12px; }
html.skin .modal.levelup.stoned { padding-top: 96px; }
html.skin .modal.stoned .mtitle { font-size: 76px; line-height: .9; }
html.skin .modal.stoned .card { width: clamp(200px, min(20vw, 35vh), 320px); }
html.skin .modal.stoned .lvmain { gap: 8px; }
html.skin .skindetail { min-height: 36px; margin-top: 6px; }

/* ================================================================ the builder (your wretch): the same stone language */
html.skin .builder .bwrap { background: rgba(4, 7, 9, .25); }
html.skin .btop { background: #070b0d; border-bottom: 3px solid var(--out); box-shadow: none; }
html.skin .bnamewrap small, html.skin .bslot span { font: 18px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone2); }
html.skin .bname { padding: 6px 12px 7px; border: 0; border-radius: 0; background: #10161c; box-shadow: var(--socket); font: 34px/1 var(--f-px); letter-spacing: 0; color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .bname:focus { box-shadow: var(--socket), 0 0 0 6px var(--bone2); border: 0; }
html.skin .bslot b { font: 24px/1 var(--f-px); color: var(--bone); }
html.skin .bleft, html.skin .bsum { background-color: transparent; border: 0; box-shadow: none; }
html.skin .btabs { gap: 2px; padding: 10px 12px 6px; border-bottom: 3px solid var(--out); }
html.skin .btabs .tgrp { font: 15px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone3); }
html.skin .btab { padding: 6px 2px 8px; border: 0; border-radius: 0; background-color: transparent; font: 20px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: #8f9894; text-shadow: var(--px-shadow); }
html.skin .btab em { font: 18px/1 var(--f-px); color: var(--bone3); }
html.skin .btab:hover { color: var(--bone); }
html.skin .btab.on { color: var(--bone); border: 0; }
html.skin .btab.on em, html.skin .btab.tstart em { color: var(--sgold); }
html.skin .btab:not(.on) { background-image: none !important; }
html.skin .btab.warn::after { border-radius: 0; width: 9px; height: 9px; background: var(--sblood); box-shadow: 0 0 0 3px var(--out); }
html.skin .bpanel { scrollbar-color: #2b3e52 transparent; }
html.skin .bsh { font: 28px/1 var(--f-px); letter-spacing: 0; color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin .bsh small { font: 600 14px/1.2 var(--f-text); color: var(--bone2); }
html.skin .bsh .fl { font: 24px/1 var(--f-px); color: #ffb8a8; }
html.skin .bsh .sic { color: var(--sgold); filter: none; }
/* colour swatches: square tiles with a pixel outline; the picked one gets a bone ring */
html.skin .sw { border-radius: 0; background: var(--c); box-shadow: 0 0 0 3px var(--out), inset 0 3px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .3); transition: none; }
html.skin .sw:hover { transform: translateY(-2px); }
html.skin .sw.on { box-shadow: 0 0 0 3px var(--out), 0 0 0 6px var(--bone), inset 0 3px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .3); transform: none; }
/* the toggle: a pixel check box (no iOS switch) */
html.skin .tog { gap: 10px; padding: 6px 10px 6px 6px; border: 0; border-radius: 0; background: none; font: 22px/1 var(--f-px); color: var(--bone2); }
html.skin .tog i { width: 24px; height: 24px; border: 0; border-radius: 0; background: #10161c; box-shadow: var(--socket); }
html.skin .tog i::after { inset: 6px; top: 6px; left: 6px; width: auto; height: auto; border-radius: 0; background: transparent; transform: none; box-shadow: none; transition: none; }
html.skin .tog.on { color: var(--bone); border: 0; }
html.skin .tog.on i { border: 0; } html.skin .tog.on i::after { background: var(--rune); box-shadow: inset 0 -3px 0 #6fd9c2; transform: none; }
/* option cards, gear tiles, weapon tiles, talents, traits, presets: stone tiles (frames: skin.js BUILDER_FRAMES); picked = a bone ring */
html.skin .ocard, html.skin .gtile, html.skin .wcard, html.skin .tcard, html.skin .pcard, html.skin .trait, html.skin .ochip, html.skin .opt, html.skin .bsrow {
  border: 0; border-radius: 0; background-color: transparent; box-shadow: none; transition: transform .08s steps(2); }
html.skin .ocard, html.skin .gtile, html.skin .wcard { font: 19px/1.05 var(--f-px); color: #9aa39f; text-shadow: var(--px-shadow); }
html.skin .ocard:hover, html.skin .gtile:hover, html.skin .wcard:hover, html.skin .tcard:hover, html.skin .pcard:hover, html.skin .trait:hover, html.skin .ochip:hover, html.skin .opt:hover, html.skin .bsrow:hover { transform: translateY(-2px); border: 0; color: var(--bone); }
html.skin .ocard.on, html.skin .gtile.on, html.skin .wcard.on, html.skin .tcard.on, html.skin .pcard.on, html.skin .ochip.on, html.skin .opt.on { color: var(--bone); border: 0; box-shadow: 0 0 0 3px var(--bone); }
html.skin .trait.perk.on { border: 0; box-shadow: 0 0 0 3px #7ed957; } html.skin .trait.flaw.on { border: 0; box-shadow: 0 0 0 3px var(--sblood); }
html.skin .tcard.armed { border: 0; box-shadow: 0 0 0 3px var(--sblood); }
html.skin .gtile.locked, html.skin .opt.locked { border: 0; opacity: .5; }
html.skin .ocard i, html.skin .wcard .wmed, html.skin .tport, html.skin .pcard > i, html.skin .trait > i, html.skin .builder .cic, html.skin .bsrow .wmed.sm {
  border-radius: 0; background: #10161c; color: var(--bone); box-shadow: var(--socket); filter: none; }
html.skin .ocard.on i, html.skin .wcard.on .wmed { background: #1b2430; box-shadow: var(--socket); }
html.skin .trait.perk > i { color: #b8f0a8; } html.skin .trait.flaw > i { color: #ffb8a8; }
html.skin .gtile .gi { color: var(--bone); filter: none; } html.skin .gtile.on .gi { color: var(--bone); }
html.skin .wcard span { font: 17px/1.05 var(--f-px); }
html.skin .tch b, html.skin .pcard .pt b { font: 26px/1 var(--f-px); letter-spacing: 0; color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .tch small, html.skin .pcard .pt small, html.skin .bsrow small, html.skin .osh { font: 18px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: #c9b06a; }
html.skin .bsrow.pas small { color: var(--rune2); }
html.skin .builder .cdesc, html.skin .pcard .pt p, html.skin .trait .tt span, html.skin .ochip span { font: 600 14px/1.3 var(--f-text); color: var(--bone2); }
html.skin .pcard.on .pt p { color: var(--bone); }
html.skin .trait .tt b, html.skin .ochip b { font: 22px/1 var(--f-px); color: var(--bone); }
html.skin .pcard .cost, html.skin .trait em, html.skin .ochip em { padding: 2px 6px 3px; border: 0; border-radius: 0; background: #10161c; box-shadow: var(--socket); font: 24px/1 var(--f-px); color: var(--sgold); }
html.skin .trait.perk em { color: #ffcf9a; } html.skin .trait.flaw em { color: #9df0a8; }
html.skin .opt { padding: 6px 12px 8px; font: 21px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone2); }
html.skin .opt.preset { color: var(--bone2); }
html.skin .opt.locked::before { font: 16px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--sgold); }
html.skin .opt.locked small { font: 600 12px/1.2 var(--f-text); color: var(--bone3); }
html.skin .brange b { font: 24px/1 var(--f-px); color: var(--bone); }
/* the summary column */
html.skin .bptn b { font: 64px/.85 var(--f-px); color: var(--sgold); -webkit-text-stroke: 0; text-shadow: 0 4px 0 #5a4214, 0 7px 0 var(--ink); }
html.skin .bptn span { font: 24px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone2); }
html.skin .bbar { height: 9px; margin: 12px 0 10px; border-radius: 0; background: #0a1418; box-shadow: 0 0 0 3px var(--out); }
html.skin .bbar .sp { background: linear-gradient(180deg, #c8fbff 0 3px, #3ab6d8 3px); } html.skin .bbar .sk { background: linear-gradient(180deg, #ffe0b0 0 3px, #c8701e 3px); }
html.skin .bbrk { font: 20px/1.3 var(--f-px); color: var(--bone2); } html.skin .bbrk b { font: 20px/1.3 var(--f-px); color: var(--bone); }
html.skin .bsrow { padding: 8px 10px 9px; }
html.skin .bsrow b { font: 26px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin .bsrow.empty { box-shadow: 0 0 0 3px var(--sblood); } html.skin .bsrow.empty b { color: #ffb8a8; }
html.skin .bsts span { padding: 3px 7px 4px; border: 0; border-radius: 0; background: #10161c; box-shadow: var(--socket); font: 19px/1 var(--f-px); }
html.skin .bsts span.perk { color: #b8f0a8; } html.skin .bsts span.flaw { color: #ffb8a8; }
html.skin .bsts em { font: 600 14px var(--f-text); color: var(--bone3); }
html.skin .bstart .bsh { font-size: 26px; }
html.skin .bstg { font: 20px/1.35 var(--f-px); color: #7d8783; } html.skin .bstg b { font: 20px/1.35 var(--f-px); color: var(--bone2); }
html.skin .bstg .up { color: #9df0a8; } html.skin .bstg .down { color: #ffb8a8; } html.skin .bstg span.up, html.skin .bstg span.down { color: var(--bone); }
html.skin .bok { padding: 8px 12px 10px; border: 0; border-radius: 0; background: none; box-shadow: none; font: 600 15px/1.35 var(--f-text); color: #b8f0a8; }
html.skin .bhint { padding: 6px 12px 8px; border: 0; border-radius: 0; background: #10161c; box-shadow: var(--socket); font: 18px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: var(--bone2); }
/* the big Play: a gold stone (frame 'gold'), dark letters cut into it */
html.skin .btn.play.bplay { min-height: 76px; padding: 10px 20px 12px; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; font: 46px/1 var(--f-px); letter-spacing: 0; color: #2a1806; text-shadow: 0 2px 0 rgba(255, 240, 200, .45); }
html.skin .btn.play.bplay small { font: 20px/1 var(--f-px); letter-spacing: 0; text-transform: none; color: #3a2408; text-shadow: none; }
html.skin .btn.play.bplay:hover { transform: translateY(-3px); box-shadow: none; filter: brightness(1.08); }
html.skin .btn.play.bplay.off { filter: grayscale(.85) brightness(.7); }
html.skin .btn.tool.primary { background-color: transparent; color: var(--sgold); border: 0; }
html.skin .btn.tool.danger { color: #ffb8a8; }
html.skin .btn.tool.danger.armed { background-color: transparent; box-shadow: 0 0 0 3px var(--sblood); }
html.skin .bnote, html.skin .bdetail { font: 600 14px/1.35 var(--f-text); color: var(--bone2); } html.skin .bnote b, html.skin .bdetail b { color: var(--bone); }
html.skin .bdetail .wverb { font: 20px/1 var(--f-px); color: #c9b06a; letter-spacing: 0; text-transform: none; }
html.skin .berr { font: 600 14px/1.3 var(--f-text); color: #ffb8a8; }
/* every range slider in the skin: a pixel track with its filled part (--p, skin.js), a square bone handle */
html.skin input[type=range] { -webkit-appearance: none; appearance: none; height: 9px; background: linear-gradient(90deg, #d8ccb0 0 var(--p, 50%), #0a0e12 var(--p, 50%)); box-shadow: 0 0 0 3px var(--out); border-radius: 0; accent-color: auto; }
html.skin input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 24px; background: var(--bone); border: 0; border-radius: 0; box-shadow: 0 0 0 3px var(--out), inset 0 -3px 0 #a5977c, inset 0 3px 0 #fffaf0; cursor: pointer; }
/* the toast (menu messages): a stone panel, Jersey */
html.skin #gbToast { padding: 10px 18px 12px; border: 0; border-radius: 0; background: #0c1117; box-shadow: 0 0 0 3px var(--out), inset 0 3px 0 #253540, inset 0 -3px 0 #07090d; font: 24px/1.15 var(--f-px); letter-spacing: 0; color: var(--bone); text-shadow: var(--px-shadow); }
html.skin #gbToast.bad { color: #ffb8a8; } html.skin #gbToast.warn { color: #ffd88a; }
html.skin .btn.play.bplay { color: var(--bone); text-shadow: 0 3px 0 var(--ink); box-shadow: 0 0 0 3px var(--sgold); }
html.skin .btn.play.bplay small { color: #c9b06a; text-shadow: var(--px-shadow); }
html.skin .btn.play.bplay:hover { box-shadow: 0 0 0 3px #fff3b0; }
html.skin .bnote { display: block; padding: 10px 12px 12px; border: 0; border-radius: 0; background: #0c1117; box-shadow: 0 0 0 3px var(--out); }
html.skin .bnote svg.gi { float: left; width: 30px; height: 30px; margin: 2px 10px 0 0; color: var(--rune2); }

/* builder leftovers: the points card and the weapon detail are stone panels; the bar is a flat pixel channel; a locked weapon
   wears the pixel lock instead of a "Quest" pill (the pill sat under the weapon icon) */
html.skin :is(.bpts, .bdetail) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-color: transparent; }
html.skin .bbar { height: 12px; border-radius: 0; background: #10161c; box-shadow: 0 0 0 3px var(--out); }
html.skin .bbar .sp { background: #3fb8c8; box-shadow: inset 0 3px 0 #8ae4ee; } html.skin .bbar .sk { background: #e07a2a; box-shadow: inset 0 3px 0 #ffc07a; }
html.skin .bpts.over .bbar { background: #4a161c; }
html.skin .bpts.over .bptn b { color: #ff6a78; text-shadow: 0 4px 0 #4a161c, 0 7px 0 var(--ink); } html.skin .bpts.even .bptn b { color: #9dffa0; text-shadow: 0 4px 0 #1e4a20, 0 7px 0 var(--ink); }
html.skin .wcard.locked { border-style: solid; }
html.skin .wcard.locked em { z-index: 2; top: 6px; right: 6px; width: 15px; height: 18px; padding: 0; border-radius: 0; font-size: 0; opacity: 1; background: var(--px-lock) center / 15px 18px no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #05070a); }
html.skin .bdetail b { font-family: var(--f-px); }

/* ================================================================ the other screens (multiplayer, Rivals, Arena, co-op, omens,
   run gate, run log, account) — src/skin/legacy.js frames them; here they lose the old look one element at a time.
   Inside these roots the old tokens are remapped to the stone language (fonts, colours, flat panels); capitals, tracking and
   round corners go. Fills of bars are set explicitly below (flat colour + a lit top line), never stripped blindly.
   font-size-adjust keeps the old pixel sizes readable in Jersey / Grenze (smaller x-heights than Barlow). */
html.skin :is(#netLobby, #netHud, #netChat, #netGo, #netTags, #rvList, #rvFeed, #rvActive, #rvWarn, #rvGhost, #coopTeam, #coopLevel, #coopPick,
  #coopDown, #coopSpect, #coopRevive, #arList, #arLives, #arScore, #arFeed, #arRing, #arRespawn, #arSpect, #arBoard, #omenPick, #runGate, #runLog,
  .acct, .apanel, .rvres, .arres, .momen) {
  --f-num: 'Jersey 10', 'Courier New', monospace; --f-ui: 'Grenze', Georgia, serif;
  --text: #ece4d2; --text-dim: #b9b2a4; --teal: #c9b06a; --ember: #ff9a6a; --line: #2b3e52; --gold: #ffd23f; --blood: #d8402c; --gain: #8ee06a;
  --ink-0: #0a0e13; --ink-1: #0c1117; --ink-2: #10161c; --panel-bg: #0c1117; --panel-shadow: 0 0 0 3px #05070a; --outline: 0 2px 0 #07090b;
  font-size-adjust: .51;
}
html.skin :is(#netLobby, #netHud, #netChat, #netGo, #netTags, #rvList, #rvFeed, #rvActive, #rvWarn, #rvGhost, #coopTeam, #coopLevel, #coopPick,
  #coopDown, #coopSpect, #coopRevive, #arList, #arLives, #arScore, #arFeed, #arRing, #arRespawn, #arSpect, #arBoard, #omenPick, #runGate, #runLog,
  .acct, .apanel, .rvres, .arres, .momen) :is(*):not(svg, svg *) { letter-spacing: 0 !important; text-transform: none !important; border-radius: 0 !important; -webkit-text-stroke: 0 !important; }
html.skin :is(#netLobby, #netHud, #netChat, #netGo, #netTags, #rvList, #rvFeed, #rvActive, #rvWarn, #rvGhost, #coopTeam, #coopLevel, #coopPick,
  #coopDown, #coopSpect, #coopRevive, #arList, #arLives, #arScore, #arFeed, #arRing, #arRespawn, #arSpect, #arBoard, #omenPick, #runGate, #runLog, .acct, .apanel) {
  border-radius: 0 !important; }
/* the shared pieces: a stone panel (frame drawn by legacy.js, no CSS box), a flat dark row, a pixel bar */
html.skin .framed:is(.nl-panel, .op, .rl, .acct, .ab-panel, #rvWarn, #coopPick, #coopLevel, #rvGhost, #arSpect, #coopSpect, #coopRevive, #arScore, #arRing, .rl-box, .acct-card, .rl-row),
html.skin :is(#netLobby, #omenPick, #runLog, #arBoard) .framed:is(.nl-btn, .btn, button) {
  border: 0 !important; background-color: transparent !important; box-shadow: none; }
html.skin :is(.ct-hp, .rv-hp, .ar-hp, .nco:not(.s1):not(.s2):not(.ar), #rvWarn s, #rvGhost s, #arSpect s, .ab-next s, .rva s, #coopPick s) {
  border-radius: 0 !important; background: #2a0d12 !important; box-shadow: 0 0 0 2px var(--out) !important; overflow: hidden; }
html.skin :is(.ct-hp, .rv-hp, .ar-hp, .nco) u { background: #d8402c !important; box-shadow: inset 0 2px 0 #ff7a6a; }
html.skin :is(#rvWarn, #rvGhost, #arSpect, .ab-next, .rva) s u { background: #d8402c !important; box-shadow: inset 0 2px 0 #ff9a8a; }
html.skin #coopPick s u { background: #7fe8ff !important; }
html.skin #coopPick s { background: #0a1a20 !important; }

/* -------- the lobby */
html.skin #netLobby.nl { background: rgba(4, 7, 9, .84) !important; backdrop-filter: blur(4px); }
html.skin #netLobby .nl-panel { animation: none; }
html.skin #netLobby .nl-title { font: 64px/1 var(--f-px); color: var(--bone); text-shadow: 0 4px 0 #2a2622, 0 7px 0 var(--ink); }
html.skin #netLobby h3 { font: 30px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin #netLobby h4, html.skin #netLobby .nl-name span, html.skin #netLobby .nl-set > span, html.skin #netLobby .nl-codeCol small { font: 24px/1 var(--f-px); color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin #netLobby h4 small, html.skin #netLobby h4 span { font: 22px/1 var(--f-px); color: var(--sgold); }
html.skin #netLobby p, html.skin #netLobby .nl-set > small, html.skin #netLobby .nl-runInfo { font-family: var(--f-text); color: var(--bone2); }
html.skin #netLobby :is(input, textarea) { border: 0 !important; background: #10161c !important; box-shadow: var(--socket) !important; color: var(--bone); font-family: var(--f-px); outline: none; }
html.skin #netLobby :is(input, textarea):focus { box-shadow: var(--socket), 0 0 0 6px var(--bone2) !important; }
html.skin #netLobby :is(.nl-btn, .btn, button) { border: 0 !important; background-color: transparent !important; color: var(--bone) !important; font-family: var(--f-px) !important; font-weight: 400 !important; text-shadow: var(--px-shadow3) !important; }
html.skin #netLobby :is(.nl-btn, .btn, button):hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--bone2) !important; }
html.skin #netLobby :is(.nl-primary, .nl-start) { box-shadow: 0 0 0 3px var(--sgold) !important; }
html.skin #netLobby :is(.nl-btn, button):disabled { opacity: .5; }
html.skin #netLobby .nl-btn.nl-ghost { color: var(--bone2) !important; }
html.skin #netLobby .nl-seg button { font-size: 20px !important; }
html.skin #netLobby .nl-seg button:not(.framed) { box-shadow: none !important; }
html.skin #netLobby .nl-seg button.on { box-shadow: 0 0 0 3px var(--bone) !important; }
html.skin #netLobby .nl-seg[data-k="mode"] button[data-v="rivals"].on, html.skin #netLobby .nl-set.rvset .nl-seg button.on { box-shadow: 0 0 0 3px var(--sblood) !important; }
html.skin #netLobby .nl-seg em { background: #10161c; color: var(--sgold); font: 16px/1 var(--f-px); padding: 2px 5px; }
html.skin #netLobby :is(.nl-card, .nl-codeBox, .nl-log, .nl-offer, .nl-err) { border: 0 !important; background: #0c1117 !important; box-shadow: 0 0 0 3px var(--out) !important; }
html.skin #netLobby .nl-err { background: #220a10 !important; color: #ffb3bb; }
html.skin #netLobby .nl-cardsHow { border: 0 !important; background: #1a080c !important; box-shadow: 0 0 0 3px var(--out), inset 0 0 0 3px #4a161c !important; }
html.skin #netLobby .nl-cardsHow b.u { background: #3fb8a8 !important; box-shadow: inset 0 3px 0 #8af0dc, 0 0 0 2px var(--out) !important; border: 0; }
html.skin #netLobby .nl-cardsHow b.c { background: #c8261e !important; box-shadow: inset 0 3px 0 #ff8a7a, 0 0 0 2px var(--out) !important; border: 0; }
html.skin #netLobby .nl-cardsHow p { color: #f0d6d2; font-family: var(--f-text); }
html.skin #netLobby .nl-code { font-family: var(--f-px) !important; color: var(--sgold) !important; text-shadow: 0 5px 0 #5a4214, 0 9px 0 var(--ink) !important; letter-spacing: .12em !important; }
html.skin #netLobby :is(.nl-conn, .nl-srvBadge) { border: 0 !important; background: none !important; box-shadow: none !important; font: 20px/1 var(--f-px); color: var(--bone2); }
html.skin #netLobby .nl-conn i { box-shadow: 0 0 0 2px var(--out) !important; }
html.skin #netLobby .nl-members li { border: 0 !important; background: #0c1117 !important; box-shadow: 0 0 0 3px var(--out) !important; }
html.skin #netLobby .nl-members li.me { box-shadow: 0 0 0 3px var(--out), 0 0 0 6px var(--bone3) !important; }
html.skin #netLobby .nl-who b { font: 24px/1.05 var(--f-px); color: hsl(var(--h) 70% 74%); }
html.skin #netLobby li.me .nl-who b { color: var(--bone); }
html.skin #netLobby .nl-who b small { font: 18px/1 var(--f-px); color: var(--sgold); }
html.skin #netLobby .nl-ping { font: 22px/1 var(--f-px); }
html.skin #netLobby .nl-av, html.skin #netLobby .cport, html.skin #netLobby .tport, html.skin #netLobby .tic { border-radius: 0 !important; background: #10161c !important; box-shadow: var(--socket) !important; color: var(--bone) !important; }
html.skin #netLobby li.ready .nl-rdy { background: var(--sgold) !important; box-shadow: 0 0 0 2px var(--out) !important; }
html.skin #netLobby .nl-ready.on { box-shadow: 0 0 0 3px var(--sgold) !important; color: var(--sgold) !important; }
html.skin #netLobby .nl-mini { border: 0 !important; background: #10161c !important; box-shadow: var(--socket) !important; }
html.skin #netLobby .nl-crown { filter: none; }
html.skin #netLobby .wpanel { border: 0 !important; background: #0c1117 !important; box-shadow: 0 0 0 3px var(--out) !important; }
html.skin #netLobby :is(.perk, .flaw, .wtraits span) { border: 0 !important; background: #10161c !important; box-shadow: var(--socket) !important; font-family: var(--f-px); }
html.skin #netLobby .nl-tpl { border: 0 !important; }
html.skin .wpanel::before, html.skin .apanel::before { display: none; }

/* -------- countdown, solo run gate: the menu goes dark behind a big pixel number */
html.skin :is(#netGo, #runGate) { background: rgba(4, 7, 9, .8) !important; backdrop-filter: blur(4px); }
html.skin :is(#netGo .ng-box, #runGate > *) { border: 0 !important; background: none !important; box-shadow: none !important; }
html.skin #netGo .ng-room { font: 26px/1 var(--f-px); color: var(--bone2); text-shadow: var(--px-shadow3); }
html.skin #netGo .ng-n { font: 150px/1 var(--f-px) !important; color: var(--bone) !important; text-shadow: 0 7px 0 #2a2622, 0 12px 0 var(--ink) !important; }
html.skin #netGo.go .ng-n { color: var(--sgold) !important; text-shadow: 0 7px 0 #5a4214, 0 12px 0 var(--ink) !important; }
html.skin #netGo .ng-msg { font: 28px/1 var(--f-px); color: var(--sgold); text-shadow: var(--px-shadow3); }
html.skin #runGate .rg-t { font: 96px/1 var(--f-px) !important; color: var(--sgold) !important; text-shadow: 0 6px 0 #5a4214, 0 10px 0 var(--ink) !important; }
html.skin #runGate .rg-esc { font: 22px/1 var(--f-px); color: var(--bone2); }

/* -------- in-run: room header, chat, name tags */
html.skin #netHud .nh-room { border: 0; background: rgba(12, 17, 23, .88); box-shadow: 0 0 0 3px var(--out); padding: 5px 10px 4px; }
html.skin #netHud .nh-code { font: 24px/1 var(--f-px); color: var(--sgold); letter-spacing: .08em !important; }
html.skin #netHud .nh-conn { font: 18px/1 var(--f-px); color: var(--bone2); }
html.skin #netHud .nh-players li { font: 20px/1.1 var(--f-px); text-shadow: var(--px-shadow); }
html.skin #netHud .nh-players li > i { transform: none; width: 9px; height: 9px; flex-basis: 9px; box-shadow: 0 0 0 2px var(--out); }
html.skin #netHud .nh-toast { border: 0; background: rgba(12, 17, 23, .9); box-shadow: 0 0 0 3px var(--out); font: 20px/1.15 var(--f-px); animation: none; }
html.skin #netChat .nc-log p { border-radius: 0; background: rgba(12, 17, 23, .84); box-shadow: 0 0 0 2px var(--out); font: 20px/1.2 var(--f-px); margin-bottom: 5px; }
html.skin #netChat .nc-log p.sys { font-style: normal; color: var(--bone2); }
html.skin #netChat .nc-say input { border: 0; background: rgba(12, 17, 23, .94); box-shadow: 0 0 0 3px var(--out), 0 0 0 6px var(--bone3); font: 22px/1 var(--f-px); color: var(--bone); }
html.skin #netChat .nc-hint { font: 18px/1 var(--f-px); color: var(--bone2); opacity: .75; }
html.skin #netChat .nc-hint kbd { font: 16px/1 var(--f-px); }
html.skin #netTags .ntag { border: 0; background: rgba(12, 17, 23, .8); box-shadow: 0 0 0 2px var(--out); font: 20px/1 var(--f-px); color: var(--bone); padding: 3px 8px 4px; }
html.skin #netTags .ntag .ncrown { filter: none; }
html.skin #netTags .ntag b[data-lv]:not([data-lv=""])::after { color: var(--sgold); font-size: 18px; }

/* -------- the player lists (co-op team, Rivals, Arena): a pennant per player in their own colour (legacy.js paints it) */
html.skin :is(#coopTeam, #rvList, #arList) li:not(.rv-head):not(.ar-head) { border: 0 !important; background-color: transparent !important; box-shadow: none !important;
  padding: 6px 26px 8px 16px; background-size: 100% 100% !important; background-repeat: no-repeat !important; image-rendering: pixelated; }
html.skin :is(#coopTeam, #rvList, #arList) li > i { display: none; }
html.skin :is(#coopTeam, #rvList, #arList) li:not(.rv-head):not(.ar-head) { grid-template-columns: minmax(0, 1fr) auto auto; }
html.skin :is(#coopTeam .ct-who, #rvList .rv-who, #arList .ar-who) b { font: 22px/1 var(--f-px); color: hsl(var(--h) 70% 78%); text-shadow: var(--px-shadow); }
html.skin :is(#coopTeam li.me .ct-who, #rvList li.me .rv-who, #arList li.me .ar-who) b { color: var(--bone); }
html.skin :is(#coopTeam .ct-who, #rvList .rv-who, #arList .ar-who) b small { font: 17px/1 var(--f-px); color: var(--sgold); }
html.skin :is(#coopTeam .ct-who, #rvList .rv-who, #arList .ar-who) > small { font: 17px/1 var(--f-px); color: var(--bone2); }
html.skin :is(#rvList .rv-head, #arList .ar-head) b { font: 26px/1 var(--f-px); color: #ff7a6a; text-shadow: var(--px-shadow3); }
html.skin :is(#rvList .rv-head, #arList .ar-head) span { font: 18px/1 var(--f-px); color: var(--bone2); text-shadow: var(--px-shadow); }
html.skin #rvList .rv-lv { font: 28px/1 var(--f-px); text-shadow: var(--px-shadow3); }
html.skin #rvList .rv-lv small { font-size: 16px; }
html.skin :is(#rvList .rv-crown, #rvList .rv-tgt, #arList .rv-tgt) { filter: none; }
html.skin :is(#rvList .rv-gh, #arList .ar-st) { font: 16px/8px var(--f-px); }
html.skin :is(#coopTeam .ct-hp, #rvList .rv-hp, #arList .ar-hp) { height: 6px; }
html.skin #coopTeam li > em { font: 17px/1 var(--f-px); border-radius: 0; box-shadow: 0 0 0 2px var(--out); }
html.skin #coopTeam em.down { background: var(--sblood); } html.skin #coopTeam em.pick { background: #7fe8ff; }
html.skin #arLives em { font: 18px/1 var(--f-px); }
html.skin :is(#arLives, .ar-hearts, #arRespawn, .ab-hearts) b.on svg { filter: none; fill: #d8402c; }

/* -------- in-run banners: stone panels (frames from legacy.js) with flat pixel type, no glows */
html.skin #coopLevel { box-shadow: 0 0 0 3px var(--sgold) !important; animation: none; padding: 7px 16px 8px; }
html.skin #coopLevel b { font: 30px/1 var(--f-px); color: var(--sgold); text-shadow: var(--px-shadow3); }
html.skin #coopLevel span, html.skin #coopPick span, html.skin #coopSpect, html.skin #coopRevive { font: 22px/1.15 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow); }
html.skin #coopPick span b { font: 24px/1 var(--f-px); color: #7fe8ff; }
html.skin #coopPick { box-shadow: 0 0 0 3px #7fe8ff !important; }
html.skin #coopRevive { box-shadow: 0 0 0 3px var(--gain) !important; }
html.skin #coopSpect b { color: var(--sgold); }
html.skin #coopDown svg { filter: none; } html.skin #coopDown circle { stroke-linecap: butt; }
html.skin #coopDown b { font: 54px/1 var(--f-px); text-shadow: 0 4px 0 #2a0a0a, 0 7px 0 var(--ink); }
html.skin #coopDown span { font: 22px/1.2 var(--f-px); text-shadow: var(--px-shadow3); }
html.skin #rvWarn { box-shadow: 0 0 0 3px #ff5a4a !important; }
html.skin #rvWarn .rw-ico { border-radius: 0; background: #4a161c; box-shadow: var(--socket), 0 0 0 6px #ff5a4a; animation: rvJitter .09s steps(2) infinite; }
html.skin #rvWarn .rw-ico svg { filter: none; }
html.skin #rvWarn .rw-txt small { font: 20px/1 var(--f-px); color: #ff9a8a; }
html.skin #rvWarn .rw-txt b { font: 52px/1 var(--f-px); color: var(--bone); text-shadow: 0 4px 0 #4a0a10, 0 7px 0 var(--ink); }
html.skin #rvWarn .rw-txt span { font-family: var(--f-text); color: #f4d8d4; }
html.skin #rvArrow svg, html.skin #arArrow svg { filter: none; stroke: var(--out); stroke-width: 3; }
html.skin #rvGhost { box-shadow: 0 0 0 3px #9fc8ff !important; }
html.skin #rvGhost > b, html.skin #arSpect > b { font: 30px/1 var(--f-px); color: #e2eeff; letter-spacing: .1em !important; text-shadow: var(--px-shadow3); }
html.skin :is(#rvGhost, #arSpect) span { font: 20px/1.2 var(--f-px); }
html.skin #arSpect { box-shadow: 0 0 0 3px #8a2a34 !important; }
html.skin #arScore { box-shadow: none !important; }
html.skin #arScore .rd { font: 22px/1 var(--f-px); color: #ff8a7a; }
html.skin :is(#arScore, .ab-score) .pl em { font: 20px/1 var(--f-px); color: hsl(var(--h) 70% 78%); }
html.skin :is(#arScore .pl i, .ab-score .pl i, .ab-pips i) { border-radius: 0; box-shadow: 0 0 0 2px var(--out); background: #2a0d12; }
html.skin :is(#arScore .pl i, .ab-score .pl i, .ab-pips i).on { background: #d8402c; box-shadow: 0 0 0 2px var(--out), inset 0 2px 0 #ff8a7a; }
html.skin #arRing b { font: 22px/1 var(--f-px); color: #ff8a7a; } html.skin #arRing span { font: 18px/1 var(--f-px); color: #f0d6d2; }
html.skin #arRing.near { box-shadow: 0 0 0 3px var(--sblood) !important; }
html.skin #arRing.out { box-shadow: 0 0 0 3px #ff5a4a !important; }
html.skin #arRing.out b { font-size: 46px; color: var(--bone); text-shadow: 0 4px 0 #4a0a10, 0 7px 0 var(--ink); }
html.skin #arRespawn small { font: 22px/1 var(--f-px); color: #ff9a8a; }
html.skin #arRespawn > b { font: 110px/1 var(--f-px); color: var(--bone); text-shadow: 0 6px 0 #4a0a10, 0 10px 0 var(--ink); }
html.skin #arRespawn span em { font: 22px/1.2 var(--f-px); }
html.skin #arHit path { filter: none; stroke-linecap: square; }
html.skin #arBoard { background: rgba(10, 3, 5, .8) !important; }
html.skin #arBoard .ab-panel.won { box-shadow: 0 0 0 3px var(--sgold) !important; }
html.skin #arBoard .ab-k { font: 22px/1 var(--f-px); color: #ff9a8a; }
html.skin #arBoard .ab-t { font: 60px/1 var(--f-px); color: var(--bone); text-shadow: 0 4px 0 #4a0a10, 0 7px 0 var(--ink); }
html.skin #arBoard .ab-panel.won .ab-t { color: var(--sgold); text-shadow: 0 4px 0 #5a4214, 0 7px 0 var(--ink); }
html.skin #arBoard :is(.ab-s, .ab-next span) { font: 22px/1.2 var(--f-px); color: #f0d6d2; }

/* -------- Rivals: the feed, the active curses, the results */
html.skin :is(#rvFeed, #arFeed) .rvf { border: 0; border-radius: 0; background: rgba(12, 17, 23, .9); box-shadow: 0 0 0 3px var(--out); font: 20px/1.2 var(--f-px); animation: none; }
html.skin .rvf b { font-weight: 400; color: hsl(var(--h, 350) 70% 76%); }
html.skin .rvf.in { background: #2a0a10; box-shadow: 0 0 0 3px var(--out), inset 3px 0 0 #d8402c; }
html.skin .rvf.out, html.skin .rvf.kill { box-shadow: 0 0 0 3px var(--out), inset 3px 0 0 #8a2a34; }
html.skin .rvf.good { box-shadow: 0 0 0 3px var(--out), inset 3px 0 0 #8ee06a; } html.skin .rvf.good .rvi { color: #8ee06a; }
html.skin .rvf.sys { box-shadow: 0 0 0 3px var(--out), inset 3px 0 0 #d8402c; color: #f0d6d2; }
html.skin .rvf.dim { font-size: 18px; }
html.skin .rvi { color: #ff7a6a; }
html.skin #rvActive .rva { border: 0; border-radius: 0; background: #2a0a10; box-shadow: 0 0 0 3px var(--out), inset 0 3px 0 #6a1a20; animation: none; }
html.skin #rvActive .rva > svg { filter: none; }
html.skin #rvActive .rva b { font: 26px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin #rvActive .rva span { font: 17px/1 var(--f-px); color: #ffb0a8; }
html.skin #rvActive .rva.ch.w { background: #0a2a32; box-shadow: 0 0 0 3px var(--out), inset 0 3px 0 #1a5a66; } html.skin #rvActive .rva.ch.w span { color: #bff4ff; }
html.skin #rvActive .rva.ch.r { background: #22102e; box-shadow: 0 0 0 3px var(--out), inset 0 3px 0 #4a2a66; } html.skin #rvActive .rva.ch.r span { color: #e2d0ff; }
html.skin #rvActive .rva.q { box-shadow: 0 0 0 3px var(--out), 0 0 0 6px #6a1a20; }
html.skin body.rv-marked #rvEdge, html.skin body.rv-warned #rvEdge { animation-timing-function: steps(3); }
html.skin :is(.rvres, .arres) th { font: 20px/1 var(--f-px); color: var(--bone2); }
html.skin :is(.rvres, .arres) td { border-radius: 0 !important; background: #0c1117 !important; font: 26px/1 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin :is(.rvres, .arres) tr td:first-child { box-shadow: inset 3px 0 0 var(--out); } html.skin :is(.rvres, .arres) tr td:last-child { box-shadow: inset -3px 0 0 var(--out); }
html.skin :is(.rvres, .arres) td.nm { font: 24px/1.1 var(--f-px); color: hsl(var(--h) 70% 78%); }
html.skin :is(.rvres, .arres) td.nm i { border-radius: 0; box-shadow: 0 0 0 2px var(--out); }
html.skin :is(.rvres, .arres) td.nm :is(small, em) { font: 17px/1 var(--f-px); }
html.skin :is(.rvres, .arres) tr.gold td { background: #2a2208 !important; }
html.skin :is(.rvres, .arres) tr.gold td.pl { color: var(--sgold); text-shadow: 0 3px 0 #5a4214; }
html.skin :is(.rvres, .arres) tr.me td { background-color: #141c26 !important; }

/* -------- omens, run log */
html.skin #omenPick { background: rgba(4, 7, 9, .84) !important; backdrop-filter: blur(4px); }
html.skin #omenPick .op, html.skin #runLog .rl { border: 0 !important; }
html.skin #omenPick h3 { font: 40px/1 var(--f-px); color: #ff7a6a; text-shadow: 0 3px 0 #4a0a10, 0 6px 0 var(--ink); }
html.skin #omenPick .sub, html.skin #runLog .sub { font-family: var(--f-text); color: var(--bone2); }
html.skin #omenPick .row { border: 0 !important; box-shadow: none; padding: 8px 10px; }
html.skin #omenPick .row.on { background: #1e0a0e !important; box-shadow: 0 0 0 3px var(--out), inset 3px 0 0 #d8402c; }
html.skin #omenPick .row i { background: #10161c; box-shadow: var(--socket); }
html.skin #omenPick .row.on i { color: #ff7a6a; }
html.skin #omenPick .row b { font: 24px/1 var(--f-px); font-weight: 400; color: var(--bone); }
html.skin #omenPick .row span { font-family: var(--f-text); }
html.skin #omenPick .pip { border: 0; background: #10161c; box-shadow: var(--socket); font: 20px/1 var(--f-px); color: var(--bone2); }
html.skin #omenPick .pip.on { background: #c8261e; box-shadow: 0 0 0 3px var(--out), inset 0 3px 0 #ff7a6a; color: var(--bone); }
html.skin #omenPick .pip.on[data-r="0"] { background: #1f2c40; box-shadow: 0 0 0 3px var(--out), inset 0 3px 0 #3e5866; }
html.skin #omenPick .foot { background: #0c1117; border-top: 0; box-shadow: 0 -3px 0 var(--out); }
html.skin #omenPick .lvl { font: 30px/1 var(--f-px); }
html.skin :is(#omenPick, #runLog, .momen) .btn { font-family: var(--f-px) !important; font-weight: 400 !important; }
html.skin .momen .mol { font: 20px/1 var(--f-px); color: #ff7a6a; }
html.skin #runLog { background: rgba(4, 7, 9, .84) !important; backdrop-filter: blur(4px); }
html.skin #runLog h3 { font: 40px/1 var(--f-px); color: var(--sgold); text-shadow: 0 3px 0 #5a4214, 0 6px 0 var(--ink); }
html.skin #runLog .rl-row { border: 0 !important; background: #0c1117; box-shadow: 0 0 0 3px var(--out); font: 20px/1.1 var(--f-px); }
html.skin #runLog .rl-row:hover { box-shadow: 0 0 0 3px var(--out), 0 0 0 6px var(--bone3); }
html.skin #runLog .rl-row.on { background: #1a1608; box-shadow: 0 0 0 3px var(--out), 0 0 0 6px var(--sgold); }
html.skin #runLog .rl-row em { font: 22px/1 var(--f-px); }
html.skin #runLog .rl-w { border-radius: 0; background: #10161c; box-shadow: var(--socket); }
html.skin #runLog .rl-w.evo { box-shadow: var(--socket), 0 0 0 5px var(--sgold); }
html.skin #runLog .rl-box { border: 0 !important; }
html.skin #runLog .rl-box h4 { font: 22px/1 var(--f-px); color: var(--sgold); }
html.skin #runLog .rl-bar i { border-radius: 0; background: #d8402c; box-shadow: inset 0 2px 0 #ff7a6a; }
html.skin #runLog .rl-d { border-top: 0; box-shadow: 0 -3px 0 #18232b; }
html.skin #runLog :is(td, th) { border-bottom: 2px solid #18232b; font-family: var(--f-px); font-size: 17px; }

/* -------- account: the menu strip, the end-screen block, unlock cards */
html.skin .acct { border: 0 !important; background: transparent; box-shadow: none !important; }
html.skin .acct.up { box-shadow: 0 0 0 3px var(--sgold) !important; }
html.skin .acct-title { font: 24px/1 var(--f-px); color: var(--bone2); }
html.skin .acct-title em { font: 30px/1 var(--f-px); color: #8ee06a; text-shadow: var(--px-shadow3); }
html.skin .acct-ding { font: 28px/1 var(--f-px); color: var(--sgold); text-shadow: 0 3px 0 #5a4214, 0 5px 0 var(--ink); }
html.skin :is(.acct-sub, .acct-rows, .anext, .anew) { font-family: var(--f-text); color: var(--bone2); }
html.skin .acct-rows b { font: 22px/1.2 var(--f-px); color: #8ee06a; }
html.skin .acct-card { border: 0 !important; background: #0c1117 !important; box-shadow: 0 0 0 3px var(--out), 0 0 0 6px var(--sgold) !important; overflow: visible; }
html.skin .acct-card::after, html.skin .acct-rays { display: none; }
html.skin .acct-card .wmed { box-shadow: var(--socket), 0 0 0 6px var(--sgold) !important; border-radius: 0 !important; }
html.skin .acct-card small, html.skin .acct-qhead { font: 18px/1 var(--f-px); color: var(--sgold); }
html.skin .acct-card b { font: 28px/1.05 var(--f-px); color: var(--bone); text-shadow: var(--px-shadow3); }
html.skin .acct-card span { font: 18px/1 var(--f-px); }
html.skin .acct-card p { font-family: var(--f-text); color: var(--bone2); }
html.skin .acct-card.trait .acct-ti { border-radius: 0; background: #10161c; box-shadow: var(--socket), 0 0 0 6px var(--sgold); }
html.skin .anew > span, html.skin .wlock::before, html.skin .wcard .wnew { border-radius: 0; font: 16px/1.2 var(--f-px); background: var(--sgold); color: #2a1800; box-shadow: 0 0 0 2px var(--out); letter-spacing: 0; text-transform: none; }
html.skin .aquests .aq { border: 0; border-radius: 0; background: #0c1117; box-shadow: 0 0 0 2px var(--out); }
html.skin .aquests .aq i { border-radius: 0; background: linear-gradient(90deg, var(--sgold) calc(var(--f) * 100%), #18232b 0); }
html.skin .aquests .aqtop { color: var(--bone2); font-family: var(--f-px); font-size: 18px; }
html.skin .mstar.on { filter: none; }
html.skin .wcard.mastered { box-shadow: 0 0 0 3px var(--sgold) !important; }
html.skin .mastery { border: 0; border-radius: 0; background: #0c1117; box-shadow: 0 0 0 3px var(--out); }
html.skin .mastery .mlabel { font: 18px/1 var(--f-px); color: var(--sgold); }
html.skin #netLobby .nl-seg button:not(.on) { background-image: none !important; }
html.skin :is(.rvres, .arres) tr.me td { box-shadow: none !important; }
html.skin :is(.rvres, .arres) tr.me td:first-child { box-shadow: inset 3px 0 0 var(--bone) !important; }
html.skin .acct-lv { border: 0 !important; background: #10161c !important; box-shadow: var(--socket), 0 0 0 6px var(--sgold) !important; }
html.skin .acct-lv small { font: 16px/1 var(--f-px); color: var(--sgold); }
html.skin .acct-lv b { font: 28px/1 var(--f-px); color: var(--bone); }
html.skin .acct-bar { height: 12px; border-radius: 0; background: #10161c; box-shadow: 0 0 0 3px var(--out); }
html.skin .acct-bar i { border-radius: 0; background: #4ab8e0; box-shadow: inset 0 3px 0 #9ae4ff; }
html.skin .acct-bar::after { display: none; }
html.skin body.arena #netHud { top: 128px; } /* (the Arena's hearts push the loot row down) */
html.skin :is(#omenPick, #runLog, #netLobby, #netGo, #runGate):focus { outline: none; }
html.skin #runLog .btn.tool, html.skin .momen .btn.tool { font-size: 20px !important; padding: 6px 12px 7px; }
html.skin #netLobby .whead { font: 22px/1 var(--f-px); color: var(--bone2); }
html.skin #netLobby .whead small { font: 18px/1 var(--f-px); color: var(--bone3); }
html.skin #netLobby .nl-set { grid-template-columns: 108px 1fr; column-gap: 8px; }
html.skin #netLobby .nl-set > span { font-size: 21px; }
html.skin #netLobby .nl-seg button { padding: 8px 10px !important; font-size: 19px !important; }
html.skin #netLobby :is(.nl-codeBtns .nl-btn, .nl-say .nl-btn, .nl-leave, .nl-btn.nl-ghost) { font-size: 20px !important; }

/* ================================================================ the builder mirrors the start menu (round 21): your wretch on the
   left (its summary, then the live hero), the editing on the right where the menu's list is; Play at the foot of the right
   column, like Play heads the menu's list. (Narrow screens keep the one scrolling column of styles.css.) */
@media (min-width: 901px) {
  html.skin .bwrap { grid-template-columns: clamp(330px, 25vw, 400px) minmax(0, 1fr) clamp(480px, 40vw, 660px); }
  html.skin .bsum { grid-column: 1; grid-row: 2; }
  html.skin .bstage { grid-column: 2; grid-row: 2; }
  html.skin .bleft { grid-column: 3; grid-row: 2; padding-bottom: 104px; }
  html.skin .bsum .btn.play.bplay { position: fixed; right: 18px; bottom: 16px; width: calc(clamp(480px, 40vw, 660px) - 36px); z-index: 3; }
}
/* the weapon grid (src/skin/wgrid.js): each card shows the stone you will carry. The charged look is the stone at rest, the
   picked weapon's glyph lights in its colour (the flash look), a locked one is the dim stone; the attack-shape pictogram sits on
   the stone's corner in the weapon's colour */
html.skin #builder .wcard { gap: 7px; padding: 12px 4px 9px; }
html.skin #builder .wcard:hover { transform: none; }
html.skin .wcard .wtile { position: relative; flex: 0 0 auto; width: 76px; height: 76px; transition: transform .1s steps(2); }
html.skin .wcard:hover .wtile { transform: translateY(-4px); }
html.skin .wcard .wtile .stone { position: absolute; inset: 0; pointer-events: none; }
html.skin .wcard .wtile .stone .s1 { clip-path: none !important; }
html.skin .wcard .wtile .stone .s2 { opacity: 0; transition: opacity .15s steps(3); }
html.skin .wcard.on .wtile .stone .s2 { opacity: .9; }
html.skin .wcard.locked .wtile .stone .s1 { opacity: 0; }
html.skin .wcard.locked .wtile .stone { filter: saturate(.4) brightness(.8); }
html.skin .wcard .wtile .wbadge { position: absolute; inset: auto -7px -7px auto; z-index: 1; width: 30px; height: 30px; padding: 4px; border-radius: 0; background: #0c1117; box-shadow: 0 0 0 3px var(--out), inset 0 -3px 0 #233039; }
html.skin .wcard .wtile .wbadge svg { stroke: var(--cc, var(--bone)); stroke-width: 2.4; }
html.skin .wcard .wtile .wbadge svg .f { fill: var(--cc, var(--bone)); }
html.skin .wcard.locked .wtile .wbadge svg { stroke: var(--bone3); } html.skin .wcard.locked .wtile .wbadge svg .f { fill: var(--bone3); }
html.skin .wcard span { font: 19px/1.05 var(--f-px); }
html.skin .wcard.on span { color: var(--bone); }
html.skin .wcard.locked span { color: #66706d; }
html.skin .wcard .mstar { width: 12px; height: 12px; color: #2a3440; }
html.skin .wcard .mstar.on { color: var(--sgold); }
/* the shop's "Walk away" (src/skin/cards.js leaveButton): a stone button under the three cards, not a fourth stone */
html.skin .modal.stoned .card.skinhide { display: none; }
html.skin .modal .skinleave { display: flex; justify-content: center; margin-top: 22px; }
html.skin .modal .skinleave .btn.tool { gap: 10px; padding: 8px 18px 9px; font: 24px/1 var(--f-px); }
html.skin .modal .skinleave .btn.tool svg.gi { width: 24px; height: 24px; }
/* every card's text is ON its stone now: the old line under the row (the hovered card in full) only got covered by the stones */
html.skin .modal.stoned .skindetail { display: none; }

/* ================================================================ Single player panel (src/skin/menu.js drawSolo): the maps as stone
   tabs (the picked one ringed in bone, locked ones dim with what opens them), the tier moons, omens, a big Play */
html.skin #menuScreen .msubp .smaps { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; max-height: 46vh; overflow-y: auto; padding: 4px; }
html.skin #menuScreen .smap { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 14px 10px; border: 0; background-color: transparent; color: var(--bone2); text-align: left; cursor: pointer; text-shadow: var(--px-shadow); }
html.skin #menuScreen .smap b { font: 28px/1 var(--f-px); color: var(--bone); }
html.skin #menuScreen .smap span { font: 15px/1.25 var(--f-text); color: var(--bone2); }
html.skin #menuScreen .smap.on { box-shadow: 0 0 0 3px var(--bone); }
html.skin #menuScreen .smap.on b { color: var(--sgold); }
html.skin #menuScreen .smap.lock { cursor: default; filter: saturate(.3) brightness(.7); }
html.skin #menuScreen .smap.lock b::after { content: ''; display: inline-block; width: 15px; height: 18px; margin-left: 10px; vertical-align: -1px; background: var(--px-lock) center / 15px 18px no-repeat; image-rendering: pixelated; }
html.skin #menuScreen .msubp .foc { outline: 3px solid var(--sgold); outline-offset: 3px; }
html.skin #menuScreen .msubp .srow { display: flex; align-items: center; gap: 14px; padding: 6px 4px; font: 28px/1 var(--f-px); color: var(--bone); cursor: pointer; }
html.skin #menuScreen .msubp .srow .sl { min-width: 110px; }
html.skin #menuScreen .msubp .srow .val { display: inline-flex; align-items: center; gap: 8px; }
html.skin #menuScreen .msubp .srow .sv { font: 20px/1 var(--f-px); color: var(--sgold); }
html.skin #menuScreen .msubp .splay { display: flex; align-items: baseline; justify-content: space-between; width: 100%; margin: 14px 0 6px; padding: 12px 18px 13px; border: 0; background-color: transparent; color: var(--bone); font: 40px/1 var(--f-px); text-shadow: var(--px-shadow3); box-shadow: 0 0 0 3px var(--sgold); cursor: pointer; }
html.skin #menuScreen .msubp .splay small { font: 20px/1 var(--f-px); color: var(--bone2); }
html.skin #menuScreen .msubp .splay:hover { transform: translateY(-2px); }
html.skin #menuScreen .msubp .smaps { gap: 6px; margin: 4px 0 8px; }
html.skin #menuScreen .smap { padding: 6px 12px 7px; }
html.skin #menuScreen .smap b { font-size: 24px; }
html.skin #menuScreen .smap span { font-size: 14px; }
html.skin #menuScreen .msubp .splay { margin: 8px 0 4px; padding: 9px 16px 10px; font-size: 34px; }
html.skin #menuScreen .msubp h3 { margin-bottom: 4px; }
html.skin #menuScreen .smenu:has(.msubp:not([hidden])) .macct, html.skin #menuScreen .smenu:has(.msubp:not([hidden])) .mkeys { display: none; } /* (a panel needs the height) */
/* every card picker is ONE row, like a hand of cards: never wrapped over the screen (playtest: the Hex Oven's 5 cards were strewn
   all over it). --n = the cards in the row (cards.js); each card is as wide as fits, the gap shrinks with more cards */
html.skin .modal.stoned .cards { flex-wrap: nowrap; --gap: clamp(18px, calc(7.6vw - (var(--n, 3) - 3) * 1.8vw), 124px); gap: var(--gap); }
html.skin .modal.stoned .card { width: min(clamp(200px, min(20vw, 35vh), 320px), calc((100vw - 60px - (var(--n, 3) - 1) * var(--gap)) / var(--n, 3))); flex: 0 0 auto; }
/* the Codex (src/skin/menu.js drawCodex): the card legend and every item in full */
html.skin #menuScreen .msubp .codex { max-height: 66vh; overflow-y: auto; padding-right: 8px; scrollbar-color: #2b3e52 transparent; }
html.skin #menuScreen .codex h4 { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; font: 26px/1 var(--f-px); color: var(--bone); }
html.skin #menuScreen .codex p { margin: 2px 0 6px; font: 15px/1.3 var(--f-text); color: var(--bone2); }
html.skin #menuScreen .codex .crow { display: flex; align-items: center; gap: 12px; padding: 2px 0; font: 22px/1 var(--f-px); }
html.skin #menuScreen .cpips { display: inline-flex; gap: 5px; }
html.skin #menuScreen .cpips i { width: 10px; height: 10px; transform: rotate(45deg); background: #10161c; box-shadow: 0 0 0 2px #05070a; }
html.skin #menuScreen .cpips i.on { background: var(--c); }
html.skin #menuScreen .codex .citem { display: flex; gap: 10px; padding: 7px 4px; border-bottom: 2px solid #18232b; }
html.skin #menuScreen .codex .citem svg.ci { flex: 0 0 30px; width: 30px; height: 30px; color: var(--bone); }
html.skin #menuScreen .codex .citem b { font: 22px/1 var(--f-px); color: var(--bone); }
html.skin #menuScreen .codex .citem .cs { margin-left: 10px; font: 17px/1 var(--f-px); color: var(--sgold); }
html.skin #menuScreen .codex .citem p { margin: 3px 0 0; }
/* the room start (net-ui tickGo): a loading screen, then the 3 · 2 · 1 over the live, frozen game */
html.skin #netGo .ng-load { display: none; width: min(420px, 70vw); height: 14px; margin: 18px auto 0; background: #10161c; box-shadow: 0 0 0 3px var(--out); }
html.skin #netGo .ng-load i { display: block; height: 100%; width: 0; background: var(--sgold); box-shadow: inset 0 3px 0 #fff3b0; transition: width .1s steps(4); }
html.skin #netGo.loading .ng-load { display: block; }
html.skin #netGo.loading .ng-n { display: none; }
html.skin #netGo.ingame { background: none !important; backdrop-filter: none; pointer-events: none; }
html.skin #netGo.ingame .ng-room, html.skin #netGo.ingame .ng-msg, html.skin #netGo.ingame .ng-load { display: none; }
html.skin #netGo.ingame .ng-n { font-size: 240px !important; animation: ngTick 1s steps(6) infinite; }
html.skin #netGo.ingame.go .ng-n { animation: none; }
@keyframes ngTick { 0% { transform: scale(1.35); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(.95); opacity: .6; } }
html.skin #netGo.loading { background: rgba(4, 7, 9, .96) !important; }
html.skin #netGo.loading .ng-box::before { content: 'Loading'; display: block; margin-bottom: 14px; font: 72px/1 var(--f-px); color: var(--bone); text-shadow: 0 4px 0 #2a2622, 0 7px 0 var(--ink); }
html.skin #netGo.ingame { align-items: start; padding-top: 14vh; }
/* the new-run loading screen (index.html #bootLoad, shown by html.booting-run from the first paint; main.js removes it once the run runs) */
#bootLoad { display: none; }
html.booting-run #bootLoad, html.booting #bootLoad { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #05080a; }
#bootLoad > div { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#bootLoad b { font: 72px/1 'Jersey 10', monospace; color: #ece4d2; text-shadow: 0 4px 0 #2a2622, 0 7px 0 #07090b; }
#bootLoad small { font: 22px/1 'Jersey 10', monospace; color: #b9b2a4; min-height: 22px; }
#bootLoad span { width: min(420px, 70vw); height: 14px; margin-top: 10px; background: #10161c; box-shadow: 0 0 0 3px #05070a; overflow: hidden; }
#bootLoad i { display: block; height: 100%; width: 30%; background: #ffd23f; box-shadow: inset 0 3px 0 #fff3b0; animation: bootBar 1.1s steps(12) infinite; }
@keyframes bootBar { from { transform: translateX(-100%); } to { transform: translateX(340%); } }