:root{
  --paper:#eee4d0;
  --paper-2:#e6d8bd;
  --ink:#171b1d;
  --navy:#102d3a;
  --navy-2:#173f4b;
  --gold:#bd7d2f;
  --line:#98704a;
  --active:#1f806f;
  --warn:#ae6a13;
  --danger:#963e35;
  --shadow:0 9px 28px rgba(20,15,8,.34);
  font-family:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0b0d0c;color:var(--ink)}
body{overflow:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid #e98a16;outline-offset:2px
}
[hidden]{display:none!important}

.gc-shell{width:100vw;height:100dvh;overflow:hidden;background:#0b0d0c}
.gc-viewport{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-color:#876b48 #181713}

/* One canonical 3:2 spatial surface. On portrait it fills height and pans horizontally;
   on landscape/desktop it fills width and can pan vertically. Nothing is removed. */
.gc-stage{
  position:relative;
  width:max(100vw,150dvh);
  aspect-ratio:3/2;
  min-width:900px;
  background:var(--paper);
  isolation:isolate;
  overflow:hidden;
}
.gc-background{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;user-select:none;pointer-events:none}

/* Network/exchange surface in the quiet top-right header zone. */
.gc-network{
  position:absolute;z-index:5;
  left:64%;top:2.2%;width:30%;height:10.4%;
  display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);align-items:center;gap:.7em;
  padding:.55% .7%;
  font:clamp(7px,.62vw,10px)/1.15 "Courier New",monospace;
  background:rgba(239,229,209,.84);border-left:1px solid rgba(95,65,37,.55);
  border-right:1px solid rgba(95,65,37,.55);backdrop-filter:blur(2px)
}
.gc-network-site,.gc-network-ring{min-width:0;display:grid;align-content:center;gap:.25em}
.gc-network-label{color:#5f482f;letter-spacing:.08em;white-space:nowrap}
.gc-network-button{display:inline-block;width:88px;height:31px;max-width:100%;line-height:0}
.gc-network-button img{display:block;width:88px;height:31px;max-width:100%;object-fit:contain;image-rendering:pixelated}

/* ILoveWebring's external badge stays functional, but is constrained to the mapped header anchor. */
.gc-network #ilovewebring-widget{display:block;min-width:0;max-width:100%}
.gc-network .ilovewebring-osc{display:block!important;max-width:100%!important;font-family:"Courier New",monospace!important}
.gc-network .ilovewebring-badge{
  min-width:0!important;max-width:none!important;width:100%!important;padding:4px 5px!important;border-radius:4px!important;
  background:rgba(15,42,50,.92)!important;border:1px solid rgba(95,65,37,.55)!important;box-shadow:none!important;
  transform:none!important;overflow:hidden!important
}
.gc-network .ilovewebring-badge::before{height:1px!important}
.gc-network .ilovewebring-header{gap:5px!important;margin:0 0 3px!important}
.gc-network .ilovewebring-icon{width:18px!important;height:18px!important;border-radius:3px!important;box-shadow:none!important}
.gc-network .ilovewebring-icon svg{width:11px!important;height:11px!important}
.gc-network .ilovewebring-title h3{font-size:8px!important;letter-spacing:.04em!important;margin:0!important;white-space:nowrap!important}
.gc-network .ilovewebring-title p,.gc-network .ilovewebring-ping,.gc-network .ilovewebring-dots{display:none!important}
.gc-network .ilovewebring-nav{justify-content:flex-start!important;gap:2px!important;flex-wrap:nowrap!important;padding-top:3px!important;border-top:1px solid rgba(255,255,255,.12)!important}
.gc-network .ilovewebring-nav a{
  flex:1 1 auto!important;min-width:0!important;padding:3px 2px!important;border-radius:2px!important;
  font-size:7px!important;line-height:1!important;text-align:center!important;white-space:nowrap!important;transform:none!important
}

/* Left navigation: locked to the approved rail; never drags. */
.gc-nav{
  position:absolute;z-index:1500;
  left:0;top:16%;width:7.8125%;height:68.75%;
  display:flex;flex-direction:column;
  background:rgba(237,226,202,.83);
  border-right:1px solid rgba(120,82,45,.45);
  backdrop-filter:blur(2px)
}
.nav-btn{
  min-height:8.6%;flex:1 1 auto;
  display:grid;grid-template-columns:2.1em 1fr;align-items:center;gap:.3em;
  width:100%;padding:.2em .45em;border:0;border-bottom:1px solid rgba(110,78,42,.18);
  color:#171b1d;background:transparent;text-align:left;
  font:clamp(7px,.73vw,12px)/1.05 "Arial Narrow",Arial,sans-serif;
}
.nav-btn:hover,.nav-btn.is-active{background:rgba(199,144,58,.20);box-shadow:inset 4px 0 #b97828}
.nav-icon{font-size:1.55em;text-align:center;font-weight:700}
.node-switch{margin-top:auto}
.node-menu{
  position:absolute;left:100%;bottom:0;min-width:150%;
  padding:5px;background:rgba(238,228,208,.98);border:1px solid #8b6a49;box-shadow:var(--shadow)
}
.node-menu button{display:block;width:100%;padding:8px;border:0;background:transparent;text-align:left}
.node-menu button:hover{background:#dbc8a5}

/* Footer/status band uses the map's y=864..1024 region. */
.gc-toolbar{
  position:absolute;z-index:18;
  left:8.4%;right:2.2%;bottom:4.0%;
  min-height:7.5%;padding:.5% .65%;
  display:flex;flex-wrap:wrap;align-items:center;gap:.45em;
  background:rgba(238,228,208,.90);border:1px solid rgba(105,72,41,.58);
  box-shadow:0 4px 15px rgba(38,25,13,.14);backdrop-filter:blur(2px)
}
.gc-toolbar label{display:flex;align-items:center;gap:.45em;font:clamp(8px,.7vw,11px)/1 "Courier New",monospace}
.gc-toolbar select,.gc-toolbar button{
  border:1px solid #967553;background:rgba(247,240,224,.93);color:#251e17;
  min-height:28px;padding:.38em .65em;font:clamp(8px,.68vw,11px)/1 "Courier New",monospace
}
.gc-toolbar button:hover{border-color:#b46b1c;background:#f5dfb8}
.gc-stage-footer{
  position:absolute;z-index:6;left:1.8%;right:1.8%;bottom:.8%;
  display:flex;gap:1.4em;align-items:center;
  font:clamp(7px,.6vw,10px)/1 "Courier New",monospace;color:#5e4a36
}
.gc-stage-footer a{margin-left:auto;color:#234c5c;text-decoration:none}

/* Mapped clickable hardware. These correspond to the new approved terminal-coordinate reference. */
.gc-anchor{position:absolute;z-index:40;border:0;background:transparent;padding:0}
.gc-anchor:hover{outline:2px dashed rgba(220,118,21,.72);background:rgba(236,145,37,.06)}
.a-sensory{left:21%;top:14%;width:18%;height:18%}
.a-vocal{left:8%;top:38%;width:18%;height:16%}
.a-utility{left:12%;top:62%;width:18%;height:16%}
.a-core{left:56%;top:14%;width:18%;height:18%}
.a-cargo{left:80%;top:22%;width:16%;height:16%}
.a-rear{left:78%;top:46%;width:18%;height:16%}
.a-aux{left:78%;top:66%;width:16%;height:14%}

.terminal-layer{position:absolute;z-index:30;inset:0;pointer-events:none}
.gc-panel{
  --x:10%;--y:10%;--w:20%;--h:18%;
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  pointer-events:auto;
  border:2px solid #173b45;background:rgba(239,229,208,.97);
  box-shadow:var(--shadow);color:#211b15
}
.gc-panel>header{
  flex:0 0 auto;min-height:30px;padding:.35em .45em;
  display:flex;align-items:center;gap:.45em;color:#f6eee0;
  background:linear-gradient(180deg,#163d49,#0f2c35);border-bottom:1px solid #09232a;
  font:700 clamp(9px,.77vw,13px)/1 "Arial Narrow",Arial,sans-serif;letter-spacing:.02em
}
.gc-panel>header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-panel>header .live{margin-left:auto;color:#75e4ad;font-size:.78em;font-weight:400}
.panel-actions{display:flex;gap:3px;margin-left:.3em}
.panel-actions button{
  width:24px;height:22px;padding:0;border:1px solid rgba(213,235,231,.35);
  background:#11333c;color:#e8f2ec;font:12px/1 monospace
}
.panel-tabs{display:flex;flex:0 0 auto;overflow-x:auto;background:#e2d4b8;border-bottom:1px solid #a48564}
.panel-tabs button{flex:0 0 auto;border:0;border-right:1px solid #bea786;background:transparent;padding:.42em .62em;font-size:clamp(8px,.62vw,10px)}
.panel-tabs button.is-active{background:#f4ead5;font-weight:700}
.panel-body{flex:1;min-height:0;overflow:auto;padding:.55em;font:clamp(8px,.64vw,11px)/1.35 "Courier New",monospace}
.panel-body pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:.3em 0}
.panel-body table{border-collapse:collapse;width:100%;font-size:.9em}
.panel-body th,.panel-body td{border-bottom:1px solid #c7b69a;padding:.3em;text-align:left}

/* Main seven terminals map directly to the approved terminal reference. */
.gc-panel[data-panel="sensory"]{--x:21%;--y:14%;--w:18%;--h:18%}
.gc-panel[data-panel="vocal"]{--x:8%;--y:38%;--w:18%;--h:16%}
.gc-panel[data-panel="utility"]{--x:12%;--y:62%;--w:18%;--h:16%}
.gc-panel[data-panel="core"]{--x:56%;--y:14%;--w:18%;--h:18%}
.gc-panel[data-panel="cargo"]{--x:80%;--y:22%;--w:16%;--h:16%}
.gc-panel[data-panel="rear"]{--x:78%;--y:46%;--w:18%;--h:16%}
.gc-panel[data-panel="aux"]{--x:78%;--y:66%;--w:16%;--h:14%}

/* Four evidence/work panels occupy the grid-map lower terminal band. */
.gc-panel[data-panel="inspector"]{--x:10.5%;--y:68.75%;--w:23%;--h:15.6%}
.gc-panel[data-panel="components"]{--x:34%;--y:68.75%;--w:23%;--h:15.6%}
.gc-panel[data-panel="field"]{--x:57.5%;--y:68.75%;--w:20%;--h:15.6%}
.gc-panel[data-panel="terminal"]{--x:78%;--y:68.75%;--w:18%;--h:15.6%}

/* Wide = mapped snap expansion, still tied to the stage rather than arbitrary drag geometry. */
.gc-panel.size-wide{z-index:60;width:min(36%,560px);height:31%;min-width:320px}
.gc-panel[data-panel="core"].size-wide,
.gc-panel[data-panel="cargo"].size-wide,
.gc-panel[data-panel="rear"].size-wide,
.gc-panel[data-panel="aux"].size-wide,
.gc-panel[data-panel="field"].size-wide,
.gc-panel[data-panel="terminal"].size-wide{left:auto;right:3%}
.gc-panel[data-panel="inspector"].size-wide,
.gc-panel[data-panel="components"].size-wide,
.gc-panel[data-panel="field"].size-wide,
.gc-panel[data-panel="terminal"].size-wide{top:52%;height:31%}

/* Full = R_D-style focus window; restores to the mapped home coordinates afterward. */
.gc-panel.size-full{
  position:fixed;z-index:1000;
  left:max(8px,env(safe-area-inset-left))!important;
  right:max(8px,env(safe-area-inset-right))!important;
  top:max(8px,env(safe-area-inset-top))!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  width:auto!important;height:auto!important
}

/* Dialogs retained from the functional build but rethemed. Move dialog is not exposed by UI. */
dialog{border:2px solid #183e48;background:#efe4ce;color:#211c17;box-shadow:0 20px 70px rgba(0,0,0,.55);max-width:min(600px,90vw)}
dialog::backdrop{background:rgba(0,0,0,.65)}
dialog button{border:1px solid #8d6d4b;background:#f6ebd5;padding:7px 10px}

/* Existing functional widgets: make them usable inside the new panel shells. */
.scan-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,.8fr);gap:.45em}
.scan-art,.core-diagram{min-height:75px;background:#0d2730;border:1px solid #43565a}
.terminal-screen,[data-event-log]{background:#09232b;color:#d3e9e7;padding:.55em;min-height:70px;white-space:pre-wrap}
.tool-icons{display:flex;flex-wrap:wrap;gap:.35em}
.tool-icons button,.panel-body button,.panel-body input,.panel-body select,.panel-body textarea{
  border:1px solid #9b7955;background:#f5ead3;color:#211b15;padding:.35em .5em;max-width:100%
}
.rear-status{display:grid;grid-template-columns:1fr auto;gap:.4em}
.crew-grid,.inspector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45em}
.actor-card,.artifact-card,.component-card{border:1px solid #b69c77;padding:.45em;background:rgba(250,243,228,.72)}
.is-dragging::after{content:"LOCAL INTAKE";position:fixed;inset:10%;z-index:2000;display:grid;place-items:center;border:3px dashed #b66d1f;background:rgba(239,229,208,.93);font:700 24px monospace;color:#57381e}

/* Small/portrait devices keep the SAME stage and SAME functionality.
   The viewport pans over the 3:2 surface rather than collapsing the desktop into a tiny strip. */
@media (max-width:700px){
  .gc-stage{min-width:0;width:max(100vw,150dvh)}
  .gc-network{font-size:7px;left:64%;width:30%;grid-template-columns:88px minmax(0,1fr);gap:.35em;padding:.4%}
  .gc-network .ilovewebring-title h3{font-size:7px!important}
  .gc-network .ilovewebring-nav a{font-size:6px!important;padding:2px 1px!important}
  .nav-btn{font-size:7px;grid-template-columns:1.75em 1fr;padding:.15em}
  .gc-toolbar{font-size:8px;gap:.25em}
  .gc-toolbar select,.gc-toolbar button{min-height:25px;font-size:8px;padding:.3em .45em}
  .gc-panel.size-wide{position:fixed;z-index:900;left:3vw!important;right:3vw!important;top:8dvh!important;width:94vw!important;height:84dvh!important;min-width:0}
  .gc-panel.size-full{left:2vw!important;right:2vw!important;top:2dvh!important;bottom:2dvh!important}
  .panel-body{font-size:11px}
  .gc-panel>header{font-size:11px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.tab-placeholder{padding:16px;text-align:center;opacity:.85}
.tab-placeholder strong{display:block;letter-spacing:.05em;margin-bottom:6px}
.tab-note{font-size:12px;opacity:.75;max-width:46ch;margin:8px auto 0}
.classify-view,.report-view{padding:4px 2px}
.current-class{font-size:18px;font-weight:600;letter-spacing:.03em}
.class-explain{opacity:.8;font-size:12px;margin-bottom:12px}
.class-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.class-options button{font-size:11px;padding:4px 8px}
.class-options button.is-active{outline:2px solid currentColor}
.report-view dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12px;margin:8px 0}
.report-view dt{opacity:.7}
.game-link{display:block;padding:10px 12px;border:1px solid var(--gc-line,#3a4a44);border-radius:4px;text-decoration:none;color:inherit;background:rgba(255,255,255,.02)}
.game-link:hover{border-color:#d4af37;background:rgba(212,175,55,.06)}
.game-link strong{display:block;margin-bottom:3px}
.game-link span{display:block;font-size:12px;opacity:.75}
.a-field{left:57.5%;top:68.75%;width:20%;height:15.6%}