/* Optional pastel arcade skin. Functional labels and data remain shared. */
.arcade-only { display: none; }
.game-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 9px 7px; min-height: 38px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.game-toggle:hover { background: var(--surface); }
.game-toggle .icon { width: 19px; height: 19px; }
.game-toggle-light { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.arcade-announcement { display: none; }
@media (min-width: 701px) and (max-width: 900px) {
  .game-toggle [data-game-toggle-label], .game-toggle-light { display: none; }
}
@media (max-width: 700px) {
  .game-toggle { margin-top: 6px; padding: 4px 7px; min-height: 28px; font-size: 10px; }
  .game-toggle .icon { width: 16px; height: 16px; }
}

:root[data-retro] {
  color-scheme: light;
  --paper: #dcd1fa;
  --surface: #fffaff;
  --surface-2: #f1e6fa;
  --sidebar: #f5d6ee;
  --ink: #492f60;
  --ink-2: #644477;
  --ink-3: #745284;
  --rule: #c3a4d2;
  --rule-strong: #815894;
  --accent: #794792;
  --accent-hover: #5c306f;
  --accent-soft: #efd3f3;
  --on-accent: #ffffff;
  --red: #a23766;
  --red-soft: #ffe1ed;
  --amber: #815319;
  --amber-soft: #fff0ba;
  --green: #396959;
  --green-soft: #d9f0e8;
  --focus-bg: #ffe6f3;
  --focus-art: #d7a4ce;
  --tick: #e1cce9;
  --tick-past: #a77bbd;
  --toast: #fff1bf;
  --on-toast: #492f60;
  --shadow: 4px 4px 0 #bda3cf;
  --r-s: 2px;
  --r-m: 3px;
  --game-font: 'Silkscreen', 'Courier New', monospace;
}
:root[data-retro] body {
  background-color: var(--paper);
  background-image: linear-gradient(rgb(255 255 255 / 30%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 30%) 1px, transparent 1px), linear-gradient(145deg, #beb9f6, #efccf2);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  background-attachment: fixed;
}
:root[data-retro] .sidebar {
  position: relative; inset: auto; z-index: 5; width: auto; margin: 20px 28px 0; padding: 14px 20px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  border: 3px solid var(--rule-strong); border-radius: 3px; background: #fff1fb; box-shadow: 5px 5px 0 #a488bb;
}
:root[data-retro] .brand { padding: 0; font-family: var(--game-font); font-size: 24px; letter-spacing: -1px; gap: 10px; }
:root[data-retro] .brand-mark { transform: none; gap: 3px; }
:root[data-retro] .brand-mark i { border-radius: 0; background: #b980bf; }
:root[data-retro] .brand > span:last-child { display: inline; }
:root[data-retro] :is(.workspace-label, .workspace-note, .sidebar-caption, .appearance-label) { display: none; }
:root[data-retro] .main-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
:root[data-retro] .main-nav a { font-size: 12px; min-height: 40px; padding: 8px 10px; gap: 7px; border: 2px solid transparent; border-radius: 2px; }
:root[data-retro] .main-nav a[aria-current='page'] { background: #e1dafc; border-color: var(--rule-strong); box-shadow: 2px 2px 0 #b49cc9; }
:root[data-retro] .main-nav .icon { width: 16px; height: 16px; }
:root[data-retro] .main-nav .nav-count { position: static; margin-left: 0; border-radius: 1px; }
:root[data-retro] .sidebar-bottom { display: flex; align-items: center; gap: 12px; padding: 0; margin: 0; }
:root[data-retro] .theme-switch { flex-direction: row; border-radius: 2px; border-color: var(--rule-strong); background: #e9ddf5; }
:root[data-retro] .theme-switch button { min-height: 30px; padding: 5px; border-radius: 0; }
:root[data-retro] .game-toggle { width: auto; margin: 0; min-height: 40px; padding: 8px 11px; background: #fff0b8; border: 2px solid var(--rule-strong); border-radius: 2px; box-shadow: 3px 3px 0 #b49cc9; white-space: nowrap; }
:root[data-retro] .game-toggle [data-game-toggle-label] { display: inline; }
:root[data-retro] .game-toggle-light { display: none; }
:root[data-retro] .app-shell { margin: 0 auto; max-width: 1440px; min-height: calc(100vh - 104px); padding: 0 28px; }
:root[data-retro] .topbar { height: 55px; min-height: 55px; padding: 8px 2px; border: 0; }
:root[data-retro] .breadcrumb { font-family: var(--game-font); font-size: 10px; gap: 12px; }
:root[data-retro] .editor-avatar { border-radius: 2px; border: 2px solid var(--rule-strong); background: #fff0ba; }
:root[data-retro] .who { padding: 4px 8px; background: #eee3fb; border: 1px solid var(--rule-strong); box-shadow: 2px 2px 0 #bba0ce; }
:root[data-retro] #view { padding: 26px 0 28px; }
:root[data-retro][data-page='overview'] .arcade-hero { display: block; }
:root[data-retro] .arcade-hero { border: 3px solid var(--rule-strong); border-radius: 3px; background: #fff8fd; box-shadow: 6px 6px 0 #aa8bbf; }
.arcade-window-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 16px; border-bottom: 3px solid var(--rule-strong); background: #e0c5ed; font: 11px var(--game-font); }
.arcade-window-bar > span:last-child { color: #9c568e; letter-spacing: 5px; font-size: 16px; }
.arcade-hero-body { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 30px; padding: 26px 32px 22px; background-image: radial-gradient(#ddc4e4 .8px, transparent .8px); background-size: 12px 12px; }
.arcade-welcome { align-self: center; }
.arcade-kicker { font: 10px var(--game-font); color: #81548e; margin-bottom: 13px; }
.arcade-welcome h2 { font: 28px/1.4 var(--game-font); letter-spacing: -1.2px; }
.arcade-welcome > p:not(.arcade-kicker) { max-width: 400px; font-size: 12px; color: var(--ink-2); margin: 12px 0 18px; }
.arcade-console { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.arcade-console img { width: min(100%, 350px); height: auto; image-rendering: pixelated; }
.arcade-console-caption { font: 9px var(--game-font); color: var(--ink-3); text-align: center; }
.arcade-campaign { grid-column: 1 / -1; margin-top: 22px; padding-top: 16px; border-top: 2px dashed #d4b5df; }
.arcade-campaign-label { display: flex; justify-content: space-between; gap: 15px; font: 10px var(--game-font); margin-bottom: 9px; }
.arcade-campaign progress { display: block; appearance: none; width: 100%; height: 17px; border: 2px solid var(--rule-strong); border-radius: 0; background: #ecdef5; padding: 2px; }
.arcade-campaign progress::-webkit-progress-bar { background: #ecdef5; }
.arcade-campaign progress::-webkit-progress-value { background: repeating-linear-gradient(90deg, #ba8dd3 0 10px, #f2d9fa 10px 13px); }
.arcade-campaign progress::-moz-progress-bar { background: repeating-linear-gradient(90deg, #ba8dd3 0 10px, #f2d9fa 10px 13px); }
.arcade-campaign-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 10px; color: var(--ink-2); margin-top: 8px; }
:root[data-retro] :is(.page-heading h1, .emp-head h1) { font: 25px/1.4 var(--game-font); letter-spacing: -1px; }
:root[data-retro] .page-heading { padding-bottom: 22px; }
:root[data-retro] .today { color: #624474; }
:root[data-retro] :is(.btn, .detail-nav button, .icon-button) { border: 2px solid var(--rule-strong); border-radius: 2px; box-shadow: 3px 3px 0 #bda3cf; }
:root[data-retro] .btn--primary { background: #f7bcd9; color: #583466; border-color: #815894; }
:root[data-retro] .btn--primary:hover:not(:disabled) { background: #ffd4e7; color: #492f60; }
:root[data-retro] .btn[data-armed='true'] { background: var(--red); color: white; }
:root[data-retro] :is(.btn, .game-toggle, .main-nav a, .detail-nav button, .icon-button):active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
:root[data-retro] :is(.btn, .game-toggle, .main-nav a, .stat):focus-visible { outline: 3px dashed #75448b; outline-offset: 5px; }
:root[data-retro] .stat { border: 2px solid var(--rule-strong); border-radius: 2px; position: relative; padding-top: 37px; box-shadow: 4px 4px 0 #ac91c0; }
:root[data-retro] .stat::before { content: '· · ·'; position: absolute; top: 0; left: 0; right: 0; height: 23px; border-bottom: 2px solid var(--rule-strong); background: #d9c7f1; font: bold 22px/12px monospace; text-align: right; padding-right: 8px; }
:root[data-retro] .stat:nth-child(2)::before { background: #f8c2dc; }
:root[data-retro] .stat:nth-child(3)::before { background: #f6e6a9; }
:root[data-retro] .stat:nth-child(4)::before { background: #bfdfd6; }
:root[data-retro] .stat-value { font: 31px/1.2 var(--game-font); }
:root[data-retro] .stat-icon { border-radius: 2px; border: 1px solid currentColor; padding: 5px; }
:root[data-retro] :is(.panel, .tracking-card, .focus-card, .emp-head, .umbrella, dialog) { border: 2px solid var(--rule-strong); border-radius: 3px; box-shadow: 5px 5px 0 #b69ac8; }
:root[data-retro] :is(.panel > .panel-head, .tracking-card > .panel-head) { background: #e8d6f5; border-bottom: 2px solid var(--rule-strong); padding: 12px 20px; margin: -24px -24px 20px; border-radius: 0; }
:root[data-retro] :is(.section-title h2, .tracking-card h2, .umbrella-head h2) { font: 12px/1.6 var(--game-font); letter-spacing: -.3px; }
:root[data-retro] .focus-card { background: #ffe4f1; }
:root[data-retro] .focus-card .eyebrow { font-family: var(--game-font); font-size: 10px; }
:root[data-retro] .focus-card h2 { font-size: 21px; font-weight: 650; }
:root[data-retro] .focus-art { transform: none; right: 15px; bottom: 10px; width: 72px; height: 64px; opacity: .5; }
:root[data-retro] .focus-art span { display: none; }
:root[data-retro] .focus-art::after { content: ''; display: block; width: 72px; height: 64px; background: #d390bf; clip-path: polygon(0 12%,12% 12%,12% 0,38% 0,38% 12%,62% 12%,62% 0,88% 0,88% 12%,100% 12%,100% 50%,88% 50%,88% 62%,75% 62%,75% 75%,62% 75%,62% 88%,50% 100%,38% 88%,38% 75%,25% 75%,25% 62%,12% 62%,12% 50%,0 50%); }
:root[data-retro] .bar { border-radius: 0; }
:root[data-retro] .tracking-progress .bar { height: 10px; border: 1px solid var(--rule-strong); background: #e9dcf1; }
:root[data-retro] .tracking-progress .bar i { background: repeating-linear-gradient(90deg, #b587cb 0 8px, #ead5f3 8px 10px); }
:root[data-retro] :is(.avatar, .tracking-icon, .chip, .count-badge, .item-mark, .dialog-icon) { border-radius: 2px; }
:root[data-retro] .avatar { border: 1px solid var(--rule-strong); box-shadow: 2px 2px 0 #d0b5dd; }
:root[data-retro] :is(input:not([type='checkbox']), select, textarea) { border-radius: 1px; border-color: #b192c1; }
:root[data-retro] :is(input, select, textarea):focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
:root[data-retro] .roster thead th { background: #efe3f8; }
:root[data-retro] .roster tbody tr:nth-child(even) { background: #fcf6ff; }
:root[data-retro] .roster tbody tr:hover { background: #f7e5f3; }
:root[data-retro] .emp-head { border-top: 13px solid #c5a6dc; }
:root[data-retro] .umbrella-head { background: #eee0f8; }
:root[data-retro] .item[open] > summary { background: #fff0f9; }
:root[data-retro] dialog[open] { background: #fffaff; border-top: 16px solid #c5a6dc; }
:root[data-retro] dialog::backdrop { background: rgb(88 53 118 / 40%); backdrop-filter: blur(2px); }
:root[data-retro] dialog h2 { font: 21px/1.4 var(--game-font); }
:root[data-retro] .toast { border: 2px solid var(--rule-strong); border-radius: 2px; box-shadow: 4px 4px 0 #a88bbb; }
:root[data-retro] .toast--error { color: white; }
:root[data-retro] .app-footer { padding: 20px 0; color: #5c3b70; }
:root[data-retro] .notes-composer, :root[data-retro] .notes-panel {
  --note-butter: #fff0bd; --note-sage: #ddf0e8; --note-peach: #ffe0ee; --note-lilac: #eae0ff; --note-tape: #c6a4db; --note-line: #dbc6a0;
}
:root[data-retro] .notes-composer { border: 2px solid var(--rule-strong); border-radius: 2px; box-shadow: 5px 5px 0 #b49ac5; padding-top: 47px; }
:root[data-retro] .notes-composer::before { content: 'QUICK SAVE / NOTES'; position: absolute; top: 0; left: 0; width: 100%; height: 29px; padding: 6px 16px; background: #e6c5e5; opacity: 1; transform: none; border-bottom: 2px solid var(--rule-strong); font: 10px var(--game-font); }
:root[data-retro] .notes-shared { border: 2px solid var(--rule-strong); border-radius: 2px; background: #fff4c9; }
:root[data-retro] .note { border: 2px solid var(--rule-strong); border-radius: 2px; box-shadow: 4px 4px 0 #b49ac5; padding-top: 35px; }
:root[data-retro] .note::before { content: '♥'; top: 0; left: 0; width: 100%; height: 23px; padding: 0 9px; text-align: right; border-bottom: 2px solid var(--rule-strong); transform: none; opacity: 1; font-size: 14px; background: #e2c9ed; }
:root[data-retro] .note:nth-child(even)::before { transform: none; background: #f4bdd7; }
:root[data-retro] .note.is-done::before { content: '✓'; background: #c6e3d8; }
:root[data-retro] .note-composer-icon { transform: none; border: 2px solid var(--rule-strong); border-radius: 1px; }
:root[data-retro] .note .note-delete { border: 0; box-shadow: none; }
:root[data-retro] .arcade-announcement.is-visible { display: block; position: fixed; z-index: 20; bottom: 26px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 40px); padding: 14px 20px; background: #fff0b8; color: #583466; border: 3px solid #815894; box-shadow: 5px 5px 0 #ad8bc0; font: 11px/1.7 var(--game-font); text-align: center; pointer-events: none; }
.arcade-particle { position: fixed; z-index: 99; width: 6px; height: 6px; pointer-events: none; background: #9c64bd; animation: arcade-pop 550ms steps(7, end) forwards; }
.arcade-particle:nth-of-type(even) { background: #e28ebc; }
@keyframes arcade-pop { to { transform: translate(var(--particle-x), var(--particle-y)); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  :root[data-retro] :is(.btn, .game-toggle, .main-nav a, .stat) { transition: background-color 120ms, transform 100ms steps(2, end); }
  :root[data-retro] .stat:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-particle { display: none; animation: none; }
}
@media (max-width: 1200px) {
  :root[data-retro] .sidebar { gap: 14px; padding: 12px 16px; grid-template-columns: auto 1fr; }
  :root[data-retro] .sidebar-bottom { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  :root[data-retro] .main-nav { grid-column: 1 / -1; justify-content: flex-start; }
  :root[data-retro] .main-nav a { flex: 1; justify-content: center; }
  :root[data-retro] .tracking-card { padding: 24px; }
}
@media (max-width: 900px) {
  .arcade-hero-body { padding: 22px; column-gap: 16px; }
  .arcade-welcome h2 { font-size: 23px; }
  :root[data-retro] .main-nav .nav-count { font-size: 10px; }
}
@media (max-width: 700px) {
  :root[data-retro] .sidebar { margin: 12px 14px 0; padding: 12px; gap: 12px; }
  :root[data-retro] .brand { font-size: 19px; gap: 6px; }
  :root[data-retro] .brand-mark { transform: scale(.8); }
  :root[data-retro] .sidebar-bottom { flex-direction: column; gap: 6px; }
  :root[data-retro] .theme-switch button { padding: 4px 5px; min-height: 28px; }
  :root[data-retro] .game-toggle { min-height: 30px; padding: 4px 8px; font-size: 10px; width: 100%; }
  :root[data-retro] .main-nav { gap: 4px; }
  :root[data-retro] .main-nav a { padding: 8px 4px; font-size: 10px; gap: 5px; min-width: 0; }
  :root[data-retro] .main-nav .nav-count { display: none; }
  :root[data-retro] .app-shell { padding: 0 14px; }
  :root[data-retro] .topbar { min-height: 65px; height: auto; gap: 10px; }
  :root[data-retro] .breadcrumb { font-size: 8px; }
  :root[data-retro] .who { padding: 3px 5px; gap: 5px; }
  :root[data-retro] .who strong { max-width: 82px; }
  .arcade-window-bar { font-size: 8px; padding: 8px 10px; }
  .arcade-window-bar > span:last-child { font-size: 12px; letter-spacing: 2px; white-space: nowrap; }
  .arcade-hero-body { grid-template-columns: 1fr; padding: 22px 18px 18px; }
  .arcade-welcome h2 { font-size: 24px; }
  .arcade-console { grid-row: 2; margin-top: 16px; }
  .arcade-console img { width: 220px; }
  .arcade-console-caption { font-size: 8px; }
  .arcade-campaign { margin-top: 18px; }
  .arcade-campaign-caption > span:last-child { display: none; }
  :root[data-retro] :is(.page-heading h1, .emp-head h1) { font-size: 22px; overflow-wrap: anywhere; }
  :root[data-retro] .stat { padding: 34px 13px 16px; }
  :root[data-retro] .stat-value { font-size: 27px; }
  :root[data-retro] .stat-top { font-size: 11px; }
  :root[data-retro] .panel > .panel-head { margin: -20px -20px 20px; padding: 12px 18px; }
  :root[data-retro] .notes-composer { padding-top: 46px; }
  :root[data-retro] .note { padding-top: 35px; }
  :root[data-retro] .table-footer { margin-bottom: -20px; }
  :root[data-retro] dialog h2 { font-size: 18px; }
  :root[data-retro] .app-footer { font-size: 10px; }
  :root[data-retro] .arcade-announcement.is-visible { top: 16px; bottom: auto; font-size: 10px; }
}
@media (max-width: 380px) {
  :root[data-retro] .sidebar { padding: 10px 8px; gap: 10px 6px; }
  :root[data-retro] .brand { font-size: 16px; gap: 2px; }
  :root[data-retro] .main-nav .icon { display: none; }
  .arcade-welcome h2 { font-size: 21px; }
  .arcade-kicker { font-size: 9px; }
  .arcade-campaign-label { font-size: 9px; }
}
@media print {
  .game-toggle, .arcade-hero, .arcade-announcement, .arcade-particle { display: none !important; }
  :root[data-retro] body { background: white; }
  :root[data-retro] .app-shell { padding: 0; }
}