:root {
  color-scheme: light;
  --ink: #38241b;
  --paper: #fff5dc;
  --sand: #e8b963;
  --orange: #d45e35;
  --orange-dark: #9c3d24;
  --blue: #2878a5;
  --red: #c5473d;
  --green: #5f7c48;
  --shadow: 0 10px 0 rgba(56, 36, 27, .2);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: "Cairo", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background: #311f18;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
button, input { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; width: 100vw; height: 100dvh; }

.menu-screen {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,0)),
    repeating-linear-gradient(0deg, transparent 0 50px, rgba(104,44,30,.13) 51px 54px),
    repeating-linear-gradient(90deg, transparent 0 103px, rgba(104,44,30,.11) 104px 108px),
    #c65d38;
}
.menu-screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 35%, rgba(255,239,190,.38), transparent 42%);
}
.sun-disc { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: #efb75d; opacity: .55; box-shadow: 0 0 0 28px rgba(250,207,111,.12); }
.menu-card {
  position: relative; z-index: 2; width: min(440px, calc(100vw - 36px)); padding: 28px 34px 24px;
  border: 4px solid var(--ink); border-radius: 28px; background: rgba(255,247,221,.97); box-shadow: 14px 16px 0 rgba(56,36,27,.28); text-align: center;
}
.brand-icon { width: 66px; height: 66px; margin: -60px auto 4px; display: grid; place-items: center; font-size: 42px; background: var(--sand); border: 4px solid var(--ink); border-radius: 50%; transform: rotate(-5deg); }
.eyebrow { margin: 3px 0 -8px; color: var(--orange-dark); font-weight: 900; letter-spacing: .08em; }
h1 { margin: 0; font-size: clamp(64px, 10vw, 92px); line-height: .95; font-weight: 900; letter-spacing: -.08em; transform: rotate(-2deg); text-shadow: 4px 4px 0 #efb75d; }
.latin-title { margin: 0; font-weight: 900; letter-spacing: .48em; font-size: 11px; opacity: .6; }
.tagline { margin: 18px auto; max-width: 340px; font-weight: 700; font-size: 15px; line-height: 1.65; }
.menu-actions { display: grid; gap: 9px; }
.primary-button, .secondary-button, .control-button, .fire-button, .weapon {
  border: 3px solid var(--ink); border-radius: 14px; cursor: pointer; font-weight: 900; box-shadow: 0 5px 0 var(--ink); transition: transform .1s, box-shadow .1s, filter .1s;
}
button:not(:disabled):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.primary-button { padding: 13px 20px; color: white; background: var(--orange); font-size: 18px; }
.secondary-button { padding: 9px 16px; background: #f0dfb7; }
.secondary-button span { margin-inline-start: 8px; padding: 1px 7px; border-radius: 10px; background: rgba(56,36,27,.1); font-size: 10px; }
.locked { opacity: .58; cursor: not-allowed; }
.button-note { margin: -5px 0 2px; font-size: 11px; opacity: .68; }
.settings-button, .text-button { border: 0; background: transparent; cursor: pointer; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.settings-button { margin-top: 15px; opacity: .72; }
.settings-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.menu-display-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }
.display-action { min-width:0; padding:6px 8px; border:1px solid #8d6849; border-radius:10px; color:#4e3528; background:#f2e3c5; font:800 12px Cairo,sans-serif; cursor:pointer; }
.display-action:active { transform:translateY(2px); }
.ui-icon { width: 20px; height: 20px; fill: currentColor; }
.menu-animals { position: absolute; inset: 0; pointer-events: none; }
.peek { position: absolute; font-size: clamp(70px, 11vw, 130px); filter: drop-shadow(8px 10px 0 rgba(56,36,27,.24)); }
.peek-donkey { left: 7%; bottom: 6%; transform: rotate(8deg); }
.peek-buffalo { right: 5%; bottom: 6%; transform: rotate(-8deg); }
.peek-goat { right: 11%; top: 7%; transform: rotate(11deg); font-size: clamp(55px, 8vw, 100px); }

.game-screen { display: grid; grid-template-rows: 64px 1fr 116px; background: #93c8d7; direction: ltr; }
.hud { z-index: 5; display: grid; grid-template-columns: 1fr minmax(190px, 300px) 1fr 48px; align-items: stretch; gap: 8px; padding: 7px max(9px, env(safe-area-inset-right)) 7px max(9px, env(safe-area-inset-left)); background: #4a2f24; color: white; direction: ltr; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.team-panel { min-width: 0; padding: 4px 10px; border: 2px solid rgba(255,255,255,.5); border-radius: 10px; direction: rtl; }
.team-blue { background: var(--blue); }
.team-red { background: var(--red); }
.team-name { display: block; font-size: 12px; font-weight: 900; }
.team-health { display: flex; direction: ltr; gap: 5px; margin-top: 3px; }
.health-pip { flex: 1; max-width: 100px; height: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.5); border-radius: 9px; background: rgba(56,36,27,.5); }
.health-pip i { display: block; height: 100%; background: #9adb62; }
.turn-panel { display: grid; grid-template-columns: 1fr 44px 58px; align-items: center; gap: 7px; direction: rtl; text-align: center; }
#turn-label { font-size: 13px; font-weight: 800; }
#turn-timer { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); background: var(--paper); border: 3px solid #e6af52; }
.wind { font-size: 12px; font-weight: 900; white-space: nowrap; }
.icon-button { width: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 10px; color: white; background: rgba(255,255,255,.1); font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.stage { position: relative; min-height: 0; overflow: hidden; background: #93c8d7; }
.turn-banner { --player-color:#ffd166; position:absolute; z-index:9; top:10px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; min-width:180px; padding:7px 13px; border:3px solid #38241b; border-radius:999px; color:#38241b; background:var(--player-color); box-shadow:0 5px 0 #38241b,0 9px 24px #0006; direction:rtl; pointer-events:none; animation:turn-pop .32s cubic-bezier(.2,.9,.2,1.2); }
.turn-banner span { font-size:13px; font-weight:900; white-space:nowrap; }
.turn-banner b { padding:2px 7px; border-radius:999px; color:#fff; background:#38241b; font-size:11px; white-space:nowrap; }
.turn-banner.mine { animation:turn-pop .32s cubic-bezier(.2,.9,.2,1.2),turn-pulse 1.3s ease-in-out 2; }
.turn-panel.active-turn { outline:3px solid var(--turn-color,#ffd166); outline-offset:-2px; border-radius:12px; background:#ffffff18; }
.presence-banner { position:absolute; z-index:8; top:52px; left:50%; transform:translateX(-50%); max-width:calc(100% - 20px); padding:5px 11px; border:1px solid #fff8; border-radius:999px; color:#fff4d4; background:#7a4229ed; box-shadow:0 3px 12px #0005; direction:rtl; font-size:11px; font-weight:900; text-align:center; pointer-events:none; }
.presence-banner.returned { background:#315c46ed; }
@keyframes turn-pop { from { opacity:0; transform:translate(-50%,-14px) scale(.85); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes turn-pulse { 50% { filter:brightness(1.18); box-shadow:0 5px 0 #38241b,0 9px 30px var(--player-color); } }
#game-canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #93c8d7; touch-action: none; cursor: crosshair; }
.fullscreen-button {
  position: absolute; z-index: 7; top: max(9px, env(safe-area-inset-top)); right: max(9px, env(safe-area-inset-right));
  width: 46px; height: 46px; display: grid; place-items: center; padding: 10px;
  border: 1px solid #fff8; border-radius: 13px; color: white; background: rgba(26,45,39,.8);
  box-shadow: 0 4px 16px #0005; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer;
}
.fullscreen-button svg { width: 25px; height: 25px; fill: currentColor; }
.fullscreen-button:active { transform: scale(.94); }
:fullscreen .fullscreen-button { display: none; }
:-webkit-full-screen .fullscreen-button { display: none; }
@media (display-mode: fullscreen), (display-mode: standalone) { .fullscreen-button { display: none; } }
.speech-bubble { position: absolute; z-index: 4; max-width: 250px; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 16px 16px 4px 16px; color: var(--ink); background: var(--paper); box-shadow: 4px 5px 0 rgba(56,36,27,.18); font-size: 14px; font-weight: 900; direction: rtl; text-align: center; pointer-events: none; }
.turn-curtain, .intro-card, .result-card { position: absolute; z-index: 10; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 22px; color: var(--ink); background: rgba(56,36,27,.72); direction: rtl; text-align: center; }
.turn-curtain strong { color: white; font-size: clamp(28px, 5vw, 54px); text-shadow: 3px 3px 0 var(--ink); }
.turn-curtain span { color: #ffd783; font-weight: 900; }
.turn-curtain .primary-button { min-width: 200px; }
.intro-card > *, .result-card > * { position: relative; z-index: 1; }
.intro-card::before, .result-card::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(430px, calc(100% - 30px)); height: min(320px, calc(100% - 30px)); border: 4px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 10px 12px 0 rgba(0,0,0,.25); }
.intro-card h2, .result-card h2 { margin: 0; font-size: clamp(24px, 4vw, 38px); }
.intro-card p, .result-card p { max-width: 340px; margin: 0 0 8px; line-height: 1.65; font-weight: 700; }
#intro-step { color: var(--orange-dark); font-weight: 900; }
.result-crown { font-size: 44px; color: #d79a25; }
.result-card .text-button { margin-top: 6px; }
.result-card .exit-menu { position:relative; z-index:2; min-width:210px; margin-top:4px; border:3px solid var(--ink); box-shadow:0 4px 0 var(--ink); font-size:15px; }

.controls { z-index: 5; display: grid; grid-template-columns: 220px 190px 1fr minmax(275px, 390px); gap: 10px; align-items: center; padding: 10px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #f7e6bf; border-top: 4px solid var(--ink); direction: ltr; }
.move-controls, .aim-controls, .fire-controls { display: flex; align-items: center; gap: 8px; }
.control-button { min-width: 58px; min-height: 52px; background: #fff8e7; font-size: 22px; }
.control-button.small { min-width: 48px; }
.move-meter, .aim-readout, .power-wrap { display: grid; min-width: 55px; text-align: center; direction: rtl; }
.move-meter span, .aim-readout span, .power-wrap span { font-size: 10px; font-weight: 800; opacity: .7; }
.move-meter b, .aim-readout b, .power-wrap b { font-size: 13px; }
.weapon-controls { display: grid; grid-template-columns: repeat(4, minmax(54px, 1fr)); justify-content: center; gap: 5px; direction: rtl; }
.weapon-drawer-toggle { display:none; }
.weapon { position:relative; min-width: 0; min-height: 45px; padding: 4px 6px; display: grid; grid-template-columns: auto 1fr; place-items: center; gap: 3px; background: #ead5a5; font-size: 11px; }
.ammo-count { position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; display:grid; place-items:center; padding:0 4px; border:2px solid #fff2cf; border-radius:999px; color:white; background:#b6342d; box-shadow:0 2px 5px #0005; font-size:10px; line-height:1; direction:ltr; }
.weapon.out-of-ammo { filter:grayscale(.9); opacity:.42; }
.weapon-icon { width: 34px; height: 34px; overflow: visible; filter: drop-shadow(0 2px 1px #0005); flex:none; }
.weapon-icon [class^="icon-"], .weapon-icon [class*=" icon-"] { stroke:#35271f; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.weapon-icon .icon-ink { fill:#35271f; stroke:none; }
.weapon-icon .icon-outline { fill:none; stroke:#35271f; stroke-width:1.9; }
.weapon-icon .icon-highlight { fill:none; stroke:#fff0c1; stroke-width:1.45; }
.weapon-icon .icon-wood { fill:#b9773c; }
.weapon-icon .icon-metal { fill:#adbfba; }
.weapon-icon .icon-terracotta { fill:#cb6843; }
.weapon-icon .icon-leg { fill:#98714e; }
.weapon-icon .icon-red { fill:#e05f3d; }
.weapon-icon .icon-blue { fill:#66a2ad; }
.weapon-icon .icon-gold { fill:#f1c65f; }
.weapon.active { color: white; background: var(--orange); transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); }
.fire-controls { direction: rtl; }
#power { flex: 1; min-width: 85px; accent-color: var(--orange); cursor: pointer; }
.fire-button { min-width: 90px; min-height: 62px; padding: 8px 16px; color: white; background: var(--orange); font-size: 19px; }
.fire-button:disabled, .controls button:disabled { filter: grayscale(.7); opacity: .5; cursor: not-allowed; }

.settings-dialog { width: min(430px, calc(100vw - 30px)); max-height:min(92dvh,720px); overflow-y:auto; overscroll-behavior:contain; border: 4px solid var(--ink); border-radius: 22px; color: var(--ink); background: var(--paper); box-shadow: 10px 12px 0 rgba(0,0,0,.3); direction: rtl; }
.settings-dialog::backdrop { background: rgba(34,22,17,.65); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }
.dialog-head h2 { margin: 0; }
.close-button { width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; background: white; font-size: 25px; cursor: pointer; }
.settings-dialog label { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #d8c7a2; font-weight: 800; }
.settings-dialog input { width: 22px; height: 22px; accent-color: var(--orange); }
.settings-dialog select { min-width:130px; padding:7px 10px; border:2px solid #8a5938; border-radius:9px; color:var(--ink); background:#fffdf7; font:700 14px Cairo,sans-serif; }
.settings-hint { margin:8px 0 0; padding:8px 10px; border-radius:9px; color:#704127; background:#f3dfb5; font-size:12px; font-weight:800; }
.settings-note { margin-bottom: 0; font-size: 12px; line-height: 1.7; opacity: .7; }
.sound-check { margin-top:10px; padding:10px; border:2px solid #b27846; border-radius:12px; background:#fff8e7; }
.sound-check strong { display:block; margin-bottom:8px; font-size:13px; }
.sound-check div { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.sound-check button { min-height:42px; padding:6px 3px; border:2px solid #754627; border-radius:9px; color:var(--ink); background:#f4d18d; font:800 12px Cairo,sans-serif; transition:transform .15s,background .15s; }
.sound-check button.heard { transform:scale(.94); background:#ffac46; }
.install-dialog p { line-height: 1.9; }
.install-dialog .primary-button { width: 100%; margin-top: 6px; }
.rotate-message { display: none; position: fixed; z-index: 99; inset: 0; place-content: center; justify-items: center; gap: 9px; color: white; background: #40291f; text-align: center; }
.rotate-message div { font-size: 60px; }
.rotate-message strong { font-size: 24px; }
.rotate-message span { color: #f5c86c; }

@media (max-width: 920px), (max-height: 610px) {
  .game-screen { grid-template-rows: 53px 1fr 91px; }
  .hud { padding-block: 5px; }
  .team-name { font-size: 10px; }
  .turn-panel { grid-template-columns: 1fr 36px 48px; }
  #turn-timer { width: 34px; height: 34px; }
  .controls { grid-template-columns: 155px 145px 1fr 260px; gap: 6px; padding-block: 7px; }
  .control-button { min-width: 45px; min-height: 43px; }
  .control-button.small { min-width: 38px; }
  .weapon { min-width: 65px; padding: 4px; }
  .weapon-icon { width: 28px; height: 28px; }
  .weapon span:last-child { font-size: 10px; }
  .fire-button { min-width: 72px; min-height: 50px; font-size: 16px; }
}
@media (max-width: 680px) and (orientation: landscape) {
  .game-screen { grid-template-rows: 46px 1fr 100px; }
  .hud { grid-template-columns: 1fr 142px 1fr 34px; gap: 4px; padding: 4px 6px; }
  .team-panel { padding: 2px 5px; }
  .team-name { display: none; }
  .turn-panel { grid-template-columns: 1fr 31px 40px; gap: 3px; }
  #turn-label { font-size: 9px; }
  #turn-timer { width: 29px; height: 29px; border-width: 2px; font-size: 11px; }
  .wind { font-size: 9px; }
  .icon-button { width: 32px; font-size: 14px; }
  .controls { grid-template-columns: 126px 108px minmax(100px, 1fr) 184px; gap: 4px; padding: 5px 6px 7px; }
  .move-controls, .aim-controls, .fire-controls { gap: 4px; min-width: 0; }
  .control-button { min-width: 42px; min-height: 42px; padding: 2px; font-size: 15px; }
  .control-button.small { min-width: 38px; }
  .move-meter, .aim-readout { min-width: 26px; }
  .move-meter span, .aim-readout span, .power-wrap span { display: none; }
  .weapon-controls { min-width: 0; gap: 3px; }
  .weapon { min-width: 0; min-height:43px; padding: 2px; border-width: 2px; border-radius: 9px; box-shadow: 0 3px 0 var(--ink); grid-template-columns:1fr; grid-template-rows:25px auto; line-height:1.05; }
  .weapon-icon { width: 27px; height: 27px; }
  .weapon span:last-child { display:block; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .power-wrap { min-width: 34px; }
  #power { min-width: 50px; }
  .fire-button { min-width: 56px; min-height: 43px; padding: 4px; font-size: 13px; border-width: 2px; }
  .intro-card::before, .result-card::before { height: min(230px, calc(100% - 20px)); }
  .intro-card h2, .result-card h2 { font-size: 23px; }
  .intro-card p, .result-card p { font-size: 11px; max-width: 320px; }
}
@media (orientation: portrait) and (max-width: 800px) {
  .game-screen:not(.hidden) ~ .rotate-message, body:has(.game-screen:not(.hidden)) .rotate-message { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .game-screen { grid-template-rows: 48px minmax(0, 1fr) 96px; }
  .hud { grid-template-columns: 1fr minmax(132px, 180px) 1fr 44px; gap: 4px; padding: 2px max(6px, env(safe-area-inset-right)) 2px max(6px, env(safe-area-inset-left)); }
  .team-panel { padding: 2px 6px; border-radius: 8px; }
  .team-name { display: none; }
  .turn-panel { grid-template-columns: 1fr 32px 43px; gap: 3px; }
  #turn-label { font-size: 10px; }
  #turn-timer { width: 30px; height: 30px; border-width: 2px; font-size: 12px; }
  .wind { font-size: 10px; }
  .icon-button { width: 44px; height: 44px; border-radius: 8px; }
  .controls { grid-template-columns: 116px 108px minmax(220px, 1fr) minmax(170px, 210px); gap: 5px; padding: 5px max(7px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)); }
  .move-controls, .aim-controls, .fire-controls { gap: 4px; min-width: 0; }
  .control-button { min-width: 44px; min-height: 46px; padding: 2px; font-size: 18px; }
  .control-button.small { min-width: 44px; }
  .move-meter, .aim-readout, .power-wrap { min-width: 34px; }
  .move-meter span, .aim-readout span, .power-wrap span { display: none; }
  .weapon-controls { min-width: 0; gap: 3px; }
  .weapon { min-width: 0; min-height: 42px; padding: 2px; border-radius: 8px; grid-template-columns:1fr; grid-template-rows:24px auto; line-height:1.05; }
  .weapon-icon { width: 27px; height: 27px; }
  .weapon span:last-child { display:block; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  #power { min-width: 58px; height: 44px; }
  .fire-button { min-width: 64px; min-height: 48px; padding: 4px 8px; font-size: 15px; }
  #game-canvas { object-fit: contain; }
  .fullscreen-button { top: 7px; right: max(7px, env(safe-area-inset-right)); width: 44px; height: 44px; padding: 9px; }
  .speech-bubble { font-size: 12px; padding: 7px 10px; max-width: 210px; }
}

@media (max-width: 680px) and (max-height: 500px) and (orientation: landscape) {
  .controls { grid-template-columns: 100px 94px minmax(220px, 1fr) minmax(150px, 178px); gap: 3px; }
  .control-button { min-width: 44px; }
  .control-button.small { min-width: 44px; }
  .fire-button { min-width: 58px; }
  .move-meter, .aim-readout { display:none; }
  .weapon-controls { gap:2px; }
  .weapon { min-width:42px; min-height:42px; padding:1px; }
  .weapon-icon { width:24px; height:24px; }
}

/* Art direction: warm natural farm light, dark compact game controls. */
.menu-screen { background: linear-gradient(90deg,rgba(17,37,35,.28),rgba(17,37,35,.05)),url('./assets/farmyard-hd.webp') center / cover; }
.sun-disc { display:none; }
.menu-screen::before { background:linear-gradient(0deg,rgba(20,32,25,.55),transparent 65%); }
.menu-card { padding:25px 30px 19px; border:1px solid #fff2c78c; border-radius:24px; background:rgba(255,247,226,.95); box-shadow:0 22px 80px #15252050, inset 0 1px 0 #fff; }
.brand-icon { border:0; background:none; box-shadow:none; width:60px; height:70px; margin:-55px auto 0; transform:none; }
.brand-icon img { height:85px; width:70px; object-fit:contain; }
h1 { letter-spacing:0; line-height:1.2; text-shadow:0 3px 0 #f6ce7c; color:#764023; }
.eyebrow { letter-spacing:0; font-size:14px; }
.latin-title { letter-spacing:.34em; }
.primary-button, .secondary-button, .control-button, .fire-button, .weapon { border:1px solid #ffffff30; box-shadow:0 3px 0 #0003,inset 0 1px 0 #ffffff30; border-radius:12px; }
.primary-button,.fire-button { background:linear-gradient(#ec8a43,#c4592c); box-shadow:0 4px 0 #853e25,inset 0 1px 0 #ffd797; }
.peek { width:clamp(150px,24vw,330px); height:clamp(180px,35vh,380px); object-fit:contain; filter:drop-shadow(0 18px 12px #31271955); }
.peek-donkey {left:5%;bottom:5%;transform:rotate(-4deg);}
.peek-buffalo {right:3%;bottom:4%;transform:rotate(3deg);width:clamp(200px,29vw,400px);}
.peek-goat {display:none;}
.hud { background:#203932;box-shadow:0 2px 8px #0003; }
.team-panel {border:1px solid #ffffff25;background:linear-gradient(120deg,#2b6784,#254b5b);}
.team-red {background:linear-gradient(120deg,#974b3e,#683a35);}
.health-pip i {background:#d1e9b4; transition:width .18s ease-out;}
.stage, #game-canvas {background:#233b35;}
.controls {background:#203932;color:#f9ebcf;border-top:1px solid #ffffff25;grid-template-columns:180px 160px 1fr minmax(255px,340px);}
.control-button {background:#345148;color:#fff1cf;}
.weapon {background:#304b41;color:#f5e2bd;}
.weapon.active {background:#b96734;color:#fff;box-shadow:0 3px 0 #704127,inset 0 1px 0 #f6c477;transform:translateY(-2px);}
.move-meter span,.aim-readout span,.power-wrap span {font-size:12px;opacity:.8;}
.weapon span:last-child {font-size:12px;}
.speech-bubble {border:1px solid #cfaa72;box-shadow:0 5px 18px #271e2520;}
.turn-curtain,.intro-card,.result-card {background:rgba(22,39,31,.65);}
.intro-card::before,.result-card::before {border:1px solid #e7ce9b;box-shadow:0 15px 60px #0004;}
@media (max-width:920px),(max-height:610px) {
 .controls {grid-template-columns:145px 130px 1fr 230px;}
 .menu-card {padding:14px 24px;max-width:370px;}
 .menu-card h1 {font-size:58px;}
 .brand-icon {display:none;}
 .tagline {margin:10px auto;font-size:14px;}
 .menu-actions {gap:7px;}
 .primary-button {padding:10px 16px;}
 .secondary-button {padding:6px 12px;}
 .settings-button {margin-top:10px;}
 .weapon span:last-child {font-size:10px;}
}
@media (max-width:680px) and (orientation:landscape) {
 .controls {grid-template-columns:126px 108px minmax(100px,1fr) 184px;}
 .menu-card {padding:10px 22px;width:330px;}
 .menu-card h1 {font-size:42px;}
 .eyebrow {font-size:12px;}
 .latin-title {font-size:10px;}
 .tagline {font-size:12px;margin:5px auto;}
 .primary-button {padding:7px 12px;font-size:15px;}
 .secondary-button {padding:4px 12px;font-size:12px;}
 .settings-button {margin-top:7px;font-size:12px;}
 .button-note {font-size:10px;}
 .peek {opacity:.85;}
}

/* Mobile game HUD: one-thumb controls with an expandable weapon tray. */
@media (max-height: 560px) and (orientation: landscape) {
  .game-screen { grid-template-rows: 40px minmax(0, 1fr) 70px; }
  .hud { grid-template-columns: minmax(90px,1fr) minmax(150px,210px) minmax(90px,1fr) 36px; gap:4px; padding:3px max(6px,env(safe-area-inset-right)) 3px max(6px,env(safe-area-inset-left)); }
  .team-panel { display:flex; align-items:center; padding:3px 7px; border-radius:8px; }
  .team-name { display:none; }
  .team-health { width:100%; margin:0; gap:4px; }
  .health-pip { max-width:none; height:7px; }
  .turn-panel { grid-template-columns:1fr 30px 40px; gap:4px; }
  #turn-label { font-size:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  #turn-timer { width:29px; height:29px; border-width:2px; font-size:12px; }
  .wind { font-size:10px; }
  .icon-button { width:34px; height:34px; border-radius:8px; }
  .icon-button .ui-icon { width:18px; height:18px; }
  .controls { position:relative; grid-template-columns:104px 96px minmax(130px,170px) minmax(220px,1fr); gap:7px; min-height:0; padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .move-controls,.aim-controls,.fire-controls { gap:4px; min-width:0; }
  .control-button,.control-button.small { min-width:46px; width:46px; min-height:48px; height:48px; padding:0; font-size:20px; }
  .move-meter,.aim-readout { min-width:0; width:12px; }
  .move-meter span,.aim-readout span { display:none; }
  .move-meter b,.aim-readout b { font-size:11px; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; }
  .weapon-drawer-toggle { min-width:0; height:50px; display:grid; grid-template-columns:35px 1fr 16px; align-items:center; gap:5px; padding:4px 7px; border:1px solid #ffffff30; border-radius:12px; color:#fff4d5; background:#304b41; box-shadow:0 3px 0 #0003,inset 0 1px 0 #ffffff25; cursor:pointer; direction:rtl; }
  .selected-weapon-icon { display:grid; place-items:center; }
  .selected-weapon-icon .weapon-icon { width:35px; height:35px; }
  .selected-weapon-copy { min-width:0; display:grid; text-align:right; line-height:1.15; }
  .selected-weapon-copy small { color:#d7c39f; font-size:9px; font-weight:700; }
  .selected-weapon-copy b { overflow:hidden; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }
  .drawer-chevron { font-size:17px; transition:transform .18s ease; }
  .weapon-drawer-open .drawer-chevron { transform:rotate(180deg); }
  .weapon-controls { position:absolute; z-index:20; right:max(8px,env(safe-area-inset-right)); bottom:calc(100% + 7px); width:min(520px,calc(100vw - 16px)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:9px; border:1px solid #ffffff38; border-radius:15px; background:#1c332ddf; box-shadow:0 -8px 30px #0007; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); opacity:0; visibility:hidden; transform:translateY(8px) scale(.98); transform-origin:bottom right; transition:opacity .16s,transform .16s,visibility .16s; pointer-events:none; }
  .weapon-drawer-open .weapon-controls { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .weapon { min-width:0; min-height:66px; padding:5px 4px; grid-template-columns:38px 1fr; grid-template-rows:1fr; gap:4px; border-radius:10px; line-height:1.15; }
  .weapon-icon { width:35px; height:35px; }
  .weapon span:last-child { display:block; max-width:100%; overflow:visible; font-size:12px; line-height:1.25; white-space:normal; text-overflow:clip; }
  .weapon.active { transform:none; box-shadow:inset 0 0 0 2px #ffc875,0 3px 0 #704127; }
  .ammo-count { top:-5px; right:-4px; }
  .fire-controls { display:grid; grid-template-columns:58px minmax(74px,1fr) 78px; direction:ltr; }
  .power-wrap { min-width:0; direction:rtl; }
  .power-wrap span { display:block; font-size:9px; }
  .power-wrap b { font-size:12px; }
  #power { width:100%; min-width:74px; height:46px; }
  .fire-button { min-width:78px; width:78px; min-height:50px; height:50px; padding:3px 8px; font-size:16px; }
  .fullscreen-button { width:36px; height:36px; padding:7px; }
  .turn-banner { top:6px; min-width:160px; padding:5px 10px; }
  .turn-banner span { font-size:11px; }
  .online-chip { bottom:4px; }
}

@media (max-width: 700px) and (max-height: 560px) and (orientation: landscape) {
  .controls { grid-template-columns:96px 88px minmax(112px,145px) minmax(196px,1fr); gap:4px; }
  .control-button,.control-button.small { min-width:42px; width:42px; }
  .fire-controls { grid-template-columns:48px minmax(64px,1fr) 70px; }
  .fire-button { min-width:70px; width:70px; }
  .selected-weapon-copy b { font-size:12px; }
  .weapon-controls { width:min(470px,calc(100vw - 12px)); }
}

.room-dialog { width:min(460px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; border:1px solid #f8e2b7; background:rgba(255,247,226,.98); box-shadow:0 22px 80px #0008; }
.room-entry,.room-lobby { display:grid; gap:12px; margin-top:14px; text-align:center; }
.room-entry label { justify-content:center; padding:4px 0; border:0; }
.settings-dialog .room-entry input {
  width:100%; height:58px; padding:8px 16px; border:2px solid #8a5938; border-radius:13px;
  color:#38241b; background:#fffdf7; font-size:26px; font-weight:900; letter-spacing:.22em; text-align:center; text-transform:uppercase;
}
.lobby-kicker { color:#9c3d24; font-size:13px; font-weight:900; }
#lobby-code { margin:-8px 0 0; font-size:44px; line-height:1.2; letter-spacing:.14em; color:#704127; }
#lobby-status { margin:0; min-height:30px; font-weight:800; }
.lobby-players { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; min-height:31px; }
.animal-picker { display:grid; gap:5px; padding:8px; border:2px solid #dbc9a5; border-radius:13px; background:#fffaf0; }
.animal-picker strong { font-size:14px; }
.animal-picker-fields { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.animal-picker-fields label { display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; align-items:center; gap:0 5px; padding:4px; border:1px solid #d7bb8f; border-radius:9px; background:#fff; }
.animal-picker-fields img { grid-row:1/3; width:42px; height:42px; object-fit:contain; }
.animal-picker-fields span { font-size:11px; font-weight:800; text-align:right; }
.animal-picker-fields select { width:100%; min-width:0; border:0; background:transparent; color:#38241b; font-size:13px; font-weight:900; cursor:pointer; }
.animal-picker small { color:#6c5a43; font-size:11px; line-height:1.25; }
.map-setting { display:grid; gap:6px; padding:8px; border:2px solid #dbc9a5; border-radius:13px; background:#fffaf0; text-align:right; }
.map-setting > strong { font-size:14px; }
.map-picker { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.map-choice { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:7px; min-width:0; padding:5px; border:2px solid #d8c7a3; border-radius:11px; color:#38241b; background:#fff; text-align:right; cursor:pointer; }
.map-choice.selected { border-color:#c95c35; box-shadow:0 0 0 2px #c95c3526; background:#fff6e4; }
.map-choice:disabled { cursor:default; opacity:.86; }
.map-choice img { width:72px; height:48px; border-radius:7px; object-fit:cover; }
.map-choice span { display:grid; gap:1px; min-width:0; }
.map-choice b { font-size:12px; line-height:1.2; }
.map-choice small,.map-note { color:#6c5a43; font-size:10px; line-height:1.3; }
.map-note { text-align:right; }
.local-map-setting { margin-bottom:10px; }
.room-size-setting { display:flex !important; justify-content:space-between !important; align-items:center; gap:8px; padding:6px 8px !important; border:2px solid #dbc9a5 !important; border-radius:10px; font-size:13px; font-weight:900; }
.room-size-setting.hidden { display:none !important; }
.room-size-setting select { min-width:0; max-width:63%; font-size:13px; }
.settings-dialog .room-entry #player-name { text-align:right; letter-spacing:0; text-transform:none; font-size:16px; height:46px; }
.exit-dialog { width:min(380px,calc(100vw - 30px)); text-align:center; }
.exit-actions { display:flex; justify-content:center; gap:10px; margin-top:12px; }
.exit-actions button { flex:1; }
.menu-leave-button { width:100%; margin-top:12px; padding:8px 12px; border:1px solid #a8674c; border-radius:10px; color:#7d3025; background:#f0d2bf; font:900 14px Cairo,sans-serif; cursor:pointer; }
.local-animals-dialog { width:min(540px,calc(100vw - 28px)); max-height:min(92dvh,730px); overflow:auto; }
.local-animals-hint { margin:5px 0 13px; font-size:14px; }
.local-animals-groups { display:grid; gap:10px; margin-bottom:14px; }
.local-animals-groups fieldset { min-width:0; border:2px solid #dbc9a5; border-radius:13px; padding:8px; }
.local-animals-groups legend { padding:0 7px; font-size:15px; font-weight:900; }
.local-animals-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.local-animals-fields label { min-width:0; display:grid; place-items:center; gap:3px; padding:5px; border:1px solid #decba8; border-radius:10px; background:#fff; }
.local-animals-fields img { width:52px; height:52px; object-fit:contain; }
.local-animals-fields select { width:100%; min-width:0; border:0; background:#fff; font:800 13px Cairo,sans-serif; text-align:center; color:#38241b; }
.local-animals-dialog .primary-button { width:100%; }
.player-chip { padding:4px 9px; border:2px solid var(--ink); border-radius:999px; color:white; font-size:12px; font-weight:900; box-shadow:0 2px 0 var(--ink); }
.player-chip.blue { background:var(--blue); }
.player-chip.red { background:var(--red); }
.player-chip.you::after { content:" · إنت"; color:#fff4b9; }
.ffa-hud .team-panel { background:#24453e; }
.ffa-hud .team-name { display:none; }
.ffa-hud .team-health { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:3px; }
.ffa-team { max-width:110px; padding:2px 5px; border:2px solid; border-radius:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:white; background:#243630; font:800 10px Cairo,sans-serif; }
.ffa-team.current { background:#fff4cf; color:#33271e; box-shadow:0 0 0 2px #fff4cf77; }
.lobby-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.room-error { margin:12px 0 0; padding:9px 12px; border-radius:10px; color:#8d251d; background:#ffe1d7; font-size:13px; font-weight:800; text-align:center; }
.online-chip {
  position:absolute; z-index:8; top:auto; bottom:8px; left:50%; transform:translateX(-50%); padding:4px 11px;
  border:1px solid #ffffff55; border-radius:999px; color:#fff5d7; background:#203932df;
  box-shadow:0 4px 16px #0005; font-size:11px; font-weight:900; letter-spacing:.08em; pointer-events:none;
}
.online-chip.away { color:#ffe0af; background:#813f2fef; }

@media (max-height:500px) and (orientation:landscape) {
  .room-dialog { max-height:calc(100dvh - 12px); padding:12px 18px; }
  .room-dialog .dialog-head h2 { font-size:19px; }
  .settings-dialog .room-entry input { height:46px; font-size:22px; }
  #lobby-code { font-size:34px; }
  .room-entry,.room-lobby { gap:7px; margin-top:7px; }
  .map-choice { grid-template-columns:54px minmax(0,1fr); gap:5px; padding:4px; }
  .map-choice img { width:54px; height:38px; }
  .map-choice small { display:none; }
  .online-chip { bottom:4px; }
}

@media (max-width:380px) {
  .map-choice { grid-template-columns:56px minmax(0,1fr); gap:5px; }
  .map-choice img { width:56px; height:40px; }
  .map-choice b { font-size:11px; }
  .map-choice small { font-size:9px; }
}