/* Player application structure. Mobile views expose one contextual surface at a time. */
.player-app {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.player-app { --radius: 12px; background: var(--night); }
.player-app > main { width: min(1480px, 100%); padding: 0 clamp(1rem, 4vw, 4rem) 3rem; }
.player-app .account-bar { background: color-mix(in srgb, var(--night) 75%, transparent); border: 0; font-size: .75rem; padding: .5rem clamp(1rem, 4vw, 4rem); }
/* The live session is an application viewport, including when a software keyboard opens. */
html:has(#game:not(.hidden)) { overflow: hidden; }
.player-app:has(#game:not(.hidden)) { overflow: hidden; min-height: 0; padding: 0; }
.player-app:has(#game:not(.hidden)) > main { width: 100%; min-height: 0; padding: 0; }
.player-app .game { height: var(--play-height, 100dvh); min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; }
.player-app .game > header { padding: 1rem 1.5rem; margin: 0; background: color-mix(in srgb, var(--night) 75%, transparent); border-bottom: 1px solid var(--line); }
.player-app .game > header h1 { font: 500 clamp(1.2rem, 2vw, 1.65rem)/1.2 Georgia, serif; }
.player-app .game > header .eyebrow { font-size: .6rem; }
.play-tabs { display: none; gap: .5rem; padding: .65rem 1.5rem; background: var(--night); border-bottom: 1px solid var(--line); }
.play-tabs button { display: flex; align-items: center; justify-content: center; gap: .6rem; min-width: 8rem; background: transparent; color: var(--muted); border: 1px solid transparent; padding: .65rem 1rem; font-size: .85rem; border-radius: 8px; }
.play-tabs button > span { font-size: 1.2rem; }
.play-tabs button[aria-pressed=true] { color: var(--ink); background: var(--panel-strong); border-color: var(--line); }
.play-tabs small { font-size: .7rem; color: var(--moss-bright); font-variant-numeric: tabular-nums; }
.player-app .play-layout { padding: 1rem 1.5rem; gap: 1.25rem; grid-template-columns: minmax(14rem, 1fr) minmax(0, 1.8fr) minmax(14rem, 1fr); overflow: hidden; }
.player-app .room-panel { padding: 0; position: static; height: 100%; border-radius: 14px; }
.player-app :is(.room-panel, .character-panel) { background: color-mix(in srgb, var(--panel) 84%, transparent); }
.location-art { width: 100%; height: clamp(9rem, 22vh, 16rem); overflow: hidden; }
.location-art img { width: 100%; height: 100%; object-fit: cover; }
.player-app .room-panel-heading { padding: 1.25rem 1.25rem 0; }
.player-app .current-room-description { margin: 1rem 1.25rem; font: .9rem/1.7 system-ui, sans-serif; }
.player-app .room-panel .room-section { margin: 1.25rem; }
.player-app .room-list > li { margin-bottom: .65rem; }
.player-app .room-list button { border-radius: 9px; }
.player-app .chat-panel { min-height: 0; border-radius: 14px; background: color-mix(in srgb, var(--night) 82%, transparent); }
.player-app #transcript { min-height: 0; font-size: 1.08rem; padding: clamp(1.25rem, 3vw, 3rem); }
.player-app .character-panel { display: block; position: static; height: 100%; max-height: 100%; grid-column: 3; border-radius: 14px; padding: 1.5rem; }
.player-app .character-panel .character-section { padding-block: 1rem; }
.player-app .character-panel h2 { font-size: 2rem; }
.player-app .character-vitals { background: var(--panel-strong); border-radius: 10px; padding: .75rem; }
.player-app .game-footer { background: color-mix(in srgb, var(--night) 75%, transparent); padding: 0 1rem; }
.player-app .game-footer:has(.error:empty):has(#new-button.hidden) { display: none; }
.player-app .command-form { border-top: 1px solid var(--line); padding: .5rem; gap: .5rem; }
.player-app .command-form input { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: .8rem; font-size: 1rem; }
.player-app .command-form button { margin: 0; border-radius: 8px; }
@media (min-width: 901px) {
  .player-app .game { padding: 1.25rem clamp(1rem, 2.5vw, 2.5rem) 2rem; }
  .player-app .game > header { padding: 0 0 1rem; background: transparent; }
  .player-app .play-layout { padding: 1rem 0 0; }
}
@media (max-width: 900px) {
  .player-app > main { padding-inline: 1rem; }
  .player-app:has(#game:not(.hidden)) > main {
    position: fixed;
    top: var(--play-top, 0px);
    left: 0;
    right: 0;
  }
  .player-app .game {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    padding-inline: var(--safe-left) var(--safe-right);
  }
  .player-app .game > header { padding: .65rem 1rem; gap: .5rem; }
  .player-app .game > header > div:first-child { min-width: 0; width: 100%; }
  .player-app .game > header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1rem; }
  .player-app .status-block { width: 100%; justify-content: space-between; gap: .3rem; }
  .player-app .status { font-size: .75rem; }
  .player-app .save-status { font-size: .65rem; }
  .player-app .session-actions { gap: .3rem; }
  .player-app .session-actions button { min-height: 2.25rem; padding: .35rem .5rem; font-size: .7rem; }
  .player-app .play-layout { display: block; padding: 0; grid-row: 2; overflow: hidden; }
  .player-app .play-layout > :is(.room-panel, .chat-panel, .character-panel) { width: 100%; height: 100%; max-height: 100%; min-height: 0; border: 0; border-radius: 0; }
  .player-app .game[data-play-panel=scene] :is(.chat-panel, .character-panel),
  .player-app .game[data-play-panel=story] :is(.room-panel, .character-panel),
  .player-app .game[data-play-panel=character] :is(.room-panel, .chat-panel) { display: none; }
  .player-app .game[data-play-panel=scene] .room-panel,
  .player-app .game[data-play-panel=character] .character-panel { display: block; }
  .player-app .game[data-play-panel=story] .chat-panel { display: grid; }
  .player-app .play-tabs { grid-row: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .4rem .5rem max(.4rem, calc(var(--safe-bottom) - var(--play-bottom-occlusion, 0px))); border-top: 1px solid var(--line); border-bottom: 0; }
  .play-tabs button { min-width: 0; padding: .6rem .25rem; gap: .35rem; font-size: .75rem; }
  .play-tabs small { display: none; }
  .player-app .game-footer { grid-row: 3; }
  .player-app .command-form { grid-template-columns: minmax(0, 1fr) auto; }
  .player-app .command-form button { padding-inline: .9rem; }
  .player-app .speech-context { font-size: .7rem; padding: .5rem .75rem; }
  .player-app #transcript { padding: 1.25rem; font-size: 1rem; }
  .player-app .account-bar { padding: .3rem .75rem; gap: .3rem; }
  .player-app .account-bar > div { flex-basis: auto; }
  .player-app .account-bar .quiet { min-height: 2.25rem; font-size: .7rem; padding: .3rem .5rem; }
  .player-app .account-bar #account-usage { display: none; }
}
@media (max-width: 360px) {
  .player-app .save-status { display: none; }
  .player-app .gate .class-choice { gap: .5rem; padding: .7rem; }
  .player-app .gate .class-icon { width: 2.4rem; height: 2.4rem; }
}
.profile-tabs { display: none; }
.player-app .gate-error { grid-column: 1 / -1; }
.player-app :is(.room-actor-summary, .room-object-summary, .character-item-summary, .character-spell-summary) { min-height: 3rem; padding: .8rem; }
@media (max-width: 900px) {
  .player-app .profile-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .player-app .profile-shell { height: 100%; max-height: 100dvh; grid-template-rows: auto auto minmax(0, 1fr); }
  .player-app .profile-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: .6rem 1rem; gap: .5rem; border-bottom: 1px solid var(--line); }
  .player-app .profile-tabs button { border-color: transparent; background: transparent; color: var(--muted); }
  .player-app .profile-tabs button[aria-pressed=true] { background: var(--panel-strong); color: var(--ink); border-color: var(--line); }
  .player-app .profile-content { display: block; }
  .player-app .profile-dialog[data-profile-view=account] .credit-store,
  .player-app .profile-dialog[data-profile-view=store] .profile-summary { display: none; }
  .player-app .profile-summary { border: 0; padding: 1.5rem; height: 100%; }
  .player-app .profile-identity strong { font-size: 1.8rem; }
  .player-app .profile-balance strong { font-size: 2rem; }
  .player-app .profile-balance > span, .player-app .gift-key-form label { font-size: .8rem; }
  .player-app .credit-store { padding: 1.25rem; }
  .player-app .credit-packages { grid-template-columns: minmax(0, 1fr); }
  .player-app .credit-package p:not(.credit-package-kicker), .player-app .membership-terms, .player-app .store-note { font-size: .8rem; line-height: 1.65; }
}
@media (max-width: 900px) {
  .player-app .decision-panel { max-height: 48dvh; overflow: auto; }
  .player-app .game.combat-mode[data-play-panel=story] .chat-panel { display: flex; flex-direction: column; overflow-y: auto; }
  .player-app .combat-mode :is(.initiative-bar, .combat-board, .decision-panel, .speech-context, .command-form) { flex-shrink: 0; }
  .player-app .combat-mode .combat-board { min-height: 24rem; height: auto; overflow: visible; }
  .player-app .combat-mode .combat-field { min-height: 16rem; }
  .player-app .combat-mode .decision-panel { max-height: none; overflow: visible; }
  .player-app .combat-mode .decision-options > .decision-option { flex: 1 1 calc(50% - .5rem); min-width: 0; min-height: 3rem; }
  .player-app .combat-mode .decision-group { flex-basis: 100%; }
  .player-app .combat-mode .speech-context { display: none; }
  .player-app .combat-mode.combat-speech-entry .speech-context { display: flex; }
}


/* Elsewhere owns the library palette; adventure imagery belongs to cards and live scenes. */
.player-app:has(#landing-shell:not(.hidden)) { background: radial-gradient(ellipse at 75% 0, var(--panel-raised) 0, var(--night) 48%, var(--night) 100%); }
.player-app:has(#landing-shell:not(.hidden)) #scene-stage { visibility: hidden; }
.player-app:has(#landing-shell:not(.hidden)) > main { width: min(1360px, 100%); margin-inline: auto; padding: 0 clamp(1.25rem, 4vw, 3rem) 2rem; }
.player-app:has(#landing-shell:not(.hidden)) .account-bar { background: var(--night); }
.adventure-masthead { padding: clamp(2rem, 5vw, 4rem) 0 2.5rem; max-width: 46rem; }
.adventure-masthead h1 { margin: 0; font: 400 clamp(2rem, 4.5vw, 3.6rem)/1.08 Georgia, serif; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.elsewhere-wordmark { display: inline-block; color: var(--ink); font: 500 2.2rem/1.1 "Caveat", cursive; letter-spacing: -.025em; text-decoration: none; }
.elsewhere-tagline { max-width: 54ch; margin: 1rem 0 0; color: var(--muted); font: 400 .95rem/1.7 system-ui, sans-serif; }
.library-intro { padding: 1.25rem 0 1rem; }
.library-intro h2 { margin: 0; color: var(--muted); font: 500 .75rem/1.5 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.bookshelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.75rem 1.5rem; align-items: start; padding: 0 0 1.5rem; }
.adventure-book { min-width: 0; }
.player-app .bookshelf .adventure-choice { display: block; width: 100%; padding: 0; text-align: left; border: 0; border-radius: 3px; background: transparent; box-shadow: none; color: var(--ink); }
.player-app .bookshelf .adventure-choice:hover { filter: none; }
.player-app .bookshelf .adventure-choice-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; background: var(--panel-raised); box-shadow: 0 5px 18px var(--soft-highlight); }
.player-app .bookshelf .adventure-choice-art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .35s ease, filter .35s ease; }
.player-app .bookshelf .adventure-choice:hover img { transform: scale(1.025); filter: saturate(.95); }
.player-app .bookshelf .adventure-choice > span:last-child { display: block; padding: 1rem 0 .25rem; }
.player-app .bookshelf .adventure-choice strong { display: block; max-width: 22ch; color: var(--ink); font: 400 1.25rem/1.35 Georgia, serif; text-wrap: balance; }
.player-app .bookshelf .adventure-choice[aria-expanded=true] { outline: none; }
.player-app .bookshelf .adventure-choice:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 6px; }
.adventure-book.expanded { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 4vw, 3rem); padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.player-app .bookshelf .gate { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; min-width: 0; min-height: 0; max-width: none; padding: 0; }
.player-app .bookshelf .gate > #back-to-library { align-self: end; color: var(--muted); background: transparent; border: 0; padding: .5rem 0 .5rem 1rem; font-size: .75rem; font-weight: 400; }
.player-app .bookshelf .adventure-feature { display: block; border: 0; background: transparent; box-shadow: none; }
.player-app .bookshelf .landing-hero { padding: 0; max-width: none; text-align: left; text-shadow: none; }
.player-app .bookshelf .landing-hero h2 { margin: 0; color: var(--ink); font: 400 clamp(1.75rem, 3vw, 2.6rem)/1.15 Georgia, serif; letter-spacing: -.03em; }
.player-app .bookshelf .landing-description { max-width: 42ch; margin: 1.25rem 0 0; color: var(--muted); font: 400 1rem/1.8 Georgia, serif; }
.adventure-launch { margin-top: 1.5rem; }
.player-app .landing-shell .entry-primary { background: var(--moss); color: var(--on-accent); border: 1px solid var(--moss); border-radius: 3px; font-weight: 500; box-shadow: none; }
.adventure-launch .entry-primary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: auto; min-width: 9rem; padding: .8rem 1.15rem; margin: 0; }
.player-app .landing-shell .entry-panel { display: none; }
.player-app .landing-shell.is-creating .entry-panel { display: block; padding: 0; width: 100%; margin: 0; border: 0; background: transparent; box-shadow: none; }
.player-app .landing-shell.is-creating :is(.adventure-launch, .landing-description) { display: none; }
.player-app .landing-shell .setup-progress li[aria-current] { color: var(--moss); border-color: var(--moss); }
.player-app .landing-shell .entry-back { color: var(--muted); border-color: var(--line); border-radius: 3px; }
.player-app .landing-shell .gate .class-grid { max-height: none; overflow: visible; }
.player-app .landing-shell .class-choice { background: transparent; border-color: var(--line); border-radius: 3px; }
.player-app .landing-shell .class-choice:has(input:checked) { border-color: var(--moss); background: var(--panel-raised); }
.player-app .landing-shell .class-icon { color: var(--moss); background: transparent; border-color: var(--line); }
.player-app .landing-shell .class-select { color: var(--muted); border-color: var(--line); }
.player-app .landing-shell .class-choice:has(input:checked) .class-select { color: var(--on-accent); border-color: var(--moss); background: var(--moss); }
.player-app .landing-shell > .account-games { border-top: 1px solid var(--line); padding: 2rem 0; margin: 0; }
@media (max-width: 600px) {
  .adventure-masthead { padding: 1.25rem 0 1rem; }
  .bookshelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .player-app .bookshelf .adventure-choice strong { font-size: 1.05rem; }
  .adventure-book.expanded { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 1.25rem; }
  .player-app .bookshelf .expanded > .adventure-choice { width: min(220px, 85%); justify-self: center; }
  .player-app .bookshelf .gate { gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .player-app .bookshelf .adventure-choice-art img { transition: none; } }

.player-app .landing-shell .gate-step h2,
.player-app .landing-shell .class-copy strong { color: var(--ink); }
.player-app .landing-shell .class-copy small,
.player-app .landing-shell :is(.character-name-fields, .character-detail-fields, .code-field) label { color: var(--muted); }
.player-app .landing-shell .gate :is(input:not([type=radio]), select) { color: var(--ink); background: var(--panel); border-color: var(--control-line); border-radius: 3px; font-size: 1rem; font-weight: 400; }
.player-app .landing-shell .gate input::placeholder { color: var(--muted); }
.player-app .landing-shell .gate :is(input, select):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; box-shadow: none; }
.player-app .landing-shell #code-step .entry-primary { color: var(--on-accent); background: var(--moss); border-color: var(--moss); }

/* A single adventure has a full feature card; larger catalogs use the same expanding controls. */
.player-app .account-bar { padding: 1rem max(1.25rem, calc((100vw - 1264px) / 2)); gap: .75rem; border-bottom: 1px solid var(--selected); }
.player-app .account-bar .elsewhere-wordmark { margin-right: auto; color: var(--ink); }
.player-app .account-bar > div { margin-right: 0; text-align: right; flex-basis: auto; }
.player-app .account-bar #sign-in-link { background: var(--moss); color: var(--on-accent); border-color: var(--moss); padding: .6rem 1rem; border-radius: 5px; }
.player-app .account-bar .quiet { border-radius: 5px; }
.adventure-card-summary, .adventure-card-invitation { display: none; }
.player-app .bookshelf .adventure-book:only-child:not(.expanded) { grid-column: 1 / -1; }
.player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-choice { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; background: var(--panel); border: 1px solid var(--selected); border-radius: 10px; overflow: hidden; }
.player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-choice-art { aspect-ratio: 16 / 10; height: 100%; border-radius: 0; box-shadow: none; }
.player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-choice > span:last-child { display: flex; flex-direction: column; justify-content: center; align-items: start; padding: clamp(1.5rem, 3vw, 3rem); }
.player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-choice strong { font-size: clamp(1.5rem, 2.5vw, 2.3rem); line-height: 1.2; }
.player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-card-summary { display: block; max-width: 42ch; margin-top: 1rem; color: var(--muted); font: 400 .9rem/1.75 system-ui, sans-serif; }
.player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-card-invitation { display: block; margin-top: 1.5rem; color: var(--ink); font: 500 .85rem/1.5 system-ui, sans-serif; }
@media (max-width: 600px) {
  .player-app .account-bar { padding: .8rem 1.25rem; gap: .5rem; }
  .player-app .account-bar .elsewhere-wordmark { font-size: 2rem; }
  .player-app .account-bar > div { font-size: .65rem; }
  .adventure-masthead { padding: 2rem 0 1.25rem; }
  .player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-choice { grid-template-columns: minmax(0, 1fr); }
  .player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-choice-art { aspect-ratio: 16 / 9; }
}

/* The optional mobile roll disclosure must not change desktop presentation. */
.check-roll-details { display: none; }

@media (max-width: 900px) {
  /* Spend phone width on prose, not repeated message chrome. Text sizes and
     line heights deliberately remain those of the desktop speech renderer. */
  .player-app #transcript { padding: .75rem; }
  .player-app #transcript .transcript-entry + .transcript-entry { margin-top: .5rem; }
  .player-app #transcript .transcript-spacer { height: .25rem; }
  .player-app #transcript .player-input { padding: .4rem .5rem; grid-template-columns: .8rem minmax(0, 1fr); }
  .player-app #transcript .speech { padding: .4rem .5rem .5rem; }
  .player-app #transcript .speech-with-portrait { grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; }
  .player-app #transcript .speech-portrait { width: 2rem; height: 2rem; }
  .player-app #transcript .speech-heading { flex-wrap: wrap; gap: .15rem .4rem; margin-bottom: .15rem; }
  .player-app #transcript .speech-continued { padding-bottom: .15rem; }
  .player-app #transcript .transcript-entry.speech-continuation { margin-top: 0; padding-top: .25rem; }
  .player-app #transcript .speech-continuation .speech-copy { grid-column: 2; }
  .player-app #transcript .speech-continuation .speech-portrait { display: none; }
  /* Retain the speaker/delivery in the accessibility tree for each quotation. */
  .player-app #transcript .speech-continuation .speech-heading {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .player-app #transcript .check-card { padding: .5rem; gap: .25rem; }
  .player-app #transcript .check-roll-desktop { display: none; }
  .player-app #transcript .check-roll-details { display: block; color: var(--muted); font-size: .78rem; }
  .player-app #transcript .check-roll-summary { min-height: 44px; padding-block: .65rem; cursor: pointer; }
  .player-app #transcript .check-roll-summary:focus-visible { outline: 2px solid var(--moss-bright); outline-offset: 2px; }
  .player-app #transcript .check-roll-details > .check-natural { padding-bottom: .4rem; }
}

/* Keep the adventure title in the first screen on older, narrower phones. */
@media (max-width: 375px) {
  .adventure-masthead { padding: 1.25rem 0 .75rem; }
  .adventure-masthead h1 { font-size: 1.8rem; }
  .elsewhere-tagline { margin-top: .75rem; font-size: .875rem; line-height: 1.6; }
  .library-intro { padding: .75rem 0; }
  .player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-choice-art { aspect-ratio: 2 / 1; }
  .player-app .bookshelf .adventure-book:only-child:not(.expanded) .adventure-choice > span:last-child { padding: 1rem; }
}

/* Phone play gives the reading surface priority; account and session controls live in Menu. */
#game-menu-toggle { display: none; }
#game-menu { width: min(24rem, calc(100vw - 2rem)); padding: 1rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); }
#game-menu > header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
#game-menu h2 { margin: 0; font: 400 1.5rem/1.2 Georgia, serif; }
#game-menu-content { display: grid; gap: 1rem; }
.player-app #game-menu .account-bar { display: flex; padding: 0 0 1rem; border-bottom: 1px solid var(--line); gap: .5rem; }
#game-menu .elsewhere-wordmark { display: none; }
#game-menu .account-bar > div { flex-basis: 100%; text-align: left; }
.player-app #game-menu .account-bar #account-usage { display: block; }
#game-menu .session-actions { display: grid; gap: .5rem; }
#game-menu .session-actions button { min-height: 44px; text-align: left; }
#game-menu .save-status { display: block; white-space: normal; }
@media (max-width: 900px) {
  .player-app .game > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; padding: calc(.45rem + max(0px, calc(var(--safe-top) - var(--play-top, 0px)))) .75rem .45rem; }
  .player-app .game > header > div:first-child { grid-column: 1; }
  .player-app .game > header .eyebrow { display: none; }
  .player-app .game > header h1 { font-size: 1rem; }
  .player-app .game > header .status-block { grid-column: 1; grid-row: 2; width: auto; }
  .player-app .game > header .status { font-size: .7rem; }
  #game-menu-toggle { display: block; grid-column: 2; grid-row: 1 / 3; min-height: 44px; padding: .5rem .75rem; font-size: .8rem; }
  .player-app .game:not(.speech-targeted) .speech-context { display: none; }
  .player-app .game .command-form { padding: .4rem .5rem; }
  .player-app .game .command-form input { padding: .55rem .65rem; min-height: 44px; }
  .player-app .game .command-form button { min-height: 44px; padding: .55rem .8rem; }
  .player-app .play-tabs { padding: .2rem .4rem max(.2rem, calc(var(--safe-bottom) - var(--play-bottom-occlusion, 0px))); }
  .player-app .play-tabs button { min-height: 44px; padding: .35rem .2rem; }
}

@media (min-width: 901px) {
  .player-app:has(#game:not(.hidden)) > .account-bar {
    padding: .3rem clamp(1rem, 2.5vw, 2.5rem);
    gap: .65rem;
  }
  .player-app:has(#game:not(.hidden)) > .account-bar .elsewhere-wordmark {
    font-size: 1.8rem;
  }
  .player-app:has(#game:not(.hidden)) > .account-bar .quiet {
    min-height: 32px;
    padding: .3rem .65rem;
  }
}

/* Returning players continue first; the catalogue remains below their games. */
.player-app .landing-shell > .account-games { padding: clamp(1.25rem, 4vw, 3rem) 0 1.5rem; border-top: 0; }
.account-games h1 { margin: 0; font: 400 clamp(1.8rem, 4vw, 3rem)/1.15 Georgia, serif; }
.account-games > p { margin: .6rem 0 1.5rem; color: var(--muted); }
.has-current-games > .adventure-masthead { display: none; }
#account-game-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 1rem; }
#account-game-list .account-game { grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 1.25rem; padding: 1.25rem; background: var(--panel); border-color: var(--moss); }
.account-game img { width: 72px; height: 100px; object-fit: cover; border-radius: 4px; }
.account-game-copy { display: grid; gap: .4rem; min-width: 0; }
.account-game-copy strong { font: 400 1.4rem/1.25 Georgia, serif; overflow-wrap: anywhere; }
.account-game-copy > span { color: var(--ink); }
.account-game-continue { color: var(--on-accent); background: var(--moss); border-radius: 5px; padding: .75rem 1rem; white-space: nowrap; }
.game-history { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.game-history summary { cursor: pointer; color: var(--muted); padding: .75rem 0; }
@media (max-width: 600px) {
  #account-game-list .account-game { grid-template-columns: 56px minmax(0, 1fr); gap: .85rem; padding: 1rem; }
  .account-game img { width: 56px; height: 80px; }
  .account-game-copy strong { font-size: 1.15rem; }
  .account-game-continue { grid-column: 1 / -1; text-align: center; }
}

.player-app .current-room-lighting {
  margin: .4rem 0 0;
  color: var(--muted);
  font: .72rem/1.5 system-ui, sans-serif;
  letter-spacing: .015em;
}
.player-app .current-room-lighting::before {
  content: "";
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .65;
  vertical-align: .08em;
}

/* Lighting affects the artwork alone; labels, tokens, and controls retain contrast. */
body {
  --room-light-brightness: 1;
  --room-light-saturation: 1;
  --room-light-grayscale: 0;
}
body[data-room-light="dim"] {
  --room-light-brightness: .62;
  --room-light-saturation: .8;
}
body[data-room-light="dim"][data-room-vision="darkvision"] {
  --room-light-brightness: .8;
  --room-light-grayscale: 1;
}
body[data-room-light="dark"],
body[data-room-vision="same-line"] { --room-light-brightness: .2; }
#location-image,
.combat-room-image {
  filter: brightness(var(--room-light-brightness)) saturate(var(--room-light-saturation))
    grayscale(var(--room-light-grayscale));
  transition: filter 450ms ease-out;
}
.combat-room-image {
  filter: saturate(.82) contrast(1.04) brightness(.82)
    brightness(var(--room-light-brightness)) saturate(var(--room-light-saturation))
    grayscale(var(--room-light-grayscale));
}
body.room-active .scene-layer {
  filter: blur(8px) saturate(.92) contrast(1.02)
    brightness(var(--room-light-brightness)) saturate(var(--room-light-saturation))
    grayscale(var(--room-light-grayscale));
}
.scene-ambience {
  filter: brightness(var(--room-light-brightness)) grayscale(var(--room-light-grayscale));
}
/* Dim immediately so a newly entered dark room never flashes at full brightness. */
body[data-room-vision="same-line"] :is(#location-image, .combat-room-image, .scene-layer),
body[data-room-light="dark"] :is(#location-image, .combat-room-image, .scene-layer) {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  #location-image, .combat-room-image { transition: none; }
}

.account-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
#account-game-list .account-game-actions { grid-column: 2 / -1; }
.account-game-cancel { padding: .75rem 1rem; }
@media (max-width: 600px) {
  #account-game-list .account-game-actions { grid-column: 1 / -1; }
}

.band-terrain { display: block; max-width: 12rem; font-size: .7rem; line-height: 1.2; opacity: .85; }