/* Mahjong Night: a cream card room, a deep teal felt table, ivory tiles and a lacquer red lead colour. */
:root{color-scheme:light;--bg:#f5efe1;--bg2:#ece3cf;--panel:#fffcf4;--panel2:#f3ead6;--ink:#2b2620;--muted:#625a4d;--line:#cdbf9f;--accent:#b0352b;--go:#a8322a;--go-ink:#ffffff;--felt:#1f5d52;--felt2:#174b42;--felt-ink:#f6f1e3;--felt-muted:#cfe0d8;--ivory:#fffaf0;--edge:#d9cba8;--gold:#e6b44c;font-family:"Avenir Next","Trebuchet MS","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{line-height:1.45;overflow-x:clip;-webkit-text-size-adjust:100%}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:8px 14px;min-height:46px;min-width:46px;font-weight:650;line-height:1.25}
button:hover:not(:disabled){border-color:var(--ink)}
button:disabled{opacity:.55;cursor:default}
.primary{background:var(--go);border-color:var(--go);color:var(--go-ink)}
.primary:hover:not(:disabled){border-color:#5d1712}
.quiet{background:transparent;font-weight:550}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
p{margin:0 0 10px}
.small{font-size:.9rem;color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.notice{margin:16px;padding:14px;border:2px solid var(--accent);border-radius:12px}
html:not(.keyboard-used) :focus-visible{outline:none}
html.keyboard-used :focus{outline:3px solid var(--go);outline-offset:3px}

.game{width:min(100%,560px);margin-inline:auto;padding:0 10px 8px}
html.is-playing body,.play,.game.is-fullscreen{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0}
.title{font-size:1.35rem;font-weight:800;letter-spacing:.01em}
.game-name{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:inherit}
.game-mark{width:38px;height:38px;flex:none;display:block}
.lede{font-size:1.15rem;font-weight:700;margin:6px 0 4px}
.group{font-size:1rem;font-weight:750;color:var(--muted);margin:18px 0 0}

/* Menu */
/* The rules picker: two big choices, the chosen one filled. */
.rules-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9em),1fr));gap:8px;margin:10px 0 2px}
.rules-pick button{display:grid;gap:2px;align-content:center;min-width:0;min-height:64px;padding:8px 12px;border-radius:14px;text-align:left;background:var(--panel);overflow-wrap:anywhere}
.rules-pick .rules-name{font-size:1.05rem;font-weight:800}
.rules-pick .rules-blurb{font-size:.85rem;font-weight:550;color:var(--muted)}
.rules-pick button[aria-checked="true"],.rules-pick button[aria-pressed="true"]{background:var(--felt);border-color:var(--felt2);color:var(--felt-ink)}
.rules-pick button[aria-checked="true"] .rules-blurb,.rules-pick button[aria-pressed="true"] .rules-blurb{color:var(--felt-muted)}
.table-rules{margin:0 0 10px}
.levels{display:grid;gap:10px;margin:10px 0}
.levels:empty{display:none}
.level{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;text-align:left;padding:12px 16px;border-radius:16px;background:var(--panel);box-shadow:0 3px 12px #2b26200a}
.level .name{font-size:1.15rem;font-weight:800}
.level .meta{grid-column:1;font-size:.92rem;font-weight:550;color:var(--muted)}
.level .go{grid-column:2;grid-row:1/3;font-weight:800;color:var(--go)}
.level.last{border-color:var(--go);background:linear-gradient(135deg,#fff3e6,var(--panel2))}
.level.lesson{background:var(--felt);border-color:var(--felt2);color:var(--felt-ink)}
.level.lesson .meta{color:var(--felt-muted)}
.level.lesson .go{color:var(--gold)}
.menu{container:menu/inline-size}
.versus{grid-template-columns:repeat(3,minmax(0,1fr))}
@container menu (max-width:18em){.versus{grid-template-columns:1fr}}
.versus .level{grid-template-columns:1fr;padding:10px 12px;text-align:center}
.versus .level .go{display:none}
.versus .level .meta{font-size:.875rem}
.menu-tools{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.level.online{width:100%;background:linear-gradient(135deg,#fffaf0,#efe4cc);border-color:var(--edge)}

/* Tiles: an ivory body drawn in CSS around the face picture. Sizes keep the 3:4 tile shape. */
.tile{position:relative;display:inline-grid;place-items:center;flex:none;padding:0;margin:0;min-width:0;min-height:0;background:var(--ivory);border:1px solid var(--edge);border-radius:6px;box-shadow:0 2px 0 #2f8f7d;line-height:0;color:inherit;vertical-align:bottom}
.tile svg{display:block;width:100%;height:100%}
.tile.xs{width:18px;height:24px;border-radius:3px;box-shadow:0 1px 0 #2f8f7d}
.tile.sm{width:26px;height:35px;border-radius:4px}
.tile.md{width:44px;height:59px;border-radius:7px;box-shadow:0 3px 0 #2f8f7d}
.tile.lg{width:var(--rack-tile,46px);height:calc(var(--rack-tile,46px) * 4 / 3);border-radius:7px;box-shadow:0 3px 0 #2f8f7d;border-width:1.5px}
.tile.back{background:linear-gradient(160deg,#3aa58f,#257a69);border-color:#1b6455;box-shadow:none}
.tile.back.xs{width:9px;height:14px;border-radius:2px}
.tile.is-joker{background:#fbf5ff}
.tile.is-missing{opacity:.32;box-shadow:none;border-style:dashed}

/* Play: top bar */
.hud{display:flex;gap:6px;align-items:center;position:relative;padding:4px 0}
.hand-info{flex:1 1 auto;min-width:0;margin:0;font-size:.92rem;font-weight:700;line-height:1.2;text-align:center}
.move-clock{display:none}
.hud-buttons{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.hud-button{flex:none;min-height:44px;min-width:44px;padding:4px 10px}
.hud .fullscreen-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:max(58px,4.6em);min-height:44px;padding:4px}
.fullscreen-label{width:0;min-width:100%;max-width:100%;font-size:.75rem;font-weight:750;line-height:1.1;white-space:normal}
.hud-buttons{align-items:center}
.net{position:absolute;right:0;top:100%;z-index:3;margin:2px 0 0;padding:2px 8px;border-radius:8px;background:var(--accent);color:#ffffff;font-size:.85rem;font-weight:700}
.quick-chat{position:absolute;right:0;top:100%;z-index:4;margin-top:4px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border:2px solid var(--line);border-radius:14px;background:var(--panel);width:min(300px,90vw)}
.quick-chat button{min-height:44px;font-size:.9rem}
@media (max-width:600px) and (orientation:portrait),(max-height:760px) and (orientation:portrait),(orientation:landscape) and (max-height:520px){html.is-playing .top{display:none}}

/* The table: the three other seats around the middle, on felt. */
.table{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"across across across" "left center right";gap:6px;padding:6px;border-radius:18px;background:radial-gradient(120% 90% at 50% 40%,var(--felt) 0,var(--felt2) 100%);color:var(--felt-ink)}
.seat{display:flex;flex-direction:column;gap:3px;min-width:0;padding:5px 6px;border:2px solid transparent;border-radius:12px;background:#ffffff10}
.seat-left{grid-area:left}
.seat-right{grid-area:right}
.seat-across{grid-area:across;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:8px}
.seat.turn{border-color:var(--gold);background:#ffffff1c}
.seat.thinking .name::after{content:" …";color:var(--felt-muted)}
.seat .who{display:flex;align-items:center;gap:5px;min-width:0}
.seat .wind{flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--felt-ink);color:var(--felt2);font-size:.75rem;font-weight:850;line-height:1}
.seat.dealer .wind{background:var(--gold);color:#3b2a06}
.seat .name{min-width:0;font-size:.9rem;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .score{margin-left:auto;font-size:.875rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--felt-muted)}
.seat .status{flex-basis:100%;font-size:.75rem;color:var(--felt-muted)}
.seat .backs{display:flex;flex-wrap:wrap;gap:1px}
.seat .held{display:none}
.seat .shown{display:flex;flex-wrap:wrap;gap:1px}
.seat .exposures,.my-exposures{display:flex;flex-wrap:wrap;gap:4px}
.exposure{display:inline-flex;gap:1px;padding:2px;border-radius:5px;background:#00000024}
.seat-across .score{margin-left:6px}
.center{grid-area:center;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 8px;align-content:start;min-width:0;padding:6px;border-radius:12px;background:#00000018}
.center .last{grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:52px}
.center .last.open .tile{outline:3px solid var(--gold);outline-offset:1px}
.center .last.fresh .tile{animation:land 300ms ease-out}
.center .last-by{font-size:.75rem;font-weight:700;color:var(--felt-muted);text-align:center;line-height:1.15}
.center .thrown{display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start;min-width:0}
.thrown-face{position:relative;display:inline-flex}
.thrown-face .count{position:absolute;right:-4px;top:-6px;padding:0 3px;border-radius:6px;background:var(--gold);color:#3b2a06;font-size:.625rem;font-weight:850;line-height:1.3}
.center .wall{grid-column:2;margin:0;align-self:end;font-size:.8rem;font-weight:700;color:var(--felt-muted)}
@keyframes land{0%{transform:translateY(-10px) scale(1.15)}100%{transform:none}}

/* What to do now, the buttons, and your tiles. */
.line{margin:6px 0 4px;font-size:1rem;font-weight:650;line-height:1.3;min-height:2.6em;text-align:center}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 8px}
.actions:empty{display:none}
.actions button{flex:1 1 7.5em;min-width:0;max-width:16em;min-height:48px;padding:6px 10px}
.mine{display:grid;gap:6px;justify-items:center}
.my-exposures{justify-content:center}
.rack{--rack-tile:min(54px,calc((100vw - 20px - 6 * 4px) / 7));display:grid;grid-template-columns:repeat(7,auto);justify-content:center;gap:8px 4px;padding:6px 0 4px}
/* Narrow phones: every tile stays a 44px target, five to a row. */
@media (max-width:349px){.rack{--rack-tile:min(54px,calc((100vw - 20px - 4 * 4px) / 5));grid-template-columns:repeat(5,auto)}}
.rack .tile{cursor:pointer;transition:transform .12s}
.rack .tile:disabled{opacity:1;cursor:default}
.rack .tile.is-selected{transform:translateY(-8px);border-color:var(--go);box-shadow:0 3px 0 var(--go),0 0 0 2px var(--go)}
.rack .tile.is-marked::after{content:"";position:absolute;left:50%;bottom:-9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--accent)}
.rack .tile.is-new{border-color:var(--gold);box-shadow:0 3px 0 var(--gold),0 0 0 2px var(--gold)}
.rack .tile.is-drawn{margin-left:0}
.rack .tile:hover:not(:disabled){border-color:var(--ink)}
.helper{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:8px 0 2px;padding:6px 8px;border-radius:12px;background:var(--panel2);font-size:.875rem}
.helper-tiles{display:flex;flex-wrap:wrap;gap:1px;justify-content:center}
.helper-label{color:var(--muted)}
.helper-label strong{color:var(--ink)}

/* Result */
.sheet{margin:10px 0;padding:14px;border:2px solid var(--line);border-radius:18px;background:var(--panel);display:grid;gap:8px}
.play .sheet{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100vw - 24px),400px);margin:0;z-index:4;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5em),1fr));max-height:calc(100dvh - 24px);overflow-y:auto;box-shadow:0 10px 30px #2b262029}
.play .sheet h2,.play .sheet p,.play .sheet .wide,.play .sheet .result-social,.play .sheet .result-hand,.play .sheet .result-scores{grid-column:1/-1}
.play .sheet>button{min-width:0;white-space:normal}
.sheet h2{font-size:1.45rem}
.sheet p{margin:0}
.result-hand{display:flex;flex-wrap:wrap;gap:2px;justify-content:center}
.result-hand:empty{display:none}
.result-scores{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.result-scores li{display:grid;grid-template-columns:minmax(0,1fr) minmax(3em,max-content) minmax(3em,max-content);gap:8px;padding:4px 6px;border-radius:8px;font-variant-numeric:tabular-nums}
.result-scores li.is-me{background:var(--panel2);font-weight:750}
.result-scores .delta,.result-scores .sum{text-align:right}
.result-scores .who{overflow-wrap:anywhere}
#result-series{margin:0}
.result-social .sheet-actions{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.result-social .sheet-actions button{flex:1 1 6em;min-width:0;min-height:44px;padding:4px 6px;font-size:.9rem}
.result-social .small{margin:4px 0 0}
.result-social .small:empty{display:none}

/* Pause menu and the card */
.pause,.card-sheet,.sheet-dialog{border:2px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);padding:16px;width:min(92vw,380px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.pause::backdrop,.card-sheet::backdrop,.sheet-dialog::backdrop,.dpt::backdrop{background:#3a2f1f40}
.pause-actions{display:grid;gap:8px;margin-top:10px}
#leave-confirm{margin-top:10px;display:grid;gap:8px}
.card-sheet{width:min(94vw,560px);padding:0}
.card-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.card-body{padding:8px 16px 16px}
.card-head{flex-wrap:wrap}
.card-head h2{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.card-head .hud-button{flex:none}
.pile-count{margin:10px 16px 0;font-weight:700}
.pile-body{display:flex;flex-wrap:wrap;gap:6px 8px;padding:10px 16px 16px}
.pile-body .thrown-face{align-items:center;gap:2px}
.pile-body .tile.xs{width:32px;height:43px;border-radius:5px}
.pile-body .thrown-face .count{position:static;padding:0 3px}
.pile-open{display:none}
.card-legend{font-size:.9rem;color:var(--muted)}
.card-section h3{font-size:1.05rem;margin:16px 0 4px}
.card-note{font-size:.85rem;font-weight:550;color:var(--muted)}
.card-hands{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.card-hand{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;text-align:left;padding:8px 10px;border-radius:12px;min-height:48px}
.card-hand.near{border-color:var(--go);background:#fff3e6}
.card-value{font-weight:800;font-variant-numeric:tabular-nums}
.card-sub{grid-column:1/-1;font-size:.85rem;font-weight:550;color:var(--muted)}
.card-example{display:flex;flex-wrap:wrap;gap:1px;padding:6px 4px}
.guide-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:6px 0}
.guide-tiles{display:flex;gap:1px}
.guide-label{font-weight:650}
.fan-list{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.fan-list li{display:flex;justify-content:space-between;gap:12px;padding:6px 8px;border-radius:8px;background:var(--panel2)}
.hand-line{display:flex;flex-wrap:wrap;gap:2px 9px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:1.05rem;font-weight:800;letter-spacing:.04em}
.grp.sa{color:#1d5fa8}
.grp.sb{color:#1f7a45}
.grp.sc{color:#c0312b}
.grp.plain{color:var(--ink)}

/* Online play: invite and join sheets, people (the shared lobby). */
.sheet-dialog h2{font-size:1.35rem;margin:0 0 10px}
.sheet-dialog input{width:100%;min-height:46px;padding:0 12px;border:2px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--ink);font:inherit;margin:4px 0 10px}
.sheet-dialog label{font-weight:700}
.sheet-actions{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.sheet-actions button{flex:1 1 8rem}
.sheet-error{color:var(--accent);font-weight:650}
.invite-status{color:var(--muted)}
.sheet-dialog h3{font-size:1.05rem;margin:16px 0 6px}
.sheet-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.people{display:grid;gap:2px}
.people .small{margin:4px 0}
.person{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:6px 0;border-bottom:1px solid var(--line)}
.person-name{font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-status{grid-column:1;grid-row:2;font-size:.85rem;color:var(--muted)}
.person-status.online{color:var(--felt)}
.person-actions{grid-column:2;grid-row:1/3;display:flex;gap:6px}
.person-actions button{min-height:44px;padding:4px 12px}
.person-note{grid-column:1/-1;font-size:.85rem;color:var(--muted)}
.person-note:empty{display:none}
.person.two .person-actions{grid-column:1/-1;grid-row:3}
.person.two .person-actions button{flex:1 1 0}
.seats-list{margin:0 0 10px;padding:0;list-style:none;display:grid;gap:4px}
.seats-list li{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:var(--panel2);font-weight:650}
.seats-list .seat-state{color:var(--muted);font-weight:550}
.find-form{display:flex;gap:8px}
.find-form input{flex:1 1 auto;min-width:0;margin:0}
.find-form button{flex:none;min-height:46px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-top:12px}
.switch-label{font-weight:700}
.switch{flex:none;position:relative;width:60px;min-height:44px;height:44px;padding:0;border:0;background:none;box-shadow:none}
.switch::before{content:"";position:absolute;left:2px;right:2px;top:6px;bottom:6px;border-radius:16px;background:var(--line);transition:background .15s}
.switch-knob{position:absolute;top:9px;left:5px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:transform .15s}
.switch[aria-checked="true"]::before{background:var(--felt)}
.switch[aria-checked="true"] .switch-knob{transform:translateX(24px)}

/* Information pages */
.document-top{width:min(100%,720px);margin:0 auto;padding:6px 16px}
.document{width:min(100%,720px);margin:0 auto;padding:8px 16px 24px}
.document h1{font-size:1.7rem;margin:10px 0 12px}
.document h2{font-size:1.2rem;margin:22px 0 8px}
.document details{margin:12px 0}
.document label{display:flex;gap:8px;align-items:center;min-height:44px}

/* Tutorial colours */
:root{--dpt-bg:var(--panel);--dpt-ink:var(--ink);--dpt-muted:var(--muted);--dpt-line:var(--line);--dpt-tint:var(--bg2);--dpt-accent:var(--go);--dpt-accent-ink:var(--go-ink)}
.dpt .dpt-kicker{font-size:.875rem;min-width:0;overflow-wrap:anywhere}
.dpt .dpt-bar{flex:none;align-items:flex-start;padding-top:12px}

/* Analytics card (shared prompt) */
.privacy-consent{background:var(--panel);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:12px}
.privacy-consent button{min-height:44px}
.privacy-consent-floating{position:fixed;left:12px;right:12px;bottom:12px;z-index:5;max-width:420px}

/* Full screen: the whole game inside one screen. */
.fullscreen-fit{display:contents}
html.game-fullscreen-lock{overflow:hidden;overscroll-behavior:none}
.game.is-fullscreen{position:fixed;inset:0;z-index:2147483001;width:auto;max-width:none;margin:0;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:var(--bg);overflow:auto;overscroll-behavior:none}
.game.is-fullscreen .top{display:none}
.game.is-fullscreen .play:not([hidden]){width:min(100%,1100px);margin-inline:auto}
.fullscreen-tip{position:fixed;z-index:3;top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));width:min(calc(100vw - 84px),400px);display:flex;align-items:center;gap:8px;padding:8px 6px 8px 14px;border-radius:12px;background:var(--panel);color:var(--ink)}
.fullscreen-tip p{margin:0;font-size:.9rem;line-height:1.35}
.fullscreen-tip button{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:inherit}
.game.is-fullscreen .fullscreen-tip{top:64px;left:50%;transform:translateX(-50%);width:min(calc(100vw - 24px),400px);border:2px solid var(--line);box-shadow:0 6px 18px #2b262033}

/* Full screen, upright: the game is one column that fits the screen. Your tiles, the buttons
   and the line above them always show; the table takes the space left and scrolls inside itself
   only when a long hand fills it. Short screens drop the helper strip (the Card or Guide still
   explains) and fit six tiles to a row, each still a 44px target. */
@media (max-width:899px) and (orientation:portrait),(max-width:899px) and (min-height:521px){
  .game.is-fullscreen{display:flex;flex-direction:column}
  .game.is-fullscreen .play:not([hidden]){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .game.is-fullscreen .play>*{flex:none}
  .game.is-fullscreen .play>.table{flex:0 1 auto;min-height:72px;overflow-y:auto;overscroll-behavior:contain}
}
@media (max-width:899px) and (orientation:portrait) and (max-height:600px){
  .game.is-fullscreen .hud{padding:0 0 2px}
  .game.is-fullscreen .table{padding:4px;gap:4px}
  .game.is-fullscreen .seat{padding:3px 5px}
  .game.is-fullscreen .helper{display:none}
  .game.is-fullscreen .line{margin:4px 0 2px}
  .game.is-fullscreen .line{min-height:0}
  .game.is-fullscreen .actions{flex-wrap:nowrap;margin-bottom:4px}
  .game.is-fullscreen .actions button{flex:1 1 0;min-width:0;min-height:44px;padding:4px 6px;font-size:.9rem;line-height:1.15;white-space:normal}
  .game.is-fullscreen .mine{gap:2px}
  .game.is-fullscreen .my-exposures .tile.sm{width:20px;height:27px;border-radius:3px}
  .game.is-fullscreen .rack{row-gap:6px;padding-top:4px}
}
@media (max-width:349px) and (orientation:portrait) and (max-height:600px){
  .game.is-fullscreen .rack{--rack-tile:min(54px,calc((100vw - 20px - 5 * 4px) / 6));grid-template-columns:repeat(6,auto)}
}

/* Short landscape phones: the table on the left, your tiles and the buttons beside it. */
@media (orientation:landscape) and (max-height:520px){
  .game{width:min(100%,960px)}
  .play:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"hud hud" "table line" "table actions" "table mine" "table helper";column-gap:12px;align-items:start;align-content:start}
  .play .hud{grid-area:hud}
  .play .table{grid-area:table}
  .play .line{grid-area:line;min-height:0}
  .play .actions{grid-area:actions}
  .play .mine{grid-area:mine}
  .play .helper{grid-area:helper}
  .rack{--rack-tile:min(44px,calc((50vw - 40px) / 7))}
  .play .sheet{left:auto;right:max(12px,env(safe-area-inset-right));transform:none;width:min(46vw,380px)}
  /* The last tile thrown sits above the thrown pile so the pile has the middle's full width. */
  .center{grid-template-columns:minmax(0,1fr)}
  .center .last{grid-row:auto;flex-direction:row;justify-content:center;min-width:0}
  .center .wall{grid-column:1}
  /* Full screen: the screen's height is the grid's height. The right side (the line, the
     buttons, your tiles) always shows; the table on the left scrolls inside itself when a long
     hand fills it. The helper strip gives way (the Card or Guide still explains). */
  .game.is-fullscreen{display:flex;flex-direction:column}
  .game.is-fullscreen .play:not([hidden]){flex:1 1 auto;min-height:0;grid-template-rows:auto auto auto auto minmax(0,1fr)}
  .game.is-fullscreen .play .table{min-height:0;align-self:stretch;overflow-y:auto;overscroll-behavior:contain}
  .game.is-fullscreen .helper{display:none}
  .game.is-fullscreen .fullscreen-tip{left:max(10px,env(safe-area-inset-left));transform:none;width:calc(50vw - 24px)}
  /* The right side must hold the line, a call's buttons and two rows of tiles: the buttons share
     one row and the spacing tightens. */
  .game.is-fullscreen .hud{padding:0 0 2px}
  .game.is-fullscreen .play .line{margin:2px 0;font-size:.95rem}
  .game.is-fullscreen .actions{flex-wrap:nowrap;margin-bottom:4px}
  .game.is-fullscreen .actions button{flex:1 1 0;min-width:0;min-height:44px;padding:4px 6px;font-size:.9rem;line-height:1.15;white-space:normal}
  .game.is-fullscreen .mine{gap:2px}
  .game.is-fullscreen .my-exposures .tile.sm{width:20px;height:27px;border-radius:3px}
  .game.is-fullscreen .rack{row-gap:6px;padding:2px 0}
}
/* Full screen on a phone, upright or sideways: the table packs into the space it has, with no
   scrolling. Each other player is one line (wind, name, score, how many tiles they hold, then
   what they have laid out), and the middle runs the full width: the last tile thrown beside
   every thrown tile, grouped by face, and the wall. */
@media (max-width:899px),(orientation:landscape) and (max-height:520px){
  .game.is-fullscreen .table{grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "across" "right" "center";align-content:start;gap:3px;padding:4px}
  .game.is-fullscreen .seat{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:2px 6px}
  .game.is-fullscreen .seat .who{flex:0 1 auto;min-width:0}
  .game.is-fullscreen .seat .name{max-width:8em}
  .game.is-fullscreen .seat .score{margin-left:2px}
  .game.is-fullscreen .seat .status{flex-basis:auto}
  .game.is-fullscreen .seat .backs{display:none}
  .game.is-fullscreen .seat .held{display:inline;font-size:.75rem;font-weight:700;color:var(--felt-muted);white-space:nowrap}
  .game.is-fullscreen .seat .exposures{gap:3px}
  .game.is-fullscreen .center{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:2px 8px;padding:4px 6px}
  .game.is-fullscreen .center .last{grid-row:1/3;flex-direction:column;justify-content:flex-start;min-width:48px}
  .game.is-fullscreen .center .last .tile.md{width:33px;height:44px;border-radius:5px}
  .game.is-fullscreen .center .wall{grid-column:2}
}
/* Full screen, crowded table: the small tiles on the table step down a size at a time (set by
   fitTable in app.mjs) until the other players' sets and the thrown pile all show. */
.game.is-fullscreen .table[data-dense] .seat .tile.xs,.game.is-fullscreen .table[data-dense] .thrown .tile.xs{width:15px;height:20px;border-radius:3px}
.game.is-fullscreen .table[data-dense] .center .last .tile{width:28px;height:37px}
.game.is-fullscreen .table[data-dense] .thrown-face .count{font-size:.55rem;top:-5px}
.game.is-fullscreen .table[data-dense] .seat .held{font-size:.7rem}
.game.is-fullscreen .table[data-dense="2"] .seat .tile.xs,.game.is-fullscreen .table[data-dense="2"] .thrown .tile.xs{width:13px;height:17px;border-radius:2px}
.game.is-fullscreen .table[data-dense="2"] .seat .name{max-width:6em}
.game.is-fullscreen .table[data-dense="2"],.game.is-fullscreen .table[data-dense="3"]{gap:2px;padding:3px}
.game.is-fullscreen .table[data-dense="2"] .seat,.game.is-fullscreen .table[data-dense="3"] .seat{padding:1px 5px}
.game.is-fullscreen .table[data-dense="2"] .center,.game.is-fullscreen .table[data-dense="3"] .center{padding:3px 6px}
.game.is-fullscreen .table[data-dense="3"] .seat .tile.xs,.game.is-fullscreen .table[data-dense="3"] .thrown .tile.xs{width:11px;height:15px;border-radius:2px}
.game.is-fullscreen .table[data-dense="3"] .center .last .tile{width:24px;height:32px}
.game.is-fullscreen .table[data-dense="3"] .center .last-by{font-size:.7rem}
.game.is-fullscreen .table[data-dense="3"] .seat .name{max-width:5em}

/* Large text on a phone (the play area is under 18 of its own text widths across, so this never
   applies at normal text): the hand line takes its own row under the buttons, and the other
   players sit in one-line rows across the table, as in full screen, so names stay whole. */
.play{container:play/inline-size}
@container play (max-width:18em){
  .hud{flex-wrap:wrap}
  .hand-info{order:3;flex-basis:100%}
  .hud-buttons{flex:1 1 auto}
  .table{grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "across" "right" "center";align-content:start}
  .seat{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 8px}
  .seat .who{flex:0 1 auto;min-width:0}
  /* Names wrap whole rather than end in "...", in and out of full screen at every dense level. */
  .game .play .table .seat .who .name{max-width:none;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
  .seat .score{margin-left:.4em}
  .seat .status{flex-basis:auto}
  .seat .backs{display:none}
  .seat .held{display:inline;font-size:.75rem;font-weight:700;color:var(--felt-muted);white-space:nowrap}
  .center{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .center .last{grid-row:auto;flex-direction:row;justify-content:flex-start;min-width:0}
  .center .wall{grid-column:1}
  .thrown-face{align-items:center;gap:1px}
  .thrown-face .count{position:static;padding:0 2px}
  /* Full screen holds one screen even then: one row of buttons up top (the hand line moves to the
     pause menu; an online move clock stays), no hints, and tighter spacing around the line. */
  .game.is-fullscreen .hud{flex-wrap:wrap;gap:2px 4px;padding:0}
  .game.is-fullscreen .hand-info{display:none}
  .game.is-fullscreen .move-clock:not([hidden]){display:block;order:3;flex:1 0 auto;font-size:.92rem;font-weight:700;line-height:1.15;text-align:center}
  /* The buttons wrap one by one, so the clock shares a row with whatever does not fit. */
  .game.is-fullscreen .hud-buttons{display:contents}
  .game.is-fullscreen .hud #card{margin-left:auto}
  .game.is-fullscreen .hud-button{padding:2px 6px}
  .game.is-fullscreen .hud .fullscreen-toggle{flex:none;min-width:0;padding:2px 6px}
  .game.is-fullscreen .hud .fullscreen-toggle svg{display:none}
  .game.is-fullscreen .hud .fullscreen-label{width:auto;min-width:0;max-width:none;white-space:nowrap}
  .game.is-fullscreen .helper{display:none}
  .game.is-fullscreen .line{margin:2px 0;min-height:0;line-height:1.25}
  /* The other players wrap side by side by name (scores wait for the result; tile counts and the
     thrown pile open from the Thrown button), and the last tile, wall and pile share one row. */
  .game.is-fullscreen .table{display:flex;flex-wrap:wrap;gap:4px;padding:4px}
  .game.is-fullscreen .seat{flex:1 1 auto;padding:1px 6px;gap:2px 6px}
  .game.is-fullscreen .seat .wind{width:1.4em;height:1.4em}
  .game.is-fullscreen .seat .score,.game.is-fullscreen .seat .held{display:none}
  .game.is-fullscreen .center{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:4px 6px}
  .game.is-fullscreen .center .last{flex-direction:row;align-items:center;gap:6px}
  .game.is-fullscreen .center .last.empty{display:none}
  .game.is-fullscreen .center .thrown{display:none}
  .game.is-fullscreen .center .last{flex:0 1 auto}
  /* Who threw it is spoken on every discard and named in the call prompt. */
  .game.is-fullscreen .center .last-by{display:none}
  /* Tight (set by fitTable only when the table still overflows): the other players' flowers wait
     in their seat labels and your laid-out sets take the small-phone size (rack tiles stay 44px). */
  .game.is-fullscreen.fs-tight .seat .exposure.flowers{display:none}
  .game.is-fullscreen.fs-tight .my-exposures .tile.sm{width:20px;height:27px;border-radius:3px}
  .hud{--big-text:1}
  .game.is-fullscreen .center .wall{display:none}
  .game.is-fullscreen .pile-open{display:inline-flex;align-items:center;min-height:44px;padding:2px 8px;margin-left:auto}
  /* Buttons two to a row (a lone one takes the row) and slightly smaller tiles in the rack. */
  .game.is-fullscreen .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-bottom:4px}
  .game.is-fullscreen .actions button{max-width:none;min-height:44px;padding:4px 6px;line-height:1.15;overflow-wrap:anywhere}
  .game.is-fullscreen .actions button:only-child,.game.is-fullscreen .actions button:last-child:nth-child(odd){grid-column:1/-1}
  .game.is-fullscreen .rack{--rack-tile:44px;row-gap:6px;padding:2px 0}
}
/* Last resort if full screen still cannot hold the table (set by fitTable in app.mjs): the game
   scrolls rather than cut the table off. The checks hold normal and 200% text to one screen. */
.game.is-fullscreen.fs-scroll .play>.table{flex:none;min-height:0;overflow:visible}
.game.is-fullscreen.fs-scroll .play:not([hidden]){flex:none;min-height:auto}

/* Wide screens: the table beside your tiles and the buttons; the rack in one row of fourteen. */
@media (min-width:900px){
  .game{width:min(100%,1080px)}
  .menu{max-width:560px;margin-inline:auto}
  .play:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"hud hud" "table table" "line line" "actions actions" "mine mine" "helper helper";column-gap:20px}
  .play .hud{grid-area:hud}
  .play .table{grid-area:table;padding:10px;gap:10px}
  .play .line{grid-area:line}
  .play .actions{grid-area:actions}
  .play .mine{grid-area:mine}
  .play .helper{grid-area:helper}
  .rack{--rack-tile:56px;grid-template-columns:repeat(14,auto)}
  .tile.xs{width:22px;height:29px}
  .seat .name{font-size:1rem}
}

html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Dayplay footer colours and width for this game (the shared block below reads them). */
:root{--dpf-card:var(--panel);--dpf-ink:var(--ink);--dpf-muted:var(--muted);--dpf-line:var(--line);--dpf-accent:var(--go);--dpf-width:min(100% - 24px,560px);--dpf-margin:12px auto 0}

/* dayplay-footer:start — shared Dayplay Games footer (lib/dayplay-footer.css; synced into every
   game stylesheet, checked by lib/dayplay-footer.test.mjs). Each game sets --dpf-* in its own
   :root so the footer wears the game's colours; structure and spacing stay the same everywhere. */
footer.dp-footer{box-sizing:border-box;width:var(--dpf-width,min(100% - 32px,560px));margin:var(--dpf-margin,24px auto 0);padding:16px var(--dpf-pad,0px) max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--dpf-line,#d8d2c4);color:var(--dpf-muted,#5f5a52);font-size:15px;line-height:1.45;text-align:left;overflow-wrap:anywhere}
footer.dp-footer>*+*{margin-top:8px}
.dp-footer .dp-home{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;max-width:440px;min-height:56px;margin-inline:0;margin-bottom:0;padding:8px 14px 8px 8px;border:1.5px solid var(--dpf-line,#d8d2c4);border-radius:14px;background:var(--dpf-card,#fffdf8);color:var(--dpf-ink,#2c2a26);font:inherit;text-decoration:none;box-shadow:0 1px 0 var(--dpf-line,#d8d2c4);transition:border-color .15s,box-shadow .15s}
.dp-footer .dp-home img{display:block;flex:none;width:40px;height:40px;margin:0;padding:6px;box-sizing:border-box;border-radius:10px;background:#fef8f0;box-shadow:inset 0 0 0 1px rgba(44,34,64,.1)}
.dp-footer .dp-home-text{display:flex;flex-direction:column;flex:1;min-width:0;gap:1px}
.dp-footer .dp-home-text strong{font-size:16px;font-weight:700;line-height:1.25;color:var(--dpf-ink,#2c2a26)}
.dp-footer .dp-home-text span{font-size:14px;line-height:1.3;color:var(--dpf-muted,#5f5a52)}
.dp-footer .dp-home svg{flex:none;width:20px;height:20px;color:var(--dpf-accent,currentColor);transition:transform .15s}
.dp-footer .dp-home:hover{border-color:var(--dpf-accent,currentColor);box-shadow:0 2px 0 var(--dpf-accent,currentColor)}
.dp-footer .dp-home:hover svg{transform:translateX(3px)}
.dp-footer .dp-home:focus-visible,.dp-footer .dp-links a:focus-visible,.dp-footer .dp-links button:focus-visible{outline:3px solid var(--dpf-accent,currentColor);outline-offset:3px}
.dp-footer .dp-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin-bottom:0;padding:0}
.dp-footer .dp-links a,.dp-footer .dp-links button{display:inline-flex;align-items:center;min-height:44px;min-width:44px;flex-shrink:1;overflow-wrap:anywhere;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;font-size:14px;font-weight:600;line-height:1.3;color:var(--dpf-ink,#2c2a26);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--dpf-line,#c9c2b4);cursor:pointer;white-space:nowrap}
.dp-footer .dp-links a:hover,.dp-footer .dp-links button:hover{text-decoration-color:currentColor}
.dp-footer .dp-note{margin:0;font-size:13px;line-height:1.45;color:var(--dpf-muted,#5f5a52)}
.dp-footer .dp-note+.dp-note{margin-top:2px}
/* Phones: the links wrap as one compact run of text (each still a 44px-tall target). */
@media(max-width:560px){.dp-footer .dp-links{gap:0 16px}}
@media(prefers-reduced-motion:reduce){.dp-footer .dp-home,.dp-footer .dp-home svg{transition:none}.dp-footer .dp-home:hover svg{transform:none}}
/* dayplay-footer:end */