:root{
  --bg:#0d1117;
  --bg2:#161b22;
  --card:#1a2029;
  --line:#2b333f;
  --txt:#d6e0c0;
  --muted:#8b98a5;
  --acc:#e8b84b;      /* amber */
  --acc2:#7fb069;     /* pea green */
  --lcd:#8a9a5b;
  --shell:#3fb6b0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(127,176,105,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(232,184,75,0.08), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:'Bricolage Grotesque',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
#app{max-width:1080px;margin:0 auto;padding:24px 16px 60px}

/* header */
#topbar{text-align:center;margin-bottom:24px;animation:fade .6s ease both}
#topbar h1{font-weight:800;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.02em}
#topbar .sub{color:var(--muted);font-weight:200;max-width:640px;margin:8px auto 0;font-size:.95rem;line-height:1.5}
#chip{color:var(--acc);border-bottom:1px dotted var(--acc);cursor:help;font-family:'VT323',monospace;font-size:1.1em}

/* layout */
#stage{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:24px;align-items:start}
@media(max-width:820px){#stage{grid-template-columns:1fr}}

/* THE DEVICE */
#deviceWrap{display:flex;flex-direction:column;align-items:center;gap:14px;animation:fade .7s .1s ease both}
#device{
  width:100%;max-width:360px;aspect-ratio:0.82;
  border-radius:48% 48% 46% 46% / 42% 42% 54% 54%;
  padding:26px 22px 22px;
  position:relative;
  box-shadow:0 24px 50px rgba(0,0,0,.55), inset 0 4px 12px rgba(255,255,255,.35), inset 0 -20px 40px rgba(0,0,0,.25);
  transition:background .3s;
}
.shell-teal{background:radial-gradient(120% 120% at 30% 20%, #74e0d8, #2a8f8a 70%, #1c6a66);}
.shell-pink{background:radial-gradient(120% 120% at 30% 20%, #ffb3d1, #e05a8f 70%, #a83d68);}
.shell-purple{background:radial-gradient(120% 120% at 30% 20%, #c9a8ff, #7d5bd6 70%, #533a99);}
.shell-gray{background:radial-gradient(120% 120% at 30% 20%, #d9dde2, #9aa2ab 70%, #6b7178);}
#device::after{ /* glossy highlight */
  content:"";position:absolute;top:14px;left:26px;width:38%;height:20%;
  border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));
  filter:blur(2px);pointer-events:none;
}
#screenBezel{
  position:relative;background:#20281a;border-radius:50%/38%;
  padding:16px 14px;margin:6px auto 0;box-shadow:inset 0 4px 14px rgba(0,0,0,.7);
}
#lcd{display:block;border-radius:6px;image-rendering:pixelated;background:var(--lcd)}
#glass{
  position:absolute;inset:16px 14px;border-radius:6px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 30%),
             repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 3px);
}
#beeperHole{width:26px;height:6px;border-radius:4px;background:#141a10;margin:14px auto 2px;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
#buttons{display:flex;justify-content:center;gap:22px;margin-top:8px}
.tama-btn{
  width:64px;height:34px;border:none;border-radius:20px;cursor:pointer;
  background:linear-gradient(180deg,#3a3f34,#20241b);
  color:#e9e2c4;font-family:'VT323',monospace;font-size:1.2rem;position:relative;
  box-shadow:0 4px 0 rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.2);
  transition:transform .08s, box-shadow .08s;
}
.tama-btn span{display:block;font-size:.5rem;font-family:'Bricolage Grotesque';opacity:.6;margin-top:-2px}
.tama-btn.pressed,.tama-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.brand{text-align:center;margin-top:10px;font-family:'VT323',monospace;color:rgba(0,0,0,.45);letter-spacing:2px;font-size:.9rem}

#shellColors{display:flex;gap:10px}
.sc{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s}
.sc:hover{transform:scale(1.15)}
.sc.active{border-color:var(--acc);box-shadow:0 0 0 2px rgba(232,184,75,.3)}
.sc-teal{background:#3fb6b0}.sc-pink{background:#e05a8f}.sc-purple{background:#7d5bd6}.sc-gray{background:#9aa2ab}
.keyhint{color:var(--muted);font-size:.8rem;font-weight:200}
.keyhint b{color:var(--acc);font-family:'VT323',monospace;font-size:1.05em}

/* PANEL */
#panel{display:flex;flex-direction:column;gap:16px;animation:fade .7s .2s ease both}
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:16px}
.card h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--acc2);font-weight:800;margin-bottom:12px}

#drop{
  border:2px dashed var(--line);border-radius:12px;padding:20px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s;
}
#drop.drag,#drop:hover{border-color:var(--acc2);background:rgba(127,176,105,.06)}
.dz-egg{font-size:2.2rem;margin-bottom:4px;animation:bob 2.4s ease-in-out infinite}
.dz-inner p{margin:2px 0}
.dz-sub{color:var(--muted);font-size:.8rem;font-weight:200}
.mini{margin-top:8px;background:none;border:1px solid var(--line);color:var(--txt);padding:5px 12px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.8rem}
.mini:hover{border-color:var(--acc2);color:var(--acc2)}
.romInfo{margin-top:12px;font-size:.82rem;color:var(--muted);line-height:1.5}
.romInfo b{color:var(--txt)}
.hex{margin-top:8px;font-family:'VT323',monospace;font-size:.95rem;color:var(--acc2);background:#0b0f08;padding:8px;border-radius:6px;overflow-x:auto;white-space:pre;min-height:0}
.hex:empty{display:none}

.ctrl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.ctrl-row:last-child{margin-bottom:0}
.btn{flex:1;min-width:110px;background:#0f1510;border:1px solid var(--line);color:var(--txt);padding:9px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:.85rem;transition:all .15s}
.btn:hover{border-color:var(--acc2);color:var(--acc2);transform:translateY(-1px)}
.slabel{font-size:.8rem;color:var(--muted);min-width:120px}
.slabel span{color:var(--acc);font-family:'VT323',monospace}
input[type=range]{flex:1;accent-color:var(--acc2)}

/* debug */
.dbg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dbg-head h2{margin:0}
.dbg.hidden,.cem.hidden{display:none}
.regs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-family:'VT323',monospace}
.regs>div{background:#0b0f08;border:1px solid var(--line);border-radius:6px;padding:6px;text-align:center;font-size:1rem;color:var(--acc)}
.regs>div span{display:block;color:var(--muted);font-size:.62rem;font-family:'Bricolage Grotesque';text-transform:uppercase;letter-spacing:.1em}
.regs .wide{grid-column:span 2;text-align:left;font-size:.85rem}
.dbg-note{margin-top:10px;color:var(--muted);font-size:.75rem;font-weight:200}

/* cemetery */
.cem{display:flex;flex-direction:column;gap:6px}
.cem-empty{color:var(--muted);font-size:.82rem;font-weight:200}
.grave{display:grid;grid-template-columns:26px 1fr auto auto;gap:8px;align-items:center;background:#0b0f08;border:1px solid var(--line);padding:7px 10px;border-radius:8px;font-size:.85rem}
.rk{color:var(--acc);font-family:'VT323',monospace;font-size:1.1rem}
.ga{color:var(--acc2);font-family:'VT323',monospace}
.gw{color:var(--muted);font-size:.72rem}

/* auth + footer */
#auth-status{text-align:center;margin-top:20px;color:var(--muted);font-size:.82rem}
#auth-status a{color:var(--acc)}
#footer{text-align:center;margin-top:30px;color:var(--muted);font-size:.78rem;font-weight:200;line-height:1.6;border-top:1px solid var(--line);padding-top:20px}
#footer a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(232,184,75,.4)}
#footer a:hover{border-color:var(--acc)}

@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
</parameter>