/* ==========================================================================
   WisGo — the Games tab

   These screens are drawn by the app, not by a web page, so this file only
   adds what the shell does not already have: the deck library, the card
   player, the Imposter flow and the Chips table.

   Everything here is built on the tokens in styles.css. There are no colours
   invented in this file that are not already in the app, and nothing here
   overrides anything — if a rule fights another rule, that is a bug.
   ========================================================================== */

/* ---------- Khmer type ----------------------------------------------------
   The app ships its own Khmer face rather than trusting whatever the phone
   happens to have. Khmer is a stacking script: the same string rendered with a
   font that lacks proper shaping comes out as loose marks scattered around the
   consonants, which is unreadable rather than merely ugly. Noto Sans Khmer is
   self-hosted here — three weights, 72KB in total — so it renders the same on
   every phone and still works with no signal.

   The unicode-range means these files are only fetched when there is Khmer on
   the screen, and the glyphs are picked up automatically wherever Khmer
   appears, including inside an otherwise English screen.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Khmer';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/khmer-400.woff2) format('woff2');
  unicode-range:U+1780-17FF,U+19E0-19FF,U+200B;size-adjust:108%;
}
@font-face{
  font-family:'Khmer';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/khmer-700.woff2) format('woff2');
  unicode-range:U+1780-17FF,U+19E0-19FF,U+200B;size-adjust:108%;
}
@font-face{
  font-family:'Khmer';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/khmer-800.woff2) format('woff2');
  unicode-range:U+1780-17FF,U+19E0-19FF,U+200B;size-adjust:108%;
}

/* Put it in front of every stack. Because of the unicode-range above it only
   ever claims Khmer codepoints, so Latin is untouched. */
:root{
  --sans:'Khmer',"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --display:'Khmer',"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:'Khmer',"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --code:'Khmer',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- Khmer layout --------------------------------------------------
   Khmer sits taller than Latin and its diacritics stack above and below the
   line, so it needs more room to breathe or the rows collide.
   -------------------------------------------------------------------------- */
body.km{ line-height:1.75; }
body.km .n,
body.km h1, body.km h2, body.km h3,
body.km .btn{ line-height:1.5; letter-spacing:0; }
body.km .kicker,
body.km .tile-txt .t,
body.km .tabbar button{ letter-spacing:.06em; }

/* ---------- full-screen game frame ---------------------------------------
   A game takes the whole screen, like the quest does. Same skeleton as
   .app-screen: fixed height, one scrolling child, action row pinned.
   -------------------------------------------------------------------------- */
.gm-screen{
  height:100dvh;max-height:100dvh;
  display:flex;flex-direction:column;
  padding-top:var(--safe-t);
  animation:screenIn .3s cubic-bezier(.2,.8,.2,1) both;
}
.gm-top{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:12px 14px 8px;min-width:0;
}
.gm-back{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  border:1.5px solid var(--line);background:rgba(255,255,255,.05);color:var(--white);
}
.gm-back:active{transform:scale(.94)}
.gm-back svg{width:17px;height:17px}
.gm-ttl{flex:1;min-width:0}
.gm-ttl .k{
  font-family:var(--mono);font-weight:700;font-size:.56rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--dim);
}
.gm-ttl .n{
  font-family:var(--display);letter-spacing:-.015em;font-size:1.18rem;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gm-count{
  flex:none;font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:7px 12px;white-space:nowrap;
}
.gm-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 18px 28px}
.gm-act{
  flex:none;display:flex;gap:10px;
  padding:12px 16px calc(14px + var(--safe-b));
  background:var(--bg);border-top:1px solid var(--line);
}
.gm-act .btn{flex:1}

/* ---------- language switch in the header -------------------------------- */
.lang-chip{
  flex:none;font-family:var(--mono);font-size:.62rem;letter-spacing:0.07em;font-weight:700;
  color:var(--dim);border:1px solid var(--line);background:rgba(255,255,255,.05);
  padding:9px 13px;border-radius:999px;white-space:nowrap;
}
.lang-chip:active{background:rgba(255,255,255,.1)}
body.km .lang-chip{letter-spacing:0}

/* ---------- segmented filter --------------------------------------------- */
.segrow{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin:14px -18px 2px;padding:2px 18px 6px;
}
.segrow::-webkit-scrollbar{display:none}
.segrow button{
  flex:none;padding:10px 15px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--dim);
  font-family:var(--mono);font-size:.64rem;letter-spacing:0.07em;text-transform:uppercase;font-weight:700;
  transition:background .18s,color .18s,border-color .18s;
}
.segrow button.on{background:var(--gold);border-color:var(--gold);color:#221900}
body.km .segrow button{letter-spacing:0;text-transform:none;font-family:var(--sans);font-size:.86rem}

/* ---------- the two live games, pinned at the top ------------------------ */
.livegames{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
/* v109: an odd last tile (three live games) takes the whole row */
.livegames .lg:last-child:nth-child(odd){grid-column:1/-1}
/* v109: Who Drinks? draws itself inside this full-screen host */
.wd-host{height:100dvh;max-height:100dvh}
.lg{
  position:relative;overflow:hidden;text-align:left;
  border-radius:22px;padding:16px 14px 15px;min-height:112px;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--line);
  background:linear-gradient(155deg,color-mix(in srgb,var(--acc) 26%,var(--surface)),var(--bg-2));
  transition:transform .14s ease;
}
.lg:active{transform:scale(.978)}
.lg .lgico{
  position:absolute;top:8px;right:8px;font-size:2.6rem;line-height:1;
  opacity:.3;pointer-events:none;filter:saturate(.85);
}
.lg .k,.lg .n{display:block}
.lg .k{
  font-family:var(--mono);font-size:.54rem;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--acc);font-weight:700;
}
.lg .n{font-family:var(--display);letter-spacing:-.015em;font-size:1.18rem;line-height:1.12;margin:6px 0 0}
body.km .lg .k,body.km .lg .n{text-transform:none;letter-spacing:0}

/* ---------- a deck in the library ---------------------------------------- */
.deck{
  width:100%;text-align:left;display:flex;gap:13px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:12px 13px;margin-top:9px;transition:transform .14s ease,border-color .2s;
}
.deck:active{transform:scale(.985);border-color:color-mix(in srgb,var(--acc) 55%,var(--line))}
.deckico{
  width:52px;height:52px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 17%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--acc) 30%,var(--line));
  color:var(--acc);
}
.deckico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.decktxt{flex:1;min-width:0}
/* these are spans inside a <button>, so they need to be told to stack */
.decktxt .t,.decktxt .n,.decktxt .b{display:block}
.decktxt .t{
  font-family:var(--mono);font-size:.54rem;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--acc);font-weight:700;
}
.decktxt .n{font-family:var(--display);letter-spacing:-.015em;font-size:1.06rem;line-height:1.18;margin:5px 0 0}
.deck .ch{flex:none;color:var(--dim);font-size:1.15rem}
.deck .hot{color:var(--clay-hot,#FF9068)}
body.km .decktxt .t,body.km .decktxt .n{text-transform:none;letter-spacing:0}

/* ---------- the card player ---------------------------------------------- */
.play-stage{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  justify-content:center;padding:8px 18px 4px;
}
.pcard{
  width:100%;max-width:440px;margin:0 auto;
  aspect-ratio:3/4;max-height:100%;
  border-radius:26px;padding:26px 24px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  background:#FBFBF8;border:1.5px solid rgba(18,55,42,.14);
  box-shadow:0 26px 64px rgba(0,0,0,.5);
  color:#14231C;text-align:center;
  transform-style:preserve-3d;
  transition:transform .16s ease;
}
.pcard:active{transform:scale(.988)}
.pcard.flip{animation:cardFlip .42s cubic-bezier(.3,.9,.3,1) both}
@keyframes cardFlip{
  0%  {transform:perspective(900px) rotateY(0) scale(1)}
  45% {transform:perspective(900px) rotateY(-84deg) scale(.96)}
  55% {transform:perspective(900px) rotateY(84deg)  scale(.96)}
  100%{transform:perspective(900px) rotateY(0) scale(1)}
}
.pcard .plabel{
  align-self:center;font-family:var(--mono);font-size:.6rem;letter-spacing:0.07em;
  text-transform:uppercase;font-weight:700;
  background:#1B4D3E;color:#FBFBF8;padding:7px 14px;border-radius:999px;
}
.pcard .plabel.dare{background:#C96F4A}
.pcard .plabel.muted{background:#7A6A4A}
.pcard .ptext{
  font-family:var(--display);font-size:1.32rem;line-height:1.45;letter-spacing:-.015em;
}
body.km .pcard .ptext{font-family:var(--sans);font-weight:700;font-size:1.2rem;line-height:1.7}
.pcard .phint{font-size:.88rem;color:#7A6A4A;line-height:1.45}
.pcard.empty .ptext{font-family:var(--sans);font-weight:600;font-size:1.05rem;color:#4A5B52}
.pcard .pnum{
  position:absolute;
}
.play-how{
  max-width:440px;margin:12px auto 0;text-align:center;
  font-size:.84rem;color:var(--dim);line-height:1.45;
}
.play-dots{
  display:flex;gap:4px;justify-content:center;margin:12px auto 0;max-width:440px;flex-wrap:wrap;
}
.play-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.18)}
.play-dots i.on{background:var(--acc)}

/* ---------- 18+ gate ------------------------------------------------------ */
.gate-art{
  width:76px;height:76px;border-radius:22px;display:grid;place-items:center;font-size:2.3rem;
  background:rgba(255,94,91,.14);border:1px solid rgba(255,94,91,.4);margin-bottom:14px;
}

/* ---------- Imposter ------------------------------------------------------ */
.pl-row{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:10px 12px;margin-top:9px;
}
.pl-av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-size:.9rem;color:#04140E;
}
.pl-nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-x{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--dim);border:1px solid var(--line);font-size:1.1rem;
}
.pl-x:active{background:rgba(255,255,255,.07)}
.addrow{display:flex;gap:9px;margin-top:12px}
.addrow input{
  flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:14px 15px;color:var(--white);font-size:1rem;
}
.addrow input::placeholder{color:rgba(255,255,255,.4)}
.addrow button{
  flex:none;width:56px;border-radius:14px;background:var(--accent);color:#04140E;
  font-family:var(--display);letter-spacing:-.015em;font-size:1.4rem;display:grid;place-items:center;
}
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.cattile{
  text-align:left;border:1px solid var(--line);border-radius:16px;padding:13px 12px;
  background:var(--surface);transition:border-color .18s,background .18s;
}
.cattile.on{background:var(--surface-2);border-color:var(--gold)}
.cattile .ce,.cattile .cn,.cattile .cc{display:block}
.cattile .ce{font-size:1.5rem;line-height:1}
.cattile .cn{font-weight:700;margin-top:6px;font-size:.95rem}
.cattile .cc{color:var(--dim);font-size:.78rem;margin-top:2px}
.optrow{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:14px 14px;margin-top:10px;
}
.optrow .ol{flex:1;min-width:0}
.optrow .ol .on2,.optrow .ol .oc{display:block}
.optrow .ol .on2{font-weight:700}
.optrow .ol .oc{color:var(--dim);font-size:.82rem;margin-top:2px;line-height:1.4}
.sw{
  flex:none;width:52px;height:31px;border-radius:999px;background:rgba(255,255,255,.16);
  position:relative;transition:background .2s;
}
.sw.on{background:var(--accent)}
.sw i{
  position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;
  background:#fff;transition:transform .2s;
}
.sw.on i{transform:translateX(21px)}
.stepper{display:flex;align-items:center;gap:14px;flex:none}
.stepper button{
  width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:1.3rem;color:var(--white);
}
.stepper .v{font-family:var(--display);letter-spacing:-.015em;font-size:1.3rem;min-width:22px;text-align:center}

/* the pass-the-phone card */
.reveal{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:16px 22px;text-align:center;
}
.reveal .who{font-family:var(--display);letter-spacing:-.015em;font-size:1.9rem;line-height:1.05}
body.km .reveal .who{font-family:var(--sans);text-transform:none;font-size:1.5rem}
.reveal .sub{color:var(--dim);font-size:.95rem;line-height:1.5;max-width:30ch}
.holder{
  width:min(78vw,300px);aspect-ratio:1;border-radius:32px;
  display:grid;place-items:center;text-align:center;padding:22px;
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:2px solid var(--line);
  transition:transform .14s ease,border-color .2s,background .2s;
  user-select:none;-webkit-user-select:none;
}
.holder:active{transform:scale(.97)}
.holder.showing{border-color:var(--gold);background:linear-gradient(150deg,#1C5F45,#0F3A29)}
.holder .hk,.holder .hw,.holder .hh{display:block}
.holder .hk{
  font-family:var(--mono);font-weight:700;font-size:.58rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--dim);
}
.holder .hw{font-family:var(--display);letter-spacing:-.015em;font-size:1.7rem;line-height:1.15;margin-top:8px;word-break:break-word}
body.km .holder .hw{font-family:var(--sans);font-weight:800;font-size:1.4rem}
.holder .hh{font-size:.86rem;color:var(--gold);margin-top:10px}
.holder.imp .hw{color:var(--danger)}
.dotline{display:flex;gap:6px;justify-content:center}
.dotline i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
.dotline i.done{background:var(--ok)}
.dotline i.now{background:var(--gold);transform:scale(1.35)}

/* ---------- Chips --------------------------------------------------------- */
.pin{
  font-family:var(--code);font-size:2.4rem;letter-spacing:.24em;font-weight:700;
  text-align:center;color:var(--gold);padding-left:.32em;
}
.qrbox{
  width:190px;height:190px;margin:16px auto 0;padding:11px;border-radius:18px;
  background:#fff;display:grid;place-items:center;
}
.qrbox img,.qrbox canvas{width:100%;height:100%;display:block}
.money{font-family:var(--display);letter-spacing:-.015em;font-size:1.12rem;white-space:nowrap}
.money.up{color:var(--ok)} .money.down{color:var(--danger)}
.txrow{
  display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid var(--line);
}
.txrow:last-child{border-bottom:none}
.txrow .tt{flex:1;min-width:0}
.txrow .tt .a,.txrow .tt .b{display:block}
.txrow .tt .a{font-weight:600;font-size:.94rem}
.txrow .tt .b{color:var(--dim);font-size:.78rem;margin-top:2px}
.amts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.amts button{
  padding:14px 4px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--white);
  font-family:var(--display);font-size:.98rem;
}
.amts button.on{background:var(--accent);border-color:var(--accent);color:#04140E}
/* Typed fields. NOTE the element selectors: shell.js marks a sheet and its
   backdrop with a bare `.in` while they slide in, and a plain `.in{}` rule
   here silently repainted every sheet in the app with a 7% white wash. Keep
   this bound to the elements it means. */
input.in, textarea.in, select.in{
  width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:15px 16px;color:var(--white);font-size:1.05rem;
}
input.in::placeholder, textarea.in::placeholder{color:rgba(255,255,255,.4)}
input.in.mono, textarea.in.mono{font-family:var(--code);font-weight:700;letter-spacing:.24em;text-align:center;font-size:1.5rem;padding-left:.28em}
.lab{
  font-family:var(--mono);font-size:.58rem;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--dim);font-weight:700;margin:16px 0 7px;display:block;
}
body.km .lab{letter-spacing:0;text-transform:none;font-family:var(--sans);font-size:.84rem}
.seg{display:flex;gap:8px;margin-top:6px}
.seg button{
  flex:1;padding:13px 8px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--white);font-weight:700;font-size:.95rem;
}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#04140E}
.err{color:var(--danger);font-size:.88rem;margin-top:10px;min-height:1.2em}

/* ---------- shared small bits --------------------------------------------- */
.gnote{color:var(--dim);font-size:.86rem;line-height:1.5;margin-top:10px}
.ghead{
  font-family:var(--display);letter-spacing:-.015em;font-size:1.5rem;line-height:1.1;margin-top:6px;
}
body.km .ghead{font-family:var(--sans);font-weight:800;text-transform:none;font-size:1.3rem}

/* four tabs instead of three: the labels need a little less room */
.tabbar button{font-size:.53rem;letter-spacing:.1em}
body.km .tabbar button{font-family:var(--sans);font-size:.7rem;letter-spacing:0;text-transform:none}

@media(max-width:340px){
  .livegames{grid-template-columns:1fr}
  .tabbar button{font-size:.5rem;letter-spacing:.06em}
}

/* v99: Imposter — words from Cambodia, Global or both */
.imp-reg{display:flex;gap:6px;margin-top:10px;padding:4px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.imp-reg button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border:0;border-radius:12px;background:transparent;color:var(--dim);font:700 .9rem/1 var(--sans)}
.imp-reg button span{font-size:1.05rem}
.imp-reg button.on{background:var(--gold);color:#221900}
.imp-regn{margin-top:8px}