/* Local CLIENT-015 / GAME-CR-006 candidate. Presentation only; no fixed-height
   clipping. Enlarged and narrow layouts deliberately allow vertical scrolling. */
.prototype-hub { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding-top: .5rem; }
.prototype-hub .language-picker, .prototype-hub-copy { margin: 0; }
.prototype-hub .language-picker { justify-content: flex-start; }
.study-entry-navigation { display: flex; flex-wrap: wrap; gap: .5rem; }
.study-entry-navigation a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem .7rem; border: 1px solid #5d7dc4; border-radius: .65rem; background: #10284e; color: #f8fbff; font-size: .85rem; font-weight: 700; text-decoration: none; }
.study-entry-navigation a:hover { background: #193b68; }
.study-entry-navigation a:focus-visible { outline: 3px solid #ffdc63; outline-offset: 3px; }
.prototype-navigation { margin-left: auto; }
.prototype-navigation a { padding: .35rem .65rem; }
.game-shell { padding-top: .5rem; padding-bottom: 1rem; }
.game-header { position: sticky; top: 0; z-index: 5; padding: .45rem .85rem; gap: .7rem; background: #0d1e3a; }
.game-header h1 { font-size: 1.7rem; }
.game-header .eyebrow { font-size: .7rem; letter-spacing: .05em; }
.game-header .button { padding: .45rem .8rem; }
.objective-panel { margin-top: .4rem; padding: .5rem .85rem; gap: .7rem; }
.objective-panel h2 { font-size: 1.15rem; margin: 0; }
.objective-panel .eyebrow { font-size: .7rem; }
.game-stats span { padding: .35rem .55rem; white-space: nowrap; }
.accessibility-bar { background: transparent; border: 0; margin-top: .2rem; padding: .2rem 0; }
.accessibility-bar button { padding: .35rem .7rem; min-height: 2.45rem; font-size: .85rem; }
.help-panel { position: fixed; z-index: 8; inset: auto 1rem 1rem auto; max-height: min(70dvh, calc(100dvh - 10rem)); overflow-y: auto; width: min(38rem, calc(100% - 2rem)); box-shadow: 0 .5rem 3rem #020817; }
.stop-dialog { max-height: 90dvh; overflow-y: auto; }

.crystal-workspace { margin-top: .4rem; }
.crystal-coach { min-width: 0; }
.crystal-workspace .tutorial-card { margin-top: 0; padding: .7rem .85rem; gap: .5rem; }
.crystal-workspace .tutorial-card h2 { font-size: 1.15em; }
.crystal-workspace .tutorial-card p { margin-bottom: .35rem; }
.crystal-workspace .tutorial-skip { padding: .35rem .7rem; font-size: .85em; }
.crystal-workspace .tutorial-tip { margin-top: .4rem; padding: .35rem .55rem; font-size: .9em; }
.crystal-workspace .crystal-board-wrap { margin: 0 auto; }
.crystal-workspace .board-instructions { font-size: .8em; margin-top: .4rem; }
.crystal-workspace .turn-actions { justify-content: stretch; align-content: start; gap: .45rem; padding: .7rem .85rem; border: 1px solid #486589; }
.crystal-workspace .turn-actions .selection-cue { text-align: left; font-size: .9em; }
.crystal-workspace .turn-actions > .button-primary { flex: 1; }
.pulse-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .5rem; border-top: 1px solid #486589; }
.pulse-actions p { flex-basis: 100%; text-align: left; font-size: .85em; color: #ddd0ff; }
.pulse-actions .button { flex: 1; padding: .45rem .65rem; }
.crystal-cell.is-pulse-target { outline: 3px dashed #fff; outline-offset: -5px; }
.pulse-target-marker { position: absolute; top: 1px; left: 2px; min-width: 1rem; border-radius: .2rem; background: #211b3d; color: #fff; font-size: .8rem; font-weight: 900; line-height: 1; }
.crystal-workspace .relay-stage { margin: 0; padding: .6rem .85rem; gap: .8rem; }
.crystal-workspace .relay-stage h2 { font-size: 1em; }
.crystal-workspace .relay-visual { flex-shrink: 0; gap: .4rem; }
.crystal-workspace .relay-ring { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-width: .2rem; font-size: 1rem; font-weight: 850; color: #b3c6df; }
.crystal-workspace .relay-ring.is-lit { color: #072d24; background: #64e4c0; }
.crystal-workspace .relay-stage.is-repaired { border-color: #64e4c0; background: #10372e; }
.crystal-workspace .journey-progress { margin: 0; padding: .3rem; }
.crystal-workspace .journey-progress li { padding: .3rem; font-size: .75em; }
.crystal-workspace .sector-complete { margin: 0; width: 100%; max-width: none; }
.crystal-workspace.is-complete .crystal-coach,
.crystal-workspace.is-complete .turn-actions { display: none; }

@media (min-width: 1050px) {
    .game-shell:not(.is-enlarged) .crystal-workspace {
        display: grid;
        grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
        grid-template-areas: "board coach" "board actions" "board repair" "board progress" "outcome outcome";
        gap: .55rem 1.25rem;
        align-items: start;
    }
    .game-shell:not(.is-enlarged) .crystal-board-wrap { grid-area: board; width: min(100%, 23rem); }
    .game-shell:not(.is-enlarged) .crystal-workspace.is-complete { grid-template-areas: "board outcome" "board repair" "board progress"; }
    .game-shell:not(.is-enlarged) .crystal-board { padding: .6rem; gap: .25rem; }
    .game-shell:not(.is-enlarged) .crystal-row { gap: .25rem; }
    .game-shell:not(.is-enlarged) .crystal-symbol { font-size: 1.8rem; }
    .crystal-coach { grid-area: coach; }
    .crystal-workspace .turn-actions { grid-area: actions; }
    .crystal-workspace .relay-stage { grid-area: repair; }
    .crystal-workspace .journey-progress { grid-area: progress; }
    .crystal-workspace .sector-complete { grid-area: outcome; }

    /* The board components own their map geometry and action docks. */
    .game-shell-skyline:not(.is-enlarged) #game-board,
    .game-shell-neon:not(.is-enlarged) #game-board {
        display: grid; grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr);
        gap: .55rem 1rem; align-items: start;
    }
    .game-shell-skyline:not(.is-enlarged) #game-board {
        grid-template-areas: "board coach" "board actions" "banner progress" "assistance assistance" "outcome outcome";
    }
    .game-shell-skyline:not(.is-enlarged) .skyline-training-dock { display: contents; }
    .game-shell-skyline:not(.is-enlarged) .skyline-board-wrap { grid-area: board; padding: .65rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-board-heading { grid-template-columns: 1fr; gap: .3rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-board-heading h2 { font-size: 1.05rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-board-heading .board-instructions { text-align: left; font-size: .75rem; margin: 0; }
    .game-shell-skyline:not(.is-enlarged) .skyline-route-panel { grid-area: actions; margin: 0; padding: .65rem; font-size: .85rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-route-summary { flex-direction: column; gap: .4rem; align-items: start; }
    .game-shell-skyline:not(.is-enlarged) .skyline-route-stats div { padding: .25rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-route-preview { margin: .45rem 0; }
    .game-shell-skyline:not(.is-enlarged) .skyline-route-message { margin-bottom: .5rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-route-actions { gap: .35rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-route-summary { margin-bottom: .5rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-route-actions .button { padding: .35rem .5rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-city-progress { grid-area: banner; margin: 0; padding: .45rem .65rem; }
    .game-shell-skyline:not(.is-enlarged) .skyline-city-progress h2 { font-size: 1rem; }
    .game-shell-skyline:not(.is-enlarged) .tutorial-card,
    .game-shell-neon:not(.is-enlarged) .neon-tutorial { grid-area: coach; margin: 0; padding: .65rem; grid-template-columns: 1fr; gap: .45rem; }
    .game-shell-skyline:not(.is-enlarged) .tutorial-card h2,
    .game-shell-neon:not(.is-enlarged) .neon-tutorial h2 { font-size: 1.05rem; }
    .game-shell-skyline:not(.is-enlarged) .tutorial-card p,
    .game-shell-neon:not(.is-enlarged) .neon-tutorial p { font-size: .9rem; }
    .game-shell-skyline:not(.is-enlarged) .journey-progress,
    .game-shell-neon:not(.is-enlarged) .journey-progress { grid-area: progress; margin: 0; font-size: .8rem; padding: .4rem; }
    .game-shell-skyline:not(.is-enlarged) .assistance-card { grid-area: assistance; }
    .game-shell-skyline:not(.is-enlarged) .skyline-complete,
    .game-shell-neon:not(.is-enlarged) .neon-complete { grid-area: outcome; width: 100%; margin: 0; }
    .game-shell-neon:not(.is-enlarged) #game-board { grid-template-areas: "board coach" "board settings" "board progress" "banner banner" "guide guide" "outcome outcome"; }
    .game-shell-neon:not(.is-enlarged) .neon-board-panel { grid-area: board; margin: 0; padding: .65rem; }
    .game-shell-neon:not(.is-enlarged) .neon-board-heading { grid-template-columns: 1fr; gap: .2rem; }
    .game-shell-neon:not(.is-enlarged) .neon-board-heading h2 { font-size: 1.05rem; }
    .game-shell-neon:not(.is-enlarged) .neon-board-heading .board-instructions { text-align: left; margin: 0; font-size: .75rem; }
    .game-shell-neon:not(.is-enlarged) .neon-city { width: min(100%, 24rem); margin-top: .4rem; }
    .game-shell-neon:not(.is-enlarged) .neon-objective-legend,
    .game-shell-neon:not(.is-enlarged) .neon-route-legend { font-size: .7rem; margin-top: .35rem; gap: .3rem .7rem; }
    .game-shell-neon:not(.is-enlarged) .neon-controls-card { grid-area: settings; margin: 0; padding: .65rem; grid-template-columns: 1fr; font-size: .85rem; }
    .game-shell-neon:not(.is-enlarged) .neon-controls-card h2 { font-size: 1rem; }
    .game-shell-neon:not(.is-enlarged) .neon-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .game-shell-neon:not(.is-enlarged) .neon-shift-banner { grid-area: banner; margin: 0; padding: .45rem .65rem; }
    .game-shell-neon:not(.is-enlarged) .neon-shift-banner h2 { font-size: 1rem; }
    .game-shell-neon:not(.is-enlarged) .neon-guide-card { grid-area: guide; }
    .game-overlay { grid-column: 1 / -1; width: 100%; }
}

.game-shell.is-enlarged .crystal-workspace { display: flex; flex-direction: column; gap: .75rem; }
.game-shell.is-enlarged .crystal-workspace > * { width: 100%; }
.game-shell.is-enlarged .crystal-workspace .crystal-board-wrap { width: min(100%, 48rem); }
@media (max-width: 1049px) {
    .crystal-workspace { display: flex; flex-direction: column; gap: .75rem; }
    .prototype-navigation { margin-left: 0; }
    .crystal-board-wrap { width: min(100%, 39rem); }
}
@media (max-width: 700px) {
    .game-header { padding: .5rem; gap: .4rem; }
    .game-header h1 { font-size: 1.4rem; }
    .game-header-actions .button { min-height: 2.75rem; }
    .objective-panel { padding: .65rem; }
    .prototype-hub-copy { display: none; }
    .game-shell .pulse-actions .button { flex-basis: 100%; }
}