/* layout: a single phone-width column, like the approved app mockup; cream hub, white reading page */
:root{
  --paper:#f9f4ee; --white:#ffffff; --sand:#efe5d8; --hair:#e8ddd0;
  --ink:#492c26; --text:#3a2a25; --mute:#7d6a62; --faint:#b8a89f;
  --rust:#79381a; --gold:#e3b266; --green:#22a84f;
  --f-ui:'Noto Sans Thai','IBM Plex Sans Thai','Leelawadee UI',system-ui,sans-serif;
  --f-body:'Sarabun','Noto Sans Thai','Leelawadee UI',sans-serif;
  --f-hand:'Charm','Sarabun',serif;
  --read-size:1.125rem;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-ui);font-size:1rem;line-height:1.65}
body.is-reader{background:var(--white)}
img{max-width:100%;display:block}
a{color:var(--rust);text-underline-offset:.2em}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:6px}
h1,h2{margin:0;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--white);padding:.5rem 1rem;z-index:10}
.view-hub{background:var(--paper)}
.view-ep{background:var(--white)}
.wrap{max-width:30rem;margin-inline:auto;padding-inline:1.25rem}
.wrap-read{max-width:34rem}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:3.25rem;padding:.7rem 1.1rem;border-radius:.875rem;font:700 1rem/1.4 var(--f-ui);text-decoration:none;text-align:center;border:2px solid transparent;cursor:pointer}
.btn-rust{background:var(--rust);color:var(--white)}
.btn-rust:hover{background:#8a4320}
.btn-line{background:var(--green);color:var(--white)}
.btn-line:hover{background:#1e9a48}
.btn-out{background:var(--white);border-color:var(--ink);color:var(--ink)}
a.btn-out:hover{background:var(--paper)}
.stack{display:grid;gap:.75rem}

/* hub */
.hub{display:grid;gap:1.1rem;padding-block:1.75rem 1rem}
.hub-head{display:grid;gap:.15rem}
.hub-head h1{font:700 1.5rem/1.4 var(--f-ui);color:var(--ink)}
.hub-sub{font:400 1rem/1.6 var(--f-body);color:var(--mute)}
.clock{display:grid;gap:.1rem;padding:1.1rem 1.25rem 1.15rem;background:var(--ink);border-radius:.875rem}
.clock-label{font-size:.9375rem;color:#d9c9bb}
.clock-digits{font:700 clamp(2rem,10vw,2.6rem)/1.25 var(--f-ui);font-variant-numeric:tabular-nums;color:var(--white);letter-spacing:.01em}
.clock-digits small{font-size:.45em;font-weight:500;color:#d9c9bb;margin-inline:.35em .6em}
.clock-when{font-size:.875rem;color:var(--gold)}
.clock-done{font:700 1.35rem/1.4 var(--f-ui);color:var(--white)}
.clock-done a{color:var(--gold)}
.eps{list-style:none;margin:0;padding:0}
.ep-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.1rem;padding:.55rem 0;border-bottom:1px solid var(--hair);color:var(--text);text-decoration:none}
.ep-name{min-width:0;font-size:1rem}
.ep-name b{font-weight:500;margin-right:.6rem}
a.ep-row:hover .ep-name{color:var(--rust)}
.ep-state{flex:none;font-size:.8125rem;color:var(--rust);font-weight:600;white-space:nowrap}
.ep-row.is-read .ep-state{color:var(--mute);font-weight:400}
.ep-row.is-reading .ep-state{color:var(--rust);font-weight:700}
.ep-row.is-locked{color:var(--faint)}
.ep-row.is-locked .ep-state{display:flex;align-items:center;gap:.5rem;color:var(--faint);font-weight:400}
.lock{width:1.05rem;height:1.05rem;fill:var(--faint)}
.prize{text-align:center;font-size:.875rem;color:var(--mute)}
.block{padding-block:1.75rem;border-top:1px solid var(--hair)}
.block>h2{font:700 1.125rem/1.4 var(--f-ui);color:var(--ink);margin-bottom:.9rem}
.block>.sub{color:var(--mute);margin:-.6rem 0 .9rem}
.rules{margin:0;padding:0 0 0 1.25rem;display:grid;gap:.5rem;font-family:var(--f-body);font-size:1.0625rem;line-height:1.75}
.rules li::marker{color:var(--rust);font-family:var(--f-ui);font-weight:700}
.fine{margin-top:.9rem;font-size:.875rem;color:var(--mute)}
.faq{display:grid;gap:1rem;margin:0}
.faq dt{font-weight:700;color:var(--ink)}
.faq dd{margin:.15rem 0 0;font-family:var(--f-body);font-size:1.0625rem;line-height:1.75}
.cup{display:grid;gap:.3rem;margin:0 0 1rem;padding:0;list-style:none;font-family:var(--f-body);font-size:1.0625rem}
.cup li{display:flex;gap:.8rem;align-items:baseline}
.cup li span{flex:0 0 4.2rem;font:600 .8125rem/1.6 var(--f-ui);color:var(--rust)}
.foot{padding-block:1.5rem 2.5rem;border-top:1px solid var(--hair);display:grid;gap:.2rem;font-size:.875rem;color:var(--mute)}
.foot b{font:700 1.0625rem/1.4 var(--f-ui);color:var(--ink)}

/* reading page */
.reader{padding-block:.75rem 2.5rem}
.reader-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:1rem}
.back{font-size:.9375rem;font-weight:500;color:var(--mute);text-decoration:none}
.back:hover{color:var(--rust)}
.sizer{display:flex;gap:.35rem}
.sizer button{min-width:2.75rem;height:2.75rem;border-radius:.75rem;border:1.5px solid var(--hair);background:var(--white);color:var(--mute);font:600 .9375rem/1 var(--f-ui);cursor:pointer}
.sizer button:hover{border-color:var(--ink);color:var(--ink)}
.sizer button:last-child{font-size:1.1rem}
.ep-head{display:grid;gap:.1rem;padding-bottom:1.75rem}
.ep-no{font-size:.9375rem;color:var(--mute)}
.ep-head h1{font:700 1.625rem/1.4 var(--f-ui);color:var(--ink)}
.ep-date{font-size:.8125rem;color:var(--faint);margin-top:.2rem}
.story{display:grid;gap:1.3em;font-family:var(--f-body);font-size:var(--read-size);line-height:1.95;color:var(--text)}
.story p{text-wrap:pretty}
.story strong{font-weight:700;color:var(--ink)}
.chat{display:grid;gap:.4em;justify-items:start;margin-top:-.7em}
.chat.out{justify-items:end;margin-top:0}
.bubble{font-family:var(--f-ui);font-size:.92em;line-height:1.6;background:var(--sand);color:var(--text);padding:.55em .95em;border-radius:1.1em 1.1em 1.1em .3em;max-width:88%}
.chat.out .bubble{border-radius:1.1em 1.1em .3em 1.1em;background:#d7f0dc;color:#1f3a25}
.read{font:500 .78em/1.4 var(--f-ui);color:var(--mute);margin-top:-.8em}
.note{margin:0;padding-left:1.25em;font-family:var(--f-hand);font-size:1.22em;line-height:1.75;color:var(--rust)}
.fin{font:700 1rem/1.4 var(--f-ui);color:var(--rust);text-align:center;padding-block:2.5rem 2rem}
.ep-photo{margin:0 0 1.75rem}
.ep-photo img{width:100%;height:auto;border-radius:.875rem;background:var(--sand)}
.after{display:grid;gap:.75rem}
.qcard{display:grid;gap:.5rem;padding:1.1rem 1.15rem 1.2rem;background:var(--sand);border-radius:.875rem}
.q-label{font-size:.8125rem;font-weight:700;color:var(--rust)}
.q-text{font:700 1.1875rem/1.5 var(--f-ui);color:var(--ink)}
.q-body{font-size:.9375rem;color:var(--text)}
.q-fine{font-size:.8125rem;color:var(--mute)}
.qcard .btn{margin-top:.35rem}
.next-box{display:grid;gap:.1rem;justify-items:center;padding:.8rem 1rem;border:2px solid var(--ink);border-radius:.875rem;background:var(--white);text-align:center}
.next-title{font:700 1rem/1.4 var(--f-ui);color:var(--ink)}
.next-cd{font:500 .875rem/1.4 var(--f-ui);font-variant-numeric:tabular-nums;color:var(--mute)}
.next-cd small{font-size:1em;margin-inline:.25em .4em}
.cd-in::before{content:"อีก "}
.view{min-height:100vh}
.center-fine{text-align:center;font-size:.8125rem;color:var(--mute)}
.finale{display:grid;gap:.7rem;font-family:var(--f-body);font-size:1.0625rem;line-height:1.8}
.finale strong{font:700 1.125rem/1.55 var(--f-ui);color:var(--ink)}
.finale-q{display:grid;gap:.4rem}
.truth{font-size:.9375rem;color:var(--mute)}

/* preview bar (team preview only) */
.simbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;padding:.55rem 1.25rem;background:var(--ink);color:var(--paper);font-size:.8125rem}
.simbar label{font-weight:700}
.simbar select{font:500 .9375rem var(--f-ui);padding:.35rem .5rem;border-radius:.5rem;border:0;background:var(--paper);color:var(--ink);max-width:100%}