:root { color-scheme: light; font-family: var(--skin-font, system-ui, sans-serif); color: var(--skin-text, #183b38); background: var(--skin-background, #f5f3ed); }
body { margin: 0; }
main { max-width: 48rem; margin: auto; padding: clamp(1.5rem, 6vw, 5rem); }
.eyebrow { letter-spacing: .08em; font-size: .85rem; }
h1 { font-size: clamp(2rem, 7vw, 4rem); line-height: 1.15; margin: 2rem 0; }
p { line-height: 1.65; }
section { margin-top: 3rem; padding: 1.5rem; border: 1px solid #acbdb5; border-radius: 1rem; background: var(--skin-surface, #ffffff); }
h2 { font-size: 1.25rem; margin-top: 0; }
[hidden] { display: none !important; }
label { display: block; margin: 1rem 0; }
input, textarea, button { font: inherit; box-sizing: border-box; }
input, textarea { width: 100%; padding: .75rem; border: 1px solid #688c80; border-radius: .4rem; display: block; margin-top: .4rem; }
button { padding: .75rem 1rem; background: var(--skin-primary, #1c5a4e); border: 1px solid #1c5a4e; color: var(--skin-primary_text, #ffffff); border-radius: .5rem; cursor: pointer; }
button.secondary { background: var(--skin-surface, #ffffff); color: var(--skin-text, #183b38); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--skin-primary, #1c5a4e); outline-offset: 3px; }
.actions, header { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
header { justify-content: space-between; }
article { margin: .75rem 0; }
article button { width: 100%; text-align: left; }
.small { font-size: .85rem; }
#notice { min-height: 1.7rem; }
dialog { max-width: 36rem; width: calc(100% - 3rem); border: 1px solid #688c80; border-radius: 1rem; padding: 1.5rem; box-sizing: border-box; }
dialog::backdrop { background: rgb(0 0 0 / 82%); }
dialog form { display: flex; flex-direction: column; gap: .9rem; width: 100%; margin: 0; }
dialog form label { margin: .25rem 0 -.4rem; }
dialog form input, dialog form textarea, dialog form select { margin: 0; min-width: 0; font-size: max(1rem, 16px); }
dialog textarea { min-height: 8rem; resize: vertical; }
dialog #module-commands { display: flex; flex-direction: column; align-items: stretch; margin: 1.5rem 0 .5rem; }
dialog .dialog-close { position: sticky; top: -1rem; z-index: 1; align-items: flex-end; padding: .5rem 0; margin-bottom: 1rem; background: var(--skin-surface, #fff); }
dialog .dialog-close button { min-height: 44px; }
dialog { position: fixed; top: calc(var(--viewport-top, 0px) + 12px); bottom: auto; margin: 0 auto; max-height: calc(var(--viewport-height, 100dvh) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 1rem; border: 2px solid var(--skin-primary, #1c5a4e); box-shadow: 0 1.5rem 5rem #000b; }
body:has(dialog[open]) { overflow: hidden; }
dialog h2 { line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 480px) { dialog { width: calc(100% - 1rem); } }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }

select { font: inherit; width: 100%; padding: .75rem; margin-top: .4rem; }
input[type="checkbox"] { width: auto; display: inline-block; margin-left: .5rem; }

dialog { background: var(--skin-surface, #ffffff); color: var(--skin-text, #183b38); }
input, textarea, select { background: var(--skin-surface, #ffffff); color: var(--skin-text, #183b38); }

#content-image{max-width:100%;height:auto;border-radius:.5rem}

#actions { margin: 1rem 0; }
#audio-controls { margin: 1.25rem 0; }
#audio-controls button { margin: .25rem .25rem .25rem 0; }
#moderation { margin: 1.25rem 0; padding: 1rem; border: 1px solid #acbdb5; border-radius: .75rem; }
#moderation summary { cursor: pointer; font-weight: bold; min-height: 44px; }
#moderation summary:focus-visible { outline: 3px solid var(--skin-primary, #1c5a4e); outline-offset: 3px; }
@media (max-width: 480px) {
  main { padding: 1rem; }
  h1 { font-size: 2rem; margin: 1.25rem 0; }
  section { margin-top: 1.5rem; padding: 1rem; }
}

#detail-cards .content-card { margin: 1rem 0; padding: 1rem; border: 2px solid var(--skin-primary, #1c5a4e); border-left-width: 6px; border-radius: .65rem; background: var(--skin-background, #f5f3ed); }
.content-card h3 { margin: 0 0 .75rem; font-size: 1rem; }
.content-card p { margin: 0; }
#detail-cards:not(:empty) + #content-image[hidden] ~ #module-commands { border-top: 1px solid #acbdb5; padding-top: 1rem; }

/* Focused notes reserve space for the editor and both actions above the keyboard. */
#detail.editing-note[open] { display: flex; flex-direction: column; height: min(28rem, calc(var(--viewport-height, 100dvh) - 24px)); overflow: hidden; gap: .5rem; }
#detail.editing-note > #detail-title,
#detail.editing-note > #detail-body,
#detail.editing-note > #detail-cards { display: none; }
#detail.editing-note .dialog-close { position: static; flex: 0 0 auto; padding: 0; margin: 0; }
#detail.editing-note #module-commands { flex: 1; min-height: 0; margin: 0; padding: 0; border: 0; }
#detail.editing-note .note-editor { flex: 1; min-height: 0; gap: .75rem; }
#detail.editing-note .note-editor label { margin: 0; }
#detail.editing-note .note-editor textarea { flex: 1; min-height: 3rem; height: auto; resize: none; }
#detail.editing-note .note-editor button { flex-shrink: 0; min-height: 44px; }

/* Smartphone-first: story actions first, occasional tools below. */
* { box-sizing: border-box; }
button, input, select, summary { min-height: 44px; }
input, textarea, select { font-size: max(1rem, 16px); }
button, summary { touch-action: manipulation; }
summary { cursor: pointer; padding: .65rem 0; }
.actions > form { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; width: 100%; }
.actions > form label { margin: .25rem 0 0; }
.actions > form input, .actions > form textarea { margin: 0; }
#game-tools { margin-top: 1.5rem; border-top: 1px solid #688c80; padding-top: .5rem; }
#game-tools > summary { font-weight: bold; }
#game-tools #more-actions:empty { display: none; }
#game-tools #fallback-form { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #688c80; }
#game-tools #fallback-form button { margin-top: .75rem; }
#content-list .content-link { background: var(--skin-surface, #fff); color: var(--skin-text, #183b38); border-color: #688c80; line-height: 1.4; overflow-wrap: anywhere; }
#content-list .content-link.unread { border-left: 4px solid var(--skin-primary, #1c5a4e); }
.content-card .actions { margin-top: 1rem; }
.in-game h1 { font-size: clamp(1.5rem, 5vw, 2rem); margin: .75rem 0; }
.in-game #notice { margin: .5rem 0; }
.in-game #game { margin-top: 1rem; }
#game > #who { font-weight: bold; margin-bottom: .5rem; }
#game > #progress, #game > #connection { margin: .5rem 0; }
main { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
@media (max-width: 700px) {
  main { padding-top: max(1rem, env(safe-area-inset-top)); }
  #game { padding: 1rem; }
}

/* WebKit's native select appearance can ignore the intended touch height. */
select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: .65rem 2.25rem .65rem .75rem;
  border: 1px solid currentColor;
  border-radius: .5rem;
  background-color: var(--skin-surface, #fff);
  color: var(--skin-text, #183b38);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

#push-controls { display: flex; flex-direction: column; gap: .75rem; }
#push-status { margin: .25rem 0 0; }

/* Distinguish identity, fiction and instructions without relying on color alone. */
.player-card { margin: 1rem 0; padding: 1rem; border: 2px solid var(--skin-primary,#1c5a4e); border-radius: .8rem; background: var(--skin-surface,#fff); }
.player-caption { margin: 0 0 .3rem; font: 700 .9rem system-ui,sans-serif; }
#who { margin: 0; font-size: clamp(1.7rem,7vw,2.3rem); line-height: 1.2; overflow-wrap: anywhere; }
#role-caption { margin: .4rem 0 0; }
.content-group { margin-top: 1rem; padding: .85rem; border-radius: .75rem; }
.content-group h3 { margin: 0 0 .8rem; font: 700 1rem system-ui,sans-serif; }
.group-action { border: 2px solid var(--skin-primary,#1c5a4e); }
.group-guide { border-style: dashed; }
.group-guide .content-link,.group-tools .content-link { background: transparent; color: var(--skin-text,#183b38); border: 1px solid currentColor; }
.group-role { border-left: 5px solid var(--skin-primary,#1c5a4e); }
.detail-kind { margin: .5rem 0; font: 700 .85rem system-ui,sans-serif; text-transform: uppercase; letter-spacing: .04em; }
dialog[data-group="guide"] { border-style: dashed; }

/* Native-inspired surfaces. Every hue derives from the active scenario skin. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-line: color-mix(in srgb, var(--skin-text, #183b38) 16%, transparent);
  --ui-muted: color-mix(in srgb, var(--skin-text, #183b38) 76%, var(--skin-surface, white));
  --ui-tint: color-mix(in srgb, var(--skin-primary, #1c5a4e) 10%, var(--skin-surface, white));
  --ui-shadow: 0 12px 32px #00000012, inset 0 1px 0 #ffffff18;
}
body { min-height: 100dvh; background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb,var(--skin-primary,#1c5a4e) 15%,transparent), transparent 55%), var(--skin-background,#f5f3ed); }
main { max-width: 40rem; padding-top: max(1.25rem, env(safe-area-inset-top)); }
/* The vector silhouette stays stable; decorative colors follow the skin. */
.app-brand { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; font-weight: 750; font-size: 1.2rem; letter-spacing: -.03em; }
.app-brand > span { min-width: 0; overflow-wrap: anywhere; }
.app-logo { display: block; width: 65px; height: 104px; flex: 0 0 auto; --logo-accent: var(--skin-primary, #ceab64); }
.in-game .app-brand { gap: .65rem; font-size: .9rem; margin-bottom: .5rem; }
.in-game .app-logo { width: 35px; height: 56px; }
[data-theme="castle"] .app-brand { display: none; }
h1 { font-family: var(--skin-font,system-ui); letter-spacing: -.035em; overflow-wrap: anywhere; }
.eyebrow { color: var(--ui-muted); font-size: .7rem; font-weight: 650; letter-spacing: .12em; }
p { line-height: 1.55; }
section { border-color: var(--ui-line); border-radius: 1.4rem; }
button { min-width: 44px; border: 1px solid transparent; border-radius: .95rem; font-weight: 650; box-shadow: 0 3px 8px #00000012,inset 0 1px 0 #ffffff26; transition: transform .15s ease, filter .15s ease; }
button:active:not(:disabled) { transform: scale(.98); filter: brightness(.93); }
button.secondary { border-color: var(--ui-line); background: var(--skin-surface,#fff); box-shadow: inset 0 1px 0 #ffffff16; }
:where(button, input, textarea, select, summary, a):focus-visible { outline: 3px solid var(--skin-primary,#1c5a4e); outline-offset: 4px; }
input, textarea, select { border-color: var(--ui-line); border-radius: .85rem; padding: .9rem; }
#login-panel { box-shadow: var(--ui-shadow); }
#login-form > button { width: 100%; }
#notice:empty { display: none; }
.in-game h1 { font-size: 1.15rem; line-height: 1.35; margin: .6rem 0 1rem; }
.in-game #game { padding: 0; margin: 0; border: 0; background: transparent; }
#game > header { justify-content: flex-end; margin: -.25rem 0 .65rem; }
#game-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#logout { font-size: .8rem; padding: .5rem .85rem; background: transparent; box-shadow: none; }
.player-card { position: relative; margin: 0; padding: 1.25rem; border: 1px solid var(--ui-line); border-radius: 1.65rem; background: linear-gradient(135deg,var(--ui-tint),var(--skin-surface,#fff)); box-shadow: var(--ui-shadow); }
.player-caption { color: var(--ui-muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; margin-bottom: .55rem; }
#who { font-size: clamp(1.8rem,8vw,2.4rem); letter-spacing: -.04em; font-weight: 750; }
#role-caption { font-size: .9rem; color: var(--ui-muted); margin-top: .4rem; }
#identity-content { margin-top: 1.1rem; border-top: 1px solid var(--ui-line); }
#identity-content .content-group { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.content-disclosure summary { display: flex; align-items: center; gap: .5rem; padding: .85rem 0; font-size: .9rem; font-weight: 600; list-style: none; }
.content-disclosure summary::-webkit-details-marker { display: none; }
.content-disclosure summary::after { content: '+'; margin-left: auto; font-size: 1.2rem; color: var(--ui-muted); }
.content-disclosure[open] summary::after { content: '−'; }
#game > #progress { color: var(--ui-muted); margin: .85rem .25rem; font-size: .8rem; }
#actions:empty { display: none; }
.content-group { margin-top: 1.6rem; padding: 0; border: 0; background: transparent; }
.content-group h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: 1.05rem; letter-spacing: -.015em; margin-bottom: .8rem; }
.group-count { display: inline-block; color: var(--ui-muted); border: 1px solid var(--ui-line); border-radius: 2rem; padding: .2rem .5rem; font-size: .7rem; font-weight: 600; }
article { margin: .6rem 0; }
#content-list .content-link, .content-link { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; width: 100%; padding: 1rem; text-align: left; background: var(--skin-surface,#fff); color: var(--skin-text,#183b38); border: 1px solid var(--ui-line); border-radius: 1.1rem; box-shadow: 0 4px 14px #0000000a,inset 0 1px 0 #ffffff12; line-height: 1.4; }
.link-title { flex: 1 1 65%; overflow-wrap: anywhere; font-size: .95rem; font-weight: 600; }
.link-arrow { margin-left: auto; color: var(--ui-muted); font-size: 1.5rem; line-height: 1; }
#content-list .content-link.unread, .content-link.unread { border-left: 1px solid var(--ui-line); background: var(--ui-tint); }
.unread-badge { border-radius: .45rem; padding: .23rem .4rem; text-transform: uppercase; letter-spacing: .04em; font-size: .65rem; font-weight: 800; color: var(--skin-primary_text,#fff); background: var(--skin-primary,#1c5a4e); }
.completion-label { font-size: .75rem; color: var(--ui-muted); }
#rules-panel, #game-tools { border: 1px solid var(--ui-line); padding: .25rem 1rem; border-radius: 1.1rem; background: var(--skin-surface,#fff); margin-top: 1rem; }
#rules-panel > summary, #game-tools > summary { font-size: .9rem; font-weight: 600; padding: .85rem 0; }
#rules-panel #help-open { width: 100%; margin: .75rem 0; }
#rules-content .content-group { margin-top: .5rem; }
dialog, dialog[data-group='guide'] { border: 1px solid var(--ui-line); border-radius: 1.6rem; padding: 1.15rem; box-shadow: 0 24px 80px #0009,inset 0 1px 0 #ffffff26; }
dialog::backdrop { background: #0009; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
dialog .dialog-close { top: -1.15rem; padding: .7rem 0; }
dialog .dialog-close button { border-radius: 2rem; font-size: .85rem; }
dialog h2 { font-size: 1.5rem; letter-spacing: -.025em; }
dialog[data-group='story'] #detail-body { font-family: var(--skin-font,system-ui); }
.detail-kind { color: var(--ui-muted); font-size: .7rem; letter-spacing: .1em; }
#detail-cards .content-card { border: 1px solid var(--ui-line); border-left: 4px solid var(--skin-primary,#1c5a4e); border-radius: 1rem; box-shadow: var(--ui-shadow); }
@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  #rules-panel, #game-tools { background: color-mix(in srgb,var(--skin-surface,#fff) 92%,transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:active:not(:disabled) { transform: none; } }
@media (prefers-reduced-transparency: reduce) {
  #rules-panel, #game-tools { background: var(--skin-surface,#fff); backdrop-filter: none; -webkit-backdrop-filter: none; }
  dialog::backdrop { background: #000d; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Tasks are actions; evidence and events are information. */
#identity-content { display: grid; gap: .6rem; padding-top: .8rem; }
#identity-content > .content-link { padding: .8rem; background: transparent; }
#content-list { margin-top: 1.4rem; }
#content-list > h3, #tool-content > h3 { font-size: 1.1rem; margin: 0 0 .8rem; }
.task-card { padding: 1rem; border-radius: 1.4rem; border: 1px solid var(--ui-line); background: var(--skin-surface,#fff); box-shadow: var(--ui-shadow); margin: .8rem 0; }
.task-status { font-size: .75rem; font-weight: 700; color: var(--ui-muted); margin: 0 0 .4rem; }
#content-list .task-card > .content-link { padding: .5rem 0; background: transparent; border: 0; border-radius: .4rem; box-shadow: none; }
.task-instruction { margin: .5rem 0 1rem; font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-sources { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--ui-line); padding-top: .75rem; }
.task-sources p { margin: 0; color: var(--ui-muted); font-size: .8rem; }
.task-sources button { text-align: left; }
.task-history { margin-top: .75rem; border-top: 1px solid var(--ui-line); }
.task-history > summary { font-size: .9rem; font-weight: 600; }
#event-feed { margin: 1.5rem 0; padding: 0; border: 0; background: transparent; }
#event-feed-items article { border-left: 3px solid var(--skin-primary,#1c5a4e); padding: .25rem 1rem; }
#tool-content { margin-top: 1.5rem; }
#detail-links { margin-top: 1rem; flex-direction: column; align-items: stretch; }
#detail.editing-note #detail-links { display: none; }
#identity-content { grid-template-columns: minmax(0, 1fr); }
.task-card, .task-sources { min-width: 0; }
.task-sources button, #detail-links button { overflow-wrap: anywhere; max-width: 100%; }
#event-feed h3, #rules-panel summary, #tool-content h3 { overflow-wrap: anywhere; }
/* Semantic check states retain symbols and words, not color alone. */
.moderation-checks, .moderation-check ul { list-style: none; padding: 0; }
.moderation-check ul { margin: .65rem 0 0 .6rem; }
.moderation-check { margin: .6rem 0; }
.moderation-check > span { display: block; border-radius: .65rem; padding: .6rem .7rem; }
.moderation-check.fulfilled > span { background: #e1f3e7; color: #185335; }
.moderation-check.unfulfilled > span { background: #fff0d7; color: #794500; }
.content-scope { margin: .7rem .2rem .3rem; font-size: .8rem; color: var(--ui-muted); }
#hint-help { margin: .75rem 0; border-top: 1px solid var(--ui-line); }
#hint-help summary { font-weight: 650; }

/* Clear areas share theme tokens; pictograms supplement their labels. */
.pictogram{width:1.4em;height:1.4em;flex:0 0 1.4em;vertical-align:middle}
.section-heading{display:flex;align-items:center;gap:.65em}
#content-list,#event-feed,#tool-content{margin-block:2.2rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--skin-text) 18%,transparent)}
#content-list:empty,#tool-content:empty{display:none}
#content-list>h3,#event-feed>h3,#tool-content>h3{margin-top:0}
#group-status{margin:1.6rem 0 .4rem;padding:1rem 1.1rem;border-radius:1.1rem;background:var(--skin-primary);color:var(--skin-primary_text);font-weight:700;line-height:1.45;box-shadow:0 5px 18px #0002}
#group-status+#content-list{margin-top:.75rem;border-top:0}
#rules-panel,#game-tools{margin-top:1.5rem;background:color-mix(in srgb,var(--skin-surface) 75%,var(--skin-background));}
.player-card{display:grid;grid-template-columns:minmax(0,1fr) 76px;column-gap:1rem;align-items:start}
.player-card>.player-caption,.player-card>#who,.player-card>#role-caption{grid-column:1;margin-right:0}
.player-card>#identity-content{grid-column:1/-1;width:100%}
.player-card>.portrait-button{grid-column:2;grid-row:1/4;align-self:start;width:76px;height:86px;min-height:76px;padding:0;border-radius:1.2rem;overflow:hidden;background:color-mix(in srgb,var(--skin-primary) 18%,var(--skin-surface));color:var(--skin-text);border:1px solid color-mix(in srgb,var(--skin-primary) 50%,transparent)}
#portrait{width:100%;height:100%;object-fit:cover;display:block}
#portrait[hidden]{display:none}
#portrait-placeholder .pictogram{width:40px;height:40px}
#who{overflow-wrap:anywhere}
.phase-step{padding:1rem;margin:1.2rem 0;border-radius:1rem;background:color-mix(in srgb,var(--skin-primary) 6%,var(--skin-surface));border:1px solid color-mix(in srgb,var(--skin-text) 20%,transparent)}
.phase-step h4{margin-top:0}.future-step{background:var(--skin-background)}
#figure-setup{padding:1rem;margin:1rem 0}#figure-fields label{display:block;margin-top:1rem}#figure-fields input{width:100%}
#portrait-file{width:100%;max-width:100%;min-height:44px}
@media(max-width:360px){.player-card{grid-template-columns:minmax(0,1fr) 60px;gap:.6rem}.player-card>.portrait-button{width:60px;height:68px;min-height:60px}}

summary.section-heading::after{content:'›';margin-left:auto;flex:0 0 auto;transition:transform .15s}details[open]>summary.section-heading::after{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){summary.section-heading::after{transition:none}}

/* Burg um 1900: archival paper, burgundy cloth and restrained brass details. */
:root[data-theme="castle"]{--castle-brass:#8b6c38;--ui-line:#baa584;--ui-shadow:0 .4rem 1.25rem #49331b12}
[data-theme="castle"] body{background:radial-gradient(ellipse at top,#fff7e780,transparent 65%),repeating-linear-gradient(0deg,#775a2a03 0 1px,transparent 1px 5px),var(--skin-background)}
[data-theme="castle"] main>h1{font-family:Georgia,serif;font-weight:500;line-height:1.18;text-align:center;letter-spacing:-.025em;padding-bottom:1.1rem;border-bottom:1px solid var(--castle-brass)}
[data-theme="castle"] main>h1::before{content:'';display:block;width:100px;height:84px;margin:0 auto .7rem;background:url('/static/castle-crest.svg') center/contain no-repeat}
[data-theme="castle"] .eyebrow{text-align:center;color:var(--skin-primary);letter-spacing:.12em}
[data-theme="castle"] .player-card{border-radius:1.1rem;border:1px solid var(--castle-brass);background:linear-gradient(130deg,#fffaf0,var(--skin-surface));box-shadow:inset 0 0 0 5px #fff7e7,inset 0 0 0 6px #d2bd97,var(--ui-shadow)}
[data-theme="castle"] #who{font-family:Georgia,serif;font-weight:500;color:var(--skin-primary)}
[data-theme="castle"] .player-card>.portrait-button{border-radius:2rem 2rem .8rem .8rem;border-color:var(--castle-brass);background:#e8dcc5}
[data-theme="castle"] button{border-radius:.65rem;border-color:var(--castle-brass);box-shadow:0 2px 0 #3e201320}
[data-theme="castle"] button.secondary{background:#fff7e7;color:var(--skin-text)}
[data-theme="castle"] .content-link{border-radius:.75rem;background:#fffaf0;border-color:#c9b99c;box-shadow:0 2px 6px #49331b09}
[data-theme="castle"] .content-link.unread{background:#eee1cd;border-color:var(--castle-brass)}
[data-theme="castle"] .task-card{background:var(--skin-surface);border-radius:1rem;border-color:#b69c72;box-shadow:var(--ui-shadow)}
[data-theme="castle"] #group-status{border-radius:.75rem;border:1px solid var(--castle-brass);background:linear-gradient(120deg,#642d3c,#4c2230);color:#fff7e7;box-shadow:0 3px 10px #49331b20}
[data-theme="castle"] dialog{background:var(--skin-surface);border:1px solid var(--castle-brass);border-radius:1rem}
[data-theme="castle"] .section-heading>svg{color:var(--skin-primary)}
[data-theme="castle"] #group-status>svg{color:inherit}
[data-theme="castle"] #rules-panel,[data-theme="castle"] #game-tools{border-radius:.8rem;background:#f2e8d5;border-color:#c9b99c}
[data-theme="castle"] body.in-game main>h1::before{width:64px;height:48px;margin-bottom:.4rem}

/* The operator has a distinct, smartphone-first workspace on the home page. */
body.admin-mode main > .eyebrow, body.admin-mode main > h1,
body.admin-mode #notice, body.admin-mode #login-panel, body.admin-mode #game { display: none !important; }
#admin-panel { margin-top: 0; font-family: var(--ui-font, system-ui, sans-serif); }
#admin-panel header { align-items: flex-start; }
#admin-panel h2 { margin: .5rem 0; }
#admin-panel h3 { margin-top: 0; }
#admin-panel form { margin: 1.5rem 0; }
#admin-login > button { margin-top: 1rem; width: 100%; }
#admin-panel input, #admin-panel select { min-height: 44px; max-width: 100%; min-width: 0; font-size: 1rem; }
#admin-panel button, #admin-open { min-height: 44px; }
#admin-open { margin-top: 1.5rem; }
.admin-current { padding: 1.25rem; border-radius: 1rem; background: var(--skin-background, #f5f3ed); margin: 1.5rem 0; }
.admin-current .eyebrow { margin-top: 0; }
#admin-credentials { margin: 1.5rem 0; }
#admin-credentials summary { min-height: 44px; cursor: pointer; font-weight: 650; }
#admin-select-form { border-top: 1px solid var(--skin-primary, #688c80); padding-top: 1.5rem; }
#admin-scenario-info { margin: 1rem 0 1.25rem; padding: 1rem; line-height: 1.5; border-radius: 1rem; background: var(--skin-background, #f5f3ed); overflow-wrap: anywhere; }
#admin-scenario-info:empty { display: none; }
#admin-scenario-info p { margin: 0; }
#admin-scenario-info .scenario-people { font-weight: 650; margin-bottom: .6rem; }
.admin-access-card { padding: 1rem; border-radius: 1rem; background: var(--skin-background, #f5f3ed); }
.admin-access-card h4 { margin: 0 0 1rem; }
.admin-access-card dl { margin: 0; }
.admin-access-card dt { font-size: .85em; margin-top: .6rem; }
.admin-access-card dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-family: ui-monospace, monospace; user-select: all; }
#admin-panel h3, #admin-confirm p { overflow-wrap: anywhere; }