/* Shared look of the /play mini-games (same palette as /play/offset and the booth signs). */
:root {
  --night: #140c24; --navy: #16264A; --purple: #623e98; --lilac: #c9b6ea; --amber: #f3b229; --green: #18a058; --red: #c03030;
  --ink: #1b1426; --muted: #5f566e; --line: #e2daee; --soft: #f5f2fa;
  --display: 'Prompt', 'IBM Plex Sans Thai', sans-serif; --body: 'IBM Plex Sans Thai', 'Leelawadee UI', sans-serif; --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; margin: 0 }
html { -webkit-text-size-adjust: 100% }
body { font-family: var(--body); color: var(--ink); background: var(--soft); min-height: 100svh }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent }
.wrap { max-width: 480px; margin: 0 auto; padding: 14px 16px 28px; padding-top: max(14px, env(safe-area-inset-top)) }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.bar img { height: 30px; display: block }
.bar nav { display: flex; gap: 6px }
.chip { font: 600 13px/1 var(--display); color: var(--purple); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 8px 12px; text-decoration: none }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-top: 14px; box-shadow: 0 6px 24px rgba(98,62,152,.08) }
.kicker { font: 600 12px/1.2 var(--display); letter-spacing: .06em; color: var(--purple); text-transform: uppercase }
h1 { font: 700 26px/1.2 var(--display); margin-top: 6px }
h1 em, h2 em { font-style: normal; color: var(--purple) }
h2 { font: 700 19px/1.3 var(--display) }
p { font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: 8px }
p b { color: var(--ink) }
.btn { display: block; width: 100%; border: 0; border-radius: 14px; padding: 15px; font: 700 17px/1.2 var(--display); background: var(--purple); color: #fff; margin-top: 16px; text-align: center; text-decoration: none }
.btn:active { transform: translateY(1px) }
.btn.ghost { background: #fff; color: var(--purple); border: 1.5px solid var(--purple) }
.btn.dark { background: var(--navy) }
.btn:disabled { opacity: .45 }
.hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px }
.hud div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: center }
.hud small { display: block; font-size: 11.5px; color: var(--muted) }
.hud b { font: 700 18px/1.3 var(--mono) }
.opts { display: grid; gap: 8px; margin-top: 12px }
.opt { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; font: 600 15px/1.4 var(--body); color: var(--ink) }
.opt.right { border-color: var(--green); background: #e8f8ef } .opt.wrong { border-color: var(--red); background: #fdeeee }
.opt:disabled { cursor: default }
.why { margin-top: 12px; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; background: var(--soft); color: var(--ink) }
.why.good { background: #e8f8ef } .why.bad { background: #fdeeee }
.why b { font-family: var(--display) }
.big { font: 700 44px/1.1 var(--mono); color: var(--purple); margin-top: 8px }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px }
.stats div { background: var(--soft); border-radius: 12px; padding: 10px 12px }
.stats small { display: block; font-size: 12px; color: var(--muted) }
.stats b { font: 700 18px/1.3 var(--mono) }
.learn { margin-top: 14px; background: var(--navy); color: #eef1f9; border-radius: 16px; padding: 16px }
.learn h2 { color: #fff } .learn p { color: #c3cbe2 } .learn p b { color: #fff }
.learn .btn { background: #fff; color: var(--navy) }
.more { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px }
.more a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--ink); font: 600 13.5px/1.35 var(--display) }
.more a small { display: block; font: 400 12px/1.4 var(--body); color: var(--muted); margin-top: 2px }
.foot { margin-top: 18px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center }
.foot a { color: var(--purple) }
[hidden] { display: none !important }