/* Jade Dice — carved jade on lacquer, under one lamp. Layout comes from the table shell (shell.css, table.css); this file
   restyles it by tokens (set in js/skin.js themeMap from the admin colours) and draws the game's own parts: the jade dice
   tray lined with felt, three 3D ivory dice standing on it and the lacquer result plaque (#board), the carved betting
   board of polished nephrite tiles with its tabs (#controls), the lacquer rail HUD and the jade-coin Roll button.
   Light: one lamp over the table, a little to the left and behind it — the dice (main.js lightFaces), the tray's
   polish, the tiles, the coin and the hall are all lit from there. Materials (art bible §5.3): felt (fibre noise + the
   lamp's pool + a vignette), nephrite (a translucent ramp + static veins), ivory (rounded edges, drilled pips),
   lacquer (a glossy band, a gold inlay). No animated filters: motion is transform / opacity only.
   Phones: one column, the board's groups behind five tabs; phones held sideways (≤ 440 px tall): the tray beside the
   board, the HUD on one row; wide screens (≥ 1000 × 660): the whole board in four rows. Text colours are checked
   against their grounds in skin.js. */
:root{--display:"Marcellus",Georgia,serif;--ui:"Red Hat Text",system-ui,sans-serif;--radius:12px;--radius-sm:8px;--prim-radius:999px;
  --die:56px;--tilt:24deg;--ivory:#F7F1E3;--ivory-edge:#E6DABF;--ivory-rim:#CDBB94;--ivory-core:#C7B48C;--ivory-shade:#2A1D0C;
  --pip:#262A27;--pip-deep:#0B0D0C;--pip-lip:#5A5F58;--pip-red:#A9252C;--pip-red-deep:#4E0B10;--pip-red-lip:#D0585C;
  --cell-h:44px;color-scheme:var(--scheme,dark);
  --felt-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E")}
body{background:var(--bg)}
.logo h1,.panel h2,.panel h3,.ovcard h2{font-weight:400;letter-spacing:.04em}

/* ---- the hall: the back wall lit by the lamp over the table, carved screens that only show towards the walls (never
   right behind the tray), one static grain layer and a vignette. Nothing here moves. ---- */
.jd-hall{background:radial-gradient(56% 46% at 50% 34%,color-mix(in srgb,var(--jade) 16%,var(--bg)),transparent 78%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,#fff) 0%,var(--bg) 45%,color-mix(in srgb,var(--bg) 80%,#000) 100%)}
.jd-screens,.jd-lattice,.jd-grain{position:absolute;inset:0}
.jd-screens{-webkit-mask:radial-gradient(62% 70% at 50% 44%,transparent 46%,#000 96%);mask:radial-gradient(62% 70% at 50% 44%,transparent 46%,#000 96%)}
.jd-lattice{background:var(--lattice);-webkit-mask:var(--lattice-mask) 50% 0/120px 120px repeat;mask:var(--lattice-mask) 50% 0/120px 120px repeat;opacity:.5}
.jd-grain{background:var(--grain) 0 0/160px 160px;opacity:.05}
.jd-vignette{background:radial-gradient(ellipse 70% 74% at 50% 42%,transparent 52%,color-mix(in srgb,var(--bg) 40%,#000) 118%);opacity:.6}

/* ---- the dice tray (#board): a carved nephrite tray, the floor lined with felt ---- */
.table-game .board.tboard{flex:1 1 auto;min-height:0}
.jd-tray{position:relative;display:flex;align-items:stretch;gap:clamp(8px,1.4vw,14px);width:min(100%,800px);height:100%;min-height:86px;max-height:clamp(300px,44vh,460px);
  padding:clamp(8px,1.4vw,13px);border-radius:clamp(18px,3vw,32px);
  background:var(--veins) 0 0/640px 360px,radial-gradient(120% 150% at 32% -10%,var(--jade-lit),var(--jade) 44%,var(--jade-deep) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 3px 8px -2px rgb(255 255 255 / .1),inset 0 -3px 0 rgb(0 0 0 / .32),inset 0 0 0 1px rgb(0 0 0 / .3),
    0 2px 3px rgb(0 0 0 / .45),0 28px 46px -18px rgb(0 0 0 / .8)}
/* the polish: the lamp's reflection along the near rim, sharp at the top edge, gone by the middle */
.jd-tray::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgb(255 255 255 / .1),transparent 22%)}
/* the felt: fibres (static noise), the lamp's pool a little left of centre, darker towards the walls; sunk into the
   tray (the rim's shadow falls in from the top, a lit lip at the bottom) */
.jd-well{position:relative;flex:1 1 auto;min-width:0;border-radius:clamp(12px,2.4vw,24px);
  background:var(--felt-tex) 0 0/180px 180px,radial-gradient(64% 74% at 44% 34%,var(--felt-hi),transparent 82%),radial-gradient(130% 120% at 50% 40%,var(--felt) 40%,var(--felt-lo) 104%);
  box-shadow:inset 0 16px 18px -8px rgb(0 0 0 / .62),inset 0 0 0 1px rgb(0 0 0 / .45),inset 0 -1px 0 color-mix(in srgb,var(--jade-lit) 55%,transparent),0 1px 0 rgb(255 255 255 / .1);
  perspective:1000px;perspective-origin:50% 26%;overflow:visible}
/* the felt seen from the front, a little above: the dice stand on this plane (main.js places them on it) */
.jd-plane{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--tilt))}
.jd-ring{position:absolute;inset:7%;border-radius:40%;border:2px solid var(--glow);box-shadow:0 0 22px var(--glow),inset 0 0 22px var(--glow);opacity:0;pointer-events:none}
.jd-tray.triple .jd-ring{opacity:.55}

/* the dice: 3D ivory cubes, the face that shows is the server's (main.js turns the cube). Ivory: a warm face that
   darkens into its rounded edges, drilled pips (dark in the hole, the lower wall catching the lamp), an ivory core in
   the corners, and a shade layer per face (--sh, set from the lamp at rest) */
.jd-die{position:absolute;left:0;top:0;width:var(--die);height:var(--die);transform-style:preserve-3d;will-change:transform}
.jd-lift{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--die) / 2))}
.jd-cube{position:absolute;inset:0;transform-style:preserve-3d}
.jd-f,.jd-k{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.jd-k{border-radius:3%;background:var(--ivory-core)}
.jd-f{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:15%;border-radius:12%;
  background:radial-gradient(122% 122% at 50% 50%,var(--ivory) 54%,var(--ivory-edge) 86%,var(--ivory-rim) 100%);
  box-shadow:inset 0 0 0 1px rgb(122 98 54 / .26)}
.jd-f::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ivory-shade);opacity:var(--sh,.1);pointer-events:none}
.jd-die.rest .jd-f::after{transition:opacity var(--t-slow,360ms) var(--ease-out,ease-out)}
.jd-cube>*{--d:calc(var(--die) / 2)}.jd-k{--d:calc(var(--die) / 2 - 1px)}
.jd-cube>.f1{transform:translateZ(var(--d))}
.jd-cube>.f6{transform:rotateY(180deg) translateZ(var(--d))}
.jd-cube>.f2{transform:rotateY(90deg) translateZ(var(--d))}
.jd-cube>.f5{transform:rotateY(-90deg) translateZ(var(--d))}
.jd-cube>.f3{transform:rotateX(90deg) translateZ(var(--d))}
.jd-cube>.f4{transform:rotateX(-90deg) translateZ(var(--d))}
.jd-f .p{display:block;width:74%;height:74%;margin:auto;border-radius:50%;background:radial-gradient(circle at 50% 30%,var(--pip-deep) 0 44%,var(--pip) 70%,var(--pip-lip) 100%)}
.jd-f.red .p{background:radial-gradient(circle at 50% 30%,var(--pip-red-deep) 0 40%,var(--pip-red) 70%,var(--pip-red-lip) 100%)}
.jd-f.f1 .p{width:120%;height:120%}
.p.c0{grid-area:1/1}.p.c1{grid-area:1/2}.p.c2{grid-area:1/3}.p.c3{grid-area:2/1}.p.c4{grid-area:2/2}.p.c5{grid-area:2/3}.p.c6{grid-area:3/1}.p.c7{grid-area:3/2}.p.c8{grid-area:3/3}
/* the contact shadow on the felt: dark right at the cube's foot (ambient occlusion), then cast away from the lamp (right
   and towards the player); painted once (box-shadow, no blur filter) — the throw only scales and fades it */
.jd-shadow{position:absolute;inset:3% 2% 1% 4%;border-radius:14%;background:rgb(0 0 0 / .55);
  box-shadow:0 0 3px 2px rgb(0 0 0 / .5),calc(var(--die) * .1) calc(var(--die) * .16) calc(var(--die) * .3) calc(var(--die) * .06) rgb(0 0 0 / .42)}
/* the round's end: a soft light rises on the felt under the dice when the roll paid (the accent); none otherwise */
.jd-halo{position:absolute;inset:-46%;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:0;transition:opacity .45s var(--ease-out,ease-out)}
.jd-tray.won .jd-halo{opacity:.3}

/* the lacquer plaque: glossy black-red lacquer in a gold inlay — the total, what it was, and the chip tools */
.jd-plaque{position:relative;flex:none;width:clamp(108px,17%,140px);display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:6px;padding:8px 6px;
  border-radius:clamp(10px,1.6vw,16px);
  background:linear-gradient(180deg,rgb(255 255 255 / .07),transparent 20% 72%,rgb(0 0 0 / .16)),linear-gradient(180deg,var(--lacquer-hi),var(--lacquer) 42%);
  border:1px solid color-mix(in srgb,var(--inlay) 85%,transparent);
  box-shadow:inset 0 0 0 3px var(--lacquer),inset 0 0 0 4px color-mix(in srgb,var(--inlay) 34%,transparent),inset 0 1px 0 4px rgb(255 255 255 / .04),0 2px 4px rgb(0 0 0 / .4);color:var(--rail-ink)}
.jd-read{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;text-align:center}
.jd-total{font:400 clamp(32px,5vw,54px)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.jd-kind{margin-top:6px;font:600 12px/1.2 var(--ui);color:var(--rail-muted);letter-spacing:.02em}
.jd-tools{display:flex;gap:4px}
.jd-tool{flex:1 1 0;min-width:44px;min-height:44px;padding:0 2px;border-radius:9px;border:1px solid color-mix(in srgb,var(--inlay) 50%,transparent);
  background:linear-gradient(180deg,var(--lacquer-hi),var(--lacquer));color:var(--rail-ink);font:700 13px/1 var(--ui);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 1px 2px rgb(0 0 0 / .35);transition:border-color var(--t-fast,140ms) var(--ease-std,ease),transform var(--t-press,90ms) var(--ease-out,ease-out)}
@media (hover:hover){.jd-tool:hover:not(:disabled){border-color:var(--inlay)}}
.jd-tool:active:not(:disabled){transform:translateY(1px)}
.jd-tool:disabled{opacity:.5;cursor:default}

/* ---- the betting board (#controls): polished nephrite tiles set in a carved, darker slab ---- */
.tcontrols{max-width:980px}
.jd-board{width:100%;display:flex;flex-direction:column;gap:6px}
.jd-tabs{display:flex;gap:3px;padding:0;border-radius:11px;background:linear-gradient(180deg,var(--lacquer-hi),var(--lacquer));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--inlay) 45%,transparent),0 2px 6px rgb(0 0 0 / .3)}
.jd-tab{position:relative;flex:1 1 auto;min-width:0;min-height:44px;padding:0 4px;border:0;border-radius:10px;background:none;color:var(--rail-ink);font:600 13px/1.1 var(--ui)}
.jd-tab[aria-pressed="true"]{background:linear-gradient(180deg,var(--jade-hi),var(--jade) 60%);color:var(--jade-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),inset 0 -3px 0 var(--inlay),inset 0 0 0 1px var(--jade-lo)}
.jd-count{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--glow);color:var(--glow-ink);font:700 10px/16px var(--ui);font-style:normal}
.jd-count:empty{display:none}
.jd-tab.haswin span{text-decoration:underline 2px var(--glow);text-underline-offset:4px}
.jd-groups{display:flex;flex-direction:column;gap:4px;height:calc(3 * var(--cell-h) + 16px);padding:4px;border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--jade-deep) 70%,#000),var(--jade-deep));
  box-shadow:inset 0 2px 6px rgb(0 0 0 / .55),inset 0 -1px 0 color-mix(in srgb,var(--jade-lit) 35%,transparent),0 1px 0 rgb(255 255 255 / .05)}
.jd-grp{display:none;gap:4px;min-height:0}
.jd-grp.shown{display:grid;flex:1 1 0;grid-auto-rows:1fr;animation:jd-in var(--t-fast,140ms) var(--ease-out,ease-out)}
@keyframes jd-in{from{opacity:0}}
.jd-grp[data-g="main"]{grid-template-columns:repeat(2,1fr)}
.jd-spot[data-spot="big"]{order:1}.jd-spot[data-spot="odd"]{order:2}.jd-spot[data-spot="even"]{order:3}
.jd-grp[data-g="totals"]{grid-template-columns:repeat(5,1fr)}
.jd-grp[data-g="singles"],.jd-grp[data-g="doubles"],.jd-grp[data-g="triples"]{grid-template-columns:repeat(6,1fr)}
.jd-grp[data-g="triples"] .any{grid-column:1/-1}
.jd-grp[data-g="combos"]{grid-template-columns:repeat(5,1fr)}
@media (min-width:352px){.jd-grp[data-g="totals"]{grid-template-columns:repeat(7,1fr)}}

/* a tile: nephrite lit from above (the top edge catches the lamp, the lower edge sinks into the slab), each tile cut
   from a different part of the same veined stone */
.jd-spot{--vx:0px;--vy:0px;position:relative;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 2px;
  border-radius:8px;border:0;color:var(--jade-ink);
  background:var(--veins) var(--vx) var(--vy)/320px 180px,linear-gradient(180deg,var(--jade-hi),var(--jade) 46%,color-mix(in srgb,var(--jade) 80%,#000));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),inset 0 -2px 0 rgb(0 0 0 / .24),0 1px 1px rgb(0 0 0 / .5);
  transition:box-shadow var(--t-fast,140ms) var(--ease-std,ease),transform var(--t-press,90ms) var(--ease-out,ease-out)}
.jd-spot:nth-child(4n+2){--vx:-120px;--vy:-60px}.jd-spot:nth-child(4n+3){--vx:-210px;--vy:-20px}.jd-spot:nth-child(4n){--vx:-60px;--vy:-110px}
.jd-spot:nth-child(3n+1){--vy:-140px}
@media (hover:hover){.jd-board:not(.locked) .jd-spot:hover{box-shadow:inset 0 1px 0 rgb(255 255 255 / .26),inset 0 -2px 0 rgb(0 0 0 / .24),inset 0 0 0 1px color-mix(in srgb,var(--jade-ink) 30%,transparent),0 1px 1px rgb(0 0 0 / .5)}}
.jd-board:not(.locked) .jd-spot:active{transform:translateY(1px)}
.jd-board.locked .jd-spot{cursor:default}
.jd-face{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
.jd-l{font:400 clamp(16px,2vw,20px)/1 var(--display);letter-spacing:.03em;white-space:nowrap}
.jd-n{font:400 clamp(19px,2.2vw,24px)/1 var(--display);font-variant-numeric:lining-nums}
.jd-r{display:block;font:600 11px/1 var(--ui);color:var(--jade-sub)}
.g-main .jd-face{flex-direction:column;gap:3px}
.jd-pay{font:700 11px/1.1 var(--ui);color:var(--jade-sub);white-space:nowrap;letter-spacing:.01em;font-variant-numeric:tabular-nums}
/* the small dice on the tiles: ivory with a rounded lower edge and a contact shadow on the jade */
.jd-mini{--mini:16px;display:inline-grid;flex:none;grid-template:repeat(3,1fr)/repeat(3,1fr);width:var(--mini);height:var(--mini);padding:2px;border-radius:4px;
  background:linear-gradient(165deg,#FBF7EC,var(--ivory) 45%,var(--ivory-edge));box-shadow:inset 0 -1px 0 rgb(122 98 54 / .4),0 1px 1px rgb(0 0 0 / .5)}
.jd-mini .p{display:block;width:82%;height:82%;margin:auto;border-radius:50%;background:var(--pip)}
.jd-mini.red .p{background:var(--pip-red)}
.jd-mini .p.c4:only-child{width:118%;height:118%}
.jd-tri{display:flex;gap:1px}.jd-tri .jd-mini{--mini:13px;padding:1.5px}
.g-combos .jd-mini,.g-doubles .jd-mini{--mini:15px}
/* a chip on a spot: a pale porcelain coin with a jade ring and its amount */
.jd-chip{position:absolute;top:-5px;right:-4px;z-index:1;min-width:22px;height:22px;padding:0 4px;border-radius:11px;display:grid;place-items:center;
  font:700 11px/1 var(--ui);font-variant-numeric:tabular-nums;color:#0B2E22;background:radial-gradient(120% 100% at 35% 22%,#FFFFFF,#E4F1EA 52%,#C6DFD1);
  box-shadow:inset 0 0 0 1.5px #0B2E22,inset 0 0 0 3px #EEF7F2,inset 0 0 0 3.5px #4E9C7C,0 2px 3px rgb(0 0 0 / .45)}
.jd-chip:empty{display:none}
.jd-spot.on{box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),inset 0 -2px 0 rgb(0 0 0 / .24),inset 0 0 0 1.5px var(--jade-rim),0 1px 1px rgb(0 0 0 / .5)}
/* after a roll: won (a ring in the accent, the tile steps once, what it paid), lost (the chip turns dark; its amount
   stays readable — the bet stays on the board for the next roll), lit (a spot the roll would have paid) */
.jd-spot.won{box-shadow:0 0 0 2px var(--glow),0 0 16px color-mix(in srgb,var(--glow) 60%,transparent),inset 0 1px 0 rgb(255 255 255 / .2);animation:jd-win 420ms var(--ease-out,ease-out)}
@keyframes jd-win{40%{transform:scale(1.05)}}
.jd-spot.lost .jd-chip{color:#D3EDDF;background:#2A5547;box-shadow:inset 0 0 0 1.5px #6FA88F,0 1px 2px rgb(0 0 0 / .35)}
.jd-spot.lit{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--jade-ink) 60%,transparent),inset 0 1px 0 rgb(255 255 255 / .14),0 1px 1px rgb(0 0 0 / .5)}
.jd-won{position:absolute;bottom:-7px;left:50%;z-index:1;transform:translateX(-50%);padding:1px 5px;border-radius:7px;background:var(--glow);color:var(--glow-ink);font:700 11px/1.35 var(--ui);white-space:nowrap;box-shadow:0 1px 2px rgb(0 0 0 / .4)}
.jd-won:empty{display:none}

/* ---- the lacquer rail (HUD): glossy lacquer, a gold inlay along its top edge; and the jade-coin Roll button ---- */
.demo,.auto span{color:var(--on-accent)}
.hud.thud{border:0;border-radius:12px;color:var(--rail-ink);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--inlay) 70%,transparent) 14%,var(--inlay) 50%,color-mix(in srgb,var(--inlay) 70%,transparent) 86%,transparent) 0 0/100% 2px no-repeat,
    linear-gradient(180deg,var(--lacquer-hi),var(--lacquer) 34%,var(--lacquer) 70%,color-mix(in srgb,var(--lacquer) 82%,#000));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--inlay) 20%,transparent),0 10px 28px rgb(0 0 0 / .35);
  --ink:var(--rail-ink);--muted:var(--rail-muted);--primary:var(--rail-win);--ibtn-bg:var(--lacquer-hi);--ibtn-ink:var(--rail-ink);--line:color-mix(in srgb,var(--inlay) 50%,transparent)}
/* the Roll button: a polished jade pill lit from above, a carved jade coin (a bi disc with a square hole) at its left */
.spin.tprim{padding:0 24px 0 54px;color:var(--jade-ink);border:1px solid color-mix(in srgb,var(--jade-rim) 70%,transparent);font-weight:400;letter-spacing:.06em;
  background:radial-gradient(120% 160% at 30% -20%,var(--jade-hi),var(--jade) 52%,var(--jade-deep));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 -3px 0 rgb(0 0 0 / .26),0 2px 3px rgb(0 0 0 / .4),0 14px 24px -10px rgb(0 0 0 / .65)}
.spin.tprim::before{content:"";position:absolute;left:12px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--jade-rim) 50%,#fff),var(--jade-rim) 40%,color-mix(in srgb,var(--jade-rim) 40%,var(--jade-lo)) 100%);
  box-shadow:inset 0 -1px 2px rgb(0 0 0 / .4),0 1px 1px rgb(0 0 0 / .5)}
.spin.tprim::after{content:"";position:absolute;left:21px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:2px;background:var(--jade-deep);
  box-shadow:inset 0 2px 2px rgb(0 0 0 / .55),0 1px 0 rgb(255 255 255 / .35)}
.spin.tprim.busy::after{animation:jd-coin .9s linear infinite}
@keyframes jd-coin{to{transform:rotate(360deg)}}
.tstrip li{font-family:var(--ui);letter-spacing:.02em}

/* ---- the rules panel's pay list: bet and pay on one line, the condition under it (a 3-column grid when wide) ---- */
.jd-pays{list-style:none;margin:10px 0 0;padding:0}
.jd-pays li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
.jd-pays b{font-weight:700}
.jd-pays .pp{text-align:right;font-weight:700;white-space:nowrap}
.jd-pays .pw{grid-column:1/-1;color:var(--muted);font-size:15px}
.jd-pays .jd-mini{--mini:15px;vertical-align:middle;margin:-2px 0 0 3px;box-shadow:inset 0 0 0 1px #9C8F70,0 1px 0 rgb(0 0 0 / .3)}
.jd-tot{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 28px;grid-column:1/-1;margin-top:4px;font-size:15px}
.jd-tot span{display:flex;justify-content:space-between;gap:8px}
@media (min-width:700px){
  .jd-pays li{grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto}
  .jd-pays .pw{grid-column:2;grid-row:1}
  .jd-pays .pp{grid-column:3}
}

/* ---- wide screens: the whole board in four rows, no tabs ---- */
@media (min-width:1000px) and (min-height:660px){
  .jd-tabs{display:none}
  .jd-groups{display:grid;height:auto;grid-template-columns:1fr 1fr;grid-template-areas:"main triples" "totals totals" "combos combos" "singles doubles";gap:6px;padding:6px}
  .jd-grp,.jd-grp.shown{display:grid;grid-auto-rows:clamp(48px,6.4vh,58px);gap:4px}
  .jd-grp[data-g="main"]{grid-area:main;grid-template-columns:repeat(4,1fr)}
  .jd-spot[data-spot="big"]{order:4}
  .jd-grp[data-g="triples"]{grid-area:triples;grid-template-columns:repeat(8,1fr)}
  .jd-grp[data-g="triples"] .any{grid-column:span 2}
  .jd-grp[data-g="totals"]{grid-area:totals;grid-template-columns:repeat(14,1fr)}
  .jd-grp[data-g="combos"]{grid-area:combos;grid-template-columns:repeat(15,1fr)}
  .jd-grp[data-g="singles"]{grid-area:singles}
  .jd-grp[data-g="doubles"]{grid-area:doubles}
  .g-main .jd-face{flex-direction:row;gap:8px}
  .jd-mini{--mini:18px}.g-combos .jd-mini,.g-doubles .jd-mini{--mini:17px}.jd-tri .jd-mini{--mini:15px}
  .jd-pay{font-size:12px}
}
/* tall phones and tablets: taller board cells */
@media (min-height:860px){:root{--cell-h:58px}}
/* narrow screens: a smaller plaque; short screens: the plaque keeps only Undo / Clear (the message line under the
   tray names the dice and the total) */
@media (max-width:340px){.jd-kind{display:none}.jd-total{font-size:26px}.jd-plaque{width:104px;padding:5px}}
@media (max-height:600px){.jd-read{display:none}.jd-plaque{justify-content:center;padding:5px}}
@media (max-width:400px),(max-height:440px) and (orientation:landscape) and (max-width:600px){
  .spin.tprim{padding:0 14px 0 44px}
  .spin.tprim::before{left:9px;width:26px;height:26px;margin-top:-13px}
  .spin.tprim::after{left:17px;width:10px;height:10px;margin-top:-5px}
}
/* a phone held sideways: the HUD on one row and no results strip (the plaque and the message line show the roll), the
   tray on the left, the board on the right; the plaque lies under the dice with the total beside Undo / Clear */
@media (max-height:440px) and (orientation:landscape){
  .hud.thud{grid-template-columns:1fr auto 1fr auto;grid-template-areas:"acts acts acts acts" "bal bet win spin";padding-top:6px;padding-bottom:6px;row-gap:0}
  body.lefty .hud.thud{grid-template-columns:auto 1fr auto 1fr;grid-template-areas:"acts acts acts acts" "spin bal bet win"}
  .table-game .spin.tprim{height:48px}
  .thud .meter b{font-size:19px}
  .tstrip{display:none}
  .table-game .stage.tstage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);grid-template-rows:minmax(0,1fr);column-gap:10px;align-items:stretch}
  .table-game .boardarea.tboardarea{height:100%}
  .table-game .message{min-height:20px;font-size:14px;line-height:1.3}
  .tcontrols{margin:0;align-items:stretch}
  .jd-board{height:100%;gap:4px}
  .jd-groups{flex:1 1 auto;height:auto;min-height:calc(3 * var(--cell-h) + 16px)}
  .jd-tray{flex-direction:column;min-height:0;max-height:none}
  .jd-plaque{width:auto;flex-direction:row;align-items:center;justify-content:space-between;padding:4px 4px 4px 12px}
  .jd-read{display:flex;flex:1 1 auto;align-items:flex-start;gap:2px;min-width:0;overflow:hidden}
  .jd-total{font-size:24px}
  .jd-kind{margin:0;font-size:11px;white-space:nowrap}
  .jd-tools{flex:none}
  .jd-tool{min-width:56px}
}
/* a small phone sideways (≈ 568 px wide): totals in five columns (cells stay ≥ 44 px) and the shell's compact HUD of
   small phones, so the one-row HUD fits */
@media (max-height:440px) and (orientation:landscape) and (max-width:600px){
  .jd-kind{display:none}
  .jd-grp[data-g="totals"]{grid-template-columns:repeat(5,1fr)}
  .hud.thud{column-gap:8px;padding-left:10px;padding-right:10px}
  .betctl{gap:6px}.betctl .meter{min-width:64px}.pm{width:34px;height:34px;font-size:20px}
  .spinbox{gap:8px}.auto{width:46px;height:46px}.auto svg{width:21px;height:21px}
  .table-game .spin.tprim{min-width:104px}
  .thud .meter b{font-size:17px}
}
/* very short (≈ 320 px): a slimmer HUD so the three rows of the board still fit */
@media (max-height:340px) and (orientation:landscape){
  .hud.thud{padding-top:4px;padding-bottom:4px}
  .table-game .spin.tprim{height:44px}
  .jd-groups{padding:2px;min-height:calc(3 * var(--cell-h) + 12px)}
}
@media (prefers-reduced-motion:reduce){
  .jd-halo,.jd-spot,.jd-tool,.jd-die.rest .jd-f::after{transition:none}
  .spin.tprim.busy::after,.jd-spot.won,.jd-grp.shown{animation:none}
}
body.still .jd-spot.won,body.still .jd-grp.shown{animation:none}