/* Bangers (SIL OFL 1.1, Vernon Adams), self-hosted like Be Vietnam Pro. */
@font-face{font-family:"Bangers";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bangers-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Bangers";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bangers-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout: a single comic page column. One big panel per moment, choices below as cards, the result as a narration box.
   Single bright comic-paper look on purpose (same in light and dark). */
:root{
  --paper:#FFF8EC; --ink:#22160F; --panel:#FFFFFF; --muted:#6A5A4E;
  --sun:#FFC93C; --jade:#0E8A6A; --coral:#F2545B; --sky:#4CC3F0; --sign:#1450A3;
  --display:"Bangers", "Comic Sans MS", "Trebuchet MS", sans-serif;
  --sans:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  background-image:radial-gradient(rgba(34,22,15,.07) 1px,transparent 1.2px);background-size:9px 9px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px;margin:0}
.wrap{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.top b{color:var(--jade)}
.pg{font-family:var(--display);font-size:20px;letter-spacing:.04em;font-weight:400}
.strip{display:flex;gap:3px}
.strip i{flex:1;height:7px;border-radius:2px;background:rgba(34,22,15,.15)}
.strip i.g{background:var(--jade)} .strip i.o{background:var(--sun)} .strip i.b{background:var(--coral)} .strip i.now{background:var(--ink)}

/* panel */
.panel{position:relative;border:4px solid var(--ink);border-radius:6px;background:var(--panel);box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.panel svg{display:block;width:100%;height:auto}
.cap{position:absolute;left:10px;top:10px;display:flex;gap:6px;align-items:stretch;max-width:70%}
.plate{background:var(--sign);color:#fff;border-radius:4px;padding:3px 9px;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--sign);font-size:12px;line-height:1.2;display:flex;flex-direction:column;justify-content:center}
.plate b{font-size:13px}
.clock{white-space:nowrap;background:var(--sun);border:2.5px solid var(--ink);font-family:var(--display);font-size:20px;padding:2px 8px;display:flex;align-items:center;letter-spacing:.03em}
.bub{position:absolute;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:7px 12px;max-width:52%;font-size:14px;line-height:1.3;box-shadow:2px 2px 0 rgba(0,0,0,.15)}
.bub .vi{display:block;font-weight:800;font-size:15px}
.bub .en{display:block;font-style:italic;color:var(--muted);font-size:12.5px}
.bub::after{content:"";position:absolute;bottom:-15px;width:18px;height:18px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.bub.tl::after{left:22px;transform:skewX(35deg) rotate(45deg) scale(.8,1.1)}
.bub.tr::after{right:22px;transform:skewX(-35deg) rotate(45deg) scale(1.1,.8)}
.speak{border:2px solid var(--jade);background:#fff;color:var(--jade);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:800;margin-left:4px;vertical-align:middle}

/* question */
.ask{background:var(--ink);color:#fff;border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.ask .sit{font-size:15.5px}
.ask .q{font-family:var(--display);font-size:24px;letter-spacing:.03em;color:var(--sun);font-weight:400}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{text-align:left;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:11px 14px;display:flex;gap:12px;align-items:center;box-shadow:3px 3px 0 var(--ink);transition:transform .12s}
.opt:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.opt .k{flex:0 0 30px;height:30px;border-radius:50%;background:var(--sun);border:2.5px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-size:18px}
.opt:disabled{cursor:default;opacity:.5}
.opt.picked{opacity:1}
.opt.picked.g{background:#D6F5EA} .opt.picked.o{background:#FFF0C2} .opt.picked.b{background:#FFDCDC}
.opt.best:not(.picked){opacity:1;border-style:dashed;border-color:var(--jade)}
.narr{background:#FFF0C2;border:3px solid var(--ink);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:4px 4px 0 var(--ink)}
.narr.g{background:#D6F5EA} .narr.b{background:#FFDCDC}
.narr h3{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.03em}
.narr .small{font-size:14px;color:var(--muted)}
.say{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-top:2px dashed rgba(34,22,15,.3);padding-top:8px}
.say .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted)}
.say .vi{font-weight:800;font-size:17px}
.say .en{font-style:italic;color:var(--muted);font-size:14px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cta{font-family:var(--display);font-size:22px;letter-spacing:.04em;background:var(--coral);color:#fff;border:3px solid var(--ink);border-radius:12px;padding:8px 20px;box-shadow:3px 3px 0 var(--ink)}
.ghost{background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:8px 14px;font-weight:700}

/* cover + end */
.title{font-family:var(--display);font-weight:400;font-size:clamp(46px,13vw,76px);line-height:.9;letter-spacing:.02em;color:var(--coral);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink)}
.title span{color:var(--sun)}
.lead{font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--ink);border-radius:999px;padding:2px 12px;font-size:13px;font-weight:700;background:#fff}
.card{background:#fff;border:3px solid var(--ink);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:4px 4px 0 var(--ink)}
.card h3{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.03em}
.score{display:flex;align-items:baseline;gap:8px}
.score b{font-family:var(--display);font-size:72px;line-height:1;color:var(--coral);-webkit-text-stroke:2px var(--ink);font-weight:400}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:minmax(0,9.5em) 1fr 3em;gap:10px;align-items:center;font-size:14px}
.bar .t{height:12px;border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:#fff}
.bar .t i{display:block;height:100%;background:var(--jade)}
.bar span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.phrases{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.phrases div{border:2px solid var(--ink);border-radius:10px;padding:7px 10px;min-width:0;display:flex;flex-direction:column}
.phrases .vi{font-weight:800}
.phrases .en{font-style:italic;color:var(--muted);font-size:13px}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
legend,label{font-weight:800;font-size:15px}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{border:2.5px solid var(--ink);background:#fff;border-radius:999px;padding:4px 14px;font-weight:700}
.pick button[aria-pressed="true"]{background:var(--jade);color:#fff}
textarea{font:inherit;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:10px;padding:10px;width:100%;min-height:90px;resize:vertical}
.out{white-space:pre-wrap;background:var(--paper);border:2px dashed var(--ink);border-radius:10px;padding:10px;font-size:14px;user-select:all}
.links{display:flex;flex-direction:column;gap:6px}
.links a{color:var(--jade);font-weight:800}
.small{font-size:14px;color:var(--muted)}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .drive{animation:drive 7s linear infinite}
  .drive2{animation:drive 5s linear infinite;animation-delay:-2.5s}
  @keyframes drive{from{transform:translateX(0)}to{transform:translateX(-600px)}}
  .rainy{animation:rain .5s linear infinite}
  @keyframes rain{from{transform:translateY(-30px)}to{transform:translateY(0)}}
  .steam{animation:steam 2.4s ease-in-out infinite}
  @keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-14px)}}
  .sway{animation:sway 3s ease-in-out infinite;transform-box:fill-box;transform-origin:top center}
  @keyframes sway{50%{transform:rotate(6deg)}}
  .pop{animation:pop .35s cubic-bezier(.3,1.6,.6,1) both;transform-box:fill-box;transform-origin:center}
  @keyframes pop{from{transform:scale(.2)}to{transform:scale(1)}}
  .bob{animation:bob 2.2s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(-3px)}}
}

/* site bar */
.sitebar{max-width:620px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;font-weight:800}
.sitebar a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.sitebar a b{color:var(--jade)}
.sitebar .alt{font-size:14px;color:var(--jade);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;background:#fff}
.sitefoot{max-width:620px;margin:28px auto 0;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.sitefoot a{color:var(--jade);font-weight:700}