/* ============================================================
   BLOB KNIGHT — styles
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
}
body{
  background:#0d0b14;color:#e8e3f5;font-family:"Courier New",ui-monospace,monospace;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
#candle{
  position:fixed;top:14px;right:18px;cursor:pointer;font-size:24px;z-index:10;
  filter:drop-shadow(0 0 6px #ffb45e);animation:flicker 3s infinite;user-select:none;
}
@keyframes flicker{0%,100%{opacity:1}50%{opacity:.55}70%{opacity:.85}}
#gameWrap{
  position:relative;width:min(96vw,800px);
  max-width:min(96vw,calc((100dvh - 24px) * 4 / 3));
  aspect-ratio:4/3;
  border:1px solid #3b2f5e;border-radius:12px;overflow:hidden;
  box-shadow:0 0 40px rgba(255,120,71,.15);
  touch-action:none;
}
canvas{display:block;width:100%;height:100%;background:#1a1428;touch-action:none}
#hud{position:absolute;inset:0;z-index:5;pointer-events:none}

/* ---------- HUD: identity + resources (top) ---------- */
#hudTop{
  position:absolute;top:10px;left:10px;right:10px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(13,11,20,.78);border:1px solid #3b2f5e;border-radius:10px;
  padding:7px 12px;
}
.hud-ident{display:flex;align-items:baseline;gap:8px;font-size:13px;min-width:0}
.hud-ident #hName{font-weight:bold;letter-spacing:1px;font-size:14px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-ident .class-txt{flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16vw}
.lvl-badge{color:#8fd4ff;font-weight:bold;letter-spacing:1px;font-size:12px;border:1px solid #2a3a52;border-radius:6px;padding:1px 7px;background:#121a2c;white-space:nowrap}
.lvl-badge .plvl{color:#ffd166;margin-left:6px}
.hud-top-right{display:flex;align-items:center;gap:12px;font-size:13px;white-space:nowrap}
#hudBars{
  position:absolute;top:58px;left:10px;right:10px;
  display:flex;gap:8px;align-items:stretch;
}
.hp-wrap{
  display:flex;flex-direction:column;gap:2px;flex:2 1 0;min-width:0;
  background:rgba(13,11,20,.72);border:1px solid #3b2f5e;border-radius:8px;padding:4px 8px;
}
.hp-wrap.thin{flex:1 1 0;min-width:0}
.hp-wrap span{font-size:10px;letter-spacing:.5px;color:#9a90b8;white-space:nowrap;overflow:hidden}
.bar{height:8px;border-radius:6px;background:#221b33;overflow:hidden;border:1px solid #32294d}
.bar>div{height:100%;background:linear-gradient(90deg,#c53b3b,#ff5d5d);transition:width .2s}
.bar.shield>div{background:linear-gradient(90deg,#3f6a8f,#8fd4ff)}
.bar.stam>div{background:linear-gradient(90deg,#c98a3d,#ffd166)}
.bar.boss>div{background:linear-gradient(90deg,#8a2a2a,#ff5a2a)}
.gold-txt{color:#ffd166;font-weight:bold}

/* ---------- HUD: gear / tools (bottom-left) ---------- */
#hudGear{
  position:absolute;left:10px;bottom:10px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:58%;
}
.gear-slot{
  background:rgba(13,11,20,.72);border:1px solid #3b2f5e;border-radius:7px;
  padding:3px 8px;font-size:11px;letter-spacing:.5px;color:#c8c0d8;white-space:nowrap;
}
.gear-slot.primary{color:#6fc3ff;font-weight:bold;border-color:#2f4a68;background:rgba(20,32,48,.82)}
.gear-slot.secondary{color:#ffd166;font-weight:bold}
.gear-slot.secondary.on{border-color:#6a542a;background:rgba(40,32,12,.82)}
.gear-slot.tool{color:#e8d17a}
.gear-slot.tool.zero{opacity:.45}
#hPot{color:#6bff9a}
#hDash{color:#9a90b8;font-size:11px;padding:3px 8px;white-space:nowrap;
  background:rgba(13,11,20,.72);border:1px solid #3b2f5e;border-radius:7px}
#hDash.ready{color:#6bff9a;animation:dashpulse 1.6s infinite}
#hChain{color:#9a90b8;font-size:11px;padding:3px 8px;white-space:nowrap;
  background:rgba(13,11,20,.72);border:1px solid #3b2f5e;border-radius:7px}
#hChain.ready{color:#c8c8e8;animation:dashpulse 1.6s infinite}
.combo-txt{color:#ffd166;font-weight:bold;font-size:15px}
.combo-txt.active{animation:dashpulse .3s infinite}
@keyframes dashpulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------- HUD: contextual key hint (bottom-right, desktop) ---------- */
#hudHint{
  position:absolute;bottom:8px;right:10px;left:auto;transform:none;
  font-size:9px;letter-spacing:1px;color:#9a90b8;
  background:rgba(13,11,20,.55);border:1px solid #2a2440;border-radius:6px;
  padding:2px 8px;white-space:nowrap;max-width:34%;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}

/* ---------- HUD: live objective chip (top-center, below boss bar) ---------- */
#objHint{
  position:absolute;top:82px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:1.5px;color:#c8c0d8;
  background:rgba(13,11,20,.6);border:1px solid #3b2f5e;border-radius:6px;
  padding:2px 10px;white-space:nowrap;display:none;pointer-events:none;z-index:5;
}
#objHint.show{display:block}

/* ---------- boss bar ---------- */
#bossBar{
  position:absolute;top:96px;left:50%;transform:translateX(-50%);width:min(70%,420px);
  background:rgba(13,11,20,.8);border:1px solid #5a2a2a;border-radius:8px;padding:6px 12px;
  display:none;flex-direction:column;gap:4px;z-index:6;pointer-events:none;
}
#bossBar.show{display:flex}
#bossBarName{color:#ff8b3d;font-weight:bold;font-size:12px;letter-spacing:2px;text-align:center}
#bossBanner{
  position:absolute;top:38%;left:0;right:0;text-align:center;z-index:9;pointer-events:none;
  color:#ff7847;font-size:34px;font-weight:bold;letter-spacing:6px;
  text-shadow:0 0 24px rgba(255,120,71,.7);opacity:0;transform:translateY(-16px);
  transition:opacity .5s,transform .5s;
}
#bossBanner.show{opacity:1;transform:translateY(0)}

/* ---------- overlays / menus ---------- */
#overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:#0b0914;z-index:8;text-align:center;padding:20px;gap:10px;
  overflow-y:auto;
  animation:overFade .18s ease-out;   /* idea 3: snappy menu transition */
}
@keyframes overFade{from{opacity:0}to{opacity:1}}
#overlay h2{letter-spacing:5px;font-size:28px;margin-bottom:6px}
#overlay h2 span{color:#ff7847}
#overlay p{color:#9a90b8;font-size:14px;line-height:1.7;max-width:640px}
.menu-secret{font-size:12px}
.skip-hint{display:block;margin-top:8px;font-size:11px;color:#6bff9a;letter-spacing:1px}

/* main menu: title at top, menu vertically and horizontally centered */
#overlay.main-menu{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding: 20px 20px 16px;
  gap:0;
  overflow-y:auto;
}
#overlay.main-menu h2{
  font-size:42px;
  letter-spacing:10px;
  margin: 8px 0 6px;
  text-align:center;
  line-height:1.1;
  text-shadow:0 0 20px rgba(255,120,71,.45);
  flex-shrink:0;
}
#overlay.main-menu > p{
  font-size:14px;
  margin: 0 0 32px;
  text-align:center;
  opacity:.9;
  flex-shrink:0;
  max-width: 90%;
}
#overlay.main-menu .main-menu-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;   /* safe centering: auto margins center when it fits, top-align (scrollable) when it doesn't */
  margin-top:auto;
  margin-bottom:auto;
  gap:12px;
  width:100%;
  max-width:360px;
  min-height:0;
  padding: 16px 0;
  position: relative;
}
#overlay.main-menu .btn{
  width:100%;
  max-width:360px;
  height:52px;
  font-size:14px;
  font-weight:600;
  letter-spacing:1.2px;
  margin:0;
  flex-shrink:0;
}
#overlay.main-menu input{align-self:center}
.btn{
  font-family:inherit;font-size:13px;letter-spacing:1px;cursor:pointer;background:#241c3a;
  color:#e8e3f5;border:1px solid #3b2f5e;border-radius:8px;padding:10px 20px;transition:.15s;
  width:min(360px,92%);text-align:left;display:flex;gap:8px;align-items:center;justify-content:center;
}
.btn:hover{background:#322649;border-color:#ff7847}
.btn:active{background:#2a1f45;border-color:#ffb45e;transform:translateY(1px)}   /* idea 3: pressed state */
.btn:focus,.btn:focus-visible{outline:3px solid #6c8cff;outline-offset:2px;background:#322649}
/* main-menu difficulty panel — hidden until DIFFICULTY clicked, expands under button */
.menu-diff{
  display:none;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:340px;
  margin:6px 0;
  align-items:center;
}
.menu-diff[style*="display: flex"], .menu-diff[style*="display:flex"]{
  display:flex !important;
}
.diff-chip{
  width:100%;
  padding:10px 14px;
  font-size:12px;
  letter-spacing:1.2px;
  text-align:center;
  justify-content:center;
}
.diff-chip.on{background:#3a2c5a;border-color:#6fc3ff;color:#fff;box-shadow:0 0 12px rgba(111,195,255,.3)}
#overlay input{
  font-family:inherit;font-size:14px;letter-spacing:2px;text-transform:uppercase;
  background:#241c3a;color:#e8e3f5;border:1px solid #3b2f5e;border-radius:8px;
  padding:12px 16px;text-align:center;outline:none;width:260px;
}
#overlay input:focus{border-color:#ff7847}
.kbd{display:inline-block;border:1px solid #3b2f5e;border-radius:4px;padding:1px 7px;background:#241c3a;font-size:12px;margin:0 1px}
.toast{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);background:#241c3a;
  border:1px solid #ffd166;color:#ffd166;padding:10px 18px;border-radius:8px;
  font-size:14px;z-index:20;opacity:0;transition:opacity .3s;text-align:center;max-width:92vw;
}
.toast.show{opacity:1}
/* idea 74: low-HP vignette */
#vignette{
  position:fixed;inset:0;pointer-events:none;z-index:15;opacity:0;transition:opacity .4s;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(200,30,30,.5) 100%);
}
#vignette.show{opacity:1;animation:vignpulse 1.2s infinite}
@keyframes vignpulse{0%,100%{opacity:1}50%{opacity:.45}}
/* idea 73: tutorial floating prompts */
#tutHint{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:16;
  background:#241c3a;border:1px solid #6bff9a;color:#6bff9a;padding:10px 18px;
  border-radius:8px;font-size:14px;letter-spacing:1px;display:none;
  animation:dashpulse 1.6s infinite;max-width:92vw;text-align:center;
  pointer-events:none;
}
#tutHint.show{display:block}

/* ---------- idea 70: touch controls — Brawlhalla-inspired: joy lower-left, actions lower-right ---------- */
#touchControls{position:fixed;inset:0;pointer-events:none;z-index:14;display:none;touch-action:none}
#joyZone{
  position:absolute;left:0;bottom:0;width:38%;height:42%;
  pointer-events:auto;touch-action:none;
}
#joyBase{
  position:absolute;left:28px;bottom:32px;width:132px;height:132px;border-radius:50%;
  border:2px solid rgba(155,144,184,.45);background:rgba(13,11,20,.38);
  box-shadow:0 4px 18px rgba(0,0,0,.3);
}
#joyKnob{
  position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;
  background:rgba(111,195,255,.55);transform:translate(-50%,-50%);transition:transform .06s;
  box-shadow:0 2px 10px rgba(111,195,255,.3);
}
.touchBtns{
  position:absolute;right:22px;bottom:22px;display:grid;gap:12px;
  grid-template-columns:repeat(3,72px);grid-template-rows:repeat(4,62px);
  pointer-events:auto;
}
.tbtn{
  width:72px;height:62px;border-radius:18px;border:2px solid #3b2f5e;
  background:rgba(36,28,58,.88);color:#e8e3f5;font-size:23px;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.tbtn:active{background:#3a2c5a;transform:scale(.93)}
#tAttack{
  grid-column:1 / span 2;grid-row:4;width:100%;height:68px;border-radius:34px;font-size:30px;
  background:rgba(20,32,48,.94);border-color:#2f4a68;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
#tSecondary{grid-column:2;grid-row:2}
#tDash{grid-column:2;grid-row:3}
#tPotion{grid-column:1;grid-row:2}
#tBomb{grid-column:1;grid-row:3}
#tCycle{grid-column:2;grid-row:1;font-size:19px}
#tPause{grid-column:1;grid-row:1;font-size:19px}
#tChain{grid-column:3;grid-row:4;font-size:20px;background:rgba(28,28,38,.88);border-color:#4a445a}

.merchant{color:#ffd166;font-style:italic;display:block;margin-top:6px;font-size:13px}

/* ---------- shop: category tabs + readable item cards ---------- */
.shop-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 12px;max-width:620px}
.shop-tab{width:auto;padding:7px 11px;font-size:10.5px;letter-spacing:1px;margin:0}
.shop-tab.on{background:#3a2c5a;border-color:#ff7847;color:#fff}
.shop-list{display:flex;flex-direction:column;gap:8px;width:min(560px,94%)}
.shop-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#241c3a;border:1px solid #3b2f5e;border-radius:10px;padding:9px 12px;text-align:left;
}
.shop-item.locked{opacity:.55}
.si-main{min-width:0;flex:1}
.si-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.si-icon{font-size:17px}
.si-name{font-weight:bold;letter-spacing:1px;font-size:13px;color:#e8e3f5}
.si-cat{font-size:8.5px;letter-spacing:1px;color:#8fd4ff;border:1px solid #2a3a52;background:#121a2c;border-radius:5px;padding:1px 6px;white-space:nowrap}
.si-desc{color:#9a90b8;font-size:11.5px;margin-top:3px;line-height:1.45}
.si-note{color:#ff8b3d;font-size:10px;margin-top:2px;letter-spacing:.5px}
.si-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.si-price{color:#ffd166;font-weight:bold;font-size:13px;letter-spacing:.5px}
.si-price.owned{color:#6bff9a}
.si-sale{display:inline-block;margin-left:6px;font-size:9px;letter-spacing:1px;color:#ff8b3d;border:1px solid #5a2a2a;background:#2a1414;border-radius:4px;padding:1px 5px;animation:dashpulse 1.4s infinite}
.shop-item .si-buy{width:auto;min-width:118px;padding:6px 10px;font-size:10.5px;justify-content:center;margin:0;text-align:center}
.shop-foot{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.shop-foot .btn{width:auto;padding:9px 16px;font-size:12px;margin:0}
@media (max-width:640px){
  .shop-list{width:100%}
  .shop-item{padding:8px 10px;gap:8px}
  .shop-item .si-buy{min-width:92px;font-size:9.5px;padding:5px 6px}
  .si-name{font-size:12px}
  .si-desc{font-size:10.5px}
  .shop-tab{padding:6px 8px;font-size:9.5px}
  .shop-foot .btn{padding:8px 10px;font-size:11px}
}

/* ---------- mobile: HUD becomes a static strip ABOVE the play field so text
   never overlaps gameplay; touch buttons spread as a modern thumb cluster ---------- */
@media (max-width:640px), (max-height:520px) {
  #gameWrap{
    --hudH: 90px;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    width:100vw;height:100dvh;max-width:none;max-height:none;
    aspect-ratio:auto;border-radius:0;border:none;box-shadow:none;
  }
  #hud{
    position:static;order:1;flex:0 0 auto;width:100%;height:var(--hudH);
    display:flex;flex-direction:column;gap:3px;padding:4px 6px 0;overflow:hidden;
  }
  #hudTop{position:static;top:auto;left:auto;right:auto;padding:3px 8px}
  .hud-ident{font-size:11px}
  .hud-ident #hName{font-size:12px}
  .hud-top-right{font-size:12px;gap:10px}
  #hudBars{position:static;top:auto;left:auto;right:auto;gap:5px}
  .hp-wrap{padding:2px 6px}
  .bar{height:6px}
  #hudGear{position:static;left:auto;bottom:auto;gap:4px;max-width:100%;flex-wrap:nowrap}
  .gear-slot{padding:2px 6px;font-size:9.5px}
  #hudHint{display:none}
  #objHint{display:none}
  canvas{order:2;width:auto;height:auto;flex:0 0 auto;
    max-width:100vw;max-height:calc(100dvh - var(--hudH));aspect-ratio:4/3}
  #bossBar{top:calc(var(--hudH) + 6px);width:min(82%,420px);z-index:7}
  #overlay h2{font-size:22px}
  #overlay p{font-size:12px}
  #joyZone{width:40%;height:44%}
  #joyBase{left:20px;bottom:24px;width:118px;height:118px}
  #joyKnob{width:50px;height:50px}
  .touchBtns{
    right:14px;bottom:14px;gap:12px;
    grid-template-columns:repeat(3,68px);grid-template-rows:repeat(4,56px);
  }
  .tbtn{
    width:68px;height:56px;font-size:21px;border-radius:18px;
    border-color:rgba(140,124,190,.5);background:rgba(36,28,58,.62);
  }
  #tAttack{
    grid-column:1 / span 2;grid-row:4;width:100%;height:56px;border-radius:28px;
    font-size:28px;background:rgba(20,32,48,.92);border-color:#2f4a68;
  }
  #tSecondary{grid-column:1;grid-row:3}
  #tDash{grid-column:3;grid-row:3}
  #tPotion{grid-column:3;grid-row:2}
  #tBomb{grid-column:1;grid-row:2}
  #tCycle{grid-column:1;grid-row:1;font-size:18px}
  #tPause{grid-column:3;grid-row:1;font-size:18px}
  #candle{display:none}
  .toast{top:10px;font-size:12px;padding:8px 12px}
  #tutHint{bottom:170px;font-size:12px;pointer-events:none}
}
/* landscape phones: full-bleed arena, slim HUD strip, thumb-friendly cluster */
@media (max-height:520px) and (orientation:landscape) {
  #gameWrap{--hudH:76px;width:100vw;border-radius:0;border:none;box-shadow:none}
  #hud{gap:2px;padding:2px 4px 0}
  #hudTop{padding:2px 6px}
  .hud-ident{font-size:10px}
  .hud-ident #hName{font-size:11px}
  .hud-top-right{font-size:11px;gap:8px}
  #hudBars{gap:4px}
  .hp-wrap{padding:1px 5px}
  .hp-wrap span{font-size:9px}
  #hudGear{gap:3px}
  .gear-slot{padding:1px 4px;font-size:8.5px}
  #hDash{font-size:9px;padding:1px 4px}
  canvas{max-height:calc(100dvh - var(--hudH))}
  #bossBar{top:calc(var(--hudH) + 4px);width:min(70%,420px)}
  #joyZone{width:56%;height:84%}
  #joyBase{bottom:64px;left:10px;width:106px;height:106px}
  #joyKnob{width:40px;height:40px}
  .touchBtns{right:10px;bottom:8px;gap:12px;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(4,46px)}
  .tbtn{width:58px;height:46px;font-size:18px;border-radius:14px}
  #tAttack{grid-column:1 / span 2;grid-row:4;width:100%;height:48px;border-radius:24px;font-size:24px}
  #tutHint{bottom:auto;top:80px}
}