/* Emberfall — VibeGames palette (houmeres.sk tokens, dark only).
   No web fonts: the game must run offline from a .zip, so type is the
   system monospace stack. */
:root{
  color-scheme:dark;
  --bg:#0a0e14; --bg2:#0d121b; --sur:#10161f; --sur2:#141c27;
  --bor:#1e2a38; --bor2:#2b3b4e;
  --ink:#e8eef5; --mut:#93a4b8; --faint:#7486a0;
  --acc:#2fe3c4; --blue:#4d8cff; --violet:#8b7bff; --amber:#f5b301; --magenta:#ff4fd8; --ember:#ff7a3d;
  --acc-ink:#04140f;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
#app{position:fixed;inset:0;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--mono);font-size:13px;-webkit-user-select:none;user-select:none;touch-action:none}
#gl,#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#fx{pointer-events:none}
#vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 72% at 50% 52%,rgba(0,0,0,0) 42%,rgba(0,0,0,.62) 100%)}
#dmg{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 72% 62% at 50% 50%,rgba(255,40,60,0) 32%,rgba(255,25,50,.92) 100%)}

/* ── HUD ── */
.hud{position:absolute;inset:0;pointer-events:none}
.panel{position:absolute;background:rgba(10,14,20,.6);border:1px solid var(--bor);border-radius:12px;
  padding:10px 13px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#left{left:14px;top:14px;width:252px}
.lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;
  letter-spacing:.18em;color:var(--mut);margin:0 0 5px}
.lbl b{color:var(--ink);font-size:13px;letter-spacing:.05em}
.bar{height:10px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bar i{display:block;height:100%;width:100%;border-radius:6px;transition:width .1s linear}
#hpB i{background:linear-gradient(90deg,#2fd98a,#8bf7bb)}
#stB i{background:linear-gradient(90deg,#3b7fd4,#7fc4ff)}
#xpB i{background:linear-gradient(90deg,#c9a227,#ffe58a)}
#tmB i{background:linear-gradient(90deg,var(--acc),var(--blue))}
.mt{margin-top:9px}
#pips{display:flex;gap:5px;margin-top:9px;align-items:center;min-height:12px}
#pipBox{display:flex;gap:5px}
#pipBox span{width:22px;height:7px;border-radius:4px;background:rgba(255,255,255,.13)}
#pipBox span.on{background:var(--acc);box-shadow:0 0 8px rgba(47,227,196,.7)}
#pips em{font-size:10px;letter-spacing:.16em;color:var(--mut);font-style:normal;margin-left:4px;white-space:nowrap}
#right{right:14px;top:14px;min-width:158px;text-align:right}
#right .v{font-size:21px;letter-spacing:.04em;margin:0 0 7px}
#right .k{font-size:10px;letter-spacing:.18em;color:var(--mut)}
#top{left:50%;top:14px;transform:translateX(-50%);width:min(420px,40%);text-align:center}
#top .lbl{justify-content:center;gap:10px}
#bossWrap{display:none;width:min(520px,60%);left:50%;top:64px;transform:translateX(-50%)}
#bossWrap.on{display:block}
#bossB i{background:linear-gradient(90deg,#b3203b,#ff6a86)}
#build{position:absolute;left:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:5px;max-width:min(560px,60%)}
.bc{font-size:9.5px;letter-spacing:.12em;color:var(--ink);background:rgba(10,14,20,.66);
  border:1px solid color-mix(in srgb,var(--rc) 55%,transparent);border-left:3px solid var(--rc);
  border-radius:6px;padding:3px 7px;white-space:nowrap}
.bc b{color:var(--rc);font-weight:700}
#banner{position:absolute;left:0;right:0;top:30%;text-align:center;font-size:clamp(22px,4.4vw,38px);
  letter-spacing:.32em;text-transform:uppercase;opacity:0;text-shadow:0 0 24px rgba(47,227,196,.5);pointer-events:none;padding:0 12px}
#banner small{display:block;font-size:11px;letter-spacing:.22em;color:var(--mut);margin-top:12px;text-shadow:none;text-transform:none}
@keyframes bnr{0%{opacity:0;transform:scale(.92)}10%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
#banner.show{animation:bnr 2.1s ease forwards}
#hint{position:absolute;left:0;right:0;bottom:46px;text-align:center;color:var(--mut);
  font-size:10.5px;letter-spacing:.2em;transition:opacity .8s;padding:0 12px}

/* ── overlays ── */
#ov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;overflow:auto;padding:16px;
  background:radial-gradient(ellipse at 50% 50%,rgba(10,14,20,.74),rgba(4,6,10,.95))}
#ov.on{display:flex}
.card{position:relative;background:linear-gradient(180deg,var(--sur),var(--bg2));border:1px solid var(--bor);border-radius:16px;
  padding:24px 28px;width:min(100%,620px);max-height:100%;overflow:auto;margin:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 0 1px rgba(47,227,196,.06)}
.card::before{content:"";position:absolute;top:-1px;left:28px;width:46px;height:2px;background:var(--ember);box-shadow:0 0 12px var(--ember)}
.card.wide{width:min(100%,760px)}
.card h1{margin:0 0 5px;font-size:clamp(22px,4vw,31px);letter-spacing:.3em;font-weight:700}
.card.menu h1{background:linear-gradient(120deg,#ffd166,var(--ember) 45%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:clamp(26px,6vw,44px);text-shadow:none}
.card h2{margin:0 0 14px;font-size:10.5px;letter-spacing:.26em;color:var(--mut);font-weight:400}
.card p{margin:0 0 13px;color:var(--mut);line-height:1.62}
.card p b{color:var(--ink)}
.small{font-size:11px}
.ember{color:var(--ember)!important}
.back{display:inline-block;margin:-6px 0 10px;color:var(--mut);text-decoration:none;font-size:11px;letter-spacing:.14em}
.back:hover{color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:15px 0}
.grid div{background:rgba(255,255,255,.04);border:1px solid var(--bor);border-radius:9px;padding:8px 10px;min-width:0}
.grid span{display:block;font-size:9.5px;letter-spacing:.15em;color:var(--mut)}
.grid b{font-size:18px;font-weight:600;overflow-wrap:anywhere}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:7px;margin:14px 0}
.keys div{display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(255,255,255,.035);
  border:1px solid var(--bor);border-radius:8px;padding:7px 9px;font-size:11px}
.keys i{color:var(--mut);font-style:normal;letter-spacing:.08em}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 20px;border-radius:999px;border:1px solid transparent;
  color:var(--acc-ink);background:linear-gradient(120deg,var(--acc),var(--blue) 70%,var(--violet));font:inherit;font-size:11.5px;
  letter-spacing:.2em;font-weight:700;cursor:pointer;box-shadow:0 10px 30px -10px rgba(47,227,196,.55);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(47,227,196,.7)}
.btn.ghost{background:rgba(255,255,255,.02);color:var(--ink);border-color:var(--bor2);box-shadow:none}
.btn.ghost:hover{border-color:var(--acc);background:rgba(47,227,196,.06)}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.btn.focus,.pick button.focus{outline:2px solid var(--acc);outline-offset:2px}
/* card picks: label, title, text and stack count share rows across all three */
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;gap:0 11px;margin-top:16px}
.pick button{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:6px;text-align:left;align-items:start;
  background:rgba(255,255,255,.04);border:1px solid var(--bor);border-top:2px solid var(--rc);color:var(--ink);
  border-radius:11px;padding:13px 14px;cursor:pointer;font:inherit;transition:.12s;min-height:44px}
.pick button:hover{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 10%,transparent);transform:translateY(-2px)}
.pick em{font-style:normal;font-size:9px;letter-spacing:.18em;color:var(--rc)}
.pick b{font-size:12.5px;letter-spacing:.14em}
.pick span{font-size:11px;color:var(--mut);line-height:1.5}
.pick i{font-style:normal;font-size:9.5px;letter-spacing:.14em;color:var(--faint)}
.buildlist{display:flex;flex-wrap:wrap;gap:5px;margin:14px 0 4px}
.shop{display:grid;gap:8px;margin:14px 0}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  background:rgba(255,255,255,.035);border:1px solid var(--bor);border-radius:10px;padding:10px 12px}
.item b{font-size:12px;letter-spacing:.14em}
.item b em{font-style:normal;color:var(--mut);font-weight:400}
.item span{grid-column:1;font-size:11px;color:var(--mut)}
.item .btn{grid-column:2;grid-row:1/3;min-width:130px}
.opts{display:grid;gap:8px;margin:14px 0}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:42px;
  background:rgba(255,255,255,.035);border:1px solid var(--bor);border-radius:10px;padding:6px 12px;font-size:11px;letter-spacing:.14em}
.opt input[type=range]{width:min(220px,50%);accent-color:var(--acc)}
.opt input[type=checkbox]{width:22px;height:22px;accent-color:var(--acc)}
kbd{background:rgba(255,255,255,.09);border:1px solid var(--bor);border-radius:4px;padding:1px 5px;font-size:10.5px;font-family:inherit}
#err{position:absolute;left:0;right:0;bottom:0;max-height:32%;overflow:auto;display:none;z-index:9;
  background:rgba(60,6,16,.92);border-top:1px solid #b3203b;color:#ffd6dd;
  font-size:11px;padding:8px 12px;white-space:pre-wrap}

/* ── touch ── */
#touch{display:none}
#touch.on{display:block}
#stick{position:absolute;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;
  border:1px solid var(--bor2);background:rgba(10,14,20,.35);opacity:0;pointer-events:none}
#stick.on{opacity:1}
#stick i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(47,227,196,.35)}
#touch button{position:absolute;width:76px;height:76px;border-radius:50%;border:1px solid var(--bor2);
  background:rgba(10,14,20,.55);color:var(--ink);font:inherit;font-size:10px;letter-spacing:.14em}
#tDash{right:22px;bottom:118px}
#tCharge{right:110px;bottom:40px}
#tPause{right:14px;top:14px;width:44px!important;height:44px!important;font-size:12px!important}
body:has(#touch.on) #right{top:66px}

/* ── narrow screens ── */
@media (max-width:700px){
  #app{font-size:12px}
  .panel{padding:7px 9px;border-radius:10px}
  #left{left:8px;top:8px;width:min(46vw,190px)}
  #right{right:8px;top:8px;min-width:0}
  #right .v{font-size:15px;margin-bottom:3px}
  #top{top:auto;bottom:8px;width:min(62vw,300px)}
  #bossWrap{top:auto;bottom:60px;width:min(80vw,360px)}
  #build{display:none}
  #hint{display:none}
  .card{padding:18px 16px}
  .pick{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;gap:8px}
  .pick button{grid-template-rows:auto;grid-row:auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  #banner.show{animation-duration:2.6s}
  .btn,.pick button{transition:none}
}