/* === Modern White/Blue Theme === */
:root{
  --bg:#f5f8fa;          /* app background */
  --panel:#ffffff;       /* card/panel background */
  --border:#e6ecf0;      /* subtle borders */
  --glow:#1da1f2;        /* primary accent (blue) */
  --text:#0f1419;        /* primary text */
  --muted:#536471;       /* muted text */
  --bad:#f4212e;         /* error/red */
  --good:#17bf63;        /* success/green */
  --warn:#ffad1f;        /* warning/yellow */
}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";}
/* disable CRT scanlines in modern theme */
.crt::before{ content:none; }
.flicker{ animation: flicker 3s infinite; }
@keyframes flicker{ 0%,19%,21%,23%,80%,100%{opacity:1} 20%,22%{opacity:.95} 24%{opacity:.9} }

#wrap{display:grid;grid-template-columns:1fr 360px;gap:12px;height:100%;padding:10px;box-sizing:border-box}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06); padding:12px}
#console{position:relative;overflow:hidden}
#feed{position:absolute;inset:0;overflow:auto}

/* HUD */
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{border:1px solid var(--border);background:#f7f9fc;color:var(--text);padding:6px 12px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pill:hover{background:#eef6ff; border-color:#cbe7ff}
.hud{position:absolute;inset:12px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:10}
.hud .pill, .hud .row{pointer-events:auto}
.kbd{border:1px solid var(--border);background:#f1f4f7;color:var(--text);padding:0 6px;border-radius:6px}

/* Post cards = transmissions */
.tx{position:relative;margin:8px 12px;display:grid;grid-template-columns:48px 1fr auto;gap:10px;padding:10px 12px;border:1px solid var(--border);background:var(--panel);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06); transition: opacity 200ms ease, transform 200ms ease, filter 200ms ease}
/* fade-out when removed */
.tx.tx-out{ opacity:0; transform: translateY(-4px); filter: blur(1px); }
/* Always hide the right-most meta badge; we use left badge now */
.tx > .meta:last-child{ display:none; }

/* Good/Bad states for interacted posts */
.tx.tx-good{ border-color: rgba(23,191,99,.6); background:#f0fff5; box-shadow:0 1px 3px rgba(0,0,0,.06) }
.tx.tx-bad{ border-color: rgba(244,33,46,.5); background:#fff5f6; box-shadow:0 1px 3px rgba(0,0,0,.06) }

/* Left-side badge on avatar for correctness */
.tx .avatar{ position:relative; }
.tx .avatar .badge{ position:absolute; left:-6px; bottom:-6px; width:22px; height:22px; border-radius:999px; display:grid; place-items:center; font-size:14px; box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.12) }
.tx.tx-good .avatar .badge{ background:#0f7a3a; color:#e8fff1; }
.tx.tx-bad .avatar .badge{ background:#9b1220; color:#ffe9ec; }
.tx-sub{ grid-template-columns:36px 1fr auto; opacity:.98; background:#f7fafc; border-color:#dbe6ec; margin-left:60px; }
.tx-sub2{ grid-template-columns:32px 1fr auto; opacity:.97; background:#f2f6f9; border-color:#d5e0e6; margin-left:96px; }

/* Explanation feedback styling */
.tx-sub2.tx-good{ 
  background:#f0fff8; 
  border-color: rgba(23,191,99,.4); 
  border-left: 3px solid var(--good);
}
.tx-sub2.tx-bad{ 
  background:#fff8f8; 
  border-color: rgba(244,33,46,.3); 
  border-left: 3px solid var(--bad);
}
.tx-sub2 .meta{ 
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tx-sub2.tx-good .meta{ color: var(--good); }
.tx-sub2.tx-bad .meta{ color: var(--bad); }
.tx-sub .avatar{ width:36px; height:36px; }
.tx-event{ opacity:.98; }
.tx-rescue{ border-color: rgba(23,191,99,.6); background:#f0fff5; box-shadow:0 1px 3px rgba(0,0,0,.06) }
.tx-brainwash{ border-color: rgba(244,33,46,.5); background:#fff5f6; box-shadow:0 1px 3px rgba(0,0,0,.06) }
.tx-rescue .meta{ color: var(--good); }
.tx-brainwash .meta{ color: var(--bad); }
/* Badge overlay in avatar for event cards */
.tx-event .avatar{ position:relative; }
.tx-event .avatar .badge{ position:absolute; right:-6px; bottom:-6px; width:22px; height:22px; border-radius:999px; display:grid; place-items:center; font-size:14px; box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.12) }
.tx-rescue .avatar .badge{ background:#0f7a3a; color:#e8fff1; }
.tx-brainwash .avatar .badge{ background:#9b1220; color:#ffe9ec; }
.avatar{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,#e6f2ff,#cfe9ff);box-shadow:0 0 0 1px #d5e3f0}
.meta{font-size:12px;color:var(--muted)}
.title{font-weight:800; letter-spacing:.2px; color:var(--text)}

/* Console buttons */
.btn{cursor:pointer;border:1px solid #1a8cd8;background:#1da1f2;color:#fff;padding:8px 14px;border-radius:999px;font-weight:700;box-shadow:0 2px 6px rgba(29,161,242,.2); min-height: 38px}
.btn:hover{ background:#1a8cd8; border-color:#1a8cd8; box-shadow:0 4px 10px rgba(29,161,242,.24) }

/* Button icons */
#playBtn::before,
#helpBtn::before,
#modeToggle::before{
  display:inline-block; margin-right:6px; color: var(--glow);
}
#playBtn::before{ content:'\25B6'; } /* ▶ */
#helpBtn::before{ content:'\2753'; } /* ❓ */
#modeToggle::before{ content:'\2699'; } /* ⚙ default */
#modeToggle[data-mode="arcade"]::before{ content:'\23F1'; } /* ⏱ */
#modeToggle[data-mode="zen"]::before{ content:'\1F33F'; } /* 🌿 */
.btn.bad{ background:#fff; color:var(--bad); border-color: rgba(244,33,46,.5); box-shadow:0 1px 3px rgba(0,0,0,.06) }
.btn.good{ background:#fff; color:var(--good); border-color: rgba(23,191,99,.6) }

/* Hover tooltip for post explanations */
#hoverTip{ position:fixed; z-index:650; max-width:min(540px, 90vw); border:1px solid var(--border); background:#ffffff; color:var(--text); border-radius:10px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.12); pointer-events:none; opacity:0; transform:translateY(2px); transition: opacity 120ms ease, transform 120ms ease; }
#hoverTip.show{ opacity:1; transform:translateY(0); }

/* Stamina bar */
#stamWrap{position:relative;width:220px;height:12px;border:1px solid var(--border);border-radius:999px;background:#f1f5f9;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
#stamFill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#79c8ff,#1da1f2)}
#stamPct{font-size:12px;margin-left:6px;color:var(--muted)}

/* Public Sentiment gauge */
#sentWrap{position:relative;width:100%;height:12px;border:1px solid var(--border);border-radius:999px;background:#f1f5f9;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
#sentFill{position:absolute;left:0;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#f4212e,#ffad1f 35%,#17bf63);transition: width 260ms ease}

/* Help overlay */
#help{position:fixed;inset:0;display:none;place-items:center;background:rgba(15,20,25,.55);backdrop-filter: blur(2px);z-index:500}
#help .panel{width:min(760px,90vw);border:1px solid var(--border);background:#ffffff;border-radius:12px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
#help ul{line-height:1.6}

/* === Mobile responsiveness === */
@media (max-width: 860px){
  #wrap{ grid-template-columns: 1fr; height: auto; padding: 8px; gap: 10px; }
  #console{ min-height: 62vh; }
  .hud{ inset: 8px; }
  .row{ gap: 8px; }
  .pill{ padding: 6px 10px; }
  #stamWrap{ width: clamp(140px, 40vw, 220px); }
  .tx{ left:8px; right:8px; grid-template-columns:40px 1fr; gap:8px; padding:8px 10px; }
  .avatar{ width:40px; height:40px; }
  .btn{ padding:10px 12px; min-height: 42px; }
  .row .btn{ flex:1 1 30%; }
}

@media (max-width: 480px){
  #console{ min-height: 66vh; }
  .btn{ font-size: 14px; }
  .meta{ font-size: 11px; }
  .title{ font-size: 16px; }
}