/* 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: flex; align-items: center; gap: 6px; background: #1e220db3; border: 2px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 8px; font-weight: 700; }
.wind svg { display: block; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.wind .wl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--soft); }
.wind b { min-width: 1.4em; text-align: right; font-size: 17px; }

#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; gap: 8px; }
.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 { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; min-height: 56px; }
.weapon small { font-size: 13px; color: var(--soft); font-weight: 600; }
.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, .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: 220px 220px 150px 200px; justify-content: center; }
  .rf-top { padding: 10px 18px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .controls { grid-template-columns: 1fr 1fr 110px 130px; 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: 11px; 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; }
.coin-ico { display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.15em; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff2b0 0 18%, #e6b54a 40%, #e0a020 100%); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px #ffe58a; }
.coin-ico.big { width: 1.2em; height: 1.2em; }
.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: #e6b54a; font-size: 18px; }
.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 .ai-pick { display: inline-flex; align-items: center; gap: 3px; color: #e6b54a; }
.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-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; }
}
/* 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 { font-size: 20px; color: #9be27a; 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; }
.lo-tile .ai-price { grid-column: 2; font-size: 13px; font-weight: 700; color: #9be27a; white-space: nowrap; }
.lo-tile .ai-have { margin-left: 6px; color: var(--soft); font-weight: 600; }
.lo-tile .ai-pick { min-width: 34px; padding-inline: 6px; }
.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). */
.fire-tip { position: fixed; z-index: 35; width: 190px; height: 112px; display: grid; place-items: center; pointer-events: none; transform-origin: var(--ax, 50%) 120%; animation: ft-pop .55s cubic-bezier(.2,1.7,.4,1) both, ft-bob 1.1s ease-in-out .55s infinite; }
.fire-tip.hidden { display: none; }
.fire-tip svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ft-burst { fill: #e6b54a; stroke: #1c1f0e; stroke-width: 5; stroke-linejoin: round; }
.fire-tip b { position: relative; font-size: 15px; line-height: 1.05; text-align: center; color: #1c1f0e; letter-spacing: .03em; }
.ft-arrow { position: absolute; bottom: -16px; left: var(--ax, 50%); width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 18px solid #ff5d5d; transform: translateX(-50%); filter: drop-shadow(0 2px 0 #1c1f0e); }
#fire.tip-glow { outline: 4px solid #e6b54a; outline-offset: 3px; }
@keyframes ft-pop { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes ft-bob { 50% { transform: translateY(-5px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .fire-tip { 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; }