/* === 01. GLOBAL THEME AND MOBILE LAYOUT === */
:root { color-scheme:dark; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:#071a12; color:#f7efcf; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 50% 8%,#547344 0%,#173d2a 39%,#071a12 82%); }
.app { width:min(100%,650px); margin:auto; padding:22px 14px 32px; text-align:center; }
.header h1 { font-size:clamp(1.7rem,6vw,2.6rem); margin:3px 0; color:#ffe5a4; text-shadow:0 3px 14px #000; }
.eyebrow { font-size:.7rem; letter-spacing:.24em; color:#c9d9a2; margin:0; }
.subtitle { margin:4px 0 18px; color:#d7d5b6; }
.status { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:15px; }
.status>div { border:1px solid #b9a15b6e; border-radius:13px; padding:10px 4px; background:#0d241bc9; }
.status small { display:block; font-size:.62rem; letter-spacing:.08em; color:#c7d5b0; }
.status strong { display:block; font-size:clamp(.85rem,3.4vw,1.1rem); margin-top:5px; }
/* === 02. JUNGLE SCENE AND STONE BOARD === */
.jungle { position:relative; padding:24px 8px; overflow:hidden; border:2px solid #56683d; border-radius:24px; background:radial-gradient(circle at 50% 20%,#8aaf6a99,transparent 55%),linear-gradient(140deg,#102d1b,#385a30 50%,#0c2117); box-shadow:inset 0 0 65px #03110d,0 12px 32px #0007; }
.jungle::before,.jungle::after { content:"🌿🌴🌿"; position:absolute; font-size:clamp(25px,7vw,45px); opacity:.6; pointer-events:none; }
.jungle::before { left:-12px; top:3px; transform:rotate(-15deg); }
.jungle::after { right:-10px; bottom:0; transform:rotate(175deg); }
.board-frame { position:relative; width:min(100%,500px); margin:auto; padding:12px; border:7px ridge #89734b; border-radius:17px; background:linear-gradient(135deg,#9c9b7b,#464d3b); box-shadow:0 15px 25px #000a,inset 0 0 15px #161f13; }
#board { display:block; width:100%; height:auto; touch-action:manipulation; border-radius:5px; background:radial-gradient(circle at 38% 25%,#999b7a,#69715c 65%,#485443); }
.edge { stroke:#273d29; stroke-width:7; stroke-linecap:round; opacity:.9; }
.point { fill:#ddc79a; stroke:#32402d; stroke-width:3; }
.hit { fill:transparent; cursor:pointer; }
.piece { pointer-events:none; font-size:35px; text-anchor:middle; dominant-baseline:central; filter:drop-shadow(0 3px 2px #0009); }
.selected { fill:#ffe57b; stroke:#fff4a5; stroke-width:5; }
.legal { fill:#a2ff78; stroke:#e6ffbf; stroke-width:4; filter:drop-shadow(0 0 8px #aaff70); }
.message { min-height:46px; display:grid; place-items:center; line-height:1.45; color:#ffe8a6; padding:4px 8px; }
.actions { display:flex; gap:10px; justify-content:center; }
button { min-height:48px; flex:1; border:1px solid #d9c48a; border-radius:13px; background:linear-gradient(#547b40,#254d2e); color:#fff7d6; font-weight:750; font-size:1rem; cursor:pointer; }
button:focus-visible,.hit:focus-visible { outline:4px solid #ffe47d; outline-offset:2px; }
details { margin:15px 0; text-align:left; border:1px solid #7d8d61; border-radius:12px; padding:12px; background:#10271dbd; line-height:1.55; }
summary { cursor:pointer; font-weight:700; }
footer { font-size:.75rem; color:#b6c7a9; margin-top:16px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* === 03. ANIMATED JUNGLE ATMOSPHERE === */
/* These lightweight CSS effects avoid large videos or 3D assets on mobile. */
.jungle { isolation:isolate; }
.mist { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background:radial-gradient(ellipse at 15% 65%,#d5e6bc88,transparent 35%),
             radial-gradient(ellipse at 85% 40%,#d0e8c088,transparent 32%);
  animation:mist-drift 11s ease-in-out infinite alternate; }
.fireflies { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.75;
  background-image:radial-gradient(circle,#e5f4a8 0 2px,transparent 3px),
                   radial-gradient(circle,#f8e7a5 0 2px,transparent 3px),
                   radial-gradient(circle,#e5f4a8 0 1px,transparent 3px);
  background-size:130px 150px,175px 160px,95px 180px;
  background-position:12px 17px,68px 95px,35px 62px;
  animation:firefly-glow 4s ease-in-out infinite alternate; }
.board-frame { z-index:1; }
.legal { animation:move-pulse 1.4s ease-in-out infinite alternate; }
@keyframes mist-drift { from { transform:translateX(-7%); } to { transform:translateX(7%); } }
@keyframes firefly-glow { from { opacity:.2; } to { opacity:.8; } }
@keyframes move-pulse { from { opacity:.65; } to { opacity:1; } }
/* Honor the operating system's reduced-motion accessibility preference. */
@media (prefers-reduced-motion:reduce) {
  .mist,.fireflies,.legal { animation:none; }
}

/* === 04. RESPONSIVE WEBGL JUNGLE PREVIEW === */
/* Keep the playable SVG board independent of WebGL support. */
.scene-3d { position:relative; height:clamp(320px,90vw,480px); margin:0 0 14px; overflow:hidden;
  border:2px solid #718653; border-radius:22px; background:linear-gradient(#77986b,#1a3b26 65%,#0c1e13); }
#jungle-3d { display:block; width:100%; height:100%; }
.scene-label { position:absolute; bottom:8px; left:0; right:0; pointer-events:none; font-size:.65rem;
  letter-spacing:.13em; font-weight:800; text-shadow:0 2px 5px #000; color:#fff2bf; }
\n/* === 05. INTERACTIVE 3D BOARD TOUCH TARGET === */\n#jungle-3d { cursor:pointer; touch-action:manipulation; }\n
/* === 06. GAME MODE AND PLAYER SELECTION === */
.game-setup { margin:12px 0 18px; padding:18px; border:1px solid #9d9b62; border-radius:18px;
  background:linear-gradient(145deg,#1e402a,#102b1c); color:#f8e8b3; text-align:center; }
.game-setup[hidden] { display:none !important; } /* Hide setup only while a match is active. */
.game-setup h2 { margin:0 0 12px; font-size:1.25rem; }
.game-setup p { font-size:.9rem; color:#d8e5c5; }
.setup-options { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:12px 0; }
.setup-options label { display:flex; align-items:center; gap:7px; padding:10px 12px;
  border:1px solid #728a5c; border-radius:12px; cursor:pointer; background:#183522; }
.setup-options input { accent-color:#d5c16f; width:18px; height:18px; }
#start-game { width:min(100%,320px); padding:13px; margin-top:10px; font-weight:800;
  background:#d6c278; color:#1a2a1c; border-radius:12px; cursor:pointer; }
.actions { flex-wrap:wrap; } /* Fit New game, Change mode and Rules on narrow phones. */