/* Castle Ascent — UI styles */

@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/pressstart2p.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg: #0e0c16;
  --panel: #1a1726;
  --panel-edge: #3b3354;
  --gold: #f3c34c;
  --parchment: #e8dcc0;
  --dim: #8a82a8;
  --hp: #e04b4b;
  --mp: #4b9de0;
  --xp: #59c14f;
  --blade: #e0904b;
  --arcane: #7a5ce0;
  --shadow: #4bc1a0;
  --danger: #ff5e5e;
  font-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body { font-family: 'Press Start 2P', monospace; color: var(--parchment); }

#game {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#ui { position: fixed; inset: 0; pointer-events: none; }

.hidden { display: none !important; }

/* ---------- overlays ---------- */

.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 14, 0.82);
  pointer-events: auto;
  z-index: 30;
}

/* ---------- title screen ---------- */

#title { background: radial-gradient(ellipse at 50% 30%, #1c1830 0%, #0e0c16 70%); }

.title-inner { text-align: center; padding: 24px; max-width: 560px; width: 100%; }

#logo { line-height: 1.15; margin-bottom: 10px; text-shadow: 0 4px 0 #000, 0 0 24px rgba(243,195,76,.25); }
.logo-line1 { display: block; font-size: clamp(26px, 7vw, 44px); color: var(--parchment); letter-spacing: .08em; }
.logo-line2 { display: block; font-size: clamp(34px, 9vw, 58px); color: var(--gold); letter-spacing: .12em; }

#title-knight { margin: 6px auto 2px; height: 96px; }
#title-canvas { image-rendering: pixelated; }

.tagline { font-size: clamp(8px, 2.4vw, 11px); color: var(--dim); margin-bottom: 26px; }

.menu { display: flex; flex-direction: column; gap: 12px; align-items: center; }

.mbtn {
  font-family: inherit; font-size: clamp(11px, 3vw, 14px);
  background: var(--panel); color: var(--parchment);
  border: 3px solid var(--panel-edge);
  box-shadow: 0 4px 0 #000;
  padding: 13px 30px; min-width: 250px;
  cursor: pointer;
}
.mbtn:hover, .mbtn:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.mbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 #000; }
.mbtn.primary { border-color: var(--gold); color: var(--gold); }
.mbtn .sub { display: block; font-size: 8px; color: var(--dim); margin-top: 6px; }

.title-foot { margin-top: 30px; font-size: 8px; color: #524a6e; }

/* ---------- dialogs ---------- */

#dialog-box {
  background: var(--panel);
  border: 3px solid var(--panel-edge);
  box-shadow: 0 6px 0 #000, 0 0 60px rgba(0,0,0,.6);
  padding: 22px;
  max-width: min(92vw, 720px);
  max-height: 86vh;
  overflow-y: auto;
}

.dlg-title { font-size: clamp(13px, 3.4vw, 18px); color: var(--gold); text-align: center; margin-bottom: 6px; }
.dlg-sub { font-size: clamp(8px, 2.2vw, 10px); color: var(--dim); text-align: center; margin-bottom: 18px; line-height: 1.7; }

.cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.card {
  background: #131020;
  border: 3px solid var(--panel-edge);
  padding: 16px 14px;
  width: 200px;
  cursor: pointer;
  text-align: center;
}
.card:hover, .card:focus-visible { transform: translateY(-3px); outline: none; }
.card.blade:hover,  .card.blade:focus-visible  { border-color: var(--blade); }
.card.arcane:hover, .card.arcane:focus-visible { border-color: var(--arcane); }
.card.shadow:hover, .card.shadow:focus-visible { border-color: var(--shadow); }
.card canvas { image-rendering: pixelated; margin-bottom: 8px; }
.card .c-name { font-size: 12px; margin-bottom: 8px; }
.card.blade .c-name { color: var(--blade); }
.card.arcane .c-name { color: var(--arcane); }
.card.shadow .c-name { color: var(--shadow); }
.card .c-desc { font-size: 8px; color: var(--dim); line-height: 1.8; }
.card .c-spec { font-size: 8px; color: var(--parchment); line-height: 1.8; margin-top: 8px; }
.card .c-spec b { color: var(--gold); display: block; margin-bottom: 2px; }

/* merchant */
.shop-gold { text-align: center; font-size: 12px; color: var(--gold); margin-bottom: 14px; }
.shop-rows { display: flex; flex-direction: column; gap: 8px; }
.shop-row {
  display: flex; align-items: center; gap: 12px;
  background: #131020; border: 2px solid var(--panel-edge);
  padding: 10px 12px;
}
.shop-row .s-name { flex: 1; font-size: 10px; line-height: 1.6; }
.shop-row .s-name .s-d { display: block; font-size: 8px; color: var(--dim); margin-top: 4px; }
.shop-row .s-price { font-size: 10px; color: var(--gold); white-space: nowrap; }
.sbtn {
  font-family: inherit; font-size: 9px;
  background: var(--panel-edge); color: var(--parchment);
  border: 2px solid #574b7e; padding: 8px 12px; cursor: pointer;
}
.sbtn:hover:not(:disabled) { background: #4a3f6b; color: var(--gold); }
.sbtn:disabled { opacity: .35; cursor: default; }

.dlg-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* stats table (death / victory) */
.stats { margin: 14px auto; font-size: 10px; line-height: 2.2; color: var(--parchment); }
.stats td { padding: 0 10px; }
.stats td:first-child { color: var(--dim); text-align: right; }
.stats td:last-child { color: var(--gold); }

.big-skull { font-size: 40px; text-align: center; margin-bottom: 8px; }

/* help */
.help-grid { font-size: 9px; line-height: 2.3; color: var(--parchment); }
.help-grid b { color: var(--gold); }
.help-grid .hh { color: var(--dim); margin-top: 10px; font-size: 8px; }

/* ---------- floor banner ---------- */

#banner {
  position: absolute; left: 0; right: 0; top: 18%;
  text-align: center; z-index: 20;
  animation: bannerIn 2.6s ease forwards;
}
#banner-title { font-size: clamp(16px, 5vw, 28px); color: var(--gold); text-shadow: 0 3px 0 #000; }
#banner-sub { font-size: clamp(9px, 2.6vw, 12px); color: var(--parchment); margin-top: 10px; text-shadow: 0 2px 0 #000; }
@keyframes bannerIn {
  0% { opacity: 0; transform: translateY(-14px); }
  12% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- toasts ---------- */

#toasts {
  position: absolute; left: 50%; bottom: 17%;
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 6px;
  z-index: 19; width: 100%;
}
.toast {
  font-size: clamp(8px, 2.4vw, 11px);
  color: var(--parchment);
  background: rgba(15, 12, 26, 0.85);
  border: 2px solid var(--panel-edge);
  padding: 8px 14px;
  text-shadow: 0 2px 0 #000;
  animation: toastIn 3s ease forwards;
  max-width: 90vw; text-align: center; line-height: 1.7;
}
@keyframes toastIn {
  0% { opacity: 0; transform: translateY(8px); }
  8% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- fade ---------- */

#fade {
  position: absolute; inset: 0; background: #000;
  opacity: 0; pointer-events: none; z-index: 40;
  transition: opacity .45s ease;
}
#fade.on { opacity: 1; }

/* ---------- touch controls ---------- */

#touch { position: absolute; inset: 0; z-index: 15; }

#stick-zone {
  position: absolute; left: 0; top: 0; bottom: 0; width: 45%;
  pointer-events: auto;
}
#stick-base {
  position: absolute; width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.22);
  transform: translate(-50%, -50%);
  z-index: 16;
}
#stick-nub {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.30);
  transform: translate(-50%, -50%);
}

#touch-buttons {
  position: absolute;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-areas: "p d" "s a";
  gap: 12px;
  align-items: end; justify-items: end;
  pointer-events: auto;
}
.tbtn {
  font-family: inherit;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(30,26,48,.55);
  color: var(--parchment);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.tbtn:active { background: rgba(243,195,76,.45); }
.tbtn.big   { width: 76px; height: 76px; font-size: 26px; grid-area: a; }
.tbtn.mid   { width: 60px; height: 60px; font-size: 20px; grid-area: s; }
.tbtn.small { width: 48px; height: 48px; font-size: 16px; }
#btn-potion { grid-area: p; color: #ff8a8a; }
#btn-dodge  { grid-area: d; }
.tbtn.cooldown { opacity: .35; }

/* ---------- corner buttons ---------- */

#corner-btns {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  display: flex; gap: 8px; z-index: 18;
  pointer-events: auto;
}
.cbtn {
  font-family: inherit; font-size: 12px;
  width: 34px; height: 34px;
  background: rgba(26,23,38,.7);
  color: var(--dim);
  border: 2px solid var(--panel-edge);
  cursor: pointer;
  pointer-events: auto;
}
.cbtn:hover { color: var(--gold); border-color: var(--gold); }
.cbtn.off { color: #574b6e; text-decoration: line-through; }

@media (max-height: 480px) {
  .tbtn.big { width: 62px; height: 62px; }
  .tbtn.mid { width: 50px; height: 50px; }
  .tbtn.small { width: 40px; height: 40px; }
}