:root{
  --bg:#f5f7f4;
  --surface:#ffffff;
  --surface-soft:#edf3ec;
  --text:#1f2a24;
  --muted:#617067;
  --border:#cbd7ce;
  --accent:#2f6b45;
  --accent-soft:#dcecdf;
  --series:#4f8a63;
  --warning:#f8efe2;
  --radius:18px;
  --shadow:0 8px 24px rgba(30,50,38,.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}

button,input,select,textarea{font:inherit}

button:focus-visible{
  outline:3px solid #76a985;
  outline-offset:2px;
}

.app-shell{
  width:min(1180px,calc(100% - 32px));
  margin:32px auto 56px;
}

.hidden{display:none!important}

.hero{margin-bottom:24px}
.hero h1,.game-header h1{
  margin:.2rem 0 .45rem;
  font-size:clamp(2rem,5vw,3.25rem);
  line-height:1.06;
}
.hero p,.game-header p{max-width:800px}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.78rem;
  font-weight:800;
  color:var(--muted);
}

.start-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.card,.panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}

.card{
  padding:24px;
  box-shadow:var(--shadow);
}

.panel{
  background:var(--surface-soft);
  padding:20px;
}

.compact{padding:16px}

.card h2,.panel h3{
  margin-top:0;
}

.muted{color:var(--muted)}
.small{font-size:.94rem}

.btn{
  min-height:46px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  padding:11px 16px;
  font-weight:750;
  cursor:pointer;
  transition:.15s ease;
}

.btn:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:#9fb2a4;
}

.btn-primary{
  background:var(--accent-soft);
  border-color:var(--accent);
}

.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.full{width:100%}

.scenario-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.scenario-button{
  min-height:94px;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.scenario-button strong{
  display:block;
  font-size:.98rem;
}

.scenario-button span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:500;
  line-height:1.35;
}

.roles-panel{margin-top:16px}
.roles-panel h3{margin-bottom:14px}
.roles-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.roles-grid div{
  padding:12px 14px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--border);
}
.roles-grid span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  margin-top:3px;
}

.game-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:16px;
}

.steps{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 18px;
}

.step-dot{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:.82rem;
  background:var(--surface);
}
.step-dot.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  font-weight:800;
}

.phase1-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:16px;
}

.room{
  position:relative;
  aspect-ratio:16/9;
  min-height:440px;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:
    linear-gradient(to bottom,#f2f5f0 0 66%,#d9c4a6 66% 67%,#e7d7c0 67% 100%);
  box-shadow:var(--shadow);
}

.room::before{
  content:"";
  position:absolute;
  left:0;right:0;top:65%;
  height:2px;
  background:#a8b3aa;
}

.board{
  position:absolute;
  left:34%;top:19%;
  width:32%;height:30%;
  border:6px solid #7b6a53;
  border-radius:7px;
  background:#e9ece6;
}

.desk{
  position:absolute;
  bottom:9%;
  width:18%;
  height:13%;
  border:2px solid #8f7a5f;
  border-radius:8px;
  background:#c7aa80;
}
.d1{left:16%}.d2{left:41%}.d3{left:66%}

.hotspot{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  border-radius:999px;
  border:2px solid var(--border);
  background:rgba(255,255,255,.96);
  color:var(--text);
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.hotspot.done{
  border-color:var(--series);
  background:#eef7f0;
}
.h-light{left:38%;top:4%}
.h-climate{left:3%;top:42%}
.h-window{left:4%;top:10%}
.h-projector{right:4%;top:25%}
.h-computers{left:37%;bottom:4%}
.h-power{right:3%;bottom:7%}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.tag{
  display:inline-block;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 9px;
  background:var(--surface);
  font-size:.78rem;
  white-space:nowrap;
}

.top-space{margin-top:16px}

.credit-box{
  min-width:170px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  padding:12px 16px;
}
.credit-box span,.budget-block span{
  display:block;
  color:var(--muted);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.credit-box strong,.budget-block strong{
  display:block;
  font-size:1.8rem;
  margin-top:2px;
}

.tech-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.tech-grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.tech-card.selected{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent),var(--shadow);
}

.tech-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.tech-top h3{
  margin:0 0 4px;
  font-size:1.05rem;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.alert-card{
  background:var(--warning);
  margin-bottom:16px;
}

.twist-grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:16px;
}

.budget-block{margin-top:18px}

.result-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:16px;
}
.result-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.meters{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:17px;
}
.meter-row-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.93rem;
  margin-bottom:6px;
}
.meter{
  height:10px;
  border-radius:999px;
  background:#e6ebe7;
  border:1px solid var(--border);
  overflow:hidden;
}
.meter span{
  display:block;
  height:100%;
  background:var(--series);
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.career-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.career-grid div{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}

.report-card{margin-top:16px}
.report-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.report-grid ol{
  padding-left:20px;
  margin-bottom:0;
}
.report-grid li+li{margin-top:8px}

@media(max-width:900px){
  .roles-grid{grid-template-columns:repeat(2,1fr)}
  .phase1-grid,.twist-grid,.result-grid{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room{min-height:390px}
}

@media(max-width:640px){
  .app-shell{width:min(100% - 20px,1180px);margin-top:18px}
  .start-grid,.report-grid{grid-template-columns:1fr}
  .scenario-grid{grid-template-columns:1fr}
  .roles-grid{grid-template-columns:1fr}
  .game-header,.section-head{flex-direction:column}
  .tech-grid,.tech-grid.two,.career-grid{grid-template-columns:1fr}
  .credit-box{width:100%}
  .room{min-height:430px;aspect-ratio:auto}
  .hotspot{font-size:.77rem;padding:7px 9px}
  .h-light{left:28%}
  .h-computers{left:27%}
}