/* Tunas & Hutan Lestari — css/game.css (E). The game owns the viewport on every screen, like the reference: a full-bleed canvas scene,
   HUD in the corners, the lockup and cards centred, cut-paper chrome (wooden plaques, sticker pills, paper leaves). Tokens from base.css
   (--wood, --wood-2, --board live there); no raw colours here. */
.game-page { --pad: clamp(.875rem, 2.2vw, 2rem); height: 100dvh; overflow: hidden; overscroll-behavior: none; background: var(--pine); }
.game-main { position: fixed; inset: 0; background: var(--pine); }
.stage { position: absolute; inset: 0; overflow: hidden; background: var(--pine); container-type: size; isolation: isolate; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
body.is-playing .stage { touch-action: none; user-select: none; -webkit-user-select: none; }
body.is-falling .stage canvas { filter: blur(5px); scale: 1.03; }   /* the result screen: the scene goes soft; the scale hides the blurred border */
html.reduced body.is-falling .stage canvas { filter: none; scale: 1; }

/* ---- screens stacked over the canvas; the padding keeps the HUD off notches and rounded corners ---- */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: max(var(--pad), env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) max(var(--pad), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left)); }
.scr[hidden], .stage [hidden] { display: none !important; }   /* base .btn{display:inline-flex} would beat the UA [hidden] rule */
.scr .card { border-color: var(--ink); box-shadow: var(--shadow-hard-olive); }

/* sticker pills: rounded, a chunky bottom edge (hard shadow), lift on hover, press on active */
.pill-btn, .pill { border-radius: var(--radius-pill); }
.scr .pill-btn { box-shadow: 0 4px 0 var(--ink); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1); }
.scr .pill-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.scr .pill-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.scr .btn-fill { background: var(--terracotta-ink); color: var(--paper-2); }
.scr .btn-lg { padding: 1.0625rem 2rem; letter-spacing: .04em; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: var(--stroke) solid var(--frame); background: var(--sun); box-shadow: 0 3px 0 var(--ink); font-family: var(--font-text); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pill-dark { display: inline-flex; align-items: center; justify-content: center; padding: .45rem 1rem; border-radius: var(--radius-pill); background: var(--board); color: var(--olive-2); font-family: var(--font-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.seedbox .icon { width: 1.125rem; height: 1.125rem; color: var(--leaf-ink); }
.seedbox b { display: inline-block; min-width: 1ch; }

/* wooden plaques: a tan board with a lighter top strip, two nails, a hard ink shadow */
.plaque { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: .45rem 1rem; border: var(--stroke) solid var(--frame); border-radius: 8px; background: var(--wood); color: var(--paper); box-shadow: inset 0 3px 0 var(--wood-2), 3px 4px 0 var(--frame); font-family: var(--font-display); font-weight: 700; }
.plaque::before, .plaque::after { content: ""; position: absolute; top: .45rem; width: .32rem; height: .32rem; border-radius: 50%; background: var(--ink); opacity: .55; }
.plaque::before { left: .45rem; } .plaque::after { right: .45rem; }

/* ---- HUD: three corners (left / centre / right), the same grid on every screen ---- */
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .5rem; }
.hud-top > :first-child { justify-self: start; } .hud-top > :last-child { justify-self: end; }
.hud-brand { display: inline-flex; align-items: center; gap: .625rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--paper); font-size: var(--fs-sm); white-space: nowrap; text-shadow: 1px 1px 0 var(--frame); }
.brand-mark { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
/* Kembali: a sticker pill in the menu button's clothes (terracotta, the same chunky edge), icon-only on phones */
.btn-back { display: inline-flex; align-items: center; gap: .2rem; min-height: 2.75rem; padding: 0 .9rem 0 .5rem; border-radius: var(--radius-pill); background: var(--terracotta-ink); color: var(--paper-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); box-shadow: 0 3px 0 var(--ink); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.btn-back .icon { width: 1.375rem; height: 1.375rem; }
.btn-back:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.btn-back:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
@media (max-width: 639px) { .brand .wordmark { display: none; } }   /* phones: the left corner holds Kembali + the emblem; the name would collide with the seed counter */
@media (max-width: 479px) { .btn-back { width: 2.75rem; padding: 0; justify-content: center; } .btn-back-label { display: none; } .hud-brand { gap: .5rem; } }
.btn-menu { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--radius-pill); background: var(--terracotta-ink); color: var(--paper-2); box-shadow: 0 3px 0 var(--ink); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.btn-menu .icon { width: 1.375rem; height: 1.375rem; }
.btn-menu:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.btn-menu:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.hud-plaque { gap: .25rem; padding: .2rem .9rem .2rem .2rem; }
.hud-plaque::before, .hud-plaque::after { display: none; }
.plaque-ctl { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 6px; color: var(--paper); transition: background var(--dur-1); }
.plaque-ctl:hover { background: rgb(var(--paper-rgb) / .14); }
.plaque-ctl .icon { width: 1.375rem; height: 1.375rem; }
.hudm { min-width: 3.5rem; text-align: center; font-size: 1.375rem; line-height: 1; }
.pop { animation: pop var(--dur-2) var(--ease-settle); }
@keyframes pop { 40% { transform: scale(1.3); } }

/* preloader: dark board, paper sprigs rising, a dark pill counter */
.scr-pre { justify-content: center; align-items: center; background: var(--pine); color: var(--paper); text-align: center; z-index: 10; }
.pre-mid { display: grid; justify-items: center; gap: .875rem; }
.pre-mid .wordmark { font-size: var(--fs-xs); color: var(--olive-2); }
.pre-title { color: var(--paper); font-size: clamp(2rem, min(11cqw, 9cqh), 4.5rem); text-shadow: 3px 4px 0 var(--frame); max-width: 11ch; }
.pre-count { min-width: 4.75rem; }
.pre-leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pre-leaves i { position: absolute; left: var(--x); bottom: -16%; width: 84px; height: 110px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 110'%3E%3Cpath d='M42 108C40 70 38 40 44 6' fill='none' stroke='%237FB069' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M43 26C30 6 12 10 6 22c14 12 28 14 37 4ZM43 50C30 30 12 34 6 46c14 12 28 14 37 4ZM42 74C29 54 11 58 5 70c14 12 28 14 37 4ZM44 36c8-20 28-20 36-10-10 16-26 20-36 10ZM43 62c8-20 28-20 36-10-10 16-26 20-36 10ZM42 88c8-20 28-20 36-10-10 16-26 20-36 10Z' fill='%237FB069'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .85; animation: rise 9s linear infinite; animation-delay: var(--d); }
.pre-leaves i:nth-child(2n) { width: 64px; height: 84px; filter: hue-rotate(28deg) brightness(1.25); animation-duration: 11s; }
.pre-leaves i:nth-child(3n) { width: 100px; height: 130px; filter: brightness(.72); animation-duration: 7.5s; }
@keyframes rise { to { transform: translateY(-140vh) rotate(160deg); } }
html.reduced .pre-leaves { display: none; }

/* home: the lockup in the upper third (sized by the viewport), the scene in the middle, tagline + start in the lower third */
.scr-home { justify-content: flex-start; }
.lockup { text-align: center; margin-top: clamp(.25rem, 2.5cqh, 2rem); }
.title-lockup { position: relative; display: grid; justify-items: center; margin-inline: auto; max-width: 8ch; color: var(--paper); font-size: clamp(2.5rem, min(13.5cqw, 10.5cqh), 6rem); line-height: .9; letter-spacing: -.03em; text-shadow: -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--frame), 1.5px 1.5px 0 var(--frame), 4px 5px 0 var(--frame); }
.title-lockup .t1 { font-size: .42em; color: var(--sun); rotate: -2deg; }
.title-lockup .t2 { font-size: 1em; }
.title-lockup .deco { position: absolute; width: 1.15em; height: auto; pointer-events: none; filter: drop-shadow(2px 3px 0 var(--frame)); }
.title-lockup .deco-a { left: -.55em; top: -.1em; rotate: -16deg; }
.title-lockup .deco-b { right: -.6em; bottom: -.15em; rotate: 12deg; }
.title-lockup .deco-c { width: .85em; right: -.35em; top: -.35em; rotate: 14deg; }
.home-bottom { display: grid; justify-items: center; gap: .875rem; margin-top: auto; padding-bottom: clamp(.25rem, 2.5cqh, 2rem); }
.tagline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.0625rem, 2.4cqh, 1.375rem); color: var(--paper); text-shadow: 1px 1px 0 var(--frame), -1px -1px 0 rgb(var(--ink-rgb) / .5); }
.signpost { position: relative; display: grid; justify-items: center; }
.sign { font-size: 1rem; font-variant-numeric: tabular-nums; padding: .4rem 1.4rem; rotate: -2deg; white-space: nowrap; }
.home-extra { justify-content: center; gap: .75rem; }
@media (orientation: portrait) {
  /* phones: the record plaque hangs under the HUD above the lockup (the hill is busy enough with the stall and the tupai) */
  .signpost { position: absolute; left: 50%; top: calc(max(var(--pad), env(safe-area-inset-top)) + 3.25rem); translate: -50% 0; }
  .lockup { margin-top: 3.75rem; }
}
@media (orientation: landscape) {
  .title-lockup { max-width: 14ch; }
  /* the record sign is planted on the hill (main.js sets --sign-x/--sign-y at the ground point right of the tupai) */
  .signpost { position: absolute; left: var(--sign-x, 80%); top: var(--sign-y, 72%); translate: -50% -100%; padding-bottom: 2.4rem; }
  .signpost::before { content: ""; position: absolute; left: 50%; bottom: 0; width: .6rem; height: 2.8rem; translate: -50% 0; background: var(--wood); border: var(--stroke) solid var(--frame); border-radius: 2px; box-shadow: 2px 0 0 var(--ink); }
  .sign { rotate: -3deg; }
}

/* play: the first-run card above, the keycap cross + pill at the bottom centre (pointer devices), the armed-bonus button bottom-right */
.hud-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .75rem; }
.tutorial { grid-column: 1 / -1; justify-self: center; text-align: center; padding: 1rem 1.25rem; max-width: 22rem; animation: settle-in var(--dur-3) var(--ease-settle) both; }
.tutorial-title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.25; margin-bottom: .5rem; }
.tutorial-hint { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.hint { grid-column: 2; display: none; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { body.is-playing:not(.is-falling) .hint { display: flex; } }
.keycaps { display: grid; justify-items: center; gap: .3rem; }
.keycaps div { display: flex; gap: .3rem; }
.keycap { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: var(--stroke) solid var(--frame); border-radius: 8px; background: rgb(var(--paper-2-rgb) / .9); box-shadow: 0 3px 0 var(--ink); font-family: var(--font-text); font-weight: 600; font-size: 1.125rem; }
.hint-pill { padding: .4rem .9rem; border-radius: var(--radius-pill); background: rgb(var(--paper-2-rgb) / .92); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.use { grid-column: 3; justify-self: end; gap: .4rem; }
@keyframes settle-in { from { transform: translateY(18px); opacity: 0; } }

/* fall + result: Tunas tumbles beside the card (desktop) or above it (portrait); the red flag marks the record */
.scr-fall { justify-content: center; align-items: center; }
.fall-hero { position: absolute; left: max(1rem, 15cqw); top: 50%; width: clamp(5rem, 17cqh, 9.5rem); height: auto; translate: 0 -50%; filter: drop-shadow(2px 4px 0 rgb(var(--ink-rgb) / .35)); animation: tumble 2.6s linear infinite; }
@keyframes tumble { to { rotate: 360deg; } }
html.reduced .fall-hero { animation: none; rotate: 28deg; }
@media (orientation: portrait) { .fall-hero { left: 9%; top: max(1.25rem, env(safe-area-inset-top)); translate: 0 0; } }   /* the band above the centred card: at 14% the tumble crossed the card's corner and hid the eyebrow on a 390×844 phone */
.result { position: relative; width: min(100%, 22rem); display: grid; justify-items: center; gap: .625rem; text-align: center; transform: translateY(48px); opacity: 0; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); }   /* positioned: the card paints over the hero wherever they still meet (short phones) */
.result.is-in { transform: none; opacity: 1; }
.result .eyebrow-alt { display: none; }
#resRecord[hidden] ~ .eyebrow-alt { display: inline-flex; }
#resRecord { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
#resRecord .tag { font-size: .8125rem; padding: .2rem .5rem; }
.flag { width: 1.25rem; height: 1.6rem; }
.result-m { font-size: clamp(3rem, 9cqh, 4.75rem); color: var(--terracotta-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.result-seeds { display: flex; align-items: center; justify-content: center; gap: .75rem; color: var(--ink-2); font-weight: 500; }
.result-seeds b { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.result .field { width: 100%; text-align: left; margin-top: .25rem; }
.result .btn { margin-top: .25rem; }

/* veil: an olive paper curtain with a torn leafy edge that wipes up between screens */
.veil { position: absolute; left: 0; right: 0; top: -12%; bottom: 0; z-index: 20; transform: translateY(100%); pointer-events: none; }
.veil::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40C8 6 22 6 30 40C38 6 52 6 60 40Z' fill='%23A6A43A'/%3E%3C/svg%3E") repeat-x bottom / 64px 100%; }
.veil::after { content: ""; position: absolute; left: 0; right: 0; top: 12%; bottom: -2px; background: var(--olive); }
.veil.is-in, .veil.is-out { transition: transform var(--dur-3) var(--ease-io); }
.veil.is-in { transform: translateY(0); }
.veil.is-out { transform: translateY(-100%); }

/* toast, rotate prompt */
.toast { position: absolute; left: 50%; top: 22%; z-index: 15; max-width: 86%; padding: .625rem 1rem; border-radius: var(--radius-pill); background: var(--board); color: var(--paper); font-size: var(--fs-sm); font-weight: 500; text-align: center; transform: translate(-50%, 14px); opacity: 0; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2); }
.toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.toast[hidden] { display: none; }
.rotate { display: none; position: absolute; inset: 0; z-index: 30; place-items: center; text-align: center; padding: 2rem; background: var(--pine); color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.rotate .icon { width: 2.5rem; height: 2.5rem; margin: 0 auto .75rem; }
@media (hover: none) and (orientation: landscape) and (max-height: 540px) { .rotate { display: grid; } }

/* ---- dialogs (A2, v2): dark glass panels over the scene; the menu hangs under its button top-right. Everything inside is on-dark:
   the inner cards are sage tints, the sticker edges stay on the HUD and the home screen only. ---- */
.gdlg { margin: auto; width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: var(--stroke) solid var(--glass-dark-border); border-radius: var(--radius-lg); background: rgb(var(--moss-rgb) / .74); color: var(--sage); box-shadow: var(--glass-shadow); /* glass · taste-skill-ignore */ }
.gdlg::backdrop { background: rgb(var(--pine-rgb) / .55); }
.gdlg[open] { animation: dlg-in var(--dur-2) var(--ease-settle); }
@keyframes dlg-in { from { transform: translateY(16px) scale(.98); opacity: 0; } }
.gdlg .pill-btn, .gdlg .pill-btn:hover, .gdlg .pill-btn:active { box-shadow: none; }   /* taste-skill-ignore */
.gdlg-in { position: relative; display: grid; gap: var(--s-4); padding: var(--s-6); }
.gdlg-head { display: grid; gap: .25rem; padding-right: 3.25rem; }
.gdlg-head h2 { font-size: var(--fs-h3); }
.gdlg-close { position: absolute; top: var(--s-4); right: var(--s-4); }
.gdlg-lead { color: var(--sage-2); font-size: var(--fs-sm); line-height: 1.55; }
.gdlg-lead .seedbox { vertical-align: middle; padding: .15rem .55rem; box-shadow: none; /* taste-skill-ignore */ font-size: .875rem; color: var(--ink); }
.gdlg-lead .tag { font-size: .8125rem; padding: .1rem .45rem; vertical-align: middle; }
.gdlg .tag-sun { background: rgb(var(--olive-2-rgb) / .18); color: var(--olive-2); border-color: transparent; }
.gdlg .tag-leaf { background: rgb(var(--leaf-2-rgb) / .2); color: var(--leaf-3); border-color: transparent; }
.gdlg-menu { position: fixed; inset: auto; margin: 0; top: calc(max(var(--pad), env(safe-area-inset-top)) + 3.25rem); right: max(var(--pad), env(safe-area-inset-right)); width: min(18rem, calc(100vw - 2rem)); }
.gdlg-menu[open] { animation: menu-in var(--dur-2) var(--ease-settle); }
@keyframes menu-in { from { transform: translateY(-10px); opacity: 0; } }
.gdlg-menu .gdlg-in { padding: var(--s-5); }
.menu-list { display: grid; gap: .5rem; }
.menu-list .btn { width: 100%; justify-content: flex-start; }
/* Rumah Kaca: dashed-circle slots on the glass */
.gdlg-board .bonus-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.gdlg-board .bonus { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .5rem; padding: .75rem .375rem; text-align: center; border: 0; background: transparent; }
.gdlg-board .bonus-ico { width: 4.25rem; height: 4.25rem; border: 2px dashed rgb(var(--sage-rgb) / .45); border-radius: 50%; background: transparent; box-shadow: none; /* taste-skill-ignore */ }
.gdlg-board .bonus.is-owned .bonus-ico { border-style: solid; border-color: var(--olive-2); background: rgb(var(--olive-2-rgb) / .14); }
.gdlg-board .bonus-ico svg { width: 2.5rem; height: 2.5rem; }
.gdlg-board .bonus-body h3 { font-size: .9375rem; line-height: 1.15; }
.gdlg-board .bonus-body p { margin-top: .2rem; }
.bonus-list { display: grid; gap: .625rem; }
.bonus { display: grid; grid-template-columns: 3.25rem 1fr auto; gap: .875rem; align-items: center; padding: .75rem; border: var(--stroke) solid var(--line-dark); border-radius: var(--radius-lg); background: rgb(var(--sage-rgb) / .07); }
.bonus.is-owned { background: rgb(var(--leaf-2-rgb) / .16); border-color: rgb(var(--leaf-2-rgb) / .5); }
.bonus-ico { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; background: rgb(var(--sage-rgb) / .1); border: var(--stroke) solid var(--line-dark); border-radius: var(--radius); }
.bonus-ico svg { width: 2.25rem; height: 2.25rem; }
.bonus-body h3 { font-size: 1.0625rem; color: var(--sage); }
.bonus-body p { font-size: var(--fs-xs); color: var(--sage-2); margin-top: .125rem; }
.bonus-act .btn, .bonus-act .tag { white-space: nowrap; }
.tree-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.treecard { display: grid; justify-items: center; gap: .375rem; padding: .875rem .625rem; text-align: center; border: var(--stroke) solid var(--line-dark); border-radius: var(--radius-lg); background: rgb(var(--sage-rgb) / .07); }
.treecard img { width: 60px; height: 80px; }
.treecard h3 { font-size: 1rem; color: var(--sage); }
.treecard p { color: var(--sage-2); }
.treecard-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; min-height: 1.75rem; }
.treecard .tag { font-size: .8125rem; padding: .15rem .5rem; }
.board { display: grid; gap: .375rem; }
.board li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: .75rem; align-items: baseline; padding: .5rem .75rem; border-radius: var(--radius); background: rgb(var(--sage-rgb) / .07); color: var(--sage); }
.board li:first-child { background: rgb(var(--olive-2-rgb) / .2); }
.board-rank { font-family: var(--font-display); font-weight: 700; color: var(--olive-2); }
.board-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-m { font-family: var(--font-display); font-weight: 700; }
.board-at { font-size: var(--fs-xs); color: var(--sage-2); }
.board li.board-empty { grid-template-columns: minmax(0, 1fr); color: var(--sage-2); }   /* beats .board li (v1 bug: the sentence fell into the rank column) */
.lencana-list { display: grid; gap: .625rem; }
.lencana { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .625rem .75rem; border: var(--stroke) solid var(--line-dark); border-radius: var(--radius-lg); opacity: .62; }
.lencana.is-got { opacity: 1; border-color: rgb(var(--leaf-2-rgb) / .5); background: rgb(var(--sage-rgb) / .07); }
.lencana-ico { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--sage-rgb) / .1); }
.lencana.is-got .lencana-ico { background: var(--sun); }
.lencana h3 { font-size: 1rem; color: var(--sage); }
.lencana p { font-size: var(--fs-xs); color: var(--sage-2); }
.lencana .tag { font-size: .8125rem; padding: .15rem .5rem; white-space: nowrap; }
.pause-actions { display: grid; gap: .75rem; }
.pause-actions .btn { width: 100%; }

/* ---- phones: tighter dialogs; the stage itself is already the whole screen ---- */
@media (max-width: 767px) {
  .hud-top { gap: .375rem; }
  .gdlg { width: calc(100vw - 1.5rem); }
  .gdlg-in { padding: var(--s-5); }
  .bonus { grid-template-columns: 2.75rem 1fr; }
  .bonus-act { grid-column: 1 / -1; justify-self: end; }
  .gdlg-board .bonus-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gdlg-board .bonus { grid-template-columns: 1fr; }
  .gdlg-board .bonus-act { justify-self: center; }
}