/* Lotus Lanes — a lily pond in watercolour under the moon. 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; every text pair is contrast-checked
   there against the lightest and darkest tone of its material) and draws the game's own parts: the pond (#board) with
   the deck, the lotus card on its flower and the two lanes of water whose heads are the Left / Right bets; the stepping
   stones of the "cards dealt" bets (#controls); the lacquer HUD tray with its stone meters and the lotus-bud Deal button.
   The card size (--cw) follows the board (main.js). One key light — the moon, straight above the pond (the table
   shell's lamp, --lamp): stones lit on top with a shadow on the water, lanes recessed under their top lip, cards with a
   contact shadow, lacquer with a lit top edge. Animations move transform / opacity only; no filters. */
:root{--display:"Rozha One",Georgia,serif;--ui:"Red Hat Text",system-ui,sans-serif;--radius:14px;--radius-sm:10px;--prim-radius:30px 30px 24px 24px;
  --cw:40px;color-scheme:var(--scheme,dark)}
body{background:var(--bg)}
.logo h1{font-weight:400;letter-spacing:.02em;text-shadow:0 2px 14px rgb(0 0 0 / .28)}
.panel h2,.panel h3,.ovcard h2{font-family:var(--display);font-weight:400;letter-spacing:.02em}

/* the scene: the pond's watercolour washes, lily pads and two blooms at the edges (art.js pondSVG); one static grain */
.ll-scene{background:var(--bg)}
.ll-scene svg{position:absolute;inset:0;width:100%;height:100%}
.ll-scene::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px}

/* ---- the pond (#board) ---- */
.table-game .board.tboard{flex:1 1 auto;min-height:0}
/* --ll-side: the room the top row keeps for its side columns (the deck and the counter, Undo and Clear) — main.js sizes
   the cards from it */
.ll-board{--ll-side:220px;position:relative;display:grid;grid-template-rows:auto auto auto;align-content:safe center;gap:6px;width:min(100%,920px);height:100%;min-height:0;max-height:620px}
.ll-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ll-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px}
.ll-deckbox{display:flex;align-items:flex-end;gap:10px;min-width:0}
.ll-deck{position:relative;flex:none;width:calc(var(--cw) * .8);height:calc(var(--cw) * .8 * 1.4);margin:0 4px 4px 0}
.ll-deck .ll-card{--w:calc(var(--cw) * .8)}
.ll-deck .ll-card:nth-child(2){transform:translate(2px,2px)}.ll-deck .ll-card:nth-child(3){transform:translate(4px,4px)}
.ll-deck.riffle .ll-card:nth-child(3){animation:ll-riffle .18s ease-in-out infinite alternate}
@keyframes ll-riffle{to{transform:translate(9px,-3px) rotate(6deg)}}
.ll-count{display:flex;flex-direction:column;min-width:0;padding-bottom:2px}
.ll-cl{font:600 13px/1.1 var(--ui);color:var(--muted)}
.ll-n{font:400 clamp(18px,calc(var(--cw) * .5),40px)/1 var(--display);color:var(--primary);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.ll-left{font:600 12px/1.3 var(--ui);color:var(--muted);white-space:nowrap}

/* the lotus card on its flower (the page's one bold thing): the petals turn about the flower's base (--open: a bud .5 …
   open 1); they open slowly and settle (front petals a beat after the back ones), close quickly; a halo of light rises
   behind the open flower */
.ll-lotus{position:relative;width:calc(var(--cw) * 2.9);height:calc(var(--cw) * 1.78);display:flex;align-items:flex-end;justify-content:center;--open:.5}
.ll-flower{position:absolute;left:0;bottom:0;width:100%;height:auto;overflow:visible}
.ll-flower .ll-pt{transform-origin:100px 104px;transform:rotate(calc(var(--a) * var(--open)));transition:transform var(--t-slow,360ms) var(--ease-in,ease-in)}
.ll-lotus.open{--open:1}
.ll-lotus.open .ll-pt{transition:transform .9s cubic-bezier(.22,1.1,.36,1)}
.ll-lotus.open .ll-pf{transition-delay:70ms}
.ll-halo{opacity:0;transition:opacity var(--t-fast,140ms) var(--ease-in,ease-in)}
.ll-lotus.open .ll-halo{opacity:1;transition:opacity .7s var(--ease-out,ease-out) .12s}
.ll-ring{stroke:var(--water-line);stroke-opacity:.55;stroke-width:1}
.ll-sheen{stroke:var(--pad-hi);stroke-opacity:.6;stroke-width:1.3}
.ll-slot{position:relative;z-index:1;width:calc(var(--cw) * 1.1);height:calc(var(--cw) * 1.1 * 1.4);margin-bottom:calc(var(--cw) * .12)}
.ll-slot .ll-card{--w:calc(var(--cw) * 1.1)}
.ll-tools{display:flex;justify-content:flex-end;gap:6px;align-self:center}
.ll-tool{min-width:48px;min-height:44px;padding:0 10px;border-radius:22px;border:1.5px solid var(--line);background:var(--ibtn-bg);color:var(--ibtn-ink);font:700 13px/1 var(--ui);
  transition:border-color var(--t-fast) var(--ease-std),opacity var(--t-fast) var(--ease-std),transform var(--t-press) var(--ease-out)}
@media (hover:hover){.ll-tool:hover:not(:disabled){border-color:var(--primary)}}
.ll-tool:active:not(:disabled){transform:translateY(1px)}
.ll-tool:disabled{opacity:.45}

/* the cards: rice paper (a warm lit centre, older edges), a thin edge and a contact shadow; the corner index readable
   when they overlap, one large suit. Backs: teal lacquer, a paper margin, a gold inlay line and an inlaid lotus. */
.ll-card{--w:var(--cw);position:absolute;top:0;left:0;width:var(--w);height:calc(var(--w) * 1.4);border-radius:calc(var(--w) * .11);color:var(--card-black);
  background:radial-gradient(130% 95% at 38% 20%,var(--paper-hi),var(--paper) 55%,var(--paper-edge));
  box-shadow:0 0 0 1px var(--card-edge),0 1px 1.5px rgb(0 0 0 / .28),0 5px 9px -3px rgb(0 0 0 / .38);transition:left .2s var(--ease-out,ease-out)}
.ll-card.red{color:var(--card-red)}
.ll-ix{position:absolute;left:7%;top:5%;display:flex;flex-direction:column;align-items:center;gap:1px}
.ll-ix b{font:400 max(11px,calc(var(--w) * .37))/.95 var(--display);letter-spacing:-.04em;font-variant-numeric:lining-nums}
.ll-su{width:max(8px,calc(var(--w) * .24));height:max(8px,calc(var(--w) * .24));fill:currentColor}
.ll-pip{position:absolute;right:9%;bottom:7%;width:48%;height:auto;aspect-ratio:1;fill:currentColor;opacity:.92}
.ll-card.back{display:block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 56'%3E%3Cg fill='none' stroke='%23E9C46A' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M20 12.5c4 4 5.6 9 5.6 12.6 0 5-2.7 8.2-5.6 9.6-2.9-1.4-5.6-4.6-5.6-9.6 0-3.6 1.6-8.6 5.6-12.6z' fill='%23F7B7D8' fill-opacity='.28'/%3E%3Cpath d='M8.4 21.4c4.7.4 8.5 3 10.1 8 1 3.1.5 5.6-.4 7.1-5.3-.5-9.1-4.1-9.8-9.2-.2-2-.2-4 .1-5.9zM31.6 21.4c-4.7.4-8.5 3-10.1 8-1 3.1-.5 5.6.4 7.1 5.3-.5 9.1-4.1 9.8-9.2.2-2 .2-4-.1-5.9z' fill='%23F7B7D8' fill-opacity='.14'/%3E%3Cpath d='M7 43.2c4.4 1.8 8.7 2.6 13 2.6s8.6-.8 13-2.6M11.5 47.8c2.8.9 5.6 1.3 8.5 1.3s5.7-.4 8.5-1.3' stroke-opacity='.7'/%3E%3C/g%3E%3C/svg%3E") center/76% no-repeat,
    linear-gradient(155deg,var(--back-hi),var(--back) 45%,var(--back-lo));
  box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--back-lo),inset 0 0 0 4px color-mix(in srgb,var(--inlay) 60%,var(--back)),0 0 0 1px rgb(0 0 0 / .35),0 1px 1.5px rgb(0 0 0 / .3),0 5px 9px -3px rgb(0 0 0 / .38)}
.ll-card.match{box-shadow:0 0 0 2px var(--glow),0 0 16px color-mix(in srgb,var(--glow) 65%,transparent),0 3px 8px rgb(0 0 0 / .35);translate:0 -7%;transition:left .2s var(--ease-out,ease-out),translate .3s var(--ease-out,ease-out)}
/* the match's bright ring (main.js adds .pulse when the page's flash governor allows it): opacity and scale only */
.ll-card::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--w) * .15);box-shadow:0 0 0 2px var(--glow),0 0 18px var(--glow);opacity:0;pointer-events:none}
.ll-card.pulse::after{animation:ll-pulse .8s var(--ease-out,ease-out)}
@keyframes ll-pulse{30%{opacity:1;transform:scale(1.03)}to{opacity:0;transform:scale(1.1)}}
/* a card touching the water: a ripple ring spreads from under it (main.js, Web Animations) */
.ll-ripple{position:absolute;z-index:2;width:calc(var(--cw) * 1.6);height:calc(var(--cw) * .46);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--water-ink) 50%,transparent);pointer-events:none;opacity:0}

/* the lanes: recessed channels of water — a shadow under the top lip, a lit lip below, the moon's sheen on the water and
   faint ripples; the head is the lane's bet. An empty lane shows where its first card will land. */
.ll-lane{--head-w:clamp(58px,calc(var(--cw) * 1.7),104px);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:calc(var(--cw) * .5) 14px 14px calc(var(--cw) * .5);
  background:radial-gradient(55% 140% at 64% 50%,color-mix(in srgb,var(--water-sheen) 70%,transparent),transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='36'%3E%3Cpath d='M0 9q22.5-5 45 0t45 0 45 0 45 0M-10 27q22.5-4 45 0t45 0 45 0 45 0 45 0' fill='none' stroke='%23fff' stroke-opacity='.055'/%3E%3C/svg%3E") 0 0/180px 36px,
    linear-gradient(180deg,var(--water-deep),var(--water) 42%);
  box-shadow:inset 0 13px 14px -11px rgb(0 0 0 / .6),inset 0 -1px 0 color-mix(in srgb,var(--water-line) 75%,#fff),0 0 0 1px var(--water-line),0 2px 0 1px rgb(0 0 0 / .12)}
.ll-lane::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--glow),0 0 18px color-mix(in srgb,var(--glow) 55%,transparent);opacity:0;transition:opacity var(--t-fast,140ms) var(--ease-in,ease-in)}
.ll-lane.won::after{opacity:1;transition:opacity .45s var(--ease-out,ease-out)}
.ll-fan{position:relative;z-index:3;height:calc(var(--cw) * 1.4);min-width:0;margin:3px 0}
.ll-fan:empty::before{content:"";position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw) * 1.4);box-sizing:border-box;border-radius:calc(var(--cw) * .11);
  border:1px solid color-mix(in srgb,var(--water-ink) 22%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--water-ink) 7%,transparent),color-mix(in srgb,var(--water-ink) 2%,transparent))}
.ll-hint{position:absolute;left:calc(var(--head-w,64px) + var(--cw) + 26px);top:50%;transform:translateY(-50%);font:600 13px/1.2 var(--ui);color:var(--water-sub);pointer-events:none}
.ll-lane:has(.ll-fan:not(:empty)) .ll-hint{display:none}
/* a long lane: the oldest cards close up into a pile at its start (main.js layoutFan); this stone tag counts them */
.ll-more{position:absolute;left:calc(var(--head-w,64px) + 10px);bottom:5px;z-index:4;display:flex;align-items:center;gap:3px;padding:2px 6px 2px 4px;border-radius:9px;
  background:var(--stone);color:var(--stone-ink);font:800 11px/1.2 var(--ui);font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 1px 3px rgb(0 0 0 / .45);pointer-events:none}
.ll-more svg{width:12px;height:12px}

/* the bets: wet stepping stones — lit on top by the moon, darker at the foot, a few mineral flecks, a shadow on the
   water. Lane heads and stones share the material, the chip and the won badge; --ring carries their state. */
.ll-head,.ll-stone{--ring:0 0 0 0 transparent;position:relative;border:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--stone-ink);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cg fill='%23000' fill-opacity='.16'%3E%3Ccircle cx='7' cy='9' r='.9'/%3E%3Ccircle cx='31' cy='4' r='.7'/%3E%3Ccircle cx='49' cy='14' r='1'/%3E%3Ccircle cx='18' cy='27' r='.8'/%3E%3Ccircle cx='42' cy='33' r='.9'/%3E%3Ccircle cx='55' cy='30' r='.6'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.13'%3E%3Ccircle cx='24' cy='15' r='.7'/%3E%3Ccircle cx='4' cy='35' r='.6'/%3E%3Ccircle cx='37' cy='22' r='.6'/%3E%3C/g%3E%3C/svg%3E") 0 0/60px 40px,
    radial-gradient(140% 105% at 50% 6%,var(--stone-top),var(--stone) 50%,var(--stone-foot));
  box-shadow:var(--ring),inset 0 1px 0 rgb(255 255 255 / .2),inset 0 -3px 0 var(--stone-lo),0 2px 0 rgb(0 0 0 / .2),0 8px 12px -7px rgb(0 0 0 / .6)}
.ll-head::before,.ll-stone::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgb(255 255 255 / .1);opacity:0;pointer-events:none;transition:opacity var(--t-fast,140ms) var(--ease-std,ease)}
@media (hover:hover){.ll-head:hover::before,.ll-stone:hover::before{opacity:1}}
.ll-head:active::before,.ll-stone:active::before{opacity:1;transition-duration:var(--t-press,90ms)}
body.ll-locked .ll-head,body.ll-locked .ll-stone{cursor:default}
body.ll-locked .ll-head::before,body.ll-locked .ll-stone::before{opacity:0}
.ll-head{width:var(--head-w);min-height:max(44px,calc(var(--cw) * 1.4));border-radius:calc(var(--cw) * .45)}
.ll-name,.ll-pay,.ll-r,.ll-p{position:relative}
.ll-name{font:400 clamp(15px,calc(var(--cw) * .38),24px)/1.05 var(--display);letter-spacing:.02em}
.ll-pay,.ll-p{font:700 12px/1.15 var(--ui);color:var(--stone-sub);font-variant-numeric:tabular-nums}
.ll-track{width:min(100%,920px);display:flex;flex-direction:column;gap:6px}
.ll-stones-t{font:600 13px/1.2 var(--ui);color:var(--muted);text-align:center}
.ll-stones{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px 8px}
.ll-stone{min-width:0;min-height:48px;border-radius:48% 52% 44% 56% / 58% 54% 46% 42%}
.ll-stone:nth-child(2n){border-radius:54% 46% 52% 48% / 46% 58% 42% 54%}
.ll-stone:nth-child(3n){border-radius:44% 56% 50% 50% / 52% 44% 56% 48%}
.ll-r{font:400 clamp(15px,1.7vw,19px)/1.05 var(--display);font-variant-numeric:lining-nums;white-space:nowrap}
/* a chip on a bet: a glazed lotus-pink ceramic token with its amount; it drops onto the stone when first placed */
.ll-chip{position:absolute;top:-6px;right:-5px;z-index:2;min-width:22px;height:22px;padding:0 5px;border-radius:11px;display:grid;place-items:center;
  font:800 11px/1 var(--ui);color:#3A0E28;background:radial-gradient(circle at 50% 28%,#FFF7FB,#FCE4F0 55%,#F4CFE2);
  box-shadow:inset 0 0 0 1.5px #3A0E28,inset 0 0 0 3px #FCE4F0,inset 0 0 0 3.5px #E06BA9,0 2px 4px rgb(0 0 0 / .4);animation:ll-chip var(--t-fast,140ms) var(--ease-out,ease-out)}
@keyframes ll-chip{from{opacity:0;transform:translateY(-6px) scale(.8)}}
.ll-chip:empty{display:none}
.ll-head.on,.ll-stone.on{--ring:inset 0 0 0 1.5px color-mix(in srgb,var(--stone-ink) 45%,transparent)}
/* the deal passing a range, and the end: the winning lane and range light up; won / lost bets */
.ll-stone.at{--ring:0 0 0 2px color-mix(in srgb,var(--glow) 70%,transparent)}
.ll-head.hit,.ll-stone.hit{--ring:0 0 0 2.5px var(--glow),0 0 14px color-mix(in srgb,var(--glow) 55%,transparent)}
/* a lost bet's chip turns a flat river-stone grey; its amount stays at full contrast (7.4:1) */
.ll-head.lost .ll-chip,.ll-stone.lost .ll-chip{color:#4A4248;background:#E4DFE2;box-shadow:inset 0 0 0 1.5px #4A4248,inset 0 0 0 3px #E4DFE2,inset 0 0 0 3.5px #A99FA5,0 2px 4px rgb(0 0 0 / .35)}
.ll-won{position:absolute;bottom:-8px;left:50%;z-index:2;transform:translateX(-50%);padding:1px 6px;border-radius:8px;background:var(--glow);color:var(--glow-ink);font:800 11px/1.35 var(--ui);white-space:nowrap;
  box-shadow:0 2px 4px rgb(0 0 0 / .35)}
.ll-won:empty{display:none}

/* ---- the HUD: a lacquer tray (lit top edge, deeper at the foot) carrying stone meters, and the lotus-bud Deal button ---- */
.demo,.auto span{color:var(--on-accent)}
.hud.thud{background:linear-gradient(180deg,var(--hud-hi),var(--hud) 10%,var(--hud) 58%,var(--hud-lo));border:0;border-radius:24px;color:var(--hud-ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),inset 0 0 0 1px var(--water-line),inset 0 -2px 0 rgb(0 0 0 / .25),0 12px 28px -10px rgb(0 0 0 / .65);
  --ink:var(--hud-ink);--muted:var(--hud-muted);--primary:var(--hud-win);--line:color-mix(in srgb,var(--hud-ink) 30%,transparent)}
.thud .meter.bal,.thud .meter.win,.thud .betctl .meter{padding:5px 14px 6px;border-radius:24px 30px 22px 28px / 22px 26px 30px 24px;color:var(--stone-ink);
  background:radial-gradient(140% 110% at 50% 0,var(--stone-top),var(--stone) 48%,var(--stone-foot));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),inset 0 -3px 0 var(--stone-lo);--muted:var(--stone-sub);--primary:var(--stone-win)}
.thud .meter.win{border-radius:30px 22px 28px 24px / 26px 22px 24px 30px}
.thud .meter span,.thud .meter small{color:var(--stone-sub)}
.thud .meter.win b{color:var(--stone-win)}
.thud .meter.win.at-zero b{color:var(--stone-sub)}
.thud .pm{background:radial-gradient(120% 120% at 50% 0,var(--stone-top),var(--stone) 55%,var(--stone-foot));color:var(--stone-ink);border:0;border-radius:50%;box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),inset 0 -2px 0 var(--stone-lo)}
.thud .auto{background:var(--stone);color:var(--stone-ink);border:0}
.spin.tprim{position:relative;padding:0 22px 0 50px;color:var(--bud-ink);border:0;font-weight:400;letter-spacing:.04em;
  background:linear-gradient(180deg,var(--bud-hi),var(--bud) 52%,var(--bud-foot));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -4px 0 var(--bud-lo),0 2px 3px rgb(0 0 0 / .3),0 12px 22px -10px rgb(0 0 0 / .65)}
.spin.tprim .ll-bud{position:absolute;left:15px;top:50%;width:26px;height:26px;margin-top:-14px;transform:none;transform-origin:50% 90%}
.ll-bud .b1{fill:var(--bud-ink)}.ll-bud .b2{fill:var(--bud-ink);opacity:.5}.ll-bud .b3{stroke:var(--bud-ink);fill:none}
.spin.tprim.busy .ll-bud{animation:ll-bud .9s var(--ease-std,ease-in-out) infinite alternate}
@keyframes ll-bud{to{transform:rotate(8deg) scale(1.06)}}

/* big-win petals (skin.js): near petals full size, far ones half size and paler */
.ll-petals{position:fixed;inset:0;z-index:39;pointer-events:none;overflow:hidden}
.ll-petals i{position:absolute;top:0;border-radius:0 100% 0 100%;opacity:0;box-shadow:inset 1px 1px 0 rgb(255 255 255 / .35)}
.ll-petals i.near{z-index:1}

/* the rules panel */
.ll-pays{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:6px}
.ll-pays li{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline}
.ll-pays .pp{font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
.ll-pays .pw{flex:1 0 100%;color:var(--muted)}
.ll-pays-deals{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.ll-pays-deals li{gap:2px 10px}

/* phones and narrow windows: the stones in two rows of four, a tighter top row */
@media (max-width:640px){
  .ll-stones{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .ll-stone{min-height:44px}
}
@media (max-width:400px){
  .ll-board{gap:5px}
  .ll-top{gap:4px}
  .ll-deckbox{gap:6px}
  .ll-tool{min-width:48px;padding:0 7px;font-size:12px}
  .ll-lane{gap:6px;padding-right:6px}
  .ll-r{font-size:15px}
  .thud .meter.bal,.thud .meter.win,.thud .betctl .meter{padding:4px 10px 5px}
  .spin.tprim{padding:0 14px 0 42px}
  .spin.tprim .ll-bud{left:11px;width:23px;height:23px;margin-top:-12px}
}
@media (max-width:340px){
  .ll-left{display:none}
  .ll-tools{gap:4px}
  .spin.tprim{padding:0 10px 0 36px}
  .spin.tprim .ll-bud{left:8px;width:21px;height:21px}
}
/* tall phones: the top row's side columns stand their parts one above the other (the deck over the counter, Undo over
   Clear), so they take less width and the cards can grow to fill the pond (main.js reads --ll-side). Only with height to
   spare: a stacked column (~94 px) is taller than the flower on a short phone, so short phones keep them side by side. */
@media (max-width:480px) and (min-height:700px){
  .ll-board{--ll-side:164px}
  .ll-deckbox{flex-direction:column;align-items:flex-start;gap:4px}
  .ll-deck{width:calc(var(--cw) * .62);height:calc(var(--cw) * .62 * 1.4);margin:0 4px 4px 0}
  .ll-deck .ll-card{--w:calc(var(--cw) * .62)}
  .ll-tools{flex-direction:column;align-items:flex-end;align-self:end;gap:6px}
  .ll-tool{min-width:72px}
}
@media (max-width:400px) and (min-height:700px){
  .ll-tool{min-width:66px}
}
/* short screens (landscape phones, short windows): main.js sizeBoard() sets body.ll-short when the pond does not fit even
   with 26 px cards. Every part then keeps its own height and the stage scrolls, so the pond never rises over the header
   or spills onto the bets; from 560 px wide the lotus, the deck and Undo / Clear stand beside the lanes, and the
   stones take one row with their title beside them. */
body.ll-short .table-game .stage.tstage{overflow:hidden auto;overscroll-behavior:contain;justify-content:safe center;padding:0 6px}
body.ll-short .table-game .boardarea.tboardarea{flex:none;height:auto}
body.ll-short .table-game .frame,body.ll-short .table-game .board.tboard{flex:none}
body.ll-short .ll-board{height:auto;max-height:none;align-content:start}
body.ll-short .ll-track{padding:0 4px 10px}
@media (min-width:560px){
  body.ll-short .ll-board{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center}
  body.ll-short .ll-top{grid-row:1/3;grid-template-columns:auto auto;align-items:center;gap:6px 10px}
  body.ll-short .ll-deckbox{grid-area:1/1}
  body.ll-short .ll-tools{grid-area:2/1;justify-content:flex-start}
  body.ll-short .ll-lotus{grid-area:1/2/3/3}
  body.ll-short .ll-lane{grid-column:2}
  body.ll-short .ll-track{flex-direction:row;align-items:center;gap:10px}
  body.ll-short .ll-stones-t{flex:none;width:104px;text-align:left}
  body.ll-short .ll-stones{flex:1 1 auto;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
  body.ll-short .ll-stone{min-height:44px}
}
/* reduced motion (system setting, or the shell's body.still): no petal turn, no halo fade, no chip drop, no ripples */
body.still .ll-flower .ll-pt,body.still .ll-halo,body.still .ll-card,body.still .ll-lane::after{transition:none}
body.still .ll-chip,body.still .ll-deck.riffle .ll-card,body.still .spin.tprim.busy .ll-bud{animation:none}
@media (prefers-reduced-motion:reduce){
  .ll-flower .ll-pt,.ll-halo,.ll-card,.ll-lane::after,.ll-head::before,.ll-stone::before{transition:none}
  .ll-chip,.ll-deck.riffle .ll-card,.spin.tprim.busy .ll-bud{animation:none}
}