/* ===== Responsive mobile-game pass ===== */
:root {
     /* Five columns always fit; on normal phones cards grow from the old 54px to ~60–64px. */
     --cw: clamp(54px, 17vw, 64px);
     --ch: calc(var(--cw) * 1.55);
     --gap: clamp(4px, 1.2vw, 6px);
     --radius: clamp(14px, 3.8vw, 16px);
   }
   .app {
     width: 100%;
     max-width: 460px;
     height: 100vh;
     height: 100dvh;
     padding: max(10px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right))
       max(9px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
     gap: clamp(7px, 1.45dvh, 11px);
   }
   .game-scroll {
     border-radius: clamp(20px, 5.5vw, 25px);
   }
   .game {
     padding: clamp(8px, 2.4vw, 11px) clamp(6px, 2.15vw, 10px) clamp(7px, 2vw, 9px);
   }
   .draw-row {
     gap: clamp(8px, 2.4vw, 11px);
     padding: clamp(7px, 2vw, 9px) clamp(7px, 2vw, 9px);
     margin-bottom: clamp(11px, 1.8dvh, 15px);
     border-radius: clamp(17px, 4.7vw, 20px);
   }
   .draw-label {
     font-size: clamp(8px, 2.25vw, 9px);
   }
   .category-row {
     padding-bottom: clamp(11px, 1.7dvh, 14px);
     margin-bottom: clamp(10px, 1.6dvh, 13px);
   }
   .card {
     font-size: clamp(13px, 3.55vw, 14px);
     padding: clamp(7px, 2.2vw, 9px) clamp(5px, 1.5vw, 6px);
   }
   .card.category {
     gap: clamp(6px, 1.7vw, 8px);
   }
   .card.category .name {
     min-height: clamp(18px, 5vw, 21px);
     font-size: clamp(11px, 3.1vw, 13px);
     padding: 3px 2px;
   }
   .card.category .count {
     font-size: clamp(10.5px, 2.8vw, 11.5px);
     line-height: clamp(19px, 5.2vw, 21px);
     height: clamp(19px, 5.2vw, 21px);
     min-width: clamp(35px, 9.8vw, 39px);
   }
   .card.face-down::before {
     inset: clamp(6px, 1.8vw, 8px);
   }
   .card.face-down::after {
     width: clamp(29px, 8vw, 34px);
     height: clamp(29px, 8vw, 34px);
     font-size: clamp(14px, 3.8vw, 16px);
   }
   .pile-count,
   .stock-count {
     right: 4px;
     bottom: 4px;
     min-width: clamp(21px, 6vw, 24px);
     height: clamp(21px, 6vw, 24px);
     font-size: clamp(9px, 2.6vw, 10px);
   }
   .controls {
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: clamp(5px, 1.4vw, 7px);
     padding: clamp(4px, 1.2vw, 6px);
     border-radius: clamp(17px, 4.7vw, 20px);
   }
   .controls button {
     min-height: clamp(48px, 6.3dvh, 56px);
     border-radius: clamp(13px, 3.8vw, 16px);
     font-size: clamp(10px, 2.85vw, 11.5px);
     padding: 0 clamp(3px, 1vw, 6px);
     line-height: 1.05;
   }
   .top {
     min-height: clamp(42px, 6.2dvh, 48px);
   }
   .brand {
     min-height: 42px;
   }
   .brand-mark {
     width: clamp(34px, 9.6vw, 40px);
     height: clamp(34px, 9.6vw, 40px);
     border-radius: clamp(11px, 3vw, 13px);
     font-size: clamp(18px, 5vw, 21px);
   }
   .brand b {
     font-size: clamp(17px, 4.65vw, 19px);
   }
   .brand small {
     font-size: clamp(8px, 2.15vw, 8.5px);
   }
   .pill {
     height: clamp(30px, 8vw, 33px);
     padding: 0 clamp(7px, 2vw, 9px);
     font-size: clamp(9px, 2.45vw, 10px);
   }
   .pill b {
     font-size: clamp(10px, 2.7vw, 11px);
   }
   .progress-track {
     height: clamp(6px, 1.8vw, 7px);
   }
   .progress-label {
     font-size: clamp(8px, 2.1vw, 9px);
   }
   .toast {
     bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px));
     font-size: clamp(10px, 2.8vw, 11px);
   }
   .hub-shell {
     width: min(460px, 100%);
   }
   .hub-head {
     padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px
       max(14px, env(safe-area-inset-left));
   }
   .hub-scroll {
     padding: 14px max(12px, env(safe-area-inset-right)) 18px
       max(12px, env(safe-area-inset-left));
   }
   .hub-nav {
     padding-left: max(12px, env(safe-area-inset-left));
     padding-right: max(12px, env(safe-area-inset-right));
   }

   /* Compact phones: preserve five playable columns instead of shrinking the whole UI indiscriminately. */
   @media (max-width: 350px) {
     :root {
       --cw: 54px;
       --gap: 4px;
       --radius: 14px;
     }
     .app {
       padding-left: max(5px, env(safe-area-inset-left));
       padding-right: max(5px, env(safe-area-inset-right));
     }
     .game {
       padding-left: 5px;
       padding-right: 5px;
     }
     .brand {
       gap: 6px;
     }
     .brand-mark {
       width: 32px;
       height: 32px;
       font-size: 17px;
     }
     .brand b {
       font-size: 15px;
     }
     .brand small {
       display: none;
     }
     .stats {
       gap: 3px;
     }
     .pill {
       height: 28px;
       padding: 0 6px;
       font-size: 8px;
     }
     .pill b {
       font-size: 9px;
     }
     .controls {
       gap: 4px;
     }
     .controls button {
       font-size: 9.5px;
       padding: 0 2px;
     }
     .draw-label {
       font-size: 7.5px;
       letter-spacing: 0.09em;
     }
   }

   /* Emergency fit for unusually narrow webviews/legacy small phones. */
   @media (max-width: 309px) {
     :root {
       --cw: calc((100vw - 34px) / 5);
       --gap: 3px;
       --radius: 12px;
     }
     .app {
       padding-left: max(4px, env(safe-area-inset-left));
       padding-right: max(4px, env(safe-area-inset-right));
     }
     .game {
       padding-left: 5px;
       padding-right: 5px;
     }
     .stats {
       gap: 2px;
     }
     .pill {
       padding: 0 4px;
     }
     .controls button {
       font-size: 8.5px;
     }
   }

   /* Short screens: cards stay large; only cascade depth and vertical chrome compress. */
   @media (max-height: 740px) {
     .app {
       gap: 6px;
     }
     .game {
       padding-top: 7px;
     }
     .draw-row {
       margin-bottom: 8px;
       padding-top: 6px;
       padding-bottom: 6px;
     }
     .category-row {
       margin-bottom: 7px;
       padding-bottom: 8px;
     }
     .controls button {
       min-height: 44px;
     }
     .hud {
       gap: 6px;
     }
     .top {
       min-height: 38px;
     }
     .progress-wrap {
       gap: 6px;
     }
     .coach {
       top: 92px;
     }
   }
   @media (max-height: 620px) {
     .app {
       gap: 4px;
     }
     .game {
       padding-top: 5px;
       padding-bottom: 5px;
     }
     .draw-row {
       margin-bottom: 6px;
       padding: 5px 6px;
     }
     .category-row {
       margin-bottom: 5px;
       padding-bottom: 6px;
     }
     .controls {
       padding: 3px;
     }
     .controls button {
       min-height: 40px;
       font-size: 9.5px;
     }
     .brand small {
       display: none;
     }
     .progress-label > span:last-child {
       display: none;
     }
   }

   /* Landscape phones use available width while keeping the same card geometry. */
   @media (orientation: landscape) and (max-height: 520px) {
     .app {
       max-width: 600px;
       padding-top: max(5px, env(safe-area-inset-top));
       padding-bottom: max(5px, env(safe-area-inset-bottom));
     }
     .hub-shell {
       width: min(600px, 100%);
     }
     .hud {
       gap: 3px;
     }
     .top {
       min-height: 32px;
     }
     .progress-wrap {
       display: none;
     }
     .brand-mark {
       width: 30px;
       height: 30px;
       font-size: 16px;
     }
     .brand b {
       font-size: 15px;
     }
     .brand small {
       display: none;
     }
     .pill {
       height: 27px;
     }
     .controls button {
       min-height: 38px;
     }
     .draw-row {
       margin-bottom: 5px;
     }
     .category-row {
       margin-bottom: 4px;
       padding-bottom: 5px;
     }
   }

   /* Tablet/desktop: keep a deliberate phone-game canvas instead of stretching into a dashboard. */
   @media (min-width: 700px) {
     .app {
       border-left: 1px solid #ffffff10;
       border-right: 1px solid #ffffff10;
     }
   }

   /* ===== Mobile game scale pass v2 =====
Scale the physical pieces from the ACTUAL number of tableau columns.
Three-column rounds should feel like a card game, not a five-column web grid. */
   :root {
     --cw: 64px;
     --card-ratio: 1.42;
     --ch: calc(var(--cw) * var(--card-ratio));
     --gap: 7px;
   }
   html[data-cols="3"] {
     --cw: clamp(78px, 22vw, 92px);
     --card-ratio: 1.46;
     --gap: clamp(8px, 2.2vw, 10px);
     --radius: clamp(16px, 4vw, 18px);
   }
   html[data-cols="4"] {
     --cw: clamp(72px, 20vw, 84px);
     --card-ratio: 1.38;
     --gap: clamp(6px, 1.8vw, 8px);
     --radius: clamp(14px, 3.6vw, 16px);
   }
   html[data-cols="5"] {
     --cw: clamp(60px, 17.2vw, 72px);
     --card-ratio: 1.32;
     --gap: clamp(4px, 1.15vw, 5px);
     --radius: clamp(13px, 3.2vw, 15px);
   }

   /* More legible, game-like top HUD. */
   .hud {
     gap: clamp(9px, 1.35dvh, 13px);
   }
   .top {
     min-height: clamp(52px, 6.8dvh, 61px);
     gap: clamp(9px, 2.2vw, 12px);
   }
   .brand {
     gap: clamp(9px, 2.4vw, 12px);
   }
   .brand-mark {
     width: clamp(42px, 10.8vw, 48px);
     height: clamp(42px, 10.8vw, 48px);
     border-radius: clamp(13px, 3.5vw, 16px);
     font-size: clamp(21px, 5.5vw, 25px);
     box-shadow:
       0 8px 20px #00000038,
       inset 0 1px #fff9;
   }
   .brand b {
     font-size: clamp(20px, 5.1vw, 23px);
     line-height: 1;
     letter-spacing: -0.035em;
   }
   .brand small {
     margin-top: 4px;
     font-size: clamp(9px, 2.3vw, 10px);
     letter-spacing: 0.115em;
   }
   .stats {
     gap: clamp(5px, 1.35vw, 7px);
   }
   .pill {
     height: clamp(35px, 8.9vw, 40px);
     padding: 0 clamp(9px, 2.35vw, 12px);
     font-size: clamp(10.5px, 2.7vw, 12px);
     border-width: 1px;
   }
   .pill b {
     font-size: clamp(11.5px, 2.95vw, 13px);
   }
   .progress-track {
     height: clamp(7px, 1.9vw, 9px);
   }
   .progress-label {
     font-size: clamp(9px, 2.25vw, 10px);
     font-weight: 800;
   }
   .progress-stars {
     font-size: 1.12em;
   }

   /* Let the play pieces dominate the screen. */
   .game {
     padding: clamp(11px, 2.8vw, 14px) clamp(8px, 2.2vw, 11px) clamp(9px, 2.2vw, 11px);
   }
   .draw-row {
     gap: clamp(9px, 2.4vw, 12px);
     padding: clamp(9px, 2.25vw, 11px);
     margin-bottom: clamp(15px, 2dvh, 19px);
     border-radius: clamp(20px, 5vw, 24px);
   }
   .draw-label {
     font-size: clamp(9.5px, 2.45vw, 11px);
     letter-spacing: 0.11em;
   }
   .category-row {
     padding-bottom: clamp(15px, 1.9dvh, 18px);
     margin-bottom: clamp(14px, 1.8dvh, 17px);
   }
   .card {
     font-size: clamp(14px, 3.6vw, 16px);
     padding: clamp(8px, 2vw, 11px) clamp(5px, 1.45vw, 7px);
     box-shadow:
       0 5px 0 #09092325,
       0 10px 22px #0406174d,
       inset 0 1px #fff,
       inset 0 -12px 20px rgba(34, 38, 58, 0.05);
   }
   .card.category {
     gap: clamp(7px, 1.7vw, 10px);
   }
   .card.category .name {
     min-height: clamp(21px, 5.4vw, 27px);
     font-size: clamp(12px, 3vw, 15px);
     padding: 4px 3px;
     border-radius: 9px;
   }
   .card.category .count {
     font-size: clamp(11px, 2.8vw, 13px);
     line-height: clamp(22px, 5.5vw, 26px);
     height: clamp(22px, 5.5vw, 26px);
     min-width: clamp(39px, 10vw, 46px);
     padding: 0 8px;
   }
   .slot.empty::after,
.slot.drag-vacated::after {
     font-size: clamp(25px, 6.5vw, 32px);
   }
   .waste.empty::after,
.waste.drag-vacated::after {
     font-size: clamp(8.5px, 2.25vw, 10px);
   }
   .stock.empty::after {
     font-size: clamp(27px, 6.8vw, 34px);
   }
   .pile-count,
   .stock-count {
     min-width: clamp(24px, 6.2vw, 29px);
     height: clamp(24px, 6.2vw, 29px);
     font-size: clamp(10px, 2.55vw, 12px);
     border-width: 2px;
   }

   /* Bottom bar: tactile controls with icon + readable label. */
   .controls {
     gap: clamp(7px, 1.7vw, 9px);
     padding: clamp(6px, 1.45vw, 8px);
     border-radius: clamp(21px, 5vw, 25px);
     background: #09091f49;
   }
   .controls button {
     min-height: clamp(60px, 7.6dvh, 68px);
     border-radius: clamp(16px, 4vw, 19px);
     font-size: clamp(12px, 3.05vw, 14px);
     padding: 0 clamp(4px, 1vw, 7px);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 3px;
     line-height: 1;
     font-weight: 900;
     box-shadow:
       inset 0 1px #ffffff16,
       0 4px 10px #05051822;
   }
   .controls .ctrl-icon {
     font-size: clamp(17px, 4.3vw, 20px);
     line-height: 1;
     flex: 0 0 auto;
   }
   .controls #menuButton {
     box-shadow:
       inset 0 1px #ffffff1e,
       0 5px 13px #05051835;
   }
   .controls #hint {
     box-shadow:
       0 7px 17px #06051c3d,
       inset 0 1px #fff;
   }
   .controls .primary {
     box-shadow:
       0 8px 20px #00000038,
       inset 0 1px #ffffff66;
   }
   .toast {
     bottom: max(94px, calc(env(safe-area-inset-bottom) + 84px));
     font-size: clamp(11px, 2.85vw, 12.5px);
     padding: 11px 16px;
   }

   /* Three-column rounds get extra typographic presence. */
   html[data-cols="3"] .card.category .name {
     font-size: clamp(14px, 3.7vw, 17px);
   }
   html[data-cols="3"] .card.category .count {
     font-size: clamp(12px, 3.1vw, 14px);
   }
   html[data-cols="3"] .draw-label {
     font-size: clamp(10px, 2.6vw, 12px);
   }
   html[data-cols="3"] .card.face-down::after {
     width: clamp(36px, 9vw, 42px);
     height: clamp(36px, 9vw, 42px);
     font-size: clamp(17px, 4.2vw, 20px);
     border-radius: 12px;
   }

   /* Small widths: keep hierarchy, only compress what is necessary. */
   @media (max-width: 370px) {
     html[data-cols="3"] {
       --cw: clamp(72px, 22vw, 84px);
       --gap: 7px;
     }
     html[data-cols="4"] {
       --cw: clamp(68px, 20.5vw, 76px);
       --gap: 5px;
     }
     html[data-cols="5"] {
       --cw: clamp(57px, 17.4vw, 63px);
       --gap: 3px;
     }
     .brand-mark {
       width: 38px;
       height: 38px;
       font-size: 20px;
     }
     .brand b {
       font-size: 18px;
     }
     .brand small {
       font-size: 8.5px;
     }
     .pill {
       height: 33px;
       padding: 0 7px;
       font-size: 9.5px;
     }
     .pill b {
       font-size: 10.5px;
     }
     .controls {
       gap: 5px;
       padding: 5px;
     }
     .controls button {
       min-height: 58px;
       font-size: 11.5px;
       gap: 2px;
     }
     .controls .ctrl-icon {
       font-size: 16px;
     }
   }
   @media (max-width: 335px) {
     .brand small {
       display: none;
     }
     .brand b {
       font-size: 17px;
     }
     .brand-mark {
       width: 36px;
       height: 36px;
     }
     .stats {
       gap: 3px;
     }
     .pill {
       padding: 0 5px;
       font-size: 8.8px;
     }
     .pill b {
       font-size: 9.5px;
     }
     .controls button {
       font-size: 10px;
     }
     .controls .ctrl-icon {
       font-size: 13px;
     }
   }

   /* Low-height devices compress spacing/cascade, not the game pieces. */
   @media (max-height: 740px) {
     .hud {
       gap: 6px;
     }
     .top {
       min-height: 44px;
     }
     .draw-row {
       margin-bottom: 9px;
       padding-top: 7px;
       padding-bottom: 7px;
     }
     .category-row {
       margin-bottom: 8px;
       padding-bottom: 9px;
     }
     .controls button {
       min-height: 52px;
     }
   }
   @media (max-height: 620px) {
     .top {
       min-height: 38px;
     }
     .brand-mark {
       width: 34px;
       height: 34px;
     }
     .brand b {
       font-size: 17px;
     }
     .brand small {
       display: none;
     }
     .pill {
       height: 29px;
     }
     .controls button {
       min-height: 45px;
       font-size: 10px;
     }
     .controls .ctrl-icon {
       font-size: 13px;
     }
   }

   /* ===== Physical card interaction pass =====
Every lower card exposes one title-height strip. Open and closed cards use
the same global --stack-step value. */
   /* Every card below the front card exposes only one title-height strip. */
   .card.open-under {
     padding-bottom: 0;
     overflow: hidden;
   }
   .card.open-under:not(.category) {
     align-items: flex-start;
     justify-content: center;
     padding: 5px 3px 0;
     line-height: 1;
     white-space: nowrap;
   }
   .card.category.open-under {
     align-items: stretch;
     justify-content: flex-start;
     gap: 0;
     padding: 4px 3px 0;
   }
   .card.category.open-under .name {
     flex: 0 0 auto;
     min-height: 0;
     height: auto;
     padding: 2px 2px;
     line-height: 1;
     white-space: nowrap;
   }
   .card.category.open-under .count {
     display: none;
   }

   /* Drag preview is a real visual clone of the picked stack. Its grip point is
maintained in JS, so the card never jumps under the finger. */
   .drag-stack {
     position: fixed;
     z-index: 9999;
     pointer-events: none;
     transform: rotate(var(--drag-tilt, 0deg));
     filter: drop-shadow(0 18px 20px #0008);
     will-change: left, top;
     overflow: visible;
   }
   .drag-stack > .card {
     position: absolute !important;
     margin: 0 !important;
     transition: none !important;
     transform: none !important;
     pointer-events: none !important;
   }
   .drag-stack .drag-count {
     display: none;
   }

   /* Deal/reveal micro-interactions. */
   .card.deal-card {
     will-change: transform, opacity, filter;
   }
   .card.reveal-card {
     transform-origin: center center;
     backface-visibility: hidden;
     will-change: transform, opacity;
   }
   .stock.deal-pulse .card {
     animation: deckPulse 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
   @keyframes deckPulse {
     0%,
     100% {
       transform: translateY(0) scale(1);
     }
     45% {
       transform: translateY(-4px) scale(1.035);
     }
   }

   
   
   @media (max-height: 620px) {
     .card.open-under:not(.category) {
       padding-top: 4px;
     }
     .card.category.open-under {
       padding-top: 3px;
     }
   }

/* Dynamic vertical fit: only active when JS detects that a real stack would overflow. */
html[data-stack-fit="tight"] .card.open-under:not(.category) { padding-top: 2px; line-height: .95; }
html[data-stack-fit="tight"] .card.category.open-under { padding-top: 2px; }
html[data-stack-fit="tight"] .card.category.open-under .name { padding-top: 1px; padding-bottom: 1px; }


/* Hub v2 narrow-screen refinements. */
@media (max-width: 370px) {
  .hub-tabs { gap:3px; }
  .hub-tabs button { min-height:45px; border-radius:11px; }
  .hub-tabs button span { font-size:6.5px; }
  .mode-grid { gap:6px; }
  .mode-card { min-height:80px; padding:9px; }
  .profile-hero { grid-template-columns:42px minmax(0,1fr) auto; padding:10px; gap:8px; }
  .profile-avatar { width:42px; height:42px; }
  .effect-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .encyclopedia-meta { grid-template-columns:1fr; }
  .save-tools { grid-template-columns:1fr; }
}


/* Bottom game-hub navigation. */
@media (max-width: 370px) {
  .hub-nav { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .hub-tabs { gap:4px; }
  .hub-tabs button { min-height:50px; border-radius:13px; }
  .hub-tabs button i { font-size:15px; }
  .hub-tabs button span { font-size:7px; }
}
@media (max-height: 700px) {
  .hub-tabs button { min-height:48px; }
  .hub-nav { padding-top:6px; }
}

/* ===== Retention UI responsive ===== */
@media (max-width: 370px) {
  .smart-action { grid-template-columns:40px minmax(0,1fr); }
  .smart-icon { width:40px; height:40px; }
  .smart-action button { grid-column:1/-1; width:100%; }
  .profile-hero { grid-template-columns:42px minmax(0,1fr); }
  .profile-meta { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; }
  .daily-days { gap:3px; }
  .daily-day { padding-inline:1px; }
  .daily-day i { width:18px; height:18px; }
  .frame-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .duel-players { grid-template-columns:1fr; }
}
@media (max-height: 690px) {
  .bonus-objective-chip { min-height:20px; padding-top:2px; padding-bottom:2px; }
  .bonus-objective-chip small { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .splash::before,.splash-mark,.splash-mini-card,.duel-result-icon { animation:none !important; }
}

/* Picture association cards stay readable in the exposed cascade strip. */
.card.visual-association-card.open-under {
  padding:2px 4px;
  align-items:flex-start;
  justify-content:center;
}
.card.visual-association-card.open-under .visual-association-emoji {
  width:100%;
  height:var(--stack-step);
  font-size:clamp(16px,calc(var(--stack-step) * .72),21px);
  line-height:var(--stack-step);
}
@media (max-width:370px) {
  .association-collection-card { padding:8px; }
  .association-collection-preview i { width:33px; height:42px; font-size:18px; }
}

/* Profile editor / accordion refinements. */
@media (max-width: 370px) {
  .profile-hero { grid-template-columns:42px minmax(0,1fr) auto; }
  .profile-meta { grid-column:auto; display:block; text-align:right; }
  .profile-meta strong { font-size:8px; }
  .profile-meta span { font-size:7px; }
  .profile-editor-card { border-radius:20px; }
  .profile-editor-content { padding:15px 12px 12px; }
  .profile-editor-head { grid-template-columns:46px minmax(0,1fr); }
  .profile-editor-avatar-preview { width:46px; height:46px; border-radius:14px; }
  .title-pill-grid { grid-template-columns:1fr 1fr; gap:6px; }
  .title-pill { min-height:45px; padding:6px 7px; grid-template-columns:27px minmax(0,1fr); gap:6px; }
  .title-pill i { width:27px; height:27px; }
  .title-pill span { font-size:7.8px; }
  .collapsible-section > summary { min-height:50px; padding:10px 11px; }
  .collapsible-content { padding:0 11px 11px; }
}

@media (max-width:370px) {
  .visual-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .picture-collection { gap:4px; }
  .picture-collection span { font-size:16px; border-radius:8px; }
  .card-source-options button span { font-size:7px; }
}

/* Product polish v8 responsive */
@media (max-width: 370px) {
  .onboarding-card,.weekly-digest-card { padding:16px; border-radius:23px; }
  .onboarding-step h2,.weekly-digest-card h2 { font-size:22px; }
  .onboarding-avatar-page { grid-template-rows:repeat(2,46px); }
  .onboarding-avatar { width:46px; height:46px; font-size:20px; }
  .onboarding-demo span,.onboarding-demo b { width:62px; height:88px; }
  .weekly-digest-grid { grid-template-columns:repeat(2,1fr); }
  .profile-showcase-grid { grid-template-columns:1fr 1fr; }
  .featured-picker { grid-template-columns:1fr; }
}
@media (max-height: 650px) {
  .onboarding-card,.weekly-digest-card { max-height:96dvh; padding:14px; }
  .onboarding-logo { margin-bottom:10px; }
  .onboarding-step p { margin-bottom:10px; }
  .onboarding-demo { min-height:110px; padding:8px 4px; transform:scale(.88); transform-origin:center; }
  .onboarding-dots { margin:10px 0; }
}

/* Stable card geometry: width is fixed by column count; vertical fit compresses smoothly. */
.slot, .stock, .waste, .column, .card {
  transition-property: width, height, min-height, border-radius, filter, box-shadow, opacity, transform;
  transition-duration: .2s, .2s, .2s, .2s, .14s, .14s, .14s, .14s;
  transition-timing-function: cubic-bezier(.2,.8,.2,1);
}
.drag-stack .card, .drag-stack .drag-main { transition: none !important; }

/* Persistent profile header sizing. */
@media (max-width: 420px) {
  .game-profile-button { max-width: 44vw; grid-template-columns: 35px minmax(0,1fr); gap:7px; }
  .game-profile-button .global-profile-avatar { width:35px; height:35px; border-radius:11px; font-size:19px; }
  .game-profile-button .global-profile-copy b { font-size:12px; }
  .game-profile-button .global-profile-copy small { font-size:7.5px; }
}
@media (max-width: 350px) {
  .game-profile-button { max-width: 41vw; grid-template-columns:32px minmax(0,1fr); gap:6px; }
  .game-profile-button .global-profile-avatar { width:32px; height:32px; font-size:17px; }
  .game-profile-button .global-profile-copy b { font-size:11px; }
  .game-profile-button .global-profile-copy small { font-size:7px; }
}

/* ===== Readability pass v15 ===== */
@media (max-width: 420px) {
  .hub-scroll { padding-inline: 11px; }
  .hub-section { padding: 12px; }
  .hub-section h3 { font-size: 15px; }
  .hub-section small, .hub-subhead small { font-size: 9px; }
  .hub-tabs button span { font-size: 8px; }
  .hub-tabs button i { font-size: 17px; }
  .global-profile-copy b { font-size: 15px; }
  .hub-profile-button .global-profile-copy b { font-size: 15px; }
  .hub-profile-button .global-profile-copy small { font-size: 9px; }
  .game-profile-button .global-profile-copy b { font-size: 12.5px; }
  .game-profile-button .global-profile-copy small { font-size: 8px; }
  .mode-card b { font-size: 12px; }
  .mode-card span { font-size: 9px; }
  .mode-card em { font-size: 8px; }
  .weekly-copy b { font-size: 13px; }
  .weekly-copy span { font-size: 9.5px; }
  .weekly-copy small { font-size: 8px; }
  .weekly-copy em { font-size: 9px; }
  .achievement b { font-size: 11px; }
  .achievement p { font-size: 9px; }
  .achievement-copy small { font-size: 8px; }
  .stat-box span { font-size: 8.5px; }
  .profile-editor-identity { grid-template-columns: 1fr; }
  .profile-compact-section .title-pill-grid { grid-template-columns: 1fr 1fr; }
  .login-reward-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .login-reward b { font-size: 8.5px; }
}
@media (max-width: 370px) {
  .hub-tabs button span { font-size: 7.5px; }
  .global-profile-copy small { font-size: 8.5px; }
  .hub-profile-button .global-profile-copy small { font-size: 8.5px; }
  .mode-grid { grid-template-columns: 1fr 1fr; }
  .mode-card { min-height: 98px; padding: 10px; }
  .weekly-card { grid-template-columns: 48px minmax(0,1fr); padding: 12px; }
  .weekly-icon { width: 48px; height: 48px; font-size: 16px; }
  .rank-roadmap-item { grid-template-columns: 30px 48px minmax(0,1fr); gap:7px; }
  .login-reward-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Six-item bottom navigation. */
@media (max-width: 420px) {
  .hub-tabs { gap:4px; }
  .hub-tabs button { min-height:53px; padding-inline:1px; }
  .hub-tabs button i { font-size:17px; }
  .hub-tabs button span { font-size:7.8px; letter-spacing:-.01em; }
}
@media (max-width: 350px) {
  .hub-tabs button span { font-size:7.2px; }
}


/* v16: fixed card geometry. No runtime height/width morphing during a round. */
html[data-cols="3"] { --cw:clamp(78px,22vw,90px); --card-ratio:1.34; --stack-step:21px; }
html[data-cols="4"] { --cw:clamp(70px,20vw,80px); --card-ratio:1.30; --stack-step:19px; }
html[data-cols="5"] { --cw:clamp(59px,17.1vw,68px); --card-ratio:1.26; --stack-step:17px; }
.slot,.stock,.waste,.column,.card { transition-property:filter,box-shadow,opacity,transform !important; transition-duration:.14s !important; }
@media (max-width:370px) {
  html[data-cols="3"] { --cw:76px; --card-ratio:1.32; --stack-step:19px; }
  html[data-cols="4"] { --cw:68px; --card-ratio:1.28; --stack-step:18px; }
  html[data-cols="5"] { --cw:57px; --card-ratio:1.24; --stack-step:16px; }
}

/* v16.1: one stable card size for every 3/4/5-column round.
   Geometry depends only on viewport width, never on column count or stack height. */
:root,
html[data-cols="3"],
html[data-cols="4"],
html[data-cols="5"] {
  --cw: min(68px, calc((100vw - 52px) / 5));
  --card-ratio: 1.22;
  --ch: calc(var(--cw) * var(--card-ratio));
  --stack-step: 17px;
  --gap: 4px;
  --radius: 13px;
}
@media (min-width: 430px) {
  :root,
  html[data-cols="3"],
  html[data-cols="4"],
  html[data-cols="5"] {
    --cw: 68px;
    --ch: 83px;
    --stack-step: 17px;
    --gap: 5px;
  }
}
@media (max-width: 340px) {
  :root,
  html[data-cols="3"],
  html[data-cols="4"],
  html[data-cols="5"] {
    --cw: calc((100vw - 40px) / 5);
    --ch: calc(var(--cw) * 1.2);
    --stack-step: 15px;
    --gap: 3px;
  }
}

@media (max-width: 480px) {
  .hub-tabs { grid-template-columns: repeat(6,minmax(0,1fr)); gap:3px; }
  .hub-tabs button { min-height:54px; padding-inline:2px; }
  .hub-tabs button i { font-size:16px; }
  .hub-tabs button span { font-size:7.2px; }
  .picture-mode-card { padding:16px 14px; border-radius:21px; }
}

@media (max-width: 520px) {
  .hub-nav { padding-left:max(4px,env(safe-area-inset-left)) !important; padding-right:max(4px,env(safe-area-inset-right)) !important; }
  .hub-tabs { gap:3px !important; }
}

/* ===== v31 gameplay/content pass ===== */
/* During a solitaire round the board gets the full top width; profile stays in the hub. */
.app #gameProfileButton { display:none !important; }
.app .top { justify-content:flex-end; }
.app .stats { width:100%; justify-content:space-between; }

/* Three-line profile copy with rank information pinned to the right. */
.global-profile-button { grid-template-columns:auto minmax(0,1fr) auto !important; column-gap:9px; }
.global-profile-copy { display:grid; grid-template-rows:repeat(3,minmax(0,auto)); align-content:center; }
.global-profile-copy b,.global-profile-copy small { margin:0 !important; line-height:1.18; }
.global-profile-copy small + small { margin-top:2px !important; }
.global-profile-rank { align-self:center; justify-self:end; max-width:105px; color:#d8d4f2; font-size:9px; font-weight:900; line-height:1.15; text-align:right; }
.hub-profile-button { grid-template-columns:42px minmax(0,1fr) auto !important; }
.hub-profile-xp { left:52px; }

/* Longer adaptive cards: width follows viewport, height follows both width and available height. */
:root,
html[data-cols="3"],html[data-cols="4"],html[data-cols="5"] {
  --cw: clamp(58px, min(17.2vw, 8.6dvh), 72px);
  --card-ratio: clamp(1.34, calc(1.25 + 0.12 * (100dvh / 100vw)), 1.48);
  --ch: calc(var(--cw) * var(--card-ratio));
}
@media (min-width:430px) {
  :root,html[data-cols="3"],html[data-cols="4"],html[data-cols="5"] { --cw:clamp(66px,8.2dvh,74px); }
}
@media (max-height:650px) {
  :root,html[data-cols="3"],html[data-cols="4"],html[data-cols="5"] { --cw:clamp(54px,7.9dvh,64px); --card-ratio:1.34; }
}
.rule-metric { white-space:nowrap; }

/* Card backs are selected cosmetics, never theme-dependent. These final rules intentionally
   outrank older theme selectors so switching themes cannot silently change a chosen back. */
body { --selected-back:linear-gradient(145deg,#4730a8,#6d50e5 52%,#263e9b); --selected-back-border:#b9a9ff; --selected-back-mark:"✦"; }
body[data-card-back="classic"]{--selected-back:linear-gradient(145deg,#4730a8,#6d50e5 52%,#263e9b);--selected-back-border:#b9a9ff;--selected-back-mark:"✦"}
body[data-card-back="prism"]{--selected-back:conic-gradient(from 40deg,#7c5cff,#43d9ff,#ff69b4,#ffd76a,#7c5cff);--selected-back-border:#fff;--selected-back-mark:"◇"}
body[data-card-back="constellation"]{--selected-back:radial-gradient(circle at 25% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 72% 35%,#fff 0 1px,transparent 2px),linear-gradient(145deg,#081a45,#203a78);--selected-back-border:#89c8ff;--selected-back-mark:"✧"}
body[data-card-back="trophy"]{--selected-back:linear-gradient(145deg,#6a4a12,#c89224 50%,#5c370c);--selected-back-border:#ffe18a;--selected-back-mark:"🏆"}
body[data-card-back="mosaic"]{--selected-back:repeating-linear-gradient(45deg,#3842a7 0 9px,#784bc2 9px 18px,#2e8cc6 18px 27px);--selected-back-border:#c5d8ff;--selected-back-mark:"◆"}
body[data-card-back="velvet"]{--selected-back:linear-gradient(145deg,#3f153f,#742c68 52%,#2a102f);--selected-back-border:#e8a9df;--selected-back-mark:"❖"}
body[data-card-back="glacier"]{--selected-back:linear-gradient(150deg,#d9fbff,#67b9d9 48%,#2a709d);--selected-back-border:#efffff;--selected-back-mark:"❄"}
body[data-card-back="lotus"]{--selected-back:linear-gradient(145deg,#173c2e,#3b7650 52%,#163328);--selected-back-border:#b8e6a0;--selected-back-mark:"🎋"}
body[data-card-back="duelist"]{--selected-back:linear-gradient(135deg,#141a31,#3d4a70 52%,#70582d);--selected-back-border:#e5c778;--selected-back-mark:"⚔"}
body[data-card-back="anniversary"]{--selected-back:radial-gradient(circle at 50% 30%,#fff5a350,transparent 28%),linear-gradient(145deg,#153c56,#3a5c8b 54%,#6d3c73);--selected-back-border:#ffe69a;--selected-back-mark:"🏅"}
body[data-card-back="crown"]{--selected-back:linear-gradient(145deg,#30235f,#7553b8 55%,#9a6a20);--selected-back-border:#ffe59d;--selected-back-mark:"♛"}
body[data-card-back="ember"]{--selected-back:radial-gradient(circle at 50% 80%,#ffbf4c66,transparent 30%),linear-gradient(145deg,#40100d,#9c2f1c 55%,#e56a1e);--selected-back-border:#ffc06f;--selected-back-mark:"🔥"}
body[data-card-back="master"]{--selected-back:linear-gradient(145deg,#0c3040,#176f76 52%,#1da69c);--selected-back-border:#8dfff0;--selected-back-mark:"×10"}
body[data-card-back="atlas"]{--selected-back:linear-gradient(145deg,#173b55,#2d7180 52%,#6d7a43);--selected-back-border:#bfe4b8;--selected-back-mark:"◎"}
body[data-card-back="chronicle"]{--selected-back:linear-gradient(145deg,#392744,#78526e 52%,#b78659);--selected-back-border:#edd2b0;--selected-back-mark:"☀"}
body[data-card-back="phoenix"]{--selected-back:radial-gradient(circle at 50% 70%,#ffd55d66,transparent 30%),linear-gradient(145deg,#41102b,#b62d42 50%,#e88520);--selected-back-border:#ffd07a;--selected-back-mark:"◆"}
body[data-card-back="legend"]{--selected-back:linear-gradient(145deg,#1a1738,#5d408e 48%,#a1772c);--selected-back-border:#f3d98d;--selected-back-mark:"✦"}
body[data-card-back="obsidian"]{--selected-back:linear-gradient(145deg,#090b14,#232a38 48%,#080a0f);--selected-back-border:#718096;--selected-back-mark:"◆"}
body[data-card-back="midnight-grid"]{--selected-back:linear-gradient(#68a7ff20 1px,transparent 1px),linear-gradient(90deg,#68a7ff20 1px,transparent 1px),linear-gradient(145deg,#071329,#142850);--selected-back-border:#6bb6ff;--selected-back-mark:"▦"}
body[data-card-back="sunrise"]{--selected-back:radial-gradient(circle at 50% 105%,#fff2a9 0 20%,#ffad5d 21% 38%,transparent 39%),linear-gradient(180deg,#7658b8,#db7096 58%,#f2a25c);--selected-back-border:#ffe1a6;--selected-back-mark:"☀"}
body[data-card-back="lion"]{--selected-back:radial-gradient(circle at 50% 45%,#c98d2f55,transparent 33%),linear-gradient(145deg,#4b2d13,#9c681f 55%,#4a2b10);--selected-back-border:#f0c66e;--selected-back-mark:"🦁"}
body[data-card-back="parrot"]{--selected-back:linear-gradient(145deg,#0b574c,#1c9671 48%,#ca404d);--selected-back-border:#e8f28a;--selected-back-mark:"🦜"}
body[data-card-back="grand-trophy"]{--selected-back:radial-gradient(circle at 50% 30%,#fff5a36b,transparent 30%),linear-gradient(145deg,#38245f,#6b4c9c 48%,#b27a22);--selected-back-border:#ffe783;--selected-back-mark:"🏆"}
body[data-card-back] .card.face-down {
  background:var(--selected-back) !important;
  border-color:var(--selected-back-border) !important;
  box-shadow:inset 0 1px #fff5,0 5px 14px #0004 !important;
}
body[data-card-back] .card.face-down::before { background:none !important; border:1px solid color-mix(in srgb,var(--selected-back-border) 42%,transparent) !important; }
body[data-card-back] .card.face-down::after { content:var(--selected-back-mark) !important; display:grid !important; place-items:center; width:auto !important; height:auto !important; min-width:30px; min-height:30px; transform:none !important; border:0 !important; color:#fff !important; background:transparent !important; font-size:clamp(15px,4vw,22px) !important; font-weight:950; text-shadow:0 2px 8px #0008; }
.cardback-preview { overflow:hidden; }
.cardback-preview.back-midnight-grid{background:linear-gradient(#68a7ff25 1px,transparent 1px),linear-gradient(90deg,#68a7ff25 1px,transparent 1px),linear-gradient(145deg,#071329,#142850);border-color:#6bb6ff}.cardback-preview.back-midnight-grid::after{content:"▦"}
.cardback-preview.back-sunrise{background:linear-gradient(180deg,#7658b8,#db7096 58%,#f2a25c);border-color:#ffe1a6}.cardback-preview.back-sunrise::after{content:"☀"}
.cardback-preview.back-lion{background:linear-gradient(145deg,#4b2d13,#9c681f,#4a2b10);border-color:#f0c66e}.cardback-preview.back-lion::after{content:"🦁"}
.cardback-preview.back-parrot{background:linear-gradient(145deg,#0b574c,#1c9671,#ca404d);border-color:#e8f28a}.cardback-preview.back-parrot::after{content:"🦜"}
.cardback-preview.back-grand-trophy{background:linear-gradient(145deg,#38245f,#6b4c9c,#b27a22);border-color:#ffe783}.cardback-preview.back-grand-trophy::after{content:"🏆"}
.cardback-preview.back-midnight-grid::after,.cardback-preview.back-sunrise::after,.cardback-preview.back-lion::after,.cardback-preview.back-parrot::after,.cardback-preview.back-grand-trophy::after{position:relative;z-index:2;font-size:18px}

/* Cosmetic shelves show two rows until explicitly expanded. */
.cosmetic-section .cosmetic-clip { overflow:hidden; max-height:205px; transition:max-height .24s ease; }
.cosmetic-section.expanded .cosmetic-clip { max-height:1400px; }
.cosmetic-expand { width:100%; margin-top:9px; min-height:38px; border:1px solid #ffffff14; border-radius:12px; background:#ffffff08; color:#c9c6e8; font-size:10px; font-weight:900; }
.sound-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.sound-tile { min-height:86px; display:grid; place-items:center; gap:3px; padding:8px; border:1px solid #ffffff14; border-radius:14px; background:#ffffff08; color:#fff; }
.sound-tile i{font-size:22px;font-style:normal}.sound-tile b{font-size:10px}.sound-tile span{font-size:8px;color:#aaa6cf}.sound-tile.selected{outline:2px solid #fff;outline-offset:-3px}.sound-tile.locked{opacity:.45}

/* Daily quests and duel controls. */
.daily-quest-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.daily-quest { padding:9px; border:1px solid #ffffff12; border-radius:13px; background:#ffffff07; display:grid; gap:5px; }
.daily-quest b{font-size:10px}.daily-quest span{font-size:8px;color:#aaa6cf}.daily-quest em{height:4px;border-radius:99px;background:#ffffff10;overflow:hidden}.daily-quest em i{display:block;height:100%;background:linear-gradient(90deg,#6bd9ef,#8b6aff)}.daily-quest.done{border-color:#74e5a950;background:#5be39b0d}
.duel-medal-bar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.duel-medal-bar span { padding:6px 8px; border-radius:10px; background:#ffffff09; border:1px solid #ffffff10; font-size:9px; }
.duel-create-controls { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.duel-create-controls select,.duel-create-controls button { min-width:0; min-height:42px; border:1px solid #ffffff16; border-radius:12px; background:#171936; color:#fff; padding:8px; font:inherit; font-size:9px; font-weight:850; }
.duel-create-controls button { grid-column:1/-1; background:linear-gradient(135deg,#7159f5,#417ddf); }
.mode-nearest { display:block; margin-top:6px; color:#9bdff0 !important; font-size:7.5px !important; line-height:1.25; }

/* Four additional victory cosmetics. */
.effect-fireworks i,.spark-fireworks { border-radius:50%; box-shadow:0 0 12px currentColor; }
.effect-ribbons i,.spark-ribbons { width:16px;height:4px;border-radius:99px; }
.effect-stars i::after,.spark-stars::after { content:"★"; color:#fff4a8; font-size:13px; }
.effect-crown-rain i::after,.spark-crown-rain::after { content:"♛"; color:#ffe27d; font-size:15px; }
.spark-ribbons { background:linear-gradient(90deg,#ff8db8,#8fe9ff) !important; }
.spark-stars,.spark-crown-rain { width:16px !important;height:16px !important;background:transparent !important;overflow:visible; }

/* Volumetric result stars. */
.win-star-symbol { display:inline-block; color:#ffd95a; text-shadow:0 1px 0 #fff2a8,0 2px 0 #d49a25,0 4px 7px #0007,0 0 12px #ffd65b55; filter:drop-shadow(0 3px 2px #0005); transform:perspective(100px) rotateX(-8deg); }
.win-star-item.missed .win-star-symbol { color:#77728a; text-shadow:0 1px 0 #aaa5bd,0 3px 5px #0005; opacity:.48; }

@media (max-width:370px){.daily-quest-grid{grid-template-columns:1fr}.global-profile-rank{max-width:82px;font-size:8px}}
/* Exactly two visible cosmetic rows while collapsed (tile heights differ by shelf). */
.cosmetic-section[data-cosmetic-section="themes"]:not(.expanded) .cosmetic-clip{max-height:141px}
.cosmetic-section[data-cosmetic-section="backs"]:not(.expanded) .cosmetic-clip{max-height:219px}
.cosmetic-section[data-cosmetic-section="frames"]:not(.expanded) .cosmetic-clip{max-height:171px}
.cosmetic-section[data-cosmetic-section="effects"]:not(.expanded) .cosmetic-clip{max-height:187px}
.cosmetic-section[data-cosmetic-section="sounds"]:not(.expanded) .cosmetic-clip{max-height:179px}


/* iOS/PWA stability budget: keep the gradients, remove GPU-expensive live blur layers. */
body[data-resource-mode="constrained"] * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body[data-resource-mode="constrained"] .drag-ghost,
body[data-resource-mode="constrained"] .card,
body[data-resource-mode="constrained"] .win-modal-card {
  will-change: auto !important;
}
body[data-resource-mode="constrained"] .card {
  transition-property: transform, opacity !important;
}

/* ===== v21.3 gameplay HUD cleanup (final cascade) ===== */
.hud [hidden] { display: none !important; }
.app .hud { gap: 6px; }
.app .top { min-height: 34px; }
.app .stats { width: 100%; justify-content: space-between; align-items: center; gap: 8px; overflow: hidden; }
.app .stats .pill { height: 34px; padding: 0 12px; font-size: 12px; flex: 0 0 auto; }
.app .stats .pill b { font-size: 13px; }
.app .progress-wrap { grid-template-columns: minmax(72px, 1fr) auto; gap: 8px; padding-inline: 1px; }
.app .progress-label { justify-content: flex-end; flex-wrap: nowrap; max-width: min(66vw, 360px); }
.app .progress-label:not(:has(> :not([hidden]))) { display: none; }
.app .special-badge,
.app .rule-metric,
.app .combo-xp-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .rule-metric { max-width: min(34vw, 180px); color: #d9d5ff; background: #ffffff0a; border: 1px solid #ffffff14; font-weight: 800; }
.app .bonus-objective-wrap { justify-content: flex-start; }
.app .bonus-objective-chip { min-height: 30px; padding: 6px 10px; font-size: 11px; white-space: normal; line-height: 1.2; }
.app .bonus-objective-chip small { display: inline; font-size: 10px; line-height: 1.2; }

@media (max-width: 390px) {
  .app .stats { gap: 4px; }
  .app .stats .pill { height: 32px; padding-inline: 9px; font-size: 11px; }
  .app .stats .pill b { font-size: 12px; }
  .app .progress-label { max-width: 70vw; }
  .app .special-badge, .app .rule-metric, .app .combo-xp-status { font-size: 9px; }
}