:root { --field: #08566a; --deep: #04303d; --glow: #0b7189; --ink: #f4f1e6; --team: #2f7bff; font-family: Archivo, system-ui, sans-serif; color: var(--ink); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, var(--glow) 0%, var(--field) 45%, var(--deep) 100%); }
#board { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: 700 18px/1 Archivo, system-ui, sans-serif; color: var(--deep); background: var(--ink); border: 0; padding: 16px 22px; border-radius: 6px; cursor: pointer; min-height: 52px; }
button:hover:not(:disabled), button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
button:disabled { opacity: .35; cursor: default; }
button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
kbd { font: 700 12px/1 Archivo, monospace; padding: 3px 6px; border-radius: 4px; background: rgba(0,0,0,.18); margin-left: 6px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); text-align: center; background: color-mix(in srgb, var(--deep) 82%, transparent); backdrop-filter: blur(6px); z-index: 10; }
.screen[hidden], #hud[hidden] { display: none; }
h1 { font-weight: 900; font-size: clamp(56px, 13vw, 132px); line-height: .86; margin: 0; letter-spacing: -.02em; }
h2 { font-weight: 900; font-size: clamp(36px, 7vw, 64px); margin: 0; line-height: 1; }
.lede { font: 500 clamp(17px, 2.2vw, 21px)/1.35 Archivo, sans-serif; margin: 0; }
.credit { font-size: 13px; opacity: .7; margin: 0; }
#door { background: linear-gradient(180deg, color-mix(in srgb, var(--deep) 35%, transparent), color-mix(in srgb, var(--deep) 88%, transparent)); backdrop-filter: blur(2px); }
.looks button { min-height: 40px; padding: 10px 16px; font-size: 15px; }
.looks button.on { background: var(--ink); color: var(--deep); }
body:not(.ready) #door .row:first-of-type button { opacity: .5; }
.sheet { text-align: left; align-items: stretch; max-width: none; }
.sheet ol { margin: 0 auto; padding-left: 24px; max-width: 760px; font: 500 18px/1.4 Archivo, sans-serif; display: grid; gap: 10px; }
.sheet h2, .sheet .keys, .sheet > button { align-self: center; }
.sheet .keys { font-size: 15px; opacity: .85; text-align: center; }
.sheet.small { align-items: center; background: color-mix(in srgb, var(--deep) 60%, transparent); }
#cover { background: var(--deep); box-shadow: inset 0 0 0 14px var(--team); }
#result { box-shadow: inset 0 0 0 14px var(--team); }

#hud header { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 14px; align-items: baseline; padding: max(14px, env(safe-area-inset-top)) 20px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--deep) 85%, transparent), transparent); pointer-events: none; z-index: 5; }
#turn { font-weight: 900; font-size: 26px; }
#phase { font-weight: 700; font-size: 18px; color: var(--team); filter: brightness(1.5); }
#hud footer { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; align-items: stretch; justify-content: center; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, color-mix(in srgb, var(--deep) 92%, transparent), color-mix(in srgb, var(--deep) 60%, transparent) 70%, transparent); z-index: 5; flex-wrap: wrap; }
#hud:not(.planning) footer { display: none; }
#chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; text-align: left; min-width: 150px; padding: 10px 12px; background: rgba(255,255,255,.08); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.chip kbd { grid-row: span 2; margin: 0; background: var(--team); color: #fff; font-size: 14px; padding: 6px 8px; }
.chip .t { font-weight: 900; font-size: 17px; }
.chip .hp { grid-column: 2; font-size: 12px; letter-spacing: 2px; color: #fff6c8; justify-self: end; grid-row: 1; }
.chip .o { grid-column: 2; font: 500 14px Archivo, sans-serif; opacity: .85; }
.chip.on { background: var(--team); box-shadow: inset 0 0 0 2px #fff; }
.chip.on kbd { background: rgba(0,0,0,.25); }
.chip.dead { opacity: .45; }
#lock { background: var(--ink); min-width: 170px; }
@media (max-width: 640px) {
  .chip { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); padding: 8px 10px; }
  #chips { width: 100%; }
  #lock { width: 100%; }
  .chip kbd, #lock kbd, .keys { display: none; }
  .chip { grid-template-columns: 1fr; }
}

/* ---- Ink: goth zen. Hairlines, a quiet serif, nothing filled that needn't be. ---- */
body[data-skin="ink"] { --ink: #ece6da; --team: #ece6da; background: #0b0b0d; font-family: 'Cormorant Garamond', Georgia, serif; }
body[data-skin="ink"] .screen { background: rgba(11, 11, 13, .9); backdrop-filter: none; }
body[data-skin="ink"] #door { background: rgba(11, 11, 13, .8); }
body[data-skin="ink"] h1 { font: 300 clamp(44px, 9vw, 96px)/1 'Cormorant Garamond', serif; letter-spacing: .32em; margin-right: -.32em; }
body[data-skin="ink"] h2 { font: 300 clamp(34px, 6vw, 60px)/1.05 'Cormorant Garamond', serif; letter-spacing: .12em; }
body[data-skin="ink"] .lede { font: 400 clamp(18px, 2.2vw, 22px)/1.4 'Cormorant Garamond', serif; font-style: italic; opacity: .8; }
body[data-skin="ink"] button { font: 500 17px/1 'Cormorant Garamond', serif; letter-spacing: .14em; text-transform: uppercase; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(236,230,218,.55); border-radius: 0; }
body[data-skin="ink"] button:hover:not(:disabled), body[data-skin="ink"] button:focus-visible { background: var(--ink); color: #0b0b0d; outline: none; }
body[data-skin="ink"] button.ghost { box-shadow: none; opacity: .65; }
body[data-skin="ink"] .looks button { font-size: 13px; box-shadow: none; opacity: .45; }
body[data-skin="ink"] .looks button.on { opacity: 1; background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
body[data-skin="ink"] kbd { background: transparent; box-shadow: inset 0 0 0 1px currentColor; font-family: 'Cormorant Garamond', serif; }
body[data-skin="ink"] #hud header { background: none; }
body[data-skin="ink"] #turn { font: 300 26px 'Cormorant Garamond', serif; letter-spacing: .2em; text-transform: uppercase; }
body[data-skin="ink"] #phase { font: italic 400 19px 'Cormorant Garamond', serif; color: var(--team); filter: none; opacity: .85; }
body[data-skin="ink"] #hud footer { background: linear-gradient(0deg, #0b0b0d 60%, transparent); }
body[data-skin="ink"] .chip { background: transparent; box-shadow: inset 0 0 0 1px rgba(236,230,218,.18); text-transform: none; letter-spacing: .04em; }
body[data-skin="ink"] .chip .t { font: 500 19px 'Cormorant Garamond', serif; }
body[data-skin="ink"] .chip .t i, body[data-skin="ink"] #spawn-types i { font-style: normal; color: var(--team); margin-right: 8px; font-family: system-ui, sans-serif; font-size: 14px; }
body[data-skin="ink"] .chip .o { font: italic 400 15px 'Cormorant Garamond', serif; }
body[data-skin="ink"] .chip .hp { color: var(--team); }
body[data-skin="ink"] .chip kbd { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(236,230,218,.4); }
body[data-skin="ink"] .chip.on { background: transparent; box-shadow: inset 0 0 0 1px var(--team); }
body[data-skin="ink"] .chip.on kbd { background: transparent; }
body[data-skin="ink"] #lock { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
body[data-skin="ink"] #cover, body[data-skin="ink"] #result { box-shadow: inset 0 0 0 1px var(--team); background: #0b0b0d; }
body[data-skin="ink"] .sheet ol { font: 400 20px/1.45 'Cormorant Garamond', serif; }

.ic { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin-right: 8px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#spawn-types .ic { width: 26px; height: 26px; }
body[data-skin="ink"] .chip .t .ic { color: var(--team); }
body[data-skin="ink"] #spawn-types .ic { color: inherit; }

#door { overflow-y: auto; justify-content: flex-start; padding-top: max(8vh, env(safe-area-inset-top)); }
#shelf, #end-shelf { width: min(920px, 100%); margin-top: 8px; }
#result { overflow-y: auto; }
#credits ul { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 10px; font-size: 18px; line-height: 1.4; }
#credits a { color: inherit; }
body[data-skin="ink"] #credits ul { font: 400 20px/1.45 'Cormorant Garamond', serif; }

.sheet { overflow-y: auto; justify-content: flex-start; }
.sheet > * { flex-shrink: 0; }

#credits ul { width: 100%; min-width: 0; }
#credits li { overflow-wrap: anywhere; min-width: 0; }
@media (max-height: 500px) {
  #hud footer { flex-wrap: nowrap; gap: 6px; padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  #chips { flex-wrap: nowrap; gap: 6px; }
  .chip { min-width: 0; padding: 6px 10px; min-height: 40px; }
  .chip .o, .chip kbd, #lock kbd { display: none; }
  #lock { min-width: 0; min-height: 40px; padding: 8px 14px; }
  #hud header { padding-top: 8px; padding-bottom: 6px; }
}

#board { aspect-ratio: auto; } /* the canvas fills the window; drop the ratio its width/height attributes imply */