:root{
  --monitor-bg: #071017;    /* deep monitor bezel interior */
  --bezel: #0b1116;         /* monitor frame */
  --green: #7ef08a;         /* terminal green text */
  --muted-green: #6bb378;
  --answer: #ffd27a;        /* model answer warm yellow */
  --cat-text: #ffd27a;      /* category button text color (amber) */
  --glass: rgba(255,255,255,0.03);
  --shadow: rgba(0,0,0,0.6);
  --panel: #051018;
  --glass-reflect: rgba(255,255,255,0.02);
}

/* Splash / first-page styles */
.splash{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(2,6,10,0.95), rgba(4,9,12,0.98));
  z-index:2000;
  padding:22px;
}
.splash-inner{
  max-width:1100px;
  width:100%;
  text-align:center;
  padding:42px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(10,15,18,0.6), rgba(4,7,9,0.55));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 18px 40px rgba(0,0,0,0.7);
}
.splash-title{
  font-family: "SFMono-Regular","Roboto Mono","Menlo","Courier New",monospace;
  font-weight:800;
  color: var(--answer);
  font-size:48px;
  line-height:1.05;
  margin:0 0 28px 0;
  letter-spacing:0.6px;
  text-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.splash-next{
  font-family: inherit;
  font-size:20px;
  padding:14px 22px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(126,240,138,0.08), rgba(126,240,138,0.02));
  color: var(--cat-text);
  border: 1px solid rgba(126,240,138,0.12);
  cursor:pointer;
  box-shadow: 0 8px 0 rgba(0,0,0,0.6);
}

/* Terminal-like monospace base for a computer screen feel */
*{box-sizing:border-box;margin:0;padding:0;font-family: "SFMono-Regular","Roboto Mono","Menlo","Courier New",monospace; color:var(--green)}

html,body,#app{height:100%; font-size:18px}
body{
  background: radial-gradient(circle at 50% 10%, #0b1b22 0%, #081016 40%, #02060a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Monitor bezel overlay */
body.comic::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.01), transparent 30%);
  z-index:1100;
  mix-blend-mode:overlay;
  opacity:0.45;
}

/* Monitor container (bezel + screen) — expanded to full viewport */
.crt{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  max-width:100%;
  max-height:100%;
  background: linear-gradient(180deg, #0a0f12, #071014);
  border-radius:0;
  padding:18px;
  box-shadow:
    none;
  border: 0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  z-index:100;
}

/* inner screen with subtle CRT glow and scanlines */
.frame{
  width:100%;
  height:100%;
  background: linear-gradient(180deg, var(--monitor-bg), #041219 60%);
  border-radius:8px;
  padding:18px;
  box-shadow: inset 0 0 40px rgba(30,200,120,0.03);
  position:relative;
  display:flex;
  flex-direction:column;
}

/* Top toolbar like a window chrome */
.status-bar{
  height:auto;
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  margin-bottom:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.02);
}
.title{
  padding:6px 10px;
  border-radius:6px;
  background:transparent;
  color:var(--green);
  font-weight:700;
  font-size:18px;
  opacity:0.95;
  letter-spacing:0.6px;
}

/* Top menu becomes compact toolbar buttons (like app buttons) */
.top-menu{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:1200;
  padding:6px;
  background:transparent;
}
.top-menu button{
  min-width:240px;
  height:78px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border:1px solid rgba(255,255,255,0.03);
  border-radius:8px;
  font-weight:800;
  font-size:22px;
  color:var(--cat-text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 16px;
  transition: transform .08s, background .12s;
  box-shadow: 0 6px 0 rgba(0,0,0,0.6);
}
.top-menu button:hover{ transform:translateY(-3px) }
.top-menu button.active{
  background: linear-gradient(180deg, rgba(126,240,138,0.06), rgba(126,240,138,0.02));
  box-shadow: 0 6px 0 rgba(0,0,0,0.65), 0 0 12px rgba(126,240,138,0.06);
  border-color: rgba(126,240,138,0.18);
  color:var(--cat-text);
}

/* Per-category text colors for buttons and blackboard content */
.top-menu button[data-cat="warm"]{ color: #ff9f68 } /* warm / amber-orange */
.top-menu button[data-cat="studies"]{ color: #7ef0d0 } /* studies / mint */
.top-menu button[data-cat="rules"]{ color: #ffd27a } /* rules / warm yellow */
.top-menu button[data-cat="future"]{ color: #86b6ff } /* future / sky blue */

/* When active, keep stronger color */
.top-menu button.active[data-cat="warm"]{ color: #ff8a3a; border-color: rgba(255,138,58,0.16); box-shadow: 0 6px 0 rgba(0,0,0,0.65), 0 0 14px rgba(255,138,58,0.06) }
.top-menu button.active[data-cat="studies"]{ color: #41d8b3; border-color: rgba(65,216,179,0.12); box-shadow: 0 6px 0 rgba(0,0,0,0.65), 0 0 14px rgba(65,216,179,0.06) }
.top-menu button.active[data-cat="rules"]{ color: #ffd27a; border-color: rgba(255,210,122,0.12); box-shadow: 0 6px 0 rgba(0,0,0,0.65), 0 0 14px rgba(255,210,122,0.06) }
.top-menu button.active[data-cat="future"]{ color: #5f99ff; border-color: rgba(95,153,255,0.12); box-shadow: 0 6px 0 rgba(0,0,0,0.65), 0 0 14px rgba(95,153,255,0.06) }

/* Color the blackboard title/question/labels per category using the data attribute on .blackboard */
.blackboard[data-cat="warm"] .chalk-title,
.blackboard[data-cat="warm"] .chalk-text,
.blackboard[data-cat="warm"] .submission .text,
.blackboard[data-cat="warm"] .model-label { color: #ff9f68 }

.blackboard[data-cat="studies"] .chalk-title,
.blackboard[data-cat="studies"] .chalk-text,
.blackboard[data-cat="studies"] .submission .text,
.blackboard[data-cat="studies"] .model-label { color: #7ef0d0 }

.blackboard[data-cat="rules"] .chalk-title,
.blackboard[data-cat="rules"] .chalk-text,
.blackboard[data-cat="rules"] .submission .text,
.blackboard[data-cat="rules"] .model-label { color: #ffd27a }

.blackboard[data-cat="future"] .chalk-title,
.blackboard[data-cat="future"] .chalk-text,
.blackboard[data-cat="future"] .submission .text,
.blackboard[data-cat="future"] .model-label { color: #86b6ff }

/* content area scaled to look like a terminal window */
.content{
  display:flex;
  height:calc(100% - 110px);
  gap:16px;
  padding:12px;
}
.blackboard-wrap{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:6px}
.blackboard{
  width:100%;
  height:100%;
  background: linear-gradient(180deg,#04131a,#021116);
  border-radius:6px;
  padding:18px;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.6), 0 8px 0 rgba(0,0,0,0.5);
  border:2px solid rgba(126,240,138,0.04);
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
}

/* title is hidden (terminal box removed) */
.title{ display:none }

/* title is small and terminal-like */
.chalk-title{
  color:var(--green);
  font-size:20px;
  font-weight:700;
  letter-spacing:0.8px;
  margin-bottom:6px;
  padding:6px 10px;
  border-radius:4px;
  background: linear-gradient(180deg, rgba(126,240,138,0.02), transparent);
  border:1px solid rgba(126,240,138,0.03);
}

/* question area becomes a terminal text area */
.chalk-text{
  background: transparent;
  border-radius:6px;
  padding:18px;
  font-size:20px;
  line-height:1.6;
  color:var(--green);
  position:relative;
  min-height:240px;
  overflow:auto;
  border:1px solid rgba(255,255,255,0.02);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.6);
  white-space:pre-wrap;
  font-family: inherit;
}

/* subtle CRT scanlines overlay inside the text area */
.chalk-text::before{
  content:'';
  position:absolute;
  inset:0;
  background-image: linear-gradient(rgba(0,0,0,0.05) 50%, rgba(255,255,255,0.01) 51%);
  background-size: 100% 4px;
  pointer-events:none;
  opacity:0.15;
}

/* thin caret more like a terminal cursor */
.chalk-text .cursor {
  display:inline-block;
  width:10px;
  height:24px;
  vertical-align:bottom;
  background:var(--green);
  border-radius:2px;
  box-shadow: 0 0 6px rgba(126,240,138,0.6);
  animation: blink 900ms steps(1) infinite;
}

/* controls slimmed to toolbar chips */
.controls{display:flex;gap:8px;align-items:center;margin-left:auto}
.controls button{
  background: transparent;
  color:var(--green);
  padding:8px 10px;
  border-radius:6px;
  border:1px solid rgba(126,240,138,0.04);
  font-weight:700;
  cursor:pointer;
  backdrop-filter: blur(2px);
}
.controls .auto{background: transparent;color:var(--muted-green);border:1px solid rgba(255,255,255,0.01);padding:6px 8px;border-radius:6px}

/* model answer label styled as secondary terminal output */
.model-label{
  margin-top:12px;
  font-size:18px;
  color:var(--muted-green);
  opacity:0.95;
  padding-top:6px;
}
.model-answer{
  margin-top:8px;
  padding:12px;
  border-radius:6px;
  color:var(--answer);
  font-size:20px;
  line-height:1.4;
  border:1px solid rgba(255,210,122,0.06);
  background: linear-gradient(180deg, rgba(255,210,122,0.03), rgba(255,210,122,0.005));
}

/* enlarge submission text to match readability */
.submissions{
  margin-top:12px;
  max-height: 34vh;
  overflow:auto;
  padding:12px;
  border-radius:6px;
  background: linear-gradient(180deg,#04131a,#021116);
  font-size:14px;
  color:var(--green);
  border:1px solid rgba(255,255,255,0.02);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.6);
}
.submission{
  padding:10px 12px;
  margin-bottom:10px;
  border-radius:6px;
  background: rgba(255,255,255,0.01);
  border:1px solid rgba(255,255,255,0.02);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.submission .meta{opacity:0.6;font-size:12px;color:var(--muted-green)}
.submission .text{font-size:20px;line-height:1.4;color:var(--green)}

/* responsive */
@media (max-width:1100px){
  .crt{width:92vw;height:78vh}
  .top-menu button{ min-width:200px; height:64px; font-size:18px; padding:10px 12px }
  .chalk-text{font-size:18px; min-height:180px}
  .splash-title{font-size:34px}
  .splash-inner{padding:26px}
}
@media (max-width:780px){
  .top-menu{ gap:6px; top:8px }
  .top-menu button{ min-width:150px; height:54px; font-size:16px; padding:8px 10px }
  .chalk-title{font-size:16px}
  .chalk-text{font-size:16px}
  .splash-title{font-size:22px}
  .splash-inner{padding:18px}
}

/* keep blink animation */
@keyframes blink {50% {opacity:0}}