@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

:root {
  --g: #00ff41;
  --dg: #00aa2a;
  --ddg: #005514;
  --dark: #060a06;
  --panel: #0b150b;
  --border: #163016;
  --red: #ff2222;
  --yellow: #ffd700;
  --blue: #00aaff;
  --white: #d0ffd0;
  --gray: #336633;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--dark);
  color: var(--g);
  font-family: 'Share Tech Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px);
}

/* ── SCREENS ─────────────────────────────────────────────── */
.screen { display: none; min-height: 100vh; padding: 14px; }
.screen.active { display: flex; flex-direction: column; }

/* ── TITLE ───────────────────────────────────────────────── */
#title-screen {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #001800 0%, var(--dark) 100%);
  position: relative;
  overflow: hidden;
}

.matrix-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.12;
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--g);
  line-height: 1.5;
  word-break: break-all;
  padding: 10px;
}

.title-wrap { position: relative; z-index: 2; }

.title-logo {
  font-family: 'VT323', monospace;
  font-size: clamp(52px, 10vw, 110px);
  line-height: .9;
  color: var(--g);
  text-shadow: 0 0 30px var(--g), 0 0 70px var(--dg);
  animation: flicker 4s infinite;
  margin-bottom: 6px;
}

.title-sub {
  font-family: 'VT323', monospace;
  font-size: clamp(18px, 3vw, 30px);
  color: var(--dg);
  letter-spacing: 6px;
  margin-bottom: 36px;
}

@keyframes flicker {
  0%, 91%, 93%, 100% { opacity: 1; }
  92% { opacity: .4; }
}

.tbtn {
  font-family: 'VT323', monospace;
  font-size: 24px;
  background: transparent;
  border: 1px solid var(--g);
  color: var(--g);
  padding: 9px 44px;
  cursor: pointer;
  letter-spacing: 3px;
  transition: all .15s;
  display: block;
  margin: 7px auto;
  width: 270px;
  position: relative;
  overflow: hidden;
}

.tbtn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g);
  transform: translateX(-101%);
  transition: transform .2s;
  z-index: -1;
}

.tbtn:hover { color: var(--dark); }
.tbtn:hover::before { transform: translateX(0); }

.title-brief {
  max-width: 500px;
  margin: 28px auto 0;
  border: 1px solid var(--border);
  background: rgba(0, 18, 0, .55);
  padding: 14px;
  font-size: 11px;
  color: var(--gray);
  line-height: 2;
  text-align: left;
}

.title-brief::before {
  content: '[ MISSION BRIEF ]';
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--dg);
  display: block;
  margin-bottom: 8px;
}

/* ── GAME HUD ────────────────────────────────────────────── */
#game-screen { max-width: 920px; margin: 0 auto; width: 100%; gap: 9px; }

.hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }

.hbox { border: 1px solid var(--border); background: var(--panel); padding: 7px 12px; }
.hbox .lbl { font-size: 9px; color: var(--gray); letter-spacing: 2px; }
.hbox .val { font-family: 'VT323', monospace; font-size: 26px; color: var(--g); }
.hbox .val.danger { color: var(--red); animation: flicker .4s infinite; }
.hbox .val.warn { color: var(--yellow); }

.susp-wrap { border: 1px solid var(--border); background: var(--panel); padding: 8px 12px; }
.susp-top { font-size: 9px; color: var(--gray); letter-spacing: 2px; display: flex; justify-content: space-between; margin-bottom: 5px; }
.susp-track { height: 15px; background: #0a100a; border: 1px solid var(--border); overflow: hidden; }

.susp-fill {
  height: 100%;
  background: var(--g);
  transition: width .45s, background .45s;
  position: relative;
}

.susp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0,0,0,.22) 7px, rgba(0,0,0,.22) 9px);
}

.susp-fill.med { background: var(--yellow); }
.susp-fill.high { background: var(--red); }

/* ── CLASSROOM ───────────────────────────────────────────── */
.classroom { border: 1px solid var(--border); background: var(--panel); padding: 13px; position: relative; }

.room-hdr { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 7px; margin-bottom: 10px; }
.room-name { font-family: 'VT323', monospace; font-size: 20px; color: var(--dg); }
.t-info { font-size: 10px; color: var(--gray); text-align: right; }
.t-name { font-family: 'VT323', monospace; font-size: 18px; color: var(--yellow); }

.desk-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-bottom: 8px; position: relative; }

.desk {
  aspect-ratio: 1.2;
  background: #0a130a;
  border: 1px solid #0d1b0d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all .25s;
}

.desk.player { background: #002800; border-color: var(--g); box-shadow: 0 0 7px rgba(0,255,65,.3); }
.desk.empty { opacity: .2; }
.desk.caught-fx { background: #2a0000; border-color: var(--red); animation: cflash .25s 4; }

@keyframes cflash {
  0%, 100% { background: #2a0000; }
  50% { background: #550000; }
}

.teacher-sprite {
  position: absolute;
  font-size: 20px;
  transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 0 4px var(--red));
  z-index: 5;
  pointer-events: none;
}

/* ── DIALOGUE ────────────────────────────────────────────── */
.dlg { border: 1px solid var(--border); background: var(--panel); padding: 11px 14px; min-height: 68px; }
.dlg-spk { font-family: 'VT323', monospace; font-size: 17px; color: var(--yellow); margin-bottom: 3px; }
.dlg-txt { font-size: 11px; color: var(--white); line-height: 1.9; min-height: 32px; }

/* ── SECTION LABELS ──────────────────────────────────────── */
.sec-lbl { font-family: 'VT323', monospace; font-size: 14px; color: var(--gray); letter-spacing: 2px; margin-bottom: 5px; }

/* ── ACTIONS ─────────────────────────────────────────────── */
.actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 5px; }

.abtn {
  font-family: 'VT323', monospace;
  font-size: 16px;
  background: #050e05;
  border: 1px solid var(--border);
  color: var(--g);
  padding: 8px 9px;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  display: flex;
  flex-direction: column;
}

.abtn:hover:not(:disabled) { background: #002000; border-color: var(--g); box-shadow: 0 0 9px rgba(0,255,65,.12); }
.abtn:disabled { opacity: .35; cursor: not-allowed; }
.abtn .atags { display: flex; justify-content: space-between; margin-top: 3px; }
.abtn .arisk { font-size: 9px; }
.abtn .acost { font-size: 9px; color: var(--yellow); }
.rlo { color: var(--g); }
.rmd { color: var(--yellow); }
.rhi { color: var(--red); }

/* ── INVENTORY ───────────────────────────────────────────── */
.inv-row { display: flex; flex-wrap: wrap; gap: 5px; }

.ipill {
  font-family: 'VT323', monospace;
  font-size: 13px;
  border: 1px solid var(--dg);
  background: #0a1a0a;
  padding: 3px 9px;
  color: var(--dg);
  cursor: pointer;
  transition: all .12s;
}

.ipill:hover { border-color: var(--g); color: var(--g); background: #001a00; }

/* ── LOG ─────────────────────────────────────────────────── */
.glog {
  border: 1px solid var(--border);
  background: #030803;
  padding: 7px 9px;
  height: 75px;
  overflow-y: auto;
  font-size: 10px;
  color: var(--gray);
}

.glog .e { margin-bottom: 2px; }
.glog .ew { color: var(--yellow); }
.glog .ed { color: var(--red); }
.glog .es { color: var(--g); }
.glog .em { color: var(--blue); }
.glog::-webkit-scrollbar { width: 4px; }
.glog::-webkit-scrollbar-thumb { background: var(--border); }

/* ── SHOP ────────────────────────────────────────────────── */
#shop-screen { max-width: 680px; margin: 0 auto; width: 100%; gap: 9px; }

.shop-hdr {
  font-family: 'VT323', monospace;
  font-size: 42px;
  text-align: center;
  color: var(--g);
  text-shadow: 0 0 18px var(--g);
  border-bottom: 1px solid var(--border);
  padding-bottom: 7px;
}

.shop-bal { text-align: center; font-family: 'VT323', monospace; font-size: 20px; color: var(--yellow); }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 8px; }

.scard {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 11px;
  cursor: pointer;
  transition: all .14s;
}

.scard:hover:not(.owned):not(.noafford) { border-color: var(--g); box-shadow: 0 0 11px rgba(0,255,65,.1); }
.scard.owned { opacity: .5; cursor: default; border-color: var(--ddg); }
.scard.noafford { opacity: .4; cursor: not-allowed; }
.s-icon { font-size: 26px; margin-bottom: 5px; }
.s-name { font-family: 'VT323', monospace; font-size: 19px; }
.s-desc { font-size: 10px; color: var(--gray); margin: 3px 0 7px; line-height: 1.7; }
.s-price { font-family: 'VT323', monospace; font-size: 17px; color: var(--yellow); }
.s-owned { font-size: 9px; color: var(--dg); margin-top: 3px; }

/* ── EXPEL ───────────────────────────────────────────────── */
#expel-screen {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, #1e0000, var(--dark));
}

.exp-big {
  font-family: 'VT323', monospace;
  font-size: clamp(60px, 14vw, 140px);
  color: var(--red);
  text-shadow: 0 0 30px var(--red);
  animation: eshake .4s ease-out;
  line-height: 1;
}

@keyframes eshake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-12px); }
  40% { transform: translateX(12px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.exp-sub { font-size: 12px; color: var(--white); max-width: 460px; margin: 14px auto; line-height: 2; }
.exp-pen { color: var(--red); font-size: 11px; margin: 8px 0; }
.exp-cost { font-family: 'VT323', monospace; font-size: 22px; color: var(--yellow); margin: 7px 0; }

/* ── BOARDING ────────────────────────────────────────────── */
#boarding-screen {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, #150005, var(--dark));
}

.brd-big {
  font-family: 'VT323', monospace;
  font-size: clamp(28px, 6vw, 68px);
  color: #cc0033;
  text-shadow: 0 0 20px #cc0033;
  line-height: 1.2;
}

.brd-desc { font-size: 11px; color: #ffaaaa; max-width: 460px; margin: 14px auto; line-height: 2; }

/* ── PERIOD END ──────────────────────────────────────────── */
#period-end-screen { align-items: center; justify-content: center; text-align: center; }

.pe-title { font-family: 'VT323', monospace; font-size: 58px; color: var(--g); text-shadow: 0 0 18px var(--g); }

.pe-stats {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 18px 38px;
  margin: 18px auto;
  font-size: 13px;
  color: var(--white);
  line-height: 2.3;
  min-width: 280px;
}

.pe-val { color: var(--yellow); font-family: 'VT323', monospace; font-size: 19px; }

/* ── WIN ─────────────────────────────────────────────────── */
#win-screen {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, #002200, var(--dark));
}

.win-big {
  font-family: 'VT323', monospace;
  font-size: clamp(40px, 8vw, 90px);
  color: var(--g);
  text-shadow: 0 0 30px var(--g), 0 0 60px var(--dg);
  animation: flicker 2s infinite;
}

.win-sub { font-size: 12px; color: var(--white); max-width: 440px; margin: 16px auto; line-height: 2; }

/* ── GENERIC BUTTONS ─────────────────────────────────────── */
.btn {
  font-family: 'VT323', monospace;
  font-size: 21px;
  background: transparent;
  border: 1px solid var(--g);
  color: var(--g);
  padding: 9px 28px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all .15s;
  margin: 5px;
}

.btn:hover { background: var(--g); color: var(--dark); }
.btn.red { border-color: var(--red); color: var(--red); }
.btn.red:hover { background: var(--red); color: var(--dark); }
.btn.yellow { border-color: var(--yellow); color: var(--yellow); }
.btn.yellow:hover { background: var(--yellow); color: var(--dark); }

/* ── FLASH OVERLAY ───────────────────────────────────────── */
#flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity .08s;
}