/* A quieter home and library; no rules apply to game details or gameplay. */
@media (min-width: 701px) {
  #console-menu:is([data-state="welcome"], [data-state="browse"]) {
    --desktop-cover-height: min(32vw, calc(100dvh - 300px), 700px);
    --desktop-cover-top: max(120px, calc((100dvh - var(--desktop-cover-height) - 92px) / 2));
  }
  #console-menu[data-state="welcome"] .console-vignette { background: linear-gradient(90deg, #030a17c9, #030a1740 48%, transparent 70%); }
  #console-menu:is([data-state="welcome"], [data-state="browse"])::before {
    background: linear-gradient(180deg, #060e1be6, #07101f75 45%, #040914bb);
  }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-header {
    height: 104px; padding: 24px 4%; gap: 20px; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    background: linear-gradient(180deg, #060e1ba8, transparent);
  }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-brand { gap: 12px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-brand > b { font-size: clamp(20px, 2vw, 29px); }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .station-mark { width: 40px; height: 40px; border-width: 6px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .station-mark::after { width: 10px; height: 10px; left: 9px; top: 9px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-tabs {
    gap: 4px; padding: 4px; border: 1px solid #b8e6ff26; border-radius: 18px;
    background: #152235b3; box-shadow: inset 0 1px #ffffff0c;
  }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-tab {
    width: 56px; height: 44px; border: 0; border-radius: 12px;
    background: transparent; box-shadow: none;
  }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-tab.active { background: #62d9ff20; box-shadow: inset 0 -2px #62d9ff; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-tab:hover,
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-tab:focus-visible { background: #ffffff15; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-tab > img { width: 32px; height: 32px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-profile { gap: 8px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-profile i { margin: 0 5px; height: 22px; opacity: .3; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-profile time { font-size: 17px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) #menu-fullscreen { width: 44px; height: 44px; }
  #console-menu[data-state="welcome"] .welcome-copy {
    top: 50%; left: 6%; right: auto; width: 34%; max-width: 520px;
    max-height: calc(100dvh - 220px); transform: translateY(-50%);
    overflow: auto; scrollbar-width: thin;
  }
  #console-menu[data-state="welcome"] .welcome-copy::before,
  #console-menu[data-state="welcome"] .welcome-copy .console-eyebrow,
  #console-menu[data-state="welcome"] .welcome-copy > p:not(#console-error),
  #console-menu[data-state="welcome"] .welcome-subline,
  #console-menu[data-state="welcome"] .welcome-steps { display: none; }
  #console-menu[data-state="welcome"] .welcome-copy h1 {
    margin: 0 0 30px; font-size: clamp(48px, 5.2vw, 88px); line-height: .98; letter-spacing: -.01em;
  }
  #console-menu[data-state="welcome"] .welcome-actions { margin: 0 0 12px; gap: 6px; }
  #console-menu[data-state="welcome"] .console-cta {
    min-height: 58px; padding: 14px 22px; font-size: clamp(20px, 1.8vw, 27px);
    border-radius: 14px; box-shadow: 0 8px 28px #51d5ff24;
  }
  #console-menu[data-state="welcome"] .console-link { min-height: 44px; font-size: 13px; color: #c4d5e2; padding: 10px 2px; }
  #console-menu[data-state="welcome"] .camera-local { font-size: 11px; color: #9bb4c5; }
  #console-menu[data-state="welcome"] #console-error { color: #ffc895; font-size: 13px; }
  #console-menu[data-state="welcome"] .carousel {
    left: 35%; right: 2%; top: var(--desktop-cover-top); height: var(--desktop-cover-height); --center: 50%;
  }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .cover-card[data-offset="0"] { transform: translateX(-50%) scale(1.025); }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .cover-card[data-offset="-1"] { transform: translateX(-50%) translateX(-90%) translateY(5%) rotateY(12deg) scale(.72); }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .cover-card[data-offset="1"] { transform: translateX(-50%) translateX(90%) translateY(5%) rotateY(-12deg) scale(.72); }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .cover-card[data-offset="-2"],
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .cover-card[data-offset="2"] { opacity: 0; pointer-events: none; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .game-medallion.cover-card {
    width: calc(var(--desktop-cover-height) * .75);
    height: var(--desktop-cover-height); aspect-ratio: 3 / 4; border-radius: 20px;
  }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .cover-card[data-offset="0"] {
    border-width: 2px; box-shadow: 0 0 0 1px #c3f3ff, 0 0 32px #24c4fb45, 0 20px 45px #0009;
  }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .cover-camera,
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .cover-corner,
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .selection-title .console-eyebrow,
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .selection-title p,
  #console-menu:is([data-state="welcome"], [data-state="browse"]) #menu-instruction { display: none; }
  #console-menu[data-state="welcome"] .selection-title { left: 35%; right: 2%; top: calc(var(--desktop-cover-top) + var(--desktop-cover-height) * 1.025 + 14px); bottom: auto; width: auto; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .selection-title h2 { margin: 0; font-size: clamp(27px, 2.5vw, 38px); line-height: 1.1; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .carousel-dots { margin-top: 8px; gap: 0; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .carousel-dots button { position: relative; width: 26px; height: 26px; background: none; box-shadow: none; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .carousel-dots button::after { content: ''; position: absolute; width: 6px; height: 6px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 9px; background: #ffffff55; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .carousel-dots button.active::after { width: 18px; background: #62d9ff; box-shadow: 0 0 12px #62d9ff70; }
  #console-menu[data-state="browse"] .carousel { top: var(--desktop-cover-top); height: var(--desktop-cover-height); }
  #console-menu[data-state="browse"] .selection-title { top: calc(var(--desktop-cover-top) + var(--desktop-cover-height) * 1.025 + 14px); bottom: auto; }
  #console-menu[data-state="browse"] .camera-hint { top: 112px; padding: 0; border: 0; background: none; box-shadow: none; font-size: 12px; color: #b8d3e2; }
  #console-menu[data-state="browse"] .nav-prev b,
  #console-menu[data-state="browse"] .nav-next b { display: none; }
  #console-menu[data-state="browse"] .motion-orb { opacity: .85; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-footer { height: 58px; font-size: 10px; letter-spacing: .06em; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) #console-camera-state { min-height: 44px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .key-hints { font-size: 9px; opacity: .7; }
  #console-menu[data-state="welcome"] .key-hints { display: none; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-header { padding-inline: 24px; gap: 12px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-tab { width: 44px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-brand { gap: 8px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-profile { gap: 4px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .profile-entry { gap: 6px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) #menu-profile-name { max-width: 65px; overflow: hidden; text-overflow: ellipsis; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .profile-avatar { width: 30px; height: 30px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-profile i { margin: 0; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-profile time { font-size: 14px; }
  #console-menu[data-state="welcome"] .welcome-copy { width: 36%; left: 4%; }
  #console-menu[data-state="welcome"] .welcome-copy h1 { font-size: clamp(40px, 5.2vw, 57px); }
  #console-menu[data-state="welcome"] .console-cta { font-size: 20px; padding-inline: 14px; gap: 12px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .carousel-dots button { width: 24px; }
  #console-menu[data-state="browse"] .key-hints { display: none; }
}
@media (min-width: 901px) and (min-height: 880px) {
  #console-menu[data-state="welcome"] .welcome-copy {
    width: 30%; max-width: 590px; max-height: calc(100dvh - 180px);
  }
  #console-menu[data-state="welcome"] .welcome-subline,
  #console-menu[data-state="welcome"] .welcome-copy > p:not(#console-error),
  #console-menu[data-state="welcome"] .welcome-steps { display: flex; }
  #console-menu[data-state="welcome"] .welcome-subline { display: block; font-size: clamp(22px, 1.8vw, 34px); }
  #console-menu[data-state="welcome"] .welcome-copy > p:not(#console-error) { display: block; font-size: clamp(15px, 1.03vw, 20px); line-height: 1.34; margin: 10px 0; }
  #console-menu[data-state="welcome"] .welcome-steps { margin: 14px 0 12px; }
  #console-menu[data-state="welcome"] .welcome-steps span { font-size: clamp(11px, .82vw, 15px); }
  #console-menu[data-state="welcome"] .welcome-copy h1 { margin-bottom: 16px; }
}
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) and (min-height: 1050px) {
  #console-menu[data-state="welcome"] { --desktop-cover-height: min(48vw, calc(100dvh - 690px), 430px); --desktop-cover-top: 560px; }
  #console-menu[data-state="browse"] { --desktop-cover-height: min(55vw, calc(100dvh - 350px), 540px); --desktop-cover-top: max(165px, calc((100dvh - var(--desktop-cover-height) - 100px) / 2)); }
  #console-menu[data-state="welcome"] .welcome-copy {
    top: 125px; left: 5%; right: 5%; width: 90%; max-width: none;
    max-height: none; transform: none; overflow: visible;
  }
  #console-menu[data-state="welcome"] .welcome-copy h1 { font-size: clamp(50px, 6vw, 68px); margin-bottom: 12px; }
  #console-menu[data-state="welcome"] .welcome-subline { display: block; font-size: 23px; }
  #console-menu[data-state="welcome"] .welcome-copy > p:not(#console-error) { display: block; max-width: 630px; font-size: 15px; line-height: 1.3; margin: 7px 0; }
  #console-menu[data-state="welcome"] .welcome-steps { display: flex; max-width: 650px; margin: 12px 0 8px; }
  #console-menu[data-state="welcome"] .welcome-steps span { font-size: 12px; }
  #console-menu[data-state="welcome"] .carousel { left: 0; right: 0; }
  #console-menu[data-state="welcome"] .selection-title { left: 0; right: 0; }
  #console-menu[data-state="browse"] .cover-card[data-offset="-1"] { transform: translateX(-50%) translateX(-78%) translateY(5%) rotateY(12deg) scale(.6); }
  #console-menu[data-state="browse"] .cover-card[data-offset="1"] { transform: translateX(-50%) translateX(78%) translateY(5%) rotateY(-12deg) scale(.6); }
}
@media (min-width: 2100px) and (min-height: 880px) {
  #console-menu[data-state="welcome"] .welcome-copy h1 { font-size: clamp(88px, 4.6vw, 124px); }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .selection-title h2 { font-size: clamp(38px, 2.2vw, 54px); }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .console-brand > b { font-size: clamp(29px, 1.5vw, 42px); }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) .station-mark { width: 50px; height: 50px; }
}
@media (min-width: 701px) and (max-height: 650px) {
  #console-menu[data-state="welcome"] .welcome-copy { max-height: calc(100dvh - 150px); }
  #console-menu[data-state="welcome"] .welcome-copy h1 { font-size: clamp(32px, 8vh, 50px); margin-bottom: 18px; }
  #console-menu[data-state="welcome"] .console-cta { min-height: 48px; }
  #console-menu:is([data-state="welcome"], [data-state="browse"]) { --desktop-cover-height: min(32vw, calc(100dvh - 200px), 700px); --desktop-cover-top: 105px; }
  #console-menu[data-state="browse"] .camera-hint { top: 100px; font-size: 10px; }
}