html,body{margin:0}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Layout: one narrow column like a phone held over a majlis rug — seats (cushions) on top, the rug in the middle, your hand at the bottom.
   Look: the Saudi Founding Day palette (brand guideline 2024, pp. 21-24) on a light ground. Sadu appears as one band on an edge
   or as the rug itself (guideline p. 42: patterns sit on an edge, large, light on dark; never small, tilted, or dark on dark).
   Dark sections (.felt, .reveal, .nightBox, .roleCard, .sjOverlay) redefine --fg/--muted/--accent so their insides follow. */
:root{
  /* primary colours */
  --clarity:#F4EADA;     /* الوضوح: page ground */
  --land:#DEC9B2;        /* الأرض: a tone step from the ground */
  --auth:#6B4E45;        /* الأصالة: headings, the primary action */
  --resolve:#231F20;     /* العزم: text, night */
  /* secondary colours: one per game and team */
  --ochre:#BA7747;
  --rose:#D2988F;
  --gold:#F5D758;        /* values and highlights, always with dark text */
  --red:#A32B38;         /* طاولة الكذّاب, team 2 */
  --coral:#E76A58;
  --lilac:#8A77A1;       /* كود نيمز */
  --sage:#8DAD73;
  --teal:#629BA6;        /* سين جيم, team 1; dark text on it (white is 3:1) */
  --bg:var(--clarity);
  --surface:#FBF6EE;     /* panels: white over the ground */
  --sunk:#EFE3D1;        /* quiet fills inside panels */
  --fg:var(--resolve);
  --muted:#7A6259;       /* 4.7:1 on the ground */
  --muted-dk:#DCCFC2;    /* muted text inside dark sections, 4.6:1 on the red rug */
  --line:rgba(107,78,69,.22);
  --accent:var(--auth);  /* gold inside dark sections */
  --team-r:var(--red);
  --team-b:var(--teal);
  --kufi:"Aref Ruqaa","Reem Kufi",serif;
  --cream:#efe4cc;       /* card stock */
  --ink:#201812;
  --steel:#77736b;       /* revolver drawing */
  --steel-dk:#45423d;
  --wood:#6e3b22;
  --hole:#0c0907;
  --sadu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Crect width='32' height='16' fill='%23231F20'/%3E%3Cpath d='M0 0L8 5L16 0ZM16 0L24 5L32 0ZM0 16L8 11L16 16ZM16 16L24 11L32 16Z' fill='%23A32B38'/%3E%3Cpath d='M8 8L16 4L24 8L16 12Z' fill='%23F4EADA'/%3E%3Ccircle cx='16' cy='8' r='1.4' fill='%23A32B38'/%3E%3Cpath d='M0 6L2.5 8L0 10ZM32 6L29.5 8L32 10Z' fill='%23F4EADA'/%3E%3C/svg%3E");
  --rugfield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' fill='%23A32B38'/%3E%3Cpath d='M22 6L38 22L22 38L6 22Z' fill='none' stroke='%23231F20' stroke-width='2' opacity='.5'/%3E%3Cpath d='M22 15L29 22L22 29L15 22Z' fill='%23231F20' opacity='.3'/%3E%3Ccircle cx='22' cy='22' r='2' fill='%23F4EADA' opacity='.7'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23F4EADA' opacity='.5'/%3E%3Ccircle cx='44' cy='0' r='2' fill='%23F4EADA' opacity='.5'/%3E%3Ccircle cx='0' cy='44' r='2' fill='%23F4EADA' opacity='.5'/%3E%3Ccircle cx='44' cy='44' r='2' fill='%23F4EADA' opacity='.5'/%3E%3C/svg%3E");
  --display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect width='12' height='12' fill='%23A32B38'/%3E%3Cpath d='M6 1L11 6L6 11L1 6Z' fill='%23231F20'/%3E%3Cpath d='M6 4L8 6L6 8L4 6Z' fill='%23F4EADA'/%3E%3C/svg%3E");
  color-scheme:light;
}
/* dark sections: the rug, the reveal, the night, a dealt role, the search overlay */
.felt,.reveal,.nightBox,.roleCard,.sjOverlay{--fg:var(--clarity);--muted:var(--muted-dk);--accent:var(--gold);--line:rgba(244,234,218,.25);color:var(--fg)}
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
/* one Sadu band along the top edge of the screen */
body::before{content:"";position:fixed;inset:0 0 auto;height:calc(env(safe-area-inset-top,0px) + 12px);z-index:5;pointer-events:none;background:var(--sadu) 0 100%/24px 12px repeat-x var(--resolve)}
.sadu{height:20px;background:var(--sadu);background-size:40px 20px;border-radius:2px}
body{background-color:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.6;direction:rtl}
#app{max-width:560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:28px 40px;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;line-height:1.25;color:var(--accent)}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
textarea{font:inherit;color:var(--fg);background:#fff;border:1px solid rgba(107,78,69,.3);border-radius:8px;padding:10px 12px;width:100%;min-width:0;resize:vertical;line-height:1.7}
input{font:inherit;color:var(--fg);background:#fff;border:1px solid rgba(107,78,69,.3);border-radius:8px;padding:10px 12px;width:100%;min-width:0}
input::placeholder{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;font-weight:700;background:var(--auth);color:var(--clarity);min-height:48px;transition:filter .15s}
.btn:not(:disabled):hover{filter:brightness(.92)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:var(--land);color:var(--fg)}
.btn.red{background:var(--red);color:var(--clarity)}
.btn.wide{width:100%}
/* on the rug and at night the action is gold */
.felt .btn:not(.ghost),.nightBox .btn:not(.ghost),.reveal .btn:not(.ghost),.sjOverlay .btn:not(.ghost){background:var(--gold);color:var(--resolve)}
.felt .btn.ghost,.nightBox .btn.ghost,.reveal .btn.ghost{background:rgba(35,31,32,.45);color:var(--clarity)}
.muted{color:var(--muted)}
.small{font-size:13px}
.err{color:var(--red);font-size:14px}

/* home */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:-12px}
.hero .scene{display:flex;align-items:flex-end;justify-content:center;gap:6px;padding-top:30px}
/* a game's own colour as the field behind its picture */
.g-liar{--game:var(--red)}.g-code{--game:var(--lilac)}.g-mafia{--game:var(--resolve)}.g-seen{--game:var(--teal)}
.hero .scene[class*="g-"]{background:var(--game);border-radius:20px;padding:26px 30px 18px;margin-top:12px;align-items:center}
.hero .dallah{width:96px;height:auto;flex:none}
.hero .steam path{animation:steam 3.2s ease-in-out infinite}
.hero .steam path:nth-child(2){animation-delay:1.1s}.hero .steam path:nth-child(3){animation-delay:2.1s}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.6}100%{opacity:0;transform:translateY(-14px)}}
.hero h1{font-family:var(--kufi);font-size:54px;line-height:1.3;color:var(--auth)}
.hero .sadu{width:min(320px,80%)}
.hero .tag{color:var(--muted);max-width:34ch}
.fan{display:flex;gap:0;height:100px;justify-content:center}
.fan .card{width:64px;pointer-events:none}
.fan .card:nth-child(1){transform:rotate(12deg) translateY(6px)}
.fan .card:nth-child(2){transform:rotate(4deg);margin-right:-18px}
.fan .card:nth-child(3){transform:rotate(-4deg);margin-right:-18px}
.fan .card:nth-child(4){transform:rotate(-12deg) translateY(6px);margin-right:-18px}
.panel{position:relative;background:var(--surface);border-radius:14px;padding:20px 18px 18px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.panel h2{font-size:20px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>*{flex:1 1 140px}
.names{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--land)}
details.rules{background:var(--surface);border-radius:14px;padding:14px 18px}
details.rules summary{font-family:var(--display);font-size:18px;cursor:pointer;color:var(--accent)}
details.rules ol{margin:10px 0 0;padding-right:20px;display:flex;flex-direction:column;gap:6px}
.code{font-family:var(--display);letter-spacing:6px;font-size:40px;color:var(--clarity);direction:ltr;text-align:center;background:var(--resolve);padding:4px 22px;border-radius:12px}
.note{border-right:3px solid var(--accent);padding:4px 12px;color:var(--muted);font-size:14px}

/* game header */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tableBadge{display:flex;align-items:center;gap:12px}
.tableBadge .sym{width:46px;flex:none;aspect-ratio:1;border-radius:50%;background:var(--cream);border:2px solid var(--accent);overflow:hidden;display:grid;place-items:center;padding:4px}
.tableBadge .sym svg{width:100%;height:auto}
.tableBadge h2{font-size:22px}
.tableBadge .sub{font-size:13px;color:var(--muted)}
.iconBtn{padding:8px 12px;border-radius:8px;font-size:13px;color:var(--fg);background:var(--land)}

/* seats */
.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.seat{position:relative;overflow:hidden;background:var(--surface);border-radius:12px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.seat.turn{background:var(--gold)}
.seat.dead{opacity:.45}
.seat .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .nm small{font-weight:400;color:var(--auth);margin-right:4px}
.seat .meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;color:var(--muted)}
.seat.turn .meta{color:var(--resolve)}
.backs{display:flex;gap:2px;direction:ltr}
.backs i{width:9px;height:13px;border-radius:2px;background:var(--back);background-size:7px;border:1px solid rgba(35,31,32,.55)}
.gun{display:flex;gap:3px;align-items:center;direction:ltr}
.gun i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--auth)}
.gun i.used{background:var(--auth)}
.gun.dead i{border-color:var(--red)}

/* table centre: the Sadu rug */
.felt{position:relative;background:var(--rugfield);background-size:44px;border-radius:6px;padding:40px 20px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
  box-shadow:inset 0 0 0 4px var(--resolve),inset 0 0 0 7px var(--clarity),inset 0 0 0 10px var(--resolve)}
.felt::before,.felt::after{content:"";position:absolute;left:10px;right:10px;height:16px;background:var(--sadu);background-size:32px 16px}
.felt::before{top:10px}.felt::after{bottom:10px}
.felt>*{position:relative}
.felt .status{background:rgba(35,31,32,.62);padding:8px 16px;border-radius:10px;color:var(--clarity)}
.status{font-size:16px}
.status b{color:var(--accent)}
.pile{display:flex;justify-content:center;height:60px;align-items:center}
.pile i{width:38px;height:54px;border-radius:5px;background:var(--back);background-size:10px;border:2px solid var(--gold);margin-left:-26px}
.pile i:last-child{margin-left:0}

/* cards */
.card{position:relative;aspect-ratio:5/7;max-width:100%;border-radius:8px;background:var(--cream);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16% 5% 6%;overflow:hidden;box-shadow:0 1px 3px rgba(35,31,32,.25);transition:transform .15s ease,box-shadow .15s ease;border:2px solid rgba(107,78,69,.3)}
.card::before{content:"";position:absolute;inset:3px;border:1px solid rgba(160,118,48,.5);border-radius:5px;pointer-events:none}
.card .c-corner{position:absolute;top:2px;right:6px;font-family:var(--display);font-size:13px;line-height:1.3;color:var(--red)}
.card .c-art{width:88%;height:auto;flex:1 1 auto;min-height:0}
.card .c-name{font-family:var(--display);font-size:12px;line-height:1.2}
.card.r-K{background:#f3ead6}
.card.r-Q{background:#f5e8dc}
.card.r-J{background:#ecdcb4}
.hand{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.hand .card.sel{transform:translateY(-10px);border-color:var(--auth);box-shadow:0 8px 14px rgba(35,31,32,.3)}
.hand .card.match::after{content:"";position:absolute;top:6px;left:6px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1.5px var(--ochre)}
.hand.locked .card{cursor:default}
.handHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.handHead h3{font-size:17px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actions.one{grid-template-columns:1fr}

/* reveal: a dark section with the Sadu band on its top edge */
.reveal{position:relative;overflow:hidden;background:var(--resolve);padding-top:34px!important;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.reveal::before{content:"";position:absolute;inset:0 0 auto;height:14px;background:var(--sadu);background-size:28px 14px}
.reveal h2{font-size:24px}
.reveal .cards{display:flex;gap:8px;justify-content:center}
.reveal .card{width:76px;animation:flip .5s ease both}
.reveal .card .c-name{font-size:14px}
.reveal .card:nth-child(2){animation-delay:.15s}
.reveal .card:nth-child(3){animation-delay:.3s}
.reveal .card.bad{border-color:var(--coral)}
@keyframes flip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}
.verdict{font-family:var(--display);font-size:22px}
.verdict.lie{color:var(--coral)}
.verdict.truth{color:var(--accent)}
.odds{font-size:14px;color:var(--muted)}
.odds b{color:var(--fg)}
.bang{line-height:1.6;font-family:var(--kufi);font-size:36px;color:var(--coral);animation:shake .45s ease}
.click{line-height:1.6;font-family:var(--kufi);font-size:30px;color:var(--accent)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* revolver */
.gunArt{display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.revolver{width:min(230px,60%);height:auto;overflow:visible;transform-origin:30% 70%}
.cylFront{width:min(116px,32%);height:auto}
.revolver .m{fill:var(--steel)}
.revolver .m2{fill:var(--steel-dk)}
.revolver .grip{fill:var(--wood)}
.revolver .line{fill:none;stroke:var(--steel);stroke-width:5;stroke-linecap:round}
.revolver .groove{stroke:var(--steel-dk);stroke-width:2}
.revolver .muz{fill:#f2b33d}
.hammer{transform-origin:58px 32px;transition:transform .1s ease-out}
.hammer.cocked{transform:rotate(-30deg)}
.cylFront .body{fill:var(--steel)}
.cylFront .rim{fill:none;stroke:var(--steel-dk);stroke-width:3}
.cylFront .ch{fill:var(--hole);stroke:var(--gold);stroke-width:1.5}
.cylFront .ch.fired{stroke:var(--steel-dk)}
.cylFront .ch.hit{fill:var(--red);stroke:#f2b33d}
.cylFront .pin{fill:var(--steel-dk)}
.cylFront .mark{fill:var(--gold)}
.drum{transform-origin:60px 64px;transform:rotate(var(--to))}
.drum.spin{animation:spin var(--ms) cubic-bezier(.12,.75,.25,1) both}
@keyframes spin{from{transform:rotate(calc(var(--to) - 1440deg))}to{transform:rotate(var(--to))}}
.recoil .revolver{animation:recoil .4s ease-out both}
@keyframes recoil{0%{transform:rotate(0)}25%{transform:rotate(-16deg) translateX(-8px)}100%{transform:rotate(0)}}
.flash{position:fixed;inset:0;background:var(--red);pointer-events:none;z-index:50;animation:flashA .9s ease-out both}
@keyframes flashA{from{opacity:.8}to{opacity:0}}
body.tv .revolver{width:min(330px,50%)}
body.tv .cylFront{width:min(160px,24%)}
body.tv .felt{padding:56px 36px}

/* pass cover */
.cover{min-height:60vh;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;text-align:center}
.cover .moon{width:96px;background:var(--resolve);border-radius:50%;padding:14px}
.cover h2{font-family:var(--kufi);font-size:38px;color:var(--auth)}
/* the TV of a one-phone game: it shows the phone's page and takes no taps */
body.mirrorLive #app{pointer-events:none}
.mirrorWait .code{font-size:clamp(48px,16vh,150px);letter-spacing:.25em;padding:.05em .5em}
.mirrorWait p{max-width:46ch;font-size:clamp(14px,3vh,24px)}

.log{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);padding-top:6px;list-style:none;margin:0;padding-right:0}
.log li:first-child{color:var(--fg)}
.lobbyList{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.lobbyList li{display:flex;justify-content:space-between;padding:10px 12px;background:var(--sunk);border-radius:8px}
.win{font-family:var(--kufi);font-size:40px;color:var(--accent)}

/* table screen (TV) — same layout, read from across the room */
.tvTag{font-size:12px;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:2px 10px;white-space:nowrap}
body.tv{font-size:20px}
body.tv #app{max-width:1200px;gap:24px}
body.tv .seats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
body.tv .seat{padding:16px 18px;gap:10px}
body.tv .seat .nm{font-size:26px}
body.tv .seat .meta{font-size:16px}
body.tv .backs i{width:16px;height:23px}
body.tv .gun{gap:5px}
body.tv .gun i{width:16px;height:16px;border-width:2px}
body.tv .tableBadge .sym{width:96px;padding:8px}
body.tv .tableBadge h2{font-size:44px}
body.tv .tableBadge .sub{font-size:18px}
body.tv .tvTag{font-size:16px}
body.tv .felt{padding:36px;gap:24px}
body.tv .status{font-size:30px;line-height:1.5}
body.tv .pile{height:120px}
body.tv .pile i{width:72px;height:102px;margin-left:-50px;border-width:3px}
body.tv .reveal{padding:24px;gap:10px}
body.tv .reveal h2{font-size:46px}
body.tv .reveal .muted,body.tv .reveal p{font-size:24px}
body.tv .reveal .cards{gap:16px}
body.tv .reveal .card{width:104px}
body.tv .reveal .card .c-name{font-size:24px}
body.tv .reveal .card .c-corner{font-size:22px}
body.tv .verdict{font-size:42px}
body.tv .odds{font-size:26px}
body.tv .bang{font-size:76px;line-height:1.45}
body.tv .click{font-size:64px;line-height:1.45}
body.tv .code{font-size:110px;letter-spacing:18px}
body.tv .win{font-size:72px}
body.tv .lobbyList li{font-size:24px;padding:14px 18px}
body.tv .log{font-size:18px}

/* reveal groups: stacked on phones, side by side on the TV */
.rv-a,.rv-b{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
/* TV arena */
body.tv #app{max-width:1720px;padding-block:20px}
.tvInfo{display:flex;align-items:center;gap:14px;font-size:18px}
.tvInfo b{color:var(--fg);letter-spacing:2px}
.arena{display:grid;grid-template-columns:1fr minmax(0,820px) 1fr;grid-template-areas:". top ." "sright mid sleft" ". bottom .";gap:16px 32px;align-items:center;justify-items:center}
.pos-top{grid-area:top}.pos-bottom{grid-area:bottom}.pos-right{grid-area:sright}.pos-left{grid-area:sleft}
.arena .mid{grid-area:mid;width:100%;display:flex;justify-content:center}
body.tv .tseat{width:250px;min-height:150px;padding:22px 16px 14px;align-items:center;justify-content:center;gap:12px;text-align:center}
body.tv .tseat .nm{font-size:30px;max-width:100%}
body.tv .tseat .backs em{font-style:normal;font-size:16px;color:var(--muted)}
body.tv .felt.square{width:min(600px,calc(100vh - 470px),100%);aspect-ratio:1;justify-content:space-around;padding:44px 30px}
body.tv .felt.square .tableBadge{flex-direction:column;gap:6px;background:rgba(35,31,32,.6);padding:10px 22px;border-radius:14px}
body.tv .felt.square .tableBadge .sym{width:86px}
body.tv .felt.square .tableBadge h2{font-size:34px;color:var(--clarity)}
body.tv .felt.square .status{font-size:26px}
body.tv .felt.square .win{font-size:56px;background:rgba(35,31,32,.6);padding:0 24px;border-radius:14px}
body.tv .arena .reveal{display:grid;grid-template-columns:1fr 1fr;align-items:center;width:100%;min-height:min(600px,calc(100vh - 470px));padding:34px 20px 20px!important;gap:16px}
body.tv .arena .reveal h2{font-size:34px}
body.tv .arena .reveal .muted,body.tv .arena .reveal p{font-size:20px}
body.tv .arena .reveal .card{width:92px}
body.tv .arena .verdict{font-size:32px}
body.tv .arena .revolver{width:min(230px,58%)}
body.tv .arena .cylFront{width:min(116px,30%)}
body.tv .arena .bang{font-size:60px}
body.tv .arena .click{font-size:52px}
body.tv .arena .odds{font-size:20px}

/* hub */
.gameCard[data-to="almukharrib"]{--game:var(--red);text-decoration:none;color:inherit}

.center{text-align:center}
.back{align-self:flex-start;padding:8px 14px;border-radius:999px;color:var(--fg);font-size:14px;background:var(--land)}
.hero.hub{padding-top:36px}
.hub h1{font-size:84px}
.secTitle{font-size:20px;color:var(--auth)}
.games{display:grid;gap:12px}
.gameCard{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;width:100%;text-align:right;padding:12px;border-radius:16px;background:var(--surface);transition:transform .15s}
.gameCard:hover{transform:translateY(-2px)}
.gc-art{flex:none;width:112px;aspect-ratio:1;border-radius:12px;display:grid;place-items:center;background:var(--game)}
.gameCard[data-to="liar"]{--game:var(--red)}.gameCard[data-to="code"]{--game:var(--lilac)}
.gameCard[data-to="mafia"]{--game:var(--resolve)}.gameCard[data-to="seen"]{--game:var(--teal)}
.gc-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.gc-name{font-family:var(--display);font-size:22px;color:var(--auth)}
.gc-desc{color:var(--muted);font-size:14px}
.chip{align-self:flex-start;font-size:12px;padding:2px 10px;border-radius:999px;background:var(--sunk);color:var(--fg)}
.miniFan{display:flex;height:72px}
.miniFan .card{width:44px;pointer-events:none;padding-top:12%}
.miniFan .card .c-name{display:none}
.miniFan .card:nth-child(1){transform:rotate(10deg) translateY(4px)}
.miniFan .card:nth-child(2){margin-right:-20px}
.miniFan .card:nth-child(3){margin-right:-20px;transform:rotate(-10deg) translateY(4px)}
.miniBoard{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:84px}
.miniBoard i{aspect-ratio:3/2;border-radius:3px;background:var(--clarity)}
.miniBoard i.r{background:var(--team-r)}.miniBoard i.b{background:var(--team-b)}.miniBoard i.x{background:var(--resolve)}
.miniBoard.big{width:170px;gap:7px}

/* PC: the pages use the width. The home and each game's page put the picture on one side and the panels on the other.
   On a phone the two wrappers vanish (display:contents) and everything stacks in one column as before */
.side,.main{display:contents}
@media (min-width:1000px){
  body:not(.tv):not(.sjwide) #app{max-width:1200px}
  body:not(.tv):not(.sjwide) #app:has(> .side){max-width:1440px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:start;padding-block:56px 64px}
  #app:has(> .side) > .note{grid-column:1/-1}
  #app > .side{display:flex;flex-direction:column;gap:16px;position:sticky;top:44px}
  #app > .main{display:flex;flex-direction:column;gap:16px;min-width:0}
  #app > .side .hero{margin-top:0}
  /* the home: four big game cards, two by two */
  .main .games{grid-template-columns:1fr 1fr;gap:16px}
  .main .gameCard{flex-direction:column;align-items:stretch;gap:14px;padding:14px 14px 20px}
  .main .gc-art{width:100%;aspect-ratio:16/10}
  .main .gc-art>*{zoom:1.9}
  .main .gc-txt{padding-inline:8px}
  .main .gc-name{font-size:28px}
  .main .gc-desc{font-size:16px}
  /* a game's page: its picture large beside the panels */
  .side .hero .scene[class*="g-"]{align-self:stretch;justify-content:center;padding-block:44px 32px}
  .side .hero .scene>*{zoom:1.35}
  .side .hero h1{font-size:72px}
  .side .hero.hub h1{font-size:110px}
  .side .hero .tag{font-size:17px}
  /* playing on one laptop: the seats spread out and the hand stays a comfortable size */
  body:not(.tv):not(.sjwide) .seats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  body:not(.tv):not(.sjwide) .hand{max-width:760px;width:100%;margin-inline:auto}
  body:not(.tv):not(.sjwide) .felt{padding:56px 32px;min-height:300px;justify-content:center}
}

/* the QR code next to a session's code */
.joinQr{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.joinQr .qr{width:min(220px,62vw);height:auto;border-radius:10px;box-shadow:0 0 0 4px var(--clarity)}
.joinQr p{max-width:40ch;text-wrap:balance}
body.tv .joinQr .qr{width:min(300px,32vh)}
body.tv .joinQr p{font-size:20px}
.qrNote{opacity:.8}
@media (min-width:700px) and (max-width:999px){#app:has(> .tf){max-width:none}.tf{--bw:min(calc(100vw - 32px),760px)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.fkArt{width:150px;height:auto}
.g-alf-jawab,.gameCard[data-to="alf-jawab"]{--game:var(--ochre)}
.gc-art .fkArt{width:84px}

.back{text-decoration:none}