:root {
  color-scheme: dark;
  --bg-night: #03151d;
  --bg-deep: #062630;
  --teal: #1ac5c6;
  --teal-soft: #8df4e7;
  --cream: #fff0bd;
  --gold: #edb64e;
  --wood: #6b3015;
  --muted: #a6c9c8;
  --line: rgba(102, 218, 218, .3);
  --shadow: rgba(0, 0, 0, .58);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg-night); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: #effafa; background:
  radial-gradient(circle at 15% 8%, rgba(23,132,139,.24), transparent 30rem),
  radial-gradient(circle at 88% 14%, rgba(211,144,45,.12), transparent 24rem),
  linear-gradient(180deg, #082b37, #03141d 35rem, #020d14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
button, select { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
a { color: #78f1f3; text-underline-offset: .18em; }
a:hover { color: #fff2b5; }

.bg-skip { position: fixed; z-index: 30; left: .6rem; top: .6rem; padding: .65rem 1rem; border-radius: .45rem; color: #06161b; background: #fff0a2; font-weight: 800; transform: translateY(-180%); }
.bg-skip:focus { transform: none; }
.bg-nav, .bg-site-footer { display: flex; align-items: center; gap: 1rem; width: min(1580px, calc(100% - 2rem)); margin-inline: auto; }
.bg-nav { min-height: 3.2rem; justify-content: space-between; color: #b6d7d5; font-size: .8rem; }
.bg-nav span { color: #d8eeee; text-transform: uppercase; letter-spacing: .16em; }

.bg-island { width: min(1600px, calc(100% - 1rem)); margin: 0 auto; padding: .8rem; border: 1px solid rgba(87,199,204,.24); border-radius: 1rem; background:
  linear-gradient(rgba(4,29,39,.76), rgba(2,18,27,.9)),
  repeating-linear-gradient(90deg, transparent 0 48px, rgba(71,176,183,.055) 49px 50px);
  box-shadow: 0 1.2rem 3.2rem rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.04);
}
.bg-sign { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.3rem; width: min(48rem, 90%); min-height: 6.1rem; margin: -.15rem auto .45rem; padding: .55rem 3rem; border: 3px solid #c07b30; border-radius: .85rem 1.25rem .8rem 1.1rem; text-align: center; background:
  linear-gradient(100deg, rgba(255,255,255,.07), transparent 16% 86%, rgba(0,0,0,.2)),
  linear-gradient(#79391d, #3b190e);
  box-shadow: inset 0 0 0 2px #2c1008, inset 0 -.8rem 1.5rem rgba(0,0,0,.2), 0 .6rem 1.4rem rgba(0,0,0,.38);
}
.bg-sign::after { content: ""; position: absolute; inset: .42rem; border: 1px solid rgba(255,219,137,.22); border-radius: .55rem; pointer-events: none; }
.bg-sign > span { z-index: 1; color: #ffd66a; font: 800 1.8rem Georgia, serif; text-shadow: 0 0 .8rem #e6a239; }
.bg-sign div { z-index: 1; }
.bg-eyebrow { margin: 0; color: #77eef0; font-size: .66rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.bg-sign h1 { margin: .08rem 0; color: #fff0bd; font: 900 clamp(1.55rem, 4vw, 2.5rem)/1 Georgia, serif; letter-spacing: .025em; text-transform: uppercase; text-shadow: 0 2px #2b1107, 0 0 .8rem rgba(255,208,98,.22); }
.bg-sign p:last-child { margin: .12rem 0 0; color: #ffe2a2; font: 700 .84rem/1.1 Georgia, serif; letter-spacing: .13em; text-transform: uppercase; }

/* Title and pairing stay semantic HTML for headings/screen readers; the
   approved wooden plaques display the same live wording inside the Canvas. */
.bg-board-copy { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }

.bg-duel-strip { display: flex; align-items: center; justify-content: center; gap: clamp(.55rem, 3vw, 2rem); margin: .25rem auto .6rem; }
.bg-player { display: grid; grid-template-columns: auto auto; align-items: center; gap: .05rem .55rem; min-width: 10.5rem; padding: .42rem .8rem; border: 1px solid #4ed2d5; border-radius: .45rem; color: #f4ffff; background: linear-gradient(135deg, #087b82, #064652); box-shadow: inset 0 0 0 2px rgba(1,17,23,.5), 0 3px 8px rgba(0,0,0,.28); }
.bg-player i { grid-row: 1 / 3; color: #88fff0; font-size: 1.35rem; }
.bg-player b { font: 800 1.05rem/1 Georgia, serif; }
.bg-player small { color: #b8e8e4; font-size: .62rem; }
.bg-player.is-opponent { grid-template-columns: auto auto; text-align: right; border-color: #e5b155; color: #2d1608; background: linear-gradient(135deg, #ffe39b, #bd7929); }
.bg-player.is-opponent i { grid-column: 2; }
.bg-player.is-opponent b, .bg-player.is-opponent small { grid-column: 1; }
.bg-player.is-opponent small { color: #603512; }
.bg-versus { color: #d8b16a; font: italic .72rem Georgia, serif; }

.bg-layout { display: grid; grid-template-columns: minmax(11.5rem,.72fr) minmax(34rem,4.7fr) minmax(12.5rem,.82fr); gap: .65rem; align-items: start; }
.bg-panel { min-width: 0; padding: 1rem .85rem; border: 2px solid #9d622a; border-radius: .72rem; color: #e8f2ed; background:
  radial-gradient(circle at 22% 5%, rgba(39,126,129,.25), transparent 60%),
  repeating-linear-gradient(5deg, transparent 0 6px, rgba(255,255,255,.012) 7px 8px),
  linear-gradient(145deg, #07373d, #04222d 65%, #031923);
  box-shadow: inset 0 0 0 2px rgba(22,7,2,.54), inset 0 0 1.5rem rgba(0,0,0,.3), 0 .45rem 1rem rgba(0,0,0,.3);
}
.bg-panel h2 { margin: .35rem 0 .6rem; color: var(--cream); font: 800 1.16rem/1.15 Georgia, serif; }
.bg-panel p { color: #b8d2cf; font-size: .73rem; line-height: 1.5; }
.bg-reward { text-align: center; }
.bg-shell-progress { display: flex; justify-content: center; gap: .45rem; margin: .85rem 0 .45rem; }
.bg-shell-progress span { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 1px solid #6b7772; border-radius: 50%; color: #506b68; background: #02171e; box-shadow: inset 0 2px 6px #000; }
.bg-shell-progress span.is-done { border-color: #ffcf66; color: #ffe39b; background: radial-gradient(circle at 35% 28%, #fff1a4, #c67d27 42%, #54250d 82%); box-shadow: 0 0 .75rem rgba(244,183,65,.34), inset 0 1px rgba(255,255,255,.45); }
.bg-reward > strong { display: block; color: #ffe3a2; font-size: .78rem; }

.bg-board-column { min-width: 0; }
.bg-board-wrap { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1672 / 940; border: .34rem solid #3a190b; border-radius: .72rem; background: #062b34; box-shadow: 0 0 0 2px #b37432, 0 0 0 3px #271006, 0 .8rem 2rem rgba(0,0,0,.54); isolation: isolate; }
.bg-board-wrap::after { content: ""; position: absolute; z-index: 2; inset: .18rem; border: 1px solid rgba(255,224,151,.23); border-radius: .35rem; pointer-events: none; box-shadow: inset 0 0 2.6rem rgba(0,0,0,.22); }
#bgBoard { display: block; width: 100%; height: 100%; outline: 0; touch-action: manipulation; cursor: pointer; }
#bgBoard:focus-visible { box-shadow: inset 0 0 0 4px #78f6f3; }

.bg-dice-stage { --die-size: clamp(2.3rem, 4.7vw, 4.25rem); position: absolute; z-index: 4; left: 50%; top: 53%; display: flex; gap: calc(var(--die-size) * .66); align-items: center; justify-content: center; pointer-events: none; transform: translate(-50%, -50%); perspective: 900px; perspective-origin: 50% 35%; }
.bg-dice-stage[hidden] { display: none; }
.bg-die { position: relative; flex: 0 0 var(--die-size); width: var(--die-size); height: var(--die-size); transform-style: preserve-3d; }
.bg-die::before { content: ""; position: absolute; inset: 67% -25% -30%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.67), rgba(0,0,0,.22) 48%, transparent 72%); transform: translateZ(-2px); }
.bg-die-cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-58deg) rotateY(-24deg) rotateZ(-7deg); }
.bg-die:last-child .bg-die-cube { transform: rotateX(-58deg) rotateY(24deg) rotateZ(8deg); }
.bg-die-face { position: absolute; inset: 0; display: grid; grid-template: repeat(3,1fr) / repeat(3,1fr); padding: calc(var(--die-size) * .12); border: 1px solid #b68b52; border-radius: 9%; backface-visibility: hidden; background: linear-gradient(135deg, #fffbe8, #edd2a0 75%, #d7ae73); box-shadow: inset 2px 2px 3px rgba(255,255,255,.82), inset -2px -2px 3px rgba(88,49,20,.24); }
.bg-die-face--front { transform: translateZ(calc(var(--die-size) * .5)); }
.bg-die-face--back { transform: rotateY(180deg) translateZ(calc(var(--die-size) * .5)); }
.bg-die-face--right { transform: rotateY(90deg) translateZ(calc(var(--die-size) * .5)); }
.bg-die-face--left { transform: rotateY(-90deg) translateZ(calc(var(--die-size) * .5)); }
.bg-die-face--top { transform: rotateX(90deg) translateZ(calc(var(--die-size) * .5)); }
.bg-die-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--die-size) * .5)); }
.bg-die-face--top { background: linear-gradient(135deg, #fffef4, #f4ddb3); }
.bg-die-face--right, .bg-die-face--left, .bg-die-face--back { background: linear-gradient(135deg, #d7b178, #ac773e); }
.bg-die-face--bottom { background: #a77840; }
.bg-pip { align-self: center; justify-self: center; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #58432e, #140d08 70%); box-shadow: inset 0 1px 2px #000, 0 1px rgba(255,255,255,.38); }
.bg-dice-stage.is-ai .bg-die-face { border-color: #398e88; background: linear-gradient(135deg, #d3fff8, #5acec5 72%, #2da298); }
.bg-dice-stage.is-ai .bg-die-face--top { background: linear-gradient(135deg, #e7fff8, #a0efe0); }
.bg-dice-stage.is-ai .bg-die-face--right, .bg-dice-stage.is-ai .bg-die-face--left, .bg-dice-stage.is-ai .bg-die-face--back, .bg-dice-stage.is-ai .bg-die-face--bottom { background: linear-gradient(135deg, #4bb8ac, #19786f); }
/* The three landings at .50, .77 and .97 seconds match the wood-click sounds. */
.bg-dice-stage.is-rolling .bg-die:first-child .bg-die-cube { animation: bg-die-tumble-one 1.2s linear both; }
.bg-dice-stage.is-rolling .bg-die:last-child .bg-die-cube { animation: bg-die-tumble-two 1.2s linear both; }
.bg-dice-stage.is-rolling .bg-die::before { animation: bg-die-shadow 1.2s linear both; }
@keyframes bg-die-tumble-one {
  0% { transform: translate(-4rem,-8rem) rotateX(-180deg) rotateY(-180deg) rotateZ(-70deg); }
  20% { transform: translate(-2rem,-6rem) rotateX(50deg) rotateY(20deg) rotateZ(30deg); }
  42% { transform: translate(-.5rem,.18rem) rotateX(270deg) rotateY(280deg) rotateZ(100deg); }
  54% { transform: translate(-.1rem,-1.9rem) rotateX(350deg) rotateY(335deg) rotateZ(160deg); }
  64% { transform: translate(.2rem,.1rem) rotateX(420deg) rotateY(390deg) rotateZ(220deg); }
  72% { transform: translate(.12rem,-.8rem) rotateX(500deg) rotateY(495deg) rotateZ(280deg); }
  81% { transform: translate(.03rem,.07rem) rotateX(620deg) rotateY(615deg) rotateZ(330deg); }
  90% { transform: translate(0,-.16rem) rotateX(656deg) rotateY(689deg) rotateZ(353deg); }
  100% { transform: translate(0,0) rotateX(662deg) rotateY(696deg) rotateZ(353deg); }
}
@keyframes bg-die-tumble-two {
  0% { transform: translate(4rem,-9rem) rotateX(160deg) rotateY(-120deg) rotateZ(70deg); }
  20% { transform: translate(2rem,-6.5rem) rotateX(-30deg) rotateY(40deg) rotateZ(-20deg); }
  42% { transform: translate(.6rem,.18rem) rotateX(-220deg) rotateY(250deg) rotateZ(-110deg); }
  54% { transform: translate(.15rem,-1.7rem) rotateX(-350deg) rotateY(375deg) rotateZ(-180deg); }
  64% { transform: translate(-.15rem,.1rem) rotateX(-430deg) rotateY(450deg) rotateZ(-230deg); }
  72% { transform: translate(-.1rem,-.65rem) rotateX(-510deg) rotateY(545deg) rotateZ(-285deg); }
  81% { transform: translate(-.02rem,.07rem) rotateX(-660deg) rotateY(660deg) rotateZ(-335deg); }
  90% { transform: translate(0,-.12rem) rotateX(-772deg) rotateY(736deg) rotateZ(-352deg); }
  100% { transform: translate(0,0) rotateX(-778deg) rotateY(744deg) rotateZ(-352deg); }
}
@keyframes bg-die-shadow {
  0%, 20% { opacity: .18; transform: translateY(.6rem) scale(1.5); }
  42%, 64%, 81%, 100% { opacity: 1; transform: translateY(0) scale(1); }
  54% { opacity: .4; transform: translateY(.2rem) scale(1.3); }
  72% { opacity: .66; transform: translateY(.1rem) scale(1.16); }
  90% { opacity: .85; transform: scale(1.04); }
}

.bg-overlay { position: absolute; z-index: 7; inset: 0; display: grid; place-items: center; padding: clamp(.45rem, 3vw, 2rem); overflow: auto; overscroll-behavior: contain; background: radial-gradient(circle at 50% 42%, rgba(4,58,66,.34), rgba(1,11,18,.84)); backdrop-filter: blur(2px); }
.bg-overlay[hidden] { display: none; }
.bg-overlay-card { width: min(32rem,95%); padding: clamp(.85rem,3vw,1.8rem); border: 1px solid rgba(108,239,236,.55); border-radius: .85rem; text-align: center; background: linear-gradient(145deg,rgba(6,58,65,.97),rgba(3,24,33,.98)); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.6), inset 0 1px rgba(255,255,255,.08); }
.bg-overlay-card h2 { margin: .3rem 0 .55rem; color: var(--cream); font: 800 clamp(1.2rem,3.8vw,2rem)/1.1 Georgia,serif; }
.bg-overlay-card > p:not(.bg-eyebrow) { max-width: 27rem; margin: .35rem auto .8rem; color: #c2ddda; font-size: clamp(.7rem,1.5vw,.9rem); line-height: 1.5; }
.bg-opponent-setup { display: grid; gap: .35rem; width: min(24rem,100%); margin: .75rem auto; text-align: left; }
.bg-opponent-setup label { color: #bce2de; font-size: .7rem; font-weight: 700; }
.bg-opponent-setup #bgModeHint { margin: 0 0 .25rem; color: #bce2de; font-size: .65rem; line-height: 1.35; }
.bg-opponent-setup select { width: 100%; min-height: 2.7rem; padding: .48rem .7rem; border: 1px solid #62d9da; border-radius: .45rem; color: #f7ffff; background: #073641; }
.bg-overlay-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; }

button { min-height: 2.45rem; padding: .5rem .8rem; border: 1px solid #55cdd0; border-radius: .48rem; color: #eaffff; background: linear-gradient(#0b5861,#063640); font-size: .74rem; font-weight: 800; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 5px rgba(0,0,0,.3); }
button:hover:not(:disabled) { filter: brightness(1.14); }
button:focus-visible, select:focus-visible { outline: 3px solid #8af8f4; outline-offset: 2px; }
button:disabled { opacity: .46; cursor: not-allowed; }
button.bg-gold-button { border-color: #f3c45f; color: #2d1608; background: linear-gradient(#ffeaa3,#d28a2f); text-shadow: 0 1px rgba(255,255,255,.4); }

.bg-turn-console { display: grid; grid-template-columns: minmax(10rem,1fr) auto auto; gap: .55rem; align-items: center; padding: .65rem .3rem .15rem; }
.bg-landscape-hint { display: none; margin: .42rem 0 0; color: #9ec9c6; text-align: center; font-size: .66rem; }
.bg-turn-message { margin: 0; color: #d8eeee; font-size: .78rem; line-height: 1.35; }
.bg-dice-choice { display: flex; gap: .25rem; min-height: 2rem; align-items: center; }
.bg-dice-choice button { display: grid; min-width: 2rem; min-height: 2rem; padding: .25rem; place-items: center; border-color: #d7ac58; border-radius: .35rem; color: #26160d; background: #f4d89b; font: 900 .8rem Georgia,serif; }
.bg-dice-choice button.is-used { opacity: .28; text-decoration: line-through; }
.bg-dice-choice button.is-selected { outline: 2px solid #62f6f2; outline-offset: 2px; }
.bg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }

.bg-help ul { margin: .75rem 0; padding: 0; list-style: none; color: #c7dcda; font-size: .7rem; }
.bg-help li { display: grid; grid-template-columns: 1rem 1fr; gap: .4rem; align-items: center; margin-top: .45rem; }
.bg-help li i { display: block; width: .8rem; height: .8rem; border-radius: 50%; }
.bg-help .is-source { border: 2px solid #7effee; box-shadow: 0 0 .55rem #37eadd; }
.bg-help .is-target { border: 2px solid #ffd66d; box-shadow: 0 0 .55rem #f3af38; }
.bg-help .is-bar { border: 2px dashed #ff8f6c; }
.bg-utility-actions { display: grid; gap: .38rem; }

.bg-information { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; width: min(1580px,calc(100% - 2rem)); margin: 1.15rem auto 2rem; }
.bg-information article { padding: clamp(1rem,2vw,1.45rem); border: 1px solid rgba(100,213,215,.23); border-radius: .78rem; color: #cbe0de; background: rgba(3,27,37,.8); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.bg-information h2 { margin: 0 0 .6rem; color: var(--cream); font: 800 1.22rem/1.2 Georgia,serif; }
.bg-information p, .bg-information li { font-size: .84rem; line-height: 1.62; }
.bg-information p { margin: .6rem 0 0; }
.bg-information ol { padding-left: 1.25rem; }
.bg-information li + li { margin-top: .4rem; }
.bg-site-footer { min-height: 3.7rem; border-top: 1px solid rgba(100,210,214,.14); color: #aac7c5; font-size: .73rem; }
.bg-site-footer span { margin-right: auto; }

.is-embed .bg-nav, .is-embed .bg-information, .is-embed .bg-site-footer { display: none; }
.is-embed .bg-island { width: 100%; margin: 0; border: 0; border-radius: 0; }
.is-embed .bg-sign { margin-top: 0; }

@media (max-width: 1180px) {
  .bg-layout { grid-template-columns: minmax(10.5rem,.7fr) minmax(32rem,3.6fr); }
  .bg-help { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1.5fr auto; gap: 1rem; align-items: center; }
  .bg-help h2 { margin-bottom: .2rem; }
  .bg-help ul { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; }
  .bg-help li { margin: 0; }
  .bg-information { grid-template-columns: 1fr 1fr; }
  .bg-information article:last-child { grid-column: 1 / -1; }
}

/* An auto-height iframe changes its own orientation when this layout grows.
   A width-only breakpoint prevents grid/flex/height oscillation at browser zoom. */
@media (max-width: 980px) {
  .bg-layout { display: flex; flex-direction: column; }
  .bg-board-column { order: 1; width: 100%; }
  .bg-reward { order: 2; width: 100%; }
  .bg-help { order: 3; width: 100%; }
}

@media (max-width: 760px) {
  .bg-nav { width: calc(100% - 1rem); font-size: .72rem; }
  .bg-nav span { display: none; }
  .bg-island { width: 100%; padding: .35rem; border: 0; border-radius: 0; }
  .bg-sign { width: 96%; min-height: 4.2rem; padding: .4rem 1.5rem; }
  .bg-sign > span { display: none; }
  .bg-sign h1 { font-size: clamp(1.2rem,6vw,1.65rem); }
  .bg-sign p:last-child { font-size: .58rem; }
  .bg-duel-strip { gap: .35rem; }
  .bg-player { min-width: 0; width: 43%; padding: .36rem .5rem; }
  .bg-player b { font-size: .88rem; }
  .bg-layout { display: flex; flex-direction: column; }
  .bg-board-column { order: 1; width: 100%; }
  .bg-landscape-hint { display: block; }
  .bg-reward { order: 2; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; text-align: left; }
  .bg-reward .bg-eyebrow, .bg-reward h2, .bg-reward p { grid-column: 1; }
  .bg-reward h2, .bg-reward p { margin: 0; }
  .bg-shell-progress { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .bg-reward > strong { grid-column: 2; text-align: center; }
  .bg-reward #bgClaim { grid-column: 1 / -1; }
  .bg-help { order: 3; width: 100%; display: block; }
  .bg-utility-actions { grid-template-columns: repeat(3,1fr); }
  .bg-turn-console { grid-template-columns: 1fr auto; }
  .bg-turn-message { grid-column: 1 / -1; text-align: center; }
  .bg-actions { grid-column: 1 / -1; justify-content: stretch; }
  .bg-actions button { flex: 1; }
  .bg-information { display: block; width: calc(100% - 1rem); margin-top: .7rem; }
  .bg-information article + article { margin-top: .6rem; }
  .bg-site-footer { width: calc(100% - 1rem); flex-wrap: wrap; padding-block: .7rem; }
}

@media (max-width: 430px) {
  .bg-sign { min-height: 3.8rem; }
  .bg-sign .bg-eyebrow { display: none; }
  .bg-duel-strip { margin-bottom: .4rem; }
  .bg-player { grid-template-columns: auto 1fr; padding: .3rem .42rem; }
  .bg-player i { font-size: 1rem; }
  .bg-player small { font-size: .52rem; }
  .bg-board-wrap { border-width: .22rem; border-radius: .38rem; }
  .bg-overlay { padding: .18rem; }
  .bg-overlay-card { width: 98%; padding: .48rem .55rem; }
  .bg-overlay-card .bg-eyebrow { display: none; }
  .bg-overlay-card h2 { margin: .05rem 0 .25rem; font-size: .98rem; }
  .bg-overlay-card > p:not(.bg-eyebrow) { margin: .15rem auto .35rem; font-size: .59rem; line-height: 1.22; }
  .bg-opponent-setup { margin: .35rem auto; }
  .bg-opponent-setup label { font-size: .58rem; }
  .bg-opponent-setup select { min-height: 2rem; padding: .25rem .4rem; font-size: .64rem; }
  .bg-overlay-card button { min-height: 1.9rem; padding: .28rem .45rem; font-size: .65rem; }
  .bg-dice-stage { --die-size: 2.25rem; }
  .bg-turn-console { padding-top: .4rem; }
  .bg-turn-message { font-size: .68rem; }
  .bg-actions button { min-width: 42%; padding-inline: .35rem; font-size: .66rem; }
  .bg-reward { padding: .72rem; }
  .bg-shell-progress { gap: .2rem; }
  .bg-shell-progress span { width: 1.45rem; }
  .bg-utility-actions { gap: .22rem; }
  .bg-utility-actions button { padding-inline: .3rem; font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (forced-colors: active) {
  .bg-island, .bg-panel, .bg-board-wrap, .bg-overlay-card { border: 2px solid CanvasText; }
  .bg-shell-progress span.is-done, .bg-dice-choice button { forced-color-adjust: none; }
}