:root {
  --z: 1;
  --ink: #2b1d10;
  --paper: #efe3c2;
  --paper2: #e4d3a6;
  --wood: #2a2018;
  --union: #2f558f;
  --reb: #7d8388;
  --gold: #c9a227;
  --red: #a3261d;
  --serif: "IM Fell English", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --caps: "IM Fell English SC", "IM Fell English", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--wood); color: var(--ink); font-family: var(--serif); font-size: 15px; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: pan-x pan-y; }
canvas { display: block; }
#map { position: fixed; inset: 0; cursor: grab; touch-action: none; }
button, select { font-family: var(--serif); font-size: 15px; color: var(--ink); }
button { cursor: pointer; background: linear-gradient(#f6ecd0, #dcc891); border: 1px solid #6b5230; border-radius: 4px; padding: 6px 12px; box-shadow: 0 1px 0 #fff8 inset, 0 1px 2px #0005; }
button:hover:not(:disabled) { background: linear-gradient(#fff6dc, #e6d39c); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: linear-gradient(#b8452f, #8a2418); color: #fff3d8; border-color: #4f120b; text-shadow: 0 1px 0 #0006; }
button.primary:hover:not(:disabled) { background: linear-gradient(#cc5238, #9a2a1c); }
kbd { font-family: Georgia, serif; font-size: 0.85em; background: #fff8e2; border: 1px solid #8a744c; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; margin: 0 1px; }
.hidden { display: none !important; }
.chip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #1a120a; vertical-align: -1px; margin-right: 3px; }
.chip.U { background: var(--union); } .chip.C { background: var(--reb); } .chip.N { background: #b8923a; }
.red { color: var(--red); } .green { color: #2e7d32; } .blue { color: #1f6f9c; }
.stars { color: #b8860b; letter-spacing: 1px; } .stars i { color: #0003; font-style: normal; }

/* head-up display */
#hud, #panel, #feed, #toast { display: none; }
body.in-game #hud { display: flex; } body.in-game #panel { display: flex; } body.in-game #feed, body.in-game #toast { display: block; }
#hud { position: fixed; left: 12px; top: 10px; gap: 8px; align-items: stretch; flex-wrap: wrap; max-width: calc(100% - 372px); pointer-events: none; zoom: var(--z); }
.plate { pointer-events: auto; background: linear-gradient(#f3e8c8f2, #e2d1a3f2); border: 1px solid #5a4630; border-radius: 6px; padding: 6px 12px; box-shadow: 0 3px 10px #0007; display: flex; flex-direction: column; justify-content: center; }
#hud-date { font-family: var(--caps); font-size: 22px; line-height: 1.1; }
.phase { font-size: 14px; } .phase.U { color: #1d3a6b; } .phase.C { color: #4a4f54; }
.wills { gap: 3px; min-width: 250px; }
.will { display: grid; grid-template-columns: 116px 1fr 28px; gap: 6px; align-items: center; font-size: 13px; }
.will .track { height: 9px; background: #0002; border: 1px solid #5a4630; border-radius: 5px; overflow: hidden; }
.will i { display: block; height: 100%; transition: width 0.6s; }
.will.U i { background: linear-gradient(#5d83bd, #2f558f); } .will.C i { background: linear-gradient(#b0b5b9, #74797d); }
.will b { text-align: right; font-family: Georgia, serif; font-size: 12px; }
.tools, .zoom { flex-direction: row; gap: 5px; align-items: center; padding: 6px 8px; }
.tools button, .zoom button { padding: 4px 9px; font-size: 14px; }

/* side panel */
#panel { zoom: var(--z); position: fixed; right: 0; top: 0; bottom: 0; width: 340px; flex-direction: column; gap: 8px; padding: 10px 12px 12px;
  background: linear-gradient(90deg, #d9c692, #efe3c2 12%, #efe3c2); border-left: 3px double #5a4630; box-shadow: -6px 0 18px #0008; }
.purse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 7px 6px; border: 1px solid #5a4630; border-radius: 5px; background: #fff7dc88; }
.purse.U { border-top: 4px solid var(--union); } .purse.C { border-top: 4px solid var(--reb); }
.purse label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: #6b5230; }
.purse b { font-family: Georgia, serif; font-size: 15px; }
#ctx { flex: 1; overflow-y: auto; padding-right: 4px; }
#ctx h3 { font-family: var(--caps); font-size: 22px; margin: 4px 0 2px; font-weight: normal; }
#ctx .sub { font-size: 13.5px; color: #5a4630; margin-bottom: 3px; }
#ctx a { color: #1d3a6b; text-decoration: underline; cursor: pointer; }
table.stats { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 14px; }
table.stats td { padding: 2px 0; border-bottom: 1px dotted #a08a5c; } table.stats td:last-child { text-align: right; font-family: Georgia, serif; font-size: 13px; }
.bar { display: inline-block; width: 90px; height: 8px; border: 1px solid #5a4630; border-radius: 4px; overflow: hidden; background: #0002; vertical-align: middle; }
.bar i { display: block; height: 100%; background: #5d8a3a; } .bar i.low { background: var(--red); }
.bar i.w0 { width: 0%; } .bar i.w1 { width: 10%; } .bar i.w2 { width: 20%; } .bar i.w3 { width: 30%; } .bar i.w4 { width: 40%; } .bar i.w5 { width: 50%; } .bar i.w6 { width: 60%; } .bar i.w7 { width: 70%; } .bar i.w8 { width: 80%; } .bar i.w9 { width: 90%; } .bar i.w10 { width: 100%; }
.ctr { text-align: center; } .ctr.big { font-size: 18px; }
.hint { font-size: 13.5px; font-style: italic; color: #4a3a22; margin: 6px 0; line-height: 1.35; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.acts button { text-align: left; padding: 6px 9px; line-height: 1.15; }
.acts button small { display: block; font-size: 11.5px; color: #6b5230; font-family: Georgia, serif; }
.list { border: 1px solid #a08a5c; border-radius: 4px; background: #fff7dc66; margin: 6px 0; max-height: 170px; overflow-y: auto; }
.list.tall { max-height: calc(46vh / var(--z)); }
.row { display: grid; grid-template-columns: 16px 1fr auto; gap: 4px; align-items: center; padding: 4px 7px; border-bottom: 1px dotted #a08a5c; cursor: pointer; font-size: 14px; }
.row:last-child { border-bottom: 0; } .row:hover, .row.on { background: #f2c23055; }
.row .n { font-family: Georgia, serif; font-size: 12.5px; } .row .o { grid-column: 2 / 4; font-size: 12px; font-style: italic; color: #6b5230; }
.row .o:empty { display: none; }
#endturn { font-family: var(--caps); font-size: 20px; padding: 10px; background: linear-gradient(#b8452f, #8a2418); color: #fff3d8; border-color: #4f120b; }
#endturn:hover:not(:disabled) { background: linear-gradient(#cc5238, #9a2a1c); }

#feed { zoom: var(--z); position: fixed; left: 12px; bottom: 10px; width: min(560px, calc(100% - 380px)); background: #efe3c2e8; border: 1px solid #5a4630; border-radius: 6px; padding: 6px 10px; font-size: 13px; line-height: 1.3; max-height: 124px; overflow: hidden; cursor: pointer; box-shadow: 0 3px 10px #0007; }
#feed div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #feed div:not(:first-child) { opacity: 0.7; }
#feed b, .log b { font-family: Georgia, serif; font-size: 11px; color: #6b5230; margin-right: 4px; font-weight: normal; }
.log .battle, #feed .battle { color: #7a1810; } .log .event, #feed .event { color: #1d3a6b; } .log .victory { font-weight: bold; }
#toast { zoom: var(--z); position: fixed; left: calc((100% - var(--pr, 340px)) / 2); top: var(--pt, 78px); transform: translateX(-50%); width: min(620px, calc(100% - var(--pr, 340px) - 60px)); pointer-events: none; z-index: 5; }
.note { background: #fbf2d6f5; border: 1px solid #5a4630; border-left: 6px solid #6b5230; border-radius: 4px; padding: 7px 12px; margin-bottom: 6px; box-shadow: 0 4px 12px #0008; font-size: 15px; animation: drop 0.25s ease-out; transition: opacity 0.8s 2.8s; }
.note.gone { opacity: 0; } .note.battle, .note.surrender, .note.storm { border-left-color: var(--red); } .note.event { border-left-color: var(--union); }
.note.capture { border-left-color: #2e7d32; } .note.raid { border-left-color: var(--gold); } .note.naval { border-left-color: #1f6f9c; } .note.warn { border-left-color: #c77700; }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } }
#tip { zoom: var(--z); position: fixed; display: none; max-width: 250px; background: #2a2018f2; color: #f3e8c8; border: 1px solid #c9a227; border-radius: 4px; padding: 6px 9px; font-size: 13px; line-height: 1.3; pointer-events: none; z-index: 6; }

/* dialogs */
#modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: #140d06b0; z-index: 30; }
#modal.show { display: flex; }
.sheet { zoom: var(--z); width: min(480px, 92%); max-height: 90%; display: flex; flex-direction: column; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  border: 1px solid #3b2a14; outline: 3px double #5a4630; outline-offset: -8px; border-radius: 3px; padding: 22px 26px 18px; box-shadow: 0 18px 60px #000c; }
.sheet.wide { width: min(780px, 94%); }
.sheet h2 { font-family: var(--caps); font-weight: normal; font-size: 28px; margin: 0 0 6px; text-align: center; }
.sheet .body { overflow-y: auto; font-size: 16px; line-height: 1.4; }
.sheet .sub { text-align: center; font-style: italic; color: #5a4630; margin-bottom: 8px; }
.sheet .btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.sheet .btns button { font-size: 17px; padding: 8px 18px; }
.scroll { max-height: calc(62vh / var(--z)); overflow-y: auto; padding-right: 8px; }
.log div { padding: 3px 0; border-bottom: 1px dotted #a08a5c; font-size: 14.5px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
table.report { width: 100%; border-collapse: collapse; font-size: 15px; margin: 4px 0 8px; }
table.report th { font-family: var(--caps); font-weight: normal; text-align: right; border-bottom: 2px solid #5a4630; padding: 3px 6px; }
table.report td { padding: 3px 6px; border-bottom: 1px dotted #a08a5c; text-align: right; font-family: Georgia, serif; font-size: 13.5px; }
table.report td:first-child, table.report th:first-child { text-align: left; font-family: var(--serif); font-size: 15px; }
table.report.small td { font-size: 12.5px; padding: 2px 4px; } table.report.small td:first-child { font-size: 13.5px; }
.sheet h4 { font-family: var(--caps); font-weight: normal; font-size: 18px; margin: 10px 0 4px; border-bottom: 1px solid #5a4630; }
.force { border: 1px solid #5a4630; border-radius: 4px; padding: 8px 12px; background: #fff7dc66; }
.force.U { border-top: 5px solid var(--union); } .force.C { border-top: 5px solid var(--reb); }
.force .role { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: #6b5230; } .force h4 { border: 0; margin: 2px 0; font-size: 19px; }
.help ul { margin: 4px 0; padding-left: 20px; } .help li { margin-bottom: 4px; } .help p { margin: 6px 0; }
table.keys { width: 100%; border-collapse: collapse; font-size: 14.5px; } table.keys td, table.keys th { padding: 4px 6px; border-bottom: 1px dotted #a08a5c; text-align: left; }
table.keys th { font-family: var(--caps); font-weight: normal; }

/* title */
#title { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(#2a2018a0, #120c06f2); z-index: 20; }
body.in-game #title { display: none; }
#title .card { zoom: var(--z); width: min(560px, 94%); max-height: 96%; overflow-y: auto; text-align: center; background: var(--paper); border: 1px solid #3b2a14; outline: 3px double #5a4630; outline-offset: -9px; padding: 22px 34px 18px; box-shadow: 0 20px 70px #000d; }
#title-flags { width: 100%; height: auto; }
#title h1 { font-family: var(--caps); font-weight: normal; font-size: 62px; margin: 0; letter-spacing: 2px; line-height: 1; }
#title .tag { font-style: italic; font-size: 19px; margin: 6px 0 16px; color: #5a4630; }
.menu { display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.menu > button { font-size: 20px; padding: 10px; font-family: var(--caps); }
.menu label { display: flex; flex-direction: column; gap: 3px; text-align: left; font-size: 15px; }
.menu label.check { flex-direction: row; align-items: center; gap: 8px; }
.menu select { padding: 6px; background: #fff8e2; border: 1px solid #6b5230; border-radius: 4px; }
.rowbtn { display: flex; gap: 9px; } .rowbtn button { flex: 1; font-size: 18px; padding: 9px; font-family: var(--caps); }
.fine { font-size: 12.5px; color: #6b5230; margin: 14px 0 0; font-style: italic; }
.fine + .fine { margin-top: 5px; }
button.plain { font: inherit; color: inherit; background: none; border: 0; padding: 2px 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
button.plain:hover { color: #2a1c10; }

/* action stage */
#stage { position: fixed; inset: 0; display: none; background: #0d0a07; z-index: 40; }
#stage.show { display: block; }
#stage-canvas { touch-action: none; }
#stage-ui { position: absolute; pointer-events: none; }
#stage-ui > * { pointer-events: auto; }
.skey { position: absolute; z-index: 2; pointer-events: none; color: #cdbf9c; font-family: var(--serif); line-height: 1.2; }
.skey.hidden { display: none; }
.skey h4 { margin: 0 0 0.5em; padding-bottom: 0.2em; font-family: var(--caps); font-weight: normal; font-size: 1.25em; letter-spacing: 1px; color: #d9c48a; border-bottom: 1px solid #5a4630; }
.skey .k { margin-bottom: 0.6em; }
.skey .k b { display: block; font-family: var(--caps); font-weight: normal; font-size: 1.08em; color: #ffd646; }
.skey .k span { display: block; }
.skey.inset { padding: 0.6em 0.8em 0.3em; background: rgba(24, 16, 8, 0.74); border: 1px solid #5a4630; border-radius: 6px; }
.skey.inset h4 { display: none; }
.skey.inset .k { display: grid; grid-template-columns: 36% 1fr; column-gap: 0.7em; margin-bottom: 0.25em; }
.stage-btn { position: absolute; transform: translate(-50%, -50%); font-family: var(--caps); font-size: 1.25em; padding: 0.45em 1.1em; white-space: nowrap; }
.stage-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44em; max-width: 92%; background: #efe3c2f4; border: 1px solid #3b2a14; outline: 3px double #5a4630; outline-offset: -0.5em; padding: 1.3em 1.8em 1.1em; box-shadow: 0 1em 3em #000c; text-align: center; font-size: 1em; max-height: 97%; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.stage-panel h2 { font-family: var(--caps); font-weight: normal; font-size: 1.9em; margin: 0 0 0.2em; }
.stage-panel p { margin: 0.4em 0; line-height: 1.35; } .stage-panel .dim { color: #6b5230; font-style: italic; font-size: 0.92em; }
.stage-panel button { font-family: var(--caps); font-size: 1.2em; padding: 0.4em 1.2em; margin: 0.5em 0.3em 0; }
.stage-panel table { margin: 0.5em auto; border-collapse: collapse; } .stage-panel td, .stage-panel th { padding: 0.15em 0.8em; border-bottom: 1px dotted #a08a5c; text-align: right; }
.stage-panel td:first-child { text-align: left; }
.stage-panel.top { top: 15%; } .stage-panel.left { text-align: left; }
#stage-pause { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0009; }
#stage-pause .card { width: 46em; max-width: 92%; max-height: 94%; overflow-y: auto; background: #efe3c2; border: 1px solid #3b2a14; padding: 1.2em 1.8em; text-align: left; font-size: 0.95em; touch-action: pan-y; overscroll-behavior: contain; }
#stage-pause .card .go { text-align: center; margin: 0.6em 0 0; } #stage-pause .card .go button { font-family: var(--caps); font-size: 1.2em; padding: 0.4em 1.4em; }
/* the key to the ground: a small picture of each thing on the field, and what it does */
.gkey { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em 1.4em; margin: 0.5em 0 0.6em; text-align: left; font-size: 0.84em; line-height: 1.22; }
.gkey .g { display: grid; grid-template-columns: 5.5em 1fr; column-gap: 0.7em; align-items: start; }
.gkey canvas { width: 5.5em; height: 2.25em; margin-top: 0.15em; }
.gkey b { font-family: var(--caps); font-weight: normal; font-size: 1.12em; }
.gkey .marks { grid-column: 1 / -1; margin: 0.2em 0 0; font-style: italic; color: #4a3a22; }
.stage-panel h3, #stage-pause h3 { font-family: var(--caps); font-weight: normal; font-size: 1.3em; margin: 0.7em 0 0.1em; text-align: center; }
.stage-panel .warn { color: #8a1f14; }
/* the briefing before a battle is wide enough to lay the key to the ground out three across */
.stage-panel.brief { width: 66em; } .stage-panel.brief .gkey { grid-template-columns: 1fr 1fr 1fr; }
#stage-pause h2 { font-family: var(--caps); font-weight: normal; text-align: center; margin: 0 0 0.3em; font-size: 1.8em; }
#stage-pause .dim { color: #6b5230; font-style: italic; text-align: center; }
::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-thumb { background: #a08a5c; border-radius: 5px; } ::-webkit-scrollbar-track { background: #0001; }

.stage-panel.deploy { top: 0; left: 0; transform: none; width: 100%; max-width: 100%; outline: 0; border: 0; border-bottom: 2px solid #3b2a14; padding: 0.45em 1em; font-size: 1.05em; box-shadow: 0 0.3em 1em #0009; }
.stage-panel.deploy button { margin: 0 0 0 0.8em; font-size: 1em; padding: 0.25em 0.9em; }
.stage-panel th { font-family: var(--caps); font-weight: normal; }

/* ------------------------------------------------------------------------------------------------------------
   Small windows and phones. The map sets these on the body as the window changes:
     compact  the tools fold into one button, the dispatch slip goes, and the orders panel is a drawer
     below    (with compact) the window is narrow or upright, and the drawer is under the map, not beside it
     panel-open / menu-open   the drawer, and the folded tools, are showing
     touch    the game is being played with a finger
   ------------------------------------------------------------------------------------------------------------ */
.more, .compact-only, #panel-tab { display: none; }
body.compact .more { display: flex; padding: 4px 6px; }
body.compact .more button { font-size: 19px; line-height: 1; padding: 6px 11px; }
body.compact .compact-only { display: block; }
body.compact .zoom, body.compact #feed { display: none; }
body.compact #hud { left: 8px; gap: 5px; max-width: calc(100% - 356px); }
body.compact:not(.below):not(.panel-open) #hud { max-width: calc(100% - 56px); }
body.below #hud { right: 8px; max-width: none; }
body.compact .plate { padding: 4px 9px; }
body.compact #hud-date { font-size: 18px; }
body.compact .phase { font-size: 12.5px; }
body.compact .tools { display: none; position: absolute; right: 0; top: 100%; margin-top: 5px; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; z-index: 8; }
body.compact.menu-open .tools { display: flex; }
body.compact .tools button { padding: 9px 16px; font-size: 15px; text-align: left; white-space: nowrap; }
/* the two wills, without the room for their names in full */
body.below .wills { min-width: 0; flex: 1 1 132px; max-width: 330px; }
body.below .will { grid-template-columns: 37px 1fr 22px; gap: 5px; }
body.below .will span { font-size: 0; }
body.below .will span::after { font-size: 12px; }
body.below .will.U span::after { content: "Union"; } body.below .will.C span::after { content: "Conf."; }

/* the drawer */
body.compact #panel-tab { display: block; font-family: var(--caps); color: #3b2a14; background: linear-gradient(#f6ecd0, #dcc891); }
body.compact:not(.below) #panel-tab { position: absolute; left: -33px; top: 50%; width: 31px; height: 74px; margin-top: -37px; padding: 0; border-radius: 8px 0 0 8px; border-right: 0; font-size: 22px; box-shadow: -3px 0 8px #0006; }
body.compact:not(.below):not(.panel-open) #panel { transform: translateX(100%); box-shadow: none; }
body.below #panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: calc(64vh / var(--z)); padding: 0 10px 8px; gap: 6px; border-left: 0; border-top: 3px double #5a4630;
  background: linear-gradient(#d9c692, #efe3c2 16px, #efe3c2); box-shadow: 0 -6px 18px #0008; }
body.below #panel-tab { align-self: center; flex: none; min-width: 60%; margin: 0; padding: 4px 20px 5px; border-top: 0; border-radius: 0 0 9px 9px; font-size: 14px; }
body.below:not(.panel-open) #ctx { display: none; }
body.below #ctx { flex: 0 1 auto; min-height: 0; max-height: calc(40vh / var(--z)); }
body.below .list.tall { max-height: none; }
body.below .purse { padding: 4px 6px; }
body.below #endturn { font-size: 18px; padding: 8px; flex: none; }
/* an army or a squadron picked under the map: only a strip of the drawer, so that the map stays in view */
.peek { display: none; }
body.below.panel-peek #ctx .peek { display: block; }
body.below.panel-peek #ctx .detail, body.below.panel-peek #purse { display: none; }
body.below.panel-peek #ctx .hint { margin: 4px 0 2px; }
body.touch #tip { display: none !important; }
body.touch .row { padding: 7px 7px; }
body.touch .acts button { padding: 8px 9px; }

/* dialogs and the title card */
body.compact .sheet { padding: 16px 16px 12px; max-height: 94%; outline-offset: -5px; }
body.compact .sheet h2 { font-size: 23px; }
body.compact .sheet .body { font-size: 15px; }
body.below .cols { grid-template-columns: 1fr; gap: 8px; }
body.below .sheet .btns button { font-size: 16px; padding: 9px 12px; flex: 1 1 auto; }
body.compact #title .card { padding: 14px 20px 12px; outline-offset: -6px; }
body.below #title h1 { font-size: 44px; }
body.below #title .tag { font-size: 16px; margin-bottom: 12px; }
body.below .rowbtn { flex-wrap: wrap; } body.below .rowbtn button { flex: 1 1 40%; font-size: 16px; }

/* ------------------------------------------------------------------------------------------------------------
   The action stage on a small screen or under a finger.
   ------------------------------------------------------------------------------------------------------------ */
/* Where the field is drawn too small to read its panels at their own scale, they are set in a readable size
   and given the whole window. */
#stage-ui.small .stage-panel { width: 46em; max-width: 96%; max-height: 96%; padding: 0.9em 1.1em 0.8em; outline-offset: -0.35em; }
#stage-ui.small .stage-panel.brief { width: 62em; } #stage-ui.small .stage-panel.brief .gkey { grid-template-columns: 1fr 1fr; }
#stage-ui.small .stage-panel.deploy { width: 100%; max-width: 100%; padding: 0.4em 0.7em; font-size: 0.95em; }
#stage-ui.small .stage-panel td, #stage-ui.small .stage-panel th { padding: 0.15em 0.5em; }
#stage-ui.small #stage-pause .card { max-width: 96%; padding: 0.9em 1.1em; }
.stage-panel .touch-how { text-align: left; margin: 0.4em auto; padding-left: 1.3em; } .stage-panel .touch-how li, #stage-pause .touch-how li { margin-bottom: 0.25em; }
/* the buttons a finger works a battle with: one group at each hand */
.tpad { position: absolute; z-index: 3; display: flex; gap: 6px; padding: 6px; box-sizing: border-box; pointer-events: none; }
.tpad.hidden { display: none; }
.tpad.col { flex-direction: column; justify-content: flex-end; align-items: center; }
.tpad.row { flex-direction: row; align-items: stretch; } .tpad.row.right { justify-content: flex-end; }
.tbtn, .tbtn:hover:not(:disabled) { pointer-events: auto; touch-action: none; flex: 0 1 4.7em; width: 100%; max-width: 7.4em; min-width: 0; min-height: 0; margin: 0; padding: 0.15em 0.2em; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--caps); font-size: 1em; line-height: 1.05; color: #f3e8c8; background: rgba(40, 28, 14, 0.94); border: 1.5px solid #8a744c; border-radius: 0.6em; box-shadow: none; text-shadow: none; }
.tpad.row .tbtn { flex: 0 1 6.4em; }
.tbtn small { display: block; margin-top: 0.15em; font-family: var(--serif); font-style: italic; font-size: 0.76em; line-height: 1; color: #cdbf9c; }
.tbtn.on, .tbtn.on:hover:not(:disabled) { background: rgba(242, 194, 48, 0.95); color: #22160a; border-color: #fff3c0; } .tbtn.on small { color: #4a3a1a; }
.tbtn.hot, .tbtn.hot:hover:not(:disabled) { background: rgba(170, 52, 36, 0.96); border-color: #ffd9c8; } .tbtn.hot small { color: #ffd9c8; }
.tbtn.down, .tbtn.down:hover:not(:disabled) { transform: scale(0.94); filter: brightness(1.35); }
.tbtn:disabled { opacity: 0.38; }
.tbtn.pause, .tbtn.pause:hover:not(:disabled) { flex: 0 0 2.5em; max-width: 4.2em; font-family: Georgia, serif; font-weight: bold; letter-spacing: 1px; }
.tpad.col .tbtn.pause { margin-bottom: auto; } .tpad.row .tbtn.pause { margin-right: auto; }
/* a phone held upright has no room for a battlefield */
#stage-turn { position: absolute; inset: 0; z-index: 6; display: none; align-items: center; justify-content: center; padding: 18px; background: #0d0a07f4; text-align: center; }
#stage-turn.show { display: flex; }
#stage-turn .card { max-width: 23em; padding: 1.1em 1.3em 1.2em; background: #efe3c2; border: 1px solid #3b2a14; outline: 3px double #5a4630; outline-offset: -7px; font-size: 16px; line-height: 1.35; }
#stage-turn h2 { font-family: var(--caps); font-weight: normal; font-size: 1.6em; margin: 0 0 0.3em; }
#stage-turn p { margin: 0.4em 0; } #stage-turn button { font-family: var(--caps); font-size: 1.15em; padding: 0.45em 1.2em; margin-top: 0.5em; }
body.compact.menu-open #hud { z-index: 9; }
/* a long briefing scrolls on a small screen: the way on stays in reach at its foot */
#stage-ui.small .stage-panel:not(.deploy) > button.primary { position: sticky; bottom: -0.3em; }
body.compact .purse label { font-size: 10px; letter-spacing: 0.3px; }