:root {
  --bg: #120908;
  --ink: #f4e9dc;
  --muted: #bda99a;
  --red: #d93a26;
  --red-hot: #ff6547;
  --gold: #d7a448;
  --line: rgba(239, 196, 140, 0.18);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(190, 48, 24, 0.3), transparent 38rem),
    radial-gradient(circle at 50% 120%, rgba(217, 58, 38, 0.18), transparent 34rem),
    linear-gradient(180deg, #160a08, #090505 78%);
  overflow-x: hidden;
}
button { font: inherit; }

.embers::before,
.embers::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    radial-gradient(circle, rgba(255, 127, 63, .8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 205, 113, .55) 0 1px, transparent 1.5px);
  background-size: 107px 113px, 151px 163px;
  animation: drift 14s linear infinite;
}
.embers::after { animation-duration: 23s; transform: scale(.8); opacity: .16; }
@keyframes drift { to { background-position: 0 -260px, 0 -420px; } }

.game-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 24px;
  position: relative;
  z-index: 1;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 8px 4px 13px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { color: var(--red-hot); font-size: 35px; line-height: 1; transform: rotate(180deg); }
.brand h1 { margin: 0; font-family: Georgia, serif; letter-spacing: .08em; font-size: clamp(20px, 3vw, 31px); }
.brand p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.stats { display: flex; align-items: center; gap: 22px; }
.stats div { min-width: 68px; text-align: right; }
.stats .pot-stat { position: relative; }
.stats .pot-stat::before,
.stats .pot-stat::after { content:""; position:absolute; top:7px; width:1px; height:31px; background:var(--line); }
.stats .pot-stat::before { left:-12px; }
.stats .pot-stat::after { right:-12px; }
.stats span, .eyebrow { display:block; font-size:9px; letter-spacing:.18em; color:var(--muted); font-weight:800; }
.stats strong { display:block; margin-top:2px; color:var(--gold); font-size:21px; }

.dealer-strip {
  min-height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.devil-avatar { font-size: 29px; filter: drop-shadow(0 0 14px rgba(255,78,47,.45)); }
.dealer-strip strong { color: var(--red-hot); letter-spacing:.08em; font-size:10px; white-space:nowrap; }
.dealer-line { font-family: Georgia, serif; font-style: italic; transition: opacity .15s ease; }

.question-copy { text-align:center; max-width:820px; margin:9px auto 2px; min-height:72px; }
.question-copy h2 { margin:7px 0 0; font:700 clamp(21px,3vw,32px)/1.12 Georgia,serif; }

.table {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(235px, 1fr) minmax(280px, .88fr) minmax(235px, 1fr);
  gap: clamp(14px, 3vw, 38px);
  align-items: center;
  padding: 12px 0 8px;
}

.choice-card {
  position: relative;
  min-height: 344px;
  border: 1px solid rgba(231, 192, 147, .28);
  border-radius: 24px;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(105, 35, 25, .2), transparent 45%),
    linear-gradient(180deg, #26120f, #180c0a);
  box-shadow: 0 25px 60px rgba(0,0,0,.34), inset 0 0 0 5px rgba(255,255,255,.015);
  cursor: pointer;
  padding: 44px 28px;
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease, filter .17s ease, opacity .17s ease;
}
.choice-card:hover:not(:disabled) { transform: translateY(-7px) rotate(-.5deg); border-color:rgba(255,121,79,.7); box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 34px rgba(206,53,33,.14); }
.choice-card.right:hover:not(:disabled) { transform:translateY(-7px) rotate(.5deg); }
.choice-card:disabled { cursor:default; }
.choice-card.dimmed { opacity:.38; filter:saturate(.45) brightness(.62); }
.choice-card.selected { transform:translateY(-4px) scale(1.015); border-color:var(--red-hot); box-shadow:0 0 0 1px rgba(255,101,71,.4),0 0 42px rgba(217,58,38,.25); }
.choice-card.correct { border-color:rgba(215,164,72,.95); box-shadow:0 0 0 1px rgba(215,164,72,.25),0 0 38px rgba(215,164,72,.24); filter:none; opacity:1; }
.choice-card.wrong { animation: cardWrong .35s ease both; border-color:rgba(255,72,52,.95); box-shadow:0 0 46px rgba(255,53,38,.32); opacity:1; filter:none; }
@keyframes cardWrong { 25%{transform:translateX(-8px) rotate(-1deg)} 55%{transform:translateX(7px) rotate(1deg)} 100%{transform:translateX(0)} }

.card-corner { position:absolute; top:18px; left:18px; width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--red-hot); font-family:Georgia,serif; font-weight:900; }
.choice-text { display:grid; min-height:190px; place-items:center; font:700 clamp(23px,3vw,36px)/1.08 Georgia,serif; }
.choose { display:block; margin-top:18px; color:var(--muted); font-size:9px; letter-spacing:.18em; font-weight:900; opacity:.72; }

.danger-stage { text-align:center; position:relative; min-width:0; }
.contraption-label { min-height:19px; color:var(--red-hot); font-size:10px; font-weight:900; letter-spacing:.14em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contraption {
  position:relative;
  height:305px;
  margin:7px auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 60%, rgba(255,75,42,.13), transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.32));
  border:1px dashed rgba(255,255,255,.075);
  box-shadow: inset 0 -60px 80px rgba(0,0,0,.18);
}
.contraption.tense { animation: stageTense .22s ease 2; }
@keyframes stageTense { 50%{filter:brightness(1.13)} }
.victim {
  width:104px;
  height:185px;
  position:relative;
  z-index:3;
  transform-origin:50% 95%;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.34));
  transition: transform .2s ease;
}
.victim.nervous { animation:nervous .22s ease-in-out infinite alternate; }
@keyframes nervous { to { transform:translateX(2px) rotate(.7deg); } }
.victim-head { position:absolute; width:58px; height:58px; left:23px; top:4px; border-radius:16px 16px 20px 20px; background:#e6c39b; border:5px solid #3a2720; }
.victim-head::before { content:"••"; position:absolute; left:13px; top:12px; color:#241410; letter-spacing:7px; font-weight:900; }
.victim-head::after { content:"﹏"; position:absolute; left:16px; top:28px; color:#7e3227; font-weight:900; }
.victim-body { position:absolute; width:68px; height:82px; top:63px; left:18px; border-radius:18px 18px 10px 10px; background:#4c80a8; border:5px solid #263d50; }
.victim-arm,.victim-leg { position:absolute; width:18px; border-radius:999px; background:#4c80a8; border:4px solid #263d50; transform-origin:50% 8px; }
.victim-arm { height:67px; top:72px; }
.left-arm { left:6px; transform:rotate(13deg); }
.right-arm { right:6px; transform:rotate(-13deg); }
.victim-leg { height:62px; top:135px; background:#495266; border-color:#282d38; }
.left-leg { left:27px; transform:rotate(3deg); }
.right-leg { right:27px; transform:rotate(-3deg); }
.victim-name { font:700 14px Georgia,serif; color:var(--muted); }

.hazard { position:absolute; z-index:5; pointer-events:none; }
.hazard-top { top:0; left:0; right:0; }
.hazard-bottom { bottom:0; left:0; right:0; }
.impact-flash { position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0; background:white; }
.contraption.dead .impact-flash { animation:impactFlash .18s .18s ease-out; }
@keyframes impactFlash { 35%{opacity:.9} 100%{opacity:0} }

.contraption.guillotine .hazard-top::before { content:""; position:absolute; width:160px; height:58px; left:50%; top:-66px; transform:translateX(-50%) skewX(-8deg); background:linear-gradient(145deg,#d6d6ce,#777); border-bottom:7px solid #430f0b; }
.contraption.guillotine.armed .hazard-top::before { top:19px; transition:top 1.55s cubic-bezier(.6,.02,.8,.18); }
.contraption.guillotine.dead .hazard-top::before { top:132px; transition:top .18s cubic-bezier(.7,0,1,1); }
.contraption.guillotine::after { content:""; position:absolute; width:190px; height:265px; border-left:12px solid #5f3420; border-right:12px solid #5f3420; border-top:12px solid #5f3420; top:10px; z-index:1; }

.contraption.trapdoor .hazard-bottom::before { content:""; position:absolute; height:34px; width:78%; left:11%; bottom:14px; background:#5a3822; border:5px solid #281710; transform-origin:0 50%; }
.contraption.trapdoor.dead .hazard-bottom::before { transform:rotate(62deg); transition:transform .25s ease-in; }
.contraption.trapdoor.dead .victim { animation:fall 1.1s ease-in forwards; }

.contraption.lightning .hazard-top::before { content:"⚡"; font-size:0; position:absolute; left:50%; transform:translateX(-50%); top:0; }
.contraption.lightning.dead .hazard-top::before { font-size:155px; animation:zap .6s steps(2) 2; }
.contraption.lightning.dead .victim { animation:electrocute .12s linear 8; filter:grayscale(1) brightness(2); }

.contraption.blackhole .hazard-top::before { content:""; width:124px; height:124px; position:absolute; border-radius:50%; left:50%; top:13px; transform:translateX(-50%); background:radial-gradient(circle,#000 0 32%,#4c2066 38%,#d55931 52%,transparent 66%); box-shadow:0 0 35px #7a2f57; }
.contraption.blackhole.dead .victim { animation:swallowed 1.25s ease-in forwards; }

.contraption.cannon .hazard-bottom::before { content:""; position:absolute; width:180px; height:76px; bottom:38px; left:-38px; background:#3c4146; border:7px solid #1f2225; border-radius:14px 42px 42px 14px; transform:rotate(-8deg); }
.contraption.cannon.dead .victim { animation:cannonball 1.05s cubic-bezier(.2,.8,.3,1) forwards; }

.contraption.anvil .hazard-top::before { content:"ANVIL"; position:absolute; top:-72px; left:50%; transform:translateX(-50%); background:#4a4b4d; color:#202020; font:900 18px Georgia,serif; padding:20px 31px 11px; clip-path:polygon(12% 0,88% 0,76% 48%,100% 70%,94% 100%,6% 100%,0 70%,24% 48%); }
.contraption.anvil.dead .hazard-top::before { top:135px; transition:top .22s cubic-bezier(.8,0,1,1); }
.contraption.anvil.dead .victim { animation:squash .5s .18s forwards; }

.contraption.poison .hazard-bottom::before { content:"☠"; position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:66px; height:72px; display:grid; place-items:center; border-radius:9px 9px 18px 18px; background:linear-gradient(#58226b,#2b0f35); border:5px solid #161018; color:#eacb7d; font-size:28px; }
.contraption.poison.dead .victim { animation:poisoned 1.05s ease-in forwards; }

.contraption.crossbow .hazard-bottom::before { content:"➵"; position:absolute; right:-95px; bottom:102px; font-size:105px; transform:rotate(180deg); color:#d7c49c; text-shadow:0 0 7px #000; }
.contraption.crossbow.dead .hazard-bottom::before { right:89px; transition:right .19s cubic-bezier(.9,0,1,1); }
.contraption.crossbow.dead .victim { animation:hit 1s .18s ease-out forwards; }

.contraption.safe .victim { animation:relieved .55s ease-out; }

@keyframes fall { to { transform:translateY(380px) rotate(28deg); } }
@keyframes zap { 0%,40%,100%{opacity:0} 20%,60%{opacity:1} }
@keyframes electrocute { 50%{transform:translateX(7px) rotate(2deg)} }
@keyframes swallowed { to { transform:translateY(-90px) scale(.02) rotate(740deg); opacity:.1; } }
@keyframes cannonball { to { transform:translate(560px,-330px) rotate(980deg) scale(.35); } }
@keyframes squash { to { transform:scaleY(.12) translateY(76px); } }
@keyframes poisoned { 25%{transform:rotate(9deg)} 60%{filter:hue-rotate(80deg); transform:rotate(-14deg) translateY(7px)} 100%{filter:hue-rotate(110deg); transform:rotate(78deg) translate(48px,45px)} }
@keyframes hit { to { transform:translateX(-45px) rotate(-68deg); } }
@keyframes relieved { 40%{transform:translateY(-8px)} 70%{transform:rotate(-3deg)} }

.verdict {
  position:absolute;
  z-index:15;
  left:50%;
  top:50%;
  width:min(310px,92%);
  transform:translate(-50%,-44%);
  padding:17px 16px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(16,7,6,.92);
  box-shadow:0 18px 55px rgba(0,0,0,.58),0 0 35px rgba(217,58,38,.13);
  backdrop-filter:blur(10px);
  animation:verdictIn .2s ease-out;
}
.verdict.hidden { display:none; }
.verdict-kicker { display:block; color:var(--red-hot); font-size:9px; letter-spacing:.17em; font-weight:900; }
.verdict strong { display:block; margin-top:5px; font:800 23px/1.05 Georgia,serif; }
.verdict-copy { display:block; margin-top:6px; color:var(--muted); font:italic 13px/1.3 Georgia,serif; }
.verdict-actions { display:flex; justify-content:center; gap:7px; margin-top:12px; }
.verdict-actions button,
.cheats button {
  border:1px solid var(--line);
  color:var(--ink);
  background:#28110e;
  padding:9px 12px;
  border-radius:9px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
}
.verdict-actions button.primary { background:var(--red); border-color:var(--red-hot); }
.verdict-actions button:hover,.cheats button:hover:not(:disabled) { filter:brightness(1.18); }
@keyframes verdictIn { from { opacity:0; transform:translate(-50%,-38%) scale(.94) } }

.utility-row { display:flex; align-items:center; justify-content:center; gap:16px; min-height:43px; margin-top:4px; }
.cheats { display:flex; justify-content:center; gap:6px; }
.cheats small { color:var(--gold); margin-left:4px; }
.cheats button:disabled { opacity:.3; cursor:not-allowed; }
.cheats button.active { border-color:var(--gold); color:var(--gold); box-shadow:0 0 18px rgba(215,164,72,.1); }
.text-button { border:0; background:none; color:var(--muted); cursor:pointer; font-size:10px; font-weight:800; letter-spacing:.08em; }
.text-button:hover { color:var(--red-hot); }
footer { text-align:center; padding:8px 4px 0; color:rgba(189,169,154,.72); font-size:11px; }
.peeked { box-shadow:0 0 0 2px var(--gold),0 0 42px rgba(215,164,72,.5) !important; transform:translateY(-5px) scale(1.01) !important; }

body.reveal-wrong::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 55%,rgba(203,25,13,.12),transparent 45%);
  animation:redPulse .8s ease-out;
}
@keyframes redPulse { 35%{background:radial-gradient(circle at 50% 55%,rgba(255,42,20,.23),transparent 48%)} }

@media (max-width: 820px) {
  .topbar { align-items:flex-start; flex-direction:column; gap:9px; }
  .stats { width:100%; justify-content:space-between; }
  .stats div { flex:1; text-align:center; }
  .question-copy { min-height:64px; }
  .table { grid-template-columns:1fr 1fr; min-height:0; padding-top:6px; gap:11px; }
  .danger-stage { grid-column:1 / -1; grid-row:1; }
  .contraption { height:250px; max-width:350px; }
  .choice-card { min-height:225px; padding:38px 18px 20px; }
  .choice-text { min-height:125px; font-size:clamp(20px,6vw,30px); }
  .dealer-strip { justify-content:flex-start; overflow:hidden; }
  .dealer-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

@media (max-width: 520px) {
  .game-shell { width:min(100% - 18px,1180px); padding-top:7px; }
  .brand p { display:none; }
  .stats strong { font-size:18px; }
  .stats span { font-size:8px; }
  .dealer-strip { min-height:42px; padding-top:6px; }
  .devil-avatar { font-size:25px; }
  .dealer-strip strong { display:none; }
  .question-copy { margin-top:4px; }
  .table { gap:8px; }
  .contraption { height:230px; }
  .choice-card { min-height:195px; border-radius:16px; padding-inline:12px; }
  .choice-text { min-height:105px; font-size:clamp(18px,6vw,27px); }
  .utility-row { flex-direction:column; gap:5px; }
  .cheats { width:100%; }
  .cheats button { flex:1; padding-inline:6px; font-size:9px; }
  .verdict { width:min(300px,94%); }
}