/* ASTRA GO — observatory typography and instrument surfaces.
   Layout and hit targets are independent of the Three.js playing surface. */
@font-face {
  font-family: Orbitron;
  src: url('./fonts/Orbitron-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

.go-page {
  --display: Orbitron, 'Noto Sans JP', sans-serif;
  --ink: #edf3f8;
  --muted: #a0b0bf;
  --line: #b4cddd30;
  --gold: #efb577;
  --blue: #a8d8ed;
  --cyan: #a8d8ed;
  --violet: #a8d8ed;
  --surface: linear-gradient(145deg, #111c26f5, #080f18f5);
  --edge: #a5c2d442;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.go-page :is(button, select, input) { font-family: var(--sans); }
.go-page :is(h2, h3, summary) { font-weight: 600; }
.go-page h2 { text-wrap: balance; }
.go-page :is(button, a, select, summary, input):focus-visible {
  outline: 2px solid #caedff;
  outline-offset: 4px;
}
.go-page button:not(.intersection) {
  border-radius: 3px;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.go-page button:not(.intersection):disabled { opacity: .48; cursor: not-allowed; }
.go-page button:not(.intersection):not(:disabled):hover {
  border-color: #c4e4f4a6;
  box-shadow: inset 0 0 22px #a5d4f00b;
}
.go-page :is(.eyebrow, .micro, .panel-label, .hero-index, .edition,
  .masthead nav, .hole-coordinate, .guide-number, .footer-title,
  .room-heading > span, .board-toolbar > span, .sound-panel h3 span,
  .game-actions button span, .launch-game span, .book-empty-view) {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .09em;
}

/* Wordmark and a quiet, high-contrast opening view. */
.go-page .masthead { height: 88px; background: transparent; }
.go-page .wordmark { font: 600 23px var(--display); letter-spacing: .13em; gap: 11px; }
.go-page .wordmark b { color: var(--gold); font-weight: 500; }
.go-page .edition { font-size: 9px; color: #a6b4c2; }
.go-page .brand-orbit { border-color: #afc6d7; box-shadow: 0 0 20px #b6dff015; }
.go-page .masthead nav { font-size: 12px; gap: 28px; }
.go-page .masthead nav a { border-bottom: 1px solid transparent; }
.go-page .masthead nav a.active { color: #ffd7a7; border-bottom-color: #eeb879; }
.go-page .hero { min-height: 390px; }
.go-page .hero-copy { padding: 38px 0 48px; }
.go-page .hero .eyebrow { font-size: 11px; color: #c5b198; }
.go-page h1 {
  font-family: var(--sans);
  font-size: clamp(38px, 4.2vw, 54px);
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 23px 0 22px;
  text-shadow: 0 3px 28px #000b;
}
.go-page h1 span { color: #e9c39a; }
.go-page .lead { font-size: 15px; line-height: 2.05; letter-spacing: .07em; color: #b5c1cd; }
.go-page .hero-index { font-size: 10px; letter-spacing: .18em; }
.go-page .hole-coordinate {
  font-size: 12px; line-height: 2.2;
}
.go-page .hole-coordinate strong {
  display: block; font: 400 17px/2 var(--sans); letter-spacing: .1em;
}
.go-page .room-switch { gap: 8px; margin-bottom: 18px; }
.go-page .room-switch [role=tab] {
  position: relative; min-width: 140px; padding: 15px 22px;
  font-size: 18px; font-weight: 600; letter-spacing: .12em;
  border-bottom-width: 1px; color: #a6b6c6;
}
.go-page .room-switch [role=tab][aria-selected=true] {
  color: #e3f5ff; border-bottom-color: #b8e4f8;
  background: linear-gradient(0deg, #a3d5ed16, transparent);
}
.go-page .room-heading { padding: 8px 0 21px; border-top: 0; }
.go-page .room-heading h2 { font-size: 16px; letter-spacing: .08em; font-weight: 500; }
.go-page .room-heading > span { font-size: 10px; }

/* New universe first, players in the right rail; actions stay below the board.
   DOM order also puts setup before the board on a small screen. */
.go-page .game-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-rows: auto 1fr;
  gap: 18px 24px;
  align-items: start;
}
.go-page .room-setup { grid-column: 2; grid-row: 1; min-width: 0; }
.go-page .board-column { grid-column: 1; grid-row: 1 / span 2; }
.go-page .side-panel { grid-column: 2; grid-row: 2; display: block; padding: 0; }
.go-page .launch-game {
  width: 100%; min-height: 76px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 19px 20px; margin-bottom: 16px;
  background: linear-gradient(110deg, #493426e6, #131b23f5);
  border: 1px solid #c79762a6; color: #ffe0b8;
  font-size: 20px; font-weight: 600; letter-spacing: .08em;
  box-shadow: inset 0 1px #ffe5c321, 0 8px 28px #0005;
}
.go-page .launch-game span { font-size: 10px; color: #d7b996; white-space: nowrap; }
.go-page .launch-game:not(:disabled):hover { border-color: #ffd6a1; background: #45372a; }
.go-page .player-lineup { grid-template-columns: minmax(0,1fr); gap: 10px; margin: 0; }
.go-page .player-lineup .player-card {
  grid-template-columns: 86px minmax(0,1fr) 34px; gap: 5px;
  padding: 15px 13px 15px 0; border-radius: 3px;
  background: var(--surface); border: 1px solid var(--edge);
}
.go-page .player-lineup .player-identity { padding-top: 0; }
.go-page .player-lineup .stellar-portrait { width: 86px; height: 82px; }
.go-page .player-lineup .micro { font-family: var(--display); font-size: 10px; letter-spacing: .07em; }
.go-page .player-lineup h3 { font-size: 19px; font-weight: 600; letter-spacing: .01em; margin: 6px 0; }
.go-page .player-lineup .player-role { font-size: 12px; color: #a8bac9; }
.go-page .player-lineup .captures { position: static; display: flex; flex-direction: column; gap: 5px; }
.go-page .player-lineup .captures strong { font: 400 24px var(--display); }
.go-page .player-lineup .captures span { font-size: 11px; }
.go-page .player-lineup .active-player {
  border-color: #dc9d6094; box-shadow: inset 2px 0 #efb577;
  background: linear-gradient(115deg, #493022c7, #0a1420f5 75%);
}
.go-page .player-lineup .white-player.active-player {
  border-color: #a8d8ed94; box-shadow: inset 2px 0 #a8d8ed;
  background: linear-gradient(115deg, #264450c7, #0a1420f5 75%);
}
.go-page .game-actions { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.go-page .game-actions button { font-weight: 500; min-height: 66px; border-color: var(--edge); background: #0e1a25; }
.go-page .game-actions button span { margin-top: 7px; color: #9eb3c5; }
.go-page .game-actions #resign { margin-left: 0; color: #cdbcb1; border-color: #99877850; background: #171d24; }

/* One material for the board housing, archive, controls and dialogs. */
.go-page .board-column,
.go-page .side-panel :is(.record-panel, .sound-panel, .transmission, .score-panel, .tip-bar),
.go-page :is(.book-save-bar, .book-viewer, dialog) {
  border: 1px solid var(--edge); border-radius: 3px; background: var(--surface);
  box-shadow: inset 0 1px #deeffb0c, 0 14px 35px #0004;
}
.go-page .board-column { padding: 18px; }
.go-page .board-toolbar { padding: 6px 2px 16px; }
.go-page .board-toolbar p { color: #e4c298; font-weight: 500; }
.go-page .board-frame { border-color: #98bfd354; }
.go-page .side-panel .panel-label { margin: 0 0 10px; font-size: 10px; }
.go-page .side-panel .transmission { border-left: 2px solid #d6a974; }
.go-page .side-panel .transmission .micro { font-size: 9px; color: #d1b18b; }
.go-page .side-panel .transmission > p:nth-child(2) { font-weight: 400; font-size: 15px; line-height: 2; }
.go-page :is(.record-panel summary, .sound-panel h3) { letter-spacing: .05em; font-weight: 600; }
.go-page :is(.record-panel summary > span, .sound-panel h3 span) { color: #a1bbce; }
.go-page :is(.record-actions button, .save-to-book, .settings button, .audio-check button,
  .book-save-bar button, .book-games button, .book-list-heading button, .book-replay-controls button,
  .dialog-actions button, .view-switch button, .camera-controls button) {
  border-radius: 3px; border-color: var(--edge); background: #12212e; color: #dbeaf5;
}
.go-page :is(.save-to-book, .book-save-bar button) { background: #1b303e; color: #d4ecf8; }
.go-page .settings button[aria-pressed=true], .go-page .view-switch button[aria-pressed=true] {
  background: #233a46; border-color: #a8d8ed80; color: #e0f5ff;
  box-shadow: inset 0 -2px #a8d8ed80;
}
.go-page .settings #resign { color: #c5b4ad; background: #191d24; border-color: #88796d50; }
.go-page .room-music { padding-top: 0; border-top: 0; margin-bottom: 16px; }
.go-page .music-title > span { color: #b4d6e8; }
.go-page .room-music select, .go-page dialog select {
  background: #0d1b27; border: 1px solid #99bac65e; border-radius: 3px;
  color: #e0edf5; font-weight: 500; padding-inline: 12px;
}
.go-page .room-music #bgm-toggle { border-radius: 3px; background: #203947; border-color: #97c7d37a; }
.go-page .room-music #bgm-toggle[aria-pressed=true] { background: #324436; border-color: #b9d3aa80; color: #e5f1dc; }
.go-page :is(.room-music input[type=range], .ambient-controls input, .book-scrub input) { accent-color: #b1d7e7; }
.go-page .music-info .music-status { color: #a0b5c5; }
.go-page .sound-panel h3 span { font-size: 9px; }
.go-page .agent-entry .record-actions a { background: #14232f; border-color: var(--edge); border-radius: 3px; }
.go-page .agent-entry .record-actions a:hover { border-color: #bddcea; }

.go-page .book-heading .eyebrow { color: #bccee0; }
.go-page .book-heading h2, .go-page .book-viewer h3 { font-weight: 600; letter-spacing: .06em; }
.go-page .book-games button[aria-pressed=true] { background: #233b49; border-color: #a8d8ed8c; box-shadow: inset 2px 0 #b8e2f1; }
.go-page .book-games strong { font-weight: 600; }
.go-page .book-games span { color: #bacedd; }
.go-page .book-empty-view { color: #a0bdcd; font-size: 11px; }
.go-page .book-empty-view span { font-weight: 400; }
.go-page .book-board-frame { border-radius: 1px; }
.go-page dialog { border-top: 2px solid #e1b581; }
.go-page dialog h2 { font-weight: 600; letter-spacing: .06em; }
.go-page .dialog-actions .primary { background: #3b3027; border-color: #c09b7390; color: #ffe0b8; }
.go-page .dialog-actions { flex-wrap: wrap; }
.go-page .side-panel .tip-title { font-weight: 600; letter-spacing: .16em; color: #ecdfcd; }
.go-page .side-panel .tip-bar { grid-template-columns: 54px minmax(0,1fr); }
.go-page .side-panel .tip-avatar { width: 54px; height: 54px; background: transparent; align-self: center; }
.go-page .tip-actions > a { background: #1b2f3e; border: 1px solid var(--edge); border-radius: 3px; font-weight: 500; }
.go-page .tip-actions > a.tip-agent { background: #242a30; border-color: #b7a68d57; }
.go-page .tip-actions > a:hover { border-color: #c3d8e7; }
.go-page .agent-shortcut button { border-radius: 3px; }
.go-page .support-english { color: #a9b8c4; }
.go-page .field-guide { gap: 28px; padding-block: 40px; }
.go-page .field-guide article { padding-left: 17px; border-left: 1px solid var(--line); }
.go-page .guide-title h2 { font-weight: 500; }
.go-page .guide-number { color: #dcba91; font-size: 12px; }
.go-page .field-guide h3 { font-weight: 600; }
.go-page .field-guide article p { color: #adbdca; }
.go-page .go-footer { padding-block: 28px; }
.go-page .footer-title { font-size: 12px; color: #c0d2e1; line-height: 2; letter-spacing: .08em; }
.go-page .footer-meta { color: #a1b5c5; font-size: 13px; margin-top: 7px; }
.go-page .footer-meta time { font: 10px var(--display); letter-spacing: .08em; }

@media (max-width: 1100px) and (min-width: 961px) {
  .go-page .game-layout { grid-template-columns: minmax(0,1fr) 310px; gap: 18px; }
  .go-page .player-lineup .player-card { grid-template-columns: 76px minmax(0,1fr) 30px; }
  .go-page .player-lineup .stellar-portrait { width: 76px; }
  .go-page .player-lineup h3 { font-size: 18px; }
}
@media (max-width: 960px) {
  .go-page .game-layout { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; gap: 20px; }
  .go-page .room-setup { grid-column: 1; grid-row: 1; }
  .go-page .board-column { grid-column: 1; grid-row: 2; }
  .go-page .side-panel { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; }
  .go-page .player-lineup { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .go-page .launch-game { min-height: 64px; margin-bottom: 12px; }
  .go-page .side-panel :is(.panel-label, .transmission, .score-panel) { grid-column: 1/-1; }
  .go-page .side-panel .sound-panel { grid-column: 2; grid-row: 3 / span 2; }
  .go-page .side-panel .tip-bar { grid-column: 2; grid-row: 5; }
}
@media (max-width: 760px) {
  .go-page .masthead { height: 76px; }
  .go-page .wordmark { font-size: 18px; gap: 7px; letter-spacing: .08em; }
  .go-page .masthead nav { gap: 16px; font-size: 10px; }
  .go-page .hero { min-height: 350px; flex-direction: column; align-items: stretch; }
  .go-page .hero-copy { padding: 30px 0 24px; }
  .go-page h1 { font-size: 38px; letter-spacing: .055em; }
  .go-page .hero .eyebrow { font-size: 9px; letter-spacing: .06em; }
  .go-page .hero-index { font-size: 9px; }
  .go-page .room-heading > span { font-size: 9px; }
  .go-page .field-guide { gap: 26px 18px; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .go-page .player-lineup .player-card { grid-template-columns: 72px minmax(0,1fr) 30px; }
  .go-page .player-lineup .stellar-portrait { width: 72px; }
  .go-page .player-lineup h3 { font-size: 18px; }
}
@media (max-width: 600px) {
  .go-page .board-column { padding: 10px; }
  .go-page .game-actions { gap: 7px; }
  .go-page .game-actions button { padding-inline: 5px; font-size: 14px; }
  .go-page .room-switch [role=tab] { font-size: 17px; min-width: 124px; padding-inline: 15px; }
  .go-page .player-lineup .player-card { grid-template-columns: minmax(0,1fr); padding: 4px 10px 13px; gap: 0; }
  .go-page .player-lineup .stellar-portrait { width: 100%; height: 76px; }
  .go-page .player-lineup .captures { position: absolute; right: 9px; top: 9px; flex-direction: row; align-items: baseline; }
  .go-page .player-lineup .captures strong { font-size: 17px; }
  .go-page .player-lineup h3 { font-size: 17px; }
  .go-page .player-lineup .micro { font-size: 9px; }
  .go-page .player-lineup .player-role { font-size: 12px; }
  .go-page .side-panel { display: block; }
  .go-page .launch-game { font-size: 19px; }
  .go-page .footer-title { font-size: 10px; letter-spacing: .05em; }
  .go-page .field-guide .eyebrow { font-size: 9px; letter-spacing: .06em; }
  .go-page dialog { padding: 24px 20px; }
}
@media (max-width: 380px) {
  .go-page .masthead nav { gap: 11px; font-size: 9px; }
  .go-page .wordmark { font-size: 16px; }
  .go-page .brand-orbit { width: 18px; height: 18px; }
  .go-page h1 { font-size: 34px; }
  .go-page .player-lineup .player-card { padding-inline: 7px; }
  .go-page .player-lineup h3 { font-size: 16px; letter-spacing: 0; }
  .go-page .launch-game span { font-size: 9px; }
  .go-page .hero .eyebrow { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .go-page button:not(.intersection) { transition: none; }
}