@import url('https://fonts.googleapis.com/css2?family=Grandstander:wght@600;700;800;900&family=Nunito:wght@500;600;700;800;900&display=swap');

/* Paper Reels: the cabinet is a paper diorama on a kraft desk. Every surface is card stock:
   panels are stacked sheets with a visible edge, labels are washi tape, dividers are scored folds,
   the board is a tray cut into the card and every symbol sits on a raised paper tile.
   Loaded after style.css and cabinet.css; it only re-skins, it never moves the layout. */
:root {
  --paper: #fcf6ea;
  --paper-2: #f5ebd8;
  --paper-3: #eadbbf;
  --edge: #d6c09b;
  --kraft: #c9a678;
  --kraft-2: #b48f61;
  --kraft-3: #8c6a42;
  --ink: #3f2f24;
  --ink-2: #6e5a49;
  --ink-3: #76604d;   /* >= 4.5:1 on paper and the tinted cards */
  --rose-ink: #a83f37;
  --amber-ink: #8a5a12;
  --leaf: #9fcd6c; --leaf-card: #dcefc0; --leaf-edge: #a9c97f; --leaf-ink: #4c7a2e;
  --flame: #f0a35c; --flame-card: #fadcbc; --flame-edge: #e2ad78; --flame-ink: #a2531c;
  --tide: #78bedd; --tide-card: #cfe9f4; --tide-edge: #94c3d7; --tide-ink: #2c6c8c;
  --rose: #e2685e;
  --gold: #f2bf52;
  --gold-2: #e09f33;
  --muted: var(--ink-2);
  --serif: 'Grandstander', 'Nunito', system-ui, sans-serif;
  --display: 'Grandstander', 'Nunito', system-ui, sans-serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .38 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --fibres: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  /* a sheet resting on the sheet below: light top fold, card edge, soft drop */
  --sheet: inset 0 1px 0 #fffdf7, 0 2px 0 var(--edge), 0 3px 0 #c4ab82, 0 12px 20px -12px #4b301766;
  --sheet-lift: inset 0 1px 0 #fffdf7, 0 3px 0 var(--edge), 0 4px 0 #c4ab82, 0 18px 26px -14px #4b301777;
  --tray: inset 0 3px 7px #4b30175c, inset 0 -1px 0 #fff6, inset 0 0 0 1px #8c6a4255;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background: var(--kraft);
}

body {
  background: var(--fibres), var(--grain), radial-gradient(ellipse at 50% 40%, #d4b487, #a9845a 85%);
  color: var(--ink);
}

h1, h2, .eyebrow, .brand, .big-value, .numeric-value, strong { letter-spacing: 0; }
h1, h2 { font-family: var(--display); font-weight: 800; color: var(--ink); }
p { color: var(--ink-2); }
.eyebrow { font-family: 'Nunito', sans-serif; font-weight: 900; letter-spacing: .14em; color: var(--ink-3); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 10px; }
:focus:not(:focus-visible) { outline: none; }
button:not(:disabled):hover { filter: none; }

/* ---------- the cabinet: a kraft desk ---------- */
.shell {
  color: var(--ink);
  background: var(--fibres), var(--grain), linear-gradient(160deg, #d6b88c, #c29d6d 60%, #b28c5d);
  box-shadow: inset 0 0 0 3px #8c6a4266, inset 0 0 120px #5a3b1a55;
}
.shell:before { opacity: 0; }
.shell:after { border-top-color: transparent; }
/* the right-hand control column is drawn by .shell::after: make it a tall sheet of card */
.shell[data-page='expedition']::after {
  background: var(--grain), linear-gradient(180deg, var(--paper-2), var(--paper-3)) !important;
  border: 0 !important;
  box-shadow: var(--sheet) !important;
}
/* region art becomes a printed backdrop washed with paper, like a diorama's back wall */
.shell[data-page='expedition']::before {
  opacity: 1;
  background-image: var(--grain), linear-gradient(180deg, #f5e9d2d9, #e9d6b4e6 60%, #d9bf96f0), var(--expedition-art);
  filter: sepia(.25) saturate(.9);
}

/* ---------- top bar: a torn strip of cream paper ---------- */
.topbar {
  position: relative;
  border-bottom: 0;
  background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow: 0 10px 14px -12px #4b301788;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 14px 7px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 14px 7px repeat-x;
}
.brand { font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: .04em; color: var(--ink); }
.brand small, .brand small { color: var(--ink-3); font-family: 'Nunito', sans-serif; font-weight: 800; letter-spacing: .22em; }
.brand-mark {
  border: 0; border-radius: 12px; color: #fff;
  background: var(--grain), linear-gradient(145deg, #a8d47c, #7fb455);
  box-shadow: inset 0 1px 0 #fff8, 0 2px 0 #5f8f3b, 0 6px 10px -6px #2d4a1a99;
  transform: rotate(-6deg);
}
.menu-button, .icon-button, .fullscreen-button {
  color: var(--ink); border-radius: 12px;
  background: var(--grain), var(--paper);
  box-shadow: var(--sheet);
}
.menu-button:active, .icon-button:active, .fullscreen-button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fffdf7, 0 1px 0 var(--edge); }
.wallet .energy, .wallet .coins, .energy, .coins { color: var(--ink); }
.energy svg, .coins svg { color: var(--gold-2); }
.energy strong, .coins strong { font-family: var(--display); font-weight: 800; color: var(--ink); }
.energy strong small, .energy>span, .coins small { color: var(--ink-3); }

/* ---------- shared card stock ---------- */
.enemy-scene, .result, .payout-panel, .decision, .party-health, .area-card, .panel, .roster-card, .monster-detail,
.ability-card, .resume-banner, .myth-invitation, .world-notice, .run-ledger, .feature, .empty, .help-grid > *, .camp-grid > * {
  color: var(--ink);
  border: 0 !important;
  background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2)) !important;
  box-shadow: var(--sheet) !important;
}
.shell[data-page='expedition'] .enemy-scene { background-color: transparent; }

/* washi tape on headings that label a sheet */
.scene-heading > span:first-child, .decision > .eyebrow {
  display: inline-block; padding: 3px 10px; color: var(--ink);
  background: repeating-linear-gradient(45deg, #f6d27e 0 6px, #f3c867 6px 12px);
  opacity: .95; transform: rotate(-2deg);
  box-shadow: 0 1px 2px #4b301733;
  -webkit-mask: conic-gradient(from -45deg at left, #0000 90deg, #000 0) left / 51% 6px repeat-y, conic-gradient(from 135deg at right, #0000 90deg, #000 0) right / 51% 6px repeat-y;
  mask: conic-gradient(from -45deg at left, #0000 90deg, #000 0) left / 51% 6px repeat-y, conic-gradient(from 135deg at right, #0000 90deg, #000 0) right / 51% 6px repeat-y;
}
.enemy-scene.flame .scene-heading > span:first-child { background: repeating-linear-gradient(45deg, #f7c89a 0 6px, #f2b783 6px 12px); }
.enemy-scene.tide .scene-heading > span:first-child { background: repeating-linear-gradient(45deg, #bfe2f1 0 6px, #a9d6ea 6px 12px); }
.scene-heading, .scene-heading span { color: var(--ink-2); font-weight: 800; }
.scene-ring { border-color: #8c6a4233 !important; border-style: dashed !important; }
.ground-shadow { background: radial-gradient(closest-side, #4b30174d, transparent) !important; }
.enemy-title h2 { font-family: var(--display); color: var(--ink); }
.enemy-title .element { color: var(--ink-2); }
.health-label, .health-label strong, .enemy-scene .health-label strong { color: var(--ink); }
.health-label span { color: var(--rose-ink); }
.party-health { box-sizing: border-box; height: auto !important; padding: 7px 12px 9px !important; margin-block: -8px !important; border-radius: 12px; }
.party-health .health { margin-top: 6px !important; }

/* health and progress: a paper groove with a strip of coloured card slid in */
.health, .route progress {
  background: var(--paper-3) !important; border: 0 !important; border-radius: 99px;
  box-shadow: inset 0 2px 3px #4b301740, inset 0 -1px 0 #fff8;
}
.health > div { background: var(--grain), linear-gradient(180deg, #ef8a7f, var(--rose)) !important; border-radius: 99px; box-shadow: inset 0 1px 0 #fff6; }
.party-health .health > div { background: var(--grain), linear-gradient(180deg, #b6dd88, #87bb57) !important; }
.route { background: none !important; box-shadow: none !important; border: 0 !important; }
.route progress { height: 4px !important; left: 14px !important; right: 14px !important; width: auto !important; }
.route progress::-webkit-progress-bar { background: var(--paper-3); border-radius: 99px; }
.route progress::-webkit-progress-value { background: var(--gold-2); border-radius: 99px; }
.route progress::-moz-progress-bar { background: var(--gold-2); }
.route > span { color: var(--ink-2) !important; font-weight: 700; }
.route > span.current { color: var(--ink) !important; font-weight: 900; }
.route b { background: var(--paper-3) !important; border: 1px solid var(--edge) !important; color: var(--ink-2) !important; }
.route > span.done b, .route .current b { background: var(--gold) !important; color: var(--ink) !important; border-color: var(--gold-2) !important; }
.route .current b { box-shadow: 0 0 0 3px #f2bf5255; }
.route > span:not(:last-child):after { border-color: var(--edge); background: repeating-linear-gradient(90deg, var(--edge) 0 4px, transparent 4px 7px) !important; }

.intent span { color: var(--ink-2); background: var(--paper-2) !important; border: 1px dashed var(--edge) !important; }
.intent span.next { color: var(--ink); background: #fff3d4 !important; border: 1px solid var(--gold-2) !important; }
.run-ledger { box-sizing: border-box; height: 52px !important; padding: 7px 10px !important; border-radius: 12px; align-items: center; overflow: visible !important; }
.run-ledger > span { height: auto !important; justify-content: center; justify-items: center; color: var(--ink); }
.run-ledger > span svg { color: var(--ink-2); }
.run-ledger small { color: var(--ink-3); }

/* party tiles under the boss: little paper name cards */
.party-member {
  border: 0 !important; color: var(--ink);
  background: var(--grain), var(--leaf-card) !important;
  box-shadow: inset 0 1px 0 #fff9, 0 2px 0 var(--leaf-edge), 0 6px 10px -8px #4b301799 !important;
}
.party-member.flame { background: var(--grain), var(--flame-card) !important; box-shadow: inset 0 1px 0 #fff9, 0 2px 0 var(--flame-edge), 0 6px 10px -8px #4b301799 !important; }
.party-member.tide { background: var(--grain), var(--tide-card) !important; box-shadow: inset 0 1px 0 #fff9, 0 2px 0 var(--tide-edge), 0 6px 10px -8px #4b301799 !important; }
.party-member strong { color: var(--ink); }
.party-member small { color: var(--ink-2); }

/* ---------- the board keeps its own colours; paper is a layer laid on top ----------
   Nothing on the board is recoloured or moved: each tile and the tray only gain a paper overlay
   (grain, a soft top fold, a darker bottom edge), so element colours and win effects stay as designed. */
.board::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: var(--fibres), var(--grain);
  mix-blend-mode: multiply; opacity: .9;
}
.board > .cell::before, .strip-symbol::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    var(--grain),
    linear-gradient(160deg, #ffffff38, #ffffff0a 38%, transparent 55%, #00000026);
  box-shadow: inset 0 1px 0 #ffffff4d, inset 0 -3px 0 #00000026, inset 0 0 0 1px #ffffff14;
  mix-blend-mode: soft-light;
}
.board > .cell, .strip-symbol { position: relative; }

/* ---------- buttons: thick card you can press ---------- */
.primary, .text-button, .decision .choices button, .world-toolbar button, .codex-toolbar button, .codex-toolbar select, .codex-toolbar input, .win-breakdown button, .navigation button, .auto {
  color: var(--ink) !important;
  border: 0 !important;
  background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2)) !important;
  box-shadow: var(--sheet) !important;
  transition: transform .08s, box-shadow .08s;
}
.primary {
  font-family: var(--display); font-weight: 800;
  background: var(--grain), linear-gradient(180deg, #f8d27a, var(--gold)) !important;
  box-shadow: inset 0 1px 0 #fff3cf, 0 3px 0 var(--gold-2), 0 4px 0 #b97d22, 0 12px 18px -10px #4b3017aa !important;
}
.primary:not(:disabled):active, .text-button:not(:disabled):active, .decision .choices button:not(:disabled):active, .auto:not(:disabled):active, .navigation button:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 #fffdf7, 0 1px 0 var(--edge) !important;
}
.primary:disabled, .area-card.locked .primary { background: var(--grain), var(--paper-3) !important; box-shadow: 0 2px 0 var(--edge) !important; color: var(--ink-2) !important; opacity: 1; }
.world-toolbar .active, .codex-toolbar [aria-pressed='true'], .navigation button.active, .auto.active {
  background: var(--grain), linear-gradient(180deg, #e6f3d2, var(--leaf-card)) !important;
  box-shadow: inset 0 1px 0 #fff9, inset 0 0 0 2px var(--leaf-edge), 0 2px 0 var(--leaf-edge), 0 3px 0 #8fb064, 0 12px 20px -12px #4b301766 !important;
}
.world-toolbar button, .codex-toolbar button { display: inline-flex; align-items: center; gap: 6px; line-height: 1; vertical-align: middle; }
.world-toolbar button svg, .codex-toolbar button svg { display: block; }
.codex-toolbar input, .codex-toolbar select { box-shadow: inset 0 2px 3px #4b301733, 0 1px 0 #fff8 !important; background: var(--grain), var(--paper-2) !important; }
.codex-toolbar input::placeholder { color: var(--ink-3); }

/* the Spin button: a folded paper rosette that turns while the reels roll */
.spin {
  position: relative; isolation: isolate; overflow: visible;
  font-family: var(--display); font-weight: 900; font-size: 21px !important; color: var(--ink) !important;
  flex-direction: column; gap: 0 !important; line-height: 1;
  border: 0 !important; text-shadow: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.spin::before {
  content: ''; position: absolute; z-index: -2; left: 50%; top: 50%;
  width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #f7cf6c 0 7.5deg, #e4a83e 7.5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 64%, #0000 65%), repeating-conic-gradient(#000 0 7.5deg, #0000 7.5deg 15deg);
  -webkit-mask-composite: source-over;
  mask: radial-gradient(circle, #000 64%, #0000 65%), repeating-conic-gradient(#000 0 7.5deg, #0000 7.5deg 15deg);
  filter: drop-shadow(0 3px 0 #b97d22) drop-shadow(0 10px 10px #4b301766);
  transition: transform .4s cubic-bezier(.3,1.6,.5,1);
}
.spin::after {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  background: var(--grain), radial-gradient(circle at 35% 30%, #fffaf0, var(--paper-2));
  box-shadow: inset 0 0 0 2px #e9d2a4, inset 0 -3px 0 #e2cfa9, 0 1px 0 #fff;
}
.spin svg { color: var(--gold-2); width: 16px; height: 16px; }
.spin span { display: flex; flex-direction: column; align-items: center; }
.spin small { color: var(--ink-2) !important; opacity: 1 !important; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 8px !important; letter-spacing: .06em !important; margin-top: 3px !important; }
.spin:not(:disabled):hover::before { transform: rotate(15deg) scale(1.03); }
.spin:not(:disabled):active::before { transform: rotate(30deg) scale(.96); }
.spin:disabled { opacity: .75; }
.shell[data-presentation='spinning'] .spin::before { animation: rosette-roll .9s linear infinite; }
@keyframes rosette-roll { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .shell[data-presentation='spinning'] .spin::before { animation: none; } }

/* ---------- side panels: result, payout, decision ---------- */
.result, .payout-heading, .payout-note { color: var(--ink); }
.result strong, .payout-heading strong, .total-payout strong, .numeric-value { font-family: var(--display); color: var(--ink) !important; }
.payout-heading small, .payout-damage > span, .payout-note { color: var(--ink-2) !important; }
.win-breakdown > span, .win-breakdown button > span { color: var(--ink-2); }
.win-spotlight > span:last-child { color: var(--ink-2); }
.decision h2 { color: var(--ink); }
.decision .choices span { color: var(--ink-2) !important; }
.decision .choices strong { color: var(--ink); }
.decision .choices button svg { color: var(--gold-2); }
.decision.upgrade-choice { color: var(--ink); background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2)) !important; border: 0 !important; box-shadow: var(--sheet-lift), 0 30px 80px #2b1a0b66 !important; }
.upgrade-choice::backdrop, .info-dialog::backdrop, .dex-dialog::backdrop, .gear-dialog::backdrop { background: #5a3b1a99; backdrop-filter: blur(2px); }
.win-celebration strong {
  color: var(--ink) !important; text-shadow: none !important;
  background: var(--grain), repeating-linear-gradient(45deg, #f8d27a 0 8px, var(--gold) 8px 16px) !important;
  border: 0 !important; box-shadow: 0 3px 0 var(--gold-2), 0 16px 26px -12px #3b240fcc;
  font-family: var(--display);
}
.win-celebration i { border-radius: 1px; }
.toast { color: var(--ink) !important; background: var(--grain), var(--paper) !important; border: 0 !important; box-shadow: var(--sheet-lift) !important; }

/* ---------- navigation drawer: a stack of index cards ---------- */
.navigation-drawer { color: var(--ink); background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2)) !important; border: 0 !important; box-shadow: var(--sheet-lift), 0 30px 80px #2b1a0b66 !important; }
.navigation-drawer::backdrop { background: #5a3b1a80; }
.drawer-heading strong { font-family: var(--display); color: var(--ink); }
.navigation button, .navigation button svg { color: var(--ink) !important; }
.navigation b { color: var(--ink-3); }

/* ---------- world map: region postcards taped to the desk ---------- */
.world-title h1, .page-title h1, .collection-title h1 { color: var(--ink); }
.world-title p, .page-title p { color: var(--ink-2); }
/* postcards are taped down: a slight fixed tilt, and they never move on hover */
.area-card { border-radius: 14px; overflow: visible !important; }
.area-card:nth-child(3n+1) { transform: rotate(-.6deg); }
.area-card:nth-child(3n+2) { transform: rotate(.5deg); }
.area-card:nth-child(3n) { transform: rotate(-.3deg); }
.area-art { margin: 8px 8px 0; border-radius: 6px; overflow: hidden; background: var(--paper-3) !important; box-shadow: inset 0 0 0 1px #8c6a4233; }
.area-art::after { background: linear-gradient(#0000, #0000 70%, #4b301722) !important; }
.area-card::before {
  content: ''; position: absolute; z-index: 2; top: -9px; left: 50%; width: 74px; height: 20px; margin-left: -37px;
  background: repeating-linear-gradient(45deg, #f6d27ecc 0 6px, #f3c867cc 6px 12px); transform: rotate(-3deg);
  box-shadow: 0 1px 2px #4b301733;
}
.area-card.flame::before { background: repeating-linear-gradient(45deg, #f7c89acc 0 6px, #f2b783cc 6px 12px); }
.area-card.tide::before { background: repeating-linear-gradient(45deg, #bfe2f1cc 0 6px, #a9d6eacc 6px 12px); }
.area-card.locked .area-art img { filter: grayscale(.8) sepia(.3) brightness(1.05); }
.area-number, .area-tag { color: var(--ink) !important; background: var(--paper) !important; box-shadow: 0 1px 0 var(--edge), 0 3px 6px -3px #4b301766; }
.area-copy h2, .region-name h2 { font-family: var(--display); color: var(--ink); }
.region-footer, .region-footer > span { color: var(--ink-2); border-top: 2px dashed #8c6a4229; }
.resume-banner strong { color: var(--ink); }

/* ---------- atlas ---------- */
.roster-card { border-radius: 12px; }
.roster-card.flame { background: var(--grain), linear-gradient(180deg, #fff3e4, var(--flame-card)) !important; }
.roster-card.tide { background: var(--grain), linear-gradient(180deg, #f0f9fd, var(--tide-card)) !important; }
.roster-card.leaf { background: var(--grain), linear-gradient(180deg, #f6fbec, var(--leaf-card)) !important; }
.roster-card strong { color: var(--ink); font-family: var(--display); font-weight: 800; }
.roster-card small, .codex-origin { color: var(--ink-2); }
.monster-detail h2 { color: var(--ink); }
.evolution-path > div { background: var(--paper-2); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--edge); }
.evolution-path > div.current { background: #fff3d4; box-shadow: inset 0 0 0 2px var(--gold); }
.evolution-path strong { color: var(--ink); }
.ability-card .synergy-note { color: var(--leaf-ink); }

/* ---------- dialogs ---------- */
.info-dialog, .dex-dialog, .gear-dialog { color: var(--ink) !important; background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2)) !important; border: 0 !important; box-shadow: var(--sheet-lift), 0 30px 80px #2b1a0b66 !important; }
.info-dialog h2, .info-dialog h3 { color: var(--ink); font-family: var(--display); }
.info-dialog p { color: var(--ink-2); }
.info-landscape { box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--edge), 0 10px 18px -10px #4b301799; transform: rotate(-.8deg); }

.render-warning { color: var(--ink) !important; background: var(--paper) !important; }

/* ---------- atlas: formation strip, filters, inspect card ---------- */
.formation-bar, .formation-board, .codex-toolbar, .dex-detail {
  color: var(--ink);
  border: 0 !important;
  background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2)) !important;
  box-shadow: var(--sheet) !important;
}
.dex-detail.flame { background: var(--grain), linear-gradient(180deg, #fff6ec, var(--flame-card)) !important; }
.dex-detail.tide { background: var(--grain), linear-gradient(180deg, #f3fafd, var(--tide-card)) !important; }
.dex-detail.leaf { background: var(--grain), linear-gradient(180deg, #f8fcef, var(--leaf-card)) !important; }
.formation-summary strong, .formation-head strong, .dex-heading h1, .dex-identity h2 { color: var(--ink); font-family: var(--display); }
.formation-payout { color: var(--amber-ink) !important; }
.formation-note, .formation-stats dt { color: var(--ink-3) !important; }
.formation-stats div { background: var(--grain), var(--paper-2) !important; box-shadow: inset 0 1px 0 #fff8, 0 1px 0 var(--edge); }
.formation-stats dd { color: var(--ink); font-family: var(--display); }
.formation-board .presets > .eyebrow { color: var(--ink-3) !important; }
.formation-summary span { color: var(--amber-ink); font-weight: 800; }
.formation-summary small, .formation-bar > p, .dex-heading > span, .dex-identity small, .dex-stats span, .dex-action > small, .catalog-number { color: var(--ink-3) !important; }
/* formation slots: pockets cut into the strip, filled slots hold a paper tile */
.formation-slots button, .empty-slot {
  border: 0 !important; color: var(--ink-3);
  background: var(--paper-3) !important;
  box-shadow: inset 0 2px 4px #4b301740, inset 0 -1px 0 #fff8 !important;
}
.formation-slots button { background: var(--grain), var(--leaf-card) !important; box-shadow: inset 0 1px 0 #fff9, 0 2px 0 var(--leaf-edge) !important; }
.formation-slots button.selected { box-shadow: inset 0 1px 0 #fff, 0 0 0 2px var(--gold), 0 3px 0 var(--gold-2) !important; }
.formation-slots button > span { color: var(--ink); background: var(--paper) !important; }
.empty-slot { border: 2px dashed var(--edge) !important; }
.dex-stats { border-block: 2px dashed #8c6a4229 !important; }
.dex-stats b { color: var(--ink) !important; font-family: var(--display); }
.dex-tabs { border-bottom: 2px dashed #8c6a4229 !important; }
.dex-tabs button { color: var(--ink-3) !important; font-weight: 800; }
.dex-tabs button[aria-selected='true'] { color: var(--ink) !important; border-color: var(--gold-2) !important; }
.ability-card p { color: var(--ink-2) !important; }
.ability-card .eyebrow { color: var(--ink-3); }
.gear-slot select { color: var(--ink) !important; border: 0 !important; background: var(--grain), var(--paper-2) !important; box-shadow: inset 0 2px 3px #4b301733 !important; }
.dex-roster .roster-card { box-shadow: var(--sheet) !important; }
.dex-roster .roster-card[aria-pressed='true'], .dex-roster .roster-card.selected { box-shadow: 0 0 0 3px var(--gold), 0 4px 0 var(--gold-2), 0 14px 18px -10px #4b3017aa !important; }

/* ---------- camp, help and other simple pages ---------- */
.big-value { color: var(--ink); font-family: var(--display); }
.big-value small, .panel p, .help-grid p { color: var(--ink-2); }
.panel-icon { color: var(--gold-2); }
.player-damage { color: #fff !important; background: var(--grain), var(--rose) !important; box-shadow: 0 2px 0 #b84a40, 0 8px 12px -6px #4b3017aa; }
/* labels printed straight on the kraft desk need darker ink */
.dex-heading .eyebrow, .world-title .eyebrow, .page-title .eyebrow, .collection-title .eyebrow, .world-toolbar > span { color: var(--ink) !important; }
.dex-heading > span, .world-title p, .page-title p { color: var(--ink) !important; }
.secondary {
  color: var(--ink) !important; border: 0 !important;
  background: var(--grain), linear-gradient(180deg, #e6f3d2, var(--leaf-card)) !important;
  box-shadow: inset 0 1px 0 #fff9, 0 3px 0 var(--leaf-edge), 0 4px 0 #8fb064, 0 12px 18px -10px #4b3017aa !important;
  font-weight: 800;
}
.secondary:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff9, 0 1px 0 var(--leaf-edge) !important; }
.setting { color: var(--ink) !important; border-bottom: 2px dashed #8c6a4229 !important; }
.setting strong, .setting b { color: var(--leaf-ink) !important; font-weight: 900; }
.text-button.danger { color: #b84a40 !important; background: transparent !important; box-shadow: none !important; text-decoration: underline dashed; text-underline-offset: 4px; }

/* atlas filter strip: inner padding so the search box clears the card edge */
.codex-toolbar { box-sizing: border-box; padding: 8px 10px !important; border-radius: 14px; align-items: center; }
/* every control in the filter strip shares one height; page arrows are square */
.codex-toolbar > input, .codex-toolbar > select, .codex-toolbar > button { box-sizing: border-box; height: 34px !important; min-height: 34px; }
.codex-toolbar > button { min-width: 34px; justify-content: center; padding-inline: 10px; }
/* "Replay wins" sits on the payout card: a small text link in amber ink */
.payout-note button { color: var(--amber-ink) !important; background: none !important; box-shadow: none !important; font-weight: 800; text-decoration: underline dashed; text-underline-offset: 3px; }

/* ---------- a roomier header: 52px -> 72px; everything pinned below it moves down by the same 20px ---------- */
.shell { grid-template-rows: 72px minmax(0, 1fr) !important; }
.shell:before { inset: 72px 0 0; }
.shell[data-page='expedition']::before { inset: 0; }
.shell::after { top: 86px !important; }
.topbar { height: 72px !important; padding: 0 28px 7px !important; gap: 24px; }
/* header controls: one square size that fits the 72px bar; the menu sits at the far right, next to fullscreen */
.menu-button, .fullscreen-button { box-sizing: border-box; width: 44px !important; height: 44px !important; padding: 0 !important; display: grid; place-items: center; flex: none; }
.topbar .brand { order: 1; }
.topbar .wallet { order: 2; margin-left: auto; align-items: center; }
.topbar .menu-button { order: 3; margin: 0 !important; }
.brand { font-size: 22px !important; gap: 12px !important; }
.brand-mark { width: 44px !important; height: 44px !important; }
.brand small { font-size: 9px !important; margin-top: 4px !important; }
.topbar .wallet { gap: 26px !important; }
/* route sits between the brand (ends ~214px) and the wallet (starts ~690px now that the music and settings buttons share the top bar) */
.route { top: 16px !important; left: 250px !important; right: 632px !important; width: auto !important; }
/* the side panel fills the column between the header and the ledger, on any screen shape:
   ledger bottom 150px + ledger 52px + 12px gap = 214px */
.result, .payout-panel, .decision:not(.upgrade-choice) { top: 118px !important; bottom: 214px !important; height: auto !important; max-height: none !important; }

/* BIG / MEGA / ULTRA badges: the 3D monster is drawn in the model slot only, so the slot stops above
   a strip at the bottom of the tile and the badge sits in that strip, never under the monster */
.board > .cell[data-size='2'] > .model, .board > .cell[data-size='3'] > .model, .board > .cell[data-size='4'] > .model, .board > .cell[data-size='5'] > .model { position: absolute !important; inset: 0 0 30px 0 !important; width: auto !important; height: auto !important; }
.board > .cell > .size-label { left: 50% !important; right: auto !important; bottom: 8px !important; transform: translateX(-50%); z-index: 3; white-space: nowrap; font-size: 11px !important; font-weight: 800; letter-spacing: .1em; }

/* ---------- treasure reveal: a paper card; the wooden chest and its tier colour stay as they are ---------- */
.treasure-dialog {
  color: var(--ink) !important;
  border: 0 !important;
  background: var(--grain), radial-gradient(ellipse at 50% 38%, #fffaf0, var(--paper-2) 70%) !important;
  box-shadow: var(--sheet-lift), 0 0 0 3px var(--treasure-color), 0 30px 80px #2b1a0b66 !important;
}
.treasure-dialog::backdrop { background: #5a3b1aa6; backdrop-filter: blur(2px); }
.treasure-dialog h2 { color: var(--ink) !important; font-family: var(--display); }
.treasure-dialog > p, .treasure-dialog .chest-saved { color: var(--ink-2) !important; }
.treasure-dialog .eyebrow { color: var(--ink-3) !important; }
.treasure-rays { opacity: .18 !important; }
.chest-rewards article {
  color: var(--ink); border: 0 !important;
  background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2)) !important;
  box-shadow: inset 0 0 0 2px var(--treasure-color), var(--sheet) !important;
}
.chest-rewards strong { color: var(--ink); }
.chest-rewards span { color: var(--ink-2) !important; }

.dex-dialog .dex-detail { background: none !important; box-shadow: none !important; }
.dex-dialog-bar .eyebrow { color: var(--ink-3) !important; }
.storage-list li { background: var(--grain), var(--paper-2) !important; box-shadow: inset 0 1px 0 #fff8, 0 1px 0 var(--edge); color: var(--ink); }
.storage-list li > div > span, .storage-list li > div > small, .storage-list strong small { color: var(--ink-3) !important; }
.storage-list .storage-icon { color: var(--gold-2) !important; }
/* preset buttons on the paper formation board */
.formation-board .presets button { background: var(--grain), var(--paper-2) !important; color: var(--ink) !important; border: 0 !important; box-shadow: inset 0 1px 0 #fff8, 0 2px 0 var(--edge) !important; font-weight: 800; }
.formation-board .presets button:disabled { opacity: .55; }
.gear-dialog h2 { color: var(--ink); font-family: var(--display); }
.gear-pick, .gear-option { background: var(--grain), var(--paper-2) !important; color: var(--ink) !important; border: 0 !important; box-shadow: inset 0 1px 0 #fff8, 0 2px 0 var(--edge) !important; }
.gear-pick.filled { background: var(--grain), var(--leaf-card) !important; box-shadow: inset 0 1px 0 #fff9, 0 2px 0 var(--leaf-edge) !important; }
.gear-option.current { box-shadow: inset 0 1px 0 #fff, 0 0 0 2px var(--gold), 0 3px 0 var(--gold-2) !important; }
.gear-pick-text small { color: var(--ink-3) !important; }
.gear-pick > svg:last-child, .gear-option .storage-icon, .gear-pick .storage-icon { color: var(--gold-2) !important; }
.gear-option .gear-check { color: var(--amber-ink) !important; }
.music-toggle[aria-pressed='false'] { opacity: .7; }

/* ---------- playtest polish (11 October 2026) ---------- */
/* after a board: every winning group stays outlined, still; only the group being paid bounces */
.board > .cell.won { border-color: #f7d188 !important; box-shadow: inset 0 0 0 2px #f7d188aa, 0 0 12px #f7d18833 !important; }
.cluster-outline.settled path { animation: none; opacity: .8; stroke-width: .028; }
.spinning-note { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-2) !important; font-weight: 800; }
.spinning-note svg { color: var(--gold-2); animation: spin-note 1.1s linear infinite; }
@keyframes spin-note { to { transform: rotate(360deg); } }
.payout-panel.victory .win-spotlight > svg { color: var(--gold-2); }
.payout-panel.defeat .win-spotlight > svg { color: var(--rose); }
.payout-panel.no-match .win-spotlight > svg { color: var(--ink-3); opacity: .6; }
.payout-panel.victory .eyebrow { color: var(--amber-ink) !important; }
.payout-panel.defeat .eyebrow { color: var(--rose-ink) !important; }
.win-spotlight > span:last-child { font-size: 14px !important; color: var(--ink-2) !important; }
.combat-feedback { font-size: 13px !important; color: var(--amber-ink) !important; font-weight: 700; max-height: 96px !important; }
.combat-feedback .healing { color: var(--leaf-ink) !important; }
.combat-feedback .recruit, .combat-feedback .evolution { color: var(--tide-ink) !important; font-weight: 900; }
.combat-feedback .level, .combat-feedback .trophy, .combat-feedback .mastery { color: var(--ink-2) !important; }
.energy-out { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 14px; color: var(--ink-2); }
.energy-out svg { color: var(--gold-2); }
.energy-out b { font-family: var(--display); font-size: 20px; color: var(--ink); }
.energy-out .text-button { margin-top: 4px; color: var(--amber-ink) !important; font-weight: 800; text-decoration: underline dashed; text-underline-offset: 3px; }
.payout-note .energy-out { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 6px; font-size: 12px; }
.payout-note .energy-out b { font-size: 13px; }
.payout-note:has(.energy-out) { height: auto !important; min-height: 42px; overflow: visible !important; }

/* before the first board of a fight: the matchup */
.matchup { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 0 12px; text-align: center; }
.matchup .eyebrow { display: inline-flex; align-items: center; gap: 5px; }
.matchup > strong { font-family: var(--display); font-size: 26px; color: var(--ink); line-height: 1.1; }
.matchup-row { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 8px; border-radius: 12px; background: var(--grain), var(--paper-2); box-shadow: inset 0 1px 0 #fff8, 0 2px 0 var(--edge); }
.matchup-row > span { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.matchup-row.strong > span { color: var(--leaf-ink); }
.matchup-row.weak > span { color: var(--rose-ink); }
.matchup-row > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.matchup-portrait { width: 54px !important; height: 54px !important; object-fit: contain; }
.matchup p { font-size: 13px; color: var(--ink-2); margin: 0; }
.matchup-hint { color: var(--ink-3) !important; }

/* the ledger carries the way out */
.run-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)) 46px !important; }
.ledger-leave { display: grid; place-items: center; align-content: center; gap: 1px; height: 38px; padding: 0; border-radius: 9px; color: var(--ink-2); background: var(--grain), var(--paper-2); box-shadow: inset 0 1px 0 #fff8, 0 2px 0 var(--edge); }
.ledger-leave small { font-size: 9px; font-weight: 900; color: var(--ink-2) !important; }
.ledger-leave:not(:disabled):hover { color: var(--ink); background: var(--grain), var(--paper-3); }

/* a beaten enemy: the model tips over (models.js), the card says so */
.enemy-scene .ko-stamp { position: absolute; z-index: 1; left: 50%; top: 15%; transform: translateX(-50%) rotate(-9deg); padding: 4px 14px; border: 3px solid var(--rose-ink); border-radius: 8px; color: var(--rose-ink); font-family: var(--display); font-size: 19px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .85; animation: ko-stamp .35s .35s cubic-bezier(.2,.9,.3,1.3) both; pointer-events: none; }
.enemy-scene.defeated .enemy-health, .enemy-scene.defeated .enemy-cycle, .enemy-scene.defeated .health-label { opacity: .45; }
@keyframes ko-stamp { from { opacity: 0; transform: translateX(-50%) rotate(-9deg) scale(1.8); } }
.still .enemy-scene .ko-stamp { animation: none; }
@media (prefers-reduced-motion: reduce) { .enemy-scene .ko-stamp, .spinning-note svg { animation: none; } }

/* what a fight gave besides the chest */
.treasure-news { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px auto 10px; max-width: 520px; }
.news-recruit { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 14px; text-align: left; background: var(--grain), var(--tide-card); box-shadow: inset 0 1px 0 #fff9, 0 2px 0 var(--tide-edge); animation: reward-rise .5s .2s ease-out both; }
.news-portrait { width: 56px !important; height: 56px !important; object-fit: contain; }
.news-recruit span { display: flex; flex-direction: column; font-size: 14px; color: var(--ink); }
.news-recruit b { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tide-ink); }
.news-growth { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.news-growth li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--edge); }
.news-growth li svg { transform: rotate(-90deg); color: var(--leaf-ink); }
.news-growth li.evolution { color: var(--tide-ink); font-weight: 900; }
@media (max-height: 480px) { .news-portrait { width: 40px !important; height: 40px !important; } .treasure-news { gap: 5px; margin-bottom: 6px; } }

/* run endings and the leave confirmation: paper cards in the top layer */
.summary-dialog, .leave-dialog { width: min(560px, 92vw); max-height: 92dvh; overflow: auto; padding: 26px 28px 24px; border: 0; border-radius: 22px; text-align: center; color: var(--ink); background: var(--grain), radial-gradient(ellipse at 50% 30%, #fffaf0, var(--paper-2) 75%); box-shadow: var(--sheet-lift), 0 30px 80px #2b1a0b66; }
.summary-dialog::backdrop, .leave-dialog::backdrop { background: #5a3b1aa6; backdrop-filter: blur(2px); }
.summary-dialog[open], .leave-dialog[open] { animation: summary-in .35s cubic-bezier(.2,.9,.3,1.15); }
@keyframes summary-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.summary-dialog h2, .leave-dialog h2 { margin: 8px 0 6px; font-size: 32px; line-height: 1.1; }
.summary-dialog > p, .leave-dialog > p { margin: 0 auto 14px; font-size: 15px; max-width: 44ch; }
.summary-dialog.victory .eyebrow { color: var(--amber-ink); }
.summary-dialog.defeat .eyebrow { color: var(--rose-ink); }
.summary-badge { display: grid; place-items: center; width: 92px; height: 92px; margin: 12px auto 2px; border-radius: 50%; color: #fff8e4; background: radial-gradient(circle at 35% 30%, #ffe08e, var(--gold) 45%, var(--gold-2)); box-shadow: inset 0 -4px 0 #c0802a, 0 0 0 5px #fff6dc, 0 0 0 7px var(--edge), 0 10px 26px #8a5a1255; animation: badge-pop .6s .15s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes badge-pop { from { opacity: 0; transform: scale(.4) rotate(-25deg); } }
.summary-joined { margin: 4px 0 14px; }
.summary-joined > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.summary-joined figure { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; margin: 0; padding: 6px 4px 8px; border-radius: 14px; background: var(--grain), var(--tide-card); box-shadow: inset 0 1px 0 #fff9, 0 2px 0 var(--tide-edge); }
.summary-portrait { width: 80px !important; height: 80px !important; object-fit: contain; }
.summary-joined figcaption { font-family: var(--display); font-weight: 800; font-size: 14px; }
.summary-dialog .run-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 0 0 16px; }
.summary-dialog .run-stats span { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; border-radius: 12px; font-size: 12px; color: var(--ink-3); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--edge); }
.summary-dialog .run-stats strong { font-family: var(--display); font-size: 22px; color: var(--ink); }
.summary-note { font-size: 13px !important; color: var(--amber-ink) !important; margin-top: -6px !important; }
.dialog-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.dialog-actions button { min-width: 170px; min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; }
@media (max-height: 480px) { .summary-dialog, .leave-dialog { padding: 16px 20px; } .summary-dialog h2, .leave-dialog h2 { font-size: 24px; } .summary-badge { width: 60px; height: 60px; margin-top: 6px; } .summary-badge svg { width: 30px; height: 30px; } .summary-portrait { width: 56px !important; height: 56px !important; } .summary-dialog .run-stats strong { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .summary-dialog[open], .leave-dialog[open], .summary-badge, .news-recruit { animation: none; } }

/* map: why nothing can start */
.energy-notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.energy-notice svg { color: var(--gold-2); }
.energy-notice .text-button { color: var(--amber-ink) !important; font-weight: 800; text-decoration: underline dashed; text-underline-offset: 3px; }

/* trophies: the same paper cards as every other page */
.trophy-strip, .trophy-card { color: var(--ink) !important; border: 0 !important; background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2)) !important; box-shadow: var(--sheet) !important; }
.trophy-card.nearest { box-shadow: var(--sheet), 0 0 0 2px var(--gold) !important; }
.trophy-card p, .trophy-strip span { color: var(--ink-2) !important; }
.trophy-card small, .trophy-strip span small { color: var(--ink-3) !important; }
.trophy-strip span b { color: var(--amber-ink) !important; }
.trophy-marks { color: var(--edge) !important; }
.trophy-marks .silver { color: #9aa3ab !important; }
.trophy-card progress { accent-color: var(--gold-2); }
.shell[data-page='trophies'] .muted { color: var(--ink) !important; opacity: .8; }
.mastery-line { color: var(--leaf-ink) !important; font-size: 11px !important; font-weight: 800; }
/* a champion lesson needs its own line between the HP label and the enemy's move list, never over the NEXT move */
.enemy-scene:has(.lesson-banner) .enemy-model { height: calc(100% - 202px) !important; }
.enemy-scene .lesson-banner { bottom: 67px !important; }
.enemy-scene:has(.lesson-banner) .health-label { margin-bottom: 86px !important; }
/* short landscape phones: once opened, the chest shrinks so rewards and news fit without scrolling */
@media (max-height: 480px) {
  .treasure-dialog.revealed:has(.treasure-news) .chest-stage { height: 84px; }
  .treasure-dialog.revealed:has(.treasure-news) .treasure-chest { scale: .55; }
  .treasure-dialog:has(.treasure-news) .news-recruit { padding: 3px 12px 3px 4px; }
  .treasure-dialog:has(.treasure-news) .news-portrait { width: 34px !important; height: 34px !important; }
  .treasure-dialog:has(.treasure-news) .news-growth li { padding: 2px 8px; font-size: 11px; }
}

/* Offline play and new versions (Le Nâu store standard): the Update control appears in the top bar only while a
   downloaded version waits; a pulsing dot on Settings while one downloads; Settings says which. */
.update-button[hidden], .settings-dot[hidden], .rotate-actions [hidden] { display: none !important; }
/* The same 44px square as the other header controls, in gold with a dot; the route makes room while it shows. */
.update-button { box-sizing: border-box; position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; flex: none;
  border-radius: 12px; color: var(--ink);
  background: var(--grain), linear-gradient(180deg, #f8d27a, var(--gold));
  box-shadow: inset 0 1px 0 #fff3cf, 0 3px 0 var(--gold-2), 0 4px 0 #b97d22, 0 12px 18px -10px #4b3017aa; }
.update-button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff3cf, 0 1px 0 var(--gold-2); }
.update-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 2px var(--paper); flex: none; }
.update-button .update-dot { position: absolute; top: 2px; right: 2px; }
.shell:has(.update-button:not([hidden])) .route { right: 702px !important; }
.settings-button { position: relative; }
.settings-dot { position: absolute; top: 2px; right: 2px; }
.update-dot.is-pulsing { animation: update-pulse 1.2s ease-in-out infinite; }
@keyframes update-pulse { 50% { opacity: .3; } }
.page-title .offline-status { margin-top: 8px; font-size: 13px; color: var(--ink-2); }

/* Rotate screen (rotate.js): held upright, a kraft desk with one paper card covers the whole window, above every
   dialog. Fullscreen and Install share one size; the card reuses the brand tile and the paper buttons. */
dialog.rotate-screen { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); overflow: auto;
  color: var(--ink); background: var(--fibres), var(--grain), var(--kraft); }
dialog.rotate-screen[open] { display: flex; align-items: center; justify-content: center; }
dialog.rotate-screen::backdrop { background: var(--kraft); }
.rotate-card { box-sizing: border-box; width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 22px 20px; border-radius: 18px; text-align: center;
  background: var(--grain), linear-gradient(180deg, var(--paper), var(--paper-2)); box-shadow: var(--sheet-lift); }
.rotate-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; color: #fffdf3;
  background: var(--grain), linear-gradient(145deg, #a8d47c, #7fb455); box-shadow: inset 0 1px 0 #fff8, 0 2px 0 #5f8f3b, 0 6px 10px -6px #2d4a1a99;
  transform: rotate(-6deg); }
.rotate-card .eyebrow { color: var(--ink-3); letter-spacing: .16em; margin-top: 6px; }
.rotate-card h2 { font-family: var(--display); font-size: 28px; line-height: 1.1; color: var(--ink); }
.rotate-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.rotate-actions { display: grid; gap: 12px; width: 100%; margin-top: 8px; }
.rotate-actions > button { box-sizing: border-box; width: 100%; min-height: 48px; font-size: 15px; }
.rotate-card .rotate-help { min-height: 1.4em; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) { .rotate-mark { animation: rotate-nudge 2.6s ease-in-out infinite; } }
@keyframes rotate-nudge { 0%, 55%, 100% { transform: rotate(-6deg); } 72% { transform: rotate(-24deg); } 86% { transform: rotate(-2deg); } }