:root {
  color-scheme: dark;
  --ink: #eff6ec;
  --dim: #9fb0ad;
  --deep: #071017;
  --panel: rgba(9, 20, 27, .78);
  --line: rgba(208, 226, 215, .18);
  --water: #75d8ff;
  --fire: #ff9b4b;
  --air: #d9f1dc;
  --earth: #d1a66a;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(71, 118, 126, .3), transparent 42rem),
    linear-gradient(155deg, #0b1720, #050a0e 65%);
  font-family: Georgia, 'Times New Roman', serif;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    repeating-linear-gradient(17deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(103deg, rgba(0,0,0,.02) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
}

button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid #f5d494; outline-offset: 3px; }
.house-link {
  position: fixed;
  z-index: 20;
  top: 14px;
  left: 18px;
  color: var(--dim);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: lowercase;
}

#game-shell { width: min(1180px, 100%); margin: 0 auto; padding: 18px 18px 28px; }
.topbar { display: flex; justify-content: space-between; align-items: end; min-height: 74px; padding: 0 8px 9px; }
h1, h2 { margin: 0; font-weight: 500; letter-spacing: .16em; }
h1 { font-size: clamp(23px, 3vw, 37px); text-shadow: 0 0 32px rgba(133, 221, 222, .22); }
.eyebrow { margin: 0 0 5px; color: var(--dim); font: 10px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; }
.top-actions { display: flex; gap: 8px; }
.quiet-btn, .close-btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  border-radius: 99px;
  min-width: 38px;
  height: 38px;
  padding: 0 13px;
  cursor: pointer;
  color: var(--dim);
}
.quiet-btn:hover, .close-btn:hover { color: var(--ink); border-color: rgba(255,255,255,.4); }

.stage-wrap {
  position: relative;
  border: 1px solid rgba(205, 233, 223, .21);
  border-radius: 48% 48% 15px 15px / 17% 17% 15px 15px;
  overflow: hidden;
  background: #08141a;
  box-shadow: 0 35px 90px rgba(0,0,0,.55), inset 0 0 60px rgba(160,220,218,.08);
}
.stage-wrap::after {
  content: '';
  position: absolute;
  inset: 1px;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  box-shadow: inset 18px 5px 22px rgba(224,255,249,.07), inset -28px -8px 40px rgba(0,0,0,.33);
}
canvas { display: block; width: 100%; aspect-ratio: 16 / 9; cursor: crosshair; touch-action: none; }
#hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.meters { position: absolute; top: 18px; left: 22px; display: grid; gap: 9px; width: min(215px, 28vw); }
.meter-card { color: #dce7df; font: 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .17em; text-transform: uppercase; text-shadow: 0 1px 4px #000; }
.meter { height: 5px; margin-top: 6px; background: rgba(4,8,10,.6); border: 1px solid rgba(255,255,255,.16); overflow: hidden; }
.meter i { display:block; width:100%; height:100%; background: linear-gradient(90deg, #719bc5, #c9ede0); transition: width .2s; }
.meter.keeper i { background: linear-gradient(90deg, #db794b, #f4c768); }
.hidden { display: none !important; }
.objectives { position: absolute; top: 18px; right: 22px; width: min(280px, 34vw); margin: 0; padding: 0; list-style: none; }
.objectives li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 8px;
  margin-bottom: 7px;
  color: rgba(239,246,236,.58);
  font: 10px/1.35 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
  justify-content: end;
}
.objectives li::before { content: '○'; grid-row: 1 / 3; color: #a7c9c6; }
.objectives li.done { color: rgba(239,246,236,.3); text-decoration: line-through; }
.objectives li.done::before { content: '●'; }
.objectives li.current { color: #fff; }
.objectives small { display:block; color: #b7d5d0; letter-spacing: 0; text-transform: none; }
.element-rack {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, minmax(104px, 145px));
  gap: 7px;
  pointer-events: auto;
}
.element {
  display: grid;
  grid-template-columns: 22px 1fr;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(6,13,18,.72);
  backdrop-filter: blur(8px);
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
  transition: transform .15s, background .15s, border-color .15s;
}
.element:hover { transform: translateY(-2px); }
.element kbd { grid-row: 1 / 3; color: var(--dim); font: 10px ui-monospace, monospace; }
.element b { font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.element small { color: var(--dim); font: 8px ui-monospace, monospace; }
.element.active { background: rgba(20,38,45,.93); box-shadow: 0 0 25px rgba(142,221,218,.13); }
.element[data-element="water"].active { border-color: var(--water); }
.element[data-element="fire"].active { border-color: var(--fire); }
.element[data-element="air"].active { border-color: var(--air); }
.element[data-element="earth"].active { border-color: var(--earth); }
.whisper { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: 80%; margin: 0; text-align: center; color:#f7f0d1; font-size: 16px; letter-spacing:.04em; text-shadow: 0 2px 9px #000; opacity:0; transition: opacity .35s; }
.whisper.show { opacity: 1; }
.touch-move { display:none; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 10px 7px 0; color: #71817e; font: 9px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }

.modal-layer {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3,8,11,.75);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.modal-layer.open { opacity:1; pointer-events:auto; }
.modal {
  position: relative;
  width: min(620px, 100%);
  padding: clamp(28px, 6vw, 62px);
  border: 1px solid rgba(211,236,226,.24);
  background: linear-gradient(145deg, rgba(20,39,47,.96), rgba(7,14,19,.97));
  box-shadow: 0 35px 100px #000;
  text-align: center;
}
.title-card::before { content:''; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.06); pointer-events:none; }
.sigil { margin:0 0 14px; color:#b8e3db; font-size:42px; text-shadow:0 0 28px rgba(155,234,225,.55); }
.modal h2 { font-size: clamp(28px, 7vw, 61px); }
.lead { color:#f1e7c8; font-size:clamp(17px, 3vw, 23px); font-style:italic; }
.body-copy { max-width:500px; margin:0 auto 25px; color:#aebeba; font-size:14px; line-height:1.7; }
.control-line { display:flex; flex-wrap:wrap; justify-content:center; gap:9px 19px; margin:20px 0; color:#b7c5c0; font:10px ui-monospace, monospace; text-transform:uppercase; }
kbd { border:1px solid rgba(255,255,255,.2); padding:2px 5px; border-radius:3px; background:rgba(255,255,255,.05); }
.primary-btn {
  display:block;
  width:min(330px, 100%);
  margin:24px auto 12px;
  padding:14px 20px;
  border:1px solid #b9ded4;
  color:#f7f1d9;
  background:rgba(124,190,182,.11);
  letter-spacing:.1em;
  cursor:pointer;
}
.primary-btn:hover { background:rgba(124,190,182,.22); }
.modal small { color:#718582; font:9px ui-monospace,monospace; text-transform:uppercase; }
.close-btn { position:absolute; right:14px; top:14px; padding:0; font-size:24px; }
.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; text-align:left; }
.help-grid article { border-top:1px solid var(--line); padding-top:10px; }
.help-grid b { color:#e9ddb7; font-weight:400; letter-spacing:.12em; text-transform:uppercase; }
.help-grid p { color:#9eb0ac; font-size:13px; line-height:1.5; }
.tip { margin:24px 0 0; padding:13px; border:1px solid rgba(228,210,153,.18); color:#c8bea2; font-style:italic; }
.end-card a { color:#9fcac5; font-size:12px; }
.end-stats { display:flex; justify-content:center; gap:20px; color:#b7c8c3; font:11px ui-monospace,monospace; text-transform:uppercase; }

@media (max-width: 720px) {
  #game-shell { padding: 42px 0 20px; }
  .topbar { padding-inline:13px; }
  .stage-wrap { border-radius: 18% 18% 0 0 / 8% 8% 0 0; }
  .element-rack { width: calc(100% - 16px); bottom: 8px; grid-template-columns:repeat(4,1fr); gap:3px; }
  .element { display:block; min-width:0; text-align:center; padding:7px 2px; }
  .element kbd, .element small { display:none; }
  .element b { font-size:11px; }
  .objectives { width:44vw; right:10px; top:10px; }
  .objectives li { font-size:8px; }
  .meters { width:33vw; left:10px; top:10px; }
  footer { padding-inline:12px; }
  footer span:first-child { display:none; }
  .help-grid { grid-template-columns:1fr; gap:8px; }
  .modal { padding:34px 23px; }
  .touch-move { position:absolute; left:10px; bottom:62px; display:flex; gap:5px; pointer-events:auto; }
  .touch-move button { width:38px; height:34px; border:1px solid rgba(255,255,255,.18); background:rgba(4,10,14,.62); color:#d7e6df; border-radius:4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* v3 — game-feel layer */
.stage-wrap { box-shadow:0 42px 110px rgba(0,0,0,.72),0 0 0 7px rgba(132,159,151,.035),inset 0 0 80px rgba(160,220,218,.1); isolation:isolate; }
.cast-readout {
  position:absolute; left:50%; bottom:76px; transform:translateX(-50%);
  display:grid; grid-template-columns:auto auto; gap:2px 8px; min-width:180px;
  padding:7px 12px 6px; border:1px solid rgba(255,255,255,.12); border-radius:99px;
  background:rgba(4,11,15,.62); backdrop-filter:blur(8px); color:#dfeae5;
  font:9px ui-monospace,Consolas,monospace; text-transform:uppercase; letter-spacing:.1em; text-align:center;
}
.cast-readout b { color:#f1db9d; font-weight:500; }
.cast-readout span { color:#8fa6a2; }
.cast-readout i { grid-column:1/-1; display:block; width:0; height:2px; border-radius:4px; background:#dbeecf; box-shadow:0 0 8px currentColor; transition:width .08s; }
.cast-readout.focus b { color:#fff0bd; }
.cast-readout.focus { border-color:rgba(239,219,156,.34); }
.objectives li.current { padding:8px 10px; margin-right:-10px; border-right:2px solid #cbd8ad; background:linear-gradient(90deg,transparent,rgba(213,228,192,.07)); text-shadow:0 2px 8px #000; }
.element { overflow:hidden; position:relative; }
.element::after { content:''; position:absolute; inset:auto 14% 0; height:2px; opacity:.2; background:currentColor; box-shadow:0 0 12px currentColor; }
.element[data-element="water"] { color:var(--water); }
.element[data-element="fire"] { color:var(--fire); }
.element[data-element="air"] { color:var(--air); }
.element[data-element="earth"] { color:var(--earth); }
.element.active { border-color:currentColor; transform:translateY(-4px); }
.element.active::after { opacity:.9; }
.element b { color:var(--ink); }
@media (max-width:720px){.cast-readout{display:none;}}