/* Layout: one curved amber CRT fills the room; inside it a terminal — HUD on top, portrait + numbered menu on the left, the active screen on the right, command prompt at the bottom. Single deliberate dark look. */
:root {
  --void: #070302;
  --glass: #110702;
  --glass-2: #1a0c03;
  --ph: #ad912f;
  --ph-hi: #e4bf4d;
  --ph-dim: #6d5819;
  --ph-faint: #33260a;
  --lamp: #ffe08a;
  --ash: #9b9583;
  --f-term: "Courier Prime", "Courier New", ui-monospace, monospace;
  --f-disp: "VT323", "Courier Prime", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ph);
  font: 15px/1.45 var(--f-term);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }

/* ---------- the room + monitor ---------- */
.room {
  height: 100%;
  padding-block: clamp(10px, 3.4vh, 38px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #120803 0%, var(--void) 70%);
}
.crt {
  position: relative;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  border-radius: 54px / 70px;
  background: radial-gradient(ellipse 80% 75% at 48% 45%, #1b0c03 0%, var(--glass) 55%, #0b0502 100%);
  box-shadow:
    0 0 0 1px rgba(120, 78, 14, .55),
    0 0 26px 4px rgba(176, 116, 22, .32),
    0 0 110px 34px rgba(120, 70, 10, .14);
  overflow: hidden;
  isolation: isolate;
}
.screen {
  position: absolute;
  inset: 0;
  padding: clamp(16px, 3.6vh, 40px) clamp(18px, 4.4vw, 70px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  text-shadow: 0 0 1px rgba(228, 191, 77, .55), 0 0 8px rgba(228, 191, 77, .2);
  animation: flick 5s steps(1) infinite;
}
.fx { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 5; }
.fx.scan { background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .26) 0 1px, transparent 1px 3px); }
.fx.grille { background: repeating-linear-gradient(to right, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px); }
.fx.vig { background: radial-gradient(ellipse 78% 74% at 50% 50%, transparent 58%, rgba(0, 0, 0, .5) 86%, rgba(0, 0, 0, .92) 100%); }
.fx.rim {
  box-shadow:
    inset 0 0 0 2px rgba(214, 152, 36, .32),
    inset 0 0 22px 8px rgba(198, 138, 28, .34),
    inset 0 0 90px 30px rgba(0, 0, 0, .55);
}
.fx.glare {
  inset: 10px auto auto 14px;
  width: 26%;
  height: 22%;
  border-top-left-radius: 52px 66px;
  border-top: 7px solid rgba(255, 196, 70, .75);
  border-left: 7px solid rgba(255, 196, 70, .75);
  filter: blur(7px);
  opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0 0, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 100% 100% at 0 0, #000 30%, transparent 75%);
}
.fx.roll {
  inset: auto 0 auto 0;
  height: 18%;
  top: -20%;
  border-radius: 0;
  background: linear-gradient(to bottom, transparent, rgba(255, 205, 100, .045), transparent);
  animation: roll 10s linear infinite;
}
@keyframes roll { to { top: 105%; } }
@keyframes flick { 0% { opacity: 1; } 47% { opacity: .985; } 48% { opacity: 1; } 81% { opacity: .992; } 82% { opacity: 1; } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes pulse { 50% { color: var(--lamp); text-shadow: 0 0 12px rgba(255, 224, 138, .7); } }
@media (prefers-reduced-motion: reduce) {
  .screen, .fx.roll, .blink, .pulse { animation: none !important; }
}

/* ---------- type ---------- */
.disp { font-family: var(--f-disp); font-weight: 400; line-height: 1; color: var(--ph-hi); letter-spacing: .02em; }
.dim { color: var(--ph-dim); }
.hi { color: var(--ph-hi); }
.lamp { color: var(--lamp); }
.ash { color: var(--ash); }
.small { font-size: 12.5px; }
.blink { animation: blink 1.1s steps(1) infinite; }
.pulse { animation: pulse 1.4s ease-in-out 3; }
p { margin: 0 0 8px; max-width: 70ch; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- HUD ---------- */
.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--ph-faint);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .disp { font-size: 34px; color: var(--ph-hi); }
.hud .stats { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.hud .wallet { margin-left: auto; display: flex; gap: 10px; align-items: baseline; font-size: 13px; }

/* ---------- deck ---------- */
.deck { display: grid; grid-template-columns: minmax(210px, 268px) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 40px); min-height: 0; }
.side { min-height: 0; overflow: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 10px; }
.side::-webkit-scrollbar { display: none; }
.portrait { position: relative; width: 100%; max-width: 250px; }
.portrait canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.hello { font-size: 14.5px; }
.menu { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.menu button {
  background: none; border: 0; color: var(--ph); padding: 1px 6px 1px 0; cursor: pointer; text-align: left; text-shadow: inherit;
}
.menu button .n { display: inline-block; width: 2.2ch; }
.menu button:hover, .menu button:focus-visible { color: var(--ph-hi); outline: none; }
.menu button[aria-current="page"] { background: var(--ph-hi); color: var(--glass); text-shadow: none; padding-left: 4px; }
.radio { font-size: 12px; border-top: 1px dashed var(--ph-faint); padding-top: 8px; display: grid; gap: 3px; }
.radio .line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- main view ---------- */
.view { min-height: 0; overflow: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--ph-dim) transparent; }
.view::-webkit-scrollbar { width: 6px; }
.view::-webkit-scrollbar-thumb { background: var(--ph-dim); }
.view:focus { outline: none; }
.title { font-family: var(--f-disp); font-size: 38px; line-height: 1; color: var(--ph-hi); margin: 2px 0 8px; text-wrap: balance; }
.sec { display: flex; align-items: center; gap: 10px; color: var(--ph-dim); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 18px 0 8px; }
.sec::after { content: ""; flex: 1; border-top: 1px dashed var(--ph-faint); }
.sec:first-child { margin-top: 2px; }
.row-gap { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }

.btn {
  background: none; border: 0; color: var(--ph-hi); padding: 1px 2px; cursor: pointer; text-shadow: inherit; white-space: nowrap;
}
.btn::before { content: "["; color: var(--ph-dim); margin-right: 3px; }
.btn::after { content: "]"; color: var(--ph-dim); margin-left: 3px; }
.btn:hover, .btn:focus-visible { background: var(--ph-hi); color: var(--glass); text-shadow: none; outline: none; }
.btn:hover::before, .btn:hover::after, .btn:focus-visible::before, .btn:focus-visible::after { color: var(--glass); }
.btn[disabled] { color: var(--ph-dim); cursor: not-allowed; background: none; }
.btn.big { font-family: var(--f-disp); font-size: 24px; padding: 2px 6px; }
.btn.on { background: var(--ph-hi); color: var(--glass); text-shadow: none; }
.btn.on::before, .btn.on::after { color: var(--glass); }
.btn.warn { color: var(--lamp); }

.chip { display: inline-block; padding: 0 6px; border: 1px solid currentColor; font-size: 11.5px; letter-spacing: .1em; line-height: 1.6; white-space: nowrap; }
.chip.inv { background: var(--ph-hi); color: var(--glass); border-color: var(--ph-hi); text-shadow: none; }
.chip.lamp { color: var(--lamp); }
.chip.ash { color: var(--ash); }

.bar { display: inline-block; width: 110px; height: 11px; border: 1px solid var(--ph-dim); vertical-align: -1px; position: relative; }
.bar > i { position: absolute; left: 1px; top: 1px; bottom: 1px; background: repeating-linear-gradient(90deg, var(--ph-hi) 0 5px, transparent 5px 7px); max-width: calc(100% - 2px); }
.bar.wide { width: 100%; max-width: 260px; }

.tblwrap { overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.tbl th { color: var(--ph-dim); font-weight: 400; text-align: left; letter-spacing: .08em; font-size: 11.5px; padding: 0 14px 5px 0; border-bottom: 1px dashed var(--ph-faint); white-space: nowrap; }
.tbl td { padding: 4px 14px 4px 0; white-space: nowrap; vertical-align: baseline; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl.small { width: auto; min-width: min(100%, 520px); }
.tbl tr.row { cursor: pointer; }
.tbl tr.row:hover td, .tbl tr.row:focus-within td { color: var(--ph-hi); }
.tbl td.tk button { background: none; border: 0; padding: 0; color: var(--ph-hi); cursor: pointer; text-shadow: inherit; }
.tbl td.tk button:focus-visible { background: var(--ph-hi); color: var(--glass); outline: none; }

.feed { display: grid; gap: 3px; font-size: 13.5px; }
.feed .ln { display: grid; grid-template-columns: 5.5ch 8ch minmax(0, 1fr); gap: 10px; }
.feed .ln .m { min-width: 0; }
.feed .ln.nt { grid-template-columns: 5.5ch minmax(0, 1fr); }
.feed .ln.big .m { color: var(--lamp); }
.feed .tkb { background: none; border: 0; padding: 0; color: var(--ph-hi); cursor: pointer; text-align: left; text-shadow: inherit; }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 28px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 16px; font-variant-numeric: tabular-nums; }
.kv dt { color: var(--ph-dim); }
.kv dd { margin: 0; min-width: 0; }
.bignum { font-family: var(--f-disp); font-size: 46px; line-height: .95; color: var(--ph-hi); }
.bignum small { font-size: 22px; color: var(--ph); }

.shaftbox { position: relative; border: 1px solid var(--ph-faint); }
.shaftbox canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.shaftbox .cap { position: absolute; left: 8px; bottom: 6px; font-size: 12px; color: var(--lamp); }

.panel { border: 1px solid var(--ph-faint); padding: 10px 12px; }
.panel + .panel { margin-top: 10px; }
.panel:empty { display: none; }
.filepick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filepick:focus-visible + label { background: var(--ph-hi); color: var(--glass); }
label.btn { display: inline-block; }
a { color: inherit; }

.form { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 18px; align-items: baseline; max-width: 720px; }
.form .k { color: var(--ph-dim); letter-spacing: .1em; font-size: 12.5px; }
.field {
  background: transparent; border: 0; border-bottom: 1px dashed var(--ph-dim); color: var(--ph-hi); caret-color: var(--lamp);
  padding: 2px 4px; outline: none; width: 100%; max-width: 360px; text-shadow: inherit;
}
.field:focus { border-bottom-style: solid; border-bottom-color: var(--ph-hi); background: rgba(228, 191, 77, .06); }
.field.short { max-width: 120px; }
.field::placeholder { color: var(--ph-dim); opacity: 1; }
.radio-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; cursor: pointer; margin-bottom: 6px; }
.radio-opt input { position: absolute; opacity: 0; pointer-events: none; }
.radio-opt .box::before { content: "( )"; color: var(--ph-dim); }
.radio-opt input:checked + .box::before { content: "(•)"; color: var(--lamp); }
.radio-opt input:focus-visible + .box { background: var(--ph-hi); color: var(--glass); }
.radio-opt .d { grid-column: 2; color: var(--ph-dim); font-size: 13px; }
.radio-opt b { color: var(--ph-hi); font-weight: 400; }

pre.ascii { margin: 0; font-family: var(--f-term); line-height: 1.12; color: var(--ph-hi); font-size: 13px; }

.vote { display: grid; gap: 6px; }
.vote .opt { display: grid; grid-template-columns: 7ch minmax(0, 1fr) 5ch; gap: 10px; align-items: center; }
.vote .track { height: 11px; border: 1px solid var(--ph-dim); position: relative; }
.vote .track i { position: absolute; left: 1px; top: 1px; bottom: 1px; background: repeating-linear-gradient(90deg, var(--ph-hi) 0 5px, transparent 5px 7px); }

.toast { color: var(--lamp); min-height: 1.45em; font-size: 13.5px; }

/* ---------- prompt ---------- */
.promptbar { border-top: 1px dashed var(--ph-faint); padding-top: 8px; display: grid; gap: 2px; }
.prompt { display: flex; gap: 10px; align-items: baseline; }
.prompt .gt { color: var(--ph-hi); }
.prompt input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ph-hi); caret-color: var(--lamp); text-shadow: inherit; padding: 0;
}
.prompt input::placeholder { color: var(--ph-dim); opacity: 1; }
.out { font-size: 13px; color: var(--ph); min-height: 1.4em; white-space: pre-wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  body { font-size: 14px; }
  .crt { border-radius: 30px / 40px; }
  .screen { padding: 18px 18px 14px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .deck { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .side { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; overflow: visible; }
  .portrait { width: 92px; flex: none; }
  .side .hello { display: none; }
  .menu { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 3px 16px; font-size: 13px; flex: 1; min-width: 0; margin: 0; }
  .radio { display: none; }
  .hud .disp { font-size: 28px; }
  .brand .small { display: none; }
  .hud .stats { display: none; }
  .title { font-size: 31px; }
  .fx.glare { width: 40%; height: 14%; }
}
@media (max-width: 460px) {
  .menu { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 2px 10px; font-size: 12px; }
  .menu button { white-space: nowrap; }
  .side { gap: 6px 10px; }
  .portrait { width: 74px; }
  .form { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .form .k { margin-top: 8px; }
  .feed .ln { grid-template-columns: 5ch minmax(0, 1fr); }
  .feed .ln .tk { display: none; }
}

/* ---------- example shaft tour ---------- */
.tour { border: 1px dashed var(--ph-hi); padding: 10px 12px 12px; margin: 0 0 14px; background: rgba(228, 191, 77, .04); }
.tour p { margin: 6px 0 10px; max-width: 78ch; }
.tour-h { margin-top: 8px; font-family: var(--f-disp); font-size: 24px; line-height: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tour .dots { display: inline-flex; gap: 4px; margin-left: auto; }
.tour .dots i { width: 7px; height: 7px; border: 1px solid var(--ph-dim); display: inline-block; }
.tour .dots i.done { background: var(--ph-dim); }
.tour .dots i.on { background: var(--ph-hi); border-color: var(--ph-hi); }
.menu .new { font-size: 11px; color: var(--lamp); letter-spacing: .06em; margin-left: 4px; }
.menu button[aria-current="page"] .new { color: var(--glass); }
@media (max-width: 760px) { .menu .new { display: none; } .tour-h { font-size: 21px; } }

/* ---------- X link ---------- */
.hud .xlink { margin-left: auto; color: var(--ph-hi); text-decoration: none; font-size: 13px; white-space: nowrap; }
.hud .xlink::before { content: "["; color: var(--ph-dim); margin-right: 3px; }
.hud .xlink::after { content: "]"; color: var(--ph-dim); margin-left: 3px; }
.hud .xlink .xmark { font-family: "Segoe UI Symbol", "Noto Sans Math", "Cambria Math", sans-serif; margin-right: 5px; }
.hud .xlink:hover, .hud .xlink:focus-visible { background: var(--ph-hi); color: var(--glass); text-shadow: none; outline: none; }
.hud .xlink:hover::before, .hud .xlink:hover::after, .hud .xlink:focus-visible::before, .hud .xlink:focus-visible::after { color: var(--glass); }
.hud .xlink + .wallet { margin-left: 0; }
.side .follow { font-size: 12.5px; color: var(--ph); text-decoration: none; }
.side .follow:hover, .side .follow:focus-visible { color: var(--ph-hi); text-decoration: underline; outline: none; }
@media (max-width: 820px) { .hud .xlink .xh { display: none; } .hud .xlink .xmark { margin-right: 0; } .side .follow { display: none; } }
a.btn { text-decoration: none; display: inline-block; }