/* =====================================================
   SOLITAIRE - KLONDIKE
   style.css
   ===================================================== */

/* ===== DESIGN TOKENS ===== */
:root {
  --green-dark:   #1a5c2a;
  --green-mid:    #2e7d46;
  --felt-pattern: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,.04) 0, rgba(0,0,0,.04) 1px,
    transparent 1px, transparent 8px
  );
  --card-bg:      #fff;
  --card-radius:  10px;
  --card-border:  2.5px solid #1a1a1a;
  --card-shadow:  2px 3px 8px rgba(0,0,0,.35);
  --red:   #c0392b;
  --black: #1a1a1a;
  --header-h: 58px;
  --bottom-h: 58px;
  --accent: #f0c040;
  --hint-glow: 0 0 0 3px #f0c040, 0 0 12px rgba(240,192,64,.6);
  --dest-glow: 0 0 0 3px #4a9eff, 0 0 12px rgba(74,158,255,.6);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Outfit', sans-serif;
  background: var(--green-dark);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===== MAIN LAYOUT & APP WRAPPER ===== */
#main-layout {
  width: 100vw;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: var(--green-dark);
}

#app {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--green-mid);
  background-image: var(--felt-pattern);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===== GAME FOOTER (LP LINK) ===== */
.game-footer {
  padding: 24px 16px max(48px, env(safe-area-inset-bottom, 24px) + 32px);
  text-align: center;
  background: #0d4a2f;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.game-footer a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  transition: color 0.15s ease-in-out;
}
.game-footer a:hover {
  color: #ffffff;
}

/* ===== ADSENSE BANNER STYLES ===== */
.ad-sidebar {
  display: none;
}
.ad-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 5px;
  text-align: center;
  letter-spacing: 0.5px;
}
.ad-label-inline {
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  margin-right: 6px;
  letter-spacing: 0.5px;
}
.ad-box {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
.ad-pc-160x600 {
  width: 160px;
  height: 600px;
  max-height: calc(100vh - 40px);
}
.ad-box ins.adsbygoogle {
  display: block;
  margin: 0 auto;
}
.ad-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 12px 8px;
  color: rgba(255,255,255,0.7);
}
.ad-ph-icon {
  font-size: 26px;
  line-height: 1;
}
.ad-ph-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.ad-ph-size {
  font-size: 11px;
  font-weight: 700;
  color: #f0c040;
  background: rgba(240, 192, 64, 0.15);
  border: 1px solid rgba(240, 192, 64, 0.35);
  border-radius: 4px;
  padding: 2px 6px;
}
.ad-ph-desc {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}

/* Mobile Bottom Ad Bar */
.ad-mobile-bar {
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  z-index: 50;
}
.ad-mobile-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ad-mobile-320x50 {
  width: 320px;
  max-width: 96vw;
  height: 50px;
  border-radius: 6px;
}
.ad-placeholder-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: 600;
}

/* ===== HEADER ===== */
#header {
  height: var(--header-h);
  background: rgba(0,0,0,.25);
  display: flex; align-items: center;
  padding: 0 10px; gap: 6px;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hdr-btn {
  display: flex; align-items: center; gap: 4px;
  background: #fff; color: #111;
  border: 2.5px solid #111;
  border-radius: 999px;
  padding: 5px 11px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: transform .12s, background .12s;
  white-space: nowrap;
}
.hdr-btn:active { transform: scale(.93); background: #f0f0f0; }
.hdr-btn .icon  { font-size: 14px; }
#hdr-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
#score-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: rgba(0,0,0,.28);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  white-space: nowrap;
}
.score-lbl {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}
#score {
  font-size: 14px;
  font-weight: 900;
  color: #f1c40f;
  min-width: 24px;
  text-align: right;
}
#timer {
  color: #fff; font-size: 14px; font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  min-width: 42px; text-align: right;
}
.sound-btn {
  padding: 4px 8px;
  background: rgba(255,255,255,.9);
  border-radius: 999px;
}
.sound-btn.muted {
  background: rgba(255,255,255,.3);
  color: #fff;
  border-color: rgba(255,255,255,.4);
}

/* ===== WIN CASCADE CANVAS ===== */
#win-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1050;
  display: none;
  pointer-events: auto;
  cursor: pointer;
}

/* ===== GAME AREA ===== */
#game-area {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 8px 8px 4px; gap: 6px;
  overflow: hidden;
}

/* ===== TOP ROW ===== */
#top-row {
  display: flex; align-items: flex-start; gap: 5px;
  flex-shrink: 0;
}
#stock-waste  { display: flex; gap: 5px; }
#foundations  { display: flex; gap: 5px; margin-left: auto; }

/* ===== CARD SLOT (placeholder) ===== */
.card-slot {
  border-radius: var(--card-radius);
  border: 2px dashed rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900;
  color: rgba(255,255,255,.35);
  position: relative;
  flex-shrink: 0;
}

/* ===== CARDS ===== */
.card {
  position: absolute;
  border-radius: var(--card-radius);
  border: var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  transition: box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}

/* Face-down back */
.card.face-down {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 50%, #1e3a5f 100%);
  cursor: default;
}
.card.face-down .card-inner { display: none; }
.card.face-down::after {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 7px;
  background:
    url('pigeon.png') center/70% no-repeat,
    linear-gradient(135deg, #24456e 0%, #3a6fa8 50%, #24456e 100%);
  opacity: .9;
}

/* Card face layout */
.card-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 2px 3px;
}
.card-corner {
  display: flex; flex-direction: column;
  align-items: center; line-height: 1;
}
.card-corner.top-left  { align-self: flex-start; }
.card-corner.bot-right {
  align-self: flex-end; margin-top: auto;
  transform: rotate(180deg);
}
.card-rank    { font-size: 13px; font-weight: 900; line-height: 1; }
.card-suit-sm { font-size: 11px; line-height: 1; }
.card-center  {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; pointer-events: none;
}
.red   { color: var(--red); }
.black { color: var(--black); }

/* ===== WASTE PILE ===== */
#waste-container { position: relative; }

/* ===== TABLEAU ===== */
#tableau {
  display: flex; gap: 5px;
  flex: 1; overflow: visible;
}
.tableau-col {
  flex: 1; position: relative;
  display: flex; flex-direction: column;
  overflow: visible;
}

/* ===== BOTTOM BAR ===== */
#bottom-bar {
  min-height: var(--bottom-h);
  background: rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
}
.bot-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  background: rgba(255,255,255,.12);
  color: #fff; border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 6px 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, transform .12s, border-color .15s;
}
.bot-btn:active   { transform: scale(.93); background: rgba(255,255,255,.22); }
.bot-btn:disabled { opacity: .35; cursor: default; }

#btn-shuffle {
  background: rgba(52, 152, 219, 0.2);
  border-color: rgba(52, 152, 219, 0.5);
  color: #85d7ff;
}
#btn-shuffle:hover:not(:disabled) {
  background: rgba(52, 152, 219, 0.35);
  border-color: #3498db;
}
#shuffle-count-badge {
  background: rgba(255,255,255,0.25);
  padding: 1px 4px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

/* Auto-complete button (hidden until conditions met) */
#btn-autocomplete {
  display: none;
  background: rgba(240,192,64,.25);
  border-color: var(--accent);
  color: var(--accent);
}
#btn-autocomplete.visible { display: flex; }

/* Toast Notifications */
#toast-container {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.game-toast {
  background: rgba(18, 30, 49, 0.94);
  color: #fff;
  border: 1.5px solid rgba(52, 152, 219, 0.7);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 12px rgba(52,152,219,0.4);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastPop 2.4s ease-in-out forwards;
}
@keyframes toastPop {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.9); }
  12%  { opacity: 1; transform: translateY(0) scale(1.02); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  80%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.95); }
}

/* Card Shuffle Animation */
@keyframes cardShuffleTwirl {
  0%   { transform: rotate(0deg) scale(1); filter: brightness(1); }
  25%  { transform: rotate(-8deg) scale(1.06) translateY(-4px); filter: brightness(1.3) drop-shadow(0 4px 12px rgba(52,152,219,0.7)); }
  50%  { transform: rotate(6deg) scale(1.04) translateY(-2px); filter: brightness(1.2); }
  75%  { transform: rotate(-3deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
}
.card.card-shuffling {
  animation: cardShuffleTwirl 0.45s ease-in-out forwards !important;
  z-index: 300 !important;
}

/* Stock count badge */
#stock-badge {
  position: absolute; bottom: -3px; right: -3px;
  background: #e74c3c; color: #fff;
  border-radius: 999px; font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 1.5px solid #fff;
  pointer-events: none; z-index: 10;
}

/* ===== OVERLAYS & MODALS ===== */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.overlay.visible { opacity: 1; pointer-events: all; }

.modal {
  background: linear-gradient(160deg, #2a6040, #1a4030);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 18px;
  padding: 28px 24px;
  max-width: 320px; width: 90%;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal h2 {
  font-size: 20px; font-weight: 900;
  margin-bottom: 14px; text-align: center;
}
.modal p {
  font-size: 14px; color: rgba(255,255,255,.8);
  text-align: center; margin-bottom: 18px;
}
.modal-btns { display: flex; gap: 10px; justify-content: center; }
.modal-btn {
  flex: 1; padding: 10px 14px;
  border-radius: 999px; border: 2px solid #111;
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: transform .12s;
}
.modal-btn:active    { transform: scale(.93); }
.modal-btn.primary   { background: #fff; color: #111; }
.modal-btn.secondary {
  background: rgba(255,255,255,.15);
  color: #fff; border-color: rgba(255,255,255,.3);
}

/* Modal Sub Links & LP Link */
.modal-footer-link {
  margin-top: 14px;
  text-align: center;
}
.modal-sub-link {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.modal-sub-link:hover {
  color: #f0c040;
}

.lp-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(240, 192, 64, 0.12);
  border: 1.5px solid rgba(240, 192, 64, 0.6);
  border-radius: 12px;
  color: #f0c040;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.18s ease-in-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.lp-link-btn:hover {
  background: rgba(240, 192, 64, 0.25);
  border-color: #f0c040;
  color: #fff;
  transform: translateY(-1px);
}
.lp-link-btn .ext-icon {
  font-size: 11px;
  opacity: 0.8;
}

/* ===== SETTINGS PANEL ===== */
#settings-panel              { display: none; flex-direction: column; gap: 16px; }
#settings-panel.active       { display: flex; }

.setting-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.setting-label { font-size: 14px; font-weight: 600; }

/* Toggle switch */
.toggle {
  width: 44px; height: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,.2);
  position: relative; cursor: pointer;
  transition: background .2s; border: none;
}
.toggle.on { background: #4caf50; }
.toggle::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 9px;
  background: #fff; top: 3px; left: 3px;
  transition: left .2s;
}
.toggle.on::after { left: 23px; }

/* Draw-count selector */
.draw-select { display: flex; gap: 6px; }
.draw-opt {
  padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.3);
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.7);
  background: transparent; cursor: pointer;
  transition: background .15s, color .15s;
}
.draw-opt.active { background: #fff; color: #111; border-color: #fff; }

/* Stats grid */
.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 4px;
}
.stat-card {
  background: rgba(255,255,255,.1);
  border-radius: 10px; padding: 10px; text-align: center;
}
.stat-val { font-size: 20px; font-weight: 900; }
.stat-lbl { font-size: 10px; color: rgba(255,255,255,.6); margin-top: 2px; }

/* ===== WIN SCREEN ===== */
#win-overlay .modal { text-align: center; }
#win-overlay h2     { font-size: 28px; margin-bottom: 6px; }
.win-stars { font-size: 36px; letter-spacing: 4px; margin: 10px 0; }
.win-stat  { font-size: 13px; color: rgba(255,255,255,.75); margin: 3px 0; }

/* ===== HINT GLOW & FIRST MOVE GUIDE ===== */
.card.hint-src          { box-shadow: var(--hint-glow) !important; z-index: 500 !important; }
.card-slot.hint-dst,
.card.hint-dst          { box-shadow: var(--dest-glow) !important; }

/* アンドゥ時の戻り先ハイライト */
.card.undo-highlight {
  box-shadow: 0 0 0 3px #2ecc71, 0 0 16px rgba(46, 204, 113, 0.85) !important;
  transition: box-shadow 0.8s ease-out !important;
  z-index: 400 !important;
}

/* 初心者向け初手ガイド */
.guide-pulse-card {
  box-shadow: 0 0 0 3.5px #f1c40f, 0 0 16px rgba(241, 196, 15, 0.85) !important;
  animation: guidePulse 1.4s infinite alternate ease-in-out !important;
  z-index: 450 !important;
}
.guide-pulse-stock {
  box-shadow: 0 0 0 3.5px #2ecc71, 0 0 16px rgba(46, 204, 113, 0.85) !important;
  animation: guidePulseGreen 1.4s infinite alternate ease-in-out !important;
  border-radius: var(--card-radius);
}
@keyframes guidePulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 2px #f1c40f, 0 0 8px rgba(241,196,15,.5); }
  100% { transform: scale(1.05); box-shadow: 0 0 0 5px #f39c12, 0 0 20px rgba(243,156,18,.9); }
}
@keyframes guidePulseGreen {
  0%   { transform: scale(1);   box-shadow: 0 0 0 2px #2ecc71, 0 0 8px rgba(46,204,113,.5); }
  100% { transform: scale(1.05); box-shadow: 0 0 0 5px #27ae60, 0 0 20px rgba(39,174,96,.9); }
}

.guide-bubble {
  position: absolute;
  background: rgba(18, 25, 38, 0.95);
  color: #fff;
  border: 1.5px solid rgba(241, 196, 15, 0.8);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 10px rgba(241,196,15,0.3);
  animation: bubbleFloat 1.8s infinite ease-in-out alternate;
}
.guide-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(18, 25, 38, 0.95) transparent transparent;
}
.guide-bubble.bottom-arrow::after {
  bottom: auto;
  top: -6px;
  border-width: 0 6px 6px;
  border-color: transparent transparent rgba(18, 25, 38, 0.95);
}
@keyframes bubbleFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* ===== FLIP CARD ANIMATION LAYER ===== */
.flip-anim-card {
  position: fixed;
  perspective: 1000px;
  pointer-events: none;
  z-index: 950;
  transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1), left 0.14s cubic-bezier(0.2, 0.9, 0.3, 1), top 0.14s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.flip-anim-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.flip-anim-inner.is-flipped {
  transform: rotateY(180deg);
}
.flip-anim-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--card-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.flip-anim-face.front {
  background: var(--card-bg);
  transform: rotateY(180deg);
}
.flip-anim-face.back {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 50%, #1e3a5f 100%);
}
.flip-anim-face.back::after {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 7px;
  background:
    url('pigeon.png') center/70% no-repeat,
    linear-gradient(135deg, #24456e 0%, #3a6fa8 50%, #24456e 100%);
  opacity: .9;
}

/* ===== CARD REVEAL FLIP (Tableau) ===== */
@keyframes cardRevealFlip {
  0% {
    transform: rotateY(90deg) scale(1.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    filter: brightness(1.25);
  }
  50% {
    transform: rotateY(40deg) scale(1.04);
  }
  100% {
    transform: rotateY(0deg) scale(1);
    box-shadow: var(--card-shadow);
    filter: brightness(1);
  }
}
.card.card-revealing {
  animation: cardRevealFlip 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards !important;
  z-index: 200 !important;
}

/* ===== DRAG LAYER ===== */
#drag-layer {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 900;
}
.dragging-card {
  position: absolute; pointer-events: none;
  box-shadow: 4px 8px 20px rgba(0,0,0,.5) !important;
  transform: scale(1.06);
  transition: none !important;
  z-index: 901;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 380px) {
  #bottom-bar {
    gap: 4px;
    padding: 5px 4px;
  }
  .bot-btn {
    padding: 5px 7px;
    font-size: 11px;
    gap: 2px;
  }
}
@media (min-width: 600px) {
  :root {
    --header-h: 62px;
    --bottom-h: 62px;
    --card-radius: 12px;
  }
  #game-area   { padding: 12px 10px 6px; gap: 10px; }
  #top-row,
  #foundations,
  #tableau     { gap: 8px; }
  .hdr-btn     { font-size: 13px; padding: 6px 14px; }
}
@media (min-width: 900px) {
  #main-layout {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  #app {
    max-width: 700px;
    width: 100%;
    border-left: 1px solid rgba(0, 0, 0, 0.35);
    border-right: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }
  #game-area {
    padding: 16px 20px 8px;
    width: 100%;
  }
  .ad-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    flex-shrink: 0;
    padding: 12px 6px;
    z-index: 50;
  }
  .ad-mobile-bar {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .ad-sidebar {
    width: 220px;
    padding: 12px 10px;
  }
  #app {
    max-width: 740px;
  }
}