@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Orbitron:wght@500;600;700;800&display=swap');

:root{
  color-scheme:dark;
  --bg:#040814;
  --bg-2:#081221;
  --panel:rgba(8,18,34,.78);
  --panel-2:rgba(12,26,48,.92);
  --panel-3:rgba(14,34,61,.95);
  --line:rgba(88,225,255,.18);
  --line-strong:rgba(88,225,255,.42);
  --text:#f4fbff;
  --muted:#a0bfd0;
  --muted-2:#7f9bb0;
  --cyan:#4deaff;
  --pink:#ff4fb8;
  --violet:#8f6dff;
  --gold:#ffd978;
  --success:#95ffd0;
  --danger:#ff798f;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --shadow-strong:0 30px 100px rgba(0,0,0,.55);
  --radius:28px;
  --radius-sm:18px;
  --space:clamp(14px,1.4vw,24px);
  --space-lg:clamp(18px,2vw,34px);
  --content-max:1440px;
  --header-h:94px;
  --bottom-nav-h:92px;
  --radio-dock-h:74px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --card-w:clamp(54px,6.65vw,112px);
  --card-h:calc(var(--card-w) * 1.414);
  --gap:clamp(4px,.6vw,14px);
  --down-gap:clamp(12px,1.2vw,24px);
  --up-gap:clamp(24px,2.5vw,42px);
  --tableau-scale:1;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:Montserrat,system-ui,sans-serif;color:var(--text);overscroll-behavior:none}
body{position:relative}
button,input,select,textarea{font:inherit}
a{color:var(--cyan);text-decoration:none}
img{display:block;max-width:100%}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.app-bg{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,79,184,.18), transparent 28%),
    radial-gradient(circle at 80% 12%, rgba(77,234,255,.18), transparent 24%),
    radial-gradient(circle at 76% 68%, rgba(143,109,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(1,9,19,.5), rgba(4,8,20,.96)),
    url('../assets/background.webp') center/cover no-repeat;
}
.app-bg::before,
.app-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.app-bg::before{
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.035) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(255,255,255,.028) 50%, transparent 50.3%);
  background-size:46px 46px;
  opacity:.15;
}
.app-bg::after{
  background:radial-gradient(circle, rgba(255,255,255,.8) 0 1.2px, transparent 1.3px);
  background-size:100px 100px;
  opacity:.16;
}

.glass-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), var(--panel);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

.app-shell{
  width:min(100%, calc(var(--content-max) + 40px));
  margin:0 auto;
  padding:calc(var(--safe-top) + 14px) 18px calc(var(--bottom-nav-h) + var(--radio-dock-h) + var(--safe-bottom) + 24px);
}
.app-header{
  position:sticky;top:calc(var(--safe-top) + 10px);z-index:30;
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-radius:30px;padding:14px 18px;margin-bottom:18px;
}
.brand-wrap{display:flex;align-items:center;min-width:0}
.brand{display:flex;align-items:center;gap:14px;color:var(--text);min-width:0}
.brand img{width:60px;height:60px;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 16px 34px rgba(0,0,0,.32)}
.brand strong{display:block;font:800 clamp(1rem,1.8vw,1.2rem)/1.1 Orbitron,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.brand small{display:block;color:var(--muted);margin-top:4px;font-size:.88rem}
.header-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.header-pill{
  min-width:110px;padding:11px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--text)
}
.header-pill span{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-2)}
.header-pill strong{font-weight:700;font-size:.95rem}
.header-pill.buttonlike{cursor:pointer}

.app-main{display:block}
.app-screen{display:none}
.app-screen.is-active{display:block;animation:fadeScreen .25s ease}
@keyframes fadeScreen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.screen-grid{display:grid;gap:18px}
.home-grid{grid-template-columns:1.45fr .95fr .95fr}
.play-grid,.radio-grid{grid-template-columns:1fr}
.account-grid{grid-template-columns:1.15fr .85fr}
.panel-card,.jumbo-panel{border-radius:30px;padding:clamp(18px,2vw,28px)}
.jumbo-panel{display:grid;grid-template-columns:1.3fr .75fr;gap:22px;align-items:center;min-height:260px}
.hero-copy h1,.section-topline h2,.board-hud h2{margin:0;font:800 clamp(1.65rem,3vw,2.85rem)/1.05 Orbitron,sans-serif;letter-spacing:.02em}
.hero-subcopy,.auth-copy,.legal-copy{color:var(--muted);line-height:1.65;margin:14px 0 0}
.eyebrow{margin:0 0 10px;color:var(--cyan);font:700 .82rem/1 Orbitron,sans-serif;letter-spacing:.28em;text-transform:uppercase}
.hero-actions,.compact-actions,.transport-row,.campaign-actions,.play-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-actions{margin-top:24px}
.action{
  appearance:none;border:none;cursor:pointer;padding:14px 18px;border-radius:18px;
  background:rgba(255,255,255,.05);color:var(--text);font-weight:700;letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.action:hover,.mode-button:hover,.nav-button:hover,.dock-meta:hover,.dock-play:hover,.dock-next:hover,.header-pill.buttonlike:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.action.primary{
  background:linear-gradient(135deg, var(--cyan), #74dfff 55%, var(--violet));
  color:#06101d;border-color:transparent;box-shadow:0 10px 30px rgba(77,234,255,.2)
}
.section-topline{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.section-topline h2{font-size:clamp(1.1rem,2vw,1.65rem)}
.hero-stat-stack,.summary-grid,.legal-links,.mode-switch,.radio-layout,.board-hud,.toolbar-actions,.status-strip,.radio-main-card,.radio-screen-controls,.radio-volume-card,.account-panel,.auth-provider-grid,.auth-row{display:flex}
.hero-stat-stack{flex-direction:column;gap:12px}
.hero-stat,.summary-tile{
  border-radius:22px;padding:16px 18px;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.035);display:flex;flex-direction:column;gap:7px
}
.hero-stat span,.summary-tile span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.hero-stat strong,.summary-tile strong{font:800 clamp(1.05rem,1.4vw,1.25rem)/1.1 Orbitron,sans-serif}
.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mode-switch{gap:10px}
.mode-button{
  flex:1;appearance:none;border:none;cursor:pointer;padding:15px 16px;border-radius:18px;
  background:rgba(255,255,255,.04);color:var(--muted);font:700 .98rem/1 Orbitron,sans-serif;border:1px solid rgba(255,255,255,.06)
}
.mode-button.active{background:linear-gradient(135deg, rgba(77,234,255,.95), rgba(143,109,255,.85));color:#05111d;border-color:transparent}
.free-mode-card{margin-top:16px;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.03);color:var(--muted);border:1px solid rgba(255,255,255,.05)}
.campaign-hud{display:grid;gap:14px;margin-top:16px}
.campaign-copy{display:flex;flex-direction:column;gap:8px}
.campaign-copy span{font:700 .78rem/1 Orbitron,sans-serif;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase}
.campaign-copy strong{font-size:1.32rem}
.campaign-objectives{display:flex;flex-wrap:wrap;gap:10px}
.campaign-objectives span{padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);color:var(--muted);font-size:.92rem}
.campaign-objectives span.complete{color:var(--success);border-color:rgba(149,255,208,.24)}

.game-panel{padding-bottom:24px}
.board-hud{align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.board-hud-copy{max-width:540px}
.board-hud h2{font-size:clamp(1.15rem,2.1vw,1.75rem)}
.status-strip{gap:12px;flex-wrap:wrap;justify-content:flex-end}
.status-strip>div{min-width:108px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035);display:flex;flex-direction:column;gap:4px}
.status-strip span{font-size:.72rem;color:var(--muted-2);letter-spacing:.16em;text-transform:uppercase}
.status-strip strong{font:800 1.12rem/1 Orbitron,sans-serif}
.toolbar-actions{margin-bottom:16px}

.game-board{
  position:relative;border-radius:30px;padding:18px;overflow:hidden;
  background:linear-gradient(180deg, rgba(4,16,33,.95), rgba(7,18,36,.84));
  border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), var(--shadow)
}
.game-board::before,.game-board::after{content:"";position:absolute;inset:0;pointer-events:none}
.game-board::before{
  background:
    radial-gradient(circle at 12% 18%, rgba(77,234,255,.08), transparent 25%),
    radial-gradient(circle at 88% 14%, rgba(255,79,184,.09), transparent 22%),
    linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.012) 50%,transparent 50.3%),
    linear-gradient(transparent 49.7%,rgba(255,255,255,.01) 50%,transparent 50.3%);
  background-size:auto,auto,46px 46px,46px 46px;
}
.game-board::after{inset:12px;border-radius:24px;border:1px solid rgba(255,255,255,.03)}
.board-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px;margin-bottom:clamp(24px,4vw,58px);padding:6px 2px 0}
.pile-group,.foundations{display:flex;gap:var(--gap)}
.foundations{margin-left:auto}
.slot,.card{width:var(--card-w);height:var(--card-h);border-radius:calc(var(--card-w) * .08)}
.slot{position:relative;border:1px dashed rgba(120,236,255,.28);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)), rgba(4,13,25,.42);box-shadow:inset 0 0 30px rgba(60,236,255,.045),0 0 0 1px rgba(255,255,255,.015)}
.slot::after{content:"";position:absolute;inset:7px;border-radius:calc(var(--card-w) * .06);border:1px solid rgba(255,255,255,.025)}
.stock{padding:0;cursor:pointer}
.stock:empty::before{content:"Draw";position:absolute;left:50%;bottom:11px;transform:translateX(-50%);font:700 .7rem/1 Orbitron,sans-serif;color:rgba(188,224,255,.7);letter-spacing:.16em;text-transform:uppercase}
.foundation>span{position:absolute;inset:0;display:grid;place-items:center;font:700 calc(var(--card-w) * .31) Georgia,serif;color:rgba(185,225,238,.18);text-shadow:0 0 12px rgba(255,255,255,.04)}
.foundation:nth-child(-n+2)>span{color:rgba(255,102,158,.18)}
.tableau{position:relative;z-index:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap);min-height:calc(var(--card-h) + 20px);align-items:start;transform-origin:top center;transform:scale(var(--tableau-scale))}
.column{position:relative;min-height:calc(var(--card-h) + 270px);border-radius:18px;padding-top:4px;touch-action:none}
.column.drop-target{outline:2px solid rgba(77,234,255,.4);outline-offset:5px}
.card{
  position:absolute;left:0;appearance:none;border:none;overflow:hidden;padding:0;background:none;cursor:grab;
  box-shadow:0 18px 30px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.045);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.card img{width:100%;height:100%;display:block;pointer-events:none}
.card.selected{box-shadow:0 0 0 3px rgba(77,234,255,.75),0 20px 36px rgba(0,0,0,.38)}
.card.hint{animation:hintPulse 1s ease infinite}
.card.dragging-source{opacity:1}
.card.dragging-ghost{position:fixed !important;z-index:9999;pointer-events:none;box-shadow:0 12px 24px rgba(0,0,0,.28)}
.foundation-ready::after{content:"";position:absolute;inset:3px;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,217,120,.85);pointer-events:none}
.stock.hint,.pile.hint,.drop-target.hint{animation:hintPulse 1.2s ease infinite}
.board-tip{margin:14px 4px 0;color:var(--muted-2);font-size:.92rem}
@keyframes hintPulse{0%,100%{transform:translateZ(0);box-shadow:0 0 0 0 rgba(77,234,255,.06)}50%{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(77,234,255,.12)}}

.radio-screen-card .radio-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.88fr);gap:18px}
.radio-main-card{align-items:center;gap:20px;padding:20px;border-radius:28px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.radio-cover,.radio-cover span,#radioArtwork{flex:0 0 auto}
#radioArtwork.radio-cover,.radio-cover{width:150px;height:150px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(135deg, rgba(255,79,184,.26), rgba(77,234,255,.16) 60%, rgba(143,109,255,.35));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 25px 40px rgba(0,0,0,.28)}
.radio-cover span,#radioArtwork span{font:800 3rem/1 Orbitron,sans-serif;letter-spacing:.12em;color:var(--text)}
.radio-copy h3{margin:12px 0 6px;font:800 clamp(1.35rem,2.2vw,2rem)/1.08 Orbitron,sans-serif}
.radio-copy p{margin:0;color:var(--muted)}
.radio-live-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.radio-live-badge i{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}
.radio-live-badge b{font:700 .84rem/1 Orbitron,sans-serif;letter-spacing:.16em;text-transform:uppercase}
#radioStatus[data-mode="live"]{color:var(--success)}
#radioStatus[data-mode="loading"]{color:var(--gold)}
#radioStatus[data-mode="error"]{color:var(--danger)}
.radio-screen-controls{display:grid;gap:14px;align-content:start}
.radio-volume-card,.playlist-note{padding:18px;border-radius:24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.radio-volume-card{display:grid;gap:12px}
.radio-volume-card label{display:flex;justify-content:space-between;gap:10px;font-weight:600;color:var(--muted)}
input[type="range"]{width:100%;accent-color:var(--cyan)}
.playlist-note{color:var(--muted);line-height:1.6}

.account-panel{display:grid;gap:16px}
.account-card,.auth-card-inline{padding:18px;border-radius:24px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.account-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.account-status{display:flex;flex-direction:column;gap:6px}
.account-status b{font:800 1.18rem/1.1 Orbitron,sans-serif}
.account-status span,.account-caption,.auth-message,.field-note{color:var(--muted);line-height:1.5}
.auth-provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.auth-row{gap:10px;flex-wrap:wrap}
.auth-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.account-panel label,.modal-card label{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.92rem}
.account-panel input,.modal-card input{border:none;border-radius:14px;padding:13px 14px;background:rgba(2,10,20,.62);color:var(--text);border:1px solid rgba(255,255,255,.07)}
.account-actions{display:flex;gap:10px;flex-wrap:wrap}
.legal-links{gap:14px;flex-wrap:wrap;margin-top:16px}
.legal-links a{padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}

.radio-dock{
  position:fixed;left:max(18px, env(safe-area-inset-left));right:max(18px, env(safe-area-inset-right));
  bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px);height:var(--radio-dock-h);z-index:28;
  border-radius:24px;padding:10px 14px;display:flex;align-items:center;gap:12px
}
body[data-screen="radio"] .radio-dock{display:none}
.dock-play,.dock-next,.dock-meta,.nav-button{
  appearance:none;border:none;background:none;color:var(--text);cursor:pointer
}
.dock-play,.dock-next{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);font:800 1.1rem/1 Orbitron,sans-serif}
.dock-meta{flex:1;min-width:0;text-align:left;padding:0 4px}
.dock-meta strong,.dock-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-meta strong{font:700 .98rem/1.2 Orbitron,sans-serif}
.dock-meta small{margin-top:4px;color:var(--muted);font-size:.86rem}

.bottom-nav{
  position:fixed;left:max(18px, env(safe-area-inset-left));right:max(18px, env(safe-area-inset-right));bottom:max(14px, var(--safe-bottom));
  height:var(--bottom-nav-h);z-index:29;border-radius:28px;padding:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px
}
.nav-button{border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid transparent}
.nav-button span{font-size:1.12rem}
.nav-button b{font:700 .78rem/1 Orbitron,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-button.is-active{background:linear-gradient(135deg, rgba(77,234,255,.14), rgba(143,109,255,.12));border-color:rgba(77,234,255,.22)}
.nav-button.is-active b{color:var(--cyan)}

.modal{border:none;padding:0;background:transparent;color:var(--text)}
.modal::backdrop{background:rgba(2,6,12,.72);backdrop-filter:blur(8px)}
.modal-card{width:min(720px,calc(100vw - 28px));max-height:min(88vh,900px);overflow:auto;padding:24px;border-radius:28px;background:linear-gradient(180deg, rgba(13,28,50,.96), rgba(7,18,35,.98));border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-strong);position:relative}
.modal-close{position:absolute;top:12px;right:12px;width:42px;height:42px;border:none;border-radius:14px;cursor:pointer;background:rgba(255,255,255,.06);color:var(--text);font-size:1.2rem}
.leaderboard-list,.level-grid,.points-breakdown{display:grid;gap:12px}
.score-row{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.score-row strong{font:800 1rem/1 Orbitron,sans-serif}
.empty-state{padding:16px;border-radius:18px;background:rgba(255,255,255,.03);color:var(--muted)}
.win-icon{font-size:2rem;margin:0 0 10px}
.level-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.level-tile{appearance:none;border:none;cursor:pointer;padding:16px;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);color:var(--text);display:grid;gap:8px;text-align:left}
.level-tile span{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:14px;background:rgba(77,234,255,.12);color:var(--cyan);font:800 .96rem/1 Orbitron,sans-serif}
.level-tile em{color:var(--success);font-style:normal;font-size:.84rem}
.points-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.03)}
.points-breakdown .total,.points-breakdown .global{background:rgba(77,234,255,.08)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bottom-nav-h) + var(--radio-dock-h) + var(--safe-bottom) + 26px);z-index:60;background:rgba(7,18,35,.96);color:var(--text);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:12px 16px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

@media (max-width:1180px){
  .home-grid,.account-grid{grid-template-columns:1fr}
  .jumbo-panel{grid-template-columns:1fr}
  .radio-screen-card .radio-layout{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--header-h:auto;--bottom-nav-h:86px;--radio-dock-h:72px;--card-w:clamp(50px,12vw,94px)}
  .app-shell{padding-left:12px;padding-right:12px}
  .app-header{position:static;flex-direction:column;align-items:stretch;padding:14px}
  .header-pills{justify-content:stretch}
  .header-pill{flex:1;min-width:0}
  .board-hud,.status-strip,.auth-fields{grid-template-columns:1fr}
  .status-strip{justify-content:stretch}
  .status-strip>div{flex:1;min-width:0}
  .auth-provider-grid,.auth-fields{grid-template-columns:1fr}
}
@media (max-width:720px){
  .brand small{display:none}
  .brand strong{font-size:1rem}
  .hero-copy h1,.section-topline h2,.board-hud h2{font-size:1.35rem}
  .hero-actions,.compact-actions,.transport-row,.play-actions,.campaign-actions,.account-actions,.auth-row{flex-direction:column}
  .action{width:100%}
  .summary-grid{grid-template-columns:1fr 1fr}
  .board-top{flex-direction:column;align-items:flex-start}
  .foundations{margin-left:0}
  .tableau{overflow-x:auto;padding-bottom:8px}
  .column{min-height:calc(var(--card-h) + 220px)}
  .radio-main-card{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  :root{--card-w:clamp(46px,12.2vw,74px);--gap:4px}
  .summary-grid{grid-template-columns:1fr}
  .radio-dock{left:10px;right:10px}
  .bottom-nav{left:10px;right:10px}
  .nav-button b{font-size:.68rem}
  .column{min-height:calc(var(--card-h) + 180px)}
}

/* =========================================================
   PRODUCTION UI RESET — FUN COPY + TRUE 7-COLUMN BOARD
========================================================= */

:root{
  --play-nav-h:78px;
  --card-w:64px;
  --card-h:90.5px;
  --gap:5px;
  --down-gap:12px;
  --up-gap:28px;
}

html,body{min-height:100%;overflow-x:hidden}
body{overflow-y:auto;-webkit-overflow-scrolling:touch}
.radio-dock{display:none!important}
.app-shell{padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 34px)}
.app-screen{overflow:visible}
.app-screen.is-active{display:block}

/* More playful page rhythm */
.hero-card,.panel-card{overflow:hidden}
.hero-copy h1{max-width:15ch}
.hero-subcopy,.legal-copy{line-height:1.7}
.hero-stat strong,.summary-tile strong{letter-spacing:.01em}

/* Play screen */
body[data-screen="play"] .app-header{display:none!important}
body[data-screen="play"] .app-shell{
  width:100%;max-width:1180px;min-height:100dvh;margin:0 auto;
  padding:calc(var(--safe-top) + 6px) 8px calc(var(--play-nav-h) + var(--safe-bottom) + 18px)
}
body[data-screen="play"] .app-main,
body[data-screen="play"] #screen-play,
body[data-screen="play"] .play-grid{width:100%;height:auto;min-height:0;overflow:visible}
body[data-screen="play"] .game-panel{
  width:100%;margin:0;padding:9px;border-radius:24px;overflow:visible;
  display:grid;gap:8px
}
body[data-screen="play"] .board-hud{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin:0
}
body[data-screen="play"] .board-hud-copy{min-width:0}
body[data-screen="play"] .board-hud-copy .eyebrow{font-size:.58rem;margin:0 0 3px}
body[data-screen="play"] .board-hud h2{
  margin:0;font-size:clamp(.88rem,3vw,1.15rem);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
body[data-screen="play"] .status-strip{
  display:grid!important;grid-template-columns:repeat(3,minmax(58px,1fr))!important;gap:5px;width:min(48vw,335px)
}
body[data-screen="play"] .status-strip>div{
  min-width:0!important;padding:7px 5px!important;border-radius:14px!important;text-align:center
}
body[data-screen="play"] .status-strip span{font-size:.48rem!important;letter-spacing:.07em}
body[data-screen="play"] .status-strip strong{font-size:.8rem!important;white-space:nowrap}
body[data-screen="play"] .toolbar-actions,
body[data-screen="play"] .play-actions{
  display:grid!important;grid-template-columns:1.25fr repeat(4,minmax(0,1fr))!important;gap:5px!important;margin:0!important
}
body[data-screen="play"] .toolbar-actions .action{
  width:100%!important;min-width:0!important;min-height:38px;padding:7px 3px!important;border-radius:12px!important;
  font-size:clamp(.58rem,1.8vw,.74rem)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
body[data-screen="play"] .game-board{
  width:100%;height:auto;min-height:0;margin:0;padding:8px;border-radius:20px;overflow:visible
}
body[data-screen="play"] .board-top{
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;align-items:start!important;
  gap:var(--gap)!important;width:100%;margin:0 0 10px!important;padding:0!important
}
body[data-screen="play"] .stock-group,
body[data-screen="play"] .foundations{display:contents!important}
body[data-screen="play"] #stock{grid-column:1}
body[data-screen="play"] #waste{grid-column:2}
body[data-screen="play"] .foundation:nth-child(1){grid-column:4}
body[data-screen="play"] .foundation:nth-child(2){grid-column:5}
body[data-screen="play"] .foundation:nth-child(3){grid-column:6}
body[data-screen="play"] .foundation:nth-child(4){grid-column:7}
body[data-screen="play"] .slot,
body[data-screen="play"] .card{
  width:var(--card-w)!important;height:var(--card-h)!important;max-width:none!important;justify-self:center
}
body[data-screen="play"] .tableau{
  position:relative;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:var(--gap)!important;width:100%;height:var(--tableau-h,520px);min-height:var(--card-h)!important;
  padding:0!important;overflow:visible!important;transform:none!important
}
body[data-screen="play"] .column{
  position:relative;width:100%;height:100%;min-height:var(--card-h)!important;padding:0!important;border-radius:12px;touch-action:none
}
body[data-screen="play"] .column .card{
  position:absolute!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important
}
body[data-screen="play"] .board-tip{display:none!important}
body[data-screen="play"] .bottom-nav{
  left:10px;right:10px;bottom:max(7px,var(--safe-bottom));height:var(--play-nav-h);padding:7px;border-radius:24px
}

/* Normal pages scroll freely and stay clear of navigation */
body[data-screen="home"],body[data-screen="radio"],body[data-screen="account"]{overflow-y:auto!important}
body[data-screen="home"] .app-screen::after,
body[data-screen="radio"] .app-screen::after,
body[data-screen="account"] .app-screen::after{
  content:"";display:block;height:calc(var(--bottom-nav-h) + var(--safe-bottom) + 26px)
}

/* Legal + contact pages */
.legal-shell{
  width:min(900px,calc(100% - 24px));margin:0 auto;padding:calc(var(--safe-top) + 20px) 0 60px
}
.legal-shell>.brand{display:inline-flex;margin-bottom:18px;padding:10px 14px;border-radius:18px;background:rgba(10,24,44,.82);border:1px solid rgba(255,255,255,.08)}
.legal-shell>.brand img{width:54px;height:54px;border-radius:14px}
.legal-shell .legal-card{
  padding:clamp(22px,5vw,42px);border-radius:30px;background:linear-gradient(180deg,rgba(17,31,55,.95),rgba(7,18,35,.97));
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-strong)
}
.legal-shell .legal-card h1{font-size:clamp(2rem,7vw,4rem);margin:.2em 0 .45em}
.legal-shell .legal-card h2{font-size:clamp(1.15rem,4vw,1.65rem);margin:1.45em 0 .45em;color:var(--cyan)}
.legal-shell .legal-card p,.legal-shell .legal-card li{color:var(--muted);line-height:1.75}
.legal-shell .legal-card a{color:var(--cyan)}
.legal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.legal-actions a{display:inline-flex;padding:12px 16px;border-radius:999px;background:rgba(77,234,255,.09);border:1px solid rgba(77,234,255,.2);text-decoration:none}
.contact-form{display:grid;gap:16px;margin-top:22px}
.contact-form label{display:grid;gap:8px;color:var(--muted);font-weight:600}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(2,10,20,.68);color:var(--text);
  padding:14px 15px;font:inherit;outline:none
}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:rgba(77,234,255,.7);box-shadow:0 0 0 3px rgba(77,234,255,.12)}
.contact-form .action{justify-self:start}
.form-note{font-size:.9rem}

@media(max-width:720px){
  .app-header{position:static}
  .hero-actions,.compact-actions,.transport-row,.campaign-actions,.account-actions,.auth-row{flex-direction:column}
  body[data-screen="play"] .game-panel{padding:7px}
  body[data-screen="play"] .board-hud{grid-template-columns:minmax(0,.92fr) minmax(205px,1.25fr);gap:6px}
  body[data-screen="play"] .toolbar-actions .action{font-size:.61rem!important;padding:7px 2px!important}
  body[data-screen="play"] .game-board{padding:6px}
}

@media(min-width:768px){
  body[data-screen="play"] .bottom-nav{left:50%;right:auto;width:min(760px,calc(100% - 32px));transform:translateX(-50%)}
  body[data-screen="play"] .game-panel{padding:14px}
  body[data-screen="play"] .game-board{padding:12px}
}


/* =========================================================
   DRAG VISIBILITY + STOCK/WASTE ALIGNMENT FIX
========================================================= */

/* Keep the real card fully visible while it is being moved. */
.card.dragging-source,
body[data-screen="play"] .card.dragging-source {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  outline: none !important;
  box-shadow: inherit !important;
}

/* Make the moving drag clone look like the actual card. */
.card.dragging-ghost,
body[data-screen="play"] .card.dragging-ghost {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  outline: none !important;
  border-color: transparent !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .28) !important;
  filter: none !important;
  transform-origin: center center !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Prevent browser-native drag outlines and translucent images. */
.card,
.card img,
.pile,
.slot {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.card:focus,
.card:focus-visible,
.pile:focus,
.pile:focus-visible,
.slot:focus,
.slot:focus-visible {
  outline: none !important;
}

/* Exact seven-position top row. */
body[data-screen="play"] .board-top {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  align-items: start !important;
  justify-content: stretch !important;
  column-gap: var(--gap, 6px) !important;
  row-gap: 0 !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

/* Remove the stock-group wrapper from grid geometry. */
body[data-screen="play"] .stock-group {
  display: contents !important;
}

/* Stock = column 1, waste = column 2. */
body[data-screen="play"] #stock {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body[data-screen="play"] #waste {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Four foundations = columns 4 through 7. */
body[data-screen="play"] .foundations {
  display: contents !important;
}

body[data-screen="play"] .foundation:nth-child(1) {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

body[data-screen="play"] .foundation:nth-child(2) {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

body[data-screen="play"] .foundation:nth-child(3) {
  grid-column: 6 !important;
  grid-row: 1 !important;
}

body[data-screen="play"] .foundation:nth-child(4) {
  grid-column: 7 !important;
  grid-row: 1 !important;
}

/* Every top-row slot uses the exact same dimensions. */
body[data-screen="play"] .board-top > .slot,
body[data-screen="play"] .board-top .slot,
body[data-screen="play"] #stock,
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation {
  position: relative !important;
  width: var(--card-w) !important;
  min-width: var(--card-w) !important;
  max-width: var(--card-w) !important;
  height: var(--card-h) !important;
  min-height: var(--card-h) !important;
  max-height: var(--card-h) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  justify-self: center !important;
  align-self: start !important;
}

/* A stock, waste, or foundation card must sit exactly inside its slot. */
body[data-screen="play"] #stock > .card,
body[data-screen="play"] #waste > .card,
body[data-screen="play"] .foundation > .card {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Keep all card artwork inside the card boundary. */
body[data-screen="play"] .card img,
body[data-screen="play"] .card picture,
body[data-screen="play"] .card canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

/* Do not let stock button defaults disturb alignment. */
body[data-screen="play"] button#stock {
  appearance: none !important;
  -webkit-appearance: none !important;
  border-style: dashed !important;
  font: inherit !important;
  line-height: 1 !important;
}

/* =========================================================
   6.1 FUNCTION RESTORE — AUTHORITATIVE FINAL OVERRIDES
========================================================= */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
body { touch-action: pan-y !important; }
.app-shell, .app-main, .app-screen, .screen-grid, .game-panel, .game-board {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.app-screen { display: none !important; }
.app-screen.is-active { display: block !important; }
.app-main { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 34px) !important; }
body[data-screen="play"] .app-main { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 34px) !important; }
body[data-screen="play"] #screen-play { overflow: visible !important; }
body[data-screen="play"] .tableau {
  height: var(--tableau-h, 520px) !important;
  min-height: var(--card-h) !important;
  overflow: visible !important;
}
body[data-screen="play"] .column {
  height: var(--tableau-h, 520px) !important;
  touch-action: pan-y !important;
}
body[data-screen="play"] .card {
  touch-action: none !important;
  opacity: 1 !important;
  -webkit-user-drag: none !important;
}
body[data-screen="play"] .card.dragging-source { opacity: 1 !important; }
body[data-screen="play"] .card.dragging-ghost {
  opacity: 1 !important;
  outline: 0 !important;
  border: 0 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.35) !important;
  pointer-events: none !important;
}
body[data-screen="play"] #stock,
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation {
  overflow: hidden !important;
}
body[data-screen="play"] #stock > .card,
body[data-screen="play"] #waste > .card,
body[data-screen="play"] .foundation > .card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

/* The compact player stays off non-radio tabs; the full Radio tab remains functional. */
.radio-dock { display: none !important; }
body[data-screen="radio"] .radio-screen-controls,
body[data-screen="radio"] .radio-main-card { pointer-events: auto !important; }
body[data-screen="radio"] #radioToggle,
body[data-screen="radio"] #radioNext,
body[data-screen="radio"] #radioVolume { touch-action: manipulation !important; }

/* Auth-first gate */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow-y: auto;
  padding: calc(var(--safe-top) + 18px) 16px calc(var(--safe-bottom) + 28px);
  background: rgba(2,7,18,.96);
  -webkit-overflow-scrolling: touch;
}
.auth-gate[hidden] { display: none !important; }
.auth-locked { overflow: hidden !important; }
.auth-gate-card {
  width: min(620px, 100%);
  margin: 0 auto;
  padding: 26px 22px;
  border-radius: 30px;
  text-align: center;
}
.auth-gate-logo { width: 92px; height: 92px; border-radius: 24px; object-fit: cover; }
.auth-gate h1 { margin: 10px 0 8px; font-size: clamp(2rem, 8vw, 3.4rem); }
.auth-gate-copy { margin: 0 auto 22px; max-width: 520px; color: var(--muted); line-height: 1.55; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 18px; background: rgba(255,255,255,.045); }
.auth-tab { min-height: 48px; border: 0; border-radius: 14px; color: var(--muted); background: transparent; font: 700 1rem/1.1 inherit; }
.auth-tab.is-active { color: var(--cyan); background: rgba(77,234,255,.12); box-shadow: inset 0 0 0 1px rgba(77,234,255,.35); }
.auth-provider-stack { display: grid; gap: 10px; margin-top: 16px; }
.apple-auth { background: #fff !important; color: #000 !important; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.1); }
.auth-fields { display: grid; gap: 12px; text-align: left; }
.auth-fields label { display: grid; gap: 7px; color: var(--muted); }
.auth-fields input { width: 100%; min-height: 54px; padding: 0 15px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(1,9,20,.72); color: var(--text); font: inherit; }
.auth-submit { width: 100%; margin-top: 14px; }
.auth-link { margin: 12px auto 0; border: 0; background: transparent; color: var(--cyan); font: inherit; }
.auth-message { min-height: 24px; margin: 14px 0 0; color: var(--cyan); }
.auth-message.is-error { color: #ff8ebf; }

@media (max-width: 520px) {
  .auth-gate-card { padding: 22px 16px; border-radius: 24px; }
}

/* AUTH ROUTING STABILITY */
body.auth-booting .app-shell,
body.auth-locked .app-shell {
  display: none !important;
}
body:not(.auth-locked):not(.auth-booting) .app-shell {
  display: block;
}
.auth-message.is-error {
  color: #ff9aa9;
}
#authGate button:disabled,
#accountPanel button:disabled {
  opacity: .62;
  pointer-events: none;
}


/* =========================================================
   AUTH SUCCESS PLAY-SCREEN VISIBILITY FIX
========================================================= */

body.is-authenticated .app-shell,
body[data-screen="play"]:not(.auth-locked) .app-shell {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.is-authenticated #authGate,
body[data-screen="play"] #authGate[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-authenticated #screen-play.is-active,
body.is-authenticated .app-screen[data-screen="play"].is-active,
body[data-screen="play"] #screen-play {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   6.3 SCREEN ROUTING + RADIO + DRAG FINAL REPAIR
========================================================= */
.app-screen,
body.is-authenticated .app-screen,
body[data-screen="home"] #screen-play,
body[data-screen="radio"] #screen-play,
body[data-screen="account"] #screen-play {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.app-screen.is-active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body[data-screen="home"] #screen-home,
body[data-screen="play"] #screen-play,
body[data-screen="radio"] #screen-radio,
body[data-screen="account"] #screen-account {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body[data-screen="radio"] .radio-screen-card,
body[data-screen="radio"] .radio-layout,
body[data-screen="radio"] .radio-main-card,
body[data-screen="radio"] .radio-screen-controls {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body[data-screen="radio"] .radio-main-card { display:flex !important; }
body[data-screen="radio"] .radio-screen-controls { display:grid !important; }

/* Legal/support links remain visible on Account and open as full styled pages. */
body[data-screen="account"] .legal-card,
body[data-screen="account"] .legal-links {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body[data-screen="account"] .legal-links {
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
}
body[data-screen="account"] .legal-links a {
  display:inline-flex;
  padding:12px 16px;
  border-radius:999px;
  text-decoration:none;
  color:var(--cyan);
  background:rgba(77,234,255,.08);
  border:1px solid rgba(77,234,255,.22);
}

/* Waste card drag from the drawn stock card. */
body.card-drag-pending,
body.card-drag-active { touch-action:none !important; }
body[data-screen="play"] #waste,
body[data-screen="play"] #waste > .card {
  pointer-events:auto !important;
  touch-action:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}
body[data-screen="play"] .card.dragging-ghost {
  position:fixed !important;
  margin:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:2147483647 !important;
  transform:none !important;
  outline:none !important;
  filter:none !important;
  box-shadow:0 18px 34px rgba(0,0,0,.42) !important;
}
body[data-screen="play"] .card.dragging-source {
  opacity:.34 !important;
}
body[data-screen="play"] .column,
body[data-screen="play"] .foundation {
  pointer-events:auto !important;
}

/* =========================================================
   EMERGENCY WASTE DRAG — AUTHORITATIVE IOS INPUT LAYER
========================================================= */
body[data-screen="play"] #gameBoard,
body[data-screen="play"] #waste,
body[data-screen="play"] #waste > .card,
body[data-screen="play"] .tableau,
body[data-screen="play"] .column,
body[data-screen="play"] .foundation {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
body[data-screen="play"] #waste,
body[data-screen="play"] #waste > .card,
body[data-screen="play"] .card {
  touch-action: none !important;
  -webkit-user-drag: none !important;
}
body.card-drag-pending,
body.card-drag-active {
  overflow: hidden !important;
  touch-action: none !important;
}
body[data-screen="play"] .dragging-ghost {
  position: fixed !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
}


/* =========================================================
   SO SMOOTH X RADIO ARTWORK — PRODUCTION
========================================================= */
#radioArtwork.radio-cover {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      rgba(255, 79, 184, .26),
      rgba(77, 234, 255, .16) 60%,
      rgba(143, 109, 255, .35)
    );
}

#radioArtworkImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .22s ease;
}

#radioArtwork.has-cover #radioArtworkImage {
  opacity: 1;
}

#radioArtwork.has-cover span {
  opacity: 0;
  visibility: hidden;
}

#radioArtwork span {
  position: relative;
  z-index: 2;
  transition: opacity .2s ease;
}

.radio-volume-card {
  display: none !important;
}

.playlist-note a {
  color: var(--cyan);
  font-weight: 800;
  text-decoration: none;
}

.playlist-note a:hover,
.playlist-note a:focus-visible {
  text-decoration: underline;
}


/* =========================================================
   VIEWPORT GAP + GAME TIMER PRODUCTION CORRECTION
========================================================= */

:root {
  --screen-edge-gap: 10px;
}

/* Only one reserved area for the fixed navigation. */
.app-shell {
  padding-bottom:
    calc(
      var(--bottom-nav-h) +
      var(--safe-bottom) +
      var(--screen-edge-gap)
    ) !important;
}

.app-main {
  padding-bottom: 0 !important;
}

/* Remove the duplicate artificial bottom space. */
body[data-screen="home"] .app-screen::after,
body[data-screen="radio"] .app-screen::after,
body[data-screen="account"] .app-screen::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
}

/* Use the full safe viewport above the fixed navigation. */
body[data-screen="home"] .app-screen.is-active,
body[data-screen="radio"] .app-screen.is-active,
body[data-screen="account"] .app-screen.is-active {
  min-height:
    calc(
      100dvh -
      var(--safe-top) -
      var(--bottom-nav-h) -
      var(--safe-bottom) -
      24px
    ) !important;
}

/* Play panel extends to just above the navigation instead
   of ending halfway up the screen. */
body[data-screen="play"] .app-shell {
  padding-bottom:
    calc(
      var(--play-nav-h) +
      var(--safe-bottom) +
      var(--screen-edge-gap)
    ) !important;
}

body[data-screen="play"] .app-main {
  padding-bottom: 0 !important;
}

body[data-screen="play"] #screen-play,
body[data-screen="play"] .play-grid {
  min-height:
    calc(
      100dvh -
      var(--safe-top) -
      var(--play-nav-h) -
      var(--safe-bottom) -
      20px
    ) !important;
}

body[data-screen="play"] .game-panel {
  min-height:
    calc(
      100dvh -
      var(--safe-top) -
      var(--play-nav-h) -
      var(--safe-bottom) -
      20px
    ) !important;
  align-content: start !important;
}

/* Keep navigation close to the usable viewport edge. */
.bottom-nav,
body[data-screen="play"] .bottom-nav {
  bottom:
    max(
      6px,
      var(--safe-bottom)
    ) !important;
}


/* Firebase player identity */
.player-welcome {
  margin-left: auto;
  max-width: min(42vw, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cyan);
  font-weight: 800;
  font-size: clamp(.72rem, 1.8vw, .95rem);
  letter-spacing: .02em;
}
@media (max-width: 760px) {
  .player-welcome {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin: .2rem 0 0;
    text-align: center;
  }
}

/* =========================================================
   PRECISE POINTER/FINGER DRAG ALIGNMENT
========================================================= */
.dragging-ghost,
.card-drag-ghost,
.drag-ghost {
  position: fixed !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  inset: auto !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  will-change: left, top;
}

/* =========================================================
   FULL-CARD INTERACTION + DRAG VISUAL — FINAL
========================================================= */

/* Stock and waste slots establish the real card dimensions. */
#stock,
#waste,
.foundation {
  position: relative !important;
  overflow: visible !important;
}

/* The outer card button owns the entire visible card surface. */
#stock > .card,
#waste > .card,
.foundation > .card,
.tableau .card {
  box-sizing: border-box !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--card-radius, 10px) !important;
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  cursor: grab !important;
}

/* Stock, waste and foundation cards fill their complete pile rectangle. */
#stock > .card,
#waste > .card,
.foundation > .card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/*
 * Nothing inside the outer card may steal touch, mouse or double-tap
 * handling. All events resolve to the outer .card element.
 */
.card > *,
.card img,
.card picture,
.card span,
.card::before,
.card::after {
  pointer-events: none !important;
}

/* Artwork fills the complete outer card. */
.card img,
.card .card-art,
.card .card-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: fill !important;
  border-radius: inherit !important;
}

/* Keep the original source card fully visible. */
.card.dragging-source,
.card.is-dragging,
body.card-drag-active .card.dragging-source {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* The moving card remains fully opaque and keeps its artwork. */
.dragging-ghost {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  pointer-events: none !important;
  touch-action: none !important;
  outline: none !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .42),
    0 0 16px rgba(77, 234, 255, .22) !important;
  z-index: 2147483647 !important;
  will-change: transform !important;
}

/* Never draw the large cyan destination-column rectangle. */
.tableau.drop-target,
.column.drop-target,
.foundation.drop-target {
  outline: none !important;
  border-color: inherit !important;
  box-shadow: none !important;
}

/* Optional small destination feedback on the receiving top card only. */
.tableau.drop-target > .card:last-child,
.column.drop-target > .card:last-child,
.foundation.drop-target > .card:last-child {
  box-shadow:
    0 0 0 2px rgba(77, 234, 255, .7),
    0 0 14px rgba(77, 234, 255, .34) !important;
}

/* =========================================================
   AUTHORITATIVE FULL-CARD HIT AREA + FREE-FORM DRAG
========================================================= */

/* Outer card element owns all mouse, touch and double-tap input. */
.sjs-card {
  box-sizing: border-box !important;
  padding: 0 !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  cursor: grab !important;
}

/* Inner artwork can never steal the gesture. */
.sjs-card > *,
.sjs-card img,
.sjs-card picture,
.sjs-card span,
.sjs-card::before,
.sjs-card::after {
  pointer-events: none !important;
}

/* Waste and foundation cards fill their complete visible pile slots. */
#waste,
.foundation {
  position: relative !important;
}

#waste > .sjs-card,
.foundation > .sjs-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Floating card layer follows the exact pointer/finger grab point. */
.sjs-drag-layer {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  margin: 0 !important;
  width: var(--drag-w) !important;
  height: var(--drag-h) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  touch-action: none !important;
  z-index: 2147483647 !important;
  will-change: transform !important;
}

.sjs-drag-layer .sjs-card {
  position: absolute !important;
  left: 0 !important;
  width: var(--drag-w) !important;
  height: var(--drag-card-h) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  pointer-events: none !important;
}

/* Keep the source artwork visible while dragging. */
.sjs-card.dragging-source,
body.card-drag-active .sjs-card.dragging-source {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  outline: none !important;
}

/* Remove the oversized cyan column/container outline. */
.column.sjs-drop-ok,
.foundation.sjs-drop-ok {
  outline: none !important;
  box-shadow: none !important;
}

/* Small legal-target feedback only on the receiving card. */
.column.sjs-drop-ok > .sjs-card:last-child,
.foundation.sjs-drop-ok > .sjs-card:last-child {
  box-shadow:
    0 0 0 2px rgba(77, 234, 255, .72),
    0 0 12px rgba(77, 234, 255, .30) !important;
}

/* =========================================================
   STOCK / WASTE / FOUNDATION ROW — AUTHORITATIVE
========================================================= */

#stock,
#waste,
.foundation {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 5 / 7 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Every pile's visible card fills the complete pile rectangle. */
#stock > .sjs-card,
#waste > .sjs-card,
.foundation > .sjs-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}

/* The full visible card is the gesture surface. */
.sjs-card {
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

.sjs-card > *,
.sjs-card img,
.sjs-card picture,
.sjs-card span,
.sjs-card::before,
.sjs-card::after {
  pointer-events: none !important;
}

/* Floating drag layer remains fully visible. */
.sjs-drag-layer {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: var(--drag-w) !important;
  height: var(--drag-h) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  touch-action: none !important;
  z-index: 2147483647 !important;
  will-change: transform !important;
}

.sjs-drag-layer .sjs-card {
  width: var(--drag-w) !important;
  height: var(--drag-card-h) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* Source cards remain fully visible during dragging. */
.sjs-card.dragging-source {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  outline: none !important;
}

/* Remove the large container outline. */
.column.sjs-drop-ok,
.foundation.sjs-drop-ok {
  outline: none !important;
  box-shadow: none !important;
}


/* =========================================================
   GAMEPLAY BOARD 1.2.1 — AUTHORITATIVE FINAL GEOMETRY
   Direct seven-cell top row + source-anchored physical drag.
========================================================= */
body[data-screen="play"] #gameBoard.game-board {
  --sjs-gap: clamp(4px, 1vw, 8px);
  --sjs-radius: clamp(6px, 1.4vw, 11px);
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body[data-screen="play"] #gameBoard .board-top {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: var(--sjs-gap) !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 0 clamp(10px, 2vw, 16px) !important;
  padding: 0 !important;
}

body[data-screen="play"] #gameBoard .board-top > #stock,
body[data-screen="play"] #gameBoard .board-top > #waste,
body[data-screen="play"] #gameBoard .board-top > .foundation,
body[data-screen="play"] #gameBoard .board-top > .board-top-spacer {
  grid-column: auto !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 5 / 7 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body[data-screen="play"] #gameBoard .board-top > .board-top-spacer {
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-screen="play"] #stock,
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: var(--sjs-radius) !important;
  transform: none !important;
  translate: none !important;
}

body[data-screen="play"] #stock > .sjs-card,
body[data-screen="play"] #waste > .sjs-card,
body[data-screen="play"] .foundation > .sjs-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
}

body[data-screen="play"] .sjs-card {
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--sjs-radius) !important;
  opacity: 1 !important;
  visibility: visible !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  cursor: grab !important;
}

body[data-screen="play"] .sjs-card > *,
body[data-screen="play"] .sjs-card img,
body[data-screen="play"] .sjs-card::before,
body[data-screen="play"] .sjs-card::after {
  pointer-events: none !important;
}

body[data-screen="play"] .sjs-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  border-radius: inherit !important;
}

body[data-screen="play"] #tableau.tableau {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: var(--sjs-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

body[data-screen="play"] #tableau > .column {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: var(--card-h, 90px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  touch-action: none !important;
}

body[data-screen="play"] #tableau > .column > .sjs-card {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 5 / 7 !important;
  margin: 0 !important;
  transform: none !important;
}

/* Physical drag preview: starts at source card and moves by pointer delta. */
.sjs-drag-layer {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  margin: 0 !important;
  width: var(--drag-w) !important;
  height: var(--drag-h) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  touch-action: none !important;
  z-index: 2147483647 !important;
  will-change: transform !important;
}

.sjs-drag-layer > .sjs-card {
  position: absolute !important;
  left: 0 !important;
  width: var(--drag-w) !important;
  height: var(--drag-card-h) !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  pointer-events: none !important;
}

body.card-drag-active .sjs-card.dragging-source {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  outline: none !important;
}

/* No oversized column/foundation outline during drag. */
body[data-screen="play"] .column.sjs-drop-ok,
body[data-screen="play"] .foundation.sjs-drop-ok {
  outline: none !important;
  box-shadow: none !important;
}

body[data-screen="play"] .column.sjs-drop-ok > .sjs-card:last-child,
body[data-screen="play"] .foundation.sjs-drop-ok > .sjs-card:last-child {
  box-shadow: 0 0 0 2px rgba(77,234,255,.72), 0 0 12px rgba(77,234,255,.3) !important;
}

/* Drag layer uses inline left/top from the source card; never center it. */
.sjs-drag-layer {
  right: auto !important;
  bottom: auto !important;
}

/* =========================================================
   GAMEPLAY BOARD — TABLEAU LAYERING + FULL CARD HIT AREA
========================================================= */

/* The full visible waste and foundation slot is interactive. */
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation {
  position: relative !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

body[data-screen="play"] #waste > .sjs-card,
body[data-screen="play"] .foundation > .sjs-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

/* Every visible portion of every tableau card remains interactive. */
body[data-screen="play"] #tableau > .column {
  position: relative !important;
  overflow: visible !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

body[data-screen="play"] #tableau > .column > .sjs-card {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 7 !important;
  pointer-events: auto !important;
  touch-action: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Artwork never steals the gesture from the outer card button. */
body[data-screen="play"] .sjs-card > *,
body[data-screen="play"] .sjs-card img,
body[data-screen="play"] .sjs-card::before,
body[data-screen="play"] .sjs-card::after {
  pointer-events: none !important;
}

/* Keep the floating card and original card fully visible. */
body[data-screen="play"] .sjs-drag-layer,
body[data-screen="play"] .sjs-drag-layer .sjs-card,
body.card-drag-active .sjs-card.dragging-source {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* Never outline an entire tall tableau column. */
body[data-screen="play"] .column.sjs-drop-ok {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   FULL GAMEPLAY LABELS — PRODUCTION
========================================================= */

body[data-screen="play"] .sjs-full-label-actions {
  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  overflow: visible !important;
}

body[data-screen="play"] .sjs-full-label-actions > button,
body[data-screen="play"] .sjs-full-label-actions .action {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 50px !important;
  padding: 10px 7px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  font-size: clamp(12px, 3.25vw, 16px) !important;
  line-height: 1.1 !important;
}

/* Never truncate gameplay button text. */
body[data-screen="play"] button,
body[data-screen="play"] .action {
  text-overflow: clip !important;
}

body[data-screen="play"] button > span,
body[data-screen="play"] .action > span {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Display the complete Live Table title. */
body[data-screen="play"] .sjs-full-game-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  font-size: clamp(16px, 4.15vw, 24px) !important;
  line-height: 1.1 !important;
}

/* Allow the heading area enough room for the full title. */
body[data-screen="play"] .game-header,
body[data-screen="play"] .game-title-wrap,
body[data-screen="play"] .table-heading,
body[data-screen="play"] .play-heading {
  min-width: 0 !important;
  overflow: visible !important;
}

/* Larger displays may return to one six-button row. */
@media (min-width: 760px) {
  body[data-screen="play"] .sjs-full-label-actions {
    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   GAMEPLAY FIVE-BUTTON TOOLBAR + COMPLETE TITLE
========================================================= */

body[data-screen="play"] .gameplay-five-actions {
  display: grid !important;
  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  overflow: visible !important;
}

body[data-screen="play"] .gameplay-five-actions > button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 52px !important;
  padding: 8px 5px !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;

  font-size: clamp(11px, 2.75vw, 16px) !important;
  line-height: 1.05 !important;
}

body[data-screen="play"] .smooth-deal-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;

  font-size: clamp(19px, 5vw, 28px) !important;
  line-height: 1.05 !important;
}

@media (max-width: 390px) {
  body[data-screen="play"] .gameplay-five-actions {
    gap: 5px !important;
  }

  body[data-screen="play"] .gameplay-five-actions > button {
    padding-inline: 3px !important;
    font-size: 10.5px !important;
  }
}

/* =========================================================
   GAMEPLAY TOOLBAR — FIVE BUTTON SINGLE ROW
========================================================= */

body[data-screen="play"] .sjs-game-toolbar,
body[data-screen="play"] .gameplay-five-actions,
body[data-screen="play"] .game-actions {
  display: grid !important;
  grid-template-columns:
    1.12fr .82fr .82fr 1.32fr .92fr !important;
  gap: 6px !important;
  width: 100% !important;
  overflow: visible !important;
}

body[data-screen="play"] .sjs-game-toolbar > button,
body[data-screen="play"] .gameplay-five-actions > button,
body[data-screen="play"] .game-actions > button {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 50px !important;
  padding: 8px 3px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  font-size: clamp(10px, 2.72vw, 15px) !important;
  line-height: 1 !important;
}

body[data-screen="play"] .sjs-game-toolbar > button:nth-child(4),
body[data-screen="play"] .gameplay-five-actions > button:nth-child(4),
body[data-screen="play"] .game-actions > button:nth-child(4) {
  font-size: clamp(9.5px, 2.55vw, 14px) !important;
}

@media (min-width: 430px) {
  body[data-screen="play"] .sjs-game-toolbar,
  body[data-screen="play"] .gameplay-five-actions,
  body[data-screen="play"] .game-actions {
    gap: 8px !important;
  }

  body[data-screen="play"] .sjs-game-toolbar > button,
  body[data-screen="play"] .gameplay-five-actions > button,
  body[data-screen="play"] .game-actions > button {
    padding-inline: 6px !important;
    font-size: clamp(12px, 2.5vw, 16px) !important;
  }
}

/* =========================================================
   GAMEPLAY TOOLBAR — FINAL FULL-LABEL WIDTHS
========================================================= */

body[data-screen="play"] .sjs-game-toolbar,
body[data-screen="play"] .gameplay-five-actions,
body[data-screen="play"] .game-actions {
  display: grid !important;
  grid-template-columns:
    1.38fr
    0.78fr
    0.78fr
    1.55fr
    0.92fr !important;

  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body[data-screen="play"] .sjs-game-toolbar > button,
body[data-screen="play"] .gameplay-five-actions > button,
body[data-screen="play"] .game-actions > button {
  grid-column: auto !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 50px !important;

  padding: 8px 2px !important;

  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;

  font-size: clamp(10px, 2.55vw, 14px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* New Game */
body[data-screen="play"] .sjs-game-toolbar > button:nth-child(1),
body[data-screen="play"] .gameplay-five-actions > button:nth-child(1),
body[data-screen="play"] .game-actions > button:nth-child(1) {
  font-size: clamp(10px, 2.55vw, 14px) !important;
}

/* Leaderboard gets the widest control. */
body[data-screen="play"] .sjs-game-toolbar > button:nth-child(4),
body[data-screen="play"] .gameplay-five-actions > button:nth-child(4),
body[data-screen="play"] .game-actions > button:nth-child(4) {
  font-size: clamp(9px, 2.25vw, 13px) !important;
}

/* SFX On */
body[data-screen="play"] .sjs-game-toolbar > button:nth-child(5),
body[data-screen="play"] .gameplay-five-actions > button:nth-child(5),
body[data-screen="play"] .game-actions > button:nth-child(5) {
  font-size: clamp(10px, 2.45vw, 14px) !important;
}

@media (min-width: 430px) {
  body[data-screen="play"] .sjs-game-toolbar,
  body[data-screen="play"] .gameplay-five-actions,
  body[data-screen="play"] .game-actions {
    gap: 7px !important;
  }

  body[data-screen="play"] .sjs-game-toolbar > button,
  body[data-screen="play"] .gameplay-five-actions > button,
  body[data-screen="play"] .game-actions > button {
    padding-inline: 5px !important;
    font-size: 14px !important;
  }

  body[data-screen="play"] .sjs-game-toolbar > button:nth-child(4),
  body[data-screen="play"] .gameplay-five-actions > button:nth-child(4),
  body[data-screen="play"] .game-actions > button:nth-child(4) {
    font-size: 12.5px !important;
  }
}


/* =========================================================
   AUTHORITATIVE PLAY TOOLBAR + AUTO WIN — 1.2.2
========================================================= */
body[data-screen="play"] .play-actions.toolbar-actions{
  display:grid!important;
  grid-template-columns:1.38fr .82fr .82fr 1.58fr 1.02fr!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
}
body[data-screen="play"] .play-actions.toolbar-actions>.action{
  grid-column:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:44px!important;
  height:44px!important;
  margin:0!important;
  padding:0 2px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  letter-spacing:0!important;
  line-height:1!important;
  font-size:clamp(9px,2.45vw,12px)!important;
}
body[data-screen="play"] .play-actions.toolbar-actions>.action:nth-child(4){
  font-size:clamp(8.5px,2.2vw,11px)!important;
}
body[data-screen="play"] #playHeading{
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
.auto-win-card{max-width:520px;text-align:center}
.auto-win-card>p:not(.eyebrow):not(.win-icon){color:var(--muted);line-height:1.55}
.auto-win-actions{justify-content:center}
.auto-win-actions .action{min-width:150px}
body.card-drag-active .auto-win-modal{pointer-events:none}