/* Castle Ascent II — UI styles */

:root {
  --bg: #0a0912;
  --panel: rgba(22, 19, 38, 0.92);
  --panel-edge: #453a6b;
  --gold: #ffcf5c;
  --gold-dim: #b98f3e;
  --parchment: #efe6d0;
  --dim: #968dbb;
  --hp: #ff5a5a;
  --mp: #58a6ff;
  --xp: #6fdc6f;
  --blade: #ff9d5c;
  --arcane: #a07dff;
  --shadow: #5ce0b8;
  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: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  color: var(--parchment);
}

#game { position: fixed; inset: 0; width: 100%; height: 100%; }

/* NOTE: #ui blocks nothing; interactive children opt in with pointer-events:auto */
#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(6, 5, 12, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
  z-index: 30;
}

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

#title { background: radial-gradient(ellipse at 50% 28%, #221c40 0%, #0a0912 72%); }

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

#logo { line-height: 1.02; margin-bottom: 4px; }
.logo-line1 {
  display: block;
  font-size: clamp(30px, 6.4vw, 54px);
  font-weight: 800; letter-spacing: .1em;
  color: var(--parchment);
  text-shadow: 0 2px 0 #1a1430, 0 6px 22px rgba(0,0,0,.7);
}
.logo-line2 {
  display: block;
  font-size: clamp(44px, 9vw, 76px);
  font-weight: 900; letter-spacing: .3em; margin-left: .3em;
  background: linear-gradient(180deg, #ffe9a8 10%, #ffcf5c 45%, #a86f2a 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 10px rgba(255, 207, 92, .25));
}

#title-hero { margin: 6px auto 0; height: 150px; }
#title-canvas { max-width: 100%; }

.tagline { font-size: clamp(12px, 2.6vw, 15px); color: var(--dim); margin: 4px 0 24px; letter-spacing: .06em; }

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

.mbtn {
  font-family: inherit;
  font-size: clamp(14px, 3vw, 17px);
  font-weight: 700; letter-spacing: .12em;
  background: linear-gradient(180deg, rgba(48,40,84,.9), rgba(28,23,52,.9));
  color: var(--parchment);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 14px 34px; min-width: 280px;
  cursor: pointer;
  transition: transform .08s ease, border-color .12s, color .12s;
}
.mbtn:hover, .mbtn:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; transform: translateY(-1px); }
.mbtn:active { transform: translateY(1px); }
.mbtn.primary { border-color: var(--gold-dim); color: var(--gold); }
.mbtn .sub { display: block; font-size: 11px; font-weight: 400; letter-spacing: .05em; color: var(--dim); margin-top: 5px; }

.title-foot { margin-top: 28px; font-size: 11px; color: #5d5480; letter-spacing: .08em; }
.title-foot a { color: #7d72a8; text-decoration: none; border-bottom: 1px dotted #5d5480; pointer-events: auto; }
.title-foot a:hover { color: var(--gold); }

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

#dialog-box {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 26px;
  max-width: min(94vw, 780px);
  max-height: 88vh;
  overflow-y: auto;
}

.dlg-title {
  font-size: clamp(19px, 4vw, 26px); font-weight: 800; letter-spacing: .14em;
  color: var(--gold); text-align: center; margin-bottom: 6px;
  text-shadow: 0 2px 12px rgba(255,207,92,.2);
}
.dlg-sub { font-size: clamp(12px, 2.4vw, 14px); color: var(--dim); text-align: center; margin-bottom: 20px; line-height: 1.65; }

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

.card {
  background: linear-gradient(180deg, rgba(20,16,36,.9), rgba(13,10,24,.9));
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  padding: 18px 16px;
  width: 210px;
  cursor: pointer;
  text-align: center;
  font-family: inherit; color: inherit;
  transition: transform .1s ease, border-color .12s, box-shadow .12s;
}
.card:hover, .card:focus-visible { transform: translateY(-4px); outline: none; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.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 { margin-bottom: 8px; }
.card .c-name { font-size: 17px; font-weight: 800; letter-spacing: .06em; 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: 12px; color: var(--dim); line-height: 1.65; }
.card .c-spec { font-size: 12px; color: var(--parchment); line-height: 1.65; margin-top: 10px; }
.card .c-spec b { color: var(--gold); display: block; margin-bottom: 2px; letter-spacing: .04em; }

/* merchant */
.shop-gold { text-align: center; font-size: 16px; font-weight: 700; color: var(--gold); margin-bottom: 16px; letter-spacing: .06em; }
.shop-rows { display: flex; flex-direction: column; gap: 9px; }
.shop-row {
  display: flex; align-items: center; gap: 14px;
  background: rgba(13,10,24,.7);
  border: 1px solid #322a52;
  border-radius: 10px;
  padding: 12px 14px;
}
.shop-row .s-name { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.5; }
.shop-row .s-name .s-d { display: block; font-size: 12px; font-weight: 400; color: var(--dim); margin-top: 3px; }
.shop-row .s-price { font-size: 14px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.sbtn {
  font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .1em;
  background: #3b3163; color: var(--parchment);
  border: 1px solid #574b8a; border-radius: 8px;
  padding: 9px 16px; cursor: pointer;
}
.sbtn:hover:not(:disabled) { background: #4a3f7d; color: var(--gold); }
.sbtn:disabled { opacity: .35; cursor: default; }

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

.stats { margin: 14px auto; font-size: 14px; line-height: 2.1; }
.stats td { padding: 0 12px; }
.stats td:first-child { color: var(--dim); text-align: right; }
.stats td:last-child { color: var(--gold); font-weight: 700; }

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

.help-grid { font-size: 13px; line-height: 2; color: var(--parchment); max-width: 560px; }
.help-grid b { color: var(--gold); }
.help-grid .hh { color: var(--dim); margin-top: 12px; font-size: 11px; letter-spacing: .18em; font-weight: 700; }

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

#banner {
  position: absolute; left: 0; right: 0; top: 16%;
  text-align: center; z-index: 20;
  animation: bannerIn 2.8s ease forwards;
}
#banner-title {
  font-size: clamp(26px, 6vw, 44px); font-weight: 900; letter-spacing: .22em;
  color: var(--gold);
  text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 34px rgba(255,207,92,.3);
}
#banner-sub {
  font-size: clamp(13px, 3vw, 17px); letter-spacing: .12em;
  color: var(--parchment); margin-top: 10px;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
@keyframes bannerIn {
  0% { opacity: 0; transform: translateY(-16px) scale(.98); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

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

#toasts {
  position: absolute; left: 50%; bottom: 16%;
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 7px;
  z-index: 19; width: 100%;
}
.toast {
  font-size: clamp(12px, 2.6vw, 14px); font-weight: 600;
  color: var(--parchment);
  background: rgba(16, 13, 30, 0.88);
  border: 1px solid #3a3160;
  border-radius: 999px;
  padding: 9px 20px;
  text-shadow: 0 1px 3px #000;
  animation: toastIn 3s ease forwards;
  max-width: 90vw; text-align: center;
}
@keyframes toastIn {
  0% { opacity: 0; transform: translateY(10px); }
  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 .5s ease;
}
#fade.on { opacity: 1; }

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

#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: 104px; height: 104px; border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(255,255,255,.2);
  transform: translate(-50%, -50%);
  z-index: 16;
}
#stick-nub {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.5), rgba(255,255,255,.18));
  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: 13px;
  align-items: end; justify-items: end;
  pointer-events: auto;
}
.tbtn {
  font-family: inherit;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  background: radial-gradient(circle at 38% 30%, rgba(70,58,120,.7), rgba(26,20,48,.65));
  color: var(--parchment);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.tbtn:active { background: radial-gradient(circle at 38% 30%, rgba(255,207,92,.65), rgba(160,110,30,.6)); }
.tbtn.big   { width: 82px; height: 82px; font-size: 30px; grid-area: a; }
.tbtn.mid   { width: 62px; height: 62px; font-size: 22px; grid-area: s; }
.tbtn.small { width: 50px; height: 50px; font-size: 18px; }
#btn-potion { grid-area: p; color: #ff9a9a; }
#btn-dodge  { grid-area: d; }

/* ---------- 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: 14px;
  width: 38px; height: 38px;
  background: rgba(22, 18, 40, .75);
  color: var(--dim);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  cursor: pointer;
}
.cbtn:hover { color: var(--gold); border-color: var(--gold); }
.cbtn.off { color: #4c4370; text-decoration: line-through; }

@media (max-height: 480px) {
  .tbtn.big { width: 66px; height: 66px; }
  .tbtn.mid { width: 52px; height: 52px; }
  .tbtn.small { width: 42px; height: 42px; }
}