:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #1a1a1a; color: #f6f6ec; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
#game-area { width: min(100%, 1100px); margin: auto; padding: clamp(8px, 2vw, 24px); background: #222; border: 1px solid #555; border-radius: 18px; }
#cards-area { display: flex; flex-direction: column; gap: 10px; }
#dealer-label, #player-label { text-align: center; font-size: 1.25rem; font-weight: 700; color: #ffd700; }
#dealer-hand, #player-hand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 130px; padding: 10px; border-radius: 12px; background: #282828; }
.card-img { width: clamp(42px, 12vw, 100px); height: auto; border-radius: 5px; margin: 2px; }
.pwa-cards { display: flex; flex-wrap: wrap; justify-content: center; }
.pwa-hand { max-width: 100%; border: 2px solid transparent; border-radius: 10px; padding: 8px; text-align: center; }
.pwa-hand.active { border-color: #a1e8b2; }
.pwa-hand.win { border-color: #a1e8b2; }
.pwa-hand.loss { border-color: #ff9e9e; }
.pwa-hand.push { border-color: #ffd700; }
.points { text-align: center; color: #ffd700; }
.separator { height: 1px; margin: 8px 0; background: #555; }
#menu-protected { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
.menu-buttons { display: flex; flex: 1 1 400px; flex-wrap: wrap; justify-content: center; gap: 8px; }
button { min-height: 44px; min-width: 44px; padding: 10px 16px; border: 1px solid #82c294; border-radius: 9px; background: #317b36; color: #fff; font: inherit; font-weight: 650; cursor: pointer; touch-action: manipulation; }
button:hover:enabled { background: #388e3c; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #ffd700; outline-offset: 3px; }
.stats-panel, .strategy-advisor { border: 1px solid #82c294; border-radius: 10px; padding: 10px; background: #282828; text-align: center; }
.stats-title, .strategy-title { font-size: .85rem; margin-bottom: 6px; color: #bdeac7; }
.stats-grid { display: grid; grid-template-columns: auto repeat(3, 28px); gap: 4px; font-size: .85rem; }
.stats-label { text-align: left; }
.strategy-action { font-weight: 750; color: #ffd700; }
#message { min-height: 3em; padding: 14px 0; text-align: center; }
footer { text-align: center; line-height: 1.6; font-size: .9rem; }
footer label { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; }
footer span { display: inline-block; margin: 0 8px; }
summary { cursor: pointer; min-height: 44px; padding: 10px; }
details { margin-top: 8px; color: #d4e3d7; }
@media (max-width: 600px) {
  .menu-buttons { flex-basis: 100%; order: -1; }
  .menu-buttons button { flex: 1 1 28%; padding: 8px; }
  #stats-container, #strategy-container { flex: 1 1 130px; }
  #dealer-hand, #player-hand { min-height: 105px; padding: 4px; }
  .pwa-hand { padding: 4px; }
  .stats-grid { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Discreet deployment fingerprint; stays inside the app footer on mobile. */
#build-version { display: block; margin: 6px 2px 0 auto; width: fit-content; font-size: .7rem; font-weight: 400; color: #a9b6ae; letter-spacing: .02em; user-select: text; }