/* סביב השולחן — עיצוב. "שולחן בערב, והקלף הוא המנורה": משטח שקט וצבע רווי אחד, צבע הרמה.
   שלוש רמות = שלושה צבעים: צהוב חימום, ורמיליון קרוב יותר, סגול לב פתוח. */

/* Fonts: Google's own @font-face rules, embedded (one render-blocking request less than the <link> to
   fonts.googleapis.com). The files still come from fonts.gstatic.com, which the CSP allows; unicode-range
   means a phone downloads only the subsets it shows. If Google retires these file versions the fallbacks
   in --ui/--serif/--display take over; tests/e2e.js checks that the three families load. */
/* hebrew */
@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/frankruhllibre/v23/j8_96_fAw7jrcalD7oKYNX0QfAnPcbzNEEB7OoicBw73YWqVNRVUElR-998.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/frankruhllibre/v23/j8_96_fAw7jrcalD7oKYNX0QfAnPcbzNEEB7OoicBw73YWqZNRVUElR-998.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/frankruhllibre/v23/j8_96_fAw7jrcalD7oKYNX0QfAnPcbzNEEB7OoicBw73YWqXNRVUElR-.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;
}
/* hebrew */
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanshebrew/v12/BCa2qYENg9Kw1mpLpO0bGM5lfHAAZHhDXE2g-lgVrjaNzC4.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanshebrew/v12/BCa2qYENg9Kw1mpLpO0bGM5lfHAAZHhDXE2s-lgVrjaNzC4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanshebrew/v12/BCa2qYENg9Kw1mpLpO0bGM5lfHAAZHhDXE2i-lgVrjaN.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;
}
/* hebrew */
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanshebrew/v12/BCa5qYENg9Kw1mpLpO0bGM5lfHAAZHhDXEV93k06jDun9ic3wY8.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanshebrew/v12/BCa5qYENg9Kw1mpLpO0bGM5lfHAAZHhDXEV93k02jDun9ic3wY8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanshebrew/v12/BCa5qYENg9Kw1mpLpO0bGM5lfHAAZHhDXEV93k04jDun9ic3.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;
}
/* hebrew */
@font-face {
  font-family: 'Suez One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/suezone/v15/taiJGmd_EZ6rqscQgOFMmouC-50xUK4.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Suez One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/suezone/v15/taiJGmd_EZ6rqscQgOFAmouC-50xUK4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Suez One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/suezone/v15/taiJGmd_EZ6rqscQgOFOmouC-50x.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;
}
/* The level color change is one motion of the whole screen: these three are registered so they interpolate. */
@property --bg{syntax:"<color>";inherits:true;initial-value:#E8EFEC}
@property --accent{syntax:"<color>";inherits:true;initial-value:#F5B53A}
@property --on-accent{syntax:"<color>";inherits:true;initial-value:#1F1A0F}

:root{
  color-scheme:light;
  /* level palette: card color, text on it, and the table under it */
  --lvl1:#F5B53A; --on-lvl1:#1F1A0F; --bg1:#E8EFEC;
  --lvl2:#C9432B; --on-lvl2:#FFF6F0; --bg2:#EFE7E6;
  --lvl3:#4A2D6D; --on-lvl3:#F6EFFA; --bg3:#E9E6F0;
  --ink:#132E2D; --muted:#3A4F4C;
  /* the current level (html[data-level] switches these; --bg/--accent/--on-accent follow and transition) */
  --lvl-bg:var(--bg1); --lvl:var(--lvl1); --on-lvl:var(--on-lvl1);
  --bg:var(--lvl-bg); --accent:var(--lvl); --on-accent:var(--on-lvl);
  /* surfaces (static fallback; derived from --bg below where color-mix exists) */
  --surface:#F7FAF8; --surface-2:#DCE6E2; --line:#C3D3CE;
  --shade:19,46,45;
  --shadow-card:0 26px 40px -24px rgba(var(--shade),.5), 0 2px 5px rgba(var(--shade),.14);
  /* type */
  --ui:'IBM Plex Sans Hebrew','Heebo','Arial Hebrew',Arial,sans-serif;
  --serif:'Frank Ruhl Libre','Noto Serif Hebrew','David',Georgia,serif;
  --display:'Suez One','Frank Ruhl Libre',serif;
  --fs:1;
  /* motion */
  --t-fast:120ms; --t-ui:220ms; --t-exit:180ms; --t-card:460ms; --t-level:800ms; --t-drain:520ms;
  --t-hold:1200ms; --t-count:500ms; --stagger:35ms; --t-deal:160ms;
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.55,0,1,.45);
  --ease-flip:cubic-bezier(.4,.1,.2,1);   /* the first 90° take a third of the turn, so the edge is seen rising; the landing eases out */
  /* springs (cubic-bezier fallback; linear() below where supported) */
  --spring-snappy:cubic-bezier(.2,.9,.3,1); --spring-bouncy:cubic-bezier(.3,1.35,.5,1); --spring-pop:cubic-bezier(.3,1.5,.5,1);
  --t-snappy:384ms; --t-bouncy:580ms; --t-pop:820ms;
  --r-btn:14px; --r-tag:7px; --r-card:22px;
  --start-edge:right; --end-edge:left; /* the document is RTL: progress and bars grow from the right */
  --back-line:rgba(0,0,0,.07);
  /* paper: a neutral-grey fibre tile blended soft-light over the card colour (so it works on every level) */
  --paper:url(paper-512.webp);
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23000' fill-opacity='.07'%3E%3Cpath transform='translate%284 4%29 scale%28.5%29' d='M12 2.8l2 6.9 6.9 2-6.9 2L12 20.6l-2-6.9-6.9-2 6.9-2z'/%3E%3Cpath transform='translate%2826 26%29 scale%28.42%29' d='M12 2.8l2 6.9 6.9 2-6.9 2L12 20.6l-2-6.9-6.9-2 6.9-2z'/%3E%3C/g%3E%3C/svg%3E");
  --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2 6.9 6.9 2-6.9 2L12 20.6l-2-6.9-6.9-2 6.9-2z'/%3E%3C/svg%3E");
  --spot:rgba(255,236,170,.9);
  --err:#8A2414;
  /* level character of the flip: warm-up lands with a small bounce, the deep level turns slowly */
  --face-out:back-out-2; --face-in:front-in-2; --swap:.335; --land:land-1;
}
html[data-level="0"]{--t-card:440ms;--ease-flip:cubic-bezier(.4,.1,.2,1);--face-out:back-out-2;--face-in:front-in-2;--swap:.335;--land:land-1}
html[data-level="1"]{--t-card:460ms;--ease-flip:cubic-bezier(.4,.1,.2,1);--face-out:back-out-2;--face-in:front-in-2;--swap:.335;--back-line:rgba(255,255,255,.08);--land:land-2;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1.3'%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Ccircle cx='30' cy='30' r='5'/%3E%3C/g%3E%3C/svg%3E");--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9 5.6a6.4 6.4 0 1 0 0 12.8a6.4 6.4 0 1 0 0-12.8zM15 5.6a6.4 6.4 0 1 0 0 12.8a6.4 6.4 0 1 0 0-12.8z'/%3E%3C/svg%3E")}
html[data-level="2"]{--t-card:540ms;--ease-flip:cubic-bezier(.3,.55,.25,1);--face-out:back-out-3;--face-in:front-in-3;--swap:.22;--back-line:rgba(255,255,255,.07);--land:land-3;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23fff' fill-opacity='.06'%3E%3Cpath transform='translate%283 3%29 scale%28.55%29' d='M12 20.2S4.2 15.6 4.2 10.1a4 4 0 0 1 7.8-1.3 4 4 0 0 1 7.8 1.3c0 5.5-7.8 10.1-7.8 10.1z'/%3E%3Cpath transform='translate%2825 25%29 scale%28.45%29' d='M12 20.2S4.2 15.6 4.2 10.1a4 4 0 0 1 7.8-1.3 4 4 0 0 1 7.8 1.3c0 5.5-7.8 10.1-7.8 10.1z'/%3E%3C/g%3E%3C/svg%3E");--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.2S4.2 15.6 4.2 10.1a4 4 0 0 1 7.8-1.3 4 4 0 0 1 7.8 1.3c0 5.5-7.8 10.1-7.8 10.1z'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --lvl1:#CC9431; --lvl2:#9A2E19; --lvl3:#5A3A86; --on-lvl1:#140E04;
    --bg1:#0C2125; --bg2:#221619; --bg3:#15122A;
    --ink:#DDE6E2; --muted:#9DB5B0;
    --surface:#143036; --surface-2:#1B3F47; --line:#284B52;
    --shade:0,0,0;
    --shadow-card:0 26px 40px -22px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.4);
    --spot:rgba(255,230,160,.22);
    --err:#FFB4A2;
  }
}
html[data-level="1"]{--lvl-bg:var(--bg2);--lvl:var(--lvl2);--on-lvl:var(--on-lvl2)}
html[data-level="2"]{--lvl-bg:var(--bg3);--lvl:var(--lvl3);--on-lvl:var(--on-lvl3)}
@supports (color: color-mix(in oklab, red, blue)){
  :root{
    --surface:color-mix(in oklab, var(--bg), #fff 62%);
    --surface-2:color-mix(in oklab, var(--bg), #0a1c1b 7%);
    --line:color-mix(in oklab, var(--bg), #0a1c1b 17%);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --surface:color-mix(in oklab, var(--bg), #fff 7%);
      --surface-2:color-mix(in oklab, var(--bg), #fff 12%);
      --line:color-mix(in oklab, var(--bg), #fff 19%);
    }
  }
}
html.big-text{--fs:1.15}
.edge-glow{position:fixed;inset-inline:0;height:6px;background:var(--accent);z-index:39;pointer-events:none}
.edge-glow.top{top:0}
.edge-glow.bottom{bottom:0}
@supports (transition-timing-function: linear(0, 1)){
  :root{
    --spring-snappy:linear(0,0.027,0.095,0.185,0.286,0.388,0.486,0.576,0.657,0.727,0.786,0.836,0.877,0.91,0.936,0.956,0.972,0.983,0.992,0.998,1.002,1.004,1.006,1.006,1.006,1.006,1.006,1.005,1.004,1.004,1.003,1.003,1);
    --spring-bouncy:linear(0,0.036,0.124,0.242,0.371,0.5,0.62,0.726,0.815,0.887,0.943,0.984,1.013,1.031,1.042,1.046,1.045,1.042,1.037,1.031,1.025,1.02,1.014,1.01,1.006,1.004,1.001,1,0.999,0.998,0.998,0.998,1);
    --spring-pop:linear(0,0.055,0.191,0.367,0.552,0.723,0.868,0.979,1.057,1.103,1.124,1.125,1.113,1.093,1.069,1.047,1.026,1.01,0.998,0.99,0.985,0.984,0.985,0.987,0.99,0.993,0.995,0.998,1,1.001,1.002,1.002,1);
  }
}
/* The colour change is one registered, non-inherited property on <html> that paints only the page itself.
   (Transitioning the inherited --bg/--accent restyled every element on every frame: on a budget phone the
   curtain dropped 39 frames. Now the tokens switch once and the page's colour glides underneath.) */
@property --bg-anim{syntax:"<color>";inherits:false;initial-value:#E8EFEC}
html{--bg-anim:var(--bg)}
@media (prefers-reduced-motion: no-preference){
  html{transition:--bg-anim var(--t-drain) var(--ease-enter)}
  /* The curtain's colour moves for the whole 800ms (half way at 400ms), so the seal and the title land on it. */
  html[data-phase="between"]{transition:--bg-anim var(--t-level) cubic-bezier(.4,0,.2,1)}
}
/* First paint after load/reconnect: jump straight to the current level. */
html.no-anim{transition:none!important}

*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg-anim);-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:none}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--ui);font-size:calc(16px * var(--fs));line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-synthesis:none;overscroll-behavior-y:none}
.app{overflow-x:hidden;overflow-x:clip;min-height:100%;max-width:540px;margin:0 auto;padding-inline:max(16px, env(safe-area-inset-left, 0px));padding-top:max(12px, env(safe-area-inset-top, 0px));padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:12px;position:relative}
/* The card screen is exactly one viewport tall so the card fits and the main action never falls below the fold. */
.app[data-screen="play"]{height:100%;height:100dvh;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;row-gap:8px}
/* Layers hold only fixed covers: they must not take a slot (and a gap) in the page flow. */
#layer,#overlay,#modals{display:contents}
[hidden]{display:none!important}
/* A room link: until app.js takes over, the connecting screen stands in for the home screen. */
html[data-route="room"] #s-home{display:none!important}
html[data-route="room"] #s-connecting{display:flex!important}
button,a,input,textarea{touch-action:manipulation}
.screen{flex:1;display:flex;flex-direction:column;gap:20px}
.screen.center{justify-content:center;text-align:center}
h1,h2,h3,p{margin:0}
.eyebrow{font-size:calc(14px * var(--fs));font-weight:600;color:var(--muted)}
.hint{font-size:calc(16px * var(--fs));color:var(--muted);text-align:start;text-wrap:pretty}
.note{font-size:calc(16px * var(--fs));color:var(--muted);text-align:start;text-wrap:pretty}
.lede{font-family:var(--serif);font-weight:500;font-size:calc(19px * var(--fs));line-height:1.45;max-width:34ch;margin-inline:auto;text-wrap:balance}
.nums{font-variant-numeric:tabular-nums}
bdi{unicode-bidi:isolate}
a{color:var(--ink)}

/* כפתורים */
.btn{font:inherit;font-weight:600;font-size:calc(16px * var(--fs));border-radius:var(--r-btn);padding:12px 18px;border:1px solid transparent;cursor:pointer;min-height:48px;color:var(--ink);background:var(--surface-2);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;-webkit-user-select:none;user-select:none}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.big{width:100%;font-size:calc(19px * var(--fs));min-height:60px;padding:14px 20px}
.btn.small{min-height:44px;padding:8px 14px;font-size:calc(15px * var(--fs))}
.btn[disabled]{opacity:.6;cursor:default}
/* Sent: the action is on its way. A thin line appears only if the answer takes long (slow network). */
.btn.sent{position:relative;opacity:.85}
.btn.sent::after{content:"";position:absolute;inset-inline:18%;bottom:8px;height:2px;border-radius:1px;background:currentColor;opacity:.5;transform-origin:var(--start-edge) center}
@media (prefers-reduced-motion: no-preference){ .btn.sent::after{animation:hold-line 1100ms linear 400ms backwards} }
/* One press system: .pressed goes on at pointerdown (iOS too), so a control answers when the finger lands,
   and springs back on release. `scale` is its own property, so it composes with any transform animation. */
@media (prefers-reduced-motion: no-preference){
  :is(.btn,.pill,.qrbtn,.pref,.mode,.seat,.vopt,.opt,.notecard,.x){transition:scale 240ms var(--spring-snappy)}
  :is(.btn,.pill,.qrbtn,.pref,.mode,.x).pressed:not([disabled]){scale:.96;transition:scale 70ms cubic-bezier(.2,0,0,1)}
  :is(.seat,.vopt,.opt,.notecard).pressed:not([disabled]){scale:.98;transition:scale 70ms cubic-bezier(.2,0,0,1)}
}
.link.pressed{opacity:.55}
@media (prefers-reduced-motion: reduce){ :is(.btn,.vopt,.seat,.opt,.pill).pressed:not([disabled]){opacity:.8} }
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px}
.row .btn{flex:1}
.link{background:none;border:0;font:inherit;font-size:calc(15px * var(--fs));font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 8px;min-height:44px}

/* פתיח */
.hero{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:12px;text-align:center}
.fan{position:relative;width:100%;height:196px;margin-top:4px}
.fancard{position:absolute;inset-inline-start:calc(50% - 56px);top:18px;width:112px;aspect-ratio:5/7;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow-card);color:var(--oc);background-color:var(--c);background-image:var(--paper);background-size:256px;background-blend-mode:soft-light}
.fancard::after{content:"";position:absolute;inset:7px;border:1.5px solid currentColor;border-radius:9px;opacity:.35}
.fancard .seal{width:60px;height:60px;border-width:2px;background:var(--c);box-shadow:0 0 0 5px var(--c);gap:2px}
.fancard .seal b{font-size:32px}
.fancard .seal .ico{width:13px;height:13px}
.fancard em{font-style:normal;font-family:var(--ui);font-size:14px;font-weight:600}
.fancard.l1{--c:var(--lvl1);--oc:var(--on-lvl1);transform:translateX(96px) translateY(16px) rotate(13deg)}
.fancard.l2{--c:var(--lvl2);--oc:var(--on-lvl2);z-index:2;transform:translateY(-4px)}
.fancard.l3{--c:var(--lvl3);--oc:var(--on-lvl3);transform:translateX(-96px) translateY(16px) rotate(-13deg)}
/* The hand fans open once when the app opens. */
@keyframes fan-l1{from{transform:translateY(0) rotate(0)}}
@keyframes fan-l3{from{transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion: no-preference){
  .fancard.l1{animation:fan-l1 620ms var(--ease-enter) 120ms backwards}
  .fancard.l3{animation:fan-l3 620ms var(--ease-enter) 120ms backwards}
}
.title{font-family:var(--display);font-weight:400;font-size:clamp(40px,11vw,58px);line-height:1}
.title2{font-family:var(--display);font-weight:400;font-size:calc(clamp(30px,9vw,44px) * var(--fs));line-height:1.1;text-wrap:balance}
.rules{border-top:1px solid var(--line);padding:18px 2px 4px;display:flex;flex-direction:column;gap:10px}
.rules h2{font-family:var(--display);font-weight:400;font-size:calc(22px * var(--fs));color:var(--ink)}
.rules ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.rules li{display:flex;align-items:flex-start;gap:10px;font-size:calc(17px * var(--fs));line-height:1.45}
.rules li .ico{width:22px;height:22px;flex:none;margin-top:2px;color:var(--ink)}
.rules .more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--muted)}
.rules .more p{font-size:calc(16px * var(--fs));color:var(--muted);text-wrap:pretty}
.rules .promise{font-family:var(--serif);font-weight:500;font-size:calc(19px * var(--fs));text-align:center;text-wrap:balance;padding-top:6px}

/* טפסים */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:calc(15px * var(--fs));font-weight:600;color:var(--muted)}
.in{width:100%;min-width:0;font:inherit;font-size:calc(17px * var(--fs));padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.in::placeholder{color:var(--muted);opacity:1}
.in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.in.code{font-family:var(--ui);font-weight:600;font-size:36px;letter-spacing:.3em;text-align:center;padding:10px;direction:ltr;font-variant-numeric:tabular-nums}
.names{display:flex;flex-direction:column;gap:12px}
.names h2,.names h1{font-size:calc(24px * var(--fs));font-family:var(--display);font-weight:400}
.names-list{display:flex;flex-direction:column;gap:8px}
.namerow{display:flex;gap:8px;align-items:center}
.namerow .n{width:26px;text-align:center;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.namerow .in{flex:1}
.x{flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:16px;cursor:pointer}
.x:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.error{color:var(--err);font-size:calc(16px * var(--fs));font-weight:600;text-align:start}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px;text-align:start;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:4px}
.mode b{font-size:calc(15px * var(--fs))}
.mode span{font-size:calc(14px * var(--fs));color:var(--muted)}
.mode.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mode:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* קוד ושיתוף */
.codebox{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 2px 14px;border-bottom:1px solid var(--line)}
.codecol{display:flex;flex-direction:column;gap:4px;min-width:0}
.codebox .code{font-family:var(--ui);font-weight:600;font-size:calc(52px * var(--fs));line-height:1;letter-spacing:.1em;font-variant-numeric:tabular-nums;text-align:start}
.codebox .url{font-size:calc(14px * var(--fs));color:var(--muted);overflow-wrap:anywhere;text-align:start}
.qrbtn{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:calc(14px * var(--fs));font-weight:600;cursor:pointer;min-height:44px}
.qrbtn .qr{width:112px;height:112px;border-radius:8px;display:block}
.qrbtn span{text-decoration:underline;text-underline-offset:3px}
.qrbtn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:10px}
.share{display:flex;gap:8px;flex-wrap:wrap}
.share .btn{flex:1 1 auto;min-height:48px;font-size:calc(15px * var(--fs))}
.seatcount{font-size:calc(17px * var(--fs));color:var(--muted);text-align:start}
.seatcount b{font-size:calc(26px * var(--fs));color:var(--ink);font-weight:600;margin-inline-end:2px}

/* מקומות */
.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.seat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:calc(18px * var(--fs));font-weight:600;cursor:pointer;text-align:start;min-height:64px;-webkit-user-select:none;user-select:none}
.seat .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .tag{display:inline-flex;align-items:center;gap:3px;font-size:calc(14px * var(--fs));font-weight:600;color:var(--muted);flex:none}
.seat .tag .ico{width:15px;height:15px}
.seat.on{background:var(--surface-2);border-color:transparent}
.seat.on .tag{color:var(--ink)}
.seat.mine{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);background:var(--surface)}
.seat:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.seat[disabled]{opacity:.5;cursor:default}
.seats.solo .seat{cursor:default}
@keyframes seat-pop{0%{transform:scale(.94)}60%{transform:scale(1.03)}100%{transform:none}}
@media (prefers-reduced-motion: no-preference){ .seat.on{animation:seat-pop 220ms var(--ease-enter)} }
@keyframes ready-pulse{0%,100%{transform:none}50%{transform:scale(1.035)}}
@media (prefers-reduced-motion: no-preference){ .btn.primary.ready{animation:ready-pulse 640ms ease-in-out 3} }
.confirm{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-btn);background:var(--ink);color:var(--bg);font-size:calc(17px * var(--fs))}
.confirm .btn.ghost{color:var(--bg);border-color:var(--bg)}
.confirm .btn.primary{background:var(--bg);color:var(--ink)}
/* Preferences: switches for this phone only. */
.prefs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pref{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border-radius:var(--r-btn);border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:calc(15px * var(--fs));font-weight:600;cursor:pointer}
.pref .sw{position:relative;width:34px;height:20px;border-radius:10px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);flex:none}
.pref .sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;background:var(--muted)}
.pref[aria-pressed="true"] .sw{background:var(--ink)}
.pref[aria-pressed="true"] .sw::after{inset-inline-start:17px;background:var(--bg)}
.pref:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mebar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 4px;border-top:1px solid var(--line);font-size:calc(15px * var(--fs));color:var(--muted)}
.mebar .link{color:var(--muted)}
.mebar-links{display:flex;gap:10px}
.mebar b{font-weight:600;color:var(--ink)}
.mebar.warn{border-top-color:var(--ink)}
.mebar.warn > span{color:var(--ink);font-weight:600}
.notebox{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-btn);border:1px dashed var(--line);background:var(--surface)}
.notebox .row .in{flex:1}
.notebox .saved{display:inline-flex;align-items:center;gap:4px;font-size:calc(15px * var(--fs))}
.notebox .saved .ico{width:16px;height:16px}

/* Full-screen QR: black on white in every mode, big enough to scan across the table. */
.cover.qrfull{background:#fff;color:#000;color-scheme:only light;gap:18px}
.qrfull .qr{width:min(82vw,70vh,440px);height:auto;aspect-ratio:1}
.qrcode-digits{font-size:calc(40px * var(--fs));font-weight:600;color:#000;font-variant-numeric:tabular-nums}
.qrfull .qrclose{max-width:420px;background:#000;color:#fff}
.cover.picker{justify-content:flex-start;overflow-y:auto;padding-top:calc(24px + env(safe-area-inset-top,0px))}
.cover.picker .seats{width:100%;max-width:480px}
.minimenu .menu{width:100%;max-width:480px}
.minimenu .menu .btn{flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;text-align:start}
.mname{display:inline-flex;align-items:center;gap:8px;font-size:calc(18px * var(--fs))}
.mname .ico{width:20px;height:20px}

/* Connecting: three backs, gently fanning. */
.connecting-deck{position:relative;width:120px;height:110px;margin-inline:auto}
.connecting-deck i{position:absolute;inset-inline-start:36px;top:6px;width:48px;aspect-ratio:5/7;border-radius:8px;background:var(--lvl1);box-shadow:var(--shadow-card)}
.connecting-deck i:nth-child(2){background:var(--lvl2)}
.connecting-deck i:nth-child(3){background:var(--lvl3)}
@keyframes fan-a{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg) translateX(-18px)}}
@keyframes fan-c{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg) translateX(18px)}}
@media (prefers-reduced-motion: no-preference){
  .connecting-deck i:nth-child(1){animation:fan-c 1.6s var(--ease-enter) infinite}
  .connecting-deck i:nth-child(3){animation:fan-a 1.6s var(--ease-enter) infinite}
}
/* משחק */
#s-play{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;min-height:0}
/* The foot has one height for every role (driver, watcher, dare), so the card is the same size on every phone. */
.playfoot{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-block-size:var(--foot,118px)}
.playhead{display:flex;flex-direction:column;gap:8px}
.levelbar{position:relative;display:flex;gap:6px;height:8px}
.seg{flex:1;height:100%;border-radius:3px;background:var(--surface-2);overflow:hidden}
.seg i{display:block;height:100%;transform:scaleX(0);transform-origin:var(--start-edge) center}
.seg:nth-child(1) i{background:var(--lvl1)}
.seg:nth-child(2) i{background:var(--lvl2)}
.seg:nth-child(3) i{background:var(--lvl3)}
.toprow{display:flex;justify-content:space-between;align-items:baseline;font-size:calc(15px * var(--fs));color:var(--muted)}
.toprow b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px}
/* On the card screen the seats are a thin round-progress bar, one cell per seat in turn order. */
#chips{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--lvl-i,0) * (100% + 6px) / 3);width:calc((100% - 12px) / 3);flex-wrap:nowrap;gap:2px}
#chips .chip{flex:1;height:100%;min-width:0;border-radius:2px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
#chips .chip.done{background:var(--ink);box-shadow:none;opacity:.55}
#chips .chip.now{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--ink)}
#chips .chip:not(.on):not(.done){background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.chip:not(#chips *){display:inline-flex;align-items:center;gap:6px;font-size:calc(14px * var(--fs));line-height:1;padding:6px 9px;border-radius:var(--r-tag);border:1px solid var(--line);color:var(--muted);background:transparent;max-width:14ch}
.chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.done:not(#chips *){background:var(--surface-2);color:var(--ink);border-color:transparent}
.chip.now:not(#chips *){border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.turn{font-family:var(--display);font-size:calc(clamp(26px,7.4vw,32px) * var(--fs));line-height:1.15;text-align:center;text-wrap:balance}
.turn.mine{align-self:center}
.turn.mine{font-size:calc(clamp(28px,8vw,34px) * var(--fs))}
.turn.mine b{font-weight:400}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0}
/* The card box is a size container: the card takes the largest 5:7 rectangle that fits. */
.cardbox{position:relative;flex:1;min-height:150px;width:100%;container-type:size;display:grid;place-items:center}
.cardbox > .flip{grid-area:1 / 1}
.stage > .hint{min-height:3em}
/* A raised hand sits on the card's lower edge like a sticky note. */
.cardbox .hands{position:absolute;inset-block-end:-10px;inset-inline:0;margin-inline:auto;z-index:2;background:var(--bg)}

/* ---------- The card is a physical object: two faces and one flip ----------
   .flip (keyed, perspective, shadow) > .flip-inner (preserve-3d, the thing that turns) > .face.front + .face.back.
   Nothing that flattens 3D (overflow, opacity, filter) ever sits on .flip-inner. */
.flip{position:relative;display:block;height:46vh;height:min(100cqh,140cqw);aspect-ratio:5/7;max-width:100%;perspective:1100px;-webkit-user-select:none;user-select:none}
.flip::before{content:"";position:absolute;inset:0;border-radius:var(--r-card);box-shadow:var(--shadow-card);pointer-events:none;opacity:0}
/* The big soft shadow never turns with the card: it shows only while the card lies still. */
.flip.settled::before,.flip.held::before{opacity:1}
.flip-inner{display:grid;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.face{grid-area:1 / 1;min-width:0;min-height:0;position:relative;border-radius:var(--r-card);-webkit-backface-visibility:hidden;backface-visibility:hidden;container-type:inline-size}
.face.back{transform:rotateY(180deg);visibility:hidden}
/* After landing the card is plain 2D again: crisp text, normal taps, no leftover layers. */
.flip.settled .flip-inner{transform-style:flat;-webkit-transform-style:flat}
.flip.settled .face.back{display:none}
/* Held face-down (one-phone mode, until "לחשוף את הקלף"). */
.flip.held .flip-inner{transform:rotateY(180deg)}
.flip.held .face.back{visibility:visible;display:grid}
.flip.held .face.front{visibility:hidden}
.flip.opened{--t-deal:0ms;--wait:0ms;--deal-wait:0ms;--flip-wait:0ms}

/* Faces are printed paper: level color, a hairline frame, a whisper of grain. */
.card{position:relative;border-radius:var(--r-card);padding:clamp(44px,13cqh,60px) clamp(18px,7cqw,28px) clamp(38px,11cqh,52px);background-color:var(--accent);background-image:var(--paper);background-size:256px;background-blend-mode:soft-light;color:var(--on-accent);display:flex;flex-direction:column;justify-content:center;text-align:start;container-type:inline-size}
.card::after{content:"";position:absolute;inset:9px;border:1px solid currentColor;border-radius:15px;opacity:.2;pointer-events:none}
/* The level's sign as a large faint watermark in the lower corner of the face (overflow only on the face,
   never on .flip-inner, which must stay 3D). */
.face.front.card{overflow:hidden}
.face.front.card::before{content:"";position:absolute;inset-inline-start:-14cqw;bottom:-16cqw;width:78cqw;aspect-ratio:1;background:currentColor;opacity:.075;-webkit-mask:var(--glyph) center/contain no-repeat;mask:var(--glyph) center/contain no-repeat;pointer-events:none}
.card.flat{width:min(100%,360px);min-height:220px;padding:54px 24px 46px;align-self:center;box-shadow:var(--shadow-card)}
.corner{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--display);font-size:22px;line-height:1}
.corner .ico{width:15px;height:15px;opacity:.8}
.corner.a{top:18px;inset-inline-start:20px}
.corner.b{bottom:18px;inset-inline-end:20px;rotate:180deg}
.badge{position:absolute;top:16px;inset-inline-end:16px;display:inline-flex;align-items:center;gap:5px;font-size:calc(14px * var(--fs));font-weight:600;padding:5px 9px;border-radius:var(--r-tag);border:1px solid currentColor;line-height:1.1;white-space:nowrap}
.badge .ico{width:15px;height:15px}
.qtext{font-family:var(--serif);font-weight:500;font-size:calc(28px * var(--fs));font-size:calc(clamp(24px,13cqw,40px) * var(--fs));line-height:1.3;text-wrap:balance}
.card .foot{position:absolute;bottom:20px;inset-inline-start:22px;font-size:calc(14px * var(--fs));font-weight:600;display:flex;gap:10px}
.card .foot:empty{display:none}
/* Dare timer: a hairline that drains along the bottom of the card. */
.timebar{position:absolute;inset-inline:22px;bottom:12px;height:3px;border-radius:2px;background:currentColor;opacity:.55;transform-origin:var(--start-edge) center}
.timebar.over{opacity:.9}

/* The back: level color, fine diagonal lines, a round seal with the level letter and its sign. */
.face.back,.backcard{background-color:var(--accent);background-image:var(--paper),var(--pat);background-size:256px,auto;background-blend-mode:soft-light,normal;color:var(--on-accent);place-items:center;display:grid}
.face.back::after,.backcard::after{content:"";position:absolute;inset:9px;border:1.5px solid currentColor;border-radius:15px;opacity:.35}
.backcard{position:relative;border-radius:16px;box-shadow:var(--shadow-card);container-type:inline-size}
.backcard::after{inset:6px;border-radius:11px}
.seal{width:44cqw;aspect-ratio:1;border-radius:50%;border:2px solid currentColor;background:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;box-shadow:0 0 0 7px var(--accent)}
.seal b{font-family:var(--display);font-weight:400;font-size:17cqw;line-height:.9}
.seal .ico{width:9cqw;height:9cqw}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico.fill{fill:currentColor;stroke:none}

@keyframes deal-in{from{opacity:0;transform:translateX(16%) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes flip-in{from{transform:rotateY(180deg)}to{transform:rotateY(0deg)}}
@keyframes land-1{0%{scale:1}45%{scale:1.06}84%{scale:.975}100%{scale:1}}
@keyframes land-2{0%{scale:1}45%{scale:1.05}84%{scale:.985}100%{scale:1}}
@keyframes land-3{0%{scale:1}50%{scale:1.035}100%{scale:1}}
@keyframes contact{from{opacity:0;scale:1.05}}
@keyframes fold-back{from{transform:rotateY(0deg)}to{transform:rotateY(-180deg)}}
@keyframes rise-in{from{opacity:0;transform:translateY(8px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes card-out{to{opacity:0;transform:translateX(-45%) rotate(-5deg)}}
@keyframes slide-out{to{opacity:0;transform:translateX(-60%)}}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* The face swap is timed to the moment the eased turn passes 90°, per level curve (see --face-*). */
@keyframes back-out-1{0%,13%{visibility:visible}13.1%,100%{visibility:hidden}}
@keyframes front-in-1{0%,13%{visibility:hidden}13.1%,100%{visibility:visible}}
@keyframes back-out-2{0%,33.5%{visibility:visible}33.6%,100%{visibility:hidden}}
@keyframes front-in-2{0%,33.5%{visibility:hidden}33.6%,100%{visibility:visible}}
@keyframes back-out-3{0%,22%{visibility:visible}22.1%,100%{visibility:hidden}}
@keyframes front-in-3{0%,22%{visibility:hidden}22.1%,100%{visibility:visible}}

@media (prefers-reduced-motion: no-preference){
  /* --deal-wait/--flip-wait split the wait: after the curtain the card is dealt at once and turns once the colour has drained. */
  .flip{--dw:var(--deal-wait,var(--wait,0ms));--fw:var(--flip-wait,calc(var(--wait,0ms) + var(--t-deal)));animation:deal-in var(--t-deal) var(--ease-enter) var(--dw) backwards}
  .flip::before{transition:opacity var(--t-ui) var(--ease-enter)}
  .flip:not(.held) .flip-inner{animation:flip-in var(--t-card) var(--ease-flip) var(--fw) backwards,var(--land,land-2) var(--t-card) linear var(--fw) backwards}
  .flip.settled::before{animation:contact 260ms var(--ease-enter)}
  .flip:not(.held) .face.back{animation:var(--face-out) var(--t-card) linear var(--fw) backwards}
  .flip:not(.held) .face.front{animation:var(--face-in) var(--t-card) linear var(--fw) backwards}
  /* The print rises the moment the face comes round (--swap = where the level's curve passes 90°), so the face is never blank. */
  .flip:not(.held) .rise{animation:rise-in var(--t-ui) var(--ease-enter) calc(var(--fw) + var(--t-card) * var(--swap) + var(--i,0) * var(--stagger)) backwards}
  /* The first card of a level: its buttons arrive with it. */
  #actions.first-card > *{animation:fade-in 160ms linear calc(var(--t-drain) + var(--t-card) * .5) backwards}
  .flip.from-pick,.flip.from-pick::before,.flip.from-pick:not(.held) .flip-inner,.flip.from-pick:not(.held) .face.front,.flip.from-pick:not(.held) .face.back,.flip.from-pick:not(.held) .rise{animation:none}
  /* Leaving cards go in the reading direction (to the left), accelerating. */
  .flip.leaving{animation:card-out var(--t-exit) var(--ease-exit) forwards;pointer-events:none}
  /* "בוחרים אחת": the card not chosen turns back over and slides away. */
  .flip.fold .flip-inner{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;animation:fold-back 380ms var(--ease-exit) forwards}
  .flip.fold .face.back{display:grid;visibility:visible;animation:none}
  .flip.fold{animation:slide-out 240ms var(--ease-exit) 300ms forwards;pointer-events:none}
  .flip.chosen-out{animation:fade-out 160ms linear 120ms forwards}
  .timebar{animation:drain var(--dur) linear var(--delay) forwards}
}
@media (prefers-reduced-motion: reduce){
  .flip::before{opacity:1}
  .flip:not(.held) .face.front{animation:fade-in 200ms linear backwards}
  .flip .flip-inner{transform-style:flat}
  .flip:not(.held) .face.back{display:none}
  .flip{animation:fade-in 200ms linear backwards}
  .flip.leaving,.flip.fold,.flip.chosen-out{display:none}
  .timebar{display:none}
}

.stage > .hint{width:100%;max-width:420px}
/* "בוחרים אחת": two landscape cards, dealt face-down and turned together. */
.pick,.pick-out{display:flex;flex-direction:column;gap:14px;width:100%;flex:1;min-height:0;justify-content:center;position:relative}
:is(.pick,.pick-out) .opt{height:auto;aspect-ratio:auto;width:100%;flex:0 1 200px;min-height:132px;max-height:220px;border:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:start}
:is(.pick,.pick-out) .opt .card{justify-content:center;gap:10px;padding:22px 22px 20px}
:is(.pick,.pick-out) .opt::before{border-radius:var(--r-card)}
:is(.pick,.pick-out) .opt .card::after{inset:7px;border-radius:13px}
:is(.pick,.pick-out) .opt .qtext{display:block;font-size:calc(24px * var(--fs));font-size:calc(clamp(24px,8cqw,30px) * var(--fs))}
:is(.pick,.pick-out) .opt .tag{font-size:calc(15px * var(--fs));font-weight:600;display:flex;align-items:center;gap:6px}
:is(.pick,.pick-out) .opt[disabled]{cursor:default}
:is(.pick,.pick-out) .opt:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:var(--r-card)}
:is(.pick,.pick-out) .opt .seal{width:auto;height:62%;aspect-ratio:1}
:is(.pick,.pick-out) .opt .seal b{font-size:clamp(28px,9cqw,44px)}
:is(.pick,.pick-out) .opt .seal .ico{width:18px;height:18px}
:is(.pick,.pick-out) .opt:nth-child(2){--wait:90ms}
.hands{font-size:calc(16px * var(--fs));color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-tag);padding:6px 12px;width:max-content;max-width:100%;text-align:center}
.hands .namelist bdi{font-weight:600}
.hands:empty{display:none}
.reacts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.reacts:empty{display:none}
.pill{font:inherit;font-size:calc(15px * var(--fs));font-weight:600;padding:8px 14px;border-radius:var(--r-btn);border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;min-height:44px}
.pill.on{background:var(--ink);color:var(--bg);border-color:transparent}
.pill:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.actions{display:flex;flex-direction:column;gap:10px}
.actions:empty{display:none}
/* A primary action that must stay in reach while the screen above it scrolls (create, lobby, a mini-game's next). */
.cta-stick,#mini-actions:has(> .btn.primary){position:sticky;inset-block-end:0;z-index:3;padding-block:10px calc(8px + env(safe-area-inset-bottom,0px));margin-block:-10px calc(-8px - env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 72%,transparent)}
/* Choosing whom the card goes to: the seat grid, with the ones already past their turn stepping back. */
.passto .seats{width:100%}
.passto .seat.was{opacity:.55}
/* The table's five seconds on a swap request: a sheet from the bottom with a draining bar and one big "no". */
.veto{position:fixed;inset-inline:0;inset-block-end:0;z-index:45;background:var(--surface);color:var(--ink);border-start-start-radius:22px;border-start-end-radius:22px;box-shadow:0 -8px 30px rgba(0,0,0,.18);padding:10px 20px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;text-align:start;overflow:hidden}
.veto .bar{position:absolute;inset-block-start:0;inset-inline:0;height:5px;background:var(--accent);transform:scaleX(var(--from,1));transform-origin:var(--start-edge) center}
.veto .title2{margin:0;text-align:start}
.veto .eyebrow{margin-top:8px}
.veto .btn.primary{width:100%}
.veto .link{align-self:center}
.swapwait,.kept{margin:0;min-height:48px;display:flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.kept .ico{width:20px;height:20px}
@keyframes drain-from{from{transform:scaleX(var(--from,1))}to{transform:scaleX(0)}}
@keyframes veto-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: no-preference){
  .veto{animation:veto-in var(--t-ui) var(--ease-enter)}
  .veto .bar{animation:drain-from var(--dur,5000ms) linear forwards}
}
.waitline{font-size:calc(17px * var(--fs));color:var(--muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:.3em;padding-block:4px}
.waitline bdi{color:var(--ink);font-weight:600}
.hosttools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.reacts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:8px;row-gap:8px}
.reacts .pill{padding-inline:6px;border-color:transparent;background:transparent;opacity:.78;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px}
.reacts .pill:active,.reacts .pill:focus-visible{opacity:1}
.reacts .pill.hand{opacity:1;text-decoration:none;border-color:var(--line)}
.reacts .pill.hand.on{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pill.hand{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding-inline:4px}
.pill.hand .ico{width:18px;height:18px;flex:none}
.skip-top{display:none}
#toprow-act{display:contents}
.timer-view{font-weight:600;font-size:calc(40px * var(--fs));line-height:1;text-align:center;color:var(--ink)}
.timer-view.over{color:var(--accent)}
.waitline.nextup{font-size:calc(17px * var(--fs));font-weight:600;color:var(--ink)}
/* Short screens (Safari with its bars is ~700px tall, not 844): the card keeps its room. */
@media (max-height: 780px) and (orientation: portrait){
  .app[data-screen="play"]{--foot:80px}
  .stage > .hint{min-height:0}
  .stage > .hint.default,.stage > .hint[aria-hidden="true"]{display:none}
  .playhead{gap:4px}
  .turn,.turn.mine{font-size:calc(26px * var(--fs))}
  #count-label{display:none}
  .skip-top{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;font-size:calc(15px * var(--fs))}
  .skip-full{display:none}
  #actions .row:not(:has(#timer)){display:none}
  #actions:has(#timer){display:grid;grid-template-columns:2fr 3fr;gap:10px}
  #actions:has(#timer) > .row{display:contents}
  #actions:has(#timer) #timer{min-height:60px}
}
@media (max-height: 620px) and (orientation: portrait){
  #level-label{display:none}
  .mebar{font-size:14px;padding-block:2px}
  /* iPhone SE with Safari's bars: the card gets the coaching line's room, and its corners step aside. */
  .app[data-screen="play"]{--foot:64px}
  .stage > .hint.coach{display:none}
  .turn,.turn.mine{font-size:calc(22px * var(--fs))}
  .face.front .corner{display:none}
  .face.front .qtext{padding-block-start:1.6em}
}
.timer.running{border-color:var(--accent);font-variant-numeric:tabular-nums;font-size:calc(24px * var(--fs))}
.timer.over{background:var(--accent);color:var(--on-accent)}

/* העברת טלפון (מצב טלפון אחד) */
.handoff{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;justify-content:center;flex:1}
.bigname{font-family:var(--display);font-weight:400;font-size:clamp(46px,15vw,78px);line-height:1.1;text-wrap:balance;overflow-wrap:anywhere}


/* משחקים קטנים */
#s-mini{gap:14px}
.mini-head{display:flex;flex-direction:column;gap:8px}
/* The question of a mini-game is dealt as a landscape card. */
.qcard{height:auto;aspect-ratio:auto;width:100%;min-height:128px}
.qcard .card{padding:18px 20px 20px;justify-content:center;gap:8px;min-height:118px}
.qcard .card::after{inset:7px;border-radius:13px}
.qcard .tag{display:flex;align-items:center;gap:6px;font-size:calc(15px * var(--fs));font-weight:600}
.qcard .qtext{font-size:calc(26px * var(--fs));font-size:calc(clamp(26px,8.5cqw,34px) * var(--fs))}
.qcard .seal{width:auto;height:70%;aspect-ratio:1}
.qcard .seal b{font-size:clamp(28px,9cqw,44px)}
.qcard .seal .ico{width:18px;height:18px}
.ministep{display:flex;flex-direction:column;gap:12px}
.ministep > .hint{font-size:calc(18px * var(--fs));font-weight:600;color:var(--ink)}
.ministep > .link{align-self:flex-start}
.votes{display:flex;flex-direction:column;gap:8px;position:relative}
/* "בוחרים אחת": the tapped card rises at once, the other steps back (the server's answer then plays the fold). */
:is(.pick,.pick-out) .opt.chosen{scale:1.03}
:is(.pick,.pick-out) .opt.chosen::before{opacity:1}
:is(.pick,.pick-out) .opt.passed{opacity:.55;scale:.97}
@media (prefers-reduced-motion: no-preference){
  :is(.pick,.pick-out) .opt.chosen,:is(.pick,.pick-out) .opt.passed{transition:scale 160ms cubic-bezier(.2,0,0,1),opacity 160ms linear}
  .vopt.picked .cnt .ico{animation:mark-in var(--t-bouncy) var(--spring-bouncy) backwards}
}
@keyframes mark-in{from{scale:0}}
.vopt{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:calc(18px * var(--fs));font-weight:600;cursor:pointer;text-align:start;overflow:hidden;min-height:64px;-webkit-user-select:none;user-select:none}
.vopt .nm{position:relative;flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:6px}
.vopt .nm .ico{width:18px;height:18px;color:var(--ink)}
.vopt .sub{flex-basis:100%;display:block;font-weight:400;font-size:calc(15px * var(--fs));color:var(--muted)}
.vopt .cnt{position:relative;display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;color:var(--muted);flex:none;font-size:calc(15px * var(--fs))}
/* Hot seat answers carry a number, so the table can say "three" out loud. */
.vopt .idx{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:calc(15px * var(--fs));font-weight:600;color:var(--ink);background:var(--surface)}
.vopt .cnt .ico{width:18px;height:18px}
.vopt.picked{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.vopt.picked .cnt{color:var(--ink);font-weight:600}
.vopt[disabled]{cursor:default}
.vopt[disabled]:not(.picked){opacity:.9}
.vopt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.vopt.answer .nm{font-family:var(--serif);font-weight:500;font-size:calc(19px * var(--fs))}
.receipt{display:flex;align-items:center;gap:6px;font-size:calc(17px * var(--fs));font-weight:600}
.receipt .ico{width:20px;height:20px}
.answerbox{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.answerbox .link{align-self:flex-start}
.answerbox textarea{resize:none;min-height:72px}

/* Waiting panel: a live count and everyone at the table, ticked when done. */
.waiting{display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;border-radius:var(--r-btn);border:1px dashed var(--line)}
.wcount{font-size:calc(17px * var(--fs));color:var(--muted)}
.wcount b{font-size:calc(30px * var(--fs));line-height:1;color:var(--ink);font-weight:600;margin-inline-end:2px}
.roster{display:flex;flex-wrap:wrap;gap:6px}
.rtag{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 10px;border-radius:var(--r-tag);border:1.5px solid var(--ink);font-size:calc(17px * var(--fs));font-weight:600;color:var(--ink);background:transparent}
.rtag.done{border-color:transparent;background:var(--surface-2);color:var(--muted);font-weight:400}
.rtag .ico{width:16px;height:16px}
.rtag.off{border-style:dashed}
.rtag small{font-size:calc(14px * var(--fs));font-weight:400;color:var(--muted)}
/* "Still thinking" is a small pulsing dot beside the name, never a fading name. */
.thinking{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1.5px var(--ink);flex:none}
.wnote{font-size:calc(16px * var(--fs));color:var(--muted)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(.55)}}
@media (prefers-reduced-motion: no-preference){ .thinking{animation:breathe 1.4s ease-in-out infinite} }
.spot{display:flex;flex-direction:column;align-items:center;gap:6px;padding-block:18px 8px;text-align:center}
.spot > .ico{width:34px;height:34px;color:var(--muted)}
.bigname.small{font-size:calc(clamp(38px,11vw,52px) * var(--fs))}

/* Results rows: a bar that grows from the start edge, a count, and the names behind it. */
.results{gap:0}
.results .vopt,.results .group{cursor:default;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;min-height:58px;padding-inline:10px}
.vopt .bar{position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:.14;transform:scaleX(var(--p,0));transform-origin:var(--start-edge) center;pointer-events:none}
.results .vopt.win .bar{opacity:.26}
/* Everyone but the winner gets a real bar along the bottom edge, not a highlighter behind the name. */
.results .vopt:not(.win) .bar{inset-block:auto 0;inset-inline:0;height:5px;border-radius:3px;opacity:.5}
.vopt.res .cnt,.group.res .cnt{font-size:calc(28px * var(--fs));font-weight:600;color:var(--ink);min-width:1.4em;text-align:center;line-height:1}
/* Hot seat: a fake nobody fell for is a quiet quote, no count. */
.vopt.answer.zero .atext{font-weight:500;color:var(--ink)}
.vopt.answer.zero{min-height:52px}
.vopt .gtag{position:relative;flex:none}
.hero-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}
.hero-sub{font-size:calc(16px * var(--fs));color:var(--muted);text-align:center;text-wrap:balance}
.hero-sub .namelist bdi{color:var(--ink);font-weight:600}
/* Winner/real-answer styling reads --rv-* so a staged reveal can hold it neutral until the moment (no spoilers). */
.results .vopt.win,.results .vopt.real,.results .group.win,.results .group.pinkg{border-radius:var(--r-btn);border-bottom-color:transparent;margin-block:2px}
.vopt.win,.vopt.real{box-shadow:inset 0 0 0 var(--rv-ring,2px) var(--rv-line,var(--accent))}
.vopt.win .nm > bdi{font-family:var(--rv-font,var(--display));font-weight:400;font-size:calc(var(--rv-size,22px) * var(--fs))}
.vopt.answer.res .atext{font-family:var(--serif);font-weight:500;font-size:calc(18px * var(--fs))}
.vopt.real .atext{font-size:calc(var(--rv-size,21px) * var(--fs))}
.groups{display:flex;flex-direction:column;gap:8px}
.group{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--surface);min-height:64px}
.group .gmain{flex:1;min-width:0;display:flex;flex-direction:column}
.group .txt{font-weight:600;font-size:calc(19px * var(--fs))}
.group .sub{font-size:calc(15px * var(--fs));color:var(--muted)}
.group.win{box-shadow:inset 0 0 0 var(--rv-ring,2px) var(--rv-line,var(--accent))}
.gtag{display:inline-flex;align-items:center;gap:4px;font-size:calc(14px * var(--fs));font-weight:600;padding:4px 8px;border-radius:var(--r-tag);background:var(--surface-2);color:var(--ink);white-space:nowrap}
.gtag .ico{width:15px;height:15px}
.gtag.pink{background:#F4C6D6;color:#5A1830}
.group.pinkg{box-shadow:inset 0 0 0 var(--rv-ring,2px) var(--rv-pink,#E59AB6)}
.meline{display:flex;align-items:flex-start;gap:10px;font-family:var(--serif);font-weight:500;font-size:calc(23px * var(--fs));line-height:1.3;color:var(--ink);text-wrap:pretty}
.meline .ico{width:22px;height:22px;margin-top:5px;color:var(--accent);flex:none;filter:drop-shadow(0 0 .5px var(--ink))}
.meline .who{font-family:var(--display);font-weight:400}
.winnote{font-size:calc(18px * var(--fs));text-align:center;color:var(--ink);text-wrap:balance;margin-top:-6px}
.winnote .namelist bdi,.winnote .who{font-family:var(--display);font-weight:400;font-size:1.2em}
.moments{display:flex;flex-direction:column;gap:6px}
.moment{font-family:var(--serif);font-weight:500;font-size:calc(19px * var(--fs));line-height:1.35;color:var(--ink);text-wrap:pretty}
.moment .who{font-family:var(--display);font-weight:400}
/* Family awards: the name under a spotlight. */
.award-hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 12px 16px;text-align:center;isolation:isolate}
.award-hero::before{content:"";position:absolute;inset:-24px -8px;z-index:-1;background:radial-gradient(closest-side,var(--spot) 0,transparent 100%);opacity:.9}
.rhero{padding:6px 12px 4px}
.rhero:not(.spot)::before{display:none}
.rhero > .ico{width:26px;height:26px;color:var(--muted)}
.rhero .award-name{font-size:calc(clamp(38px,11vw,50px) * var(--fs))}
.rhero.serif .award-name{font-family:var(--serif);font-weight:500;font-size:calc(clamp(30px,8.8vw,38px) * var(--fs));line-height:1.25}
.hero-count{font-family:var(--ui);font-weight:600;font-size:.4em;color:var(--muted)}
.award-hero > .ico{width:34px;height:34px;color:var(--ink)}
.award-to{font-size:calc(16px * var(--fs));color:var(--muted);font-weight:600}
.award-name{font-family:var(--display);font-weight:400;font-size:calc(clamp(40px,12vw,56px) * var(--fs));line-height:1.1;text-wrap:balance}
@keyframes spot-in{from{opacity:0;transform:scale(.6)}to{opacity:.9;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .reveal.staged .award-hero::before{animation:spot-in 700ms var(--ease-enter) calc(var(--t-hold) + 120ms) backwards}
}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.scorelist{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip.score{background:var(--ink);color:var(--bg);border-color:transparent;font-weight:600;font-variant-numeric:tabular-nums}
.chip.score::before{display:none}

/* The staged reveal: 1.2s of shared suspense, then the result in order, one burst at the end. */
.reveal{position:relative;display:flex;flex-direction:column;gap:12px}
.suspense{display:none}
@keyframes hold-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lift{from{opacity:0}to{opacity:1}}
@keyframes bar-grow{from{transform:scaleX(0)}}
@keyframes uncover{from{transform:none}to{transform:scaleX(0)}}
@keyframes notch-drop{from{translate:0 -14px;opacity:0}}
@keyframes pin-bounce{50%{translate:0 -8px}}
@keyframes pin-in{from{opacity:0;transform:translateX(var(--gx)) translateY(16px)}}
@keyframes neutral-hold{from{--rv-line:transparent;--rv-ring:0px;--rv-font:var(--ui);--rv-size:18px;--rv-pink:transparent}to{--rv-line:transparent;--rv-ring:0px;--rv-font:var(--ui);--rv-size:18px;--rv-pink:transparent}}
@keyframes hero-in{from{opacity:0;transform:scale(.9)}}
@keyframes gate-in{from{visibility:hidden;opacity:0;transform:translateY(8px)}}
@keyframes tok-in{from{scale:0}}
@keyframes stamp{from{scale:1.6;opacity:0}10%{opacity:1}to{scale:1}}
@keyframes ring{from{scale:.6;opacity:.55}to{scale:1.6;opacity:0}}
/* The tally: a pile of tokens during the suspense, then each flies to its row (see runTallies in app.js). */
.pilebox{display:flex;flex-direction:column;align-items:center;gap:10px;padding-block:10px 4px;min-height:84px}
.plabel{font-size:calc(16px * var(--fs));font-weight:600;color:var(--muted)}
.pline{display:block;width:60%;height:2px;border-radius:1px;background:var(--ink);transform-origin:var(--start-edge) center}
.pile{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:280px}
.tok{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.tok .ico{width:14px;height:14px}
.tok.gone{visibility:hidden}
.tok.flying{position:fixed;z-index:35;margin:0;pointer-events:none}
.rhero{position:relative}
.rhero::after{content:"";position:absolute;inset-inline:0;margin-inline:auto;top:58%;width:1.6em;aspect-ratio:1;border:2px solid var(--accent);border-radius:50%;translate:0 -50%;opacity:0;pointer-events:none;font-size:calc(clamp(38px,11vw,50px) * var(--fs))}
.cert.rhero::after{display:none}
/* The family award as a certificate: a card that flips in, readable across the table. */
.cert{height:auto;aspect-ratio:5/4;width:min(100%,320px);align-self:center;margin-block:4px 2px}
.cert .card{justify-content:center;align-items:center;text-align:center;gap:4px;padding:16px 18px}
.cert .card::after{inset:7px;border-radius:13px}
.cert-ico{display:block}
.cert-ico .ico{width:30px;height:30px}
.cert-award{font-family:var(--serif);font-weight:500;font-size:calc(22px * var(--fs));line-height:1.25;text-wrap:balance}
.cert .award-to{font-size:calc(15px * var(--fs));color:inherit}
.cert .award-name{font-size:calc(clamp(40px,12vw,54px) * var(--fs));line-height:1.05}
.cert-foot{font-size:calc(14px * var(--fs));font-weight:600;margin-top:4px}
@media (prefers-reduced-motion: no-preference){
  /* The suspense line floats over the rows' reserved space (hidden until the moment: their order would give it away). */
  .reveal.staged .suspense{position:absolute;z-index:2;top:26px;inset-inline:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:calc(16px * var(--fs));font-weight:600;color:var(--muted);animation:fade-out 140ms linear calc(var(--t-hold) - 140ms) forwards}
  .reveal.staged .suspense i{display:block;width:60%;height:2px;border-radius:1px;background:var(--ink);transform-origin:var(--start-edge) center;animation:hold-line var(--t-hold) linear backwards}
  .reveal.staged .res{animation:lift var(--t-ui) var(--ease-enter) calc(var(--t-hold) + var(--i,0) * 30ms) backwards}
  .reveal.staged .res .sub,.reveal.staged .res .gtag,.reveal.staged .res .nm > .ico{animation:rise-in var(--t-ui) var(--ease-enter) calc(var(--t-hold) + 160ms + var(--i,0) * 30ms) backwards}
  .reveal.staged .res .bar{animation:bar-grow var(--t-count) var(--ease-enter) calc(var(--t-hold) + var(--i,0) * 30ms) backwards}
  .reveal.staged .res.win,.reveal.staged .res.real,.reveal.staged .res.pinkg{animation:neutral-hold 1ms step-end var(--t-hold) backwards,lift var(--t-ui) var(--ease-enter) calc(var(--t-hold) - 40ms) backwards}
  /* The result itself arrives first, the moment the suspense ends. */
  .reveal.staged .rhero:not(.cert){animation:hero-in 460ms var(--ease-enter) var(--t-hold) backwards}
  #mini-actions.gated > .btn.primary{animation:gate-in var(--t-ui) var(--ease-enter) calc(var(--t-hold) + var(--t-count) + 200ms) backwards}
  /* The winner lands like a stamp, with a ring (the moment of the reveal). */
  .reveal.staged .rhero:not(.cert) .award-name{animation:stamp var(--t-pop) var(--spring-pop) var(--t-hold) backwards}
  .reveal.staged .rhero:not(.cert)::after{animation:ring 420ms cubic-bezier(.2,.7,.3,1) calc(var(--t-hold) + 200ms)}
  /* The tally: tokens pop in during the suspense; the rows appear at the end of it in seat order. */
  .reveal.tally .tok{animation:tok-in var(--t-bouncy) var(--spring-bouncy) calc(150ms + var(--j,0) * 70ms) backwards}
  .reveal.tally .pline{animation:hold-line var(--t-hold) linear backwards}
  .reveal.tally:not(.done) .plabel{animation:fade-out 140ms linear calc(var(--t-hold) - 140ms) forwards}
  .reveal.tally:not(.done) .res{animation:lift var(--t-ui) var(--ease-enter) calc(var(--t-hold) + var(--i,0) * 40ms) backwards}
  .reveal.tally .vopt .bar{transition:transform 260ms var(--spring-snappy)}
  /* Done: the winner is stamped in, the lines follow. */
  .reveal.tally.done .rhero:not(.cert) .award-name{animation:stamp var(--t-pop) var(--spring-pop) backwards}
  .reveal.tally.done .rhero:not(.cert)::after{animation:ring 420ms cubic-bezier(.2,.7,.3,1) 200ms}
  .reveal.tally.done .rhero .award-to,.reveal.tally.done .rhero > .ico{animation:rise-in var(--t-ui) var(--ease-enter) backwards}
  .reveal.tally.done .late{animation:rise-in var(--t-ui) var(--ease-enter) calc(420ms + var(--i,0) * 40ms) backwards}
  .reveal.tally.done .res .sub,.reveal.tally.done .res .nm > .ico{animation:rise-in var(--t-ui) var(--ease-enter) calc(300ms + var(--i,0) * 30ms) backwards}
  /* An award: the rows stay neutral until the certificate has turned over, so the list never rings the winner first. */
  .reveal.tally.done.awards .res.win{animation:neutral-hold 1ms step-end calc(var(--t-deal) + var(--t-card) * var(--swap)) backwards}
  .reveal.tally.done.awards .res .sub,.reveal.tally.done.awards .res .nm > .ico{animation-delay:calc(var(--t-deal) + var(--t-card) * var(--swap) + 120ms + var(--i,0) * 30ms)}
  .reveal.staged .late{animation:rise-in var(--t-ui) var(--ease-enter) calc(var(--t-hold) + var(--t-count) + var(--i,0) * 40ms) backwards}
  /* The reveal: a cover lifts off the scale (the Wavelength moment); the target notch drops as it passes. */
  .reveal.staged .spectrum .cover{transform:none;animation:uncover 520ms cubic-bezier(.7,0,.2,1) calc(var(--t-hold) + 250ms) forwards}
  .reveal.staged .spectrum .marker.target{animation:notch-drop var(--t-bouncy) var(--spring-bouncy) calc(var(--t-hold) + var(--drop,500ms)) backwards}
  .reveal.staged .spectrum .guess.best b{animation:pin-bounce 280ms ease-out calc(var(--t-hold) + 900ms) 2}
  /* On the wave the result waits for the cover to lift (the pins show first, then the target, then who won). */
  .reveal.staged.wave .rhero:not(.cert){animation-delay:calc(var(--t-hold) + 820ms)}
  .reveal.staged.wave .rhero:not(.cert) .award-name{animation-delay:calc(var(--t-hold) + 820ms)}
  .reveal.staged.wave .rhero:not(.cert)::after{animation-delay:calc(var(--t-hold) + 1020ms)}
  .reveal.staged.wave .late{animation-delay:calc(var(--t-hold) + 1100ms + var(--i,0) * 40ms)}
  #mini-actions.gated.wavegate > .btn.primary{animation-delay:calc(var(--t-hold) + 1400ms)}
  .reveal.staged.wave .legend .lrow{animation-delay:calc(var(--t-hold) + 1000ms + var(--i,0) * 30ms)}
  .reveal.staged .spectrum .guess{animation:pin-in var(--t-ui) var(--ease-enter) calc(var(--t-hold) + var(--i,0) * 30ms) backwards}
  .reveal.staged .legend .lrow{animation:rise-in var(--t-ui) var(--ease-enter) calc(var(--t-hold) + 500ms + var(--i,0) * 30ms) backwards}
}

/* על הגל: the scale starts on the right (RTL). Positions are measured from the inline-start edge. */
.spectrum{display:flex;flex-direction:column;gap:10px;width:100%}
.spectrum .labels{display:flex;justify-content:space-between;font-family:var(--display);font-size:calc(22px * var(--fs))}
.spectrum .track{position:relative;height:64px;border-radius:12px;touch-action:none;cursor:pointer;background-color:var(--surface);background-image:repeating-linear-gradient(to left,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%);box-shadow:inset 0 0 0 1.5px var(--ink)}
.reveal .spectrum .track{margin-bottom:calc(var(--rows,2) * 28px + 10px)}
.spectrum .guess.tick::after{height:12px}
/* A taller track for whoever holds the target; a generous touch area around every track. */
.spectrum .track.tall{height:88px}
.spectrum .track::before{content:"";position:absolute;inset:-12px 0}
/* The target as bands matching the words (באזור, קרוב, צעד, בול), clipped to the track. */
.spectrum .bands{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.spectrum .band{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--at) * 1% - var(--w) * .5%);width:calc(var(--w) * 1%);background:var(--accent)}
.spectrum .band.b1{opacity:.12}
.spectrum .band.b2{opacity:.3}
.spectrum .band.b3{opacity:.6}
.spectrum .tlabel{position:absolute;bottom:6px;inset-inline-start:calc(var(--at) * 1%);translate:50% 0;padding:2px 8px;border-radius:var(--r-tag);background:var(--ink);color:var(--bg);font-size:calc(14px * var(--fs));font-weight:600;white-space:nowrap;pointer-events:none}
/* The cover that lifts off at the reveal. */
.spectrum .cover{position:absolute;inset:0;border-radius:inherit;background-color:var(--surface);background-image:repeating-linear-gradient(to left,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%);box-shadow:inset 0 0 0 1.5px var(--ink);transform:scaleX(0);transform-origin:var(--end-edge) center;pointer-events:none}
.spectrum .track .wave-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.spectrum:has(.wave-range:focus-visible) .track{outline:3px solid var(--ink);outline-offset:4px}
.spectrum .marker{position:absolute;top:-6px;bottom:-6px;inset-inline-start:calc(var(--at) * 1%);width:6px;margin-inline-start:-3px;border-radius:3px;background:var(--ink)}
/* The target is a notch from the top (the bands underneath carry the distance words). */
.spectrum .marker.target{bottom:auto;height:28px;background:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)}
.spectrum .marker.mine{width:10px;margin-inline-start:-5px;box-shadow:0 0 0 3px var(--bg)}
/* Name pins hang under the track (the pole names sit above it), stacked into rows when guesses cluster.
   Near an edge the label anchors to that edge so it never leaves the screen (--gx is the RTL shift). */
.spectrum .guess{--gx:50%;position:absolute;top:100%;inset-inline-start:calc(var(--at) * 1%);display:flex;flex-direction:column-reverse;align-items:center;transform:translateX(var(--gx)) translateY(4px);pointer-events:none}
.spectrum .guess.edge-far{--gx:100%;align-items:flex-end}
.spectrum .guess.edge-near{--gx:0%;align-items:flex-start}
.spectrum .guess::after{content:"";width:2px;height:calc(var(--row,0) * 28px + 14px);background:var(--ink);opacity:.5}
.spectrum .guess b{font-size:calc(14px * var(--fs));font-weight:600;padding:2px 7px;border-radius:var(--r-tag);background:var(--surface);border:1px solid var(--line);white-space:nowrap}
.spectrum .guess.best b{background:var(--ink);color:var(--bg);border-color:transparent}

.nudge{display:flex;justify-content:space-between;gap:10px}
.nudge .btn{flex:1;gap:6px}
.nudge .ico{width:18px;height:18px}
.legend{display:flex;flex-direction:column;gap:4px}
.lrow{display:flex;align-items:baseline;gap:8px;padding:6px 10px;border-radius:var(--r-tag);font-size:calc(16px * var(--fs))}
.lrow .who{font-weight:600;flex:1}
.lrow .dw{color:var(--muted)}
.lrow .dw{display:inline-flex;align-items:center;gap:6px}
.lrow .sw{width:10px;height:10px;border-radius:2px;background:var(--accent);flex:none}
.lrow .sw.b0{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.lrow .sw.b1{opacity:.25}
.lrow .sw.b2{opacity:.45}
.lrow .sw.b3{opacity:.7}
.lrow.win{background:var(--surface-2)}
.lrow.win .who{font-family:var(--display);font-weight:400;font-size:1.15em}
.menu{display:flex;flex-direction:column;gap:8px}

/* ---------- The curtain: between levels the whole screen is the back of the next level's cards ---------- */
html[data-phase="between"]{--bg:var(--lvl)}
html[data-phase="between"] body{background-image:var(--pat)}
html[data-phase="between"] .app{--ink:var(--on-accent);--muted:var(--on-accent);--line:var(--on-accent);color:var(--on-accent)}
.curtain{gap:14px}
.curtain .eyebrow{color:var(--on-accent);font-size:calc(16px * var(--fs))}
.curtain-seal{display:flex;justify-content:center}
.curtain-seal .seal{width:132px;height:132px;gap:6px;border-width:2.5px;background:transparent;box-shadow:0 0 0 8px var(--accent),0 0 0 9.5px currentColor}
.curtain-seal .seal b{font-size:68px}
.curtain-seal .seal .ico{width:24px;height:24px}
.curtain .title2{font-size:calc(clamp(42px,12.5vw,58px) * var(--fs))}
.curtain .lede{color:var(--on-accent)}
.curtain .note{color:var(--on-accent);font-size:calc(18px * var(--fs));text-align:start;text-wrap:pretty}
/* Running text inside centered screens still reads from the right. */
.confirm,.note-banner{text-align:start}
.curtain .menu{width:100%;margin-top:10px}
.curtain .btn.primary{background:var(--on-accent);color:var(--accent)}
.curtain .btn.ghost{color:var(--on-accent);border-color:var(--on-accent)}
.curtain .morebtns summary{color:var(--on-accent);justify-content:center}
.curtain .morebtns[open]{gap:10px}
@supports (color: color-mix(in oklab, red, blue)){ .curtain .btn.ghost{border-color:color-mix(in oklab, var(--on-accent) 55%, transparent)} }
.curtain .menu .btn small{color:inherit}
.curtain .btn:focus-visible{outline-color:var(--on-accent)}
/* The host's pacing line, and the guest's note reminder, drawn in the curtain's own ink. */
.curtain-info{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px;text-align:center}
.curtain-info .opener,.curtain-info .summary{color:var(--on-accent);font-size:calc(17px * var(--fs));font-weight:600;text-wrap:balance}
.curtain-info .opener .who{font-family:var(--display);font-weight:400;font-size:1.15em}
.curtain-info .meline{color:var(--on-accent);text-align:start}
.curtain-info .meline .ico{color:var(--on-accent);filter:none}
.curtain .pace{color:var(--on-accent);font-size:calc(17px * var(--fs));font-weight:600;text-align:center}
.curtain .notebox{background:transparent;border-color:var(--on-accent);text-align:start;margin-top:8px}
.curtain .notebox .eyebrow{font-size:calc(16px * var(--fs))}
.curtain .notebox .in{background:var(--on-accent);color:var(--accent);border-color:transparent}
.curtain .notebox .in::placeholder{color:var(--accent);opacity:.7}
.curtain .notebox .btn.small{background:transparent;color:var(--on-accent);border-color:var(--on-accent)}
.notebox .row > .btn{flex:0 0 auto}
.notebox.compact{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.notebox.compact:has(.in){flex-direction:column;align-items:stretch}
@keyframes seal-in{from{opacity:0;transform:scale(.84) rotate(-10deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  /* The color leads (half way at 400ms); the seal and the level name land on its last third, then the words and the choices. */
  .curtain > *{animation:rise-in var(--t-ui) var(--ease-enter) backwards}
  .curtain > .eyebrow{animation-delay:380ms}
  .curtain > .curtain-seal{animation:seal-in 460ms var(--ease-enter) 420ms backwards}
  .curtain > .title2{animation-delay:460ms}
  .curtain > .lede{animation-delay:510ms}
  .curtain > .menu{animation-delay:570ms}
}
@media (prefers-reduced-motion: reduce){
  /* No sweeps: every screen change is a short cross-fade. */
  .screen:not([hidden]){animation:fade-in 200ms linear}
}
.menu .btn{justify-content:space-between}
.menu .btn small{font-weight:400;color:var(--muted);font-size:calc(15px * var(--fs))}
.menu .btn.primary small{color:inherit}
.winner{font-family:var(--display);font-weight:400;font-size:clamp(30px,9vw,44px);line-height:1.1;text-align:center;text-wrap:balance}
/* Closing ritual */
#s-closing .stack{gap:14px}
.ritual{height:auto;aspect-ratio:auto;width:min(100%,360px);align-self:center;min-height:220px}
.ritual .card{min-height:220px;padding:54px 24px 46px}
.ritual .qtext{font-size:calc(clamp(24px,8.4cqw,32px) * var(--fs))}
.ritual .seal{width:34cqw}
.ritual-turn{min-height:1.2em}
@media (prefers-reduced-motion: no-preference){ .ritual-turn{animation:rise-in var(--t-ui) var(--ease-enter)} }
.ritual-seats{display:flex;gap:3px;height:8px;width:min(100%,360px);align-self:center}
.ritual-seats .chip{flex:1;height:100%;padding:0;border:0;border-radius:2px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);max-width:none}
.ritual-seats .chip::before{display:none}
.ritual-seats .chip.done{background:var(--ink);opacity:.55;box-shadow:none}
.ritual-seats .chip.now{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--ink)}
.title2.start{text-align:start}
/* Secret notes: face-down paper that opens with the card flip. */
.notes-list{display:flex;flex-direction:column;gap:12px;text-align:start}
.notecard{height:auto;aspect-ratio:auto;width:100%;min-height:124px;border:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:start}
.notecard::before{border-radius:16px}
.notecard .face{border-radius:16px}
.notecard .card{padding:18px 20px;justify-content:center;gap:6px;min-height:124px;border-radius:16px}
.notecard .card::after{inset:7px;border-radius:11px}
.notecard .to{display:flex;align-items:center;gap:6px;font-size:calc(15px * var(--fs));font-weight:600;opacity:.9}
.notecard .to .ico{width:16px;height:16px}
.notecard .txt{font-family:var(--serif);font-weight:500;font-size:calc(21px * var(--fs));line-height:1.4}
.notecard .face.back{border-radius:16px}
.notecard .face.back::after{inset:7px;border-radius:11px}
.noteback{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.noteback b{font-family:var(--display);font-weight:400;font-size:calc(26px * var(--fs))}
.noteback small{font-size:calc(15px * var(--fs))}
.noteback i{font-style:normal;font-size:calc(14px * var(--fs));font-weight:600;margin-top:6px;padding:3px 10px;border-radius:var(--r-tag);border:1px solid currentColor}
.notecard.mine::before{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent),var(--shadow-card)}
.notecard.writer::before{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink),var(--shadow-card)}
.lastcall{display:block;font-family:var(--ui);font-size:calc(15px * var(--fs));font-weight:600;color:var(--muted);margin-bottom:2px}
.notecard:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:16px}
/* The end: the last card under a warm spotlight. */
.endstage{position:relative;display:flex;justify-content:center;padding-block:20px;isolation:isolate}
.endstage::before{content:"";position:absolute;inset:-30px -10px;z-index:-1;background:radial-gradient(closest-side,var(--spot),transparent);opacity:.9}
@media (prefers-reduced-motion: no-preference){ .endstage::before{animation:spot-in 900ms var(--ease-enter) 500ms backwards} }
.stats{font-size:calc(15px * var(--fs));color:var(--muted)}
.cover{position:fixed;inset:0;background:var(--bg);z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}

/* טוסטים */
/* Top bar for info/errors; floating words for reactions. The layer never takes taps. */
.toasts{position:fixed;inset:0;pointer-events:none;z-index:50;display:flex;flex-direction:column;align-items:center;gap:6px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 0}
.toast{background:var(--ink);color:var(--bg);font-size:calc(16px * var(--fs));font-weight:600;padding:10px 16px;border-radius:var(--r-btn);max-width:100%}
.toast b{color:inherit;font-weight:600;opacity:.8}
.toast.err{background:#9E2A18;color:#fff}
/* Lanes sit under the question (the lower fifth of the screen), never on the words being read aloud. */
.float{position:absolute;bottom:calc(19% + var(--lift,0px));inset-inline:0;margin-inline:auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:4px}
.float b{font-family:var(--display);font-weight:400;font-size:calc(30px * var(--fs));line-height:1;color:var(--ink);background:var(--surface);padding:8px 16px 10px;border-radius:14px;border:1px solid var(--line)}
.float span{font-size:calc(14px * var(--fs));font-weight:600;color:var(--ink);background:var(--surface);padding:2px 8px;border-radius:var(--r-tag)}
@keyframes float-up{0%{opacity:0;transform:translate(var(--dx),16px) scale(.88)}12%{opacity:1;transform:translate(var(--dx),0) scale(1)}72%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-72px)}}
@keyframes float-fade{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.float{animation:float-fade 1.8s linear forwards}
@media (prefers-reduced-motion: no-preference){
  .float{animation:float-up 1.8s var(--ease-enter) forwards}
  .toast{animation:toast-in var(--t-ui) var(--ease-enter)}
}

/* The phone whose turn it is wears a frame in the level color. */
body::after{content:"";position:fixed;inset:0;border:6px solid var(--accent);pointer-events:none;z-index:39;opacity:0;visibility:hidden}
html[data-turn="mine"] body::after{opacity:1;visibility:visible}
@keyframes frame-on{0%{opacity:0}30%{opacity:1}55%{opacity:.3}80%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion: no-preference){ html[data-turn="mine"] body::after{animation:frame-on 900ms var(--ease-enter)} }
.waitline{flex-direction:column;gap:0}
.waitline .nextup{font-size:calc(15px * var(--fs));font-weight:600;color:var(--ink)}
.hands{display:inline-flex;align-items:center;gap:6px}
.hands .ico{width:18px;height:18px}

/* One-phone handoff: a small stage with the waiting card and the next name. */
.cover.handoff{gap:14px;background:var(--bg)}
.cover.handoff .backcard{width:112px;aspect-ratio:5/7;margin-block:6px 4px}
.passto{font-size:calc(17px * var(--fs));color:var(--muted);font-weight:600}
.cover.handoff .bigname{margin-top:-6px}
.cover.handoff .btn.big{max-width:420px;margin-top:10px}
.covertools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:6px}
.covertools .link{font-size:calc(15px * var(--fs))}
.hint.center{text-align:center}
.conn{position:fixed;z-index:60;top:calc(8px + env(safe-area-inset-top,0px));inset-inline:12px;margin-inline:auto;width:fit-content;max-width:calc(100% - 24px);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--r-btn);background:var(--ink);color:var(--bg);font-size:calc(17px * var(--fs));font-weight:600}
.conn.long{flex-wrap:wrap;justify-content:center;text-align:center;padding:14px 16px}
.conn .btn{background:var(--bg);color:var(--ink)}
.conn-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: no-preference){ .conn-dot{animation:blink 1.2s ease-in-out infinite} }

@media (prefers-reduced-motion: reduce){
  .vopt .bar{transition:none}
  .toast{animation:fade-in 200ms linear}
}

/* A phone lying on the table rotates: the card takes a full-height column beside everything else. */
@media (orientation: landscape) and (max-height: 520px){
  /* Physical on purpose: in landscape the notch sits on a physical side, whatever the text direction. */
  .app{max-width:none;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
  #s-play{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:22px;row-gap:10px}
  /* The card box is a size container (no intrinsic width), so its column gets an explicit width from the height. */
  #s-play .stage{grid-column:1;grid-row:1 / -1;width:min(44vw, calc((100dvh - 96px) * .714))}
  #s-play .stage > .hint{display:none}
  #s-play .playhead,#s-play .turn,#s-play .playfoot{grid-column:2}
  #s-play .turn{text-align:start}
}
@media (prefers-contrast: more){
  :root{--muted:var(--ink)}
  .btn.ghost,.seat,.vopt,.in,.chip{border-color:currentColor}
}

/* Reconnecting: what cannot work offline dims and stops taking taps; the bar gets its own space at the top. */
html.offline .app{padding-top:calc(72px + env(safe-area-inset-top, 0px))}
html.offline :is(.actions,.votes,.reacts,.seats,#between-menu,.answerbox,.spectrum,.notes-list,.share,.notebox){opacity:.45;pointer-events:none}
.btn.text{background:transparent;border-color:transparent;color:var(--ink);gap:6px}
.btn.text .ico{width:19px;height:19px}
.share{justify-content:space-between}
.lede.status{display:block;color:var(--ink);font-family:var(--ui);font-weight:600;font-size:calc(18px * var(--fs));text-align:start}
.lede.status .ico{width:20px;height:20px;vertical-align:-3px;margin-inline-end:4px}
#lobby-hero{align-items:flex-start;text-align:start}
#lobby-hero .lede{margin-inline:0}

/* The end of the evening: the keepsake image for the family group, your evening, the note about you. */
.keepsake{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.keepsake-img{width:min(64%,300px);height:auto;border-radius:18px;box-shadow:var(--shadow-card);-webkit-touch-callout:default;user-select:auto}
/* Until the picture is drawn, its slot is a face-down card of the last level, not an empty box. */
.keepsake-wait{width:min(64%,300px);aspect-ratio:4/5;display:grid;place-items:center;border-radius:18px;background-color:var(--lvl3);background-image:var(--paper);background-size:256px;background-blend-mode:soft-light;color:var(--on-lvl3);font-weight:600;font-size:calc(15px * var(--fs));padding:16px;box-shadow:var(--shadow-card)}
.yours{display:flex;flex-direction:column;gap:10px;text-align:start;width:100%;padding-top:6px;border-top:1px solid var(--line)}
.yours .meline{font-size:calc(20px * var(--fs))}
.aboutme{display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:start;width:100%;padding:16px;border-radius:var(--r-card);background:var(--lvl3);color:var(--on-lvl3)}
.aboutme .eyebrow{color:inherit}
.aboutme-txt{font-family:var(--serif);font-weight:500;font-size:calc(22px * var(--fs));line-height:1.4;text-wrap:pretty}
.aboutme .btn.ghost{color:inherit;border-color:currentColor;align-self:flex-start}
.aboutme .keepsake-img.note{align-self:center}
.endlinks{display:flex;justify-content:space-around;gap:12px;flex-wrap:wrap}
.cover.evening{gap:14px}
.cover.evening .keepsake-img{width:min(78%,380px)}
@media (prefers-reduced-motion: no-preference){
  .keepsake-img{animation:rise-in var(--t-ui) var(--ease-enter) backwards}
  .yours .meline{animation:rise-in var(--t-ui) var(--ease-enter) calc(200ms + var(--i,0) * 40ms) backwards}
}

/* Haptics on iPhone: the switch stays native (the tick belongs to it) and hidden; the label covers the button. */
.hx-switch{position:fixed;inset-block-end:0;inset-inline-start:0;width:1px;height:1px;margin:0;visibility:hidden}
.btn,.pill,.vopt{position:relative}
.hx{position:absolute;inset:0;border-radius:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled .hx{display:none}
/* The "אני" bar: big text and sound, one tap away on every screen. */
.iconbtn{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;font:inherit}
.iconbtn .ico{width:22px;height:22px}
.iconbtn[aria-pressed="true"]{color:var(--ink);background:var(--surface-2)}
.iconbtn.aa span{font-family:var(--display);font-size:16px;line-height:1}
.iconbtn.aa b{font-weight:400;font-size:1.3em}
.iconbtn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mebar-links{align-items:center}
.mebar{flex-wrap:wrap}
.wakehint{flex-basis:100%;min-height:44px;text-align:center;font-size:calc(15px * var(--fs))}
.mebar .me{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mebar-links .link{white-space:nowrap}
.pref small{display:block;font-size:calc(14px * var(--fs));font-weight:400;color:var(--muted)}
/* In the dark the card is the lamp: a faint glow of its own colour around it. */
@media (prefers-color-scheme: dark){
  .flip.settled::before,.flip.held::before{box-shadow:var(--shadow-card),0 0 90px -24px var(--accent)}
}
/* The question sized by its length, so a short question fills the card and a long one still fits. */
.card .qtext[data-len="s"]{font-size:calc(clamp(32px,17cqw,52px) * var(--fs));line-height:1.22}
.card .qtext[data-len="m"]{font-size:calc(clamp(28px,14.5cqw,44px) * var(--fs));line-height:1.25}
/* The pink cow: a sticker that stamps onto the lone answer (and onto your line if it is yours). */
.cow{width:24px;height:24px;flex:none;object-fit:contain}
.meline .cow{width:34px;height:34px;margin-top:-2px}
@keyframes cow-stamp{0%{scale:.6;opacity:0}60%{scale:1.08;opacity:1}100%{scale:1}}
@media (prefers-reduced-motion: no-preference){
  .reveal.staged .gtag.pink .cow{animation:cow-stamp 220ms var(--spring-pop) calc(var(--t-hold) + 300ms) backwards}
  .reveal.staged .meline .cow{animation:cow-stamp 260ms var(--spring-pop) calc(var(--t-hold) + var(--t-count)) backwards}
}
/* Seats changing hands, the host's tools, the lobby's "who am I". */
.iam{font-family:var(--display);font-size:calc(26px * var(--fs));line-height:1.2}
.iam b{font-weight:400}
.lede.status .link{font-family:var(--ui);font-size:calc(15px * var(--fs));font-weight:600}
.note-banner{background:var(--ink);color:var(--bg);font-weight:600}
.handover{width:100%;max-width:420px;text-align:start}
.handover summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--ink)}
.handover .seats{margin-top:8px}
.standin{font-size:calc(15px * var(--fs));color:var(--ink);text-align:center}
.noseat{grid-column:1 / -1;text-align:center;font-size:calc(16px * var(--fs));color:var(--muted)}
.stopconfirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;font-size:calc(15px * var(--fs))}
.stoplink{margin-top:14px}
/* Reactions as stamps: a line icon in a circle, the word under it (no emoji). */
.reacts .pill.stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;padding:4px 2px;border-color:transparent;background:transparent;text-decoration:none;opacity:1}
.stamp .dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--ink)}
.stamp .dot .ico{width:24px;height:24px}
.stamp .w{font-size:calc(14px * var(--fs));font-weight:600;line-height:1.1;white-space:nowrap}
.reacts .pill.stamp.hand{border-color:transparent}
.reacts .pill.stamp.hand .dot{box-shadow:inset 0 0 0 1.5px var(--line)}
.reacts .pill.stamp.hand.on{background:transparent;box-shadow:none}
.reacts .pill.stamp.hand.on .dot{background:var(--ink);color:var(--bg)}
@media (max-height: 780px) and (orientation: portrait){
  .app[data-screen="play"]{--foot:92px}
  .stamp .dot{width:36px;height:36px}
  .stamp .dot .ico{width:20px;height:20px}
  .reacts .pill.stamp{min-height:56px}
}
/* The float carries its icon and, when several people send the same word, a ×N. */
.float b{display:inline-flex;align-items:center;gap:8px}
.float b .ico{width:26px;height:26px}
.float .xn{font-style:normal;font-family:var(--ui);font-weight:600;font-size:.6em;color:var(--muted)}
.float .xn:empty{display:none}
/* What the table gave you while you spoke: a private line for a few seconds. */
.toast.got{display:flex;align-items:flex-start;gap:8px;max-width:420px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-family:var(--serif);font-weight:500;font-size:calc(18px * var(--fs));text-align:start}
.toast.got .ico{width:20px;height:20px;flex:none;margin-top:4px;color:var(--accent)}
/* Numbers that roll. */
.roll{position:relative;display:inline-block;overflow:clip;overflow-clip-margin:2px;line-height:1.25;vertical-align:baseline}
.roll b{display:inline-block;font-weight:600;line-height:1.25}
.wcount .roll b{font-size:calc(30px * var(--fs));color:var(--ink)}
@keyframes roll-in{from{transform:translateY(60%);opacity:0}}
@keyframes tag-done{from{scale:.92}}
@keyframes last-ring{0%{opacity:.8;scale:1}100%{opacity:0;scale:1.25}}
@keyframes pop-in{from{scale:.9;opacity:0}}
@keyframes bar-tick{0%{scale:1 1}18%{scale:1 2.4}40%{scale:1 1}}
@media (prefers-reduced-motion: no-preference){
  .roll b{animation:roll-in 260ms var(--spring-snappy)}
  .rtag.done{animation:tag-done 240ms var(--ease-enter)}
  .rtag.done .ico{animation:mark-in var(--t-bouncy) var(--spring-bouncy) backwards}
  .rtag.last{position:relative}
  .rtag.last::after{content:"";position:absolute;inset:-3px;border-radius:calc(var(--r-tag) + 3px);box-shadow:0 0 0 1.5px var(--accent);animation:last-ring 900ms ease-out 2;opacity:0;pointer-events:none}
  .cardbox .hands{animation:pop-in 220ms var(--spring-snappy)}
  .timebar.tick{animation:drain var(--dur) linear var(--delay) forwards,bar-tick 1s linear infinite}
}
.thinking{animation-iteration-count:5!important}
.timer.last5{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
/* The join screen wears a small hand of cards, so a guest's first screen looks like the game. */
.fan.small{height:118px;margin:0 auto 4px;width:220px}
.fan.small .fancard{width:64px;border-radius:9px;inset-inline-start:calc(50% - 32px);top:8px}
.fan.small .fancard::after{inset:4px;border-radius:6px}
.fan.small .fancard .seal{width:34px;height:34px;box-shadow:0 0 0 3px var(--c)}
.fan.small .fancard .seal b{font-size:18px}
.fan.small .fancard.l1{transform:translateX(52px) translateY(10px) rotate(13deg)}
.fan.small .fancard.l3{transform:translateX(-52px) translateY(10px) rotate(-13deg)}
#s-join.screen.center{justify-content:flex-start;padding-top:24px}
/* Teaching the evening in three lines (lobby, read aloud by the host). */
.howto-lines{display:flex;flex-direction:column;gap:8px;text-align:start}
.howline{display:flex;align-items:flex-start;gap:10px;font-size:calc(17px * var(--fs));line-height:1.45;color:var(--ink)}
.howline .ico{width:22px;height:22px;flex:none;margin-top:2px}
.invite summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--ink)}
.invite[open]{display:flex;flex-direction:column;gap:12px}
/* The first turn on this phone: a coach line in ink, and the pass button breathes once. */
.stage > .hint.coach{color:var(--ink);font-weight:600;font-size:calc(17px * var(--fs))}
/* A mini-game's rules on its first question: three steps, the current one in ink. */
.howto{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.howto li{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:var(--r-tag);border:1px solid var(--line);font-size:calc(15px * var(--fs));line-height:1.35;color:var(--muted)}
.howto li b{font-weight:600;font-size:calc(15px * var(--fs))}
.howto li.now{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.howto li .who{font-weight:600}
/* Seats: a free seat is just a name; a taken one a tick; mine ringed. */
.seat .tag .ico{width:18px;height:18px}
.seat.mine{box-shadow:inset 0 0 0 2px var(--ink)}
/* Creating a table: quiet ✕s and a dot per place instead of numbers. */
.namerow .n{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;align-self:center}
.namerow .x{border-color:transparent;color:var(--muted)}
/* Headings take focus on a new screen (for screen readers); only a keyboard shows the ring. */
h1:focus{outline:none}
html[data-kbd] h1:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:6px}
h1.eyebrow{font-weight:600}
/* Focus rings everywhere a keyboard can land. */
.in:focus{outline:none;border-color:var(--ink)}
.in:focus-visible,.x:focus-visible,.mode:focus-visible,.seat:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.link:focus-visible{outline:3px solid currentColor;outline-offset:2px;border-radius:6px}
html[data-phase="between"] :focus-visible{outline-color:var(--on-accent)}
/* More contrast asked for: no dimmed controls, solid borders, a stronger level two in light. */
@media (prefers-contrast: more){
  :root:not([data-theme]){--lvl2:#9A2E19}
  .reacts .pill,.vopt[disabled]:not(.picked),#chips .chip.done,.ritual-seats .chip.done{opacity:1}
  .btn[disabled]{opacity:1;border-style:dashed;border-color:currentColor}
  .card::after{opacity:.5}
  :focus-visible{outline-width:4px}
}
.x .ico{width:18px;height:18px}
.bothways .ico{width:.9em;height:.9em;vertical-align:-.1em;margin-inline:.3em}
#between-eyebrow .ico{width:1em;height:1em;vertical-align:-.15em;margin-inline:.15em}
/* Dim room: the edge of a control (ghost button, option, seat, field) reads at 3:1, dividers stay quiet. */
:root{--line-strong:color-mix(in oklab, var(--line), var(--ink) 38%)}
#app :is(.btn.ghost,.seat,.in,.pref,.pill:not(.stamp),.mode),#app .votes:not(.results) .vopt{border-color:var(--line-strong)}
/* A folded section says it opens: a chevron that turns. */
details > summary{gap:8px;list-style:none}
details > summary::-webkit-details-marker{display:none}
details > summary::after{content:"";width:9px;height:9px;flex:none;margin-inline-start:auto;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;rotate:45deg;translate:0 -2px}
details[open] > summary::after{rotate:-135deg;translate:0 3px}
@media (prefers-reduced-motion: no-preference){ details > summary::after{transition:rotate var(--t-ui) var(--ease-enter),translate var(--t-ui) var(--ease-enter)} }
/* Headings balance their lines; a note reads as prose. */
.iam,.names h1,.rules h2{text-wrap:balance}
.notecard .txt{text-wrap:pretty}