/* Kleidí: The Lamp of Psyche
 * A single dark stage, gold hairlines, serif display type. No web fonts:
 * the look is built out of system serif + careful spacing.
 */

:root {
  --ink: #07050a;
  --ink2: #0d0a12;
  --ink3: #151019;
  --ivory: #f5ecda;
  --dim: rgba(245, 236, 218, .62);
  --faint: rgba(245, 236, 218, .34);
  --gold: #d8b573;
  --gold2: #f4e0b4;
  --bronze: #a97b45;
  --line: rgba(216, 181, 115, .24);
  --line-soft: rgba(216, 181, 115, .12);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --shadow: 0 28px 70px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--ink); color: var(--ivory);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(120% 80% at 50% -10%, #1b1420 0%, #0b0810 42%, #050409 100%),
    var(--ink);
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

#app {
  position: fixed; inset: 0;
  display: block;
  overflow: hidden;
}

#board {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  transition: filter .55s ease, transform .55s ease, opacity .4s ease;
}
body.has-screen #board {
  filter: blur(7px) brightness(.52) saturate(.85);
  transform: scale(1.015);
}

/* ---------------- HUD ---------------- */

.hud {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 0;
  pointer-events: none;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease;
  z-index: 8;
}
.hud.is-on { opacity: 1; transform: none; }
.hud > * { pointer-events: auto; }

.hud-left, .hud-mid, .hud-right { display: flex; align-items: center; gap: 8px; }
.hud-mid {
  flex-direction: row;
  background: linear-gradient(180deg, rgba(18, 13, 22, .78), rgba(11, 8, 14, .62));
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 5px 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}
.hud-right { gap: 6px; }

.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(16, 12, 20, .62);
  color: var(--ivory);
  font-size: 12.5px; letter-spacing: .02em;
  backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s, transform .15s;
}
.icon-btn:hover { border-color: var(--line); background: rgba(28, 21, 33, .8); }
.icon-btn:active { transform: scale(.96); }
.icon-btn b { color: var(--gold2); font-weight: 600; }
.icon-btn.is-empty { opacity: .42; }

.hud-ch { display: flex; flex-direction: column; line-height: 1.15; padding-left: 2px; }
.hud-act {
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); opacity: .85;
}
.hud-name {
  font-family: var(--serif); font-size: 15px; letter-spacing: .01em;
  color: var(--ivory); max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.counter { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); }
.counter b { color: var(--ivory); font-weight: 600; font-variant-numeric: tabular-nums; }
.counter.moves i { color: var(--faint); font-style: normal; font-variant-numeric: tabular-nums; }
.counter.moves span { color: var(--faint); margin: 0 1px; }

.ico-shard {
  width: 11px; height: 11px; display: inline-block;
  background: linear-gradient(135deg, #fff3d2, var(--gold));
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  filter: drop-shadow(0 0 4px rgba(255, 214, 140, .65));
}

.sig {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(216, 181, 115, .45);
  background: rgba(255, 255, 255, .06);
  transition: background .3s, box-shadow .3s;
}
.sig.is-on { background: radial-gradient(circle at 35% 30%, #ffe9bc, var(--bronze)); box-shadow: 0 0 8px rgba(216, 181, 115, .7); }
#sig0.is-on { background: radial-gradient(circle at 35% 30%, #ffe1ac, #b67a34); }
#sig1.is-on { background: radial-gradient(circle at 35% 30%, #ffffff, #8fa3b3); }
.is-hidden { display: none !important; }

.beats { display: inline-flex; gap: 3px; margin-left: 4px; }
.beats i {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(216, 181, 115, .25);
  transition: background .2s, transform .2s;
}
.beats i.is-now { background: var(--gold2); transform: scale(1.4); box-shadow: 0 0 6px rgba(244, 224, 180, .8); }

/* ---------------- pads ---------------- */

.pad {
  position: absolute; left: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px);
  gap: 6px;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  z-index: 7;
}
.pad.is-on { opacity: .92; pointer-events: auto; transform: none; }
.pad button {
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(30, 23, 36, .86), rgba(14, 10, 18, .9));
  color: var(--gold2); font-size: 17px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .12s, border-color .2s;
}
.pad button:active { transform: scale(.94); border-color: var(--gold); }
.pad button[data-dir="0"] { grid-column: 2; grid-row: 1; }
.pad button[data-dir="3"] { grid-column: 1; grid-row: 2; }
.pad button[data-dir="2"] { grid-column: 2; grid-row: 2; }
.pad button[data-dir="1"] { grid-column: 3; grid-row: 2; }

.pad-actions {
  position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; gap: 8px; align-items: center;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  z-index: 7;
}
.pad-actions.is-on { opacity: .92; pointer-events: auto; transform: none; }
.pad-actions button {
  min-width: 52px; height: 46px; padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(30, 23, 36, .86), rgba(14, 10, 18, .9));
  color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.pad-actions button:hover { color: var(--gold2); border-color: var(--line); }

/* ---------------- screens ---------------- */

.screens { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  opacity: 0; visibility: hidden;
  transition: opacity .32s ease, visibility .32s;
  overflow-y: auto;
}
.screen.is-on { opacity: 1; visibility: visible; pointer-events: auto; }

.panel {
  position: relative;
  width: min(720px, 100%);
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(165deg, rgba(28, 21, 33, .93), rgba(11, 8, 16, .96) 55%, rgba(9, 7, 12, .98));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 240, 210, .07);
  backdrop-filter: blur(22px) saturate(1.1);
  padding: 30px 32px 26px;
  animation: panelIn .42s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes panelIn {
  from { transform: translateY(14px) scale(.985); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.panel::before {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(216, 181, 115, .08);
  border-radius: 14px; pointer-events: none;
}

.eyebrow {
  display: block; font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); opacity: .9; margin-bottom: 12px;
}

/* title */
.panel-title { width: min(560px, 100%); text-align: center; padding: 38px 30px 30px; }
.brand-mark { margin: 0 auto 4px; width: 62px; height: 62px; opacity: .95; }
.brand-mark svg { width: 100%; height: 100%; }
.wordmark {
  font-family: var(--serif);
  font-size: clamp(40px, 10vw, 62px);
  line-height: 1;
  letter-spacing: .16em;
  margin: 6px 0 0 .16em;
  background: linear-gradient(180deg, #fff8e6 8%, var(--gold2) 42%, #b98a44 78%, #8b6326 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(200, 150, 70, .22));
}
.wordmark-sub {
  font-family: var(--serif); font-size: clamp(14px, 3.6vw, 18px);
  letter-spacing: .14em; color: var(--dim); margin-top: 10px;
}
.rule {
  width: 86px; height: 1px; margin: 18px auto;
  background: linear-gradient(90deg, transparent, rgba(216, 181, 115, .55), transparent);
  position: relative;
}
.rule::after {
  content: ""; position: absolute; left: 50%; top: -2.5px;
  width: 5px; height: 5px; transform: translateX(-50%) rotate(45deg);
  background: var(--gold); box-shadow: 0 0 8px rgba(216, 181, 115, .8);
}
.tagline {
  font-family: var(--serif); font-size: 15px; line-height: 1.65;
  color: var(--dim); max-width: 40ch; margin: 0 auto;
}
.actions { display: flex; flex-direction: column; gap: 9px; margin: 24px auto 0; max-width: 300px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px;
  font-size: 13.5px; letter-spacing: .05em;
  transition: transform .15s, box-shadow .25s, background .25s, color .2s, border-color .2s;
}
.btn-primary {
  background: linear-gradient(180deg, #f6e3b9, #d5ac68 55%, #b2863f);
  color: #241a0d; font-weight: 600;
  box-shadow: 0 10px 26px rgba(180, 130, 60, .28), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(200, 150, 70, .36), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ivory); background: rgba(255, 255, 255, .02);
}
.btn-ghost:hover { border-color: rgba(216, 181, 115, .5); background: rgba(216, 181, 115, .07); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .4; pointer-events: none; }

.title-meta {
  margin-top: 18px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.title-chapter { margin-top: 6px; font-family: var(--serif); font-size: 12.5px; color: var(--faint); }
.title-foot {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 236, 218, .3);
}

/* chapters */
.panel-wide { width: min(980px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; padding: 26px 28px 20px; }
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.panel-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 3vw, 30px); margin: 0; letter-spacing: .02em; }
.panel-head p { margin: 4px 0 0; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.acts { overflow-y: auto; padding-right: 6px; margin-top: 12px; }
.acts::-webkit-scrollbar { width: 6px; }
.acts::-webkit-scrollbar-thumb { background: rgba(216, 181, 115, .25); border-radius: 3px; }

.act-block { padding: 14px 0 6px; border-top: 1px solid rgba(255, 255, 255, .055); }
.act-block:first-child { border-top: 0; }
.act-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.act-num {
  font-family: var(--serif); font-size: 13px; color: var(--gold);
  border: 1px solid var(--line); border-radius: 50%;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.act-name { font-family: var(--serif); font-size: 18px; letter-spacing: .02em; }
.act-sub { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.chapter-btn {
  position: relative; text-align: left;
  padding: 10px 11px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  transition: border-color .2s, background .2s, transform .15s;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center;
}
.chapter-btn:hover { border-color: rgba(216, 181, 115, .42); background: rgba(216, 181, 115, .06); transform: translateY(-1px); }
.chapter-btn.is-locked { opacity: .32; cursor: not-allowed; }
.chapter-btn.is-locked:hover { transform: none; border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .01); }
.cb-n { font-family: var(--serif); font-size: 15px; color: var(--gold2); grid-row: span 2; min-width: 18px; text-align: center; }
.cb-name { font-size: 11.5px; color: var(--dim); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-stars { font-size: 9px; letter-spacing: 2px; color: rgba(255, 255, 255, .14); }
.cb-stars i { font-style: normal; }
.cb-stars i.on { color: var(--gold); text-shadow: 0 0 6px rgba(216, 181, 115, .65); }

.panel-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); }
.panel-foot .btn { height: 40px; font-size: 12px; }

/* brief */
.panel-brief { width: min(680px, 100%); }
.brief-kicker { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.brief-title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 5.6vw, 44px); margin: 10px 0 4px; letter-spacing: .01em; }
.brief-line { font-family: var(--serif); font-style: italic; color: var(--gold2); opacity: .85; font-size: 15px; margin: 0 0 16px; }
.brief-story {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.75; color: var(--dim);
  margin: 0; max-height: 34vh; overflow-y: auto; padding-right: 8px;
}
.brief-story::first-letter {
  float: left; font-size: 3.1em; line-height: .86; padding: 4px 10px 0 0;
  color: var(--gold2);
}
.brief-num { margin-top: 16px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.brief-actions { display: flex; gap: 10px; margin-top: 20px; }

/* result */
.panel-result { width: min(520px, 100%); text-align: center; }
.res-stars { display: flex; justify-content: center; gap: 14px; margin: 8px 0 14px; }
.res-stars i {
  font-style: normal; font-size: 30px; color: rgba(255, 255, 255, .12);
  transition: color .4s, transform .4s cubic-bezier(.2, 1.6, .4, 1), text-shadow .4s;
  transform: scale(.8);
}
.res-stars i.is-lit {
  color: var(--gold2); transform: scale(1);
  text-shadow: 0 0 18px rgba(255, 214, 140, .75);
}
.res-title { font-family: var(--serif); font-size: clamp(26px, 5vw, 34px); margin: 0; font-weight: 400; }
.res-name { color: var(--dim); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; }
.res-stats { display: flex; justify-content: center; gap: 26px; margin: 20px 0 6px; }
.res-stats div { display: flex; flex-direction: column; gap: 3px; }
.res-stats b { font-family: var(--serif); font-size: 22px; color: var(--gold2); font-weight: 400; }
.res-stats span { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.res-note { font-family: var(--serif); font-style: italic; color: var(--dim); font-size: 13.5px; margin: 12px 0 0; }
.res-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }

/* how */
.panel-how { width: min(860px, 100%); max-height: 88vh; overflow-y: auto; }
.how-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; margin-top: 10px; }
.how-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.how-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.how-list b { color: var(--ivory); font-weight: 600; }
.how-n { font-family: var(--serif); color: var(--gold); text-align: center; }
.legend { display: flex; flex-direction: column; gap: 9px; }
.legend-row { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; font-size: 12.5px; color: var(--dim); }
.legend-row svg { width: 26px; height: 26px; }
.how-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 12px; color: var(--faint); line-height: 1.6; }
kbd {
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid rgba(216, 181, 115, .3); border-radius: 4px;
  padding: 2px 5px; color: var(--gold2); background: rgba(216, 181, 115, .07);
}

/* toast + banner */
.toast {
  position: absolute; left: 50%; bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px));
  transform: translate(-50%, 12px);
  padding: 10px 18px; border-radius: 999px;
  background: rgba(12, 9, 16, .9);
  border: 1px solid var(--line-soft);
  color: var(--ivory); font-size: 12.5px; letter-spacing: .01em;
  backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  max-width: min(88vw, 520px); text-align: center;
  z-index: 9;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.banner {
  position: absolute; left: 50%; top: 86px; transform: translate(-50%, -8px);
  padding: 9px 16px; border-radius: 999px;
  background: rgba(10, 8, 14, .78);
  border: 1px solid var(--line-soft);
  font-family: var(--serif); font-size: 13px; color: var(--gold2);
  opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s;
  max-width: min(90vw, 560px); text-align: center;
  z-index: 9;
}
.banner.is-on { opacity: 1; transform: translate(-50%, 0); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------------- responsive ---------------- */

@media (max-width: 760px) {
  .panel { padding: 24px 20px 20px; border-radius: 16px; }
  .panel-title { padding: 30px 20px 24px; }
  .how-grid { grid-template-columns: 1fr; gap: 18px; }
  .hud-name { display: none; }
  .hud { padding-inline: 10px; }
  .hud-mid { padding: 4px 10px; gap: 6px; }
  .counter { font-size: 11.5px; }
  .icon-btn { min-height: 34px; padding: 0 10px; font-size: 11.5px; }
  .chapter-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .brief-story { font-size: 14.5px; max-height: 38vh; }
  .pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); left: 12px; }
  .pad-actions { right: 12px; gap: 6px; }
  .pad-actions button { min-width: 44px; height: 44px; padding: 0 9px; font-size: 10px; }
  .banner { top: 74px; font-size: 12px; }
  .toast { bottom: max(88px, calc(env(safe-area-inset-bottom) + 78px)); font-size: 12px; }
}

@media (max-height: 560px) {
  .panel { padding: 18px 20px 16px; }
  .panel-title { padding: 22px 20px 18px; }
  .brand-mark { width: 44px; height: 44px; }
  .wordmark { font-size: 40px; }
  .actions { margin-top: 14px; gap: 6px; }
  .btn { height: 40px; }
  .brief-story { max-height: 30vh; }
  .pad { grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(2, 40px); }
  .pad-actions button { height: 40px; min-width: 40px; }
  .banner { top: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}