:root {
  color-scheme: light;
  --ink: #17213b;
  --paper: #fff8e8;
  --coral: #ff5d73;
  --sun: #ffd447;
  --mint: #50d7a0;
  --blue: #3b8eea;
  --purple: #9d64e8;
  --shadow: 0 14px 0 rgba(23, 33, 59, .12), 0 24px 50px rgba(23, 33, 59, .18);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #17213b; }
body { color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 4px solid #3b8eea; outline-offset: 2px; }
.hidden { display: none !important; }

#app, .screen { width: 100%; height: 100%; }
.start-screen { overflow-y: auto; background: radial-gradient(circle at 15% 15%, rgba(255,255,255,.8) 0 3px, transparent 4px), linear-gradient(145deg, #94dde2, #d3f0df 54%, #ffe6a8); background-size: 38px 38px, auto; padding: max(18px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.start-card { width: min(680px, 100%); margin: 0 auto; padding: 28px clamp(20px, 5vw, 44px); border: 4px solid var(--ink); border-radius: 30px; background: var(--paper); box-shadow: var(--shadow); }
.eyebrow { color: #d63f5e; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; }
h1 { margin: 2px 0 8px; font-size: clamp(3.7rem, 14vw, 6.8rem); line-height: .9; letter-spacing: -.07em; color: var(--coral); text-shadow: 4px 4px 0 var(--ink); }
.intro { max-width: 520px; margin: 16px 0 22px; font-size: 1rem; line-height: 1.45; }
.setup-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend, .seed-row > label { margin-bottom: 8px; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.choice-row { display: flex; gap: 8px; }
.choice, .pill, .icon-button, .hud-actions button { border: 3px solid var(--ink); background: #fff; cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .12s, box-shadow .12s, background .12s; }
.choice:active, .pill:active, .icon-button:active, .hud-actions button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.choice { flex: 1; padding: 6px 4px 7px; border-radius: 15px; font-size: .66rem; font-weight: 900; }
.choice img { display: block; width: 42px; height: 42px; margin: 0 auto 2px; }
.choice.selected, .pill.selected { background: var(--sun); }
.pill { flex: 1; min-height: 46px; padding: 6px; border-radius: 13px; font-size: .74rem; font-weight: 900; }
.seed-row { margin-top: 18px; }
.seed-row > div { display: flex; gap: 8px; }
.seed-row input { min-width: 0; flex: 1; height: 46px; border: 3px solid var(--ink); border-radius: 13px; padding: 0 13px; color: var(--ink); background: #fff; font-weight: 800; }
.icon-button { width: 48px; border-radius: 13px; font-size: 1.4rem; }
.route-preview-wrap { position: relative; margin: 18px 0; height: 122px; overflow: hidden; border: 3px solid var(--ink); border-radius: 16px; background: #bde4e0; }
#route-preview { display: block; width: 100%; height: 100%; }
.route-stamp { position: absolute; left: 12px; bottom: 10px; display: flex; flex-direction: column; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 9px; background: rgba(255,248,232,.94); font-size: .7rem; }
.route-stamp strong { font-size: .86rem; }
.primary-button, .secondary-button, .text-button { width: 100%; border: 0; cursor: pointer; font-weight: 1000; letter-spacing: .05em; }
.primary-button { min-height: 54px; padding: 13px 18px; border: 3px solid var(--ink); border-radius: 15px; background: var(--coral); color: #fff; box-shadow: 0 5px 0 var(--ink); text-shadow: 1px 1px 0 rgba(0,0,0,.2); }
.primary-button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.secondary-button { min-height: 48px; margin-top: 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--sun); box-shadow: 0 4px 0 var(--ink); }
.text-button { margin-top: 16px; background: transparent; text-decoration: underline; }
.control-hint { margin: 14px 4px 0; text-align: center; font-size: .76rem; line-height: 1.35; }

.game-screen { position: relative; margin: auto; overflow: hidden; background: #9edce5; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#game-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#game-svg image { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.wall-shape { fill: #ddd6c6; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.wall-shadow { fill: rgba(23,33,59,.16); }
.wall-mark { fill: none; stroke: #c3bba9; stroke-width: 3; stroke-linecap: round; opacity: .7; }
.hold { cursor: pointer; transition: opacity .1s; }
.hold .target-ring { fill: none; stroke: #fff; stroke-width: 4; opacity: 0; vector-effect: non-scaling-stroke; }
.hold.valid .target-ring { opacity: .95; animation: ring-pulse .85s infinite alternate; }
.hold.invalid { opacity: .28; }
.hold.occupied .target-ring { stroke: var(--sun); opacity: .7; }
.hold-hit { fill: transparent; pointer-events: all; }
@keyframes ring-pulse { to { stroke-width: 8; opacity: .35; } }
.limb-hit { fill: rgba(0, 0, 0, .001); stroke: none; cursor: grab; pointer-events: all; touch-action: none; -webkit-touch-callout: none; }
.limb-hit:active { cursor: grabbing; }
.limb-endpoint { pointer-events: none; }
.limb-marker { stroke: var(--ink); stroke-width: 4; vector-effect: non-scaling-stroke; }
.hand-marker { fill: var(--sun); }
.foot-marker { fill: var(--blue); }
.limb-selected { animation: paw-pulse .55s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes paw-pulse { to { filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 7px #ffd447); } }
.low-grip { animation: danger-pulse .36s infinite alternate; }
@keyframes danger-pulse { to { opacity: .42; } }

.hud-top { position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.hud-route { display: flex; flex-direction: column; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 13px; background: rgba(255,248,232,.92); box-shadow: 0 4px 0 rgba(23,33,59,.85); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.hud-route strong { font-size: 1.15rem; }
.hud-actions { display: flex; gap: 8px; pointer-events: auto; }
.hud-actions button { width: 44px; height: 42px; border-radius: 12px; font-size: 1.1rem; font-weight: 1000; }
.fatigue-panel { position: absolute; z-index: 3; top: max(90px, calc(env(safe-area-inset-top) + 80px)); right: 12px; display: grid; gap: 6px; width: 70px; pointer-events: none; }
.meter { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 5px; padding: 4px 6px; border: 2px solid var(--ink); border-radius: 9px; background: rgba(255,248,232,.9); font-size: .6rem; font-weight: 1000; }
.meter i { display: block; height: 8px; overflow: hidden; border: 1px solid var(--ink); border-radius: 5px; background: #eadfd0; }
.meter b { display: block; width: 0; height: 100%; background: var(--coral); transition: width .15s, background .15s; }
.meter.foot b { background: var(--blue); }
.meter.danger { animation: danger-meter .4s infinite alternate; }
@keyframes danger-meter { to { transform: translateX(-3px); background: #ffc8c8; } }
.selected-label { position: absolute; z-index: 3; left: 50%; bottom: max(15px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: 84%; padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; background: rgba(255,248,232,.94); font-size: .7rem; font-weight: 900; text-align: center; pointer-events: none; white-space: nowrap; }
.catch-banner { position: absolute; z-index: 4; top: 35%; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); display: flex; flex-direction: column; padding: 14px 24px; border: 4px solid var(--ink); border-radius: 16px; background: var(--sun); box-shadow: 0 7px 0 rgba(23,33,59,.9); text-align: center; pointer-events: none; }
.catch-banner strong { color: #d63f5e; font-size: 2rem; line-height: 1; }
.catch-banner span { font-size: .75rem; font-weight: 900; text-transform: uppercase; }

.modal-layer { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(23,33,59,.68); backdrop-filter: blur(5px); }
.modal-card { width: min(390px, 100%); padding: 28px; border: 4px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.modal-card h2 { margin: 4px 0 8px; font-size: 2rem; line-height: 1; }
.modal-card p { line-height: 1.45; }
.modal-icon { margin-bottom: 6px; font-size: 3.2rem; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.result-stats div { padding: 10px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; }
.result-stats span { display: block; font-size: .65rem; font-weight: 900; }
.result-stats strong { font-size: 1.5rem; }

@media (min-width: 760px) {
  .game-screen { width: min(100%, 820px); box-shadow: 0 0 60px rgba(0,0,0,.45); }
  .fatigue-panel { width: 86px; }
}
@media (max-width: 580px) {
  .start-card { padding: 24px 18px; border-radius: 23px; }
  .setup-grid { grid-template-columns: 1fr; }
  .route-preview-wrap { height: 106px; }
  .choice img { width: 38px; height: 38px; }
}
@media (max-height: 690px) and (orientation: landscape) {
  .start-card { width: min(850px, 100%); }
  h1 { font-size: 4rem; }
  .setup-grid { grid-template-columns: 1fr 1fr; }
  .intro, .control-hint { margin-top: 8px; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }