/* Portfolio guidance stays within the existing outlined game UI. */
#instructions-modal.visible { transition-property: opacity; }
#instructions-modal.compact-intro .modal-content {
    width: min(1240px, calc(100% - 48px));
    padding: 64px 0 16px;
    max-height: calc(100dvh - 40px);
    text-align: center;
}
.intro-summary {
    max-width: 1000px;
    margin: 0 auto 40px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    line-height: 1.5;
    text-wrap: balance;
    text-shadow: 0 1px 12px #0008;
}
.intro-controls {
    --intro-key-width: 72px; --intro-key-height: 68px;
    --intro-shift-width: 128px; --intro-space-width: 240px; --intro-mouse-column: 160px;
    display: grid;
    grid-template-columns: max-content var(--intro-mouse-column);
    column-gap: var(--intro-key-width);
    justify-content: center;
    align-items: start;
}
.intro-keyboard { display: grid; grid-template-columns: calc(3 * var(--intro-key-width) + 16px) var(--intro-shift-width) var(--intro-space-width); gap: var(--intro-key-width); }
.intro-control { display: grid; grid-template-rows: calc(2 * var(--intro-key-height) + 8px) minmax(32px, auto); justify-items: center; gap: 18px; color: #fff; min-width: 0; }
.intro-control > span { font: 600 24px 'Caveat', 'Patrick Hand', cursive; }
.intro-control--mouse > span { line-height: 1.25; }
.intro-control kbd { display: grid; place-items: center; width: var(--intro-key-width); height: var(--intro-key-height); padding: 0; border: 1.5px solid #fffc; border-radius: 6px; background: transparent; color: #fff; font: 700 16px 'Space Grotesk', sans-serif; text-transform: uppercase; }
.intro-wasd { display: grid; grid-template-columns: repeat(3, var(--intro-key-width)); gap: 8px; }
.intro-wasd kbd:first-child { grid-column: 2; }
.intro-wasd kbd:nth-child(2) { grid-column: 1; }
.intro-symbol { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
.intro-keyboard .intro-symbol { align-items: flex-end; }
.intro-control .intro-key-shift { width: var(--intro-shift-width); }
.intro-control .intro-key-space { width: var(--intro-space-width); }
.intro-symbol .mouse-mark { position: relative; inset: auto; transform: none; width: var(--intro-key-width); height: calc(1.5 * var(--intro-key-height)); border-radius: calc(var(--intro-key-width) / 2); }
.intro-symbol .mouse-mark::before, .intro-symbol .mouse-mark::after { left: 50%; transform: translateX(-50%); }
.intro-symbol .mouse-mark::before { height: 26px; }
.intro-symbol .mouse-mark::after { top: 10px; width: 7px; height: 15px; }
.compact-intro .instructions-actions { margin-top: 58px; }
.start-btn:not(.ghost), .start-btn:not(.ghost):hover, .start-btn:not(.ghost):focus-visible { border-radius: 6px; background: var(--game-ui-surface-solid, #fff); color: var(--game-ui-text, #111416); }
.start-btn#skip-intro { border-radius: 999px; }
.start-btn:not(.ghost):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#skip-intro { position: fixed; bottom: 32px; right: 32px; z-index: 800; }
#skip-intro[hidden], #nearby-project-name[hidden], #reunion-message[hidden], #po-next-project[hidden], #reset-story-btn[hidden] { display: none; }
.stat-label { font-size: 12px; font-weight: 500; }
.counter-labels-hidden .stat-label { display: none; }
.map-legend { display: grid; grid-template-columns: repeat(2, max-content); gap: 5px 12px; font-size: 10px; }
.legend-dot.restored { background: #075b40; }
.legend-dot.crystal { background: #00cfff; }
.legend-memory { width: 6px; height: 6px; background: #ffd35a; border: 1px solid #fff; transform: rotate(45deg); margin: 0 2px; }
#visited-portals {
    top: var(--rail-top, 98px);
    bottom: 84px;
    transform: none;
    justify-content: safe center;
    overflow-y: auto;
    overflow-x: hidden;
    width: 240px;
    max-width: 32vw;
    padding: 8px 4px 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: #fff8 transparent;
}
#visited-portals .vp-btn { flex-shrink: 0; }
#visited-portals .vp-rail-label, #visited-portals.is-expanded .vp-rail-label { position: static; order: -1; writing-mode: horizontal-tb; transform: none; margin-bottom: 5px; line-height: 18px; }
#visited-portals .vp-tooltip { max-width: 170px; }
.tooltips-ready .vp-btn .vp-tooltip { display: none; }
.game-tooltip {
    position: fixed;
    inset: auto;
    margin: 0;
    z-index: 10000;
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    padding: 6px 10px;
    border: 1px solid var(--game-ui-border);
    border-radius: 6px;
    background: var(--game-ui-surface-solid);
    color: var(--game-ui-text);
    box-shadow: var(--game-ui-shadow);
    font: 500 12px/1.35 'Space Grotesk', sans-serif;
    text-align: left;
    overflow-wrap: anywhere;
    pointer-events: none;
}
.game-tooltip[hidden] { display: none; }
body:not(.world-ready) #visited-portals { visibility: hidden; }
#crystal-messages { flex-direction: column; max-height: min(46dvh, 450px); width: min(350px, calc(100vw - 32px)); }
.conversation-history { display: flex; flex-direction: column-reverse; min-height: 0; gap: 10px; overflow-y: auto; scrollbar-width: thin; pointer-events: auto; }
.conversation-history:empty { display: none; }
.crystal-msg { flex-shrink: 0; }
.crystal-msg-paw .lucide { width: 20px; height: 20px; }
.crystal-msg[data-message-key="journey-guide"] { order: -1; }
.cat-chat-hint { display: block; margin: 6px auto 0; border: 0; background: none; font-family: inherit; cursor: pointer; padding: 6px; pointer-events: auto; }
.cat-chat-count { display: none; color: #fff; font-size: 12px; text-align: center; margin-top: 5px; }
#cat-chat.open .cat-chat-count { display: block; }
#cat-chat.open .cat-chat-hint { display: none; }
.interaction-hint-rail { max-width: min(720px, calc(100vw - 100px)); }
#interact-hint { max-width: 440px; white-space: normal; overflow-wrap: anywhere; }
#nearby-project-name { position: fixed; left: 50%; transform: translateX(-50%); z-index: 100; max-width: min(520px, calc(100vw - 100px)); color: #fff; font-size: 17px; line-height: 1.3; text-align: center; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 8px #000c; pointer-events: none; }
#nearby-project-name[data-placement="below"] { bottom: calc(clamp(8rem, 22vh, 15rem) - 42px); }
#nearby-project-name[data-placement="top"] { top: 76px; max-width: 40vw; }
#nearby-project-name[data-placement="portal"] { transform: translate(-50%, -100%); }
#reunion-message { position: fixed; left: 50%; transform: translateX(-50%); z-index: 160; display: flex; gap: 14px; align-items: center; width: max-content; max-width: min(560px, calc(100vw - 100px)); padding: 16px; border: 1px solid white; border-radius: 8px; color: #fff; font-size: 18px; text-shadow: 0 1px 8px #0009; }
#reunion-message[data-placement="banner"] { top: 96px; }
#reunion-message[data-placement="caption"] { bottom: 96px; }
.memory-chapter { display: block; margin-top: 18px; font: 500 12px 'Space Grotesk', sans-serif; color: #5b584d; }
#project-overlay .po-footer { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
#project-overlay .po-footer button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
body:has(#instructions-modal.visible, #project-overlay.visible, #memory-overlay.visible, #emoji-modal.visible, #resume-drawer.is-open) #nearby-project-name,
body:has(#instructions-modal.visible, #project-overlay.visible, #memory-overlay.visible, #emoji-modal.visible) #reunion-message { visibility: hidden; }
body.resume-open #nearby-project-name, body.resume-open #reunion-message { visibility: hidden; }
@media (max-height: 700px) {
    .intro-summary { margin-bottom: 22px; }
    #instructions-modal.compact-intro .modal-content { padding: 36px 0 12px; }
    .compact-intro .instructions-actions { margin-top: 38px; }
    #mini-map { --mini-map-size: 128px; }
    #crystal-messages { max-height: 38dvh; width: 300px; }
    #visited-portals { justify-content: flex-start; }
}
@media (max-width: 1100px) {
    .intro-controls { --intro-key-width: 60px; --intro-key-height: 60px; --intro-shift-width: 112px; --intro-space-width: 200px; }
    .intro-summary { font-size: 22px; }
}
@media (min-width: 769px) and (max-width: 900px) {
    .intro-controls { --intro-key-width: 52px; --intro-key-height: 56px; --intro-shift-width: 96px; --intro-space-width: 160px; --intro-mouse-column: 128px; }
}
@media (max-width: 768px) {
    .intro-controls { grid-template-columns: 1fr; gap: 24px; }
    .intro-keyboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .intro-control--move { grid-column: 1 / -1; }
    #skip-intro, #nearby-project-name, #reunion-message { display: none; }
}