.expansion-game .game-topbar p, .solitaire-game .game-topbar p { white-space: normal; }
.expansion-game { align-content: start; }
body:has(.system-banner:not([hidden])) :is(.expansion-game, .solitaire-game) { padding-top: 64px; }
.exp-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 14px 8px; }
.exp-controls .action-button { min-height: 44px; }
.exp-help, .exp-outward, .exp-last-trick { margin: 12px 8px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #0b1c30; line-height: 1.65; }
.exp-outward summary, .exp-last-trick summary { cursor: pointer; min-height: 36px; }
.exp-choice { display: flex; align-items: center; gap: 8px; }
.exp-choice select { min-height: 44px; min-width: 80px; }
.exp-status { text-align: center; padding: 8px; font-size: .82rem; line-height: 1.6; color: #f5eedf; }
.exp-trick { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 10px 0; }
.exp-trick-slot, .exp-fleep-piles > div { display: grid; justify-items: center; gap: 8px; }
.exp-trick-slot small { max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-trick .playing-card, .exp-fleep-piles .playing-card { position: relative; inset: auto; display: block; width: 76px; height: 108px; transform: none; }
.exp-empty-card { display: grid; place-items: center; width: 76px; height: 108px; border: 1px dashed #9db3a5; border-radius: 9px; color: #c4d0ca; }
.exp-fleep-piles { display: flex; justify-content: center; gap: 36px; padding: 16px; }
.exp-scores { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px; }
.exp-announcement, .sol-win { text-align: center; color: var(--mint); font-size: 1.15rem; padding: 12px; }
.exp-color-choices { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 8px; }
.exp-color-choices button { border-color: var(--juan-face); }
.exp-color-choices button[aria-pressed="true"] { outline: 3px solid var(--mint); }
.exp-color-choices button[data-color="blaze"] { border-color: #ef4d54; }
.exp-color-choices button[data-color="tide"] { border-color: #2d7dd2; }
.exp-color-choices button[data-color="grove"] { border-color: #43b66b; }
.exp-color-choices button[data-color="spark"] { border-color: #f2bf3d; }
.exp-color-choices button[data-color="orchid"] { border-color: #cb4086; }
.exp-color-choices button[data-color="lagoon"] { border-color: #188d89; }
.exp-color-choices button[data-color="ember"] { border-color: #de742c; }
.exp-color-choices button[data-color="dusk"] { border-color: #8353c1; }
.exp-outward-cards { display: flex; gap: 12px; overflow-x: auto; padding: 12px 0; }
.exp-outward-cards > div { flex: 0 0 76px; }
.exp-outward-cards .playing-card { position: relative; display: block; width: 76px; height: 108px; transform: none; }
.exp-outward-cards small { display: block; font-size: .7rem; line-height: 1.3; padding-top: 8px; }
.juan-orchid { --juan-face: #cb4086; --juan-deep: #6a2046; }
.juan-lagoon { --juan-face: #188d89; --juan-deep: #074b54; }
.juan-ember { --juan-face: #de742c; --juan-deep: #73351e; }
.juan-dusk { --juan-face: #8353c1; --juan-deep: #3d2462; }
.juan-card.fleep-dark-card { border-color: #10111e; box-shadow: 0 0 0 2px #d2bcf2, 5px 6px 0 #03050a; }
.fleep-dark-card .juan-card-ink { background: repeating-linear-gradient(135deg, transparent 0 18px, #08091838 18px 23px), radial-gradient(ellipse at 50% 50%, transparent 20%, #0505148c 90%), var(--juan-face); }
.fleep-dark-card .juan-card-ink::after { content: ""; position: absolute; inset: 26% 15%; border: 2px solid #ffffff40; transform: rotate(45deg); border-radius: 8px; }
.fleep-dark-card .juan-wild-tiles i:nth-child(1) { background: #cb4086; }
.fleep-dark-card .juan-wild-tiles i:nth-child(2) { background: #188d89; }
.fleep-dark-card .juan-wild-tiles i:nth-child(3) { background: #de742c; }
.fleep-dark-card .juan-wild-tiles i:nth-child(4) { background: #8353c1; }
.fleep-action { display: grid; place-content: center; gap: 4px; font: 700 2.4rem "Cardcade Pixel", monospace; }
.fleep-action b { position: static; font-size: inherit; }
.fleep-action small { font-size: .65rem; letter-spacing: .05em; }
.fleep-action-fleep b { font-size: 3.5rem; }
.fleep-action-pause-all b { font-size: 1.4rem; }
/* Outward faces in the opponent fan are miniature cards. Scale their ink
   from each card's container without changing the player's hand or piles. */
.opponent-card.juan-card .juan-card-center { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.opponent-card.juan-card .juan-card-center > b { font-size: min(58cqw, 44cqh); line-height: 1; text-shadow: 1px 1px 0 #050d1a29; }
.opponent-card.juan-card .juan-corner { top: 7%; left: 8%; }
.opponent-card.juan-card .juan-corner.bottom { top: auto; left: auto; bottom: 7%; right: 8%; }
.opponent-card.juan-card .juan-corner strong { max-width: none; font-size: min(17cqw, 12cqh); }
.opponent-card.juan-card .fleep-action { gap: 3cqh; font-size: min(30cqw, 24cqh); line-height: 1; text-align: center; }
.opponent-card.juan-card .fleep-action small { font-size: 8cqw; }
.opponent-card.juan-card .fleep-action-fleep b { font-size: 48cqw; }
.opponent-card.juan-card .fleep-action-pause-all b { font-size: 21cqw; }
.opponent-card.juan-card .juan-action-turnabout i { border-top-width: min(3px, 4cqw); }
.opponent-card.juan-card .juan-action-turnabout i::after { right: -3cqw; top: -9cqw; width: 16cqw; height: 16cqw; border-width: min(3px, 4cqw); }
.opponent-card.juan-card .juan-action-pause i { border-width: min(3px, 4cqw); border-radius: 3cqw; }
.fleep-flipped .juan-pile-zone { animation: fleep-turn-in 380ms ease-out; }
@keyframes fleep-turn-in { from { opacity: .25; rotate: y 75deg; } to { opacity: 1; rotate: y 0deg; } }
.reduced-motion .fleep-flipped .exp-fleep-piles, .reduced-motion .fleep-flipped .game-hand { animation: none; }
.solitaire-game { --sol-width: 100%; display: block; width: 100%; min-height: 0; }
.solitaire-game .game-topbar { grid-template-columns: auto 1fr auto; }
.sol-status { padding: 12px; text-align: center; color: var(--muted); }
.sol-board { width: 100%; max-width: 1000px; margin: 0 auto; padding: 22px 14px 40px; border: 3px solid var(--table-border); border-radius: 20px; background: radial-gradient(ellipse at 50% 20%, var(--table-green-light), var(--table-green-deep)); min-height: 480px; }
.sol-top, .sol-tableau { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, 1vw, 14px); align-items: start; }
.sol-top { margin-bottom: 28px; }
.sol-pile { min-width: 0; display: grid; justify-items: center; gap: 10px; }
.sol-pile > small { color: #dceade; font-size: .68rem; text-align: center; }
.sol-card, .sol-stock, .sol-empty, .sol-covered { position: relative; display: block; width: 100%; max-width: var(--sol-width); aspect-ratio: 5 / 7; height: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; flex-shrink: 0; }
.sol-card { touch-action: none; cursor: grab; }
.sol-card > .playing-card, .sol-stock > .card-back, .sol-covered > .card-back, .sol-waste-under > .playing-card { position: absolute; display: block; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; transform: none; border-width: 2px; box-shadow: 1px 2px 3px #0008; border-radius: 5px; pointer-events: none; }
.sol-card .card-corner strong, .sol-waste-under .card-corner strong { font-size: clamp(.8rem, 2.5vw, 1.5rem); }
.sol-card .card-corner i, .sol-waste-under .card-corner i { font-size: clamp(.6rem, 1.8vw, 1rem); }
.sol-card .card-corner, .sol-waste-under .card-corner { top: 4px; left: 4px; gap: 0; }
.sol-card .card-corner.bottom, .sol-waste-under .card-corner.bottom { top: auto; left: auto; bottom: 4px; right: 4px; }
.sol-card .card-center { font-size: clamp(1.2rem, 5vw, 3.2rem); }
.sol-card .card-center svg { width: 75%; }
.sol-column { display: flex; flex-direction: column; align-items: center; min-height: 150px; container-type: inline-size; }
.sol-column > :not(:last-child) { margin-bottom: calc(-140cqw + 30px); }
.sol-column > .sol-covered:not(:last-child) { margin-bottom: calc(-140cqw + 12px); }
.sol-empty { display: grid; place-items: center; border: 1px dashed #d3e1d56b; color: #dceade9c; font: 1.3rem "Cardcade Pixel", monospace; }
.sol-selected { outline: 3px solid #ffe6a0; outline-offset: 2px; z-index: 2; }
.sol-selected ~ .sol-card { outline: 2px solid #ffe6a0; }
.sol-hint { outline: 3px solid #8dffce; outline-offset: 2px; z-index: 3; }
.sol-waste-cards { position: relative; width: 100%; max-width: var(--sol-width); aspect-ratio: 5 / 7; }
.sol-waste-cards .sol-card { position: absolute; inset: 0; }
.sol-waste-under { position: absolute; width: 100%; height: 100%; left: -5px; top: -3px; }
.sol-waste-under:first-child { left: -9px; top: -6px; }
.solitaire-game button:focus-visible, .expansion-game button:focus-visible { outline: 3px solid #8dffce; outline-offset: 3px; }
@media (max-width: 520px) {
  .sol-board { padding: 16px 7px 32px; border-radius: 12px; min-height: 400px; }
  .sol-pile > small { font-size: .55rem; }
  .solitaire-game .game-topbar { gap: 6px; padding: 4px; }
  .solitaire-game .game-topbar h2 { font-size: 1.2rem; }
  .solitaire-game .game-topbar p { font-size: .65rem; }
  .exp-trick { gap: 6px; }
  .exp-trick .playing-card, .exp-trick .exp-empty-card { width: 52px; height: 74px; }
  .exp-trick-slot small { max-width: 52px; font-size: .6rem; }
  .exp-trick .card-corner strong { font-size: .85rem; }
  .exp-trick .card-corner i { font-size: .65rem; }
  .exp-status { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .expansion-game *, .solitaire-game * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* FLEEP uses JUAN's four fixed viewport rows and overlays. Face changes and
   reaction prompts never contribute another row or resize the hand. */
.fleep-game .game-topbar p { white-space: nowrap; }
.fleep-game .hand-heading .selection-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleep-stock { display: grid; place-items: center; width: var(--game-card-width); height: var(--game-card-height); }
.fleep-stock > .playing-card { position: relative; inset: auto; width: 100%; height: 100%; transform: rotateX(var(--table-card-lay, 40deg)); transform-origin: 50% 64%; }
.fleep-game[data-active-color="orchid"] .juan-lane-bar { --juan-active: #cb4086; }
.fleep-game[data-active-color="lagoon"] .juan-lane-bar { --juan-active: #188d89; }
.fleep-game[data-active-color="ember"] .juan-lane-bar { --juan-active: #de742c; }
.fleep-game[data-active-color="dusk"] .juan-lane-bar { --juan-active: #8353c1; }
.juan-color-choice.juan-orchid, .juan-prism-reveal.juan-orchid { --juan-choice: #cb4086; --reveal-color: #cb4086; }
.juan-color-choice.juan-lagoon, .juan-prism-reveal.juan-lagoon { --juan-choice: #188d89; --reveal-color: #188d89; }
.juan-color-choice.juan-ember, .juan-prism-reveal.juan-ember { --juan-choice: #de742c; --reveal-color: #de742c; }
.juan-color-choice.juan-dusk, .juan-prism-reveal.juan-dusk { --juan-choice: #8353c1; --reveal-color: #8353c1; }
.fleep-dialog { position: fixed; inset: 0; display: grid; place-items: center; padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left)); background: #01060ddb; pointer-events: auto; }
.fleep-dialog-card { width: min(620px, 100%); max-height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px; border: 2px solid #f4eddf; border-radius: 16px; background: #09182d; color: #f5eedf; line-height: 1.55; }
.fleep-dialog-card > button:first-child { position: sticky; top: 0; z-index: 2; display: block; margin-left: auto; }
.fleep-dialog-card h2 { font-size: 1.15rem; }
.fleep-dialog-card .exp-outward-cards { max-width: 100%; }
.fleep-draw-history { padding-left: 22px; }
.fleep-draw-history li { margin-block: 8px; }
.fleep-dialog .round-summary { margin: 0; }

.fleep-game .juan-prism-picker { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
@media (orientation: landscape) and (max-height: 500px) {
  .playing-game .fleep-game { grid-template-columns: minmax(160px, 24%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 5px; }
  .fleep-game > :is(.game-topbar, .juan-lane-bar, .game-actions) { grid-column: 1; }
  .fleep-game .game-topbar { grid-row: 1; grid-template-columns: 32px minmax(0, 1fr); gap: 4px; padding: 0; }
  .fleep-game .game-topbar h2 { font-size: .8rem; }
  .fleep-game .game-topbar p { display: none; }
  .fleep-game .game-score { grid-column: 2; min-height: 36px; display: flex; justify-content: center; gap: 10px; }
  .fleep-game .juan-lane-bar { grid-row: 2; flex-wrap: wrap; padding: 6px; }
  .fleep-game .juan-actions { grid-row: 4; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; }
  .fleep-game .juan-actions button { min-height: 44px; padding: 4px; }
  .fleep-game .juan-table-scene { grid-column: 2; grid-row: 1 / 5; --game-card-width: clamp(44px, 14vh, 62px); --game-card-height: calc(var(--game-card-width) * 1.42); --opponent-card-width: 26px; }
  .fleep-game .tabletop-status-area { left: 1%; top: 1%; width: 30%; }
  .fleep-game .game-status { padding: 4px; }
  .fleep-game .game-status .badge { display: none; }
  .fleep-game .juan-table-scene .table-seat-north { top: 0; left: 64%; grid-template-rows: auto 48px; }
  .fleep-game .opponent-hand-wrap, .fleep-game .opponent-hand { height: 48px; }
  .fleep-game .juan-table-scene .center-play-area { top: 29%; left: 30%; width: 48%; height: 27%; }
  .fleep-game .juan-table-scene .physical-hand { left: 0; right: 0; min-height: 136px; padding: 4px 8px 0; }
  .fleep-game .juan-table-scene .local-player-hud { bottom: 138px; }
  .fleep-game .hand-heading { padding-inline: 0; }
  .fleep-game .physical-hand .game-hand { min-height: 0; }
}