:root { --paper:#f6f0e4; --ink:#243c53; --coral:#bd4c52; --gold:#e8ad3e; --mint:#b9c9b2; --muted:#697266; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font:15px/1.5 'Trebuchet MS',system-ui,sans-serif; }
body.playing { height:100dvh; overflow:hidden; overscroll-behavior:none; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { cursor:wait; }
a { color:inherit; text-underline-offset:5px; }
:focus-visible { outline:3px solid #bc4f36; outline-offset:5px; }
.menu-screen { max-width:1060px; margin:auto; padding:25px 40px 35px; }
.menu-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; gap:15px; }
.language-choice { display:flex; align-items:center; }
.language-choice button { min-width:44px; min-height:44px; border:0; background:transparent; }
.language-choice button[aria-pressed=true] { text-decoration:underline; font-weight:bold; }
.menu-heading { text-align:center; margin:16px 0 30px; position:relative; }
.eyebrow { font-size:10px; letter-spacing:2px; font-weight:bold; }
.menu-shoes { width:95px; height:95px; transform:rotate(-12deg); }
h1 { font:italic 64px/1.1 Georgia,serif; margin:0 0 12px; letter-spacing:-2px; }
.menu-subtitle { font:20px Georgia,serif; margin:0; color:var(--muted); }
.factions { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.faction { position:relative; padding:24px 30px 30px; border:1px solid var(--ink); background:#f0ddce; text-align:left; display:flex; align-items:start; flex-direction:column; box-shadow:4px 5px 0 #243c5318; transition:transform .2s,box-shadow .2s; }
.faction.groom { background:#dce4e6; }
.faction:hover { transform:translateY(-4px) rotate(-.5deg); box-shadow:6px 9px 0 #243c5318; }
.faction.groom:hover { transform:translateY(-4px) rotate(.5deg); }
.portrait { width:80px; height:80px; background-size:320px 80px; background-repeat:no-repeat; margin-bottom:12px; }
.bride-portrait { background-image:url('assets/bride-walk.svg'); }
.groom-portrait { background-image:url('assets/groom-walk.svg'); }
.faction-caption { font-size:10px; letter-spacing:2px; font-weight:bold; }
.faction strong { font:29px Georgia,serif; margin:8px 0 12px; }
.faction>span:not(.portrait):not(.choose-arrow):not(.faction-caption) { font-size:14px; max-width:310px; }
.faction small { color:#566354; font-size:11px; margin-top:19px; }
.choose-arrow { position:absolute; top:30px; right:30px; font-size:30px; }
.menu-bottom { text-align:center; font-size:12px; margin-top:25px; }
.control-hint { color:var(--muted); max-width:580px; margin:10px auto; }
.text-button { min-height:44px; background:none; border:0; text-decoration:underline; }
#storage-note,#load-error { color:#903d2c; }
.play-screen { height:100dvh; padding: max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); display:grid; grid-template-rows:54px minmax(0,1fr) 30px; background:var(--ink); color:var(--paper); }
.game-hud { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; max-width:1450px; width:100%; margin:auto; }
.team-heading { display:flex; flex-direction:column; font-size:12px; padding-left:8px; }
#team-label { font-weight:bold; letter-spacing:1px; }
#shoe-status { font-size:11px; color:#e6c982; }
.clock { display:flex; align-items:center; gap:12px; }
.clock-caption { font-size:9px; letter-spacing:1px; }
#timer { font:32px/1 Georgia,serif; font-variant-numeric:tabular-nums; }
.clock.urgent { color:#ffc97b; }
.hud-actions { display:flex; align-items:center; justify-content:end; gap:6px; }
.hud-actions button { min-height:40px; padding:8px 12px; border:1px solid #8f9a9c; color:var(--paper); background:transparent; font-size:11px; }
.game-layout { display:grid; grid-template-columns:130px minmax(0,1fr) 130px; gap:8px; min-height:0; width:100%; max-width:1450px; margin:auto; height:100%; }
.board-wrap { position:relative; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; }
#board { position:absolute; inset:0; }
#board canvas { display:block; touch-action:none; border-radius:5px; }
#loading { position:relative; font:20px Georgia,serif; }
#game-toast { position:absolute; bottom:6px; margin:0; padding:6px 12px; max-width:94%; text-align:center; background:#243c53ee; color:#fff0c9; border-radius:4px; font-size:12px; pointer-events:none; }
#game-toast:empty { display:none; }
.movement-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; user-select:none; }
.control-label { font-size:10px; letter-spacing:2px; }
.movement-panel>small { font-size:10px; color:#c3c7bb; }
.joystick { width:116px; height:116px; border:1px solid #b1b9ac88; border-radius:50%; position:relative; background:#ffffff08; touch-action:none; user-select:none; }
.joystick-cross::before,.joystick-cross::after { content:''; position:absolute; background:#d9d8bc33; }
.joystick-cross::before { width:1px; height:90px; top:12px; left:50%; }
.joystick-cross::after { height:1px; width:90px; left:12px; top:50%; }
.joystick-knob { position:absolute; width:48px; height:48px; top:calc(50% - 24px); left:calc(50% - 24px); border-radius:50%; background:#d5d4b7; box-shadow:0 4px 0 #0003; border:3px solid #f6f0e455; pointer-events:none; }
.joystick.active { background:#ffffff12; }
.ability-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.ability { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:82px; height:82px; border:2px solid #f1d69a; border-radius:50%; color:var(--ink); background:var(--gold); touch-action:none; user-select:none; box-shadow:0 4px 0 #0004; }
.ability.stun { background:#dba199; border-color:#f3c7ba; }
.ability>span { font-size:23px; line-height:1; }
.ability strong { font-size:10px; letter-spacing:1px; }
.ability small { font-size:10px; }
.ability[aria-disabled=true] { background:#647480; border-color:#8d9b9e; color:#e2e1d4; }
.ability::after { content:''; position:absolute; inset:-5px; border-radius:50%; background:conic-gradient(#f5e0a5 var(--charge,100%),transparent 0); mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0); pointer-events:none; }
.keyboard-hint { font-size:9px; letter-spacing:1px; color:#b7bfb7; }
.game-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:1450px; width:100%; margin:auto; font-size:10px; color:#d7d9c7; }
.legend { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.legend i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:5px; }
.legend-bride { background:#df8188; }.legend-groom { background:#77a9c3; }.legend-dhiraj { background:#f1cf77; }
.game-dialog { max-width:500px; width:calc(100% - 40px); max-height:calc(100dvh - 30px); padding:30px; text-align:center; color:var(--ink); background:var(--paper); border:1px solid #c2baa2; box-shadow:6px 7px 0 #0003; }
.game-dialog::backdrop { background:#142338d9; backdrop-filter:blur(3px); }
.game-dialog h2 { font:34px/1.15 Georgia,serif; margin:12px 0; }
.game-dialog p { font-size:14px; }
.rotate-symbol { font-size:38px; color:var(--coral); }
.dialog-buttons { display:flex; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.dialog-buttons button { min-height:46px; border:1px solid var(--ink); padding:10px 20px; background:transparent; font-size:13px; }
.dialog-buttons .primary { background:var(--ink); color:var(--paper); }
.result-dialog img { width:75px; height:75px; }
.result-score { display:flex; flex-direction:column; margin-top:20px; }
.result-score>span { font-size:10px; letter-spacing:2px; }
.result-score strong { font:44px Georgia,serif; color:var(--coral); }
.result-score small { font-size:12px; }
.return-link { display:inline-block; font-size:12px; margin-top:20px; padding:8px; }
@media(max-height:500px) and (orientation:landscape) {
  .play-screen { grid-template-rows:45px minmax(0,1fr) 22px; }
  .game-layout { grid-template-columns:98px minmax(0,1fr) 98px; gap:5px; }
  .joystick { width:86px; height:86px; }.joystick-cross::before { height:64px; top:10px; }.joystick-cross::after { width:64px; left:10px; }
  .joystick-knob { width:40px; height:40px; top:calc(50% - 20px); left:calc(50% - 20px); }
  .ability { width:64px; height:64px; }.ability-panel { gap:15px; }.keyboard-hint { display:none; }
  .control-label { font-size:9px; }.movement-panel { gap:8px; }.movement-panel>small { font-size:9px; }
  .hud-actions button { min-height:34px; font-size:10px; padding:6px 9px; }.clock-caption { display:none; }#timer { font-size:27px; }
  .game-footer { font-size:9px; }.legend { gap:3px; font-size:8px; }
  .game-dialog { padding:18px 25px; }.game-dialog h2 { font-size:28px; }.rotate-symbol { font-size:25px; }
  .result-dialog img { display:none; }.result-score { margin-top:10px; }.result-score strong { font-size:32px; }.dialog-buttons { margin-top:15px; }
}
@media(max-width:700px) {
  .menu-screen { padding:16px 22px 30px; }.menu-top { font-size:11px; }.menu-heading { margin-top:25px; }
  h1 { font-size:48px; }.menu-subtitle { font-size:18px; }.menu-shoes { width:78px; height:78px; }
  .factions { gap:16px; }.faction { padding:20px; }.faction strong { font-size:24px; }.faction>span:not(.portrait):not(.choose-arrow):not(.faction-caption) { font-size:13px; }
  .choose-arrow { top:20px; right:18px; }.portrait { width:64px; height:64px; background-size:256px 64px; }
  .game-footer .legend { display:none; }.game-footer { justify-content:center; }.hud-actions #fullscreen { display:none; }
}
@media(max-width:500px) and (orientation:portrait) {
  .factions { grid-template-columns:1fr; }.faction { padding:20px 20px 20px 99px; min-height:170px; }.portrait { position:absolute; left:18px; top:33px; }
  .faction strong { font-size:23px; padding-right:12px; }.faction small { margin-top:12px; }.choose-arrow { font-size:22px; top:12px; right:12px; }
  .menu-bottom { font-size:11px; }.game-layout { grid-template-columns:60px minmax(0,1fr) 60px; }.game-hud { gap:5px; }.team-heading { font-size:10px; }
  .joystick { width:50px; height:50px; }.ability { width:50px; height:50px; }.clock-caption { display:none; }.hud-actions button { font-size:9px; padding:4px; }#timer { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

.difficulty-choice { text-align:center; margin:0 auto 25px; }
.difficulty-choice label { font-weight:bold; margin-right:12px; }
.difficulty-choice select { font:inherit; color:var(--ink); background:var(--paper); padding:10px 16px; border:1px solid var(--ink); min-height:44px; }
.difficulty-choice p { font-size:12px; max-width:530px; margin:10px auto; color:var(--muted); }
.ability.trap { background:#b9c9b2; border-color:#d9e5c7; }
.ability-panel { gap:12px; }
@media(max-height:380px) and (orientation:landscape) { .ability { width:58px; height:58px; } .ability-panel { gap:9px; } }

#wave-status { font-size:9px; color:#cad7dc; }
@media(max-height:500px) { .team-heading { line-height:1.2; } }

.ability-panel #trap { order:-1; }