/* Theme colours are set from js/ui.js (THEMES); these are the defaults ("Ember"). */
:root {
  --bg: #120d0b; --bar: #1d1512; --field: #241a16; --panel: #1a1311; --box: #2a1f1a;
  --text: #f3e6d8; --sub: #8b7466; --typed: #f3e6d8; --err: #ff4d4d; --caret: #ff9a3c; --accent: #ff7a1a; --fix: #f5d327;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, "Segoe UI", sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

#app { height: 100vh; display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto; padding: 8px; gap: 8px; position: relative; }

/* top bar: score, wave, settings */
#topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--bar); border-radius: 8px; padding: 6px 14px; font-weight: 600; }
#mid { display: flex; justify-content: center; align-items: baseline; gap: 16px; }
#wave { text-align: center; letter-spacing: .05em; }
#timer { font-variant-numeric: tabular-nums; opacity: .8; }
#gear { justify-self: end; background: none; border: 0; font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 6px; opacity: .8; }
#gear:hover { opacity: 1; background: rgba(255,255,255,.08); }

/* panel 2: battlefield */
#panel2 { flex: 1 1 50%; min-height: 200px; display: flex; flex-direction: column; background: var(--field); border-radius: 8px; overflow: hidden; }
#field { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#art { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#fx { position: absolute; pointer-events: none; }
#combo { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: 30px; color: var(--accent); text-shadow: 0 2px 0 rgba(0,0,0,.6); pointer-events: none; }
#combo.pop { animation: pop .18s ease-out; }
@keyframes pop { from { transform: translateX(-50%) scale(1.35); } to { transform: translateX(-50%) scale(1); } }
#banner { position: absolute; top: 34%; left: 0; right: 0; text-align: center; font-size: 34px; font-weight: 800; letter-spacing: .06em; color: var(--text); text-shadow: 0 3px 0 rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .3s; }
#banner.on { opacity: 1; }
#banner.count { font-size: 80px; top: 22%; color: var(--accent); line-height: 1.1; }
#banner .cdlabel { font-size: 30px; color: var(--text); }

/* focus bar: the line under the battlefield */
#focusbar { position: relative; height: 26px; background: rgba(0,0,0,.35); }
/* full-width bar shrunk with scaleX from js/ui.js (no CSS transition: it gets restarted every frame) */
#focusfill { position: absolute; inset: 0; background: #3a6cff; transform: scaleX(0); transform-origin: left center; }
#focusbar.max #focusfill { animation: maxglow .8s ease-in-out infinite alternate; }
/* the knight's ultimate: a shining glow across the whole bar, silver or rainbow */
#focusbar.aura-silver, #focusbar.aura-rainbow { overflow: hidden; }
#focusbar.aura-silver { box-shadow: 0 0 12px #dfe7ff; }
#focusbar.aura-rainbow { box-shadow: 0 0 12px #c9a0ff; }
#focusbar.aura-silver::after, #focusbar.aura-rainbow::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 200% 100%; animation: aurashine 1.4s linear infinite; }
#focusbar.aura-silver::after { background-image: linear-gradient(90deg, rgba(235,242,255,.2), rgba(255,255,255,.65), rgba(235,242,255,.2), rgba(255,255,255,.65), rgba(235,242,255,.2)); }
#focusbar.aura-rainbow::after { background-image: linear-gradient(90deg, #ff5a5a99, #ffb03a99, #ffe45a99, #6fe86f99, #5ac8ff99, #8a7bff99, #e27bff99, #ff5a5a99); }
@keyframes aurashine { from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes maxglow { from { filter: brightness(1); } to { filter: brightness(1.45); } }
#focuslabel { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-shadow: 0 1px 2px rgba(0,0,0,.8); color: #fff; }

/* panel 1: health + words */
#panel1 { flex: 1 1 50%; min-height: 0; background: var(--panel); border-radius: 8px; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
#statusrow { display: grid; grid-template-columns: 1fr minmax(180px, 320px) 1fr; align-items: center; gap: 12px; }
#wpm { position: relative; justify-self: start; font-weight: 700; font-size: 22px; color: var(--text); opacity: .85; }
/* the knight's glowing row holds your speed still: a glowing rectangle covers the wpm until it ends */
#wpm.gd-silver, #wpm.gd-rainbow { opacity: 1; }
#wpm.gd-silver::after, #wpm.gd-rainbow::after { content: ""; position: absolute; inset: -2px -8px; border-radius: 4px; pointer-events: none; background-size: 200% 100%; animation: aurashine 1.4s linear infinite; }
#wpm.gd-silver::after { box-shadow: 0 0 12px #dfe7ff; background-image: linear-gradient(90deg, rgba(235,242,255,.18), rgba(255,255,255,.38), rgba(235,242,255,.18), rgba(255,255,255,.38), rgba(235,242,255,.18)); }
#wpm.gd-rainbow::after { box-shadow: 0 0 12px #c9a0ff; background-image: linear-gradient(90deg, #ff5a5a66, #ffb03a66, #ffe45a66, #6fe86f66, #5ac8ff66, #8a7bff66, #e27bff66, #ff5a5a66); }
/* icon row: the wizard's 3 attacks | your powers */
#abilities { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; min-height: 40px; }
#abRow, #pwRow { display: flex; gap: 8px; flex-wrap: wrap; }
#absep { width: 2px; align-self: stretch; min-height: 36px; background: var(--sub); opacity: .35; border-radius: 1px; margin: 0 4px; }
#pwRow:empty, #absep.none { display: none; }
.ab, .pw { position: relative; width: 40px; height: 40px; flex: none; border-radius: 6px; }
.ab img, .pw img { width: 40px; height: 40px; image-rendering: pixelated; display: block; transition: filter .2s, opacity .2s; }
/* the big centred number: letters / words / seconds / kills left */
.ab .n, .pw .n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 900 18px/1 var(--mono);
  text-shadow: -2px 0 #14101e, 2px 0 #14101e, 0 -2px #14101e, 0 2px #14101e, 0 0 6px #000; pointer-events: none; }
.pw .n { font-size: 13px; }
.ab.locked img { filter: grayscale(1); opacity: .45; }
.ab.locked .n { font-size: 12px; color: #d8d8e4; }
.ab.cast, .pw.fire { animation: abcast .35s ease-out; }
/* power level, bottom right */
.pw .plv { position: absolute; right: -7px; bottom: -7px; padding: 0 4px; border-radius: 4px; background: #14101e; color: #fff; font: 800 13px/16px var(--mono); border: 1px solid rgba(255,255,255,.4); }
/* active powers glow in their rarity colour; inactive ones are greyed out */
.pw.on.common { box-shadow: 0 0 8px 2px rgba(190,200,215,.75); }
.pw.on.rare   { box-shadow: 0 0 9px 2px rgba(74,140,255,.85); }
.pw.on.epic   { box-shadow: 0 0 10px 3px rgba(180,92,255,.9); }
.pw.on { animation: pwglow 1.2s ease-in-out infinite alternate; }
.pw.on.fire { animation: abcast .35s ease-out, pwglow 1.2s ease-in-out .35s infinite alternate; }
@keyframes pwglow { from { filter: brightness(1); } to { filter: brightness(1.25); } }
.pw:not(.on) img { filter: grayscale(1); opacity: .4; }
.pw:not(.on)::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: rgba(110,110,125,.35); pointer-events: none; }
/* flashes when power particles land */
#focusbar.gain { animation: gain .35s ease-out; }
@keyframes gain { 0% { filter: brightness(1.9); box-shadow: 0 0 14px #9fe8ff; } 100% { filter: none; box-shadow: none; } }
#health.healed { animation: healed .45s ease-out; }
@keyframes healed { 0% { filter: brightness(1.7); box-shadow: 0 0 14px #7dff9a; } 100% { filter: none; box-shadow: none; } }
#ui-fx { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
@keyframes abcast { 0% { transform: scale(1.25); filter: brightness(1.8); } 100% { transform: scale(1); filter: none; } }
#health { position: relative; height: 22px; background: rgba(0,0,0,.4); border: 2px solid rgba(0,0,0,.6); border-radius: 4px; overflow: hidden; }
#hpfill { height: 100%; width: 100%; background: #32e05a; transition: width .2s, background .2s; }
#hptext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #10140f; }
#health.hurt { animation: shake .3s; }
#guards { justify-self: end; font-size: 14px; font-weight: 700; color: var(--text); opacity: .85; text-align: right; }

.box { background: var(--box); border-radius: 8px; }

/* words panel, Monkeytype style */
/* the words panel: attack icons in the top-left corner, then the three lines */
#wordsbox { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 14px 8px; }
/* the knight's glowing row: the time left, as a line around the words panel (drawn in UI.rowLine) */
#rowline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke-width: 3; }
#rowline.gd-silver { filter: drop-shadow(0 0 1px rgba(60,75,110,.7)) drop-shadow(0 0 5px #dfe7ff); }
#rowline.gd-rainbow { filter: drop-shadow(0 0 5px #c9a0ff); }
#wordsbox.away { visibility: hidden; }
#words { flex: 1; min-height: calc(3 * 1.8em); font-family: var(--mono); font-size: 32px; line-height: 1.8; padding: 0 10px 28px; overflow: hidden; color: var(--sub); display: flex; flex-direction: column; justify-content: center; }
/* justified: the spaces between words stretch so every line fills the full width */
#words .line { white-space: nowrap; display: flex; }
#words .c { flex: none; }
#words .sp { flex: 1 0 auto; }
#words .sp.end { flex: none; width: 0; }   /* the line's last space takes no room, so the last word reaches the right edge; the caret still shows there */
#words .c { position: relative; }
#words .ok { color: var(--typed); }
#words .fix { color: var(--fix); }
#words .bad { color: var(--err); }
#words .rune { color: var(--accent); text-shadow: 0 0 8px var(--accent); font-weight: 700; }
/* capitals changed by Humble Letters: a purple glow, and a pop at the moment they change */
#words .low { color: #b57bff; text-shadow: 0 0 8px #c77dff; font-weight: 700; }
#words .pop { animation: lowpop .6s ease-out; }
@keyframes lowpop { 0% { transform: scale(1.7); filter: brightness(2); } 100% { transform: scale(1); filter: none; } }
/* a line from the knight's ultimate: glowing rectangles over every letter and space */
#words .gd-silver { color: var(--text); background: rgba(190,205,235,.38); box-shadow: 0 0 8px rgba(205,222,255,.85); }
#words .gd-rainbow { color: var(--text); background: hsla(var(--h), 90%, 62%, .42); box-shadow: 0 0 8px hsla(var(--h), 90%, 62%, .9); }
#words .cur::before { content: ""; position: absolute; left: -1px; top: .2em; bottom: .2em; width: 2px; background: var(--caret); animation: blink 1s steps(1) infinite; }
#words.typing .cur::before { animation: none; }
#words.shake { animation: shake .25s; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* settings: starts where the words panel is, then moves to the middle of the screen */
#dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 6; opacity: 0; transition: opacity .3s; }
#dim.on { opacity: 1; }
#settings { position: absolute; z-index: 7; display: flex; flex-direction: column; padding: 18px 22px; overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,.55); transition: left .32s cubic-bezier(.2,.8,.2,1), top .32s cubic-bezier(.2,.8,.2,1), width .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1); }
#settings > * { opacity: 0; transition: opacity .18s; }
#settings.open > * { opacity: 1; transition-delay: .2s; }
.set-title { margin: 0 0 12px; font-size: 22px; letter-spacing: .06em; }
.set-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 20px; }
.set-left { display: flex; flex-direction: column; gap: 8px; }
.set-left button { padding: 10px 14px; font-size: 16px; }
/* volume sliders */
.vol { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; font-size: 16px; }
.vol span { display: flex; justify-content: space-between; }
.vol b { color: var(--accent); font-variant-numeric: tabular-nums; }
.vol input { width: 100%; accent-color: var(--accent); cursor: pointer; }
#optBack { margin-top: auto; text-align: center; font-weight: 700; border-color: var(--accent); }
.set-left button, .go, .card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 8px 12px; text-align: left; }
.set-left button:hover, .go:hover, .card:hover { background: rgba(255,255,255,.12); border-color: var(--accent); }
.set-right { overflow-y: auto; padding-right: 6px; }
.set-right h3 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--text); opacity: .85; }
.set-right h3:not(:first-child) { margin-top: 12px; }
.item { background: rgba(0,0,0,.18); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; font-size: 15px; }
.item b { margin-right: 6px; }
/* small labels use the main text colour (not the faded one) so they stay readable on light and dark themes */
.item .meta { float: right; font-size: 14px; font-weight: 700; color: var(--text); background: rgba(127,127,127,.18); border-radius: 4px; padding: 1px 7px; }
.item p { margin: 4px 0 0; color: var(--text); }
.empty { color: var(--text); opacity: .8; font-size: 14px; }

.tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border-radius: 4px; }
.tag.common { background: #5a6470; color: #fff; }
.tag.rare { background: #2f6fd6; color: #fff; }
.tag.epic { background: #9a3fd6; color: #fff; }

/* overlays: menu, power pick, game over */
#overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 5; }
.panelbox { background: var(--panel); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 22px 26px; max-width: 760px; width: 100%; max-height: 100%; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.panelbox h1 { margin: 0; font-size: 40px; letter-spacing: .04em; color: var(--accent); }
.panelbox h2 { margin: 0 0 6px; }
/* small help text: the theme's main text colour (light on dark themes, dark on light ones), slightly softened */
.panelbox .sub { margin: 2px 0 16px; color: var(--text); opacity: .85; }
.wizcard { display: flex; gap: 14px; align-items: center; background: rgba(0,0,0,.2); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.wizcard img { width: 64px; height: 64px; image-rendering: pixelated; }
.wizcard span { display: block; color: var(--sub); font-size: 14px; }
.howto { margin: 0 0 16px; padding-left: 20px; }
.howto li { margin-bottom: 4px; }
.go { display: inline-block; text-align: center; font-weight: 700; padding: 10px 22px; margin-right: 8px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 14px; min-height: 150px; }
.pickfoot { display: flex; justify-content: center; margin-top: 14px; }
.pickfoot .go { margin: 0; }
.go:disabled { opacity: .45; cursor: default; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
/* the 1 / 2 / 3 key on each power card: a small badge in the theme's text colour */
.card .key { align-self: flex-start; min-width: 22px; padding: 1px 6px; border-radius: 4px; text-align: center;
  font: 800 14px/18px var(--mono); color: var(--text); border: 1px solid var(--text); opacity: .9; }
.card b { font-size: 18px; }
.card .lv { font-size: 12px; color: var(--accent); font-weight: 700; }
.card p { margin: 0; font-size: 14px; opacity: .9; }
.picon { image-rendering: pixelated; flex: none; }
.card-top { display: flex; align-items: center; gap: 10px; }
.item.has-icon { display: flex; gap: 10px; align-items: flex-start; }
.item.has-icon > div { flex: 1; min-width: 0; }
.item .picon { width: 48px; height: 48px; }
.card.rare { border-color: #2f6fd6; }
.card.epic { border-color: #9a3fd6; }
/* results screen */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 12px 0 16px; }
.tile { background: rgba(0,0,0,.22); border-radius: 8px; padding: 8px 10px; text-align: center; }
.tile span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text); opacity: .75; }
.tile b { font-size: 22px; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.charts figure { margin: 0; background: rgba(0,0,0,.18); border-radius: 8px; padding: 10px 10px 4px; }
.charts figcaption { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.chart { width: 100%; display: block; }
.chart .grid { stroke: var(--sub); stroke-opacity: .25; stroke-width: 1; }
.chart .ax { fill: var(--sub); font-size: 11px; font-family: system-ui, sans-serif; }
.chart .bar { fill: var(--accent); }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover { fill: var(--text); fill-opacity: .07; }
#tip { position: fixed; z-index: 20; pointer-events: none; background: var(--box); color: var(--text); border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
@media (max-width: 700px) { .tiles { grid-template-columns: repeat(3, 1fr); } .charts { grid-template-columns: 1fr; } }

/* ---- home page ---- */
#home { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; background: #09061a; }
#homebg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
#homeMain { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: -8vh; animation: hpin .4s ease-out; }
.logo { margin: 0; font: 900 clamp(44px, 8vw, 92px)/1 var(--mono); letter-spacing: .04em; color: #ffd27a;
  text-shadow: 0 4px 0 #b5481a, 0 8px 0 #4a1c10, 0 0 28px rgba(255,140,40,.55); animation: logoglow 2.4s ease-in-out infinite alternate; }
@keyframes logoglow { from { filter: brightness(1); } to { filter: brightness(1.18); } }
.tagline { margin: 18px 0 26px; font-size: 18px; color: #e9dcff; text-shadow: 0 2px 0 rgba(0,0,0,.7); }
.homebtns { display: flex; flex-direction: column; gap: 14px; width: min(280px, 80vw); }
.hbtn { font: 800 22px/1 var(--mono); letter-spacing: .06em; padding: 16px 20px; color: #f3eaff; background: rgba(16,10,34,.78);
  border: 3px solid #8f7ad6; border-radius: 4px; box-shadow: 0 5px 0 rgba(0,0,0,.55); transition: transform .1s, box-shadow .1s, background .15s, border-color .15s; }
.hbtn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(0,0,0,.55), 0 0 18px rgba(170,140,255,.45); border-color: #c9b8ff; background: rgba(36,24,70,.85); }
.hbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.55); }
.hbtn.play { background: #ff7a1a; border-color: #ffd27a; color: #2a0e04; }
.hbtn.play:hover { background: #ff8f3a; box-shadow: 0 8px 0 rgba(0,0,0,.55), 0 0 22px rgba(255,140,40,.65); }
.hbest { margin: 22px 0 0; min-height: 1.4em; font: 700 16px var(--mono); color: #ffd27a; text-shadow: 0 2px 0 rgba(0,0,0,.7); }
.hhint { margin: 6px 0 0; font-size: 13px; color: #b9b0d8; opacity: .8; }
/* along the bottom of the home page: the stats notice in the middle, the version in the right corner.
   The dark backing keeps them easy to read on both the night and the day sky */
#homeFoot { position: absolute; left: 16px; right: 16px; bottom: 12px; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: end; gap: 12px; pointer-events: none; }
#homeNote, #homeVer, #homeRights { padding: 5px 12px; border-radius: 6px; background: rgba(9,6,26,.72); color: #f3ecff; font-size: 16px; font-weight: 600; }
#home:has(#homePanel:not(.hidden)) #homeFoot { display: none; }   /* it would show faintly through an open panel */
#homeNote { grid-column: 2; margin: 0; text-align: center; }
#homeVer { grid-column: 3; justify-self: end; font-family: var(--mono); }
#homeRights { grid-column: 1; justify-self: start; }
@media (max-width: 700px) {
  #homeFoot { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  #homeNote, #homeVer, #homeRights { padding: 3px 8px; font-size: 13px; }
  #homeRights { grid-row: 1; }
  #homeNote { grid-row: 2; grid-column: 1; text-align: left; }
  #homeVer { grid-row: 2; grid-column: 2; }
}
@keyframes hpin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Play and Powers panels */
#homePanel { position: relative; width: min(1000px, 100%); max-height: 100%; overflow-y: auto; padding: 18px 22px 22px; background: rgba(18,12,36,.94);
  border: 3px solid #5c4a9a; border-radius: 8px; box-shadow: 0 8px 0 rgba(0,0,0,.45), 0 20px 60px rgba(0,0,0,.6); color: #efe6ff; animation: hpin .25s ease-out; }
/* These two panels have a fixed height and never scroll themselves: only the wizard info and the powers table
   inside them do, with no visible scroll bar, so the headings, tabs and Start button always stay in view.
   The heights fit the tallest wizard, and 4 rows of powers; on a smaller window they shrink to fit. */
#homePanel.wide { width: min(1400px, 100%); height: min(852px, 100%); }
#homePanel.powers { height: min(896px, 100%); }
#homePanel.wide:not(.hidden), #homePanel.powers:not(.hidden), #homePanel.enemies:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
#homePanel.wide .hp-head, #homePanel.powers .hp-head, #homePanel.powers .hp-sub, #homePanel.powers .ptabs,
#homePanel.enemies .hp-head, #homePanel.enemies .hp-sub { flex: none; }
#homePanel.wide .wzgrid { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
#homePanel.wide .wzlist, #homePanel.wide .wzdetail { min-height: 0; }
#homePanel.wide .wzdetail { display: flex; flex-direction: column; }
#homePanel.wide .start { flex: none; }
.wzlist, .wzinfo, #homePanel.powers .pgrid { overflow-y: auto; scrollbar-width: none; }
.wzinfo { flex: 1 1 auto; min-height: 0; }
#homePanel.powers .pgrid { flex: 1 1 auto; min-height: 0; align-content: start; grid-auto-rows: minmax(166px, auto); }   /* 166px: the tallest card, so rows stay put when you click a level */
.wzlist::-webkit-scrollbar, .wzinfo::-webkit-scrollbar, #homePanel.powers .pgrid::-webkit-scrollbar, .egrid::-webkit-scrollbar { display: none; }
/* the Enemies panel fits its cards; on a smaller window only the cards scroll, with no visible scroll bar */
#homePanel.enemies { width: min(1120px, 100%); }
.egrid { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 10px; align-content: start; }
.ecard { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.1); border-left: 4px solid var(--c); border-radius: 6px; padding: 10px 12px; }
.ebox { flex: none; width: 86px; height: 84px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.28); border-radius: 4px; }
.ebox img { image-rendering: pixelated; }
.einfo { flex: 1; min-width: 0; }
.etop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.etop b { font-size: 16px; }
.estats { display: flex; gap: 14px; margin-top: 6px; }
.estats span { display: block; font-size: 11px; color: #b9b0d8; }
.estats b { font-size: 15px; color: #ffd27a; white-space: nowrap; }
.einfo p { margin: 6px 0 0; font-size: 13px; color: #e6dcf7; min-height: 2.6em; }
.hp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hp-head h2 { margin: 0; font: 900 28px var(--mono); color: #ffd27a; letter-spacing: .04em; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.hp-back { background: rgba(255,255,255,.07); border: 2px solid #5c4a9a; border-radius: 4px; padding: 7px 14px; font-weight: 700; }
.hp-back:hover { border-color: #c9b8ff; background: rgba(255,255,255,.12); }
.hp-sub { margin: 0 0 12px; color: #c9bde8; }
#homePanel .meta { font-size: 13px; font-weight: 700; color: #efe6ff; background: rgba(255,255,255,.1); border-radius: 4px; padding: 1px 7px; }
.wzgrid { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.wzlist { display: flex; flex-direction: column; gap: 8px; }
.wz { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.1); border-radius: 6px; text-align: left; font-weight: 700; }
.wz img { width: 48px; height: 48px; image-rendering: pixelated; }
.wz.on { border-color: #ffd27a; background: rgba(255,170,60,.12); box-shadow: 0 0 14px rgba(255,170,60,.25); }
button.wz:hover { border-color: #c9b8ff; }
.wz.locked { opacity: .5; cursor: default; }
.wz .q { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font: 900 26px var(--mono); background: rgba(0,0,0,.35); border-radius: 4px; color: #8f7ad6; }
.wz small { display: block; font-weight: 600; font-size: 12px; color: #b9b0d8; }
.wzdetail { background: rgba(0,0,0,.22); border-radius: 8px; padding: 14px 16px; }
.wzhead { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.wzbig { width: 96px; height: 96px; image-rendering: pixelated; flex: none; filter: drop-shadow(0 0 10px rgba(255,140,40,.45)); }
.wzhead h3 { margin: 0 0 4px; font: 900 22px var(--mono); color: #ffd27a; }
.wzhead p { margin: 0; color: #d6cbef; }
.atk { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.05); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.atk > img { width: 48px; height: 48px; image-rendering: pixelated; flex: none; }
.atk > div { flex: 1; min-width: 0; }
.atk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.atk-top b { font-size: 17px; }
.atk-top .meta { margin-left: auto; }
.tag.kind { background: #6a4a2a; color: #ffe2b8; }
.atk p { margin: 4px 0 0; color: #e6dcf7; }
.atk-pts { margin: 6px 0 0; padding-left: 18px; color: #e6dcf7; }
.atk-pts li { margin-bottom: 2px; }
#homePanel .howto { margin: 12px 0 14px; color: #c9bde8; font-size: 14px; }
.hbtn.start { width: 280px; max-width: 100%; align-self: center; }   /* the same size as the home page buttons */
.ptabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ptab { padding: 6px 14px; border-radius: 4px; border: 2px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); font-weight: 700; }
.ptab span { opacity: .65; margin-left: 4px; }
.ptab.on { border-color: #ffd27a; background: rgba(255,170,60,.14); }
.ptab.common.on { border-color: #b9c3d3; } .ptab.rare.on { border-color: #4a8cff; } .ptab.epic.on { border-color: #c77dff; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.pcard { background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.1); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pcard.rare { border-color: rgba(74,140,255,.55); } .pcard.epic { border-color: rgba(180,92,255,.6); }
.pc-top { display: flex; gap: 10px; align-items: center; }
.pc-top .picon { width: 44px; height: 44px; }
.pc-top b { display: block; font-size: 16px; margin-bottom: 2px; }
.plvs { display: flex; gap: 4px; }
.plvb { flex: 1; padding: 3px 0; font: 700 12px var(--mono); border-radius: 3px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.25); color: #c9bde8; }
.plvb:hover { border-color: #c9b8ff; }
.plvb.on { background: #ffd27a; color: #2a0e04; border-color: #ffd27a; }
.pc-text { margin: 0; font-size: 14px; color: #e6dcf7; min-height: 2.8em; }
.pc-lv { font-weight: 800; color: #ffd27a; }
@media (max-width: 700px) {
  .wzgrid { grid-template-columns: 1fr; }
  #homePanel.wide .wzgrid { grid-template-rows: auto minmax(0, 1fr); }
  .wzlist { flex-direction: row; overflow-x: auto; }
  .wz { flex: none; }
  .atk-top .meta { margin-left: 0; }
}

/* settings opened from the home page: above the home page, one column only */
#dim.home { z-index: 9; position: fixed; background: none; }   /* no dark panel on the home page; it only stops clicks reaching the scene */
#settings.home { z-index: 10; }
#settings.home .set-body { grid-template-columns: 1fr; }
#settings.home .set-right, #settings.home #optMenu { display: none; }

/* theme picker */
#themeModal { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 12; }
.modal-box { position: relative; background: var(--panel); border-radius: 14px; padding: 46px 18px 18px; width: min(520px, 92vw); height: min(560px, 86vh); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.x { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 28px; line-height: 1; }
#themeSearch { padding: 10px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.15); background: var(--box); color: var(--text); font: inherit; outline: none; }
#themeSearch:focus { border-color: var(--accent); }
#themeList { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.theme { display: flex; align-items: center; justify-content: space-between; border-radius: 20px; padding: 10px 16px; border: 2px solid transparent; text-align: left; }
.theme.on { border-color: currentColor; }
.theme .dots { display: flex; gap: 5px; }
.theme .dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }

@media (max-width: 700px) {
  #words { font-size: 20px; }
  .cards { grid-template-columns: 1fr; }
  .set-body { grid-template-columns: 1fr; overflow-y: auto; }
  .set-right { overflow: visible; }
  #statusrow { grid-template-columns: auto 1fr; }
  #guards { grid-column: 1 / -1; justify-self: start; }
}