:root{
  --bg:#07131c;--panel:#0d2530;--panel2:#061018;--line:#27525d;
  --text:#eaf6f2;--muted:#8fb0b5;--teal:#35b6ac;--aqua:#76e2d9;
  --sun:#e8b13c;--coral:#e5917f;--ok:#6dd58a;--bad:#ff6b7a;--purple:#d99cff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(1000px 600px at 50% -15%,#16434a 0%,var(--bg) 65%);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body{display:flex;justify-content:center;padding:14px}
.app{
width:min(460px,100%);
min-height:780px;
border:1px solid var(--line);
border-radius:28px;
background:linear-gradient(180deg,#0d2632,#071018);
box-shadow:0 20px 70px #000a,inset 0 0 50px #35b6ac12;
overflow:visible;
position:relative;
}
.app:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;background:repeating-linear-gradient(0deg,transparent 0 4px,#fff 5px 5px)}
.top{padding:16px 16px 8px;text-align:center;position:relative;z-index:1}
.pill{display:inline-block;border:1px solid #2f6570;background:#102d37;border-radius:999px;padding:6px 10px;color:var(--muted);font-size:11px}
h1{font-size:21px;margin:14px 0 6px;color:transparent;background:linear-gradient(90deg,var(--teal),var(--aqua),var(--sun));-webkit-background-clip:text;background-clip:text}
.tag{font-size:12px;color:var(--muted);line-height:1.45;margin:0 auto;max-width:360px}
.combo{margin:10px auto 0;max-width:360px;border:1px solid #2b5d66;background:#0b2029;border-radius:999px;padding:8px 10px;font-size:11px;color:var(--muted);line-height:1.35}
.combo b{color:var(--aqua);font-size:13px}.combo span{color:var(--sun)}
.screen{
margin:12px 14px 10px;
border:1px solid #244c55;
border-radius:20px;
background:#060b10;
min-height:360px;
padding:14px;
overflow:visible;
position:relative;
z-index:1;
}
.controls{display:flex;gap:8px;margin:0 14px 14px;position:relative;z-index:1}
button{border:0;border-radius:13px;background:linear-gradient(90deg,var(--teal),var(--aqua));color:#041014;font-weight:900;font-size:13px;padding:12px 10px;cursor:pointer;box-shadow:0 0 22px #35b6ac33;flex:1}
button.secondary{background:#122e39;color:var(--aqua);border:1px solid #2a5c66;box-shadow:none}
button:active{transform:translateY(1px)}
.line{font-size:12.5px;line-height:1.55;white-space:pre-wrap;margin:0 0 7px}.dim{color:var(--muted)}.ok{color:var(--ok)}.warn{color:var(--sun)}.bad{color:var(--bad)}.accent{color:var(--aqua)}.coral{color:var(--coral)}.purple{color:var(--purple)}
.blink{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:.25}}
.bar{height:13px;background:#0d2028;border:1px solid #254e56;border-radius:999px;overflow:hidden;margin:7px 0 12px}.fill{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--aqua),var(--sun));transition:width .35s ease}
.card,.report,.achievement,.ticker,.dialogue{border:1px solid #28545d;background:linear-gradient(180deg,#102b35,#0a151d);border-radius:16px;padding:12px;margin:10px 0;box-shadow:inset 0 0 30px #35b6ac10;font-size:12px;line-height:1.5}
.achievement{border-color:#5b4a18;background:linear-gradient(90deg,#201805,#3a2a08);color:#ffe39a;box-shadow:0 0 18px #e8b13c22}
.rare{border-color:#7b3b7b;background:linear-gradient(90deg,#170a1f,#351039);color:#ffc7ff;box-shadow:0 0 24px #e5917f33}
.ticker{border-style:dashed;color:var(--muted);background:#08151d}
.dialogue{border-left:4px solid var(--coral);background:#160d14}
.machine{border-left:4px solid var(--aqua);background:#071d25}
.machine b{color:var(--aqua)}
.mood{font-size:11px;color:var(--muted);margin-top:4px}
.report h3{margin:0 0 8px;color:var(--aqua);font-size:14px}
.stat{display:grid;grid-template-columns:1fr 46px;gap:8px;align-items:center;margin:8px 0}.stat label{font-size:12px}.stat b{text-align:right;color:var(--aqua);font-size:12px}.smallbar{grid-column:1/3;height:8px;background:#08151b;border-radius:999px;overflow:hidden;border:1px solid #173942}.smallbar span{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--teal),var(--aqua))}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.badge{border:1px solid #2c5b65;border-radius:12px;padding:8px;background:#081820;font-size:11px}
.locked{opacity:.42;filter:grayscale(1)}
.bsod{background:#001b7a!important;color:#fff!important;border-color:#6ca0ff!important}
.shake{animation:shake .25s linear 4}@keyframes shake{25%{transform:translateX(3px)}50%{transform:translateX(-3px)}75%{transform:translateX(2px)}}
.spark{position:absolute;color:var(--sun);opacity:.9;animation:fall 1.7s linear forwards}@keyframes fall{to{transform:translateY(640px) rotate(240deg);opacity:0}}
.footer{text-align:center;color:var(--muted);font-size:10px;padding:0 14px 14px}.tiny{position:absolute;right:12px;bottom:8px;color:#244c55;font-size:10px;z-index:2}


/* ===== Mobile expanding output override ===== */
html,body{
  height:auto !important;
  min-height:100%;
  overflow-y:auto !important;
}

.app{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

.screen{
  height:auto !important;
  max-height:none !important;
  min-height:360px !important;
  overflow:visible !important;
}

/* if older class names exist */
#screen{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}