/* Painted presentation shared by title, help, onboarding, results and status screens.
   Load after front-screen.css; gameplay canvas and HUD are deliberately untouched. */
:root {
  --np-paper:#f5eedb;
  --np-paper-shadow:#e4d5b4;
  --np-ink:#14202d;
  --np-muted:#536174;
  --np-line:#263543;
  --np-leaf:#418a4a;
  --np-gold:#ffd233;
  --np-blue:#1565c0;
  --np-shadow:0 18px 42px rgba(3,18,32,.42), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -3px 0 rgba(91,66,34,.12);
}

/* Use the same illustrated jungle and bold bundled type as the painted title. */
#menu,
#helpOverlay,
#gameOver,
#frameFault,
#resultsCard {
  background-image:
    linear-gradient(180deg,rgba(5,39,77,.72),rgba(7,21,24,.75)),
    url("../assets/art/jungle-v2.webp");
  background-position:center;
  background-size:cover;
  color:var(--np-paper);
  font-family:var(--font-ui,Inter,system-ui,sans-serif);
}

#menu { overflow-y:auto; overscroll-behavior:contain; }
#menu .menuCard,
#helpOverlay .menuCard,
#gameOver .menuCard,
#frameFault .menuCard,
#resultsCard .menuCard {
  box-sizing:border-box;
  color:var(--np-ink);
  background:
    radial-gradient(ellipse at 8% 0%,rgba(255,255,255,.8),transparent 44%),
    repeating-linear-gradient(173deg,rgba(68,50,27,.018) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,#fff9e9 0%,var(--np-paper) 62%,#eee1c4 100%);
  border:3px solid #172630;
  border-radius:20px;
  box-shadow:var(--np-shadow),0 7px 0 rgba(8,20,27,.44);
  font-family:var(--font-ui,Inter,system-ui,sans-serif);
  text-shadow:none;
}

#menu .menuCard {
  width:min(820px,calc(100vw - 28px));
  max-height:min(94dvh,1000px);
  padding:clamp(16px,3vw,30px);
}
#menu .menuCard h1,
#helpOverlay .menuCard h2,
#gameOver .menuCard h1,
#frameFault .menuCard h2,
#resultsCard .resTitle {
  color:#103e67;
  font-family:var(--font-meme,Anton,Impact,"Arial Black",sans-serif);
  font-weight:400;
  letter-spacing:.02em;
  -webkit-text-stroke:1px #102431;
  paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(16,36,49,.15);
}
#menu .menuCard h1.wordmark { -webkit-text-stroke:0; }
#menu .menuCard h1 .poo { color:#8a5a35; }
#menu .tagline,
#menu .menuLabel,
#menu .menuNote,
#menu #landscapeHint,
#menu .releaseVersion,
#menu .menuLedger,
#helpOverlay .menuCard,
#gameOver #winnerSub,
#frameFault .menuCard,
#resultsCard .menuCard { color:var(--np-ink); }
#menu .tagline { opacity:1; }
#menu .menuNote,#menu #landscapeHint,#menu .releaseVersion { color:var(--np-muted); opacity:1; }
#menu .menuLedger { color:#214d2d; }

/* Crisp segmented controls with a clear selected state and generous hit area. */
#menu .segmented { border:2px solid #243745; border-radius:12px; background:#e8e1d1; }
#menu .segmented button {
  color:#243446;
  background:transparent;
  min-height:44px;
  font-family:var(--font-ui,Inter,system-ui,sans-serif);
  font-weight:800;
}
#menu .segmented button.selected {
  color:#14202d;
  background:var(--np-gold);
  box-shadow:inset 0 -3px 0 rgba(106,72,15,.2);
}
#menu .segmented button:disabled { color:#56616d; }
#menu button:focus-visible,
#helpOverlay button:focus-visible,
#gameOver button:focus-visible,
#frameFault button:focus-visible,
#resultsCard button:focus-visible,
.ob-skip:focus-visible {
  outline:3px solid #0a5bb4;
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(255,210,51,.72);
}

#btnStart,
#btnAgain,
#btnCloseHelp,
#btnFaultMenu,
#btnFaultContinue,
#btnFaultReport,
#menu .menuActions button,
#resultsCard .resButtons button,
#updateNotice button {
  min-height:46px;
  border:2px solid #152838;
  border-radius:14px;
  color:#14202d;
  background:linear-gradient(180deg,#ffe780 0%,#ffd233 100%);
  box-shadow:0 4px 0 #956d19,0 7px 12px rgba(37,35,22,.16),inset 0 1px 0 rgba(255,255,255,.68);
  font-family:var(--font-meme,Anton,Impact,"Arial Black",sans-serif);
  font-size:clamp(17px,2.4vw,23px);
  font-weight:400;
  letter-spacing:.035em;
  text-decoration:none;
  text-shadow:none;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
#btnStart { color:#fff; background:linear-gradient(180deg,#3b82f6,#1565c0); box-shadow:0 4px 0 #0a3d8f,0 7px 14px rgba(21,101,192,.3),inset 0 1px 0 rgba(255,255,255,.4); }
#menu .menuActions button:not(#btnMuteMenu),
#resultsCard .resButtons button:not(.resPrimary),
#btnFaultContinue,
#btnFaultReport {
  color:#fff;
  background:linear-gradient(180deg,#34759d,#174b70);
  box-shadow:0 4px 0 #102f49,0 6px 12px rgba(20,40,55,.16),inset 0 1px 0 rgba(255,255,255,.28);
}
#menu .menuActions button.ghost,
#resultsCard .resButtons button.ghost {
  width:auto;
  padding:9px 13px;
  opacity:1;
  text-decoration:none;
}
#btnStart:hover,#btnAgain:hover,#btnCloseHelp:hover,#btnFaultMenu:hover,
#btnFaultContinue:hover,#btnFaultReport:hover,#menu .menuActions button:hover,
#resultsCard .resButtons button:hover,#updateNotice button:hover { filter:brightness(1.06); }
#btnStart:active,#btnAgain:active,#btnCloseHelp:active,#btnFaultMenu:active,
#btnFaultContinue:active,#btnFaultReport:active,#menu .menuActions button:active,
#resultsCard .resButtons button:active,#updateNotice button:active {
  transform:translateY(3px);
  box-shadow:0 1px 0 #956d19;
}

#helpOverlay,
#gameOver,
#frameFault,
#resultsCard { background-color:rgba(5,19,28,.72); backdrop-filter:blur(3px); }
#helpOverlay .menuCard.help {
  max-height:min(94dvh,calc(100dvh - 24px));
  border-top:8px solid #418a4a;
}
#helpOverlay .menuCard h2 { margin-bottom:12px; font-size:clamp(26px,5vw,42px); text-align:center; }
#helpOverlay .menuCard h3 { color:#174b70; font-family:var(--font-meme,Anton,Impact,sans-serif); font-size:18px; font-weight:400; letter-spacing:.02em; }
#helpOverlay .menuCard ul { color:#283746; }
#helpOverlay .helpCols > div { min-width:0; }
#helpOverlay .performanceReport {
  color:var(--np-ink);
  border:2px dashed #89926f;
  border-radius:14px;
  background:rgba(255,255,255,.62);
}
#helpOverlay .performanceReport h3 { color:#7d2b23; }
#helpOverlay #btnCloseHelp { flex-shrink:0; margin-top:12px; }
#helpOverlay .battleSaveControls { color:var(--np-muted); }
#helpOverlay .battleSaveControls .ghost { color:#174b70; }

/* A compact victory banner, a readable score sheet, and one clear next action. */
#resultsCard { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
#resultsCard .menuCard.resCard {
  width:min(760px,100%);
  max-height:min(94dvh,100%);
  padding:0;
  border:3px solid #172630;
  border-radius:22px;
  text-align:left;
}
#resultsCard .resSummary { color:var(--np-ink); scrollbar-color:#8a7452 #eee4d0; scrollbar-width:thin; }
#resultsCard .resSummary:focus-visible { outline:3px solid #1565c0; outline-offset:-3px; }
#resultsCard .resHero { position:relative; display:flex; align-items:center; gap:12px; min-height:142px; padding:22px 28px; overflow:hidden; background:radial-gradient(ellipse at 92% 100%,#327b91 0,transparent 62%),linear-gradient(125deg,#103953,#164f70); border-bottom:4px solid #e4b835; }
#resultsCard .resHeroCopy { position:relative; z-index:1; flex:1; min-width:0; }
#resultsCard .resEyebrow { margin:0 0 6px; color:#ffe58a; font-size:11px; font-weight:900; letter-spacing:.18em; }
#resultsCard .resTitle { margin:0; color:#fff9e6; font-size:clamp(28px,4.8vw,42px); line-height:1.08; letter-spacing:.015em; -webkit-text-stroke:0; text-shadow:0 3px 0 #08283d; overflow-wrap:anywhere; }
#resultsCard .resKicker { margin:8px 0 0; color:#dbeaf0; font-size:14px; line-height:1.35; }
#resultsCard .resSub { margin:8px 0 0; color:#b6d5df; opacity:1; font-size:11px; letter-spacing:.035em; line-height:1.35; }
#resultsCard .resFactionArt { position:relative; align-self:stretch; flex:0 0 122px; min-height:110px; margin:-12px -8px -22px 0; }
#resultsCard .resFactionArt img { position:absolute; bottom:-12px; right:0; width:134px; height:174px; object-fit:contain; filter:drop-shadow(0 5px 0 rgba(5,27,38,.2)); transform:rotate(4deg); }
#resultsCard .resFactionPair img { width:100px; height:130px; right:-12px; transform:rotate(8deg); }
#resultsCard .resFactionPair img:first-child { right:38px; transform:rotate(-8deg); }
/* The actual winning hero carries the celebration into the scorecard. */
#resultsCard .resWinnerPortrait { flex-basis:148px; }
#resultsCard .resWinnerPortrait img { width:144px; height:144px; bottom:2px; right:0; transform:none; }
#resultsCard .resBody { padding:18px 24px 14px; }
#resultsCard .resMvp { display:flex; align-items:center; gap:14px; margin:0 0 16px; padding:11px 14px; border:1px solid #d3b763; border-radius:10px; background:linear-gradient(110deg,#fbe9a9,#fff8df); }
#resultsCard .resMvpLabel { flex:0 0 auto; max-width:48px; color:#765615; font-size:10px; font-weight:900; letter-spacing:.09em; line-height:1.4; }
#resultsCard .resMvp > div { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
#resultsCard .resMvp b { color:#173c50; font-size:17px; line-height:1.1; overflow-wrap:anywhere; }
#resultsCard .resMvp > div > span { color:#6e654e; font-size:10px; line-height:1.2; overflow-wrap:anywhere; }
#resultsCard .resMvp strong { flex:0 0 auto; color:#173c50; font:400 28px/1 var(--font-meme,Anton,Impact,sans-serif); text-align:right; font-variant-numeric:tabular-nums; }
#resultsCard .resMvp strong small { display:block; margin-top:3px; color:#6e654e; font:700 9px/1.2 var(--font-ui,Inter,system-ui,sans-serif); letter-spacing:.04em; }
#resultsCard .resTeams { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; border:1px solid #c9c6b7; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.5); }
#resultsCard .resTeam { min-width:0; padding:13px 17px; border:0; border-radius:0; background:transparent; box-shadow:none; }
#resultsCard .resTeam + .resTeam { border-left:1px solid #d4d0c2; }
#resultsCard .resTeam.win { background:linear-gradient(150deg,rgba(230,239,210,.72),rgba(255,255,255,.2)); box-shadow:inset 0 3px 0 #579358; }
#resultsCard .resTeamHeading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:9px; }
#resultsCard .resTeamName { min-width:0; margin:0; color:#23465c; font-size:13px; line-height:1.25; font-weight:900; text-shadow:none; overflow-wrap:anywhere; }
#resultsCard .resTeamHeading small { flex:0 0 auto; color:#66717a; font-size:8px; font-weight:800; letter-spacing:.08em; }
#resultsCard .win .resTeamHeading small { color:#356e3b; }
#resultsCard .resStat { align-items:baseline; gap:10px; color:#253343; font-size:12px; line-height:1.8; }
#resultsCard .resStat span { opacity:1; color:#5a6470; }
#resultsCard .resStat b { color:#233c4d; }
#resultsCard .resDamage { margin-bottom:4px; }
#resultsCard .resDamage b { font:400 29px/1.2 var(--font-meme,Anton,Impact,sans-serif); }
#resultsCard .resResource { margin-top:7px; padding-top:6px; border-top:1px solid #dedbcf; }
#resultsCard .resShared { justify-content:space-between; align-items:center; gap:7px 12px; margin:12px 0 0; color:#58614f; font-size:11px; line-height:1.4; }
#resultsCard .resShared > span > b { color:#315d37; }
#resultsCard .resRun {
  display:inline-block;
  padding:4px 8px;
  border:1px solid #c0cca8;
  border-radius:6px;
  color:#385330;
  background:#e9efdb;
  font-size:10px;
  text-shadow:none;
}
#resultsCard .resLastAttack { margin:10px 0 0; color:#6c716e; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
#resultsCard .resLastAttack > span { margin-right:7px; color:#44594f; font-weight:800; }
#resultsCard .resButtons { grid-template-columns:1.2fr 1fr 1fr; align-items:stretch; gap:8px; margin:0; padding:14px 24px 18px; border-top:1px solid #d7ceb7; background:rgba(246,237,215,.86); }
#resultsCard .resButtons.resButtonsAi { grid-template-columns:1.2fr 1fr 1fr 1fr; }
#resultsCard .resButtons button { min-height:48px; padding:10px 8px; font-size:18px; line-height:1.1; letter-spacing:.015em; border-radius:10px; }
#resultsCard .resButtons .resPrimary { grid-column:auto; display:flex; align-items:center; justify-content:center; gap:10px; }
#resultsCard .resButtons .resPrimary > span { font:700 20px/1 var(--font-ui,Inter,system-ui,sans-serif); }
#resultsCard .resButtons #resDifficulty,#resultsCard .resButtons #resMenu { grid-column:auto; border:1px solid transparent; color:#284b60; background:transparent; box-shadow:none; font:800 12px/1.25 var(--font-ui,Inter,system-ui,sans-serif); letter-spacing:0; }
#resultsCard .resButtons #resDifficulty:hover,#resultsCard .resButtons #resMenu:hover { background:#e6ddc6; border-color:#c8bfa8; }
/* Gamepad focus follows pointer modality in some browsers, so :focus-visible
   alone would hide the currently selected result action. */
#resultsCard .resButtons button:focus { outline:3px solid #1565c0; outline-offset:2px; }

/* A recoverable paper panel makes faults clear without turning their actions into hazards. */
#frameFault { z-index:60; }
#frameFault .menuCard { border-top:8px solid #b33b31; }
#frameFault .menuCard h2 { color:#7d2b23; }
#frameFault #frameFaultDetail { display:block; margin:10px 0; padding:8px 10px; border-radius:8px; background:#e9dfce; color:#43505d; }
#frameFault #faultReportStatus { color:#475669; }
#frameFault #btnFaultMenu { width:100%; }

/* Portrait gate is an instructional screen even when it appears over the title. */
#rotateGate {
  background:
    linear-gradient(180deg,rgba(5,39,77,.74),rgba(7,21,24,.82)),
    url("../assets/art/jungle-v2.webp") center/cover;
  color:var(--np-ink);
}
#frontScreen .fs-settings-card {
  border:3px solid #172630;
  border-top:8px solid #418a4a;
  border-radius:20px;
  color:var(--np-ink);
  background:
    repeating-linear-gradient(173deg,rgba(68,50,27,.018) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,#fff9e9,var(--np-paper) 68%,#eee1c4);
  box-shadow:var(--np-shadow),0 7px 0 rgba(8,20,27,.44);
}
#frontScreen .fs-settings-card h2 {
  color:#103e67;
  font-family:var(--font-meme,Anton,Impact,sans-serif);
  font-weight:400;
  letter-spacing:.03em;
}
#frontScreen .fs-settings-card > button:not(.fs-close) {
  border:2px solid #243745;
  border-radius:12px;
  color:#14202d;
  background:rgba(255,255,255,.72);
  box-shadow:0 2px 0 rgba(26,48,60,.16);
}
#frontScreen .fs-settings-card > button:not(.fs-close):hover { background:#fff2c4; }
#frontScreen .fs-settings-card .fs-close {
  border:2px solid #243745;
  color:#14202d;
  background:var(--np-gold);
}
#frontScreen .fs-settings-card :focus-visible { outline:3px solid #0a5bb4; outline-offset:3px; }
.rotateGate__card {
  box-sizing:border-box;
  width:min(410px,100%);
  padding:clamp(22px,6vw,36px);
  border:3px solid #172630;
  border-top:8px solid #418a4a;
  border-radius:22px;
  background:linear-gradient(150deg,#fff9e9,var(--np-paper) 68%,#eee1c4);
  box-shadow:var(--np-shadow),0 7px 0 rgba(8,20,27,.44);
}
.rotateGate__icon { width:96px; height:96px; color:#1565c0; animation-duration:3s; }
.rotateGate__icon .rgArrow { color:#8a5a35; }
.rotateGate__title {
  margin:8px 0 6px;
  color:#103e67;
  font:400 clamp(26px,7vw,34px)/1 var(--font-meme,Anton,Impact,sans-serif);
  letter-spacing:.02em;
}
.rotateGate__copy { color:#344354; opacity:1; font-size:15px; line-height:1.55; }

/* The coach floats over live play, but now reads like a little printed field note. */
.ob-card {
  min-width:240px;
  padding:10px 14px 11px;
  border:2px solid #182a35;
  border-left:7px solid #418a4a;
  border-radius:14px 18px 12px 18px;
  color:var(--np-ink);
  background:linear-gradient(155deg,#fff9e9,var(--np-paper));
  box-shadow:0 6px 0 rgba(8,20,27,.42),0 12px 26px rgba(0,0,0,.3),inset 0 1px 0 #fff;
  font-family:var(--font-ui,Inter,system-ui,sans-serif);
}
.ob-step { color:#14202d; background:var(--np-gold); border:1px solid #69521e; }
.ob-title { color:#103e67; font-size:15px; }
.ob-hint { color:#344354; opacity:1; }
.ob-loop { border-color:#aeb796; color:#214d2d; }
.ob-skip { top:7px; right:8px; min-width:54px; min-height:32px; color:#fff; background:#174b70; border:2px solid #102f49; }
.ob-arrow { color:#14202d; background:var(--np-gold); }
.ob-ring { border-color:#ffd233; box-shadow:0 0 0 3px #14202d,0 0 20px rgba(255,210,51,.75); }
.ob-nudge { color:#14202d; background:var(--np-paper); border:2px solid #172630; border-left:6px solid #418a4a; box-shadow:0 5px 0 rgba(8,20,27,.45),0 8px 18px rgba(0,0,0,.3); }
.ob-nudge.ob-hit { color:#14202d; background:#d8efb4; border-color:#315e32; }

#updateNotice {
  position:static;
  left:auto;
  bottom:auto;
  transform:none;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:14px;
  color:var(--np-ink);
  border:2px solid #172630;
  border-radius:14px;
  background:var(--np-paper);
  box-shadow:var(--np-shadow);
}
#updateNotice > span { flex:1 1 180px; }
#updateNotice button { flex:0 0 auto; width:auto; min-height:44px; padding:7px 16px; font-size:18px; }
#updateNotice #btnDeferUpdate { color:#174b70; background:transparent; box-shadow:none; }

@media (max-width:600px) {
  #menu .menuCard { width:calc(100vw - 20px); padding:14px; border-radius:16px; }
  #menu .menuRow { gap:8px; }
  #menu .segmented { max-width:100%; }
  #menu .segmented button { padding:8px 10px; }
  #helpOverlay { padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  #helpOverlay .menuCard.help { width:100%; max-height:calc(100dvh - 16px); padding:16px; }
  #helpOverlay .helpCols { gap:8px; }
  #resultsCard .resHero { min-height:126px; padding:18px; }
  #resultsCard .resFactionArt { flex-basis:82px; margin-right:-10px; }
  #resultsCard .resFactionArt img { width:104px; height:136px; }
  #resultsCard .resFactionPair img { width:80px; height:104px; }
  #resultsCard .resFactionPair img:first-child { right:27px; }
  #resultsCard .resWinnerPortrait { flex-basis:106px; }
  #resultsCard .resWinnerPortrait img { width:112px; height:130px; bottom:3px; }
  #resultsCard .resBody { padding:14px; }
  #resultsCard .resTeam { padding:11px; }
  #resultsCard .resTeamHeading { flex-wrap:wrap; gap:3px; }
  #resultsCard .resStat { gap:5px; font-size:11px; }
  #resultsCard .resButtons,#resultsCard .resButtons.resButtonsAi { grid-template-columns:1fr 1fr; gap:7px; padding:12px 14px; }
  #resultsCard .resButtons button { min-height:44px; padding:9px 7px; font-size:17px; }
  .ob-card { width:min(360px,calc(100vw - 24px)); min-width:0; }
}

@media (max-height:500px) and (orientation:landscape) {
  #helpOverlay .menuCard.help { max-height:calc(100dvh - 12px); padding:10px 16px; }
  #helpOverlay .menuCard h2 { margin:0 0 6px; font-size:26px; }
  #helpOverlay .menuCard h3 { margin:5px 0 2px; }
  #helpOverlay .menuCard ul { margin:3px 0 6px; line-height:1.35; }
  #resultsCard { padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
  #resultsCard .menuCard.resCard { width:min(820px,100%); max-height:calc(100dvh - 12px); padding:0; border-radius:16px; }
  #resultsCard .resSummary { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
  #resultsCard .resHero { min-height:0; align-items:flex-start; padding:16px; border-bottom:0; border-right:3px solid #e4b835; }
  #resultsCard .resHeroCopy { padding-bottom:110px; }
  #resultsCard .resEyebrow { font-size:9px; }
  #resultsCard .resTitle { font-size:27px; }
  #resultsCard .resKicker { margin-top:6px; font-size:11px; }
  #resultsCard .resSub { margin-top:6px; font-size:9px; }
  #resultsCard .resFactionArt { position:absolute; right:15px; bottom:0; width:100px; height:120px; min-height:0; margin:0; }
  #resultsCard .resFactionArt img { width:104px; height:136px; }
  #resultsCard .resFactionPair img { width:86px; height:112px; }
  #resultsCard .resWinnerPortrait { width:128px; height:110px; }
  #resultsCard .resWinnerPortrait img { width:128px; height:110px; bottom:5px; }
  #resultsCard .resBody { padding:10px 12px; }
  #resultsCard .resMvp { margin-bottom:8px; padding:7px 9px; gap:9px; }
  #resultsCard .resMvpLabel { font-size:8px; max-width:38px; }
  #resultsCard .resMvp b { font-size:13px; }
  #resultsCard .resMvp > div > span { font-size:8px; }
  #resultsCard .resMvp strong { font-size:23px; }
  #resultsCard .resTeam { padding:9px; }
  #resultsCard .resTeamHeading { flex-wrap:wrap; gap:2px; margin-bottom:3px; }
  #resultsCard .resTeamName { font-size:11px; }
  #resultsCard .resTeamHeading small { font-size:7px; }
  #resultsCard .resStat { gap:4px; font-size:10px; line-height:1.55; }
  #resultsCard .resDamage { margin-bottom:2px; }
  #resultsCard .resDamage b { font-size:23px; }
  #resultsCard .resResource { margin-top:4px; padding-top:4px; }
  #resultsCard .resShared { margin-top:7px; gap:4px 6px; font-size:9px; }
  #resultsCard .resRun { padding:3px 5px; font-size:9px; }
  #resultsCard .resLastAttack { margin-top:6px; font-size:9px; }
  #resultsCard .resButtons { grid-template-columns:1.2fr 1fr 1fr; padding:8px 12px 10px; gap:6px; }
  #resultsCard .resButtons.resButtonsAi { grid-template-columns:1.2fr 1fr 1fr 1fr; }
  #resultsCard .resButtons button { min-height:44px; padding:7px 9px; font-size:17px; }
  #rotateGate { padding:10px; }
  .rotateGate__card { display:grid; grid-template-columns:68px 1fr; align-items:center; column-gap:16px; width:min(520px,100%); padding:14px 18px; }
  .rotateGate__icon { grid-row:1 / span 2; width:68px; height:68px; }
  .rotateGate__title { margin:0 0 4px; }
}

@media (prefers-reduced-motion:reduce) {
  #btnStart,#btnAgain,#btnCloseHelp,#btnFaultMenu,#btnFaultContinue,#btnFaultReport,
  #menu .menuActions button,#resultsCard .resButtons button,#updateNotice button,
  .rotateGate__icon,.ob-card,.ob-ring { animation:none; transition:none; }
}
/* Keep diagnostic and save actions readable on the shared paper surface. */
#helpOverlay .performanceReport button,
#helpOverlay .battleSaveControls button {
  color:#174b70;
  background:#fffaf0;
  border:2px solid #174b70;
  border-radius:10px;
  min-height:44px;
  padding:8px 12px;
  font-weight:800;
}
#helpOverlay .performanceReport button:disabled { color:#536174; opacity:.7; }