:root {
  --common-w: 90vw;
  --field-w: 90vw; --field-h: 30vh; --field-mt: 3vh;
  --clock-w: 90vw; --clock-h: 20vh;
  --panel-w: 90vw; --panel-h: auto;
  --left-gap: 12px; --outer-gap: 12px;
  --accent: #1e66ff;
}
@media (orientation: landscape) {
  :root { --common-w:auto; --field-w:60vw; --field-h:45vh; --field-mt:0; --clock-w:60vw; --clock-h:45vh; --panel-w:30vw; --panel-h:90vh; --outer-gap:14px; }
}
html, body { height:100%; margin:0; background:#fff; color:#0a0a0a; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; transition: background .3s, color .3s; }
body { min-height:100dvh; }

body.night { filter: invert(1) hue-rotate(180deg); }
.app { min-height:100dvh; display:flex; flex-direction:column; align-items:center; gap:var(--outer-gap); padding: env(safe-area-inset-top) 0 3vh; }
@media (orientation: landscape){ .app{ flex-direction:row; justify-content:center; align-items:flex-start; padding-bottom: env(safe-area-inset-bottom); } }
.left-side { display:flex; flex-direction:column; align-items:center; gap:var(--left-gap); width:100%; }
@media (orientation: landscape){ .left-side{ height:90vh; width:auto; } }
.card { border-radius:18px; box-shadow: inset 0 0 0 2px #e0e6eb, 0 8px 24px rgba(0,0,0,.06); background: linear-gradient(180deg,#f4f6f8 0%,#e9eef3 100%); overflow:hidden; }
.playground { position:relative; width:var(--field-w); height:var(--field-h); margin-top:var(--field-mt); }
@media (orientation: portrait){ .playground, .clock, .panel{ width:var(--common-w);} }
.ground{ position:absolute; left:0; right:0; bottom:8%; height:2px; background:#ced6de; }
.dizzy{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-weight:800; font-size:min(5vh,5vw); color:#d12; text-shadow:0 2px 6px rgba(0,0,0,.25); pointer-events:none; }
#sprite{ position:absolute; bottom:8%; left:0; image-rendering: pixelated; image-rendering: crisp-edges; transition: opacity .2s ease; }
#opponent{ position:absolute; bottom:8%; left:0; image-rendering: pixelated; image-rendering: crisp-edges; display:none; }
.clock{ width:var(--clock-w); height:var(--clock-h); display:flex; align-items:center; justify-content:center; background:#fff; }
.clock-inner{ text-align:center; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.time{ font-weight:800; letter-spacing:.5px; font-variant-numeric: tabular-nums; font-size:min(10vh,10vw); }
.date{ opacity:.7; font-weight:600; font-size:min(3.5vh,3.5vw); }
.panel{ width:var(--panel-w); height:var(--panel-h); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; color:#6b7a88; text-align:center; padding:10px; background:#f7f9fb; box-shadow: inset 0 0 0 1px #e6edf2; gap:10px; position:relative; flex:1 1 auto; }
@media (orientation: landscape){ .panel{ flex:0 0 auto; } }
.desc{ font-size:10px; line-height:1.2; }
.button-row{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; align-items:center; min-height:48px; }
.panel button{ flex:1; min-width:120px; border:none; border-radius:10px; padding:10px 14px; font-weight:600; font-size:14px; background:#111; color:#fff; opacity:.9; box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:pointer; }
.reminder{ font-size:11px; color:#b33; margin-top:4px; }
.counter{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:10px; color:#555; }
.evoLabel{ position:absolute; top:6px; right:8px; font-size:10px; background:#fff; padding:2px 6px; border-radius:8px; box-shadow: inset 0 0 0 1px #e6edf2; color:#334; }
.fightLabel{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-weight:900; font-size:min(8vh,8vw); color:var(--accent); text-shadow:0 2px 8px rgba(0,0,0,.3); pointer-events:none; }
body.night .fixed-color{ filter: invert(1) hue-rotate(180deg); }
.footer{ width:100%; text-align:center; font-size:9px; color:#888; padding:4px 0 8px; opacity:.8; }

/* === Background Selector Overrides (must be last) === */

/* Remove the default .card background only for the playground box */
.playground.card { background: transparent !important; }

/* Apply THEME to either the playground OR the sprite canvas */
.playground.bg-default, #sprite.bg-default {
  background: linear-gradient(to bottom, #87cefa, #ffffff) !important;
}

.playground.bg-mountain, #sprite.bg-mountain {
  background:
    radial-gradient(120% 60% at 30% 100%, #8bc34a 30%, transparent 31%),
    radial-gradient(120% 60% at 70% 100%, #7cb342 30%, transparent 31%),
    linear-gradient(to top, #5c3d2e 0%, #5c3d2e 22%, transparent 22%),
    linear-gradient(to top, #90caf9, #e3f2fd) !important;
}

.playground.bg-digital, #sprite.bg-digital {
  background: linear-gradient(#0f2027, #203a43, #2c5364) !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,255,200,0.18) 0, rgba(0,255,200,0.18) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg, rgba(0,255,200,0.18) 0, rgba(0,255,200,0.18) 1px, transparent 1px, transparent 40px) !important;
  background-blend-mode: overlay !important;
}

.playground.bg-pixel-sky, #sprite.bg-pixel-sky {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 1px, transparent 2px),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,0.9) 1px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,0.9) 1px, transparent 2px),
    radial-gradient(circle at 40% 60%, rgba(255,255,255,0.9) 1px, transparent 2px),
    linear-gradient(to bottom, #000428, #004e92) !important;
  background-size: cover !important;
}

.playground.bg-forest, #sprite.bg-forest {
  background:
    linear-gradient(to top, #1b5e20 0%, #388e3c 28%, transparent 28%),
    linear-gradient(to top, #4caf50, #c8e6c9) !important;
}