/* Public game presentation, independent of the private website shell. */
:root {
  color-scheme: dark;
  --bg: #10151b;
  --panel: #171e26;
  --hi: #202a35;
  --line: #2b3542;
  --accent: #a4c3dd;
  --muted: #a2adbd;
  --ink: #e2e8ef;
  --body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gold: var(--accent);
  --gold-dark: #52677b;
  --forest: var(--bg);
  --shadow: 0 16px 48px #05090fb3;
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
}
body { font-family: var(--body); color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-family: var(--body); color: var(--ink); }
button, input, select, textarea { font-family: var(--body); }
button, summary, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(button, input, select, textarea, summary, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input, select, textarea { accent-color: var(--accent); }
::selection { background: #36516c; color: #fff; }
.game-site-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--gold-dark); border-radius: 6px; background: var(--hi); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.game-site-link:hover { background: #344657; border-color: var(--accent); }
.game-site-nav { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
/* Painted capsules introduce the story without obscuring the game canvas. */
.story-art { display: block; width: 100%; height: clamp(128px, 24dvh, 220px); object-fit: cover; object-position: center; border: 1px solid var(--line); border-radius: 6px; background: var(--hi); }
.game-help { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--muted); font-size: 12px; line-height: 1.6; }
.game-help > summary { cursor: pointer; width: fit-content; min-height: 24px; color: var(--accent); font-weight: 600; }
.game-help[open] > summary { margin-bottom: 8px; }
.game-help p + p { margin-top: 8px; }
.game-help kbd { padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--hi); color: var(--ink); font: inherit; }
@media (max-width: 600px) {
  .story-art { height: clamp(110px, 20dvh, 170px); }
  .game-help > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; }
  .game-help > summary::before { content: '▸'; }
  .game-help[open] > summary::before { content: '▾'; }
  #panel-body button, .window-body button,
  #panel-body input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .window-body input:not([type=checkbox]):not([type=radio]):not([type=range]),
  #panel-body select, .window-body select { min-height: 44px; }
  #panel-body input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .window-body input:not([type=checkbox]):not([type=radio]):not([type=range]),
  #panel-body select, .window-body select { font-size: 16px; }
}
@media (max-height: 480px) and (orientation: landscape) { .story-art { height: 100px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
/* Character sheets keep the gameplay appearance beside optional illustrations. */
.character-visuals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; align-items: start; }
.has-character-artwork .character-visuals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.character-visuals > figure { min-width: 0; margin: 0; text-align: center; }
.character-visuals figcaption { margin: 7px 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.character-paperdoll > canvas { display: block; width: 100%; height: 150px; margin: auto; object-fit: contain; image-rendering: pixelated; background: radial-gradient(ellipse at center, #526a8040, transparent 72%); }
.character-paperdoll > canvas[hidden] { display: none; }
.character-paperdoll .type-chip { margin: 2px 0; }
.character-artwork > img, .character-artwork details > img { display: block; width: 100%; height: auto; max-height: 190px; object-fit: contain; border: 1px solid var(--gold-dark); border-radius: 6px; background: var(--bg); }
.character-artwork details { color: var(--muted); font-size: 11px; }
.character-artwork summary { cursor: pointer; min-height: 30px; color: var(--accent); }
.profile-intro.has-character-artwork, .profile-overview.has-character-artwork { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); align-items: start; }
.profile-intro > div, .profile-overview > div { min-width: 0; }
@media (max-width: 700px) {
  .profile-intro.has-character-artwork, .profile-overview.has-character-artwork { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .has-character-artwork .character-visuals { max-width: 350px; width: 100%; margin: auto; }
  .character-paperdoll > canvas { height: 130px; }
  .character-artwork > img { max-height: 160px; }
  .character-artwork summary { min-height: 44px; }
}
/* Compact save actions shared by the standalone games. */
.game-icon { display:inline-block; width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; }
.save-more { position:relative; }
.save-more > summary { display:grid; place-items:center; min-width:44px; min-height:44px; padding:0 10px; border:1px solid var(--gold-dark); border-radius:6px; background:var(--hi); color:var(--ink); cursor:pointer; list-style:none; font-size:20px; line-height:1; }
.save-more > summary::-webkit-details-marker { display:none; }
.save-more[open] > button { position:absolute; z-index:5; right:0; top:calc(100% + 4px); min-width:130px; min-height:44px; box-shadow:0 8px 20px #0009; }
[data-save-controls]:empty { display:none; }