/* ============================================================================
   Banater Grenadiere — the look of the game.
   The battlefield is pixel art; the panels of the battle are field-grey with
   the regiment's grass green and gold; the frame, the briefings and the results
   are printed in black ink on the white paper of the 1918 album.
   Sizes follow --u = 1 % of the height of the game box (set by ui.js).
   ========================================================================== */
@font-face { font-family: "Jacquard 12"; src: url("../fonts/joc/jg-jacquard12.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Jersey 10"; src: url("../fonts/joc/jg-jersey10.woff2") format("woff2"); font-display: swap; }

.jg {
  --u: 7.2px;
  --ink: #171612; --ink-2: #4a4740; --paper: #f3f2ea; --paper-2: #e4e2d6; --paper-line: #c9c6b8;
  --grey: #3c4542; --grey-2: #2a312f; --grey-3: #57625e; --grey-hi: #7b8883;
  --green: #3fae4e; --green-2: #2e8b3d; --gold: #e2bb4b; --gold-2: #b38e2c; --red: #c0392b; --red-2: #8a1f2a;
  --f-title: "Jacquard 12", "Cormorant Garamond", Georgia, serif;
  --f-ui: "Jersey 10", "Source Sans 3", system-ui, sans-serif;
  --f-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 24px); margin: 0 auto;
  background: #0d0c0a; color: #efeadb; overflow: hidden; user-select: none; -webkit-user-select: none;
  font-family: var(--f-ui); font-size: calc(var(--u) * 3.1); line-height: 1.15; touch-action: none;
  -webkit-tap-highlight-color: transparent; outline: none; container-type: size;
}
.jg:fullscreen, .jg.jg-full { max-height: none; height: 100vh; width: 100vw; aspect-ratio: auto; }
/* without the Fullscreen API (iPhone): the box covers the window */
.jg.jg-full:not(:fullscreen) { position: fixed; inset: 0; z-index: 2000; width: auto; height: 100vh; height: 100dvh; margin: 0; }
.jg *, .jg *::before, .jg *::after { box-sizing: border-box; }
.jg canvas.jg-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: grab; }
.jg canvas.jg-cv.jg-aim { cursor: crosshair; }
.jg canvas.jg-cv.jg-drag { cursor: grabbing; }
.jg button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; letter-spacing: 0; text-transform: none; border-radius: 0; box-shadow: none; }
.jg button:focus-visible, .jg [tabindex]:focus-visible, .jg a:focus-visible, .jg select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.jg [hidden] { display: none !important; }
.jg a { color: inherit; }

/* ---- the field-grey buttons of the battle ------------------------------------------------ */
.jg .jb {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.8);
  min-height: calc(var(--u) * 6.4); padding: 0 calc(var(--u) * 1.8);
  background: var(--grey-2); color: #efeadb; border: 2px solid var(--grey-3);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .06);
  font-size: calc(var(--u) * 3.2); white-space: nowrap;
}
.jg .jb:hover { background: var(--grey); border-color: var(--grey-hi); }
.jg .jb:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); }
.jg .jb.on { border-color: var(--gold); color: var(--gold); }
.jg .jb[disabled], .jg .jb.off { opacity: .45; cursor: default; }
.jg .jb.gold { background: var(--gold-2); color: #1a1408; border-color: var(--gold); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .25); }
.jg .jb.gold:hover { background: var(--gold); }
.jg .jb.icon { width: calc(var(--u) * 6.4); padding: 0; }
.jg .jb svg { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); fill: currentColor; shape-rendering: crispEdges; }

/* ---- the battle's top bar ---------------------------------------------------------------------- */
.jg .jg-hud { position: absolute; inset: 0; pointer-events: none; }
.jg .jg-hud > * { pointer-events: auto; }
.jg .jg-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.2); pointer-events: none; }
.jg .jg-top > * { pointer-events: auto; }
.jg .jg-supply { display: flex; align-items: center; gap: calc(var(--u) * 1); height: calc(var(--u) * 8.2); background: rgba(23, 27, 26, .82); border: 2px solid var(--grey-3); padding: 0 calc(var(--u) * 1.4); min-width: calc(var(--u) * 21); }
.jg .jg-supply .n { font-size: calc(var(--u) * 4.4); line-height: 1; color: var(--gold); }
.jg .jg-supply .r { color: #b9c4bf; font-size: max(11px, calc(var(--u) * 2.4)); line-height: 1; }
.jg .jg-crate { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); image-rendering: pixelated; }
.jg .jg-obj { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); text-align: center; min-width: 0; }
.jg .jg-obj .t { background: rgba(23, 27, 26, .82); border: 2px solid var(--grey-3); padding: calc(var(--u) * .5) calc(var(--u) * 1.6); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg .jg-obj .bar { width: min(100%, calc(var(--u) * 40)); height: calc(var(--u) * 1); background: rgba(0, 0, 0, .5); border: 1px solid var(--grey-3); }
.jg .jg-obj .bar i { display: block; height: 100%; width: 0; background: var(--green); }
.jg .jg-tools { display: flex; gap: calc(var(--u) * .8); }
.jg .jg-mini { position: absolute; left: calc(var(--u) * 1.2); right: calc(var(--u) * 1.2); top: calc(var(--u) * 10.6); height: calc(var(--u) * 3.2); width: calc(100% - var(--u) * 2.4); image-rendering: pixelated; cursor: pointer; border: 1px solid rgba(255, 255, 255, .12); background: rgba(10, 12, 12, .55); }

/* ---- messages ------------------------------------------------------------------------------------------ */
.jg .jg-toasts { position: absolute; left: 50%; top: calc(var(--u) * 15.4); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); width: min(92%, calc(var(--u) * 110)); pointer-events: none; }
.jg .jg-toast { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: calc(var(--u) * .8) calc(var(--u) * 1.8); font-family: var(--f-text); font-size: calc(var(--u) * 2.9); line-height: 1.25; box-shadow: 0 calc(var(--u) * .6) 0 rgba(0, 0, 0, .35); animation: jg-in .25s ease-out; max-width: 100%; text-align: center; }
.jg .jg-toast b { font-family: var(--f-ui); font-weight: 400; font-size: 1.12em; }
.jg .jg-toast.bad { border-color: var(--red-2); background: #f6e3df; }
.jg .jg-toast.good { border-color: var(--green-2); }
.jg .jg-toast.out { opacity: 0; transition: opacity .5s; }
@keyframes jg-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- the bottom bar: soldiers, orders, supports ---------------------------------------------- */
.jg .jg-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.2); pointer-events: none; }
.jg .jg-bottom > * { pointer-events: auto; }
.jg .jg-units { display: flex; gap: calc(var(--u) * .7); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.jg .jg-units::-webkit-scrollbar { display: none; }
.jg .jg-card {
  position: relative; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: end;
  width: calc(var(--u) * 11.4); height: calc(var(--u) * 14.6); padding: calc(var(--u) * .5) calc(var(--u) * .3) calc(var(--u) * .4);
  background: rgba(30, 36, 34, .9); border: 2px solid var(--grey-3); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35);
  flex: 0 0 auto; overflow: hidden;
}
.jg .jg-card:hover { border-color: var(--grey-hi); background: rgba(44, 52, 49, .95); }
.jg .jg-card canvas { width: calc(var(--u) * 6.3); height: calc(var(--u) * 7.2); image-rendering: pixelated; align-self: center; }
.jg .jg-card canvas.wide { width: calc(var(--u) * 9); height: calc(var(--u) * 6.3); }
.jg .jg-card .nm { font-size: max(11px, calc(var(--u) * 2.35)); line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.jg .jg-card .c { font-size: max(12px, calc(var(--u) * 2.8)); line-height: 1.05; color: var(--gold); }
.jg .jg-card .k { position: absolute; left: calc(var(--u) * .6); top: calc(var(--u) * .3); font-size: calc(var(--u) * 2.2); color: #93a09b; }
.jg .jg-card .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .55); height: 0; pointer-events: none; }
.jg .jg-card.poor .c { color: #d07a6e; }
.jg .jg-card.poor canvas, .jg .jg-card.wait canvas { opacity: .5; }
.jg .jg-orders { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); margin: 0 auto; }
.jg .jg-orders .row { display: flex; gap: calc(var(--u) * .6); }
.jg .jg-orders .flag { font-size: calc(var(--u) * 2.6); color: #c8d0cc; background: rgba(23, 27, 26, .75); padding: calc(var(--u) * .2) calc(var(--u) * 1); white-space: nowrap; }
.jg .jg-sup { display: flex; gap: calc(var(--u) * .7); }
.jg .jg-ab { position: relative; flex-direction: column; width: calc(var(--u) * 11.2); height: calc(var(--u) * 11.2); padding: calc(var(--u) * .4); font-size: calc(var(--u) * 2.4); white-space: normal; line-height: 1; text-align: center; }
.jg .jg-ab canvas { width: calc(var(--u) * 6); height: calc(var(--u) * 5); image-rendering: pixelated; }
.jg .jg-ab .c { color: var(--gold); font-size: calc(var(--u) * 2.4); }
.jg .jg-ab .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, .55); pointer-events: none; }
.jg .jg-ab.armed { border-color: var(--gold); background: #4a3f1c; }
.jg .jg-ab.special { border-color: var(--green-2); }
.jg .jg-tip { position: absolute; z-index: 30; max-width: calc(var(--u) * 52); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); font-family: var(--f-text); font-size: calc(var(--u) * 2.7); line-height: 1.3; pointer-events: none; box-shadow: 0 calc(var(--u) * .6) 0 rgba(0, 0, 0, .35); }
.jg .jg-tip b { font-family: var(--f-ui); font-weight: 400; font-size: 1.15em; display: block; margin-bottom: .2em; }
.jg .jg-tip .why { color: var(--red-2); font-family: var(--f-ui); }

/* ---- screens on paper: frame, briefing, free battle, help, results --------------------------- */
.jg .jg-screen { position: absolute; inset: 0; overflow: hidden; }
.jg .jg-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 35% 45%, rgba(10, 12, 12, .25), rgba(10, 12, 12, .82)); }
.jg .jg-title { position: absolute; left: 7%; top: 12%; max-width: 62%; }
.jg .jg-title h1 { font-family: var(--f-title); font-weight: 400; font-size: calc(var(--u) * 15); line-height: .9; margin: 0 0 calc(var(--u) * 1.4); color: #f5efdc; letter-spacing: 0; text-shadow: 0 calc(var(--u) * .7) 0 rgba(0, 0, 0, .55); }
.jg .jg-title .sub { font-size: calc(var(--u) * 4); color: var(--gold); margin-bottom: calc(var(--u) * .8); }
.jg .jg-title .motto { font-family: var(--f-text); font-style: italic; font-size: calc(var(--u) * 2.9); color: #cfc8b4; margin-bottom: calc(var(--u) * 5); }
.jg .jg-menu { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.4); }
.jg .jg-menu .jb { min-width: calc(var(--u) * 42); justify-content: flex-start; font-size: calc(var(--u) * 4); min-height: calc(var(--u) * 8); }
.jg .jg-menu .jb small { font-size: .7em; color: #a9b4af; margin-left: auto; }
.jg .jg-corner { position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); display: flex; gap: calc(var(--u) * .8); align-items: center; }
.jg .jg-corner select { font: inherit; font-size: calc(var(--u) * 3); background: var(--grey-2); color: #efeadb; border: 2px solid var(--grey-3); padding: calc(var(--u) * .6) calc(var(--u) * 1); }
.jg .jg-credit { position: absolute; left: 7%; bottom: calc(var(--u) * 2.4); max-width: 60%; font-family: var(--f-text); font-size: calc(var(--u) * 2.4); color: #a7a291; line-height: 1.3; }
.jg .jg-credit a { color: var(--gold); }

/* the album frame */
.jg .jg-paper { position: absolute; inset: 0; background: var(--paper); color: var(--ink); }
.jg .jg-paper canvas.orn { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.jg .jg-cart {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(var(--u) * 21); height: calc(var(--u) * 9.4); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%;
  font-family: var(--f-title); font-size: calc(var(--u) * 3.9); line-height: .95; text-align: center;
}
.jg .jg-cart .y { font-family: var(--f-ui); font-size: calc(var(--u) * 2.6); }
.jg .jg-cart .st { position: absolute; bottom: calc(var(--u) * -1.6); font-family: var(--f-ui); font-size: calc(var(--u) * 2.4); color: var(--gold-2); background: var(--paper); padding: 0 .3em; letter-spacing: .1em; }
.jg .jg-cart.old { color: #8b887d; border-color: #8b887d; border-style: dashed; }
.jg .jg-cart.lock { color: #8b887d; }
.jg .jg-cart.sel { background: var(--ink); color: var(--paper); }
.jg .jg-cart.sel .y { color: var(--gold); }
.jg .jg-cart:hover:not(.sel) { background: #fffef7; box-shadow: 0 0 0 2px var(--gold-2); }
.jg .jg-oval { position: absolute; left: 24.6%; right: 24.6%; top: 15.5%; bottom: 13.8%; display: flex; flex-direction: column; overflow: hidden; }
.jg .jg-oval .scroll { flex: 1; overflow-y: auto; padding: calc(var(--u) * 1) calc(var(--u) * 2.4) calc(var(--u) * 3); scrollbar-width: thin; touch-action: pan-y; -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - var(--u) * 3), transparent); mask-image: linear-gradient(#000 0, #000 calc(100% - var(--u) * 3), transparent); }
.jg .jg-oval .parts { display: flex; justify-content: center; margin-bottom: calc(var(--u) * 1.2); }
.jg .jg-oval h2 { font-family: var(--f-title); font-weight: 400; font-size: calc(var(--u) * 8); line-height: .95; margin: 0 0 calc(var(--u) * .6); color: var(--ink); text-align: center; letter-spacing: 0; }
.jg .jg-oval .when { font-family: var(--f-ui); font-size: calc(var(--u) * 3); text-align: center; color: var(--ink-2); margin-bottom: calc(var(--u) * 1.4); }
.jg .jg-oval p { font-family: var(--f-text); font-size: calc(var(--u) * 2.75); line-height: 1.42; margin: 0 0 calc(var(--u) * 1.2); color: #23211c; }
.jg .jg-oval figure { margin: 0 0 calc(var(--u) * 1.4); }
.jg .jg-oval figure img { width: 100%; max-height: calc(var(--u) * 30); object-fit: cover; display: block; border: 2px solid var(--ink); filter: grayscale(.25) contrast(1.05); }
.jg .jg-oval figcaption { font-family: var(--f-text); font-size: calc(var(--u) * 2.2); color: var(--ink-2); margin-top: calc(var(--u) * .4); font-style: italic; }
.jg .jg-oval .facts { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .3) calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.8); margin: 0 0 calc(var(--u) * 1.4); }
.jg .jg-oval .facts dt { font-family: var(--f-ui); color: var(--ink-2); }
.jg .jg-oval .facts dd { margin: 0; font-family: var(--f-text); }
.jg .jg-oval .goals { margin: 0 0 calc(var(--u) * 1.4); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border: 2px solid var(--ink); font-family: var(--f-text); font-size: calc(var(--u) * 2.7); }
.jg .jg-oval .goals b { font-family: var(--f-ui); font-weight: 400; display: block; font-size: 1.1em; }
.jg .jg-oval .goals li { margin: .2em 0; }
.jg .jg-oval .goals ol, .jg .jg-oval .goals ul { margin: 0; padding-left: 1.3em; }
.jg .jg-oval .act { display: flex; gap: calc(var(--u) * 1); justify-content: center; align-items: center; flex-wrap: wrap; padding: calc(var(--u) * 1) 12% calc(var(--u) * .2); }
.jg .jg-oval .act:empty { display: none; }
.jg .jg-oval .seg { display: inline-flex; border: 2px solid var(--ink); }
.jg .jg-oval .seg button { padding: calc(var(--u) * .6) calc(var(--u) * 1.4); font-size: calc(var(--u) * 2.8); color: var(--ink); }
.jg .jg-oval .seg button.on { background: var(--ink); color: var(--paper); }
.jg .jg-oval .seg button + button { border-left: 2px solid var(--ink); }
.jg .jp { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 2.4); background: var(--ink); color: var(--paper); border: 2px solid var(--ink); font-size: calc(var(--u) * 3.4); }
.jg .jp:hover { background: #2f2c25; }
.jg .jp.ghost { background: transparent; color: var(--ink); }
.jg .jp.ghost:hover { background: var(--paper-2); }
.jg .jp.gold { background: var(--gold-2); border-color: var(--ink); color: #120e04; }
.jg .jp[disabled] { opacity: .4; cursor: default; }
.jg .jg-back { position: absolute; left: calc(var(--u) * 1.6); top: calc(var(--u) * 1.6); z-index: 3; }
.jg .jg-note { position: absolute; left: 24%; right: 24%; bottom: 3.2%; text-align: center; font-family: var(--f-text); font-size: calc(var(--u) * 2.3); color: var(--ink-2); line-height: 1.25; }
.jg .jg-stars { color: var(--gold-2); letter-spacing: .15em; }
.jg .jg-stars .no { color: #c9c6b8; }

/* a sheet of paper over the battle (free battle, help, results, pause) */
.jg .jg-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94%, calc(var(--u) * 150)); max-height: 92%; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 0 0 calc(var(--u) * .8) var(--paper), 0 0 0 calc(var(--u) * 1.1) var(--ink), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, .5); }
.jg .jg-sheet .hd { padding: calc(var(--u) * 1.8) calc(var(--u) * 2.6) calc(var(--u) * .8); border-bottom: 2px solid var(--ink); }
.jg .jg-sheet h2 { font-family: var(--f-title); font-weight: 400; font-size: calc(var(--u) * 8); margin: 0; line-height: .95; color: var(--ink); letter-spacing: 0; }
.jg .jg-sheet .hd .sub { font-size: calc(var(--u) * 3); color: var(--ink-2); margin-top: calc(var(--u) * .4); }
.jg .jg-sheet .bd { flex: 1; overflow-y: auto; padding: calc(var(--u) * 1.6) calc(var(--u) * 2.6); font-family: var(--f-text); font-size: calc(var(--u) * 2.8); line-height: 1.42; touch-action: pan-y; }
.jg .jg-sheet .bd p { margin: 0 0 calc(var(--u) * 1.1); }
.jg .jg-sheet .jg-ask { display: block; margin-bottom: calc(var(--u) * 1.1); }
.jg .jg-sheet .bd p > .jp + .jp { margin-left: calc(var(--u) * 1); }
.jg .jg-sheet .ft { display: flex; gap: calc(var(--u) * 1); justify-content: flex-end; flex-wrap: wrap; padding: calc(var(--u) * 1.4) calc(var(--u) * 2.6); border-top: 2px solid var(--ink); }
.jg .jg-sheet .ft .grow { margin-right: auto; }
.jg .jg-field { margin: 0 0 calc(var(--u) * 1.8); }
.jg .jg-field > b { display: block; font-family: var(--f-ui); font-weight: 400; font-size: calc(var(--u) * 3.1); margin-bottom: calc(var(--u) * .6); }
.jg .jg-field .opts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7); }
.jg .jg-field .opts button { border: 2px solid var(--ink); padding: calc(var(--u) * .7) calc(var(--u) * 1.6); font-family: var(--f-ui); font-size: calc(var(--u) * 2.9); color: var(--ink); background: var(--paper); }
.jg .jg-field .opts button.on { background: var(--ink); color: var(--paper); }
.jg .jg-field .opts button:hover:not(.on) { background: var(--paper-2); }
/* the free battle: gas and masks in the year chosen */
.jg .jg-chem { margin: calc(var(--u) * -.6) 0 calc(var(--u) * 1.8); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border-left: 4px solid #b9c94a; background: rgba(196, 208, 82, .12); }
.jg .jg-chem > b { font-family: var(--f-ui); font-weight: 400; font-size: calc(var(--u) * 2.9); }
.jg .jg-chem .facts { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .3) calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.6); margin: calc(var(--u) * .5) 0 0; }
.jg .jg-chem .facts dt { font-family: var(--f-ui); color: var(--ink-2); }
.jg .jg-chem .facts dd { margin: 0; font-family: var(--f-text); }
.jg .jg-res { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); }
.jg .jg-res .big { font-family: var(--f-title); font-size: calc(var(--u) * 11); line-height: .9; }
.jg .jg-res .big.win { color: var(--green-2); }
.jg .jg-res .big.lose { color: var(--red-2); }
.jg .jg-res dl { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * .3) calc(var(--u) * 2); margin: calc(var(--u) * 1) 0 0; font-family: var(--f-ui); font-size: calc(var(--u) * 3); }
.jg .jg-res dd { margin: 0; text-align: right; }
.jg .jg-res .stars { font-size: calc(var(--u) * 6); color: var(--gold-2); letter-spacing: .1em; }
.jg .jg-res .stars .no { color: #c9c6b8; }
.jg .jg-res ul.conds { list-style: none; padding: 0; margin: calc(var(--u) * .6) 0 0; font-size: calc(var(--u) * 2.6); }
.jg .jg-res ul.conds li::before { content: "☆ "; color: #b0ad9f; }
.jg .jg-res ul.conds li.ok::before { content: "★ "; color: var(--gold-2); }
.jg .jg-help h3 { font-family: var(--f-ui); font-weight: 400; font-size: calc(var(--u) * 3.6); margin: calc(var(--u) * 1.6) 0 calc(var(--u) * .5); color: var(--ink); letter-spacing: 0; text-transform: none; }
.jg .jg-help .units { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 40), 1fr)); gap: calc(var(--u) * 1.2); }
.jg .jg-help .unit { display: flex; gap: calc(var(--u) * 1.2); align-items: flex-start; }
.jg .jg-help .unit canvas { width: calc(var(--u) * 7); height: calc(var(--u) * 8); image-rendering: pixelated; flex: 0 0 auto; background: var(--paper-2); border: 1px solid var(--paper-line); }
.jg .jg-help kbd { font-family: var(--f-ui); border: 1px solid var(--ink); border-bottom-width: 3px; padding: 0 .35em; font-size: .95em; background: #fff; }

/* the rotate-your-phone hint and the loading line */
.jg .jg-rotate { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 10%; background: #0d0c0a; font-size: calc(var(--u) * 4); z-index: 40; }
@container (max-aspect-ratio: 1/1) { .jg .jg-rotate.can { display: flex; } }

/* a box too small to play in: the title over the battle, and the way to full screen */
.jg .jg-cover { display: none; }
.jg.jg-tiny .jg-cover {
  position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 12px; text-align: center; background: linear-gradient(rgba(13, 12, 10, .25), rgba(13, 12, 10, .82));
}
.jg.jg-tiny .jg-cover .t { font-family: var(--f-title); font-size: clamp(30px, 11cqw, 52px); line-height: .9; color: #f3efe0; text-shadow: 0 3px 0 #000; }
.jg.jg-tiny .jg-cover .s { font-family: var(--f-ui); font-size: clamp(14px, 4.2cqw, 20px); line-height: 1.1; color: var(--gold); max-width: 30em; }
.jg.jg-tiny .jg-cover .jb { margin-top: 6px; min-height: 44px; padding: 0 16px; font-size: 19px; }
.jg.jg-tiny .jg-cover .jb svg { width: 16px; height: 16px; }
.jg.jg-tiny .jg-screen, .jg.jg-tiny .jg-hud, .jg.jg-tiny .jg-tip { visibility: hidden; }

/* ---- small boxes (phones in landscape): tighter bars ---------------------------------------- */
.jg.jg-small .jg-card { width: calc(var(--u) * 12.6); height: calc(var(--u) * 16.5); }
.jg.jg-small .jg-ab { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.jg.jg-small .jg-cart { width: calc(var(--u) * 22); }
.jg.jg-small .jg-oval { left: 23%; right: 23%; }
.jg.jg-small .jg-oval figure img { max-height: calc(var(--u) * 17); }
.jg.jg-small .jg-oval h2 { font-size: calc(var(--u) * 7); }
.jg.jg-small .jg-sheet { width: 96%; max-height: 96%; }

/* ---- the page around the game on the site ------------------------------------------------------- */
.game-page .game-wrap { width: min(1600px, 100% - 16px); margin: 12px auto 20px; }
.game-page .game-about { width: min(820px, 100% - 32px); margin: 18px auto 0; }
.game-page .game-about h2 { font-size: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .jg .jg-toast { animation: none; } }