/* Ridge Fire: the field fills the screen; a slim bar on top, the aiming controls below. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: #262b12; }
#app { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto; }
#app.on-title { grid-template-rows: 0 1fr 0; }
#app > header { grid-row: 1; }
#app > main { grid-row: 2; }
#app > footer { grid-row: 3; }

.rf-top { position: relative; z-index: 5; min-height: 60px; padding: 8px 12px; gap: 8px; background: linear-gradient(#262b12f2, #262b1200); }
#app.on-title .rf-top { position: fixed; top: 0; left: 0; right: 0; background: none; }
.turn-chip { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; font-weight: 700; font-size: 17px; }
.turn-chip i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); flex: none; box-shadow: 0 0 10px currentColor; }
.turn-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wind { display: grid; justify-items: center; align-content: center; gap: 1px; background: #1e220db3; border: 2px solid var(--line); border-radius: 999px; padding: 3px 12px 4px; font-weight: 700; line-height: 1; }
.wind .wl { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: #e6b54a; }
.wind .wv { display: flex; align-items: center; gap: 4px; }
.wind .w-arrow { display: block; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.wind b { font-size: 17px; font-variant-numeric: tabular-nums; }
.wind .wu { font-size: 11px; font-weight: 700; color: var(--soft); }
.wind .w-calm { display: none; font-size: 15px; }
.wind.calm .w-arrow, .wind.calm #wind-n, .wind.calm .wu { display: none; }
.wind.calm .w-calm { display: block; }

#stage { position: relative; min-height: 0; overflow: hidden; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

/* Title */
.title-card { position: absolute; z-index: 4; inset: 0; margin: auto; height: max-content; max-height: calc(100% - 24px); overflow: auto; width: min(440px, calc(100% - 32px)); text-align: center;
  background: #3a4120d9; border: 3px solid var(--ink); border-radius: 26px; padding: 18px 18px 16px; box-shadow: 0 8px 0 var(--ink), 0 30px 60px #0008; backdrop-filter: blur(4px); animation: g-rise .5s ease-out both; }
.title-card > * + * { margin-top: 12px; }
.logo { margin: -6px 0 0; line-height: 0; }
.logo svg { width: min(320px, 100%); height: auto; filter: drop-shadow(0 6px 0 #1c1f0eaa); }
.tag { margin: 0; color: var(--soft); font-size: 16px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #1e220d; border-radius: 16px; padding: 5px; border: 2px solid var(--line); }
.seg button { min-height: 44px; border: 0; box-shadow: none; border-radius: 12px; background: transparent; color: var(--soft); font-size: 16px; padding: 6px 8px; }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--ink); }
.opts > * + * { margin-top: 10px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font-weight: 600; font-size: 15px; color: var(--soft); }
.chips { display: flex; gap: 6px; }
.chips button { min-height: 40px; min-width: 44px; padding: 4px 10px; font-size: 15px; border-width: 2px; box-shadow: 0 3px 0 var(--ink); background: var(--panel2); color: var(--text); }
.chips button[aria-pressed="true"] { background: var(--teal); color: var(--ink); }
.start { width: 100%; font-size: 22px; min-height: 58px; }
.best { margin: 8px 0 0; font-size: 14px; }

/* The title card's way into online rooms. */
.online { border-top: 2px solid var(--line); padding-top: 12px; }
.online > * + * { margin-top: 8px; }
.online .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.online .row2 button { min-height: 48px; font-size: 16px; padding: 6px 8px; }
.join-box { display: flex; flex-wrap: wrap; gap: 8px; }
.join-box .join-label { flex-basis: 100%; font-weight: 700; }
.join-box input { flex: 1; min-width: 0; min-height: 48px; border-radius: 14px; border: 3px solid var(--ink); background: #efe6c4; color: var(--ink); padding: 6px 12px; font-size: 20px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.join-box button { min-height: 48px; }

/* Turn banner */
.banner { position: absolute; z-index: 3; left: 50%; top: 14px; transform: translateX(-50%); pointer-events: none; text-align: center;
  background: #efe6c4; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 8px 22px; box-shadow: 0 5px 0 var(--ink); white-space: nowrap; animation: rf-banner .45s cubic-bezier(.2,1.5,.4,1) both; }
.banner b { font-size: 22px; display: block; line-height: 1.1; }
.banner small { display: block; font-size: 14px; color: #5b5636; font-weight: 600; }
.banner .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); margin-right: 8px; vertical-align: -1px; }
@keyframes rf-banner { from { transform: translate(-50%, -30px) scale(.7); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

#howto-slot { position: absolute; z-index: 3; left: 12px; right: 12px; top: 84px; display: flex; justify-content: center; pointer-events: none; }
#howto-slot .howto { pointer-events: auto; max-width: 520px; }

/* Controls */
.controls { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(#3a4120, #262b12); border-top: 3px solid var(--ink); }
.dial { position: relative; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; background: #1e220d; border: 2px solid var(--line); border-radius: 16px; padding: 18px 4px 6px; }
.dial .lab { position: absolute; top: 3px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .08em; }
.dial output { text-align: center; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dial .step { min-height: 40px; padding: 0; font-size: 18px; border-width: 2px; box-shadow: 0 3px 0 var(--ink); background: var(--panel2); color: var(--text); }
.meter { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.meter i { display: block; height: 100%; width: 60%; background: linear-gradient(90deg, var(--teal), var(--accent), var(--pink)); }
.weapon-pick { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 4px; min-width: 0; }
.weapon-pick > button { margin: 0; }
.wstep { min-height: 56px; padding: 0; font-size: 16px; border-width: 2px; box-shadow: 0 3px 0 var(--ink); background: var(--panel2); color: var(--text); border-radius: 12px; }
.wstep:disabled { opacity: .35; }
.weapon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; min-height: 56px; min-width: 0; padding: 4px 4px;
  background: var(--panel2); color: var(--text); border: 2px solid #e6b54a; border-radius: 14px; box-shadow: 0 3px 0 var(--ink); font-weight: 700; }
.weapon:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.weapon .w-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; max-width: 100%; }
.weapon .w-ico { flex: none; line-height: 0; }
.weapon .w-ico svg { width: 20px; height: 20px; }
.weapon #weapon-name { font-size: 16px; line-height: 1.05; text-align: center; }
@media (max-width: 480px) {
  .weapon-pick { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 3px; }
  .wstep { font-size: 13px; border-radius: 10px; }
  .weapon { height: 66px; padding: 3px 2px; }
  .weapon .w-ico { display: none; }
  .weapon #weapon-name { font-size: 14px; }
  .weapon small { font-size: 11px; }
}
.weapon small { font-size: 12px; color: var(--soft); font-weight: 600; white-space: nowrap; }
.fire { font-size: 24px; min-height: 56px; letter-spacing: .04em; }
/* The launch button (Doug, 1 Oct: "make it look like an actual missile button"): a hazard-striped housing, a big
   glossy red dome that pushes in, an ARMED light that blinks on your turn, and a LOCKED safety cover between turns. */
.fire { position: relative; padding: 5px; border-radius: 18px; border: 3px solid var(--ink); color: #efe6c4; overflow: hidden;
  background: repeating-linear-gradient(135deg, #e6b54a 0 10px, #1c1f0e 10px 20px); box-shadow: 0 5px 0 var(--ink), 0 0 0 0 #ff3b3b00; }
.fire-cap { display: grid; place-items: center; height: 100%; min-height: 44px; border-radius: 13px; border: 3px solid #1c1f0e;
  background: radial-gradient(ellipse 70% 55% at 50% 28%, #ff9a9a, #ff3b3b 45%, #c3102a 80%, #8a0a20);
  box-shadow: inset 0 -6px 0 #7a0818, inset 0 3px 0 #ffffff55, 0 4px 0 #1c1f0e; transition: transform .06s, box-shadow .06s; }
.fire-txt { font-size: 26px; font-weight: 700; letter-spacing: .14em; text-shadow: 0 2px 0 #7a0818, 0 0 12px #e6b54a88; }
.fire-txt::before { content: '🚀 '; letter-spacing: 0; }
.fire-led { position: absolute; top: 9px; right: 11px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #1c1f0e; background: #58d66f;
  box-shadow: 0 0 8px #58d66f; animation: fire-led 1s steps(2) infinite; }
.fire:not(:disabled):hover .fire-cap { filter: brightness(1.08); }
.fire:active .fire-cap { transform: translateY(4px); box-shadow: inset 0 -2px 0 #7a0818, inset 0 3px 0 #ffffff33, 0 0 0 #1c1f0e; }
.fire:not(:disabled) { animation: fire-armed 1.4s ease-in-out infinite; }
.fire.launch .fire-cap { animation: fire-launch .45s ease-out; }
.fire.launch::after { content: ''; position: absolute; inset: 0; border-radius: 15px; background: radial-gradient(circle, #efe6c4, #e6b54a88 40%, transparent 70%); animation: fire-flash .45s ease-out both; pointer-events: none; }
/* between turns: the safety cover is down */
.controls.busy .fire, .fire:disabled { opacity: 1; }
.controls.busy .fire .fire-led, .fire:disabled .fire-led { background: #ff3b3b; box-shadow: none; animation: none; }
.controls.busy .fire::before, .fire:disabled::before { content: 'LOCKED'; position: absolute; z-index: 2; inset: 5px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(#d9cfa4cc, #9a8f62dd); border: 3px solid #1c1f0e; color: #1c1f0e; font-size: 15px; font-weight: 700; letter-spacing: .2em;
  animation: fire-cover .25s .3s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes fire-cover { from { transform: translateY(-115%); } to { transform: none; } }
@keyframes fire-led { 50% { background: #1d6b30; box-shadow: none; } }
@keyframes fire-armed { 50% { box-shadow: 0 5px 0 var(--ink), 0 0 18px 4px #ff3b3b99; } }
@keyframes fire-launch { 0% { transform: translateY(5px) scale(.97); } 60% { transform: translateY(-2px) scale(1.02); } 100% { transform: none; } }
@keyframes fire-flash { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .fire, .fire-led, .fire.launch .fire-cap, .fire.launch::after, .fire::before { animation: none !important; } }
.controls.busy .dial, .controls.busy .weapon-pick, .controls.busy .fire { opacity: .45; pointer-events: none; }

/* Win */
.win { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, #3a412066, #1e220dcc); }
.win-card { width: min(380px, 100%); text-align: center; padding: 18px 20px 20px; animation: g-pop .4s cubic-bezier(.2,1.5,.4,1) both; }
.win-card > * + * { margin-top: 12px; }
.win-card h2 { font-size: 30px; }
.win-card p { margin-bottom: 0; }
#win-art { width: 240px; height: 120px; margin: -4px auto 0; display: block; }
.win-best { color: var(--accent); font-weight: 700; }
.win-card button { width: 100%; }

@media (min-width: 760px) {
  .controls { grid-template-columns: minmax(0, 220px) minmax(0, 220px) 250px 200px; justify-content: center; }
  .rf-top { padding: 10px 18px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .controls { grid-template-columns: 1fr 1fr 200px 120px; padding-top: 6px; padding-bottom: 6px; }
  .dial { padding-top: 14px; }
  .title-card { padding: 10px 14px; }
  .title-card > * + * { margin-top: 8px; }
  .logo svg { width: 220px; }
}
/* Name boxes on the title card */
.opt label { display: inline-flex; align-items: center; gap: 8px; }
.opt .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; }
.nm { width: 9.5em; min-width: 0; font: inherit; font-weight: 700; font-size: 16px; color: var(--ink); background: var(--text); border: 3px solid var(--ink); border-radius: 12px; padding: 6px 10px; min-height: 44px; }
/* Keep the title card (and its logo) clear of the Back and Full screen buttons above it. */
#app.on-title .title-card { inset: 72px 0 12px; max-height: calc(100% - 84px); }
.rf-top .fs-btn { margin-left: auto; }

/* The arsenal: slides up from the bottom over the field (Doug, 1 Oct). */
.weapon .ars-tag { font-style: normal; font-size: 10.5px; white-space: nowrap; letter-spacing: .06em; text-transform: uppercase; color: #e6b54a; font-weight: 700; }
.arsenal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: #1e220d99; }
.arsenal.hidden { display: none; }
.ars-card { width: min(720px, 100%); max-height: 86vh; overflow: auto; background: var(--panel); border: 3px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 0 #1c1f0e66; animation: ars-up .28s cubic-bezier(.2,1.2,.4,1); }
@keyframes ars-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ars-card { animation: none; } }
.ars-head { display: flex; align-items: center; justify-content: space-between; }
.ars-head h2 { margin: 0; margin-right: auto; }
.ars-head .ars-info { min-height: 44px; margin-right: 8px; font-size: 14px; }
.ars-guide.hidden, #ars-lists.hidden { display: none; }
.ars-head button { min-width: 44px; min-height: 44px; }
.ars-card h3 { margin: 12px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--soft); }
.ars-note { margin: -2px 0 6px; font-size: 14px; }
.ars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ars-item { display: grid; grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; min-height: 56px; padding: 8px 10px; background: var(--panel2); color: var(--text); border: 2px solid var(--line); border-radius: 14px; box-shadow: none; }
.ars-item svg { grid-row: 1 / 3; }
.ars-item .ai-name { font-weight: 700; font-size: 15px; }
.ars-item .ai-note { grid-column: 2; font-size: 12px; color: var(--soft); font-weight: 500; }
.ars-item .ai-left { grid-row: 1 / 3; grid-column: 3; font-size: 18px; }
.ars-item.on { border-color: #e6b54a; box-shadow: 0 0 0 2px #e6b54a inset; }
.ars-item:disabled { opacity: .35; }
.ars-confirm p { margin: 6px 0; }
.ars-confirm .warn { color: #ff8fb0; font-weight: 600; }
.drivebar { grid-row: 3; position: relative; z-index: 5; display: grid; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: #262b12f2; }
.drivebar.hidden { display: none; }
.drivebar .lab { margin: 0; font-weight: 700; }
.drivebar small { color: var(--soft); font-weight: 500; margin-left: 6px; }
.drivebar input[type=range] { width: 100%; min-height: 44px; accent-color: #ff4d4d; }
.drivebar .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-height: 500px) {
  .ars-card { max-height: 94vh; padding-top: 8px; }
  .ars-card h3 { margin: 6px 0 4px; }
  .ars-item { min-height: 44px; padding: 4px 8px; }
  .ars-item .ai-note { display: none; }
  .ars-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
}

/* Doug, 1 Oct (third batch): New ridge, War mode supply drops, medals, tank details. */
.rf-top .reroll { min-height: 44px; margin-left: 8px; }
.daily-row { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.daily-row button { width: 100%; }
.daily-row b { color: #e6b54a; }
.win-card #try-war, .win-card #again, .win-card #menu { width: 100%; }
.win-card .invite { margin-top: 0; }
.supply { text-align: left; display: grid; gap: 8px; margin: 4px 0 6px; }
.supply.hidden { display: none; }
.sup-head { margin: 0; font-size: 14px; color: var(--soft); }
.pay-row .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.medal-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: #1e220dcc; }
.medal-pop.hidden { display: none; }
.medal-card { width: min(360px, 100%); text-align: center; background: var(--panel); border: 3px solid var(--ink); border-radius: 22px; padding: 20px; box-shadow: 0 8px 0 var(--ink); animation: medal-in .6s cubic-bezier(.2,1.6,.4,1) both; }
.medal-art svg { filter: drop-shadow(0 6px 0 #1c1f0e66); animation: medal-spin 1s ease-out both; }
.medal-kicker { margin: 6px 0 0; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #e6b54a; font-weight: 700; }
.medal-card h2 { margin: 2px 0 6px; font-size: 30px; }
.medal-card button { width: 100%; margin-top: 10px; }
@keyframes medal-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes medal-spin { from { transform: rotateY(180deg) scale(.6); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .medal-card, .medal-art svg { animation: none; } }
.rf-sheet { max-height: 88vh; overflow: auto; text-align: left; width: min(460px, 100%); }
.rf-sheet h2 { margin: 0; }
.rf-sheet h3 { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--soft); }
.medal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.medal-list li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.medal-list li.not svg { filter: grayscale(1) brightness(.6); opacity: .55; }
.medal-list p { margin: 2px 0; font-size: 14px; }
.medal-list small { color: var(--soft); }
@media (max-height: 500px) { .medal-card { padding: 12px; } .medal-card h2 { font-size: 24px; } .medal-art svg { width: 70px; height: 88px; } }

/* Loadout picker (Doug, 1 Oct): reuses the arsenal sheet, as a full panel over the menu. */
.loadout { align-items: center; z-index: 45; }
.lo-card { border-bottom: 3px solid var(--ink); border-radius: 22px; max-height: 94vh; }
.lo-sub { margin: 2px 0 0; }
.lo-count { float: right; color: #e6b54a; letter-spacing: 0; text-transform: none; font-size: 15px; }
.lo-note { font-size: 13px; margin: 10px 0; }
.ars-item .ai-pick { grid-row: 1 / 3; grid-column: 3; min-width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; font-size: 16px; font-weight: 700; background: #1e220d; color: var(--soft); }
.ars-item.on .ai-pick { background: #e6b54a; color: #1c1f0e; }

/* ---------- Today's Battle, Battle Coins, leaderboard, sound (Doug, 1 Oct) ---------- */
.todays { margin-top: 12px; padding: 10px; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(#4a5228, #3a4120); display: grid; gap: 8px; }
.todays-go { width: 100%; font-size: 20px; min-height: 52px; }
.todays-line { margin: 0; font-size: 14px; }
.todays .row2 button { min-height: 44px; }
/* The coin (Doug, 6 Oct: "the money icons look like crap"): one drawing for Battle Coins and Battle Bucks, a gold
   rim, an embossed face with a stamped star and a shine, as an SVG image so every copy on the page shares it. */
.coin-ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E %3Cdefs%3E %3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4bf'/%3E%3Cstop offset='.35' stop-color='%23f2c75a'/%3E%3Cstop offset='.7' stop-color='%23d59a2a'/%3E%3Cstop offset='1' stop-color='%238f5d12'/%3E%3C/linearGradient%3E %3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c78b22'/%3E%3Cstop offset='.55' stop-color='%23e9b84a'/%3E%3Cstop offset='1' stop-color='%23ffe08a'/%3E%3C/linearGradient%3E %3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6c8'/%3E%3Cstop offset='1' stop-color='%23f0c048'/%3E%3C/linearGradient%3E %3C/defs%3E %3Ccircle cx='16' cy='16' r='15' fill='url(%23r)' stroke='%233b2706' stroke-width='1.2'/%3E %3Ccircle cx='16' cy='16' r='11.2' fill='url(%23f)' stroke='%238a5a12' stroke-width='1'/%3E %3Ccircle cx='16' cy='16' r='12.4' fill='none' stroke='%23fff2b8' stroke-width='.7' stroke-opacity='.7' stroke-dasharray='1.2 1.4'/%3E %3Cpath d='M16 8.6l2.2 4.6 5 .6-3.7 3.4 1 5-4.5-2.5-4.5 2.5 1-5-3.7-3.4 5-.6z' fill='%238a5a12' transform='translate(0 .9)' opacity='.55'/%3E %3Cpath d='M16 8.6l2.2 4.6 5 .6-3.7 3.4 1 5-4.5-2.5-4.5 2.5 1-5-3.7-3.4 5-.6z' fill='url(%23s)' stroke='%239a6a16' stroke-width='.7' stroke-linejoin='round'/%3E %3Cellipse cx='11' cy='7.6' rx='5.2' ry='2.4' fill='%23fff' opacity='.55' transform='rotate(-28 11 7.6)'/%3E %3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 0 rgba(28, 31, 14, .7)); }
.coin-ico.big { width: 1.35em; height: 1.35em; }
/* A price: the coin and the number in the stencil face, a chip that never wraps or clips. */
.coin-amt { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; white-space: nowrap; flex: none;
  background: linear-gradient(#262b10, #171a0a); border: 1px solid #e6b54a73; box-shadow: inset 0 1px 0 #ffffff14; line-height: 1; }
.coin-amt b { font: 400 14px/1 'Black Ops One', Inter, system-ui, sans-serif; letter-spacing: .03em; color: #f3dfa0; }
.coin-amt.big { padding: 3px 10px 3px 3px; }
.coin-amt.big b { font-size: 19px; }
.coin-amt.flat { background: none; border: 0; box-shadow: none; padding: 0; }
.coin-amt.flat b { color: inherit; font-size: 15px; }
.coin-num { font-family: 'Black Ops One', Inter, system-ui, sans-serif; font-weight: 400; color: #f3dfa0; letter-spacing: .03em; }
.coins-chip { margin: 8px auto 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 44px; width: 100%;
  background: var(--panel2); color: var(--text); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); font-size: 16px; }
.coins-chip b { color: #f3dfa0; font: 400 19px/1 'Black Ops One', Inter, system-ui, sans-serif; letter-spacing: .03em; }
.coins-what { color: var(--soft); font-size: 14px; text-decoration: underline; }
.sound-btn { margin-left: auto; min-width: 44px; min-height: 40px; padding: 4px 8px; font-size: 18px; }
.linkish { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; color: var(--teal); text-decoration: underline; font: inherit; cursor: pointer; }
.win-coins { text-align: left; margin: 6px 0; padding: 8px 10px; border-radius: 14px; background: #e6b54a1a; border: 2px solid #e6b54a66; }
.win-coins ul, .coin-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 3px; }
.win-coins li, .coin-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.win-coins li b, .coin-list li b { color: #e6b54a; white-space: nowrap; }
.wc-head { margin: 0; font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wc-head small { font-weight: 500; color: var(--soft); font-size: 14px; }
.wc-foot { margin: 4px 0 0; font-size: 14px; }
.win-board { text-align: left; margin: 6px 0; }
.bd-me { margin: 0 0 4px; font-size: 16px; }
.bd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.bd-list li { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 10px; background: #ffffff0d; font-size: 15px; }
.bd-list li.me { background: #8fa64a33; outline: 2px solid var(--teal); }
.bd-list .bd-n { font-weight: 700; color: var(--soft); }
.bd-list .bd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-list .bd-shots { color: var(--soft); font-size: 13px; }
.bd-list b { color: #e6b54a; font-variant-numeric: tabular-nums; }
.hat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hat-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center; }
.hat-list button { min-width: 92px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.hat-pic { display: grid; place-items: center; background: #ffffff10; border-radius: 10px; height: 36px; }
.sheet-body h3 { margin: 6px 0 0; font-size: 17px; }
.ars-shop { margin-top: 10px; padding-top: 6px; border-top: 2px dashed #e6b54a55; }
.ars-shop h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shop-item.on { outline: 3px solid #e6b54a; }
.rf-top .sound-btn ~ .fs-btn { margin-left: 0; } /* the sound switch already pushes the right-hand buttons over */

/* ---------- The menu fits one screen (Doug, 1 Oct: "no up or down scrolling at the menu") ---------- */
#app.on-title .title-card { width: min(460px, calc(100% - 24px)); padding: 12px 14px; overflow: hidden; }
.title-card > * + * { margin-top: 0; }
.t-page { display: grid; gap: 10px; }
.t-page.hidden { display: none; }
.t-brand { display: grid; gap: 8px; justify-items: center; }
.t-brand .logo svg { width: min(250px, 62vw); }
.t-menu { display: grid; gap: 10px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { display: grid; gap: 2px; align-content: center; min-height: 74px; padding: 8px 10px; border-radius: 16px; text-align: center; color: var(--ink); }
.tile b { font-size: 17px; line-height: 1.15; }
.tile small { font-size: 12.5px; font-weight: 600; opacity: .85; line-height: 1.2; }
.t-solo { background: var(--accent); }
.t-daily { background: var(--teal); }
.t-pass { background: #d9a27a; }
.t-online { background: #d8cf9e; }
.t-far { background: #b9d3a0; }
.t-join { background: #e6d9b8; }
.t-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; }
.t-links .small { min-height: 40px; padding: 4px 10px; font-size: 14px; }
.t-links #medal-count { color: #e6b54a; }
.small-link { font-size: 14px; padding: 8px 6px; }
.coins-chip { margin: 0 auto; min-height: 38px; font-size: 15px; width: auto; padding: 4px 14px; }
.t-head { display: flex; align-items: center; gap: 10px; }
.t-head h2 { margin: 0; font-size: 22px; flex: 1; text-align: left; }
.t-cols { display: grid; gap: 10px; }
.t-col { display: grid; gap: 10px; align-content: start; }
.t-setup .best { margin: 0; }
.t-online-page .online { border-top: 0; padding-top: 0; }
.t-online-page #invite-slot .invite { margin-top: 0; }

/* Phones on their side and short laptop windows: the logo beside the menu, two columns for setup. */
@media (orientation: landscape) and (max-height: 620px) {
  #app.on-title .title-card { width: min(820px, calc(100% - 24px)); inset: 62px 0 8px; max-height: calc(100% - 70px); padding: 10px 14px; }
  .t-home { grid-template-columns: minmax(170px, 0.8fr) 1.2fr; align-items: center; gap: 14px; }
  .t-brand .logo svg { width: min(230px, 28vw); }
  .tile { min-height: 64px; }
  .t-cols { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .t-setup .opts > * + * { margin-top: 6px; }
  .t-online-page { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .t-online-page .t-head { grid-column: 1 / -1; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .tile { min-height: 54px; padding: 6px 8px; }
  .tile b { font-size: 15px; }
  .t-brand .logo svg { width: min(200px, 26vw); }
  .opt .chips button { min-height: 36px; }
  .pl-btn { min-height: 38px; }
  .t-page { gap: 8px; }
  .t-online-page .online p { font-size: 14px; margin: 0 0 6px; }
  .t-online-page .row2 button { font-size: 15px; padding-inline: 6px; }
  .t-col .chips button { padding-inline: 8px; font-size: 14px; }
}
/* Short phones held upright (360x640): six tiles and the links still fit, so the tiles and logo shrink. */
@media (orientation: portrait) and (max-height: 760px) {
  .tile { min-height: 0; padding: 6px 8px; }
  .tile b { font-size: 15px; }
  .tile small { font-size: 12px; }
  .t-brand .logo svg { width: min(200px, 54vw); }
  .t-page, .t-menu { gap: 8px; }
  .tiles { gap: 6px; }
}
/* A TV across the room: the same menu, bigger. */
@media (min-width: 1600px) and (min-height: 900px) {
  #app.on-title .title-card { zoom: 1.35; }
}

/* Teams (Sides on the setup page) */
.sides-line { margin: 0; font-size: 14px; line-height: 1.35; text-align: left; }
.sides-opt .chips { flex-wrap: wrap; }

/* Players on the setup page (Doug, 1 Oct evening: easy with the phone sideways): one button per player, and a
   pop-up at the top of the screen for the name and color, so the keyboard never covers it. */
.names { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.names.one { grid-template-columns: 1fr; margin-top: 0; min-width: 0; flex: 1; max-width: 220px; }
.opt .names.one { justify-self: end; }
.pl-btn { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; width: 100%; background: var(--text); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: none; font-size: 16px; text-align: left; }
.pl-btn .dot { width: 22px; height: 22px; flex: none; border-width: 3px; }
.pl-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pl-btn span.muted { color: #6b6646; }
.pl-btn small { color: #6b6646; font-size: 15px; }
.player-pop { position: fixed; inset: 0; z-index: 45; display: grid; justify-items: center; align-items: start; padding: max(10px, env(safe-area-inset-top)) 12px 12px; background: #1e220dcc; }
.player-pop.hidden { display: none; }
.pp-card { width: min(600px, 100%); display: grid; gap: 10px; padding: 12px 14px; animation: g-pop .25s cubic-bezier(.2,1.4,.4,1) both; }
.pp-head { display: flex; align-items: center; gap: 10px; }
.pp-head h2 { margin: 0; flex: 1; font-size: 20px; }
.pp-head button { min-height: 44px; min-width: 88px; }
.pp-name { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; font-weight: 700; }
.pp-name .nm { width: 100%; }
.pp-colors { display: grid; grid-template-columns: repeat(5, 44px); gap: 10px; justify-content: center; }
.pp-colors button { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.pp-colors button[aria-pressed="true"] { outline: 3px solid var(--text); outline-offset: 3px; }
.pp-colors button:disabled { opacity: .25; box-shadow: none; }
@media (orientation: landscape) { .pp-colors { grid-template-columns: repeat(10, 44px); } }
@media (prefers-reduced-motion: reduce) { .pp-card { animation: none; } }
.arms-line { margin: 0; font-size: 13.5px; line-height: 1.3; text-align: left; }
.arms-opt .chips button { padding-inline: 10px; }

/* The Battle Bucks shop */
.lo-bucks { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin-right: 8px; white-space: nowrap; }
.lo-bucks small { font-size: 13px; color: var(--soft); font-weight: 600; }
.lo-sub { margin: 4px 0 0; }
.lo-tile { position: relative; display: grid; }
.lo-tile .ars-item { padding-right: 10px; }
/* A card in a shop (Battle Bucks before a battle, Battle Coins in one): the picture, the name on its own line (long
   names wrap, never collide), and under it the price chip and how many you have. Bought: a badge on the picture. */
.buy-item { position: relative; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 4px; padding: 8px 8px 8px 10px; min-width: 0; }
.buy-item .ai-name { grid-column: 2; font-size: 14.5px; line-height: 1.15; overflow-wrap: anywhere; }
.buy-item .ai-buy { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.buy-item .ai-have { color: var(--soft); font-weight: 600; font-size: 12px; white-space: nowrap; }
.buy-item .ai-pick { position: absolute; grid-area: auto; left: 3px; top: 3px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; font-size: 13px;
  background: #e6b54a; color: #1c1f0e; border: 2px solid var(--ink); }
.buy-item:disabled .coin-amt { filter: grayscale(.6); }
/* Shops are one grid of 24: 2, 3 or 4 across, so every row is full. */
.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The find-only Hellbeam: a locked card (a tap or a hover explains how to find it; it never buys anything). */
.hell-card { position: relative; grid-template-columns: 32px minmax(0, 1fr); border-color: #ff7a1a99; background: linear-gradient(135deg, #43200f, var(--panel2) 75%); cursor: help; }
.hell-card .ai-name { grid-column: 2; font-weight: 700; font-size: 14.5px; }
.hell-card .hell-note { display: block !important; grid-column: 2; font: 400 11px/1.1 'Black Ops One', Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #ffb27a; }
.hell-card.locked svg:first-child { filter: saturate(.55) brightness(.8); }
.hell-lock { position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; }
.hell-lock svg { width: 18px; height: 18px; display: block; }
.hell-card[aria-expanded="true"] { border-color: #ffb27a; box-shadow: 0 0 0 2px #ff7a1a inset; }
.hell-tip { margin: 8px 0 0; padding: 10px 12px; display: grid; gap: 4px; font-size: 14px; line-height: 1.35; text-align: left;
  background: #2b160c; border: 2px solid #ff7a1a99; border-radius: 12px; color: var(--text); }
.hell-tip b { display: flex; align-items: center; gap: 6px; font: 400 15px/1.1 'Black Ops One', Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #ffb27a; }
.hell-tip.hidden { display: none; }
/* Get later (Doug, 6 Oct): what you have sits on top; one gold button opens everything you don't have yet. */
.ars-later { width: 100%; margin: 14px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; text-align: left;
  background: linear-gradient(135deg, #4a3a12, #2f3416 70%); color: var(--text); border: 2px dashed #e6b54a; border-radius: 16px; box-shadow: 0 3px 0 #1c1f0e; }
.ars-later:hover { border-style: solid; }
.ars-later[aria-expanded="true"] { border-style: solid; box-shadow: 0 0 0 2px #e6b54a inset; }
.ars-later .al-lock svg { width: 24px; height: 24px; display: block; }
.ars-later b { display: block; font: 400 17px/1.1 'Black Ops One', Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #ffd36b; }
.ars-later small { display: block; font-size: 13px; color: var(--soft); font-weight: 600; margin-top: 2px; }
.ars-later .al-arrow { font-size: 18px; color: #e6b54a; }
#ars-later-box { margin-top: 10px; }
.later-item { position: relative; grid-template-columns: 32px minmax(0, 1fr); padding-right: 22px; cursor: help; border-style: dashed; }
.later-item svg:first-child { filter: saturate(.5) brightness(.85); }
.later-item .ai-note { display: block !important; color: #9fe8d8; }
.later-item .later-lock { position: absolute; right: 6px; top: 6px; }
.later-item .later-lock svg { width: 14px; height: 14px; display: block; }
.later-item.on { border-style: solid; border-color: #9fe8d8; box-shadow: 0 0 0 2px #9fe8d8 inset; }
.later-tip { margin: 8px 0 0; padding: 10px 12px; display: grid; gap: 4px; font-size: 14px; line-height: 1.35; text-align: left; background: #14302b; border: 2px solid #9fe8d899; border-radius: 12px; color: var(--text); }
.later-tip b { display: flex; align-items: center; gap: 6px; font: 400 15px/1.1 'Black Ops One', Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #9fe8d8; }
.later-tip .lt-get { color: #ffd36b; font-weight: 600; }
.later-tip.hidden { display: none; }
.ars-must { margin: 0 0 6px; padding: 8px 10px; border-radius: 12px; background: #4a3a12; border: 2px solid #e6b54a; font-weight: 700; font-size: 14px; }
#weapon.must { box-shadow: 0 0 0 3px #ffd36b, 0 0 14px #ffd36b99; }
.lo-less { position: absolute; right: -6px; top: -8px; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; background: #c7772b; color: #1c1f0e; border: 2px solid var(--ink); box-shadow: none; font-weight: 700; }
.ars-grid:has(.lo-tile) { padding-top: 6px; padding-right: 4px; }

/* War: Battle Bucks earned after a battle */
.pay-row { text-align: left; margin-top: 8px; }
.pay-row > b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pay-total { color: #9be27a; }
.pay-row small { color: var(--soft); font-weight: 600; }
.pay-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.pay-list li { display: flex; justify-content: space-between; gap: 8px; }
.pay-list b { color: #9be27a; }
.pay-cpu { margin: 6px 0 0; font-size: 13px; text-align: left; }

/* First turn: FIRE WHEN READY! over the Fire button (Doug, 1 Oct evening). Redone 6 Oct (Doug: the yellow starburst
   was "still ugly"): a field-orders tag in Ridge Fire's own look, olive drab with a hazard-striped top edge, khaki
   stencil words on one line and a pointer down to the Fire button. */
.fire-tip { position: fixed; z-index: 35; display: grid; justify-items: center; gap: 2px; width: max-content; max-width: calc(100vw - 12px);
  padding: 12px 18px 9px; background: #2f3519; color: #efe6c4; border: 2px solid #e6b54a; border-radius: 6px;
  box-shadow: 0 6px 0 rgba(28, 31, 14, .55), 0 10px 22px rgba(0, 0, 0, .35); pointer-events: none;
  animation: ft-in .35s ease-out both, ft-bob 1.6s ease-in-out .35s infinite; }
.fire-tip::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(-45deg, #e6b54a 0 8px, #1c1f0e 8px 16px); }
.fire-tip.hidden { display: none; }
.fire-tip b { font: 400 21px/1.05 'Black Ops One', Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #f3dfa0; text-shadow: 0 2px 0 #1c1f0e; }
.ft-arrow { position: absolute; bottom: -12px; left: var(--ax, 50%); width: 18px; height: 18px; background: #2f3519;
  border-right: 2px solid #e6b54a; border-bottom: 2px solid #e6b54a; transform: translateX(-50%) rotate(45deg); }
#fire.tip-glow { outline: 3px solid #e6b54a; outline-offset: 3px; animation: ft-glow 1.6s ease-in-out infinite; }
@keyframes ft-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ft-bob { 50% { transform: translateY(-4px); } }
@keyframes ft-glow { 50% { outline-color: rgba(230, 181, 74, .35); } }
@media (max-width: 420px) { .fire-tip b { font-size: 18px; } .fire-tip { padding: 11px 14px 8px; } }
@media (prefers-reduced-motion: reduce) { .fire-tip, #fire.tip-glow { animation: none; } }
.pl-btn .dot { border-radius: 50%; border: 3px solid var(--ink); display: inline-block; }
.arms-opt .chips button { white-space: nowrap; }
@media (orientation: landscape) and (max-height: 430px) {
  .t-setup .best { display: none; }
  .arms-line { font-size: 12.5px; }
  .t-col { gap: 6px; }
  .t-setup .start { min-height: 46px; }
  .arms-opt .chips button, .war-opt .chips button { padding-inline: 7px; font-size: 13px; }
}

/* A tall win card (War pay, coins, the leaderboard) scrolls instead of running off a short screen. */
.win { overflow-y: auto; place-items: initial; }
.win-card { margin: auto; }
@media (orientation: landscape) and (max-height: 500px) {
  .win-card { width: min(600px, 100%); }
  #win-art { width: 140px; height: 70px; }
  .pay-list { grid-template-columns: 1fr 1fr; column-gap: 18px; }
}

/* Turning sound on: the page shakes like a Heavy Bomb hit (about 18px, settling over 0.6 s). */
body.rf-shake { animation: rf-shake .6s linear; }
@keyframes rf-shake {
  0% { transform: translate(0, 0); }
  8% { transform: translate(-14px, 9px); }
  16% { transform: translate(13px, -8px); }
  26% { transform: translate(-10px, -6px); }
  36% { transform: translate(9px, 6px); }
  48% { transform: translate(-6px, 4px); }
  60% { transform: translate(5px, -3px); }
  74% { transform: translate(-3px, 2px); }
  88% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}
/* Narrow phones: the setup rows wrap instead of running off the card (the Weapons and Battle rows were cut at 390px). */
.t-page > *, .t-cols > * { min-width: 0; }
.t-setup .opt { flex-wrap: wrap; }
.t-setup .chips { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

/* ---------- Doug, 5 Oct: fits every shape, the end screen, tank models, Air Support ---------- */
/* The page never grows wider than the screen: a long top bar shrinks instead of pushing the controls off the side. */
#app { grid-template-columns: minmax(0, 1fr); }
.rf-top { flex-wrap: nowrap; min-width: 0; }
.rf-top > * { flex-shrink: 0; }
.rf-top .turn-chip { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .rf-top { gap: 6px; padding: 8px 10px; }
  .rf-top .rr-t { display: none; }
  .rf-top .reroll { margin-left: 0; padding-inline: 10px; }
  .turn-chip { font-size: 15px; gap: 6px; min-width: 64px; }
  .turn-chip i { width: 13px; height: 13px; }
  .wind .w-arrow { width: 24px; height: 12px; }
  .wind { padding-inline: 8px; }
  .wind b { font-size: 15px; }
  #app:not(.on-title) .rf-top button.back { font-size: 0; gap: 0; padding: 6px 8px; justify-content: center; }
  #app:not(.on-title) .rf-top button.back span { font: 700 22px/1 system-ui, sans-serif; }
  .rf-top .fs-btn, .rf-top .sound-btn { padding-inline: 8px; }
}
.controls > * { min-width: 0; }

/* A device on its side (short and wide): the top bar floats over the sky and the controls fit one slim row, so
   the ridge gets most of the height. */
@media (orientation: landscape) and (max-height: 500px) {
  #app:not(.on-title) .rf-top { position: absolute; top: 0; left: 0; right: 0; min-height: 0; padding: 6px 10px; background: linear-gradient(#262b12d9, #262b1200); }
  #app:not(.on-title) .rf-top button, #app:not(.on-title) .rf-top .wind { min-height: 38px; }
  .controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px 116px; gap: 6px 8px; padding: 5px 10px calc(5px + env(safe-area-inset-bottom)); }
  .controls.has-air { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px 196px 112px; }
  .dial { padding: 12px 3px 3px; grid-template-columns: 38px 1fr 38px; }
  .dial .lab { font-size: 10px; top: 1px; }
  .dial .step { min-height: 34px; }
  .dial output { font-size: 20px; }
  .weapon, .wstep, .fire, .air-btn { min-height: 48px; }
  .weapon-pick { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 3px; }
  .weapon #weapon-name { font-size: 14px; white-space: nowrap; }
  .weapon .w-ico { display: none; }
  .fire-cap { min-height: 36px; }
  .fire-txt { font-size: 21px; }
  #howto-slot { top: 52px; }
  .banner { top: 50px; padding: 6px 18px; }
  .banner b { font-size: 19px; }
}

/* Air Support: a button beside the arsenal while you hold one, and the bar for timing the drop. */
.air-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.05; min-height: 56px; padding: 4px; background: #5ab0ff; color: var(--ink); border-color: var(--ink); }
.air-btn.hidden { display: none; }
.air-btn span { font-size: 20px; }
.air-btn b { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.air-btn small { font-size: 12px; font-weight: 700; }
@media (max-width: 759px) and (orientation: portrait) {
  .controls.has-air .air-btn { grid-column: 1 / -1; flex-direction: row; gap: 8px; min-height: 44px; }
}
@media (min-width: 760px) and (min-height: 501px) {
  .controls.has-air { grid-template-columns: minmax(0, 220px) minmax(0, 220px) 90px 250px 200px; }
}
.airbar .lab { font-size: 15px; }
.air-ico { grid-row: 1 / 3; font-size: 24px; width: 32px; text-align: center; }

/* The end of a battle (Doug, 5 Oct): over the whole screen, never cut off, one tap for each way on. */
.win { position: fixed; inset: 0; z-index: 30; overflow-y: auto; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.win-card { width: min(440px, 100%); margin: auto; }
.win-info > * + * { margin-top: 10px; }
.win-actions { margin-top: 14px; display: grid; gap: 8px; }
.win-card .win-actions > * + * { margin-top: 0; }
.win-actions button { display: grid; justify-items: center; gap: 0; line-height: 1.15; min-height: 52px; }
.win-actions button.hidden { display: none; }
.win-actions .wb-t { font-size: 19px; }
.win-actions button small { font-size: 13px; font-weight: 600; opacity: .85; }
.win-actions .win-main { min-height: 62px; }
.win-actions .win-main .wb-t { font-size: 22px; }
.win-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.win-row > * { min-width: 0; }
.win-card .btn-like { display: grid; place-items: center; margin: 0; min-height: 52px; padding: 6px 10px; border-radius: 16px; font-size: 16px; }
.win-card #win-invite .invite { margin-top: 0; }
@media (orientation: landscape) and (max-height: 620px) {
  .win-card { width: min(820px, 100%); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 18px; }
  .win-card > * + * { margin-top: 0; }
  .win-actions { margin-top: 0; }
  .win-card h2 { font-size: 26px; }
  #win-art { width: 160px; height: 80px; }
}

/* Tank models in the player pop-up (Doug, 5 Oct: varied tanks). */
.player-pop { overflow-y: auto; }
.pp-models { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-model { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; min-height: 64px; padding: 6px 8px; background: var(--panel2); color: var(--text); border: 2px solid var(--line); border-radius: 14px; box-shadow: none; }
.pp-model canvas { grid-row: 1 / 3; width: 72px; height: 42px; }
.pp-model b { font-size: 15px; align-self: end; }
.pp-model small { align-self: start; margin-top: 2px; font-size: 11.5px; line-height: 1.25; color: var(--soft); font-weight: 500; }
.pp-model[aria-pressed="true"] { border-color: #e6b54a; box-shadow: 0 0 0 2px #e6b54a inset; }
@media (orientation: landscape) { .pp-models { grid-template-columns: repeat(4, 1fr); } .pp-model { grid-template-columns: 1fr; justify-items: center; text-align: center; } .pp-model canvas { grid-row: auto; } }
@media (orientation: landscape) and (max-height: 500px) { .pp-model small { display: none; } .pp-model { min-height: 0; } .pp-card { gap: 8px; padding: 10px 12px; } }
.pl-btn .pl-model { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: #6b6646; line-height: 1.1; }

/* A device on its side, slim (Doug, 6 Oct: "very little space for the actual game ... minimal buttons and maximum
   screen space for aiming, shooting and explosive fun"): the battlefield fills the whole screen. The top bar is a
   thin strip of small icon buttons floating over the sky, and the controls float over the lava at the bottom in two
   low clusters (angle and power on the left, weapon and Fire on the right) with no panel behind them. */
@media (orientation: landscape) and (max-height: 500px) {
  #app:not(.on-title) { grid-template-rows: 0 1fr 0; }
  #app:not(.on-title) .rf-top { gap: 6px; padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); background: linear-gradient(#262b12b3, #262b1200); }
  #app:not(.on-title) .rf-top button, #app:not(.on-title) .rf-top .wind { min-height: 32px; }
  #app:not(.on-title) .rf-top button { min-width: 36px; padding: 2px 8px; font-size: 15px; }
  #app:not(.on-title) .rf-top .rr-t, #app:not(.on-title) .lock-btn .lk-word { display: none; }
  #app:not(.on-title) .rf-top button.back { font-size: 0; gap: 0; }
  #app:not(.on-title) .rf-top button.back span { font: 700 18px/1 system-ui, sans-serif; }
  .turn-chip { font-size: 14px; }
  .wind { padding: 1px 10px 2px; }
  .wind .wl { font-size: 8.5px; }
  .wind b { font-size: 14px; }
  .wind .w-arrow { width: 24px; height: 12px; }

  .controls, .controls.has-air { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; border-top: 0; align-items: end;
    grid-template-columns: 150px 150px minmax(0, 1fr) 188px 104px; gap: 6px;
    padding: 0 max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: linear-gradient(#262b1200, #262b12a6 70%); pointer-events: none; }
  .controls > * { pointer-events: auto; }
  .controls.has-air { grid-template-columns: 150px 150px minmax(0, 1fr) 52px 188px 104px; }
  .controls > * { grid-row: 1; }
  .controls [data-dial="angle"] { grid-column: 1; }
  .controls [data-dial="power"] { grid-column: 2; }
  .controls .weapon-pick { grid-column: -3; }
  .controls #fire { grid-column: -2; }
  .controls.has-air .air-btn { grid-column: -4; }
  .dial { padding: 11px 2px 2px; grid-template-columns: 32px 1fr 32px; background: #1e220dcc; border-radius: 12px; }
  .dial .lab { font-size: 9px; top: 1px; }
  .dial .step { min-height: 30px; font-size: 14px; }
  .dial output { font-size: 17px; }
  .meter { bottom: 1px; }
  .weapon-pick { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 3px; }
  .weapon, .wstep, .air-btn { min-height: 0; height: 44px; }
  .weapon { padding: 1px 3px; gap: 0; border-radius: 12px; }
  .weapon .w-ico { display: none; }
  .weapon #weapon-name { font-size: 13px; white-space: nowrap; }
  .weapon small { font-size: 10px; }
  .weapon .ars-tag { font-size: 9px; }
  .air-btn span { font-size: 15px; }
  .air-btn b { font-size: 10px; }
  .fire { min-height: 0; height: 44px; padding: 3px; border-radius: 14px; }
  .fire-cap { min-height: 0; border-radius: 10px; }
  .fire-txt { font-size: 17px; }
  .fire-led { top: 6px; right: 7px; width: 7px; height: 7px; }
  .fire-tip { padding: 6px 12px 5px; }
  .fire-tip b { font-size: 15px; }
  #howto-slot { top: 44px; }
  .banner { top: 42px; }
}
/* Very short (a phone on its side with the browser's bars showing): the two dials get narrower too. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  .controls, .controls.has-air { grid-template-columns: 124px 124px minmax(0, 1fr) 168px 88px; gap: 4px; }
  .controls.has-air { grid-template-columns: 124px 124px minmax(0, 1fr) 46px 168px 88px; }
  .dial { grid-template-columns: 28px 1fr 28px; }
  .fire-txt { font-size: 15px; }
  .fire-txt::before { content: ''; }
  .weapon #weapon-name { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
}
/* Doug, 6 Oct: "put the arrows next to shell inside the shell button, not outside" and "the angle and power left right
   buttons should also blend into the boxes they are in". The weapon picker is one gold-edged button with ◀ ▶ inside
   it; the angle and power steps are bare arrows on their box. Last in the file so it holds at every size. */
.weapon-pick { gap: 0; align-items: stretch; background: var(--panel2); border: 2px solid #e6b54a; border-radius: 14px; box-shadow: 0 3px 0 var(--ink); overflow: hidden; }
.weapon-pick .wstep, .weapon-pick .weapon { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.weapon-pick .wstep { height: auto; color: #e6b54a; }
.weapon-pick .wstep:active:not(:disabled) { background: #ffffff14; transform: none; }
.weapon-pick .wstep:disabled { opacity: .3; }
.weapon-pick .weapon:active:not(:disabled) { transform: none; background: #ffffff0d; box-shadow: none; }
.weapon-pick:has(#weapon.must) { box-shadow: 0 0 0 3px #ffd36b, 0 0 14px #ffd36b99; }
#weapon.must { box-shadow: none; }
.dial .step { border: 0; box-shadow: none; background: transparent; color: var(--text); border-radius: 10px; }
.dial .step:active { background: #ffffff14; transform: none; box-shadow: none; }