:root {
  --board-rotation: 0deg;
  --board-zoom: 1;
  --board-pan-x: 0px;
  --board-pan-y: 0px;
  --board-gap: 0.22rem;
  --center-bleed: calc(var(--board-gap) + 2px);
  --center-art-scale: 1.82;
  --center-art-x: 50%;
  --center-art-y: 50%;
  --board-grid-size: 17;
  --corner-span: 2;
  --edge-span: 1;
  --ink: #172033;
  --muted: #576074;
  --primary: #0e6b66;
  --accent: #df7a2f;
  --paper: #f8f3e7;
  --group-green: #4f9f6d;
  --group-lightblue: #76b8e8;
  --group-purple: #9d79c9;
  --group-pink: #d28ab4;
  --group-orange: #e39a54;
  --group-red: #cb6460;
  --group-yellow: #e1c452;
  --group-darkgreen: #2d7b5a;
  --group-darkblue: #355eaf;
  --ledger: #4ea68f;
  --market: #d27f45;
  --audit: #8790db;
  --tax: #c6574f;
  --transit: #5d8bb2;
  --utility: #7b9d56;
  --rest: #a98bd8;
  --bonus: #dbb84d;
  --shadow: 0 20px 45px rgba(23, 32, 51, 0.12);
  --radius: 22px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: "Manrope", sans-serif; color: var(--ink); background: radial-gradient(circle at top left, rgba(223,122,47,0.12), transparent 30%), radial-gradient(circle at bottom right, rgba(14,107,102,0.15), transparent 28%), linear-gradient(180deg, #f9f4eb 0%, #f2ebdf 100%); }
button, select, input { font: inherit; }
.app-shell { width: min(1720px, calc(100% - 0.75rem)); margin: 0 auto; padding: 0.4rem 0 1.1rem; }
.screen { display: none; } .screen-active { display: block; }
.hero-card, .panel, .modal-card { background: rgba(255, 250, 241, 0.96); border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.hero-card { padding: 2rem; border-radius: 28px; }
.eyebrow { margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 800; color: var(--primary); }
h1, h2, h3 { margin: 0; font-family: "Fraunces", serif; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.95; }
.intro { max-width: 68ch; margin-top: 1rem; color: var(--muted); font-size: 1.04rem; line-height: 1.7; }
.hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.panel { border-radius: var(--radius); padding: 1.25rem; }
.learning-list { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.65; }
.setup-card { margin-top: 1.5rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(23,32,51,0.95), rgba(14,107,102,0.95)); border-radius: 24px; color: white; }
.setup-row { display: flex; align-items: center; gap: 1rem; }
.player-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1rem; }
.input-group { display: flex; flex-direction: column; gap: 0.45rem; }
select, input { border: 1px solid rgba(23,32,51,0.14); border-radius: 14px; padding: 0.85rem 1rem; background: white; color: var(--ink); }
.setup-actions, .topbar-actions, .modal-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.setup-actions { margin-top: 1.25rem; }
.button { border: 0; border-radius: 999px; padding: 0.9rem 1.3rem; font-weight: 800; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 16px rgba(23,32,51,0.08); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.button-primary { background: var(--accent); color: white; }
.button-secondary { background: rgba(255,255,255,0.16); color: inherit; border: 1px solid rgba(255,255,255,0.18); }
.topbar-actions .button[aria-pressed="true"] { background: rgba(14,107,102,0.88); color: white; border-color: rgba(14,107,102,0.88); }
#rotation-toggle { display: none; }
.button-danger { background: #ffe2db; color: #74251f; }
.button-full { width: 100%; }
.topbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 0.65rem; }
.section-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; margin-bottom: 0.75rem; }
.section-note { color: var(--muted); font-size: 0.82rem; }
.game-title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.game-layout { display: grid; grid-template-columns: minmax(310px, 0.95fr) minmax(820px, 2.55fr) minmax(290px, 0.78fr); gap: 0.85rem; align-items: stretch; }
.preview-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 1rem; align-content: stretch; justify-items: center; position: sticky; top: 0.5rem; min-width: 0; height: fit-content; min-height: min(56vh, 620px); max-height: min(56vh, 620px); padding: 1.4rem; text-align: center; }
.preview-panel .section-head { width: 100%; justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 0.3rem; }
.preview-space-meta { width: 100%; margin: 0; color: var(--muted); line-height: 1.5; text-align: center; }
.active-preview { min-height: 0; height: 100%; display: flex; }
.preview-space { min-height: 100%; height: 100%; width: 100%; border-radius: 26px; display: flex; flex-direction: column; }
.preview-space .space-band { height: 5%; min-height: 12px; }
.preview-space .space-body { flex: 1; height: auto; padding: 0.95rem 1rem 0.9rem; gap: 0.45rem; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; justify-items: center; align-items: start; text-align: center; }
.preview-space .space-id { width: 100%; font-size: 0.84rem; text-align: center; }
.preview-space .space-label { width: 100%; font-size: 0.98rem; text-align: center; }
.preview-space .space-name { width: 100%; font-size: 1.6rem; line-height: 1.04; text-align: center; }
.preview-space .space-value { grid-row: 5; align-self: end; justify-self: stretch; width: 100%; margin-top: 0; font-size: 1rem; padding-top: 0.55rem; text-align: center; }
.preview-space .token-wrap { grid-row: 4; position: static; width: 100%; max-width: none; min-height: 170px; margin-top: 0.1rem; align-self: stretch; align-items: center; justify-content: center; flex-wrap: nowrap; }
.preview-space .token { width: 30px; height: 30px; }
.preview-space .token-sprite { width: 270px; height: 270px; }
.preview-space.space-corner .space-name { font-size: 1.6rem; }
.preview-space.space-corner .space-label { font-size: 0.98rem; }
.preview-space.space-corner .space-value { font-size: 1rem; }
.preview-space.space-type-start .space-name { font-size: 1.6rem; }
.board-panel { min-width: 0; display: flex; }
.board-stage { padding: 0.3rem; border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(255,250,241,0.78)); border: 1px solid rgba(255,255,255,0.55); box-shadow: var(--shadow); }
.board-viewport { width: min(100%, 1340px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; }
.board-camera { width: 100%; height: 100%; transform: translate(var(--board-pan-x), var(--board-pan-y)) scale(var(--board-zoom)); transform-origin: center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.board { width: 100%; height: 100%; display: grid; grid-template-columns: 0.82fr 0.82fr 1.72fr 0.86fr 0.86fr 1.72fr 0.86fr 0.86fr 1.72fr 0.86fr 0.86fr 1.72fr 0.86fr 0.86fr 1.72fr 0.82fr 0.82fr; grid-template-rows: 0.82fr 0.82fr 1.72fr 0.86fr 0.86fr 1.72fr 0.86fr 0.86fr 1.72fr 0.86fr 0.86fr 1.72fr 0.86fr 0.86fr 1.72fr 0.82fr 0.82fr; gap: var(--board-gap); padding: 0.28rem; aspect-ratio: 1; border-radius: 28px; border: 2px solid #1d2434; background: linear-gradient(180deg, #efe8d5, #e6dcc3); transform: rotate(var(--board-rotation)); transform-origin: center; transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.space { position: relative; min-width: 0; min-height: 0; border: 2px solid #1d2434; background: var(--paper); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); z-index: 2; }
.space-corner { border-radius: 16px; }
.space-band { height: 6%; min-height: 4px; border-bottom: 2px solid #1d2434; }
.space-body { height: 94%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.08rem; padding: 0.12rem 0.18rem 0.16rem; text-align: center; position: relative; overflow: hidden; }
.space-content { width: 100%; height: 100%; display: flex; flex-direction: column; transform-origin: center; transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.space-id, .space-name, .space-label, .space-value { margin: 0; }
.space-id { font-size: 0.4rem; font-weight: 800; letter-spacing: 0.06em; color: rgba(23,32,51,0.52); }
.space-label { font-size: 0.46rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.space-name { font-size: 0.66rem; font-weight: 800; line-height: 1.02; overflow-wrap: anywhere; word-break: break-word; text-wrap: balance; max-width: 100%; }
.space-corner .space-name { font-size: 0.82rem; }
.space-value { margin-top: auto; width: 100%; padding-top: 0.08rem; border-top: 1px solid rgba(29,36,52,0.16); font-size: 0.5rem; font-weight: 800; line-height: 1.06; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.space-vertical .space-body { padding-inline: 0.24rem; }
.space-horizontal .space-body { padding-inline: 0.16rem; }
.token-wrap { position: absolute; right: 0.08rem; bottom: 0.08rem; display: flex; gap: 0.16rem; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; max-width: 4.75rem; overflow: visible; }
.token { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.92); box-shadow: 0 4px 8px rgba(23,32,51,0.18); }
.token.moving { animation: token-hop 0.32s ease; }
.token-sprite { width: 74px; height: 74px; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: inline-flex; align-items: flex-end; justify-content: center; overflow: visible; }
.token-sprite-image { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(23,32,51,0.28)); }
.space-type-green .space-band { background: var(--group-green); }
.space-type-lightblue .space-band { background: var(--group-lightblue); }
.space-type-purple .space-band { background: var(--group-purple); }
.space-type-pink .space-band { background: var(--group-pink); }
.space-type-orange .space-band { background: var(--group-orange); }
.space-type-red .space-band { background: var(--group-red); }
.space-type-yellow .space-band { background: var(--group-yellow); }
.space-type-darkgreen .space-band { background: var(--group-darkgreen); }
.space-type-darkblue .space-band { background: var(--group-darkblue); }
.space-type-neutral .space-band { background: linear-gradient(180deg, rgba(23,32,51,0.1), rgba(23,32,51,0.03)); }
.space-type-start .space-band { background: linear-gradient(90deg, #ee9d3d, #f4cd67); }
.board-center { grid-column: 4 / span 11; grid-row: 4 / span 11; border-radius: 0; border: 0; background: transparent; position: relative; overflow: visible; display: grid; place-items: center; z-index: 1; }
.board-center::before { content: ""; position: absolute; inset: calc(var(--center-bleed) * -1); background: url("assets/board-background.png") var(--center-art-x) var(--center-art-y) / cover no-repeat; transform: scale(var(--center-art-scale)); transform-origin: center; border-radius: 22px; z-index: 0; }
.board-center::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0)); border-radius: 22px; z-index: 0; }
.board-center-content { width: 100%; height: 100%; padding: 0.72rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); position: relative; z-index: 1; }
.center-title { font-size: clamp(2rem, 2.8vw, 3rem); }
.center-subtitle { margin: 0.35rem 0 0; color: var(--muted); font-size: 1rem; max-width: 38ch; }
.deck-row { display: flex; gap: 1rem; align-items: center; justify-content: center; width: 100%; }
.deck { width: min(160px, 38%); aspect-ratio: 3/4; border-radius: 18px; border: 2px solid #1d2434; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; box-shadow: 0 14px 22px rgba(23,32,51,0.16); position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.deck::before, .deck::after { content: ""; position: absolute; inset: 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.28); }
.deck::after { inset: 12px; }
.deck-ledger { background: linear-gradient(145deg, rgba(78,166,143,0.96), rgba(33,91,75,0.96)); color: white; }
.deck-market { background: linear-gradient(145deg, rgba(210,127,69,0.96), rgba(123,62,21,0.96)); color: white; }
.deck-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.deck-title { font-family: "Fraunces", serif; font-size: 1rem; }
.deck-active { transform: translateY(-8px) scale(1.04); box-shadow: 0 18px 26px rgba(23,32,51,0.22), 0 0 0 6px rgba(255,255,255,0.14); }
.turn-chip { padding: 0.55rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,0.75); border: 1px solid rgba(29,36,52,0.14); font-size: 0.82rem; font-weight: 700; }
.floating-card { position: absolute; inset: auto 50% 14%; transform: translateX(-50%) translateY(12px) scale(0.85); width: min(185px, 45%); aspect-ratio: 3/4; border-radius: 18px; border: 2px solid #1d2434; box-shadow: 0 18px 30px rgba(23,32,51,0.24); opacity: 0; pointer-events: none; transition: transform 0.35s ease, opacity 0.35s ease; }
.floating-card.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.floating-card.revealed { transform: translateX(-50%) translateY(-18px) scale(1.05); }
.floating-card-back, .floating-card-front { position: absolute; inset: 0; border-radius: 16px; padding: 1rem; backface-visibility: hidden; }
.floating-card-back { display: grid; place-items: center; color: white; font-family: "Fraunces", serif; font-size: 1.1rem; background: linear-gradient(145deg, rgba(23,32,51,0.96), rgba(14,107,102,0.96)); }
.floating-card-front { background: #fff8ed; color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transform: rotateY(180deg); }
.floating-card.revealed .floating-card-back { opacity: 0; }
.floating-card.revealed .floating-card-front { opacity: 1; transform: rotateY(0deg); }
.floating-card-title { margin: 0; font-family: "Fraunces", serif; font-size: 1rem; }
.floating-card-body { margin: 0.5rem 0; font-size: 0.85rem; line-height: 1.45; }
.floating-card-effect { margin: 0; font-weight: 800; font-size: 0.78rem; color: var(--primary); }
.hud-panel { display: grid; gap: 0.8rem; align-content: start; position: sticky; top: 0.5rem; }
.turn-indicator, .stat-line, .status-message, .dice-total { margin: 0; color: var(--muted); line-height: 1.55; }
.turn-indicator { font-weight: 700; color: var(--ink); }
.dice-box { display: flex; gap: 0.8rem; margin: 1rem 0 0.7rem; }
.die { width: 68px; aspect-ratio: 1; border-radius: 18px; position: relative; background: linear-gradient(145deg, #ffffff, #ecf2f6); border: 1px solid rgba(23,32,51,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 18px rgba(23,32,51,0.12); }
.die.rolling { animation: die-wobble 0.16s linear infinite; }
.pip { width: 11px; height: 11px; border-radius: 50%; background: #22304d; position: absolute; opacity: 0; }
.die[data-value="1"] .pip-1,
.die[data-value="2"] .pip-2, .die[data-value="2"] .pip-6,
.die[data-value="3"] .pip-2, .die[data-value="3"] .pip-1, .die[data-value="3"] .pip-6,
.die[data-value="4"] .pip-2, .die[data-value="4"] .pip-4, .die[data-value="4"] .pip-6, .die[data-value="4"] .pip-7,
.die[data-value="5"] .pip-2, .die[data-value="5"] .pip-4, .die[data-value="5"] .pip-1, .die[data-value="5"] .pip-6, .die[data-value="5"] .pip-7,
.die[data-value="6"] .pip-2, .die[data-value="6"] .pip-3, .die[data-value="6"] .pip-4, .die[data-value="6"] .pip-5, .die[data-value="6"] .pip-6, .die[data-value="6"] .pip-7 { opacity: 1; }
.pip-1 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pip-2 { top: 17%; left: 17%; }
.pip-3 { top: 17%; left: 50%; transform: translateX(-50%); }
.pip-4 { top: 17%; right: 17%; }
.pip-5 { bottom: 17%; left: 50%; transform: translateX(-50%); }
.pip-6 { bottom: 17%; left: 17%; }
.pip-7 { bottom: 17%; right: 17%; }
.scoreboard { display: grid; gap: 0.8rem; }
.player-card { border-radius: 18px; background: white; border: 1px solid rgba(23,32,51,0.08); padding: 0.9rem; }
.player-card.active { border-color: rgba(14,107,102,0.45); box-shadow: 0 10px 18px rgba(14,107,102,0.12); }
.player-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 0.5rem; }
.player-name { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; }
.player-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.75rem; color: var(--muted); font-size: 0.92rem; }
.overlay { position: fixed; inset: 0; background: rgba(23,32,51,0.42); z-index: 20; }
.modal { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(680px, calc(100% - 1.5rem)); z-index: 30; }
.modal-card { border-radius: 26px; padding: 1.5rem; }
.modal-tag { margin: 0 0 0.35rem; color: var(--primary); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 800; }
.modal-copy, .help-copy p { color: var(--muted); line-height: 1.7; }
.quick-tip-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.quick-tip { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid rgba(23,32,51,0.12); border-radius: 999px; background: white; color: var(--ink); padding: 0.7rem 0.9rem; cursor: help; }
.quick-tip-icon { width: 1.2rem; height: 1.2rem; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(14,107,102,0.12); color: var(--primary); font-size: 0.78rem; font-weight: 800; }
.quick-tip-bubble { position: absolute; left: 0; top: calc(100% + 0.55rem); width: min(260px, 60vw); padding: 0.75rem 0.85rem; border-radius: 14px; background: rgba(23,32,51,0.96); color: white; font-size: 0.82rem; line-height: 1.45; text-align: left; box-shadow: 0 14px 24px rgba(23,32,51,0.22); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease; z-index: 5; }
.quick-tip:hover .quick-tip-bubble, .quick-tip:focus-visible .quick-tip-bubble { opacity: 1; transform: translateY(0); }
.rules-modal-card { padding: 1.25rem 1.25rem 1rem; background: #fffaf1; }
.rules-modal-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 0.75rem; }
.icon-close { border: 0; border-radius: 999px; width: 2.2rem; height: 2.2rem; background: rgba(23,32,51,0.08); color: var(--ink); font-weight: 800; cursor: pointer; }
.rules-scroll { max-height: min(70vh, 720px); overflow-y: auto; padding-right: 0.35rem; }
.rule-section { border: 1px solid rgba(23,32,51,0.1); border-radius: 18px; background: rgba(255,255,255,0.8); padding: 0.15rem 0.9rem 0.9rem; margin-top: 0.9rem; }
.rule-section summary { cursor: pointer; list-style: none; font-weight: 800; padding: 0.9rem 0 0.2rem; }
.rule-section summary::-webkit-details-marker { display: none; }
.rule-section summary::after { content: "+"; float: right; color: var(--primary); }
.rule-section[open] summary::after { content: "-"; }
.rule-body { color: var(--muted); line-height: 1.7; }
.rule-body p:last-child, .rule-body ul:last-child, .rule-body ol:last-child { margin-bottom: 0; }
.rules-list { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--muted); line-height: 1.65; }
.option-list { display: grid; gap: 0.75rem; margin: 1rem 0; }
.option-button { text-align: left; border-radius: 16px; border: 1px solid rgba(23,32,51,0.1); background: white; padding: 0.95rem 1rem; cursor: pointer; }
.option-button.selected { border-color: rgba(14,107,102,0.55); background: rgba(14,107,102,0.08); }
.feedback-box, .summary-item { margin: 1rem 0 0; padding: 1rem; border-radius: 18px; background: rgba(23,32,51,0.05); line-height: 1.65; }
.feedback-box.correct { background: rgba(124,200,179,0.18); }
.feedback-box.incorrect { background: rgba(242,183,170,0.22); }
.summary-list { display: grid; gap: 0.75rem; margin-top: 1rem; }
.hidden { display: none; }
@keyframes die-wobble { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(5deg) scale(0.96); } 50% { transform: rotate(-5deg) scale(1.04); } 75% { transform: rotate(3deg) scale(0.98); } 100% { transform: rotate(0deg) scale(1); } }
@keyframes token-hop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-10px) scale(1.12); } 65% { transform: translateY(2px) scale(0.96); } 100% { transform: translateY(0) scale(1); } }
@media (max-width: 1320px) { .app-shell { width: min(100% - 1rem, 1480px); } .game-layout { grid-template-columns: minmax(250px, 0.8fr) minmax(0, 2fr) minmax(280px, 0.88fr); } .board-viewport { width: min(100%, 1160px); } .preview-panel { min-height: min(52vh, 520px); max-height: min(52vh, 520px); padding: 1.15rem; } .preview-space .space-name, .preview-space.space-corner .space-name, .preview-space.space-type-start .space-name { font-size: 1.32rem; } .preview-space .space-value, .preview-space.space-corner .space-value { font-size: 0.9rem; } .preview-space .token-wrap { min-height: 130px; } .preview-space .token-sprite { width: 200px; height: 200px; } .space-id { font-size: 0.37rem; } .space-label { font-size: 0.42rem; } .space-name { font-size: 0.58rem; } .space-corner .space-name { font-size: 0.74rem; } .space-value { font-size: 0.44rem; } }
@media (max-width: 980px) { :root { --board-gap: 0.18rem; } .game-layout, .hero-grid, .player-inputs { grid-template-columns: 1fr; } .topbar { align-items: flex-start; flex-direction: column; } .quick-tip-bubble { width: min(280px, 75vw); } .hud-panel { position: static; } .board { gap: 0.18rem; padding: 0.24rem; } }
@media (max-width: 640px) { :root { --board-gap: 0.12rem; } .app-shell { width: min(100% - 1rem, 1240px); } .hero-card, .setup-card, .modal-card, .panel { padding: 1rem; } .board { gap: 0.12rem; padding: 0.18rem; } .space-id { font-size: 0.32rem; } .space-label { font-size: 0.38rem; } .space-name { font-size: 0.5rem; } .space-corner .space-name { font-size: 0.68rem; } .space-value { font-size: 0.44rem; } .space-vertical .space-body { padding-inline: 0.24rem; } .space-horizontal .space-body { padding-inline: 0.18rem; } .board-center-content { padding: 0.7rem; } .center-title { font-size: 1.45rem; } .deck { width: 42%; } .floating-card { width: 56%; } .setup-row, .setup-actions, .topbar-actions, .modal-actions, .section-head { flex-direction: column; } .die { width: 56px; } .pip { width: 9px; height: 9px; } .modal { width: calc(100% - 1rem); } .rules-scroll { max-height: 72vh; } .quick-tip { width: 100%; justify-content: space-between; } .quick-tip-bubble { left: auto; right: 0; width: min(280px, calc(100vw - 2rem)); } }