:root {
  color-scheme: light;
  --ink: #171923;
  --muted: #686b78;
  --line: #dfe1e8;
  --paper: #ffffff;
  --canvas: #f2f3f7;
  --accent: #5f6fff;
  --accent-deep: #3548ea;
  --accent-soft: #eef0ff;
  --message: #f0f1f5;
  --own: #e8ebff;
  --danger: #9f3d4b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--canvas); }

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -12rem, color-mix(in srgb, var(--accent) 13%, transparent), transparent 30rem),
    var(--canvas);
  transition: background-color 240ms ease;
}

body[data-scene="V"] { --accent: #7356ee; --accent-deep: #5536d4; --accent-soft: #f0ecff; }
body[data-scene="P"] { --accent: #df5a2f; --accent-deep: #be3e1b; --accent-soft: #fff0e9; }
body[data-scene="S"] { --accent: #168b86; --accent-deep: #08706c; --accent-soft: #e5f6f4; }

button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 48%, transparent); outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .65; }

.app-shell {
  width: min(100%, 47rem);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  display: grid;
  align-items: start;
}

.panel {
  min-height: calc(100svh - max(2rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  box-shadow: 0 1.5rem 5rem rgba(30, 35, 55, .08);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.brand, .topline, .mini-brand, .scene-header, .handoff { display: flex; align-items: center; }

.brand { gap: .7rem; font-weight: 700; letter-spacing: .1em; }
.brand small { margin-left: auto; color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.brand-mark { width: 1.8rem; height: 1.8rem; border-radius: .65rem; background: var(--accent); box-shadow: inset 0 0 0 .35rem var(--accent-soft); }

.topline { justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .8rem; }
.mini-brand { gap: .45rem; color: var(--ink); font-weight: 800; letter-spacing: .08em; }
.mini-brand i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .28rem var(--accent-soft); }

h1 { margin: 0; font-size: clamp(1.85rem, 7vw, 3.15rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 720; }
p { margin: 0; }
.eyebrow { color: var(--accent-deep); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lede { color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.setup-copy, .center-copy, .final-copy { display: grid; gap: 1rem; }
.setup-copy { margin-top: clamp(1rem, 8vh, 5rem); }
.center-copy { margin: auto 0; text-align: center; justify-items: center; }
.final-copy { margin-top: clamp(.5rem, 5vh, 3rem); }

.form-stack { display: grid; gap: .9rem; }
.setup-panel .form-stack { margin-top: auto; }
.field-label, legend { color: var(--muted); font-size: .86rem; font-weight: 700; }
select, input[type="password"] { width: 100%; min-height: 3.5rem; padding: 0 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; font-size: 1rem; }
fieldset { margin: .5rem 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
legend { margin-bottom: .75rem; }
.radio-row { position: relative; min-height: 3.5rem; display: grid; place-items: center; text-align: center; }
.radio-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.radio-row span { width: 100%; height: 100%; padding: .9rem .5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--paper); display: grid; place-items: center; }
.radio-row input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.privacy-note { color: var(--muted); font-size: .78rem; text-align: center; }

.primary-button, .secondary-button, .answer-button, .choice-button, .recall-card, .minor-answers button {
  border: 0;
  border-radius: 1.1rem;
  cursor: pointer;
}
.primary-button, .secondary-button { min-height: 3.75rem; padding: .95rem 1.15rem; font-weight: 750; }
.primary-button { color: #fff; background: var(--accent-deep); box-shadow: 0 .65rem 1.6rem color-mix(in srgb, var(--accent) 22%, transparent); }
.secondary-button { color: var(--accent-deep); background: var(--accent-soft); }
.text-button { min-height: 3rem; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.participant-chip { padding: .5rem .75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: .8rem; font-weight: 800; letter-spacing: .06em; }

.scene-panel { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.scene-header { gap: 1rem; padding: .4rem 0 .1rem; }
.scene-header div { display: grid; gap: .15rem; }
.scene-header p { color: var(--muted); font-size: .8rem; }
.scene-header h1 { font-size: 1.65rem; letter-spacing: -.025em; }
.scene-mark, .scene-number { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--accent); color: #fff; font-weight: 850; font-variant-numeric: tabular-nums; }
.scene-number { width: 5.5rem; height: 5.5rem; border-radius: 1.65rem; font-size: 1.65rem; box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--accent) 25%, transparent); }
.scene-content { display: grid; gap: .85rem; }
.story-text { font-size: 1.06rem; line-height: 1.58; }
.artifact { min-height: 8rem; padding: 1.25rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--accent-deep) 90%, #111), var(--accent)); border-radius: 1.3rem; overflow: hidden; position: relative; }
.artifact::after { content: attr(data-mark); position: absolute; right: -.3rem; top: -1.3rem; font-size: 7rem; font-weight: 900; opacity: .11; }
.artifact span { font-size: 1.35rem; font-weight: 800; }
.artifact small { opacity: .8; line-height: 1.4; }
.message { max-width: 92%; padding: .85rem 1rem; border-radius: .35rem 1.15rem 1.15rem 1.15rem; background: var(--message); }
.message.own { margin-left: auto; border-radius: 1.15rem .35rem 1.15rem 1.15rem; background: var(--own); }
.message.system { max-width: 100%; background: var(--accent-soft); }
.message strong { display: block; margin-bottom: .3rem; color: var(--accent-deep); font-size: .78rem; }
.message p { font-size: 1rem; line-height: 1.48; }
.ticket { padding: .85rem 0; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); font-size: .9rem; }
.choice-list { display: grid; gap: .75rem; margin-top: .45rem; }
.choice-button { min-height: 5rem; padding: 1rem 1.1rem; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
.choice-button strong { display: block; font-size: 1.03rem; }
.choice-button span { display: block; margin-top: .35rem; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.choice-button:active { transform: scale(.99); background: var(--accent-soft); border-color: var(--accent); }
.scene-footer { margin-top: auto; padding-top: .75rem; }
.scene-footer .primary-button { width: 100%; }

.island-map { display: grid; gap: .65rem; padding: .9rem; background: #122f36; border-radius: 1.2rem; color: #fff; }
.map-row { display: grid; grid-template-columns: 4.5rem repeat(3, 1fr); gap: .4rem; align-items: stretch; }
.map-row small { align-self: center; opacity: .7; }
.map-cell { min-height: 3rem; padding: .35rem; display: grid; place-items: center; text-align: center; border-radius: .55rem; background: #28746d; font-size: .72rem; }
.map-cell.broken { background: #663f47; border: 1px dashed #f0a8aa; }
.map-cell.missing { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); }
.island-map.paused { filter: saturate(.35); }

.question-panel { justify-content: space-between; }
.answer-stack { display: grid; gap: .75rem; }
.answer-button { min-height: 4rem; padding: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); font-size: 1.08rem; font-weight: 700; }
.answer-button:active { border-color: var(--accent); background: var(--accent-soft); }

.handoff { gap: 1rem; margin-top: 1rem; align-items: flex-start; }
.handoff div { display: grid; gap: .5rem; }
.handoff h1 { font-size: 2rem; }
.handoff-mark { display: grid; place-items: center; flex: 0 0 3rem; height: 3rem; border-radius: 50%; color: var(--accent-deep); background: var(--accent-soft); font-size: 1.4rem; }
.prompt-list { margin: 0; padding: 0; list-style: none; counter-reset: prompt; display: grid; gap: .7rem; }
.prompt-list li { counter-increment: prompt; padding: .85rem 1rem .85rem 3rem; background: var(--message); border-radius: 1rem; position: relative; line-height: 1.42; }
.prompt-list li::before { content: counter(prompt); position: absolute; left: 1rem; top: .85rem; color: var(--accent-deep); font-weight: 800; }
.facilitator-actions { margin-top: auto; display: grid; gap: .4rem; }

.recall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.recall-card { min-height: 8.5rem; padding: .8rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .25rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); text-align: left; }
.recall-card span { margin-bottom: auto; color: var(--accent-deep); font-weight: 850; }
.recall-card strong { font-size: 1rem; }
.recall-card small { color: var(--muted); }
.recall-card:active { border-color: var(--accent); background: var(--accent-soft); }
.minor-answers { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.minor-answers button { min-height: 3.5rem; color: var(--muted); background: var(--message); }

.completion-mark { width: 5.5rem; height: 5.5rem; margin: auto auto 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #18876f; font-size: 2.5rem; }
.done-panel .center-copy { margin: 0 0 auto; }
.sync-status { padding: .8rem 1rem; border-radius: .85rem; color: #126a58; background: #e6f5f0; text-align: center; font-size: .84rem; }
.sync-status.pending { color: #875819; background: #fff3d9; }
.admin-link { color: var(--muted); font-size: .78rem; text-align: center; text-decoration: none; }

.admin-panel { max-width: 42rem; margin: auto; min-height: auto; }
.admin-panel h1 { margin-top: .5rem; }
.admin-panel #admin-results { display: grid; gap: 1rem; }
.admin-panel #admin-results[hidden] { display: none; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.stat-grid div { padding: 1rem; border-radius: 1rem; background: var(--message); display: grid; gap: .3rem; }
.stat-grid strong { font-size: 1.6rem; }
.stat-grid span { color: var(--muted); font-size: .78rem; }
.download-grid { display: grid; gap: .65rem; }
.admin-status { min-height: 1.25rem; color: var(--muted); font-size: .85rem; }
.reset-panel { display: grid; gap: .75rem; margin-top: .5rem; padding: 1rem; border: 1px solid #efd4d8; border-radius: 1rem; background: #fff8f9; }
.reset-panel h2 { margin: 0 0 .35rem; font-size: 1rem; }
.reset-panel p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.danger-button { width: 100%; min-height: 3.25rem; border: 0; border-radius: 1rem; color: #fff; background: var(--danger); font: inherit; font-weight: 750; cursor: pointer; }
.danger-button:disabled { opacity: .35; cursor: not-allowed; }
.reset-panel #reset-status { color: var(--danger); }

@media (min-width: 48rem) {
  .app-shell { padding-block: 2rem; }
  .panel { min-height: calc(100svh - 4rem); }
}

@media (max-width: 34rem) {
  .app-shell { padding: 0; }
  .panel { min-height: 100svh; border: 0; border-radius: 0; box-shadow: none; }
  fieldset { grid-template-columns: 1fr; }
  .radio-row { min-height: 3.25rem; }
  .radio-row span { padding: .8rem; }
  .recall-grid { grid-template-columns: 1fr; }
  .recall-card { min-height: 5rem; display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; }
  .recall-card span { grid-row: 1 / 3; margin: 0; }
  .recall-card small { grid-column: 2; }
  .map-row { grid-template-columns: 3.8rem repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}