/* Grok Trek: RTWL desk look with a sci-fi bridge accent. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: .85rem; }
.gt-tag { margin: -4px 0 14px; color: rgba(20,73,54,.75); }
.setup { margin-bottom: 14px; }
.setup .note { margin: 8px 0 0; font-size: .85rem; color: rgba(20,73,54,.75); }
.setup .note.bad { color: #b3261e; font-weight: 600; }
.setup select { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line, #cfe3d6); background: #fff; }
.gt-startrow { margin-top: 10px; }
.gt-startrow > * { flex: 0 1 auto; }
.gt-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(250px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .gt-layout { grid-template-columns: 1fr; } }
.gt-main, .gt-side { min-width: 0; }
.gt-side { display: grid; gap: 14px; }
.gt-panel h3 { font-size: 1.1rem; margin-bottom: 8px; }

/* bridge colours */
.gt-main { --bg: #060d18; --ink: #d7e9ff; --dim: #7f95b3; --cy: #59e1ff; --gr: #3dff8a; --rd: #ff5a6e; --gd: #ffd25a; --bl: #7aa8ff; --pu: #c88bff; }
.gt-status { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(160deg, #0b1a30, #060d18);
  color: var(--ink); border: 1px solid #1d3a5c; }
.gt-st .k { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.gt-st .v { display: block; font-family: Chango, Georgia, serif; font-size: .88rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.25; }
.gt-cond .v.c-GREEN { color: var(--gr); } .gt-cond .v.c-YELLOW { color: var(--gd); } .gt-cond .v.c-RED { color: var(--rd); animation: gt-blink 1s steps(2) infinite; } .gt-cond .v.c-DOCKED { color: var(--cy); }
@keyframes gt-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .gt-cond .v.c-RED { animation: none; } }
@media (max-width: 700px) { .gt-status { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gt-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
@media (max-width: 560px) { .gt-bars { grid-template-columns: 1fr; gap: 4px; } }
.gt-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: .78rem; font-weight: 600; color: #144936; }
.gt-bar .track { height: 10px; border-radius: 6px; background: #dbe7e0; overflow: hidden; }
.gt-bar .track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #19c155, #3dff8a); transition: width .4s; }
.gt-bar.sh .track i { background: linear-gradient(90deg, #2a7fff, #59e1ff); }
.gt-bar.tp .track i { background: linear-gradient(90deg, #ff9b2a, #ffd25a); }
.gt-bar .track i.low { background: linear-gradient(90deg, #d62839, #ff5a6e); }
.gt-bar .n { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

.gt-screens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 620px) { .gt-screens { grid-template-columns: 1fr; } }
.gt-screen, .gt-modalbox { background: var(--bg, #060d18); border: 1px solid #1d3a5c; border-radius: 14px; padding: 8px; color: #d7e9ff; min-width: 0; }
.gt-screenhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: .85rem; margin: 0 2px 6px; }
.gt-screenhead b { font-family: Chango, Georgia, serif; font-weight: 400; letter-spacing: .02em; color: #59e1ff; }
.gt-chip { font: inherit; font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid #2c5582; background: transparent; color: #a9c6ea; cursor: pointer; }
.gt-chip.on { background: #59e1ff; color: #04121f; border-color: #59e1ff; }
.gt-chip:focus-visible, .gt-key:focus-visible { outline: 3px solid #59e1ff; outline-offset: 2px; }
.gt-mode { display: inline-flex; gap: 4px; }
.gt-srs, .gt-gmap { display: block; width: 100%; height: auto; aspect-ratio: 1; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.gt-legend { margin: 6px 2px 0; font-size: .7rem; color: #7f95b3; line-height: 1.5; }
.gt-legend span { white-space: nowrap; }
.lg-y { color: #59e1ff; } .lg-e { color: #ff5a6e; } .lg-b { color: #3dff8a; } .lg-p { color: #ffd25a; } .lg-l { color: #7aa8ff; } .lg-s { color: #fff3b0; } .lg-n { color: #c88bff; } .lg-z { color: #8fa8c8; }
svg .cell { fill: #0a1526; stroke: #13253d; stroke-width: .3; cursor: pointer; }
svg .cell:hover { fill: #11233d; }
svg .cell.zone { fill: #121c2c; }
svg .cell.here { fill: #0f2f45; stroke: #59e1ff; stroke-width: .6; }
svg .cell.tgt { stroke: #ffd25a; stroke-width: .7; }
svg .unk { fill: #0a1018; }
svg text { font-family: ui-monospace, Menlo, Consolas, monospace; pointer-events: none; }
svg .beam { stroke: #59e1ff; stroke-width: .9; stroke-linecap: round; animation: gt-fade .45s ease-out forwards; }
svg .ebeam { stroke: #ff5a6e; stroke-width: .7; stroke-dasharray: 1.2 .8; animation: gt-fade .5s ease-out forwards; }
svg .boom { fill: #ffd25a; animation: gt-boom .6s ease-out forwards; transform-box: fill-box; transform-origin: center; }
svg .torp { fill: #ffb347; }
@keyframes gt-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes gt-boom { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(2.2); } }
@media (prefers-reduced-motion: reduce) { svg .beam, svg .ebeam, svg .boom { animation-duration: .01s; } }

.gt-log { height: clamp(220px, 34vh, 420px); overflow-y: auto; overscroll-behavior: contain; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: #060d18; color: #d7e9ff;
  border: 1px solid #1d3a5c; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.45; }
.gt-log p { margin: 0 0 .45em; white-space: pre-wrap; overflow-wrap: anywhere; }
.gt-log pre { margin: 0 0 .5em; font: inherit; font-size: .82rem; line-height: 1.25; white-space: pre; overflow-x: auto; color: #bfe6ff; }
.gt-log .echo { color: #59e1ff; font-weight: 700; margin-top: .7em; }
.gt-log .head { color: #fff; font-weight: 700; }
.gt-log .good { color: #3dff8a; }
.gt-log .warn { color: #ffcf6b; }
.gt-log .muted, .gt-log .sys { color: #8ea3bf; }
.gt-pad { display: grid; gap: 6px; margin-top: 8px; }
.gt-padrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gt-padrow[hidden] { display: none; }
.gt-key { font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: 7px 10px; border-radius: 10px; border: 1px solid #1d3a5c; background: #0b1a30; color: #cfe6ff; cursor: pointer; min-height: 34px; }
.gt-key:hover { background: #12294a; }
.gt-key.fire { background: #3a0f1a; border-color: #ff5a6e; color: #ffd0d6; }
.gt-key:disabled { opacity: .45; cursor: default; }
.gt-num { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: #144936; }
.gt-num input { width: 5.4em; font: inherit; padding: 6px 6px; border-radius: 8px; border: 1px solid #9fc4b0; }
.gt-sys { display: grid; gap: 5px; font-size: .82rem; }
.gt-sys .s { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 6px; align-items: center; }
.gt-sys .t { height: 8px; border-radius: 5px; background: #3dff8a; }
.gt-sys .s.bad .t { background: linear-gradient(90deg, #d62839 var(--p, 50%), #e6e6e6 var(--p, 50%)); }
.gt-sys .s .r { font-variant-numeric: tabular-nums; color: rgba(20,73,54,.7); min-width: 3.5em; text-align: right; }
.gt-ct { margin: 0; padding-left: 1.2em; font-size: .85rem; display: grid; gap: 6px; }
.gt-slots { display: grid; gap: 6px; font-size: .85rem; }
.gt-slot { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.gt-slot .btns { display: inline-flex; gap: 4px; }
.gt-slot button { font: inherit; font-size: .75rem; padding: 3px 8px; border-radius: 8px; border: 1px solid #9fc4b0; background: #fff; cursor: pointer; }
.gt-slot button:disabled { opacity: .4; cursor: default; }
#board table { width: 100%; border-collapse: collapse; font-size: .85rem; }
#board td, #board th { padding: 4px 4px; border-bottom: 1px solid #e3eee7; text-align: left; }
#board td.n { text-align: right; font-variant-numeric: tabular-nums; }
#board .ttl { font-size: .72rem; color: rgba(20,73,54,.7); display: block; }
#board .fc { color: #9a6b00; font-weight: 700; }
.gt-modal { position: fixed; inset: 0; z-index: 50; background: rgba(2,6,12,.72); display: flex; align-items: center; justify-content: center; padding: 12px; }
.gt-modal[hidden] { display: none; }
.gt-modalbox { width: min(760px, 100%); max-height: calc(100vh - 24px); overflow: auto; }
.gt-fmap { display: block; width: 100%; height: auto; aspect-ratio: 1; }

/* only the grid cells take taps; glyphs, markers and effects drawn on top let clicks through */
#srs *, #gmap *, #fmap * { pointer-events: none; }
#srs .cell, #gmap .cell, #fmap .cell { pointer-events: all; }
/* popup chat (data-chat="popup"): no side rail, so the bridge takes the full width */

/* ---------- fit the bridge into one screen, scaled to the screen ----------
   Everything on this page is in rem, and the root size follows the viewport (14px on laptops, up to 28px on 4K), so
   text, buttons and the scans grow on big screens and shrink on small ones. Desktop (wider than 900px, at least 521px
   tall): status, bars, both scans with the log beside them, the command line and the buttons fit in 100dvh. The scans are
   squares sized by the smaller of the width and the height left over. The side column scrolls on its own. Short
   landscape (phones on their side): scans left, log + command line + buttons right. Portrait and narrow screens stack. */
html { font-size: clamp(14px, calc(0.42vw + 0.5vh), 28px); }
.game-wrap.gt-wrap { width: calc(100% - 2rem); max-width: none; }
.gt-tobridge { float: right; font-size: .85rem; }
#bridge { scroll-margin-top: .5rem; }
@media (min-width: 901px), (orientation: landscape) and (max-height: 520px) {
  .gt-main { display: grid; gap: .4rem; align-items: stretch; }
  .gt-main > * { margin: 0 !important; min-width: 0; }
  .gt-status { grid-area: st; } .gt-bars { grid-area: bars; } .gt-screens { display: contents; }
  .gt-screens > .gt-screen:nth-child(1) { grid-area: srs; } .gt-screens > .gt-screen:nth-child(2) { grid-area: gmap; }
  .gt-screen { display: flex; flex-direction: column; padding: .5rem; }
  .gt-srs, .gt-gmap { width: 100%; margin: 0 auto; }
  .gt-log { grid-area: log; height: auto; contain: size; min-height: 4.5rem; overflow-y: auto; }
    .gt-pad { grid-area: pad; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
  .gt-padrow { display: contents; }
  .gt-padrow[hidden] { display: none !important; }
  .gt-key { min-height: 1.9rem; padding: .25rem .55rem; font-size: .74rem; border-radius: .6rem; }
  .gt-num input { padding: .2rem .35rem; width: 4.6em; }
  .gt-main > .msg { grid-area: msg; min-height: 1.2em; font-size: .85rem; }
  .gt-status { padding: .3rem .7rem; } .gt-st .v { font-size: .85rem; }
  .gt-screenhead { margin-bottom: .25rem; }
  .gt-legend { font-size: .64rem; line-height: 1.35; margin-top: .25rem; }
  .gt-bar .track { height: .6rem; }
}
@media (min-width: 901px) {
  .gt-layout { --side: clamp(16rem, 24vw, 30rem); grid-template-columns: minmax(0, 1fr) var(--side); gap: 1rem; align-items: start; }
  /* main column = viewport - page margins - side column - gap - scrollbar; a screen box is its scan side plus padding */
  .gt-main { --mw: calc(100vw - 2rem - var(--side) - 1rem - 18px);
    --scan: max(7rem, min(calc((var(--mw) - 15rem - .8rem) / 2), var(--fit, calc(100dvh - var(--over, 18.5rem)))));
    grid-template-columns: var(--scan) var(--scan) minmax(15rem, 1fr);
    grid-template-areas: "st st st" "bars bars bars" "srs gmap log" "pad pad pad" "msg msg msg"; }
  .gt-side { max-height: calc(100dvh - 1rem); overflow-y: auto; overscroll-behavior: contain; position: sticky; top: .5rem; align-content: start; padding: 0 .25rem 4rem 0; }
}
@media (min-width: 901px) and (max-height: 820px) { .gt-legend { display: none; } .gt-main { --over: 15.5rem; } }
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  html { font-size: 13px; }
  .gt-main { --mw: calc(100vw - 2rem - 8px);
    --scan: max(6rem, min(calc((var(--mw) - 20rem - .8rem) / 2), var(--fit, calc(100dvh - 7.5rem))));
    grid-template-columns: var(--scan) var(--scan) minmax(0, 1fr); grid-template-rows: auto auto minmax(4.5rem, 1fr) auto auto;
    grid-template-areas: "st st st" "bars bars bars" "srs gmap log" "srs gmap pad" "msg msg msg"; }
  .gt-legend { display: none; }
  .gt-status { grid-template-columns: repeat(8, minmax(0, 1fr)); padding: .2rem .5rem; gap: .25rem; }
  .gt-st .k { font-size: .55rem; } .gt-st .v { font-size: .72rem; }
  .gt-bars { gap: .4rem; } .gt-bar { font-size: .68rem; } .gt-bar .track { height: .45rem; }
  .gt-screen { padding: .3rem; } .gt-screenhead { font-size: .72rem; }
  .gt-chip { font-size: .66rem; padding: .1rem .4rem; }
  .gt-key { min-height: 1.85rem; padding: .15rem .4rem; font-size: .64rem; }
  .gt-log { font-size: .74rem; padding: .4rem .55rem; }
  .gt-main > .msg { font-size: .72rem; }
}

/* Choices: one menu button for the moment's extra options (lost ship, job board, market). The list floats (fixed),
   is placed by game.js inside the viewport (below the button, or above when there is no room) and scrolls, so the
   bridge never grows. */
.gt-choicebtn { white-space: nowrap; }
.gt-choicebtn.fire:not(:disabled) { animation: gt-blink 1.2s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) { .gt-choicebtn.fire { animation: none; } }
.gt-pop { position: fixed; z-index: 70; min-width: 14rem; max-width: min(36rem, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain;
  background: #0b1a30; border: 1px solid #2c5582; border-radius: .7rem; padding: .3rem; box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.45); display: grid; gap: .2rem; }
.gt-pop[hidden] { display: none; }
.gt-pophead { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #7f95b3; font-weight: 700; padding: .3rem .45rem .1rem; }
.gt-popitem { font: inherit; font-size: .78rem; text-align: left; color: #cfe6ff; background: transparent; border: 1px solid transparent; border-radius: .5rem; padding: .4rem .55rem; cursor: pointer; white-space: normal; }
.gt-popitem:hover:not(:disabled), .gt-popitem:focus-visible { background: #12294a; border-color: #2c5582; outline: none; }
.gt-popitem.fire { color: #ffd0d6; border-color: #ff5a6e; background: #3a0f1a; }
.gt-popitem:disabled { opacity: .45; cursor: default; }

/* Flying (a career is open): the whole page is one screen. The start panel folds into one slim line, the bridge takes
   the rest of 100dvh, and the side column scrolls inside that height, so the page itself never scrolls. */
@media (min-width: 901px), (orientation: landscape) and (max-height: 520px) {
  body.gt-flying { overflow-y: hidden; }
  .gt-flying .game-wrap.gt-wrap { height: 100vh; height: 100dvh; box-sizing: border-box; padding: .35rem 0 .35rem; display: flex; flex-direction: column; }
  .gt-flying .gt-wrap > .back, .gt-flying .gt-tobridge, .gt-flying .gt-tag { display: none; }
  .gt-flying .gg-head { margin: 0 0 .3rem; align-items: center; gap: .2rem 1rem; flex-wrap: nowrap; }
  .gt-flying .gg-head h1 { font-size: 1.3rem !important; margin: 0; white-space: nowrap; }
  .gt-flying .gg-head .gg-links a { padding: .15rem .6rem; font-size: .8rem; }
  .gt-flying #setup { display: flex; align-items: center; gap: .3rem .8rem; padding: .3rem .7rem; margin: 0 0 .4rem; flex-wrap: nowrap; }
  .gt-flying #setup > .row:not(.gt-startrow) { display: none; }
  .gt-flying #setup .gt-startrow { margin: 0; flex: 0 0 auto; flex-wrap: nowrap; gap: .4rem; }
  .gt-flying #setup .gt-startrow .btn { padding: .25rem .8rem; font-size: .8rem; }
  .gt-flying #setup .note { margin: 0; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gt-flying .gt-layout { flex: 1 1 auto; min-height: 0; align-items: start; }
  .gt-flying .gt-side { position: static; height: 100%; max-height: 100%; box-sizing: border-box; overflow-y: auto; }
  .gt-flying .gt-main { max-height: 100%; }
}
/* short, wide windows: a smaller base size so the bars, heads and buttons leave room for the boards */
@media (min-width: 901px) and (max-height: 620px) { html { font-size: 12.5px; } }
@media (min-width: 901px) and (max-height: 500px) { html { font-size: 11.5px; } .gt-flying .gg-head .gg-links { display: none; } }
/* phones on their side: the Grok Chat button moves up into the slim start-panel line, clear of every control,
   and its drawer opens downward from there */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  .gt-flying #setup { padding-right: 9rem; }
  body.gt-flying .ggc-fab { top: 3.05rem; bottom: auto; right: 1.6rem; padding: .3rem .8rem; font-size: 12px; }
  body.gt-flying .ggc.ggc-drawer { top: 5.4rem; bottom: auto; max-height: calc(100dvh - 6rem); }
}

/* away team (landed): the world panel takes the bridge panes' place */
.gt-world{display:flex;flex-direction:column;gap:6px;min-height:0;border:1px solid #2a3d5a;border-radius:10px;padding:8px;background:#0b1424}
.gt-world[hidden],.gt-fight[hidden],.gt-wbtns[hidden],.gt-wnav .gt-key[hidden],body.gt-landed .gt-screens,body.gt-landed .gt-pad .gt-padrow:not(:first-child),body.gt-landed .gt-pad .gt-padrow:first-child .gt-key:not(.gt-choicebtn){display:none}
.gt-wbiome{color:#8fb3d9;font-size:.85em}
.gt-wstats{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.9em}.gt-wstats .k{color:#8fb3d9}
.gt-bar.hp i{background:#3dff8a}.gt-bar.foe i{background:#ff5a6e}
.gt-fight{border:1px solid #ff5a6e55;border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:5px}
.gt-wbtns{display:flex;flex-wrap:wrap;gap:5px}.gt-wbtns .gt-key[hidden]{display:none}
.gt-return{margin-left:auto;border-color:#59e1ff}
@media (min-width: 901px), (orientation: landscape) and (max-height: 520px) {
  .gt-world { grid-area: world; height: var(--scrh, calc(var(--scan) + 2.6rem)); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: .5rem; gap: .35rem; }
  .gt-world .gt-wstats { font-size: .78rem; }
}
@media (min-width: 901px) { body.gt-landed .gt-main { grid-template-areas: "st st st" "bars bars bars" "world world log" "pad pad pad" "msg msg msg"; } }
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  body.gt-landed .gt-main { grid-template-areas: "st st st" "bars bars bars" "world world log" "world world pad" "msg msg msg"; }
  .gt-world { min-height: 0; }
}

/* world panel body: the current place, always drawn */
.gt-wnav{display:flex;flex-wrap:wrap;gap:4px}
.gt-place.on{background:#59e1ff;color:#06121f;border-color:#59e1ff}
.gt-wbody{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px;color:#d7e9ff;font-size:.85rem}
.gt-art{margin:0;font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;line-height:1.15;color:#7fe8b0;white-space:pre;overflow:hidden}
.gt-wtitle{font-weight:700;color:#fff}.gt-npc{color:#ffd25a;font-style:italic}.gt-wnote{color:#8fb3d9}
.gt-wres{border-left:3px solid #59e1ff;padding:3px 8px;background:#0e1c33;border-radius:4px}.gt-wres p{margin:0 0 .2em}.gt-wres .good{color:#3dff8a}.gt-wres .warn{color:#ffcf6b}.gt-wres .muted{color:#8ea3bf}
.gt-shop{width:100%;border-collapse:collapse;font-size:.8rem}.gt-shop td{padding:2px 4px;border-bottom:1px solid #1d3150}.gt-shop td:last-child{text-align:right}
.gt-shop .gt-key{min-height:1.5rem;padding:.1rem .5rem}
@media (max-height: 620px) { .gt-art { display: none; } .gt-wbody { font-size: .78rem; } }
.gt-wbody > p { margin: 0; } .gt-wbody { justify-content: flex-start; }