/* Cinderfall — game skin: HUD, overlays, touch buttons. */
:root{
  --ink:#0a0710; --teal:#2fd8c8; --teal-dim:#1b6d66; --coral:#ff5a4e;
  --amber:#ffd16b; --wisp:#7de3ff; --parch:#e8eef2; --panel:rgba(14,10,22,.82);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;color:var(--parch)}
#game-canvas{position:fixed;inset:0}
#game-canvas canvas{display:block}
#hud{position:fixed;inset:0;pointer-events:none;font-size:14px}
#hud>*{pointer-events:auto}
#top{position:absolute;top:0;left:0;right:0;display:flex;gap:10px;justify-content:space-between;
  padding:8px 10px;pointer-events:none}
#res,#score{background:var(--panel);border:1px solid #2a2334;border-radius:10px;padding:6px 12px;
  letter-spacing:.12em;font-size:11px;color:#9fb2b8;text-transform:uppercase}
#res b,#score b{font-size:17px;letter-spacing:0;color:var(--wisp);margin-left:6px}
#score b{color:var(--amber)}
#res span,#score span{margin-left:8px;color:#6d7f86;font-size:10px}
#spires{position:absolute;top:46px;left:10px;right:10px;display:flex;gap:10px;pointer-events:none}
.spire{flex:1;background:var(--panel);border:1px solid #2a2334;border-radius:10px;padding:6px 10px;font-size:10px;
  letter-spacing:.14em}
.spire span{color:#8ea0a6;text-transform:uppercase;display:flex;justify-content:space-between;gap:8px}
.spire em{font-style:normal;color:var(--parch);letter-spacing:.04em;font-size:11px}
.spire i{display:block;height:7px;margin-top:5px;border-radius:4px;background:#221a2c;overflow:hidden}
.spire b{display:block;height:100%;width:100%;background:var(--teal);border-radius:4px;color:transparent}
.spire.foe b{background:var(--coral)}
#mini{position:absolute;right:10px;bottom:112px;width:132px;height:132px;border-radius:12px;
  border:1px solid #2a2334;background:var(--panel);touch-action:none}
#bottom{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;display:flex;flex-wrap:wrap;gap:8px;
  align-items:flex-end;background:linear-gradient(transparent,rgba(6,4,10,.88) 42%)}
#buttons{display:flex;gap:6px;flex-wrap:wrap;flex:1}
#buttons button{pointer-events:auto;cursor:pointer;border-radius:10px;padding:7px 9px;min-width:56px;
  background:rgba(24,18,34,.9);border:1px solid #34294a;color:var(--parch);font-size:11px;line-height:1.25}
#buttons button b{display:block;font-size:12px}
#buttons button span{color:#7c8f97;font-size:9px}
.buildbtn{border-color:var(--teal-dim)!important}
.buildbtn:hover{background:rgba(31,74,70,.9);border-color:var(--teal)}
.ctl b{font-size:10px!important;letter-spacing:.06em;color:#a9bcc4}
.ctl:hover{background:rgba(40,30,60,.95)}
#queue{display:flex;gap:5px;min-height:20px;flex-wrap:wrap;max-width:30%}
#queue .q{position:relative;background:var(--panel);border:1px solid #2a2334;border-radius:8px;
  padding:3px 7px;font-size:10px;letter-spacing:.1em;overflow:hidden}
#queue .q i{position:absolute;left:0;bottom:0;height:3px;background:var(--amber);display:block}
#selinfo{width:100%;color:#8ea0a6;font-size:11px;min-height:14px;pointer-events:none}
#selinfo em{font-style:normal;margin-right:10px;color:var(--parch)}
#log{position:absolute;left:10px;top:100px;max-width:min(420px,60%);pointer-events:none}
#log p{margin:0 0 4px;background:var(--panel);border-left:2px solid var(--teal);border-radius:0 8px 8px 0;
  padding:5px 9px;font-size:12px;color:#c9d8de}
#selbox{position:fixed;display:none;border:1px solid var(--teal);background:rgba(47,216,200,.14);
  pointer-events:none;z-index:40;border-radius:2px}
#overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(20,12,30,.72),rgba(5,3,9,.94));z-index:50;padding:18px}
#overlay.on{display:flex}
#overlay .start{max-width:620px}
#overlay h1{font-size:clamp(34px,9vw,64px);margin:0 0 6px;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--amber),var(--coral) 60%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}
#overlay h2{font-size:clamp(24px,6vw,40px);margin:0 0 10px;color:var(--amber);letter-spacing:.05em}
#overlay p{color:#b9c8d0;line-height:1.6;margin:0 0 12px;font-size:14px}
#overlay p b{color:var(--amber)}
.howto{list-style:none;padding:0;margin:0 0 16px;text-align:left;display:inline-block}
.howto li{font-size:13px;color:#9fb0b8;margin:5px 0;line-height:1.45}
.howto b{color:var(--teal)}
.foe{color:var(--coral)}
#overlay button,#playbtn{cursor:pointer;font-size:17px;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 30px;border-radius:14px;border:1px solid var(--teal);color:#04120f;font-weight:700;
  background:linear-gradient(180deg,#54f0da,#1fae9e);box-shadow:0 0 30px rgba(47,216,200,.45)}
#overlay button:hover{filter:brightness(1.12)}
#hud.idle #bottom,#hud.idle #mini,#hud.idle #log{opacity:.25;filter:saturate(.5)}
@media (max-width:520px){
  #mini{width:88px;height:88px;bottom:150px}
  #bottom{padding:6px}
  #buttons button{min-width:46px;padding:6px;font-size:10px}
  #buttons button b{font-size:11px}
  #log{top:86px;font-size:11px}
  #spires{top:42px}
}