/* すごろくビンゴ: a night table — dark green felt, brass and ivory. The wheels carry the colour
   (gold for the big multiples, wine for nothing); BINGO and the jackpot wheels dim the room.
   Everything fits one phone screen: the card takes whatever height is left. */
.casino-pic .is-sg-ring{fill:#13211c;stroke:#c4a364;stroke-width:1.2;}
.casino-pic .is-sg-mark circle{fill:#c4a364;}
.casino-pic .is-sg-piece{fill:#ece4cf;}
.casino-pic .is-sg-jp{fill:#c4a364;font:600 9px Georgia,serif;letter-spacing:.1em;}
.casino-screen.is-sugoroku{background:radial-gradient(ellipse 120% 70% at 50% 35%,#16302a 0%,#0d1a17 55%,#080d0c 100%);}
.casino-screen.is-sugoroku{overflow-x:hidden;}
.casino-screen.is-sugoroku .cs-bar{margin-bottom:8px;}
.sg-body{position:relative;gap:9px;--gold:#cfae6a;--brass:#a8884a;--ivory:#f0e8d4;--muted:#9a9584;--line:rgba(207,174,106,.38);--felt:#132a23;--wine:#6e2a2c;}

/* Jackpots */
.sg-pots{display:grid;grid-template-columns:1fr 1fr auto auto;gap:6px;align-items:stretch;}
.sg-pot{position:relative;padding:5px 8px 6px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,rgba(207,174,106,.12),rgba(207,174,106,.02));text-align:center;overflow:hidden;}
.sg-pot::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,240,200,.18) 50%,transparent 60%);transform:translateX(-100%);animation:sg-shine 7s ease-in-out infinite;}
.sg-pot.is-sjp::after{animation-delay:3.5s;}
@keyframes sg-shine{0%,80%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.sg-pot small{display:block;color:var(--gold);font:600 8px/1.2 system-ui,sans-serif;letter-spacing:.22em;}
.sg-pot b{display:block;color:var(--ivory);font:500 17px/1.2 Georgia,"Yu Mincho",serif;font-variant-numeric:tabular-nums;}
.sg-help.sg-records{width:auto;padding:0 8px;font:600 12px system-ui,sans-serif;letter-spacing:.06em;}
.sg-help{width:34px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--gold);font:600 15px Georgia,serif;cursor:pointer;}

/* The card: as large as the screen leaves room for */
.sg-card-wrap{position:relative;width:min(100%,calc(100dvh - 350px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));min-width:240px;margin:0 auto;}
/* Reaches warm the card: --heat runs 0–6 with the lines waiting on one number. */
.sg-card-wrap.is-warm .sg-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.35),0 0 calc(6px + var(--heat,0) * 4px) rgba(214,170,90,calc(.12 + var(--heat,0) * .07));border-color:rgba(214,183,115,calc(.3 + var(--heat,0) * .1));transition:box-shadow .6s,border-color .6s;}
.sg-card{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:7px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,#183429,#0f221c);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.35);}
.sg-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:rgba(240,232,212,.05);color:rgba(240,232,212,.82);font:500 clamp(11px,3.4vw,15px)/1 Georgia,"Yu Mincho",serif;font-variant-numeric:tabular-nums;transition:background .3s,color .3s;}
.sg-cell span{position:relative;z-index:1;}
.sg-cell.is-free{border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8cf93,#a8884a);color:#2a1f0c;font:700 7px/1 system-ui,sans-serif;letter-spacing:.08em;}
.sg-cell.is-on:not(.is-free){background:radial-gradient(circle at 35% 30%,hsl(var(--hue,40) 45% 72%),hsl(var(--hue,40) 40% 42%) 75%);background-size:cover;background-position:center;color:#fff;font:700 clamp(11px,3.4vw,15px)/1 system-ui,sans-serif;box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(255,255,255,.35);}
.sg-cell.is-on:not(.has-icon)::before{content:attr(data-initial);font:700 clamp(13px,4vw,18px)/1 system-ui,sans-serif;color:#fff;}
.sg-cell.is-on:not(.is-free) span{position:absolute;right:-2px;bottom:-3px;min-width:15px;padding:1px 2px;border-radius:7px;background:rgba(10,16,14,.85);color:var(--ivory);font:600 8px/1.2 system-ui,sans-serif;text-align:center;}
.sg-cell.is-on.is-mine{box-shadow:0 0 0 2px var(--gold),0 1px 3px rgba(0,0,0,.5);}
.sg-cell.is-reach{box-shadow:0 0 0 1.5px var(--gold);animation:sg-reach 1.6s ease-in-out infinite;}
@keyframes sg-reach{50%{box-shadow:0 0 0 1.5px var(--gold),0 0 10px rgba(207,174,106,.6);}}
.sg-cell.is-new{animation:sg-new 1.2s cubic-bezier(.2,1.4,.4,1);}
@keyframes sg-new{0%{transform:scale(2);opacity:0;}45%{transform:scale(.9);opacity:1;}100%{transform:none;}}
.sg-cell.is-run{animation:sg-run 1.6s ease-out calc(var(--i,0) * 110ms) both;}
@keyframes sg-run{0%{transform:none;}25%{transform:scale(1.18);box-shadow:0 0 16px 4px rgba(240,205,130,.85);}100%{transform:none;}}
.sg-say{position:absolute;left:50%;bottom:10%;z-index:2;margin:0;padding:7px 16px;border-radius:999px;background:rgba(8,13,12,.86);color:var(--ivory);font:600 14px/1.3 system-ui,sans-serif;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none;}
.sg-say.is-on{animation:sg-say 2s ease-out forwards;}
@keyframes sg-say{0%{opacity:0;transform:translate(-50%,8px);}10%,75%{opacity:1;transform:translate(-50%,0);}100%{opacity:0;}}
.sg-say.is-gain{color:#b9e0c3;}
.sg-say.is-loss{color:#e8a99a;}
.sg-say.is-ball{color:var(--gold);letter-spacing:.12em;}
.sg-say.is-hot{top:42%;bottom:auto;padding:10px 26px;border:1px solid var(--gold);color:var(--gold);font:500 26px/1.2 Georgia,"Yu Mincho",serif;letter-spacing:.2em;box-shadow:0 0 30px rgba(207,174,106,.45);}

/* The ball draw */
.sg-ball{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffffff,#f1e9d4 45%,#c9b98f 85%,#9c8a5e);color:#1b2a24;font:700 22px/1 Georgia,serif;font-variant-numeric:tabular-nums;box-shadow:0 8px 16px rgba(0,0,0,.55),inset 0 -4px 8px rgba(0,0,0,.15);pointer-events:none;}
.sg-ball::before{content:"";position:absolute;inset:9px;border:1.5px solid rgba(160,40,40,.75);border-radius:50%;}
.sg-ball.is-in{animation:sg-ball-in 1.05s cubic-bezier(.2,.75,.3,1) both;}
@keyframes sg-ball-in{0%{transform:translateX(calc(50vw + 60px)) rotate(540deg);}70%{transform:translateX(-6px) rotate(-8deg);}85%{transform:translateX(3px) rotate(3deg);}100%{transform:none;}}
.sg-ball.is-hit{transition:transform .42s cubic-bezier(.5,0,.7,1),opacity .42s;transform:translate(var(--dx),var(--dy)) scale(.45);opacity:.6;}
.sg-ball.is-reach{background:radial-gradient(circle at 34% 28%,#fff8e6,#f0d58f 45%,#c79a3e 85%,#8e6c2c);box-shadow:0 0 0 3px rgba(240,213,143,.5),0 0 26px 6px rgba(240,190,90,.55),0 8px 16px rgba(0,0,0,.55);}
.sg-ball.is-miss{filter:grayscale(1) brightness(.65);transition:filter .3s,opacity .8s .2s;opacity:0;}

/* The die and the track */
.sg-boardrow{display:flex;align-items:center;gap:10px;height:78px;}
.sg-dice3d{position:relative;flex:0 0 58px;height:58px;perspective:360px;}
.sg-cube{position:absolute;inset:4px;transform-style:preserve-3d;}
.sg-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:6px;box-sizing:border-box;border-radius:8px;background:linear-gradient(145deg,#fffdf6,#e6dcc3);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);backface-visibility:hidden;}
.sg-face i{width:8px;height:8px;margin:auto;border-radius:50%;}
.sg-face i.is-on{background:#1d2622;}
.sg-face.is-one i.is-on{width:10px;height:10px;background:#b4232a;}
.sg-face.is-front{transform:translateZ(25px);}
.sg-face.is-back{transform:rotateY(180deg) translateZ(25px);}
.sg-face.is-right{transform:rotateY(90deg) translateZ(25px);}
.sg-face.is-left{transform:rotateY(-90deg) translateZ(25px);}
.sg-face.is-top{transform:rotateX(90deg) translateZ(25px);}
.sg-face.is-bottom{transform:rotateX(-90deg) translateZ(25px);}
.sg-shadow{position:absolute;left:8px;right:8px;bottom:-6px;height:6px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(3px);}
.sg-dice3d.is-shaking{animation:sg-shake .32s ease-in-out infinite;}
@keyframes sg-shake{0%,100%{transform:rotate(-10deg) translateY(0);}50%{transform:rotate(10deg) translateY(-4px);}}
.sg-dice3d.is-rolling .sg-cube{animation:sg-toss 1s cubic-bezier(.3,.7,.4,1);}
.sg-dice3d.is-rolling .sg-shadow{animation:sg-toss-shadow 1s cubic-bezier(.3,.7,.4,1);}
@keyframes sg-toss{0%{translate:0 0;}30%{translate:0 -30px;}60%{translate:0 0;}75%{translate:0 -8px;}90%{translate:0 0;}}
@keyframes sg-toss-shadow{30%{transform:scale(.55);opacity:.4;}60%{transform:none;opacity:1;}}

.sg-track{position:relative;flex:1;min-width:0;height:78px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 88%,transparent);}
.sg-lane{position:relative;display:flex;align-items:flex-end;gap:5px;width:max-content;height:100%;padding:0 60% 0 35%;box-sizing:content-box;}
.sg-sq{position:relative;display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:10px;background:rgba(240,232,212,.06);color:var(--muted);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);}
.sg-sq small{position:absolute;top:2px;left:4px;font:500 7px/1 system-ui,sans-serif;opacity:.6;}
.sg-sq b{font:700 13px/1 Georgia,serif;}
.sg-sq.is-normal b::before{content:"";display:block;width:12px;height:12px;border-radius:50%;background:conic-gradient(#c49a48 0 25%,#1f5e47 0 50%,#6e2a2c 0 62%,#2a3a34 0);opacity:.75;}
.sg-sq.is-start{background:linear-gradient(160deg,#c9a85f,#8e6c2c);color:#241a08;}
.sg-sq.is-start b{font-size:8px;letter-spacing:.08em;}
.sg-sq.is-event{background:linear-gradient(160deg,rgba(207,174,106,.4),rgba(207,174,106,.12));color:#f6dfa6;}
.sg-sq.is-accident{background:linear-gradient(160deg,rgba(150,52,52,.55),rgba(110,42,44,.3));color:#f1b5a7;}
.sg-sq.is-here{box-shadow:0 0 0 1.5px var(--ivory),inset 0 -2px 0 rgba(0,0,0,.25);}
.sg-sq.is-flash{animation:sg-flash .6s ease-out;}
@keyframes sg-flash{0%{filter:brightness(2);transform:scale(1.12);}100%{filter:none;transform:none;}}
.sg-piece{position:absolute;left:0;top:4px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e7dcc0 55%,#a8884a);box-shadow:0 3px 5px rgba(0,0,0,.5),0 0 0 1.5px #8e6c2c;transition:transform .17s ease-out;}
.sg-piece.is-hop{animation:sg-hop .19s ease-out;}
@keyframes sg-hop{50%{translate:0 -10px;}}

.sg-body .sg-status{display:block;margin:0;color:var(--muted);font-size:11px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-body .sg-status span,.sg-body .sg-status b{display:inline;}
.sg-status b{color:var(--ivory);font-weight:600;}
.sg-body .sg-status .sg-wanted{color:var(--gold);}
.sg-body .sg-status .sg-alone{color:#d9a37a;}

/* Controls */
.sg-controls{display:grid;grid-template-columns:1fr auto;gap:7px;}
.sg-controls .sg-costs{grid-column:1/-1;}
.sg-quick{min-width:64px;border:1px solid var(--line);border-radius:14px;background:transparent;color:var(--muted);font:600 12px system-ui,sans-serif;cursor:pointer;}
.sg-quick[aria-pressed=true]{background:rgba(214,183,115,.16);border-color:var(--gold);color:var(--gold);}
.sg-costs{display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border:1px solid rgba(240,232,212,.14);border-radius:12px;}
.sg-costs.is-fixed{display:flex;justify-content:center;align-items:baseline;gap:8px;margin:0;padding:6px;color:var(--muted);font-size:12px;}
.sg-costs.is-fixed b{color:var(--ivory);font:500 18px Georgia,serif;}
.sg-cost{min-height:34px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:500 14px Georgia,serif;cursor:pointer;transition:background .2s,color .2s;}
.sg-cost[aria-checked=true]{background:linear-gradient(180deg,#d6b773,#a8884a);color:#1f1608;font-weight:700;}
.sg-cost:disabled:not([aria-checked=true]){opacity:.5;}
.sg-go{min-height:52px;border:0;border-radius:14px;background:linear-gradient(180deg,#e2c582,#b08d48 60%,#8e6c2c);color:#1f1608;font:700 17px system-ui,sans-serif;letter-spacing:.14em;box-shadow:0 4px 0 #5e4719,0 10px 20px rgba(0,0,0,.4);cursor:pointer;}
.sg-go:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #5e4719;}
.sg-go:disabled{filter:grayscale(.6) brightness(.6);cursor:default;}

/* Wheels and games over the screen */
.sg-layer{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(5,9,8,.5);}
.sg-layer[hidden]{display:none;}
.sg-layer.is-hot{background:rgba(3,5,4,.84);}
.sg-layer.is-hotter{background:radial-gradient(circle at 50% 45%,rgba(120,90,30,.45),rgba(3,5,4,.92) 70%);}
.sg-wheel,.sg-game,.sg-jackpot,.sg-sheet{width:min(100%,380px);padding:16px 14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#152b24,#0d1a16);color:var(--ivory);text-align:center;box-sizing:border-box;box-shadow:0 18px 40px rgba(0,0,0,.5);}
.sg-wheel{animation:sg-up .25s ease-out;}
@keyframes sg-up{from{opacity:0;transform:translateY(14px) scale(.96);}}
.sg-layer.is-hot .sg-wheel{border-color:var(--gold);}
.sg-wheel-title{margin:0 0 8px;color:var(--gold);font:600 13px/1.3 Georgia,"Yu Mincho",serif;letter-spacing:.22em;}
.sg-layer.is-hot .sg-wheel-title{font-size:20px;letter-spacing:.16em;}
.sg-wheel-face{position:relative;width:min(72vw,270px);aspect-ratio:1;margin:0 auto;}
.sg-layer.is-hot .sg-wheel-face{width:min(80vw,300px);}
.sg-wheel-face svg{display:block;width:100%;height:100%;overflow:visible;}
.sg-rim{fill:#2b2213;stroke:#cfae6a;stroke-width:2;}
.sg-lamp{fill:#5a4a2a;}
.sg-wheel.is-spinning .sg-lamp{animation:sg-lamp .6s linear infinite;animation-delay:calc(var(--i) * -25ms);}
@keyframes sg-lamp{0%,30%{fill:#ffe9b0;}31%,100%{fill:#5a4a2a;}}
.sg-wheel.is-done .sg-lamp{animation:sg-lamp-done .5s steps(1) 3;fill:#ffe9b0;}
@keyframes sg-lamp-done{50%{fill:#5a4a2a;}}
.sg-disc{transform-origin:0 0;}
.sg-seg{stroke:rgba(20,14,6,.7);stroke-width:.8;}
.sg-seg.is-gold,.sg-seg.is-jackpot{fill:#cfa24c;}
.sg-seg.is-champagne{fill:#9c7f45;}
.sg-seg.is-high{fill:#1f6b50;}
.sg-seg.is-mid{fill:#1a4339;}
.sg-seg.is-low{fill:#1d2a27;}
.sg-seg.is-zero,.sg-seg.is-worst{fill:#6e2a2c;}
.sg-seg.is-bad{fill:#4a2526;}
.sg-seg.is-safe{fill:#1f6b50;}
.sg-seg.is-ball{fill:#efe6cf;}
.sg-seg.is-game-blackjack{fill:#1f6b50;}
.sg-seg.is-game-dice{fill:#1d3a5c;}
.sg-seg.is-game-chinchiro{fill:#6b3f22;}
.sg-hub{fill:#1b140a;stroke:#cfae6a;stroke-width:2;}
.sg-seg-text{fill:#f0e8d4;font:600 11px Georgia,serif;text-anchor:middle;dominant-baseline:middle;}
.sg-seg-text.is-many{font-size:9px;}
.sg-seg-text.is-long{font-size:7px;letter-spacing:.04em;}
.sg-seg-text.is-dense{font-size:8px;letter-spacing:0;}
.sg-seg-text.is-gold,.sg-seg-text.is-jackpot,.sg-seg-text.is-champagne,.sg-seg-text.is-ball{fill:#1f1608;}
.sg-pointer{position:absolute;top:-6px;left:50%;width:0;height:0;margin-left:-9px;border:9px solid transparent;border-top:16px solid var(--ivory);filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));}
.sg-wheel-out{min-height:1.4em;margin:10px 0 0;color:var(--ivory);font:500 19px/1.4 Georgia,"Yu Mincho",serif;}
.sg-wheel.is-done .sg-wheel-out{animation:sg-pop .4s cubic-bezier(.2,1.5,.4,1);}
@keyframes sg-pop{from{transform:scale(.6);opacity:0;}}
.sg-wheel-out.is-gold,.sg-wheel-out.is-jackpot,.sg-wheel-out.is-champagne{color:var(--gold);font-size:24px;}
.sg-wheel-out.is-zero,.sg-wheel-out.is-worst,.sg-wheel-out.is-bad{color:#e8a99a;}
.sg-wheel-out.is-ball{color:var(--ivory);letter-spacing:.06em;}
.sg-wheel-base{margin:2px 0 0;color:var(--muted);font-size:11px;}

.sg-jackpot{padding:34px 16px;border-color:var(--gold);box-shadow:0 0 80px rgba(230,190,110,.45);animation:sg-up .4s ease-out;}
.sg-jackpot-word{margin:0;color:var(--gold);font:500 26px/1.3 Georgia,"Yu Mincho",serif;letter-spacing:.22em;}
.sg-jackpot b{display:block;margin:14px 0;color:var(--ivory);font:500 38px/1.2 Georgia,serif;font-variant-numeric:tabular-nums;}
.sg-jackpot small{color:var(--muted);font-size:11px;}

.sg-sheet{text-align:left;}
.sg-sheet-title{margin:0 0 6px;color:var(--gold);font:600 15px Georgia,"Yu Mincho",serif;text-align:center;}
.sg-sheet ul{max-height:55dvh;overflow:auto;margin:0 0 12px;padding-left:18px;color:#d9d2c0;font-size:12px;line-height:1.75;}
.sg-sheet .sg-game-btn{width:100%;}
.sg-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:0 0 10px;}
.sg-stats div{display:flex;justify-content:space-between;gap:6px;padding:4px 0;border-bottom:1px solid rgba(240,232,212,.08);font-size:11px;}
.sg-stats div:nth-last-child(-n+3){grid-column:1/-1;}
.sg-stats dt{color:var(--muted);}
.sg-stats dd{margin:0;color:var(--ivory);font-variant-numeric:tabular-nums;}
.sg-book-title{margin:4px 0;color:var(--gold);font-size:12px;}
.sg-log{max-height:30dvh;overflow:auto;margin:0 0 12px;padding:0;list-style:none;font-size:12px;}
.sg-log li{display:flex;gap:10px;padding:4px 0;border-bottom:1px solid rgba(240,232,212,.06);color:#d9d2c0;}
.sg-log time{flex:none;color:var(--muted);font-variant-numeric:tabular-nums;}
.sg-log li.is-jp span,.sg-log li.is-sjp span{color:var(--gold);font-weight:600;}

/* Event games */
.sg-game-rule{margin:-4px 0 10px;color:var(--muted);font-size:11px;}
.sg-game-table{display:grid;gap:12px;padding:12px;border-radius:12px;background:var(--felt);box-shadow:inset 0 0 0 1px rgba(207,174,106,.2);}
.sg-hand{display:grid;gap:6px;justify-items:center;}
.sg-hand>span{color:var(--ivory);font-size:12px;}
.sg-cards{display:flex;gap:5px;justify-content:center;min-height:62px;}
.sg-cards .pk-card{width:42px;height:60px;border-radius:6px;}
.sg-dice{display:flex;gap:6px;justify-content:center;}
.sg-dice .cs-die{width:40px;height:40px;padding:5px;}
.sg-die-btn{padding:2px;border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;}
.sg-die-btn.is-held{border-color:var(--gold);}
.sg-game-line{min-height:1.4em;margin:10px 0;color:var(--ivory);font:500 14px/1.4 system-ui,sans-serif;}
.sg-game-actions{display:flex;gap:8px;}
.sg-game-btn{flex:1;min-height:46px;border:0;border-radius:12px;background:linear-gradient(180deg,#d6b773,#a8884a);color:#1f1608;font:700 14px system-ui,sans-serif;cursor:pointer;}
.sg-game-btn:disabled{filter:grayscale(.6) brightness(.6);}

/* Mini games after a line */
.sg-mini-big{margin:6px 0;color:var(--gold);font:500 44px/1.1 Georgia,serif;font-variant-numeric:tabular-nums;}
.sg-mini-die{margin:10px auto;}
.sg-mini-answer{min-height:1.3em;margin:0 0 8px;color:var(--ivory);font:500 28px/1.2 Georgia,serif;font-variant-numeric:tabular-nums;}
.sg-tap{width:100%;min-height:120px;margin:8px 0;border:0;border-radius:18px;background:radial-gradient(circle at 50% 35%,#f0d58f,#b08d48 70%,#8e6c2c);color:#1f1608;font:800 26px system-ui,sans-serif;touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer;}
.sg-tap:active{transform:scale(.97);}
.sg-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
.sg-key{min-height:44px;border:1px solid var(--line);border-radius:10px;background:#152b24;color:var(--ivory);font:600 18px system-ui,sans-serif;cursor:pointer;}
.sg-keys .sg-game-btn{grid-column:1/-1;}
.sg-seg.is-game-mini{fill:#1d3a5c;}

@media (prefers-reduced-motion:reduce){
  .sg-card-wrap.is-warm .sg-card{transition:none;}
  .sg-ball.is-in,.sg-pot::after,.sg-cell.is-reach,.sg-cell.is-new,.sg-cell.is-run,.sg-dice3d .sg-cube,.sg-dice3d.is-shaking,.sg-lamp{animation:none !important;}
}

/* The normal squares' quick games */
.sg-stopbar{position:relative;height:26px;margin:14px 6px;border-radius:13px;background:rgba(240,232,212,.08);border:1px solid var(--line);overflow:hidden;}
.sg-stopbar b{position:absolute;top:0;bottom:0;}
.sg-stopbar .is-good{left:30%;right:30%;background:rgba(200,200,210,.22);}
.sg-stopbar .is-perfect{left:45%;right:45%;background:linear-gradient(180deg,#e8cf93,#a8884a);}
.sg-stoplight{position:absolute;top:3px;bottom:3px;width:6px;margin-left:-3px;border-radius:3px;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.7);left:0;}
.sg-stopbar[data-zone=perfect]{box-shadow:0 0 18px rgba(232,207,147,.7);}
.sg-stopbar[data-zone=miss] .sg-stoplight{background:#9a8f7a;box-shadow:none;}
.sg-hilo{display:flex;justify-content:center;gap:14px;margin:10px 0;}
.sg-hilo-card{display:grid;place-items:center;width:62px;height:86px;border-radius:9px;background:linear-gradient(160deg,#1d3a30,#0f221c);border:1px solid var(--line);color:var(--gold);font:700 28px Georgia,serif;}
.sg-hilo-card.is-open{background:linear-gradient(160deg,#fbf6ea,#e9dfc6);color:#1b2a24;}
.sg-mini .sg-game-btn[data-sg-game=high],.sg-mini .sg-game-btn[data-sg-game=low]{width:calc(50% - 4px);display:inline-block;margin:0 2px;}
/* Who else is rolling on the shared card right now. */
.sg-body .sg-here{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin:0;color:var(--muted);font-size:11px;line-height:1.3;}
.sg-body .sg-here[hidden]{display:none;}
.sg-here-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80;animation:sg-here-pulse 1.6s ease-in-out infinite;}
.sg-here-who{display:inline-flex;align-items:center;gap:4px;color:var(--ivory);}
.sg-here-face{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:hsl(var(--hue,200) 45% 40%) center/cover no-repeat;color:#fff;font-size:9px;font-style:normal;font-weight:700;}
@keyframes sg-here-pulse{50%{opacity:.4;}}
@media (prefers-reduced-motion:reduce){.sg-here-dot{animation:none;}}