:root{
  --bg:#0b1020;
  --card:#111936;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --accent:#22c55e;
  --danger:#ef4444;
  --border:rgba(148,163,184,.25);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1000px 600px at 20% 0%, rgba(34,197,94,.10), transparent 60%),
              radial-gradient(900px 600px at 80% 10%, rgba(59,130,246,.08), transparent 60%),
              var(--bg);
  color:var(--text);
}
.hidden{display:none !important}
.topbar{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background: rgba(11,16,32,.88);
  backdrop-filter: blur(8px);
  z-index:10;
}
.brand{display:flex; gap:10px; align-items:center}
.logo{
  width:42px;height:42px;border-radius:16px;
  display:grid;place-items:center;
  background: rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.35);
  font-size:20px;
}
.brandText .title{font-weight:900; letter-spacing:.2px}
.brandText .subtitle{font-size:12px; color:var(--muted)}
.hud{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.playerTag{
  display:flex; gap:8px; align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(17,25,54,.55);
  cursor:pointer;
  user-select:none;
}
.playerTag:hover{border-color: rgba(148,163,184,.5)}
.playerTag span:nth-child(1){font-size:16px}
.playerTag span:nth-child(2){font-weight:850}
.hudItem{
  display:flex; gap:8px; align-items:baseline;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(17,25,54,.55);
}
.hudLabel{font-size:12px; color:var(--muted)}
.hudValue{font-weight:900}
.btn{
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(11,16,32,.35);
  color: var(--text);
  padding:9px 12px;
  cursor:pointer;
  font-weight:750;
}
.btn:hover{border-color: rgba(148,163,184,.5)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.primary{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.45);
}
.danger{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.45);
}
.card{
  background: rgba(17,25,54,.86);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.small{font-size:12px; color:var(--muted); line-height:1.45}
.muted{color:var(--muted)}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color: var(--muted);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);
  color: #bbf7d0;
  font-size:12px;
  margin-bottom:8px;
}
/* HOME */
.home{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:stretch;
}
.hero h1{margin:6px 0 6px 0; font-size:28px; letter-spacing:.2px}
.hero p{margin:0}
.heroActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.statGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  height:100%;
}
.stat{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(11,16,32,.35);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.statLabel{font-size:12px; color:var(--muted)}
.statValue{font-size:22px; font-weight:950}
.twoCols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.cardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.dailyList{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dailyItem{
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(11,16,32,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.dailyLeft{display:flex; flex-direction:column; gap:4px}
.dailyTitle{font-weight:850}
.dailyMeta{font-size:12px; color:var(--muted)}
.chapters h2{margin: 6px 0 10px 2px}
.chapterCards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.chapterCard{
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(17,25,54,.65);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chapterTitle{font-weight:950; font-size:16px}
.chapterDesc{font-size:12px; color:var(--muted); line-height:1.45}
.chapterRow{display:flex; align-items:center; justify-content:space-between; gap:12px}
.progressBar{height:10px; border-radius:999px; border:1px solid var(--border); background: rgba(11,16,32,.35); overflow:hidden}
.progressFill{height:100%; width:0%; background: rgba(34,197,94,.55)}
.chapterActions{display:flex; gap:10px; flex-wrap:wrap}
/* GAME */
.game{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.gameHeader{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.gameMeta{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.prompt{
  white-space:pre-wrap;
  background: rgba(11,16,32,.55);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin:0 0 12px 0;
}
.workspace{display:flex; flex-direction:column; gap:10px}
textarea{
  width:100%;
  min-height: 190px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(11,16,32,.45);
  color: var(--text);
  padding:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.45;
}
.choices{display:flex; flex-direction:column; gap:8px}
.choice{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(11,16,32,.35);
}
.choice input{margin-top:3px}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}
.feedback{
  margin-top: 10px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(11,16,32,.45);
  padding:12px;
  min-height: 52px;
}
.feedback.good{border-color: rgba(34,197,94,.45)}
.feedback.bad{border-color: rgba(239,68,68,.45)}
.console{
  background: rgba(11,16,32,.55);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin:0;
  min-height: 90px;
  white-space: pre-wrap;
}
.progressRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
/* OVERLAYS */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:50;
}
.overlayCard{ width:min(1080px, 100%); max-height: 92vh; overflow-y: auto; overflow-x: hidden; }
.overlayHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.overlayGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.oneCol{grid-template-columns:1fr}
.panel{
  padding:12px;
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(11,16,32,.35);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.panelTitle{font-weight:950}
.panelActions{display:flex; gap:10px; flex-wrap:wrap}
.row{display:flex; flex-direction:column; gap:6px}
select{
  background: rgba(17,25,54,.9);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
}
.textInput{
  background: rgba(17,25,54,.9);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}
.emojiGrid{
  display:grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap:8px;
}
.emojiBtn{
  padding:8px 0;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(11,16,32,.35);
  cursor:pointer;
  font-size:18px;
}
.emojiBtn.selected{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.14);
}
.narrativeText{
  white-space:pre-wrap;
  margin:0;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(11,16,32,.45);
  color: #dbeafe;
  line-height:1.55;
}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .chapterCards{grid-template-columns:1fr}
  .overlayGrid{grid-template-columns:1fr}
  .twoCols{grid-template-columns:1fr}
  .emojiGrid{grid-template-columns: repeat(8, minmax(0, 1fr));}
}

/* --- v5 overlay layout overrides (horizontal + scroll) --- */
.overlay{
  align-items: flex-start;
  padding-top: 14px;
}
.overlayCard{
  max-height: 88vh;
  overflow: auto;
}
.overlayGrid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1200px){
  .overlayGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .overlayGrid{ grid-template-columns: 1fr; }
}
.overlayHeader{ margin-bottom: 10px; }
.panel{ gap: 8px; padding: 12px; }
.row{ gap: 4px; }
select, .textInput{ padding: 8px 10px; }


.statSub{ font-size: 12px; color: rgba(255,255,255,.7); margin-top: 6px; }

.homeBtn{ box-shadow: 0 0 0 1px rgba(46,204,113,.35) inset; }

.heroLeft{display:flex; flex-direction:column; gap:10px}
.heroMetaRow{display:flex; align-items:center; justify-content:space-between; gap:12px}
.heroActions.compact{margin-top:0}
.hero{gap:12px; align-items:start}
.hero .chip{margin:0}

.homeBtn{ font-weight:700; }

/* --- v10.1 compact hero layout --- */
.hero.compactHero{
  padding: 16px;
  gap: 12px;
}
.hero.compactHero .heroLeft{
  gap: 8px;
}
.hero.compactHero .heroActions.compact{
  gap: 10px;
}
.hero.compactHero .heroActions.compact .btn{
  padding: 10px 14px;
}
.hero.compactHero .statGrid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px){
  .hero.compactHero .statGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .hero.compactHero .statGrid{
    grid-template-columns: 1fr;
  }
}
.hero.compactHero .stat{
  padding: 12px 14px;
}
.hero.compactHero .statLabel{
  font-size: 12px;
  margin-bottom: 6px;
}
.hero.compactHero .statValue{
  font-size: 22px;
  line-height: 1.1;
}
.hero.compactHero .statSub{
  font-size: 11px;
  margin-top: 4px;
}

/* --- v10.2 alignment fixes --- */
.hero.compactHero{
  align-items: center;
}
.hero.compactHero .heroLeft{
  min-width: 520px;
}
.hero.compactHero .heroMetaRow{
  justify-content: flex-start;
  gap: 16px;
}
.hero.compactHero #continueHint{
  margin-left: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero.compactHero .heroRight{
  width: 100%;
}
.hero.compactHero .statGrid{
  align-items: stretch;
}

.challengeActions{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.challengeActions .btn{ align-self:flex-start; }
.challengeActions #challengeHint{ margin:0; }


/* --- v10.3 challenge layout --- */
.challengeWrap{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.challengeRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.challengeRow .btn{ flex: 0 0 auto; }
.pillMuted{
  opacity: .9;
}


.hudStatsGroup{
  display:flex;
  gap:12px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  align-items: center;
}
.hudStatsGroup .hudItem{
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.progressWrap{display:flex; align-items:center; gap:10px; width:100%;}
.chapterRow .progressBar{height:12px; flex:1; }
.progressMeta{min-width:42px; text-align:right;}

/* --- compact blocks --- */
.compactBlock{
  padding: 18px;
}
.compactBlock .cardHeader{
  margin-bottom: 8px;
}
.compactBlock h2{
  font-size: 28px;
  margin: 0;
}
.compactBlock .small.muted{
  font-size: 13px;
}
.compactBlock .actions.compactActions{
  margin-top: 12px;
  gap: 10px;
}
/* Daily list tighter */
.compactBlock .dailyItem{
  padding: 12px 14px;
  margin-top: 10px;
}
.compactBlock .dailyTitle{
  font-size: 16px;
}
.compactBlock .dailyMeta{
  font-size: 12px;
}
/* Challenge tighter */
.compactBlock .challengeWrap{
  margin-top: 12px;
  gap: 8px;
}
.compactBlock .challengeRow{
  gap: 10px;
}
.compactBlock #challengeHint{
  line-height: 1.25;
}