/* Block Skyline web game — the app's game screen, in "app points": every size is N × var(--p) (1 pt at phone scale). */
@font-face{font-family:'Pixelify Sans';font-weight:400 700;font-display:swap;src:url(/fonts/pixelify-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pixelify Sans';font-weight:400 700;font-display:swap;src:url(/fonts/pixelify-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Silkscreen';font-weight:400;font-display:swap;src:url(/fonts/silkscreen400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Silkscreen';font-weight:400;font-display:swap;src:url(/fonts/silkscreen400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

.bsg{--ink:#2E3A59;--muted:#6B7590;--coral:#FF7A6B;--coral-d:#D9564A;--mint:#7ED6B8;--mint-d:#57B395;--mint-t:#1F4A3E;--butter:#FFD66B;--butter-d:#E0B444;--butter-t:#7A5A12;--sky:#6CC3F0;--lilac:#B8A6F2;--cream:#FDF3E4;--shadow:#E3D3BE;--track:#F3EADB;--sky-top:#BFE6F5;--sky-mid:#D6EFF5;
  --title:'Pixelify Sans','Fredoka',system-ui,sans-serif;--label:'Silkscreen',ui-monospace,monospace;--num:'Fredoka',system-ui,sans-serif;
  display:flex;justify-content:center;width:100%;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.bsg *{box-sizing:border-box}
:where(.bsg) button{font:inherit;color:inherit;border:0;margin:0;padding:0;background:none;cursor:pointer}
.bsg button:focus-visible,.bsg a:focus-visible{outline:calc(3*var(--p)) solid var(--coral-d);outline-offset:calc(3*var(--p))}
.bsg-app{position:relative;width:calc(390*var(--p));height:calc(670*var(--p));background:var(--cream);overflow:hidden;color:var(--ink);font-family:var(--title);border-radius:calc(30*var(--p));box-shadow:0 calc(10*var(--p)) 0 var(--shadow),0 calc(30*var(--p)) calc(60*var(--p)) rgba(46,58,89,.18);outline:calc(6*var(--p)) solid #fff;isolation:isolate}
.bsg.full{position:relative;height:100%;align-items:center;background:var(--sky-top) url(/img/skyline.svg) repeat-x left bottom/auto 38vh}
.bsg.full .bsg-app{box-shadow:0 calc(10*var(--p)) 0 var(--shadow),0 calc(30*var(--p)) calc(60*var(--p)) rgba(46,58,89,.18)}
.bsg-exit{display:none}
.bsg.full .bsg-exit{display:flex;position:absolute;top:16px;right:16px;width:52px;height:52px;border-radius:16px;background:#fff;box-shadow:0 5px 0 var(--shadow);align-items:center;justify-content:center;z-index:10}
.bsg.full .bsg-exit svg{width:22px;height:22px}
.bsg .bsg-n{font-family:var(--num);font-weight:600}
.bsg-band{position:absolute;left:0;right:0;top:0;height:calc(151*var(--p));background:var(--sky-top)}

/* HUD */
.bsg-hud{position:relative;display:flex;align-items:center;justify-content:space-between;height:calc(64*var(--p));margin-top:calc(14*var(--p));padding:0 calc(16*var(--p))}
.bsg-ib{width:calc(52*var(--p));height:calc(52*var(--p));border-radius:calc(16*var(--p));background:#fff;box-shadow:0 calc(5*var(--p)) 0 var(--shadow);display:flex;align-items:center;justify-content:center;transition:transform .06s}
.bsg-ib:active{transform:translateY(calc(3*var(--p)));box-shadow:0 calc(2*var(--p)) 0 var(--shadow)}
.bsg-ib svg{width:calc(20*var(--p));height:calc(20*var(--p))}
.bsg-ib:disabled{opacity:.5;cursor:default}
.bsg-score{width:calc(150*var(--p));height:calc(58*var(--p));background:#fff;border-radius:calc(18*var(--p));box-shadow:0 calc(6*var(--p)) 0 var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:calc(-6*var(--p))}
.bsg-lbl{font-family:var(--label);font-size:calc(11*var(--p));color:var(--muted);line-height:1.2}
.bsg-score b{font-family:var(--num);font-weight:600;font-size:calc(30*var(--p));line-height:calc(34*var(--p));color:var(--coral-d)}
.bsg-rec{min-width:calc(92*var(--p));height:calc(47*var(--p));padding:0 calc(12*var(--p));background:#fff;border-radius:calc(16*var(--p));box-shadow:0 calc(5*var(--p)) 0 var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:calc(-5*var(--p))}
.bsg-rec b{font-weight:700;font-size:calc(16*var(--p))}
.bsg-bar{position:relative;height:calc(48*var(--p));margin:calc(12*var(--p)) calc(16*var(--p)) 0;background:#fff;border-radius:calc(16*var(--p));box-shadow:0 calc(5*var(--p)) 0 var(--shadow);display:flex;align-items:center;gap:calc(10*var(--p));padding:0 calc(12*var(--p))}
.bsg-bar svg{width:calc(22*var(--p));height:calc(22*var(--p));flex:none}
.bsg-floor{font-weight:700;font-size:calc(18*var(--p));white-space:nowrap}
.bsg-pips{display:flex;gap:calc(5*var(--p))}
.bsg-pips i{width:calc(22*var(--p));height:calc(14*var(--p));border-radius:calc(6*var(--p));background:var(--track)}
.bsg-pips i.on{background:var(--mint);box-shadow:inset 0 calc(-3*var(--p)) 0 var(--mint-d)}
.bsg-combo{margin-left:auto;padding:calc(4*var(--p)) calc(10*var(--p));border-radius:999px;background:var(--butter);color:var(--butter-t);font-family:var(--label);font-weight:700;font-size:calc(12*var(--p));white-space:nowrap;animation:bsg-zoom .35s cubic-bezier(.3,1.6,.5,1)}
.bsg-rushrow{height:calc(40*var(--p));display:flex;align-items:center;justify-content:center}
.bsg-rush{display:flex;align-items:center;gap:calc(6*var(--p));padding:calc(5*var(--p)) calc(14*var(--p));background:#fff;border:calc(2*var(--p)) solid var(--coral);border-radius:999px;animation:bsg-zoom .35s cubic-bezier(.3,1.6,.5,1)}
.bsg-rush b{font-family:var(--label);font-weight:700;font-size:calc(13*var(--p));color:var(--coral-d)}
.bsg-rush span{font-weight:500;font-size:calc(14*var(--p))}

/* Board */
.bsg-bw{position:relative;width:calc(349*var(--p));margin:0 auto}
.bsg-shake{animation:bsg-shake .23s linear}
.bsg-board{display:grid;grid-template-columns:repeat(8,calc(39*var(--p)));gap:calc(3*var(--p));padding:calc(8*var(--p));background:#EFE2CC;border-radius:calc(18*var(--p))}
.bsg-rushframe{position:absolute;inset:calc(-4*var(--p));border-radius:calc(22*var(--p));border:calc(3*var(--p)) solid var(--coral);pointer-events:none}
.bsg-c,.bsg-k{position:relative;width:var(--s,calc(39*var(--p)));height:var(--s,calc(39*var(--p)));border-radius:22%}
.bsg-c{background:#E4D3B8;border-top:calc(3*var(--p)) solid #D9C6A8}
.bsg-c.gh{background:var(--g);border:calc(3*var(--p)) solid var(--f)}
.bsg-c.hn{border:calc(3*var(--p)) dashed var(--sky)}
.bsg-c.bk,.bsg-k{background:var(--f);border-top:max(2px,calc(var(--s,calc(39*var(--p)))*.12 - 2px)) solid var(--l);border-bottom:max(3px,calc(var(--s,calc(39*var(--p)))*.12)) solid var(--d)}
.bsg-c.bk::after,.bsg-k::after{content:'';position:absolute;left:16%;top:10%;width:26%;height:13%;border-radius:3px;background:rgba(255,255,255,.75)}
.bsg-c.bk.sh,.bsg-k.sh{background:var(--l);border-top-color:#fff;box-shadow:0 0 calc(10*var(--p)) #FFD66B}
.bsg-c.bo{animation:bsg-bounce .32s cubic-bezier(.3,1.7,.5,1)}
.bsg-k.ek{background:none;border:0;box-shadow:none}.bsg-k.ek::after{display:none}
.coral{--f:#FF8A7A;--d:#E0655A;--l:#FFB3A8;--g:#FF8A7A55}
.mint{--f:#7ED6B8;--d:#4FB897;--l:#B5EBD8;--g:#7ED6B855}
.butter{--f:#FFD66B;--d:#E8B53E;--l:#FFE9A8;--g:#FFD66B55}
.sky{--f:#6CC3F0;--d:#3FA3D8;--l:#A8DDF7;--g:#6CC3F055}
.lilac{--f:#B8A6F2;--d:#927DE0;--l:#D6CBFA;--g:#B8A6F255}
.peach{--f:#FFB27A;--d:#E88A4E;--l:#FFD2AF;--g:#FFB27A55}
.bsg-burst{position:absolute;inset:0;pointer-events:none}
.bsg-burst .bsg-k{position:absolute;animation:bsg-pop .24s ease-in forwards}

/* Tray */
.bsg-tray{display:flex;gap:calc(10*var(--p));padding:0 calc(20*var(--p));margin-top:calc(18*var(--p))}
.bsg-slot{position:relative;flex:1;height:calc(104*var(--p));border-radius:calc(18*var(--p));background:#F6ECDD;display:flex;align-items:center;justify-content:center;touch-action:none}
.bsg-slot.dim{opacity:.45}
.bsg-slot.out .bsg-pc{opacity:0}
.bsg-pc{display:grid;gap:2px}
.bsg-x{position:absolute;right:calc(-6*var(--p));top:calc(-6*var(--p));width:calc(26*var(--p));height:calc(26*var(--p));border-radius:calc(9*var(--p));background:var(--coral);box-shadow:inset 0 calc(-3*var(--p)) 0 var(--coral-d);display:flex;align-items:center;justify-content:center;animation:bsg-zoom .3s both}
.bsg-x svg{width:calc(14*var(--p));height:calc(14*var(--p))}
.bsg-drag{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;display:grid;will-change:transform}

/* Popups */
.bsg-pops{position:absolute;inset:0;pointer-events:none}
.bsg-pop{position:absolute;left:0;right:0;display:flex;justify-content:center;animation:bsg-zoom .35s cubic-bezier(.3,1.6,.5,1)}
.bsg-pop.out{animation:bsg-fade .18s forwards}
.bsg-pop.record{top:calc(14*var(--p))}.bsg-pop.praise,.bsg-pop.rush{top:26%}.bsg-pop.points{top:50%;justify-content:flex-end;padding-right:calc(16*var(--p))}.bsg-pop.floor{bottom:10%}
.bsg-st{font-family:var(--label);font-weight:700;text-align:center;line-height:1.1;white-space:nowrap;--o:calc(3*var(--p));--y:calc(8*var(--p));text-shadow:var(--o) 0 #fff,calc(-1*var(--o)) 0 #fff,0 var(--o) #fff,0 calc(-1*var(--o)) #fff,var(--o) var(--o) #fff,calc(-1*var(--o)) var(--o) #fff,var(--o) calc(-1*var(--o)) #fff,calc(-1*var(--o)) calc(-1*var(--o)) #fff,var(--o) var(--y) var(--ink),calc(-1*var(--o)) var(--y) var(--ink),0 calc(var(--y) + 1px) var(--ink);padding-bottom:calc(10*var(--p))}
.bsg-st .bsg-n{font-weight:700}
.bsg-fpill{display:flex;align-items:center;gap:calc(8*var(--p));padding:calc(8*var(--p)) calc(14*var(--p));border-radius:999px;background:var(--mint);box-shadow:inset 0 calc(-4*var(--p)) 0 var(--mint-d);color:var(--mint-t);font-weight:700;font-size:calc(15*var(--p))}
.bsg-fpill svg{width:calc(16*var(--p));height:calc(16*var(--p))}
.bsg-veil{position:absolute;inset:0;border-radius:calc(18*var(--p));background:rgba(46,58,89,.3);display:flex;align-items:center;justify-content:center;animation:bsg-fade-in .18s;pointer-events:none}
.bsg-ribbon{position:absolute;left:calc(-14*var(--p));right:calc(-14*var(--p));height:calc(78*var(--p));background:var(--coral);box-shadow:inset 0 calc(-6*var(--p)) 0 var(--coral-d);transform:rotate(-4deg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(40*var(--p));color:#fff;text-shadow:0 calc(4*var(--p)) 0 var(--coral-d);animation:bsg-zoom .4s cubic-bezier(.3,1.6,.5,1)}

/* Overlays (start / pause / end): sky + city */
.bsg-ov{position:absolute;inset:0;z-index:5;background:var(--sky-top) url(/img/skyline.svg) no-repeat center bottom/100% auto;display:flex;flex-direction:column;align-items:center;padding:calc(40*var(--p)) calc(20*var(--p)) calc(16*var(--p));gap:calc(18*var(--p));animation:bsg-fade-in .2s}
.bsg-ov.dimboard{background:rgba(253,243,228,.55);justify-content:center}
.bsg-ov::before{content:'';position:absolute;inset:0;background:var(--sky-top);opacity:.4;pointer-events:none;z-index:-1}
.bsg-ov.dimboard::before{display:none}
.bsg-logo{display:flex;flex-direction:column;align-items:center;transform:rotate(-3deg);margin-top:calc(10*var(--p))}
.bsg-tag{margin:0;font-weight:500;font-size:calc(17*var(--p));text-align:center;padding:0 calc(10*var(--p))}
.bsg-pill{background:#fff;border-radius:999px;padding:calc(8*var(--p)) calc(16*var(--p));box-shadow:0 calc(4*var(--p)) 0 var(--shadow);font-weight:700;font-size:calc(15*var(--p))}
.bsg-recs{align-self:stretch;margin:0 calc(4*var(--p));height:calc(78*var(--p));background:#fff;border-radius:calc(18*var(--p));box-shadow:0 calc(6*var(--p)) 0 var(--shadow);display:flex}
.bsg-recs>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--p))}
.bsg-recs>div+div{border-left:calc(2*var(--p)) solid var(--track)}
.bsg-recs b{font-family:var(--num);font-weight:600;font-size:calc(28*var(--p))}
.bsg-acts{align-self:stretch;display:flex;flex-direction:column;gap:calc(12*var(--p))}
.bsg-row{display:flex;gap:calc(10*var(--p))}
.bsg-btn{position:relative;flex:1;height:calc(60*var(--p));border-radius:calc(18*var(--p));display:flex;align-items:center;justify-content:center;gap:calc(10*var(--p));font-family:var(--title);font-weight:700;font-size:calc(21*var(--p));letter-spacing:.5px;background:var(--coral);color:#fff;box-shadow:0 calc(6*var(--p)) 0 var(--coral-d);transition:transform .06s}
.bsg-btn:active{transform:translateY(calc(4*var(--p)));box-shadow:0 calc(2*var(--p)) 0 var(--coral-d)}
.bsg-btn svg{width:calc(22*var(--p));height:calc(22*var(--p))}
.bsg-btn.big{height:calc(66*var(--p));font-size:calc(24*var(--p))}
.bsg-btn.mid{height:calc(52*var(--p));font-size:calc(19*var(--p))}
.bsg-btn.sm{height:calc(48*var(--p));font-size:calc(17*var(--p))}
.bsg-btn.white{background:#fff;color:var(--ink);box-shadow:0 calc(6*var(--p)) 0 var(--shadow)}
.bsg-btn.mint{background:var(--mint);color:var(--mint-t);box-shadow:0 calc(6*var(--p)) 0 var(--mint-d)}
.bsg-btn.auto{flex:none;padding:0 calc(18*var(--p))}
.bsg-btn.cta{flex:none;width:calc(250*var(--p));height:calc(70*var(--p));font-size:calc(30*var(--p))}
.bsg-hint{background:#fff;border-radius:999px;padding:calc(6*var(--p)) calc(14*var(--p));font-family:var(--label);font-size:calc(11*var(--p));box-shadow:0 calc(3*var(--p)) 0 var(--shadow);text-align:center}
.bsg-link{align-self:center;height:calc(40*var(--p));padding:0 calc(16*var(--p));font-weight:700;font-size:calc(17*var(--p));text-decoration:underline}
.bsg-toggle{border:0;align-self:center;min-width:calc(200*var(--p));height:calc(48*var(--p));padding:0 calc(20*var(--p));border-radius:calc(18*var(--p));background:#fff;box-shadow:inset 0 0 0 calc(3*var(--p)) var(--mint);display:flex;align-items:center;justify-content:center;gap:calc(8*var(--p));font-family:var(--label);font-size:calc(12*var(--p))}
.bsg-toggle.off{background:var(--track);box-shadow:none;color:var(--muted)}
.bsg-toggle svg{width:calc(20*var(--p));height:calc(20*var(--p))}
.bsg-card{align-self:stretch;display:flex;gap:calc(18*var(--p));padding:calc(18*var(--p));background:#fff;border-radius:calc(22*var(--p));box-shadow:0 calc(7*var(--p)) 0 var(--shadow);height:calc(196*var(--p))}
.bsg-tower{width:calc(72*var(--p));border-radius:calc(12*var(--p));background:var(--sky-mid);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:calc(8*var(--p));overflow:hidden}
.bsg-flag{display:flex;align-items:flex-start;width:calc(46*var(--p));padding-left:calc(22*var(--p))}
.bsg-flag i{width:2px;height:calc(26*var(--p));background:var(--ink)}
.bsg-flag b{padding:calc(1*var(--p)) calc(5*var(--p));background:var(--coral);border-radius:3px;font-family:var(--num);font-weight:600;font-size:calc(11*var(--p));color:#fff}
.bsg-tb{width:calc(46*var(--p));height:calc(16*var(--p));background:var(--f);box-shadow:inset 0 calc(-3*var(--p)) 0 var(--d)}
.bsg-ground{width:calc(58*var(--p));height:3px;border-radius:2px;background:var(--shadow)}
.bsg-cr{flex:1;display:flex;flex-direction:column;justify-content:center;gap:calc(8*var(--p))}
.bsg-cr .big{font-family:var(--num);font-weight:600;font-size:calc(40*var(--p));line-height:calc(46*var(--p));color:var(--coral-d)}
.bsg-hr{height:2px;background:var(--track)}
.bsg-stat{display:flex;justify-content:space-between;font-weight:500;font-size:calc(15*var(--p));color:var(--muted)}
.bsg-stat b{font-family:var(--num);font-weight:600;color:var(--ink)}
.bsg-new{padding:calc(2*var(--p)) calc(7*var(--p));border-radius:999px;background:var(--butter);color:var(--butter-t);font-family:var(--label);font-weight:700;font-size:calc(10*var(--p))}
.bsg-story{margin:calc(-6*var(--p)) 0 0;font-weight:500;font-size:calc(17*var(--p));text-align:center}
.bsg-conf{position:absolute;pointer-events:none;animation:bsg-zoom .3s both}
.bsg-toast{position:absolute;left:50%;bottom:calc(24*var(--p));transform:translateX(-50%);z-index:9;background:var(--ink);color:#fff;border-radius:999px;padding:calc(8*var(--p)) calc(16*var(--p));font-weight:700;font-size:calc(15*var(--p));white-space:nowrap;animation:bsg-zoom .3s}
.bsg-banner{position:absolute;left:calc(16*var(--p));right:calc(16*var(--p));top:calc(-4*var(--p));z-index:4;background:var(--butter);color:var(--butter-t);border-radius:calc(14*var(--p));box-shadow:0 calc(4*var(--p)) 0 var(--butter-d);padding:calc(8*var(--p)) calc(12*var(--p));font-weight:700;font-size:calc(14*var(--p));text-align:center;animation:bsg-zoom .35s}

/* First-game finger hint */
.bsg-finger{position:absolute;inset:0;z-index:3;pointer-events:none;animation:bsg-fade-in .3s .3s both}
.bsg-finger svg.path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bsg-finger .f{position:absolute;left:0;top:0;width:calc(48*var(--p));height:calc(56*var(--p));offset-rotate:0deg;animation:bsg-finger 1.8s ease-in-out infinite}

@keyframes bsg-zoom{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes bsg-fade{to{opacity:0}}
@keyframes bsg-fade-in{from{opacity:0}}
@keyframes bsg-bounce{from{transform:scale(.78)}to{transform:none}}
@keyframes bsg-pop{0%{transform:scale(1)}30%{transform:scale(1.18)}100%{transform:scale(0);opacity:0}}
@keyframes bsg-shake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes bsg-finger{0%,14%{offset-distance:0%;opacity:1}75%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.bsg *{animation-duration:1ms!important}.bsg-finger .f{animation:none}}

/* Wide screens: info column · board · pieces column (same pt units, see WIDE in game/ui.js) */
.bsg-app.wide{width:calc(724*var(--p));height:calc(393*var(--p));display:grid;grid-template-columns:calc(175*var(--p)) calc(389*var(--p)) calc(160*var(--p));align-items:stretch}
.bsg-app.wide .bsg-band{top:0;bottom:0;height:auto;width:calc(175*var(--p))}
.bsg-app.wide .bsg-side{position:relative;display:flex;flex-direction:column;gap:calc(12*var(--p));padding:calc(16*var(--p)) calc(14*var(--p))}
.bsg-app.wide .bsg-hud{height:auto;margin:0;padding:0;flex-direction:column;align-items:stretch;gap:calc(12*var(--p))}
.bsg-app.wide .bsg-hud .bsg-ib{align-self:flex-start;width:calc(46*var(--p));height:calc(46*var(--p))}
.bsg-app.wide .bsg-score{width:auto;height:calc(66*var(--p));margin:0}
.bsg-app.wide .bsg-score b{font-size:calc(34*var(--p));line-height:calc(38*var(--p))}
.bsg-app.wide .bsg-rec{height:calc(48*var(--p));margin:0}
.bsg-app.wide .bsg-bar{height:auto;margin:0;flex-direction:column;justify-content:center;gap:calc(8*var(--p));padding:calc(12*var(--p)) calc(10*var(--p))}
.bsg-app.wide .bsg-bar svg{width:calc(26*var(--p));height:calc(26*var(--p))}
.bsg-app.wide .bsg-floor{font-size:calc(20*var(--p))}
.bsg-app.wide .bsg-combo{margin:0}
.bsg-app.wide .bsg-rushrow{height:auto}
.bsg-app.wide .bsg-rush{flex-direction:column;gap:calc(2*var(--p));border-radius:calc(14*var(--p));text-align:center}
.bsg-app.wide .bsg-bw{align-self:center}
.bsg-app.wide .bsg-tray{flex-direction:column;margin:0;padding:calc(16*var(--p)) calc(14*var(--p)) calc(16*var(--p)) 0;gap:calc(12*var(--p))}
.bsg-app.wide .bsg-slot{height:auto}
.bsg-app.wide .bsg-ov>*{width:min(100%,calc(350*var(--p)));align-self:center}
.bsg-app.wide .bsg-ov>.bsg-conf{width:auto}
.bsg-app.wide .bsg-ov>:is(.bsg-pill,.bsg-hint,.bsg-toggle,.bsg-st,.bsg-btn.cta){width:auto}
.bsg-app.wide>[data-r="finger"],.bsg-app.wide>[data-r="ov"]{display:contents}
.bsg-app.wide .bsg-ov{background-repeat:repeat-x;background-size:auto 45%;background-position:left bottom}
/* Wide screens, final order: pieces left · board · stats right */
.bsg-app.wide{grid-template-columns:calc(160*var(--p)) calc(389*var(--p)) calc(175*var(--p))}
.bsg-app.wide .bsg-tray{grid-column:1;grid-row:1;padding:calc(16*var(--p)) 0 calc(16*var(--p)) calc(14*var(--p))}
.bsg-app.wide .bsg-bw{grid-column:2;grid-row:1}
.bsg-app.wide .bsg-side{grid-column:3;grid-row:1}
.bsg-app.wide .bsg-band{left:auto;right:0}