/* Smooth Jazz Solitaire — SUPREME UI 3.1
   Visual-only production layer. Gameplay selectors and JS contracts remain unchanged. */

:root{
  --supreme-cyan:#3ff3ff;
  --supreme-blue:#248dff;
  --supreme-pink:#ff3adf;
  --supreme-violet:#9b5cff;
  --supreme-gold:#f6d68a;
  --supreme-ink:#030817;
  --supreme-panel:rgba(4,10,30,.72);
  --supreme-line:rgba(116,162,255,.34);
  --supreme-shadow:0 24px 64px rgba(0,0,0,.48),0 0 42px rgba(28,116,255,.10);
}

html,body{background:#020615}
body{
  color:#f8fbff;
  background:#020615;
  font-synthesis:none;
}

.app-bg{
  position:fixed!important;
  inset:0!important;
  background:
    linear-gradient(180deg,rgba(1,4,17,.16) 0%,rgba(2,5,19,.10) 42%,rgba(2,5,18,.36) 100%),
    url('../assets/app_background.png') center top/cover no-repeat!important;
  filter:saturate(1.08) contrast(1.03);
}
.app-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 10%,rgba(30,115,255,.12),transparent 38%),
    linear-gradient(90deg,rgba(0,0,0,.08),transparent 18%,transparent 82%,rgba(0,0,0,.08));
  pointer-events:none;
}
.app-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.20;
  background-image:radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.4px);
  background-size:76px 76px;
  mask-image:linear-gradient(to bottom,black,transparent 60%);
  pointer-events:none;
  animation:sjs-star-drift 20s linear infinite;
}
@keyframes sjs-star-drift{to{transform:translate3d(0,38px,0)}}

.glass-panel,
.panel-card,
.game-panel{
  background:linear-gradient(155deg,rgba(10,22,58,.78),rgba(3,8,28,.72))!important;
  border:1px solid rgba(130,166,255,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--supreme-shadow)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.2)!important;
  backdrop-filter:blur(22px) saturate(1.2)!important;
}

/* Play screen art direction */
body[data-screen="play"] .game-panel{
  position:relative;
  border-radius:clamp(22px,3.2vw,38px)!important;
  padding:clamp(12px,2.1vw,24px)!important;
  background:
    linear-gradient(180deg,rgba(3,9,31,.64),rgba(2,7,24,.74)),
    radial-gradient(circle at 50% 0,rgba(39,107,255,.10),transparent 42%)!important;
  overflow:hidden!important;
}
body[data-screen="play"] .game-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(130deg,rgba(61,241,255,.55),rgba(83,83,255,.12) 46%,rgba(255,58,223,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

body[data-screen="play"] .board-hud{
  display:grid!important;
  grid-template-columns:minmax(180px,.72fr) minmax(260px,1.28fr)!important;
  align-items:end!important;
  margin:0!important;
  gap:clamp(12px,2vw,24px)!important;
}
body[data-screen="play"] .board-hud-copy{
  text-align:center;
  align-self:center;
}
body[data-screen="play"] .board-hud-copy .eyebrow{
  margin:0 0 3px!important;
  color:var(--supreme-cyan)!important;
  font-size:clamp(.62rem,1.2vw,.84rem)!important;
  letter-spacing:.34em!important;
  text-shadow:0 0 16px rgba(63,243,255,.55);
}
body[data-screen="play"] .board-hud-copy h2{
  margin:0!important;
  max-width:none!important;
  overflow:visible!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:clamp(2rem,5vw,4.65rem)!important;
  font-weight:600!important;
  letter-spacing:-.035em!important;
  line-height:.98!important;
  color:#fff!important;
  text-shadow:0 2px 1px rgba(255,255,255,.18),0 0 20px rgba(162,177,255,.32),0 12px 30px rgba(0,0,0,.6);
}

body[data-screen="play"] .status-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  padding:clamp(11px,1.5vw,17px) clamp(8px,1.4vw,16px)!important;
  border:1px solid rgba(117,153,255,.38)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(8,17,48,.78),rgba(3,8,29,.78))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 38px rgba(0,0,0,.30)!important;
}
body[data-screen="play"] .status-strip>div{
  min-width:0!important;
  padding:0 clamp(8px,1.4vw,20px)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  text-align:center!important;
  align-items:center!important;
  position:relative;
}
body[data-screen="play"] .status-strip>div+div::before{
  content:"✦";
  position:absolute;
  left:-.35em;
  top:50%;
  transform:translateY(-50%);
  color:var(--supreme-gold);
  font-size:.72rem;
  text-shadow:0 0 9px rgba(246,214,138,.5);
}
body[data-screen="play"] .status-strip span{
  color:var(--supreme-cyan)!important;
  font-size:clamp(.52rem,.95vw,.72rem)!important;
  letter-spacing:.20em!important;
}
body[data-screen="play"] .status-strip strong{
  margin-top:5px;
  font-size:clamp(.98rem,2vw,1.6rem)!important;
  font-weight:700!important;
  color:#fff;
  text-shadow:0 0 14px rgba(255,255,255,.24);
}

body[data-screen="play"] .toolbar-actions,
body[data-screen="play"] .play-actions{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(6px,1vw,12px)!important;
  margin:0!important;
}
body[data-screen="play"] .toolbar-actions .action{
  position:relative;
  min-height:clamp(52px,7.5vw,78px)!important;
  padding:clamp(25px,3.4vw,35px) 5px 8px!important;
  border:1px solid rgba(118,149,236,.35)!important;
  border-radius:clamp(13px,2vw,20px)!important;
  background:linear-gradient(180deg,rgba(10,20,53,.80),rgba(4,10,31,.86))!important;
  color:#fff!important;
  font-size:clamp(.58rem,1.4vw,.9rem)!important;
  font-weight:600!important;
  letter-spacing:-.01em!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 9px 22px rgba(0,0,0,.25)!important;
  overflow:hidden;
}
body[data-screen="play"] .toolbar-actions .action::before{
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  font-size:clamp(1rem,2.4vw,1.55rem);
  line-height:1;
  color:#fff;
  filter:drop-shadow(0 0 7px rgba(92,225,255,.45));
}
body[data-screen="play"] [data-action="new"]::before{content:"✦"}
body[data-screen="play"] [data-action="undo"]::before{content:"↶"}
body[data-screen="play"] [data-action="hint"]::before{content:"♧";transform:translateX(-50%) rotate(180deg)}
body[data-screen="play"] [data-action="leaderboard"]::before{content:"♕"}
body[data-screen="play"] [data-action="sound"]::before{content:"◖))";font-size:clamp(.75rem,1.8vw,1.1rem)}
body[data-screen="play"] .toolbar-actions .action.primary{
  border-color:rgba(70,231,255,.68)!important;
  background:linear-gradient(145deg,rgba(31,155,255,.88),rgba(44,72,201,.82))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(63,243,255,.2),0 0 26px rgba(27,153,255,.44)!important;
}
body[data-screen="play"] .toolbar-actions .action:active{transform:translateY(1px) scale(.985)}

body[data-screen="play"] .game-board{
  border:1px solid rgba(98,146,236,.35)!important;
  border-radius:clamp(18px,2.6vw,30px)!important;
  background:
    linear-gradient(180deg,rgba(2,9,30,.24),rgba(2,8,26,.16)),
    radial-gradient(circle at 50% 16%,rgba(35,92,210,.11),transparent 48%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 34px rgba(19,82,197,.10)!important;
}
body[data-screen="play"] .game-board::before{
  opacity:.55!important;
  background:linear-gradient(110deg,transparent,rgba(61,239,255,.08),transparent 38%,rgba(255,58,223,.06),transparent)!important;
}
body[data-screen="play"] .slot{
  border:1px dashed rgba(79,190,255,.44)!important;
  background:linear-gradient(155deg,rgba(8,20,52,.30),rgba(3,8,26,.22))!important;
  box-shadow:inset 0 0 14px rgba(32,118,255,.08)!important;
}
body[data-screen="play"] .foundation>span{
  color:rgba(83,217,255,.40)!important;
  text-shadow:0 0 12px rgba(47,188,255,.22);
}
body[data-screen="play"] .sjs-card,
body[data-screen="play"] .card{
  filter:drop-shadow(0 8px 9px rgba(0,0,0,.42))!important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
body[data-screen="play"] .sjs-card:hover,
body[data-screen="play"] .card:hover{
  filter:drop-shadow(0 10px 13px rgba(0,0,0,.52)) brightness(1.04)!important;
}
body[data-screen="play"] .sjs-card.selected,
body[data-screen="play"] .card.selected{
  transform:translateY(-3px)!important;
  box-shadow:0 0 0 2px var(--supreme-cyan),0 0 24px rgba(63,243,255,.70)!important;
}
body[data-screen="play"] .column.sjs-drop-ok,
body[data-screen="play"] .foundation.sjs-drop-ok{
  box-shadow:inset 0 0 0 2px rgba(63,243,255,.78),0 0 24px rgba(63,243,255,.26)!important;
}
body[data-screen="play"] .board-tip{
  color:rgba(206,221,255,.68)!important;
  text-align:center;
  letter-spacing:.02em;
}

/* Bottom navigation inspired by premium concept */
.bottom-nav{
  left:max(12px,env(safe-area-inset-left))!important;
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  border-radius:clamp(22px,3.5vw,34px)!important;
  padding:7px!important;
  background:linear-gradient(180deg,rgba(6,14,40,.88),rgba(3,8,26,.92))!important;
  border-color:rgba(119,153,242,.40)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05)!important;
}
.nav-button{
  min-height:58px;
  border-radius:18px!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease!important;
}
.nav-button span{font-size:1.3rem!important;color:#aab7db;filter:drop-shadow(0 0 8px transparent)}
.nav-button b{font-size:clamp(.62rem,1.3vw,.78rem)!important;letter-spacing:.18em!important}
.nav-button.is-active{
  background:linear-gradient(150deg,rgba(26,126,224,.58),rgba(18,42,111,.66))!important;
  border-color:rgba(61,238,255,.52)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 22px rgba(28,157,255,.27)!important;
}
.nav-button.is-active span,.nav-button.is-active b{color:var(--supreme-cyan)!important;filter:drop-shadow(0 0 8px rgba(63,243,255,.7))}

/* Non-game screens retain brand polish */
.app-header{border-radius:24px!important}
.hero-card,.panel-card{border-radius:26px!important}
.action{transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.action:active{transform:translateY(1px) scale(.985)}

@media (orientation:landscape), (min-width:768px){
  .app-bg{
    background:
      linear-gradient(180deg,rgba(1,4,17,.14),rgba(2,5,19,.24)),
      url('../assets/app_tablets_background.png') center/cover no-repeat!important;
  }
}

@media (max-width:720px){
  body[data-screen="play"] .game-panel{
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    padding:calc(8px + env(safe-area-inset-top)) 7px 7px!important;
  }
  body[data-screen="play"] .board-hud{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  body[data-screen="play"] .board-hud-copy h2{font-size:clamp(1.55rem,8vw,2.2rem)!important}
  body[data-screen="play"] .status-strip{padding:8px 5px!important}
  body[data-screen="play"] .status-strip strong{margin-top:2px}
  body[data-screen="play"] .toolbar-actions .action{
    min-height:49px!important;
    padding-top:25px!important;
    font-size:clamp(.48rem,2.35vw,.68rem)!important;
  }
  body[data-screen="play"] .toolbar-actions .action::before{top:6px}
  body[data-screen="play"] .game-board{border-radius:17px!important}
  .bottom-nav{left:7px!important;right:7px!important;bottom:max(5px,env(safe-area-inset-bottom))!important}
  .nav-button{min-height:52px}
}

@media (max-width:390px){
  body[data-screen="play"] .toolbar-actions{gap:4px!important}
  body[data-screen="play"] .toolbar-actions .action{padding-inline:1px!important;font-size:.47rem!important}
  body[data-screen="play"] .status-strip>div+div::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .app-bg::after{animation:none!important}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* =========================================================
   PLAY SCREEN ALIGNMENT REFINEMENT — 3.1.1
   Center heading + objective, place stats next to SFX,
   and open a little more room for the lower tableau cards.
========================================================= */
body[data-screen="play"] .game-panel{
  gap:clamp(6px,.95vw,10px)!important;
}

body[data-screen="play"] .board-hud{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:0!important;
  margin:0!important;
}

body[data-screen="play"] .board-hud-copy{
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

body[data-screen="play"] .board-hud-copy .eyebrow,
body[data-screen="play"] .board-hud-copy h2,
body[data-screen="play"] #gameObjectiveLine,
body[data-screen="play"] #gameObjectiveMode,
body[data-screen="play"] #gameObjectiveText{
  text-align:center!important;
}

body[data-screen="play"] .board-hud-copy .eyebrow{
  width:100%!important;
  margin:0 0 4px!important;
}

body[data-screen="play"] .board-hud-copy h2{
  width:100%!important;
  margin:0!important;
}

body[data-screen="play"] #gameObjectiveLine{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  width:100%!important;
  margin:6px auto 0!important;
  gap:4px 8px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions{
  display:grid!important;
  grid-template-columns:1.14fr .82fr .82fr 1.34fr .94fr minmax(250px,1.28fr)!important;
  align-items:stretch!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
}

body[data-screen="play"] .play-actions.toolbar-actions>.action{
  min-height:46px!important;
  height:46px!important;
  padding:24px 6px 6px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions>.status-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  width:100%!important;
  min-width:250px!important;
  margin:0!important;
  padding:9px 8px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions>.status-strip>div{
  min-width:0!important;
  padding:0 10px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions>.status-strip span{
  font-size:clamp(.5rem,.85vw,.68rem)!important;
  letter-spacing:.18em!important;
}

body[data-screen="play"] .play-actions.toolbar-actions>.status-strip strong{
  margin-top:4px!important;
  font-size:clamp(.92rem,1.55vw,1.18rem)!important;
}

body[data-screen="play"] .game-board{
  padding-top:8px!important;
}

@media (max-width: 1180px){
  body[data-screen="play"] .play-actions.toolbar-actions{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions>.status-strip{
    grid-column:1 / -1!important;
    justify-self:center!important;
    width:min(100%,520px)!important;
  }
}

@media (max-width: 720px){
  body[data-screen="play"] .board-hud-copy h2{
    font-size:clamp(1.55rem,8vw,2.15rem)!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions>.status-strip{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions>.action{
    min-height:44px!important;
    height:44px!important;
    padding:22px 5px 5px!important;
  }
}

/* =========================================================
   FORCED PLAY HEADER + TOOLBAR CENTERING — 3.1.2
========================================================= */

body[data-screen="play"] .game-panel{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}

body[data-screen="play"] .game-panel > *{
  width:100%!important;
}

body[data-screen="play"] .board-hud{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  margin:0 auto!important;
}

body[data-screen="play"] .board-hud-copy{
  width:min(100%,760px)!important;
  max-width:760px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

body[data-screen="play"] .board-hud-copy .eyebrow,
body[data-screen="play"] .board-hud-copy h2,
body[data-screen="play"] #gameObjectiveLine,
body[data-screen="play"] #gameObjectiveMode,
body[data-screen="play"] #gameObjectiveText{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

body[data-screen="play"] #gameObjectiveLine{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:4px 8px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions{
  width:min(100%,1180px)!important;
  margin:0 auto!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:8px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action:nth-child(1){
  width:200px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action:nth-child(2){
  width:140px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action:nth-child(3){
  width:140px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action:nth-child(4){
  width:190px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action:nth-child(5){
  width:160px!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
  flex:0 0 255px!important;
  width:255px!important;
  min-width:255px!important;
  max-width:255px!important;
  margin:0!important;
}

@media (max-width:1180px){
  body[data-screen="play"] .play-actions.toolbar-actions{
    flex-wrap:wrap!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
    flex-basis:520px!important;
    width:520px!important;
    max-width:100%!important;
  }
}

@media (max-width:720px){
  body[data-screen="play"] .board-hud-copy{
    width:100%!important;
    max-width:none!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions{
    flex-wrap:wrap!important;
    gap:6px!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions > .action{
    width:calc(20% - 5px)!important;
    min-width:0!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
    flex:1 1 100%!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
}

/* =========================================================
   FINAL BOARD ALIGNMENT + SINGLE-LINE OBJECTIVE — 3.1.3
========================================================= */

/* Keep the full play area centered. */
body[data-screen="play"] .play-grid,
body[data-screen="play"] .game-panel{
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Center the title area. */
body[data-screen="play"] .board-hud{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  margin:0 auto!important;
}

body[data-screen="play"] .board-hud-copy{
  width:100%!important;
  max-width:900px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

/* Force FREE PLAY · COMPLETE THE DEAL onto one row. */
body[data-screen="play"] #gameObjectiveLine{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  margin:7px auto 0!important;
  gap:8px!important;
  white-space:nowrap!important;
  text-align:center!important;
}

body[data-screen="play"] #gameObjectiveMode,
body[data-screen="play"] #gameObjectiveText,
body[data-screen="play"] .game-objective-divider{
  display:inline-block!important;
  width:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  line-height:1!important;
  text-align:center!important;
}

body[data-screen="play"] .game-objective-divider{
  visibility:visible!important;
  opacity:1!important;
}

/* Use one authoritative centered width for toolbar and board. */
body[data-screen="play"] .play-actions.toolbar-actions,
body[data-screen="play"] #gameBoard.game-board{
  width:calc(100% - 24px)!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Make the board's top row and tableau use identical geometry. */
body[data-screen="play"] #gameBoard .board-top,
body[data-screen="play"] #tableau.tableau{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  column-gap:2px!important;
  gap:2px!important;
  box-sizing:border-box!important;
}

/* Keep every slot and tableau column aligned to its grid track. */
body[data-screen="play"] #stock,
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation,
body[data-screen="play"] #tableau > .column{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
}

/* Keep all cards centered inside their exact tableau columns. */
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  left:0!important;
  right:auto!important;
  transform:none!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  margin:0!important;
}

/* Center the complete controls row. */
body[data-screen="play"] .play-actions.toolbar-actions{
  justify-content:center!important;
  align-items:stretch!important;
}

/* Small screens retain the single objective row at a safe size. */
@media (max-width:720px){
  body[data-screen="play"] #gameObjectiveLine{
    gap:5px!important;
    font-size:clamp(.48rem,2.4vw,.68rem)!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions,
  body[data-screen="play"] #gameBoard.game-board{
    width:calc(100% - 10px)!important;
  }
}


/* =========================================================
   PLAY SCREEN SECTION SPACING — 3.1.4
   Prevents title, objective, toolbar, board, and nav overlap.
========================================================= */

body[data-screen="play"] .game-panel{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:0!important;
  padding-top:18px!important;
  padding-bottom:24px!important;
  overflow:visible!important;
}

body[data-screen="play"] .board-hud{
  margin:0 auto 14px!important;
  padding:0 12px!important;
}

body[data-screen="play"] .board-hud-copy .eyebrow{
  margin:0 0 5px!important;
}

body[data-screen="play"] .board-hud-copy h2{
  margin:0!important;
  line-height:1!important;
}

body[data-screen="play"] #gameObjectiveLine{
  margin:10px auto 0!important;
  padding:0!important;
  line-height:1.2!important;
}

body[data-screen="play"] .play-actions.toolbar-actions{
  margin:0 auto 16px!important;
  min-height:48px!important;
  position:relative!important;
  z-index:4!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action,
body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
  position:relative!important;
  z-index:2!important;
}

body[data-screen="play"] #gameBoard.game-board{
  margin:0 auto!important;
  padding-top:14px!important;
  padding-bottom:34px!important;
  position:relative!important;
  z-index:1!important;
  overflow:visible!important;
}

body[data-screen="play"] #gameBoard .board-top{
  margin-bottom:14px!important;
}

body[data-screen="play"] #tableau.tableau{
  margin-top:0!important;
  padding-bottom:36px!important;
  overflow:visible!important;
}

body[data-screen="play"] #tableau > .column{
  padding-bottom:36px!important;
}

body[data-screen="play"] .app-main{
  padding-bottom:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    52px
  )!important;
}

body[data-screen="play"] .bottom-nav{
  position:fixed!important;
  z-index:50!important;
}

/* Keep the board fully above the fixed bottom navigation. */
body[data-screen="play"] #screen-play::after{
  content:""!important;
  display:block!important;
  width:100%!important;
  height:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    26px
  )!important;
}

@media (max-width:1180px){
  body[data-screen="play"] .game-panel{
    padding-top:14px!important;
  }

  body[data-screen="play"] .board-hud{
    margin-bottom:12px!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions{
    margin-bottom:14px!important;
  }

  body[data-screen="play"] #gameBoard.game-board{
    padding-top:12px!important;
  }
}

@media (max-width:720px){
  body[data-screen="play"] .game-panel{
    padding-top:10px!important;
    padding-bottom:18px!important;
  }

  body[data-screen="play"] .board-hud{
    margin-bottom:10px!important;
    padding:0 6px!important;
  }

  body[data-screen="play"] #gameObjectiveLine{
    margin-top:7px!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions{
    margin-bottom:12px!important;
  }

  body[data-screen="play"] #gameBoard.game-board{
    padding-top:10px!important;
    padding-bottom:28px!important;
  }

  body[data-screen="play"] #gameBoard .board-top{
    margin-bottom:10px!important;
  }

  body[data-screen="play"] #tableau.tableau,
  body[data-screen="play"] #tableau > .column{
    padding-bottom:28px!important;
  }
}


/* =========================================================
   TOOLBAR CONTAINMENT + AUTO-FIT TABLEAU — 3.1.5
========================================================= */

/* Keep the complete toolbar inside one centered container. */
body[data-screen="play"] .play-actions.toolbar-actions{
  display:grid!important;
  grid-template-columns:
    minmax(120px,1.18fr)
    minmax(88px,.80fr)
    minmax(88px,.80fr)
    minmax(130px,1.22fr)
    minmax(100px,.92fr)
    minmax(235px,1.42fr)!important;

  width:min(calc(100% - 24px),1180px)!important;
  max-width:1180px!important;
  margin:0 auto 16px!important;
  gap:8px!important;
  align-items:stretch!important;
  justify-content:center!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Cancel previous fixed button widths. */
body[data-screen="play"] .play-actions.toolbar-actions > .action{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  grid-column:auto!important;
  box-sizing:border-box!important;
}

/* Keep Score / Moves / Time fully inside its tab. */
body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-column:auto!important;

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

  margin:0!important;
  padding:8px 6px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
}

body[data-screen="play"] .status-strip > div{
  min-width:0!important;
  width:100%!important;
  padding:0 6px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

body[data-screen="play"] .status-strip span,
body[data-screen="play"] .status-strip strong{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  text-align:center!important;
}

body[data-screen="play"] .status-strip span{
  font-size:clamp(.48rem,.72vw,.66rem)!important;
  letter-spacing:clamp(.08em,.13vw,.17em)!important;
}

body[data-screen="play"] .status-strip strong{
  font-size:clamp(.82rem,1.18vw,1.10rem)!important;
}

/* Keep the game board and all stacks inside its visible container. */
body[data-screen="play"] #gameBoard.game-board{
  width:min(calc(100% - 24px),1180px)!important;
  max-width:1180px!important;
  margin:0 auto!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

body[data-screen="play"] #tableau.tableau{
  height:var(--tableau-h,500px)!important;
  min-height:var(--card-h)!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  box-sizing:border-box!important;
}

body[data-screen="play"] #tableau > .column{
  height:var(--tableau-h,500px)!important;
  min-height:var(--card-h)!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  box-sizing:border-box!important;
}

/* Cards remain aligned with their exact seven-column tracks. */
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  left:0!important;
  right:auto!important;
  transform:none!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
}

/* Tablet layout: score bar receives its own centered row. */
@media (max-width:1180px){
  body[data-screen="play"] .play-actions.toolbar-actions{
    grid-template-columns:
      1.18fr .82fr .82fr 1.20fr .92fr!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
    grid-column:1 / -1!important;
    justify-self:center!important;
    width:min(100%,520px)!important;
  }
}

/* Phone layout remains compact and contained. */
@media (max-width:720px){
  body[data-screen="play"] .play-actions.toolbar-actions{
    width:calc(100% - 10px)!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
    grid-column:1 / -1!important;
    width:100%!important;
  }

  body[data-screen="play"] #gameBoard.game-board{
    width:calc(100% - 10px)!important;
  }
}


/* =========================================================
   AUTHORITATIVE GAME BOARD GEOMETRY — 3.2.0
   One width, one seven-column grid, one alignment system.
========================================================= */

body[data-screen="play"]{
  --play-width:1180px;
  --play-side:14px;
  --board-gap:8px;
  --card-ratio:1.414;
}

/* ---------- Main play structure ---------- */

body[data-screen="play"] .play-grid,
body[data-screen="play"] .game-panel{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}

body[data-screen="play"] .game-panel{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:14px!important;
  overflow:visible!important;
}

/* ---------- Centered title ---------- */

body[data-screen="play"] .board-hud{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:min(
    calc(100% - (var(--play-side) * 2)),
    var(--play-width)
  )!important;
  margin:0 auto!important;
  padding:0!important;
}

body[data-screen="play"] .board-hud-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
}

body[data-screen="play"] .board-hud-copy .eyebrow,
body[data-screen="play"] .board-hud-copy h2{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

body[data-screen="play"] #gameObjectiveLine{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  margin:8px auto 0!important;
  padding:0!important;
  gap:8px!important;
  white-space:nowrap!important;
  text-align:center!important;
}

body[data-screen="play"] #gameObjectiveMode,
body[data-screen="play"] #gameObjectiveText,
body[data-screen="play"] .game-objective-divider{
  display:inline-block!important;
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  line-height:1!important;
}

/* ---------- Toolbar ---------- */

body[data-screen="play"] .play-actions.toolbar-actions{
  display:grid!important;
  grid-template-columns:
    minmax(150px,1.18fr)
    minmax(105px,.82fr)
    minmax(105px,.82fr)
    minmax(150px,1.16fr)
    minmax(120px,.94fr)
    minmax(245px,1.48fr)!important;

  width:min(
    calc(100% - (var(--play-side) * 2)),
    var(--play-width)
  )!important;

  max-width:var(--play-width)!important;
  margin:0 auto!important;
  padding:0!important;
  gap:8px!important;
  align-items:stretch!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:24px 6px 6px!important;
  box-sizing:border-box!important;
  text-align:center!important;
}

/* Score / Moves / Time stays fully inside its own tab. */

body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:48px!important;
  margin:0!important;
  padding:7px 8px!important;
  align-items:center!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

body[data-screen="play"] .status-strip > div{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0 5px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

body[data-screen="play"] .status-strip > div + div::before{
  display:none!important;
  content:none!important;
}

body[data-screen="play"] .status-strip span,
body[data-screen="play"] .status-strip strong{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-overflow:clip!important;
}

body[data-screen="play"] .status-strip span{
  font-size:clamp(.50rem,.72vw,.66rem)!important;
  letter-spacing:.13em!important;
  line-height:1!important;
}

body[data-screen="play"] .status-strip strong{
  margin-top:4px!important;
  font-size:clamp(.84rem,1.05vw,1.08rem)!important;
  line-height:1!important;
}

/* ---------- Authoritative board frame ---------- */

body[data-screen="play"] #gameBoard.game-board{
  display:block!important;

  width:min(
    calc(100% - (var(--play-side) * 2)),
    var(--play-width)
  )!important;

  max-width:var(--play-width)!important;
  min-width:0!important;

  margin:0 auto!important;
  padding:0!important;

  border-radius:20px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

/*
  The top piles and tableau use the exact same grid definition.
  This guarantees every top slot aligns with every tableau column.
*/

body[data-screen="play"] #gameBoard .board-top,
body[data-screen="play"] #tableau.tableau{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  grid-auto-columns:minmax(0,1fr)!important;
  column-gap:var(--board-gap)!important;
  row-gap:0!important;

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

  margin:0!important;
  padding:0!important;

  box-sizing:border-box!important;
}

/* ---------- Top row ---------- */

body[data-screen="play"] #gameBoard .board-top{
  align-items:start!important;
  margin-bottom:14px!important;
}

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

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

body[data-screen="play"] .board-top-spacer{
  grid-column:3!important;
  width:100%!important;
}

body[data-screen="play"] .foundation[data-foundation="0"]{
  grid-column:4!important;
}

body[data-screen="play"] .foundation[data-foundation="1"]{
  grid-column:5!important;
}

body[data-screen="play"] .foundation[data-foundation="2"]{
  grid-column:6!important;
}

body[data-screen="play"] .foundation[data-foundation="3"]{
  grid-column:7!important;
}

body[data-screen="play"] #stock,
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation{
  position:relative!important;
  display:block!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:5 / 7!important;

  margin:0!important;
  padding:0!important;

  justify-self:stretch!important;
  align-self:start!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

/* ---------- Tableau ---------- */

body[data-screen="play"] #tableau.tableau{
  position:relative!important;
  align-items:start!important;

  height:var(--tableau-h,500px)!important;
  min-height:0!important;
  max-height:var(--tableau-h,500px)!important;

  overflow:hidden!important;
  transform:none!important;
}

body[data-screen="play"] #tableau > .column{
  position:relative!important;

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

  height:var(--tableau-h,500px)!important;
  min-height:0!important;
  max-height:var(--tableau-h,500px)!important;

  margin:0!important;
  padding:0!important;

  justify-self:stretch!important;
  align-self:start!important;

  box-sizing:border-box!important;
  overflow:hidden!important;
}

/* ---------- Every card uses its exact grid column ---------- */

body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  position:absolute!important;
  left:0!important;
  right:auto!important;

  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;

  height:auto!important;
  aspect-ratio:5 / 7!important;

  margin:0!important;
  padding:0!important;

  transform:none!important;
  box-sizing:border-box!important;
}

body[data-screen="play"] #stock > .sjs-card,
body[data-screen="play"] #stock > .card,
body[data-screen="play"] #waste > .sjs-card,
body[data-screen="play"] #waste > .card,
body[data-screen="play"] .foundation > .sjs-card,
body[data-screen="play"] .foundation > .card{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;

  height:100%!important;
  margin:0!important;
  transform:none!important;
}

/* ---------- Bottom clearance ---------- */

body[data-screen="play"] .app-main{
  padding-bottom:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    28px
  )!important;
}

body[data-screen="play"] .bottom-nav{
  z-index:100!important;
}

/* ---------- Responsive ---------- */

@media (max-width:1180px){
  body[data-screen="play"]{
    --play-side:10px;
    --board-gap:6px;
  }

  body[data-screen="play"] .play-actions.toolbar-actions{
    grid-template-columns:
      minmax(130px,1.18fr)
      minmax(90px,.82fr)
      minmax(90px,.82fr)
      minmax(130px,1.15fr)
      minmax(105px,.92fr)!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
    grid-column:1 / -1!important;
    width:min(100%,520px)!important;
    justify-self:center!important;
  }
}

@media (max-width:720px){
  body[data-screen="play"]{
    --play-side:5px;
    --board-gap:3px;
  }

  body[data-screen="play"] .game-panel{
    gap:10px!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions > .action{
    height:44px!important;
    min-height:44px!important;
    padding:22px 2px 4px!important;
    font-size:clamp(.47rem,2.15vw,.66rem)!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
    grid-column:1 / -1!important;
    width:100%!important;
    height:44px!important;
  }

  body[data-screen="play"] #gameBoard .board-top{
    margin-bottom:8px!important;
  }
}


/* =========================================================
   SCROLLABLE FULL-HEIGHT TABLEAU + SMOOTH MOTION — 3.3.0
========================================================= */

/* Restore normal mouse, trackpad, and touch scrolling. */
html,
body{
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-behavior:smooth!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

body[data-screen="play"]{
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  touch-action:pan-y!important;
}

/* Stop the Play screen from being locked to the viewport. */
body[data-screen="play"] .app-shell,
body[data-screen="play"] .app-main,
body[data-screen="play"] #screen-play,
body[data-screen="play"] .play-grid,
body[data-screen="play"] .game-panel{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

body[data-screen="play"] .app-main{
  padding-bottom:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    50px
  )!important;
}

/* The board grows with the actual card stacks. */
body[data-screen="play"] #gameBoard.game-board{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:26px!important;
  touch-action:pan-y!important;
}

/* Keep the top piles aligned and separate from the tableau. */
body[data-screen="play"] #gameBoard .board-top{
  position:relative!important;
  z-index:3!important;
  margin-bottom:16px!important;
}

/* Tableau height is now driven by JavaScript from the real stacks. */
body[data-screen="play"] #tableau.tableau{
  position:relative!important;
  height:var(--tableau-h,520px)!important;
  min-height:var(--tableau-h,520px)!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:28px!important;
  box-sizing:content-box!important;
  touch-action:pan-y!important;
}

/* Every column grows to the same calculated height. */
body[data-screen="play"] #tableau > .column{
  position:relative!important;
  height:var(--tableau-h,520px)!important;
  min-height:var(--tableau-h,520px)!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:28px!important;
  box-sizing:border-box!important;
  touch-action:pan-y!important;
}

/* Cards still support dragging, while the empty board supports scrolling. */
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  touch-action:none!important;
  will-change:top,transform,filter!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform:translateZ(0)!important;
  transition:
    top .22s cubic-bezier(.22,.75,.25,1),
    filter .16s ease,
    box-shadow .16s ease,
    opacity .16s ease!important;
}

/* Do not animate the card currently being dragged. */
body.card-drag-active #tableau .sjs-card,
body.card-drag-active #tableau .card,
body[data-screen="play"] .sjs-card.dragging-source,
body[data-screen="play"] .card.dragging-source{
  transition:none!important;
}

/* Smoother screen and panel transitions. */
.app-screen.is-active{
  animation:sjs-screen-enter .28s cubic-bezier(.22,.75,.25,1)!important;
}

@keyframes sjs-screen-enter{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

body[data-screen="play"] .board-hud,
body[data-screen="play"] .play-actions.toolbar-actions,
body[data-screen="play"] #gameBoard{
  transition:
    width .22s ease,
    margin .22s ease,
    padding .22s ease!important;
}

/* Make wheel and trackpad scrolling reliable over the board background. */
body[data-screen="play"] .game-panel,
body[data-screen="play"] #gameBoard,
body[data-screen="play"] #tableau,
body[data-screen="play"] #tableau > .column{
  overscroll-behavior:auto!important;
}

/* Prevent the fixed navigation from covering the final card. */
body[data-screen="play"] #screen-play::after{
  content:""!important;
  display:block!important;
  width:100%!important;
  height:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    36px
  )!important;
}

@media (max-width:720px){
  body[data-screen="play"] #gameBoard.game-board{
    padding-bottom:20px!important;
  }

  body[data-screen="play"] #tableau.tableau,
  body[data-screen="play"] #tableau > .column{
    padding-bottom:22px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body[data-screen="play"] #tableau .sjs-card,
  body[data-screen="play"] #tableau .card,
  .app-screen.is-active{
    animation:none!important;
    transition:none!important;
  }
}


/* =========================================================
   SMOOTH GAMEPLAY + WIDER TIME DISPLAY — 3.3.1
========================================================= */

/*
  Give the statistics section more room without pushing it
  outside the centered toolbar.
*/
body[data-screen="play"] .play-actions.toolbar-actions{
  grid-template-columns:
    minmax(150px,1.16fr)
    minmax(105px,.80fr)
    minmax(105px,.80fr)
    minmax(150px,1.14fr)
    minmax(120px,.91fr)
    minmax(275px,1.58fr)!important;
}

/*
  Score and Moves remain compact.
  Time receives a wider final column.
*/
body[data-screen="play"] .status-strip{
  grid-template-columns:
    minmax(0,.88fr)
    minmax(0,.88fr)
    minmax(0,1.24fr)!important;

  padding-left:8px!important;
  padding-right:10px!important;
}

body[data-screen="play"] .status-strip > div{
  padding-left:4px!important;
  padding-right:4px!important;
}

body[data-screen="play"] .status-strip > div:last-child{
  padding-left:6px!important;
  padding-right:6px!important;
}

body[data-screen="play"] .status-strip strong{
  overflow:visible!important;
  text-overflow:clip!important;
}

body[data-screen="play"] #timerValue{
  width:100%!important;
  min-width:6.1ch!important;
  overflow:visible!important;
  font-size:clamp(.80rem,1vw,1.04rem)!important;
  letter-spacing:-.02em!important;
}

/*
  Remove top-position animation.
  Animating "top" every time the board recalculates causes
  visible shaking and delayed card placement.
*/
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  transition:
    filter .12s ease,
    box-shadow .12s ease,
    opacity .12s ease!important;

  will-change:auto!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}

/*
  Do not apply a permanent translateZ transform.
  That can create separate compositor layers for every card
  and make large stacks feel unstable.
*/
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  transform:none!important;
}

/* Selected cards use a simple shadow instead of vertical movement. */
body[data-screen="play"] .sjs-card.selected,
body[data-screen="play"] .card.selected{
  transform:none!important;
  box-shadow:
    0 0 0 2px var(--supreme-cyan),
    0 0 18px rgba(63,243,255,.68)!important;
}

/* Remove hover movement that can feel like card jumping. */
body[data-screen="play"] .sjs-card:hover,
body[data-screen="play"] .card:hover{
  transform:none!important;
  filter:brightness(1.025)!important;
}

/* Keep dragging immediate and animation-free. */
body.card-drag-active #tableau .sjs-card,
body.card-drag-active #tableau .card,
body[data-screen="play"] .sjs-card.dragging-source,
body[data-screen="play"] .card.dragging-source,
.sjs-drag-layer{
  transition:none!important;
  animation:none!important;
}

/*
  Avoid animated width and padding changes while the board
  recalculates after a move or browser resize.
*/
body[data-screen="play"] .board-hud,
body[data-screen="play"] .play-actions.toolbar-actions,
body[data-screen="play"] #gameBoard{
  transition:none!important;
}

/* Stabilize layout calculations for each tableau column. */
body[data-screen="play"] #tableau > .column{
  contain:layout style!important;
}

/*
  Keep smooth scrolling for the page itself, but do not animate
  the board geometry while the user scrolls.
*/
html,
body{
  scroll-behavior:auto!important;
}

/* Tablet fallback: statistics receive a full centered row. */
@media (max-width:1180px){
  body[data-screen="play"] .play-actions.toolbar-actions{
    grid-template-columns:
      minmax(130px,1.16fr)
      minmax(90px,.80fr)
      minmax(90px,.80fr)
      minmax(130px,1.13fr)
      minmax(105px,.90fr)!important;
  }

  body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
    grid-column:1 / -1!important;
    width:min(100%,560px)!important;
  }
}

/* Mobile keeps the timer readable without overflow. */
@media (max-width:720px){
  body[data-screen="play"] .status-strip{
    grid-template-columns:
      minmax(0,.85fr)
      minmax(0,.85fr)
      minmax(0,1.30fr)!important;
  }

  body[data-screen="play"] #timerValue{
    min-width:5.8ch!important;
    font-size:clamp(.76rem,3.4vw,.98rem)!important;
  }
}


/* =========================================================
   FULL VIEWPORT GAME FIT — 3.4.0
   Keeps the entire Play screen visible without scrolling.
========================================================= */

html,
body{
  height:100%!important;
}

body[data-screen="play"]{
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

body[data-screen="play"] .app-shell{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}

body[data-screen="play"] .app-main{
  height:calc(
    100dvh -
    var(--bottom-nav-h,92px) -
    var(--safe-bottom,0px) -
    12px
  )!important;

  min-height:0!important;
  max-height:none!important;

  padding-bottom:0!important;
  overflow:hidden!important;
}

body[data-screen="play"] #screen-play,
body[data-screen="play"] .play-grid{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}

body[data-screen="play"] .game-panel{
  display:grid!important;
  grid-template-rows:
    auto
    auto
    minmax(0,1fr)!important;

  align-items:stretch!important;

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

  gap:var(--fit-section-gap,8px)!important;

  padding:
    var(--fit-panel-top,8px)
    0
    var(--fit-panel-bottom,6px)!important;

  overflow:hidden!important;
}

/* Compact title region when fitting shorter screens. */
body[data-screen="play"] .board-hud{
  width:min(calc(100% - 20px),1180px)!important;
  flex:0 0 auto!important;
}

body[data-screen="play"] .board-hud-copy .eyebrow{
  margin-bottom:2px!important;
  font-size:var(--fit-eyebrow-size,.72rem)!important;
}

body[data-screen="play"] .board-hud-copy h2{
  font-size:var(--fit-title-size,3.2rem)!important;
  line-height:.94!important;
}

body[data-screen="play"] #gameObjectiveLine{
  margin-top:var(--fit-objective-gap,5px)!important;
  font-size:var(--fit-objective-size,.68rem)!important;
}

/* Toolbar remains fully visible and compact. */
body[data-screen="play"] .play-actions.toolbar-actions{
  width:min(calc(100% - 20px),1180px)!important;
  margin:0 auto!important;
  gap:var(--fit-toolbar-gap,7px)!important;
  flex:0 0 auto!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action,
body[data-screen="play"] .play-actions.toolbar-actions > .status-strip{
  height:var(--fit-toolbar-height,46px)!important;
  min-height:var(--fit-toolbar-height,46px)!important;
}

body[data-screen="play"] .play-actions.toolbar-actions > .action{
  padding:
    var(--fit-toolbar-icon-space,23px)
    5px
    5px!important;
}

/* The board consumes all remaining viewport height. */
body[data-screen="play"] #gameBoard.game-board{
  display:grid!important;

  grid-template-rows:
    var(--fit-card-h,180px)
    minmax(0,1fr)!important;

  width:min(calc(100% - 20px),1180px)!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;

  margin:0 auto!important;
  padding:0!important;

  gap:var(--fit-board-row-gap,8px)!important;

  overflow:hidden!important;
}

/* Shared seven-column geometry. */
body[data-screen="play"] #gameBoard .board-top,
body[data-screen="play"] #tableau.tableau{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  column-gap:var(--fit-card-gap,6px)!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

/* Top card row uses calculated fitted card height. */
body[data-screen="play"] #stock,
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation{
  width:100%!important;
  height:var(--fit-card-h,180px)!important;
  aspect-ratio:auto!important;
}

/* Tableau is restricted to the remaining visible area. */
body[data-screen="play"] #tableau.tableau{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}

body[data-screen="play"] #tableau > .column{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}

/* Fitted card size is shared across all piles. */
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:var(--fit-card-h,180px)!important;
  aspect-ratio:auto!important;
}

/* No extra spacer below the Play screen. */
body[data-screen="play"] #screen-play::after{
  display:none!important;
  content:none!important;
}

/* Bottom navigation remains fixed and visible. */
body[data-screen="play"] .bottom-nav{
  position:fixed!important;
  z-index:100!important;
}

/* Very short desktop/laptop screens. */
@media (max-height:820px) and (min-width:721px){
  body[data-screen="play"]{
    --fit-section-gap:6px;
    --fit-panel-top:5px;
    --fit-panel-bottom:4px;
    --fit-title-size:2.8rem;
    --fit-eyebrow-size:.66rem;
    --fit-objective-size:.62rem;
    --fit-objective-gap:3px;
    --fit-toolbar-height:42px;
    --fit-toolbar-icon-space:20px;
    --fit-toolbar-gap:6px;
    --fit-board-row-gap:6px;
  }
}

@media (max-height:720px) and (min-width:721px){
  body[data-screen="play"]{
    --fit-section-gap:4px;
    --fit-panel-top:3px;
    --fit-title-size:2.35rem;
    --fit-eyebrow-size:.60rem;
    --fit-objective-size:.57rem;
    --fit-toolbar-height:38px;
    --fit-toolbar-icon-space:17px;
    --fit-toolbar-gap:5px;
    --fit-board-row-gap:4px;
  }
}


/* =========================================================
   STABLE TABLEAU INTERACTION ENGINE — 3.5.0
   No state-dependent compression or whole-board jumping.
========================================================= */

body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  left:0!important;
  right:auto!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  transform:none!important;

  transition:
    filter .10s ease,
    box-shadow .10s ease,
    opacity .10s ease!important;

  will-change:auto!important;
  contain:none!important;
}

/* Selecting a card must not move or resize it. */
body[data-screen="play"] .sjs-card.selected,
body[data-screen="play"] .card.selected{
  transform:none!important;
  filter:brightness(1.05)!important;
  box-shadow:
    0 0 0 2px #3ff3ff,
    0 0 18px rgba(63,243,255,.68)!important;
}

/* No positional animation during rerendering. */
body[data-screen="play"] #tableau,
body[data-screen="play"] #tableau > .column,
body[data-screen="play"] #tableau .sjs-card,
body[data-screen="play"] #tableau .card{
  animation:none!important;
}

/* The floating drag stack follows the pointer immediately. */
.sjs-drag-layer,
.sjs-drag-layer .sjs-card,
.sjs-drag-layer .card{
  transition:none!important;
  animation:none!important;
  will-change:transform!important;
}

/* Source cards stay fixed underneath the floating drag copy. */
body.card-drag-active .dragging-source{
  transform:none!important;
  transition:none!important;
}

/* Keep the whole board geometry stable between moves. */
body[data-screen="play"] #gameBoard,
body[data-screen="play"] .board-top,
body[data-screen="play"] #tableau,
body[data-screen="play"] #tableau > .column{
  transition:none!important;
}

/* A normal pointer click is available anywhere on a card. */
body[data-screen="play"] .sjs-card,
body[data-screen="play"] .card{
  cursor:grab!important;
  pointer-events:auto!important;
}

body.card-drag-active .sjs-card,
body.card-drag-active .card{
  cursor:grabbing!important;
}


/* =========================================================
   EMERGENCY DRAG GHOST CLEANUP — 3.5.1
========================================================= */

/* Only the active drag layer may float above the board. */
body:not(.card-drag-active) > .sjs-drag-layer{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Original cards must remain anchored to their tableau column. */
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  left:0!important;
  right:auto!important;
  margin:0!important;
  transform:none!important;
}

/* Drag copies never intercept the pointer. */
.sjs-drag-layer,
.sjs-drag-layer *{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

/* Remove lingering source styling after interrupted drags. */
body:not(.card-drag-active) .dragging-source{
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
}


/* =========================================================
   PER-COLUMN TABLEAU AUTO-FIT — 3.5.2
   Long columns compress independently without bottom cutoff.
========================================================= */

body[data-screen="play"] #tableau.tableau{
  overflow:hidden!important;
  padding-bottom:0!important;
}

body[data-screen="play"] #tableau > .column{
  position:relative!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
  padding:0!important;
  box-sizing:border-box!important;
}

/*
  The final card in each column must remain completely visible.
  Position changes are immediate to prevent elastic movement.
*/
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  transition:
    filter .10s ease,
    box-shadow .10s ease,
    opacity .10s ease!important;

  animation:none!important;
  margin:0!important;
  left:0!important;
  right:auto!important;
  transform:none!important;
}

/* Never clip card artwork inside the actual card element. */
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card,
body[data-screen="play"] #tableau > .column > .sjs-card img,
body[data-screen="play"] #tableau > .column > .card img{
  box-sizing:border-box!important;
}

/* Maintain a small safe boundary above the bottom edge. */
body[data-screen="play"] #tableau > .column{
  padding-bottom:8px!important;
}


/* =========================================================
   READABLE LONG-COLUMN CARD SIZING — 3.6.0
========================================================= */

/*
  Inline dimensions calculated by game.js are authoritative.
  Long columns may use slightly smaller centered cards.
*/
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  margin:0!important;
  box-sizing:border-box!important;
  transform:none!important;
  transition:
    filter .10s ease,
    box-shadow .10s ease,
    opacity .10s ease!important;
}

/*
  Images always fill the resized card without distortion outside
  the card boundary.
*/
body[data-screen="play"] #tableau > .column > .sjs-card img,
body[data-screen="play"] #tableau > .column > .card img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
}

/* Keep the entire final card visible inside its column. */
body[data-screen="play"] #tableau > .column{
  overflow:hidden!important;
  padding-bottom:12px!important;
}

/*
  Avoid old CSS rules forcing every tableau card back to full width.
  Inline important dimensions now control each long column.
*/
body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  aspect-ratio:auto!important;
}

/* No size animation while moving cards between columns. */
body.card-drag-active #tableau .sjs-card,
body.card-drag-active #tableau .card,
body[data-screen="play"] .dragging-source{
  transition:none!important;
}


/* =========================================================
   SCREEN BACKGROUNDS — HOME / RADIO / ACCOUNT
   Play keeps its existing board background.
========================================================= */

html,
body{
  min-height:100%;
  background:#020617;
}

body{
  position:relative;
  overflow-x:hidden;
}

body .app-bg{
  position:fixed!important;
  inset:0!important;
  z-index:-3!important;

  display:block!important;
  visibility:visible!important;
  opacity:1!important;

  width:100vw!important;
  height:100vh!important;

  background-color:#020617!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;

  pointer-events:none!important;

  transition:
    opacity .28s ease,
    filter .28s ease!important;
}

/* Default/Home screen artwork. */
body:not([data-screen]),
body[data-screen="home"]{
  background:
    linear-gradient(
      180deg,
      rgba(1,4,16,.25),
      rgba(1,4,17,.48) 56%,
      rgba(1,4,17,.70)
    ),
    url("../assets/app_tablets_background.png")
    center center / cover no-repeat fixed!important;
}

body:not([data-screen]) .app-bg,
body[data-screen="home"] .app-bg{
  background-image:
    linear-gradient(
      180deg,
      rgba(1,4,16,.18),
      rgba(1,4,17,.46) 58%,
      rgba(1,4,17,.68)
    ),
    url("../assets/app_tablets_background.png")!important;

  filter:
    saturate(1.12)
    contrast(1.06)
    brightness(.94)!important;
}

/* Radio screen artwork. */
body[data-screen="radio"]{
  background:
    linear-gradient(
      180deg,
      rgba(1,3,15,.20),
      rgba(1,4,18,.44) 54%,
      rgba(1,4,17,.72)
    ),
    url("../assets/app_tablets_background.png")
    center center / cover no-repeat fixed!important;
}

body[data-screen="radio"] .app-bg{
  background-image:
    radial-gradient(
      circle at 25% 28%,
      rgba(47,220,255,.13),
      transparent 36%
    ),
    radial-gradient(
      circle at 78% 25%,
      rgba(174,64,255,.12),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(1,4,16,.16),
      rgba(1,4,17,.50) 62%,
      rgba(1,4,17,.72)
    ),
    url("../assets/app_tablets_background.png")!important;

  filter:
    saturate(1.18)
    contrast(1.07)
    brightness(.92)!important;
}

/* Account screen artwork. */
body[data-screen="account"]{
  background:
    linear-gradient(
      180deg,
      rgba(1,4,16,.24),
      rgba(1,4,17,.50) 58%,
      rgba(1,4,17,.74)
    ),
    url("../assets/app_tablets_background.png")
    center center / cover no-repeat fixed!important;
}

body[data-screen="account"] .app-bg{
  background-image:
    radial-gradient(
      circle at 50% 12%,
      rgba(45,137,255,.14),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      rgba(1,4,16,.18),
      rgba(1,4,17,.50) 60%,
      rgba(1,4,17,.72)
    ),
    url("../assets/app_tablets_background.png")!important;

  filter:
    saturate(1.10)
    contrast(1.05)
    brightness(.91)!important;
}

/*
  Do not replace the established Play-screen background.
  These declarations intentionally leave its existing styling intact.
*/
body[data-screen="play"] .app-bg{
  transition:none!important;
}

/* Make panels transparent enough for the image to remain visible. */
body[data-screen="home"] .glass-panel,
body[data-screen="radio"] .glass-panel,
body[data-screen="account"] .glass-panel{
  background:
    linear-gradient(
      145deg,
      rgba(7,17,49,.74),
      rgba(2,7,25,.80)
    )!important;

  backdrop-filter:
    blur(17px)
    saturate(1.12)!important;

  -webkit-backdrop-filter:
    blur(17px)
    saturate(1.12)!important;
}

/* Enable normal page scrolling on non-game screens. */
body[data-screen="home"],
body[data-screen="radio"],
body[data-screen="account"]{
  min-height:100vh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}

body[data-screen="home"] .app-shell,
body[data-screen="home"] .app-main,
body[data-screen="home"] #screen-home,
body[data-screen="radio"] .app-shell,
body[data-screen="radio"] .app-main,
body[data-screen="radio"] #screen-radio,
body[data-screen="account"] .app-shell,
body[data-screen="account"] .app-main,
body[data-screen="account"] #screen-account{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

/* Clearance above the fixed player and navigation. */
body[data-screen="home"] .app-main,
body[data-screen="radio"] .app-main,
body[data-screen="account"] .app-main{
  padding-bottom:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    112px
  )!important;
}

@media (max-width:760px){
  body:not([data-screen]),
  body[data-screen="home"],
  body[data-screen="radio"],
  body[data-screen="account"]{
    background-attachment:scroll!important;
  }

  body:not([data-screen]) .app-bg,
  body[data-screen="home"] .app-bg,
  body[data-screen="radio"] .app-bg,
  body[data-screen="account"] .app-bg{
    background-image:
      linear-gradient(
        180deg,
        rgba(1,4,16,.20),
        rgba(1,4,17,.54) 58%,
        rgba(1,4,17,.76)
      ),
      url("../assets/app_tablets_background.png")!important;

    background-position:center center!important;
    background-size:cover!important;
  }
}


/* =========================================================
   DELETE ACCOUNT MODAL — FINAL
========================================================= */

body.delete-account-open{
  overflow:hidden!important;
}

.delete-account-modal[hidden]{
  display:none!important;
}

.delete-account-modal{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:100vw!important;
  height:100vh!important;

  padding:
    max(18px,env(safe-area-inset-top))
    max(18px,env(safe-area-inset-right))
    max(18px,env(safe-area-inset-bottom))
    max(18px,env(safe-area-inset-left))!important;

  box-sizing:border-box!important;

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .22s ease,
    visibility .22s ease;
}

.delete-account-modal.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.delete-account-backdrop{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255,56,126,.16),
      transparent 38%
    ),
    rgba(1,4,17,.90)!important;

  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;

  cursor:pointer;
}

.delete-account-card{
  position:relative!important;
  z-index:2!important;

  width:min(560px,100%)!important;
  max-height:calc(100vh - 36px)!important;
  overflow-y:auto!important;

  box-sizing:border-box!important;

  padding:clamp(28px,5vw,46px)!important;

  color:#f7fbff!important;
  text-align:center!important;

  border:1px solid rgba(255,86,142,.52)!important;
  border-radius:30px!important;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(255,75,139,.13),
      transparent 42%
    ),
    linear-gradient(
      150deg,
      rgba(12,18,49,.98),
      rgba(4,7,25,.99)
    )!important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.09),
    0 36px 100px rgba(0,0,0,.78),
    0 0 52px rgba(255,55,126,.22)!important;

  transform:
    translateY(20px)
    scale(.96);

  transition:
    transform .24s cubic-bezier(.22,.8,.24,1);
}

.delete-account-modal.is-visible .delete-account-card{
  transform:
    translateY(0)
    scale(1);
}

.delete-account-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;

  border-radius:inherit;

  background:
    linear-gradient(
      135deg,
      rgba(255,84,145,.58),
      transparent 38%,
      rgba(137,73,255,.30) 72%,
      rgba(50,218,255,.32)
    );

  opacity:.48;
  filter:blur(13px);
}

.delete-account-close{
  position:absolute!important;
  top:14px!important;
  right:14px!important;

  width:40px!important;
  height:40px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  padding:0!important;

  color:#dce6ff!important;
  font-size:1.55rem!important;
  line-height:1!important;

  border:1px solid rgba(129,157,228,.30)!important;
  border-radius:50%!important;

  background:rgba(5,10,31,.78)!important;

  cursor:pointer!important;
}

.delete-account-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:76px!important;
  height:76px!important;

  margin:0 auto 22px!important;

  color:#fff!important;
  font-size:2.2rem!important;
  font-weight:900!important;

  border:1px solid rgba(255,104,155,.72)!important;
  border-radius:24px!important;

  background:
    linear-gradient(
      145deg,
      rgba(239,48,111,.96),
      rgba(128,44,176,.94)
    )!important;

  box-shadow:
    0 0 36px rgba(255,58,126,.38)!important;
}

.delete-account-icon.success{
  border-color:rgba(73,239,255,.68)!important;

  background:
    linear-gradient(
      145deg,
      rgba(28,165,255,.94),
      rgba(72,73,213,.94)
    )!important;

  box-shadow:
    0 0 36px rgba(48,173,255,.40)!important;
}

.delete-account-card .eyebrow{
  margin:0 0 12px!important;
}

.delete-account-card h2{
  margin:0!important;

  color:#fff!important;

  font-family:
    Orbitron,
    Montserrat,
    Arial,
    sans-serif!important;

  font-size:clamp(1.7rem,5vw,2.7rem)!important;
  line-height:1.12!important;
}

.delete-account-message{
  max-width:460px!important;
  margin:18px auto 0!important;

  color:#c4d0e9!important;
  font-size:.98rem!important;
  line-height:1.72!important;
}

.delete-account-confirm-label{
  display:grid!important;
  gap:10px!important;

  margin-top:24px!important;

  color:#dbe5fa!important;
  font-size:.85rem!important;
  font-weight:800!important;
  text-align:left!important;
  letter-spacing:.04em!important;
}

.delete-account-confirm-label strong{
  color:#ff77aa!important;
}

#deleteAccountConfirm{
  width:100%!important;
  min-height:52px!important;

  box-sizing:border-box!important;

  padding:0 16px!important;

  color:#fff!important;
  font:inherit!important;
  font-weight:800!important;
  letter-spacing:.12em!important;

  border:1px solid rgba(255,91,143,.42)!important;
  border-radius:16px!important;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,31,.88),
      rgba(2,6,21,.96)
    )!important;

  outline:none!important;
}

#deleteAccountConfirm:focus{
  border-color:rgba(255,105,158,.86)!important;

  box-shadow:
    0 0 0 3px rgba(255,73,139,.12),
    0 0 24px rgba(255,58,126,.17)!important;
}

.delete-account-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;

  margin-top:24px!important;
}

.delete-account-actions .action{
  min-height:50px!important;
}

.delete-account-status{
  min-height:22px!important;
  margin:18px 0 0!important;

  color:#aebddb!important;
  font-size:.86rem!important;
  line-height:1.5!important;
}

.delete-account-status.is-error{
  color:#ff91b8!important;
}

#deleteAccountConfirmButton:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
  filter:saturate(.55)!important;
}

#deleteAccountConfirmButton.is-loading{
  position:relative!important;
  cursor:wait!important;
}

#deleteAccountConfirmButton.is-loading::after{
  content:"";
  position:absolute;

  width:17px;
  height:17px;

  right:16px;
  top:50%;

  margin-top:-8.5px;

  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:50%;

  animation:delete-account-spin .7s linear infinite;
}

@keyframes delete-account-spin{
  to{
    transform:rotate(360deg);
  }
}

.delete-account-done{
  width:100%!important;
  margin-top:26px!important;
}

@media (max-width:620px){
  .delete-account-modal{
    align-items:flex-end!important;
    padding:10px!important;
  }

  .delete-account-card{
    width:100%!important;
    max-height:88vh!important;

    padding:34px 20px 24px!important;

    border-radius:26px 26px 20px 20px!important;
  }

  .delete-account-actions{
    grid-template-columns:1fr!important;
  }

  .delete-account-icon{
    width:66px!important;
    height:66px!important;
    border-radius:20px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .delete-account-modal,
  .delete-account-card,
  #deleteAccountConfirmButton::after{
    animation:none!important;
    transition:none!important;
  }
}


/* =========================================================
   ACCOUNT SOCIAL LINKS
========================================================= */

.account-social-block{
  margin-top:26px!important;
  padding-top:24px!important;

  border-top:
    1px solid
    rgba(92,145,236,.24)!important;
}

.account-social-heading{
  margin-bottom:16px!important;
}

.account-social-heading .eyebrow{
  margin:0 0 7px!important;
}

.account-social-heading h3{
  margin:0!important;

  color:#fff!important;
  font-size:1.08rem!important;
  line-height:1.3!important;
  letter-spacing:.02em!important;
}

.account-social-links{
  display:grid!important;
  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;

  gap:11px!important;
}

.account-social-links a{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;

  min-height:52px!important;
  padding:0 15px!important;

  color:#dce8ff!important;
  text-decoration:none!important;

  border:
    1px solid
    rgba(84,222,255,.28)!important;

  border-radius:17px!important;

  background:
    linear-gradient(
      145deg,
      rgba(7,27,60,.72),
      rgba(5,11,34,.78)
    )!important;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.05)!important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease!important;
}

.account-social-links a:hover,
.account-social-links a:focus-visible{
  transform:translateY(-2px)!important;

  color:#55ecff!important;

  border-color:
    rgba(85,236,255,.62)!important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.24),
    0 0 22px rgba(38,175,255,.14)!important;

  outline:none!important;
}

.account-social-links span{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:30px!important;
  height:30px!important;

  flex:0 0 30px!important;

  color:#55ecff!important;
  font-size:1rem!important;
  font-weight:900!important;

  border:
    1px solid
    rgba(85,236,255,.30)!important;

  border-radius:10px!important;

  background:
    rgba(42,163,255,.09)!important;
}

.account-social-links strong{
  min-width:0!important;

  font-size:.88rem!important;
  line-height:1.2!important;
}

@media (max-width:540px){
  .account-social-links{
    grid-template-columns:1fr!important;
  }
}



/* =========================================================
   GLOBAL NEON MOUSE TRAIL — WEBSITE ONLY
========================================================= */

.sjs-mouse-trail{
  position:fixed;
  z-index:999999;
  left:0;
  top:0;

  display:block;
  pointer-events:none;
  user-select:none;

  border-radius:999px;

  opacity:0;
  transform:
    translate(-50%,-50%)
    scale(.35);

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,1) 0%,
      rgba(78,239,255,.95) 22%,
      rgba(36,170,255,.68) 48%,
      rgba(204,44,255,.30) 70%,
      transparent 100%
    );

  box-shadow:
    0 0 8px rgba(90,239,255,.95),
    0 0 16px rgba(45,181,255,.72),
    0 0 26px rgba(198,49,255,.46);

  will-change:
    transform,
    opacity,
    filter;
}

.sjs-mouse-trail.is-active{
  animation:
    sjsMouseTrailFade .76s
    cubic-bezier(.15,.75,.25,1)
    forwards;
}

@keyframes sjsMouseTrailFade{
  0%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      scale(.25);
    filter:blur(0);
  }

  18%{
    opacity:1;
    transform:
      translate(-50%,-50%)
      scale(1);
  }

  100%{
    opacity:0;
    transform:
      translate(-50%,-85%)
      scale(.08);
    filter:blur(2px);
  }
}

@media (pointer:coarse){
  .sjs-mouse-trail{
    display:none!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .sjs-mouse-trail{
    display:none!important;
    animation:none!important;
  }
}