:root {
  --egg: #ff4785;
  --egg-light: #ff7aa5;
  --egg-dark: #d62861;
  --egg-shadow: #b3194a;
  --lcd: #e0f2f1;
  --lcd-dark: #2f3640;
  --lcd-mid: #718093;
  --candy-pink: #ff70a6;
  --candy-yellow: #ffd166;
  --candy-blue: #70d6ff;
  --sel-bg: #e1b12c;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; height:100dvh; overflow:hidden; }

body {
  font-family:'Heebo',sans-serif;
  background:#ffeaa7;
  display:flex; align-items:center; justify-content:center;
  padding:2vh 10px;
  position:relative;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(0,0,0,0.08) 2px,transparent 2px); background-size:20px 20px;
}

@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-6deg)} 75%{transform:rotate(6deg)} }
@keyframes popIn { 0%{opacity:0;transform:scale(0.95)} 100%{opacity:1;transform:scale(1)} }
@keyframes heartPop { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-30px) scale(1.5)} }
@keyframes eggJump { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes floatDevice { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes scanlineCRT { 0%{top:-10%} 100%{top:110%} }
@keyframes bubblePop { 0%{opacity:0;transform:translateX(-50%) scale(0.6)} 100%{opacity:1;transform:translateX(-50%) scale(1)} }
@keyframes bubbleFadeOut { 0%{opacity:1;transform:translateX(-50%) scale(1)} 100%{opacity:0;transform:translateX(-50%) scale(0.8)} }
@keyframes coinFly { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-40px) scale(0.5)} }
@keyframes petJump { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-12px) scale(1.05)} }
@keyframes fadeIn { 0%{opacity:0} 100%{opacity:1} }

.egg-wrapper {
  position:relative; z-index:10;
  width:100%; max-width:400px;
  height:100%; max-height:800px;
  display:flex; flex-direction:column; align-items:center;
  animation:floatDevice 4.5s ease-in-out infinite;
}

.ring {
  width:35px; height:18px; border:5px solid #ccc; border-bottom:none;
  border-radius:12px 12px 0 0; margin-bottom:-3px; z-index:11; background:#e6e6e6; flex-shrink:0;
}

.shell {
  width:100%; flex:1 1 0; min-height:0;
  background:linear-gradient(150deg,var(--egg-light) 0%,var(--egg) 40%,var(--egg-dark) 100%);
  border-radius:48% 48% 44% 44% / 32% 32% 28% 28%;
  padding:14% 10% 5%;
  box-shadow:0 10px 0 var(--egg-shadow),0 15px 30px rgba(0,0,0,0.3),inset -5px -10px 20px rgba(0,0,0,0.1),inset 5px 10px 20px rgba(255,255,255,0.4);
  border:2px solid rgba(0,0,0,0.1);
  display:flex; flex-direction:column; align-items:center;
}

.brand {
  font-family:'Press Start 2P',monospace; font-size:0.5rem;
  color:rgba(255,255,255,0.9); text-shadow:2px 2px 0 rgba(0,0,0,0.3);
  margin-bottom:12px; flex-shrink:0; white-space:nowrap; text-align:center; width:100%;
}

.bezel {
  width:100%; flex-grow:1;
  background:#1a1a2e;
  border-radius:12px 12px 20px 20px;
  padding:15px;
  box-shadow:inset 0 6px 15px rgba(0,0,0,0.9),0 2px 1px rgba(255,255,255,0.2);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  margin-bottom:15px;
}
.bezel::before {
  content:''; position:absolute; top:-20%; left:-20%; width:150%; height:50%;
  background:linear-gradient(to bottom,rgba(255,255,255,0.05) 0%,transparent 100%);
  transform:rotate(-15deg); pointer-events:none; z-index:100;
}

.lcd {
  width:100%; flex:1 1 0; background:var(--lcd);
  border-radius:4px; position:relative; display:flex; flex-direction:column;
  box-shadow:inset 3px 3px 10px rgba(0,0,0,0.2); overflow:hidden;
}
.lcd::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:40;
  background-image:linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);
  background-size:3px 3px;
}
.lcd-vignette { position:absolute; inset:0; pointer-events:none; z-index:45; box-shadow:inset 0 0 20px rgba(0,0,0,0.3); }
.lcd-scanline { position:absolute; width:100%; height:8px; background:rgba(0,0,0,0.05); z-index:42; pointer-events:none; animation:scanlineCRT 4s linear infinite; }

.lcd-status {
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px; border-bottom:2px solid var(--lcd-dark);
  color:var(--lcd-dark); background:rgba(0,0,0,0.03); text-shadow:1px 1px 0 rgba(0,0,0,0.05);
  gap:6px;
}
.status-name { font-family:'Secular One',sans-serif; font-size:0.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40%; }
.status-coins, .status-stars, .status-level {
  font-family:'Secular One',sans-serif; font-size:0.75rem; display:flex; align-items:center; gap:2px;
}

.lcd-body { flex:1 1 0; position:relative; z-index:5; overflow:hidden; display:flex; flex-direction:column; }

.panel {
  display:none; height:100%; width:100%;
  flex-direction:column; align-items:center;
  overflow-y:auto; overflow-x:hidden;
}
.panel.active { display:flex; animation:popIn 0.2s ease-out; }

/* Hardware buttons */
.hw-container { flex-shrink:0; display:flex; flex-direction:column; align-items:center; margin-top:auto; }
.hw-btns { display:flex; justify-content:center; gap:25px; }
.hw {
  width:45px; height:45px;
  border-radius:50%; border:3px solid var(--lcd-dark); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:bold; color:white;
  box-shadow:0 4px 0 var(--lcd-dark),inset 0 2px 4px rgba(255,255,255,0.4);
  transition:all 0.1s; text-shadow:0 1px 2px rgba(0,0,0,0.3);
  user-select:none; -webkit-user-select:none;
}
.hw:active { box-shadow:0 1px 0 var(--lcd-dark); transform:translateY(3px); }
.hw-a { background:var(--candy-blue); }
.hw-b { background:var(--candy-yellow); color:#554400; text-shadow:none; margin-top:6px; }
.hw-c { background:var(--candy-pink); }

.hw-labels { display:flex; justify-content:center; gap:25px; margin-top:4px; }
.hw-lbl { width:45px; text-align:center; font-family:'Secular One',sans-serif; font-size:0.65rem; color:rgba(255,255,255,0.8); letter-spacing:1px; text-shadow:0 1px 1px rgba(0,0,0,0.4); }

/* Bottom nav tabs */
.bottom-nav {
  display:flex; width:100%; border-top:2px solid var(--lcd-dark);
  background:rgba(0,0,0,0.05); flex-shrink:0;
}
.nav-tab {
  flex:1; padding:6px 2px; text-align:center; cursor:pointer;
  font-family:'Heebo',sans-serif; font-weight:700; font-size:clamp(0.6rem,1.5vh,0.75rem);
  color:var(--lcd-mid); border-left:1px solid rgba(0,0,0,0.1);
  transition:all 0.2s; user-select:none; -webkit-user-select:none;
}
.nav-tab:first-child { border-left:none; }
.nav-tab.active { background:var(--sel-bg); color:var(--lcd-dark); }
.nav-tab-icon { display:block; font-size:1.1rem; line-height:1; }

/* Emotion grid */
.emo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; padding:8px; }
.emo {
  background:#fff; border:2px solid var(--lcd-dark); border-radius:6px; padding:6px 2px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; user-select:none;
  box-shadow:2px 2px 0 var(--lcd-mid);
}
.emo:active { transform:translate(2px,2px); box-shadow:0 0 0; }
.emo .e-icon { width:clamp(35px,6vh,45px); height:clamp(35px,6vh,45px); display:flex; align-items:center; justify-content:center; }
.anim-emo { width:100%; height:100%; object-fit:contain; }
.emo .e-txt { font-family:'Heebo',sans-serif; font-weight:900; font-size:clamp(0.6rem,1.5vh,0.75rem); color:var(--lcd-dark); text-align:center; line-height:1; }
.native-emoji { font-size:1.6rem; }
.emo.sel { background:var(--sel-bg); box-shadow:2px 2px 0 var(--lcd-dark); transform:translate(-1px,-1px); }
.emo.sel .e-txt { color:var(--lcd-dark); }

/* Shop grid */
.shop-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; width:100%; padding:8px; }
.shop-card {
  background:#fff; border:2px solid var(--lcd-dark); border-radius:8px; padding:8px;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  box-shadow:2px 2px 0 var(--lcd-mid); text-align:center;
}
.shop-card.owned { background:rgba(46,204,113,0.15); }
.shop-card.locked { opacity:0.5; cursor:default; }
.shop-card-emoji { font-size:2rem; }
.shop-card-name { font-family:'Heebo',sans-serif; font-weight:900; font-size:0.75rem; color:var(--lcd-dark); }
.shop-card-price { font-family:'Secular One',sans-serif; font-size:0.7rem; color:var(--lcd-mid); }
.shop-card-status { font-family:'Heebo',sans-serif; font-weight:700; font-size:0.65rem; padding:2px 6px; border-radius:4px; }
.shop-card-status.buy { background:var(--candy-yellow); color:var(--lcd-dark); }
.shop-card-status.own { background:#2ecc71; color:#fff; }
.shop-card-status.lock { background:var(--lcd-mid); color:#fff; }

/* Speech bubble */
.speech-bubble {
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  background:#fff; border:3px solid var(--lcd-dark); border-radius:8px;
  padding:4px 6px; font-family:'Heebo',sans-serif; font-size:clamp(0.7rem,1.8vh,0.9rem);
  color:var(--lcd-dark); text-align:center; width:92%;
  box-shadow:2px 2px 0 rgba(0,0,0,0.15); z-index:10;
  display:none; line-height:1.15;
}
.speech-bubble::after {
  content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  border-width:7px 7px 0; border-style:solid; border-color:var(--lcd-dark) transparent transparent;
}
.speech-bubble::before {
  content:''; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%);
  border-width:5px 5px 0; border-style:solid; border-color:#fff transparent transparent; z-index:1;
}

.spark { position:absolute; pointer-events:none; z-index:20; animation:heartPop 1s ease-out forwards; width:25px; height:25px; }

/* Toast */
.toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--lcd-dark); color:#fff; padding:8px 16px; border-radius:8px;
  font-family:'Heebo',sans-serif; font-weight:700; font-size:0.85rem;
  z-index:9999; animation:popIn 0.3s ease-out;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.toast.error { background:#e74c3c; }

/* Loading / Empty */
.loading { text-align:center; padding:20px; color:var(--lcd-mid); font-family:'Secular One',sans-serif; }
.loading::after { content:'...'; animation:bounce 1s infinite; }
.empty-state { text-align:center; padding:20px; color:var(--lcd-mid); font-family:'Heebo',sans-serif; font-weight:700; }

/* Teacher specific */
.teacher-roster { display:flex; flex-direction:column; gap:6px; width:100%; padding:8px; overflow-y:auto; }
.student-card { background:#fff; border:2px solid var(--lcd-dark); border-radius:8px; padding:8px; box-shadow:2px 2px 0 var(--lcd-mid); }
.student-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; cursor:pointer; }
.student-card-name { font-family:'Secular One',sans-serif; font-size:0.9rem; color:var(--lcd-dark); }
.student-card-stats { font-family:'Heebo',sans-serif; font-size:0.7rem; color:var(--lcd-mid); display:flex; gap:8px; }
.student-card-actions { display:flex; gap:4px; flex-wrap:wrap; }
.action-btn {
  padding:4px 8px; border:2px solid var(--lcd-dark); border-radius:6px;
  font-family:'Heebo',sans-serif; font-weight:700; font-size:0.7rem;
  cursor:pointer; user-select:none; box-shadow:1px 1px 0 var(--lcd-mid); transition:all 0.1s;
}
.action-btn:active { transform:translate(1px,1px); box-shadow:0 0 0; }
.action-btn.attend { background:#2ecc71; color:#fff; }
.action-btn.late { background:var(--candy-yellow); color:var(--lcd-dark); }
.action-btn.absent { background:#e74c3c; color:#fff; }
.action-btn.good { background:var(--candy-blue); color:var(--lcd-dark); }
.action-btn.disrupt { background:var(--lcd-mid); color:#fff; }

.attendance-badge { font-size:0.7rem; padding:2px 6px; border-radius:4px; font-weight:700; }
.attendance-badge.present { background:#2ecc71; color:#fff; }
.attendance-badge.late { background:var(--candy-yellow); color:var(--lcd-dark); }
.attendance-badge.absent { background:#e74c3c; color:#fff; }

/* PIN pad */
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:180px; margin:10px auto; }
.pin-key {
  width:50px; height:50px; border:2px solid var(--lcd-dark); border-radius:8px;
  background:#fff; font-family:'Secular One',sans-serif; font-size:1.2rem;
  color:var(--lcd-dark); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:2px 2px 0 var(--lcd-mid); user-select:none;
}
.pin-key:active { transform:translate(2px,2px); box-shadow:0 0 0; }
.pin-display {
  font-family:'Press Start 2P',monospace; font-size:1.5rem; text-align:center;
  letter-spacing:8px; color:var(--lcd-dark); margin:10px 0;
}

/* Forms */
.form-group { width:100%; padding:0 10px; margin-bottom:8px; }
.form-label { font-family:'Heebo',sans-serif; font-weight:700; font-size:0.8rem; color:var(--lcd-dark); margin-bottom:2px; }
.form-input {
  width:100%; padding:8px; border:2px solid var(--lcd-dark); border-radius:4px;
  font-family:'Heebo',sans-serif; font-size:0.9rem; background:#fff; color:var(--lcd-dark);
}
.form-input:focus { outline:none; border-color:var(--sel-bg); }

/* Big button */
.big-btn {
  padding:12px 24px; border:3px solid var(--lcd-dark); border-radius:8px;
  font-family:'Secular One',sans-serif; font-size:1.1rem;
  cursor:pointer; box-shadow:3px 3px 0 var(--lcd-dark);
  transition:all 0.1s; user-select:none; text-align:center;
}
.big-btn:active { transform:translate(3px,3px); box-shadow:0 0 0; }
.big-btn.pink { background:var(--candy-pink); color:#fff; }
.big-btn.blue { background:var(--candy-blue); color:var(--lcd-dark); }
.big-btn.yellow { background:var(--candy-yellow); color:var(--lcd-dark); }

/* FAB */
.fab {
  position:absolute; bottom:10px; left:10px; width:44px; height:44px;
  border-radius:50%; background:var(--egg); color:#fff; border:2px solid var(--lcd-dark);
  font-size:1.5rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:2px 2px 0 var(--lcd-dark); z-index:50;
}
.fab:active { transform:translate(2px,2px); box-shadow:0 0 0; }

/* Dropdown */
.dropdown {
  width:100%; padding:8px; border:2px solid var(--lcd-dark); border-radius:4px;
  font-family:'Heebo',sans-serif; font-size:0.85rem; background:#fff; color:var(--lcd-dark);
  -webkit-appearance:none; appearance:none; cursor:pointer;
}

/* Drawer */
.drawer {
  position:absolute; inset:0; background:var(--lcd); z-index:50;
  display:none; flex-direction:column; overflow-y:auto; padding:8px;
  animation:popIn 0.2s ease-out;
}
.drawer.active { display:flex; }
.drawer-close { align-self:flex-start; font-family:'Secular One',sans-serif; font-size:0.8rem; color:var(--egg); cursor:pointer; margin-bottom:8px; font-weight:700; }
.history-item { background:#fff; border:1px solid var(--lcd-mid); border-radius:6px; padding:6px 8px; margin-bottom:4px; font-size:0.75rem; }

/* Name picker */
.name-list { width:100%; max-height:50%; overflow-y:auto; padding:8px; }
.name-item {
  padding:10px; border:2px solid var(--lcd-dark); border-radius:6px;
  margin-bottom:6px; background:#fff; cursor:pointer;
  font-family:'Secular One',sans-serif; font-size:1rem; color:var(--lcd-dark);
  box-shadow:2px 2px 0 var(--lcd-mid); text-align:center;
}
.name-item:active { transform:translate(2px,2px); box-shadow:0 0 0; }

/* Closet */
.closet-list { width:100%; padding:8px; }
.closet-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px; border:2px solid var(--lcd-dark); border-radius:6px; margin-bottom:6px; background:#fff;
}
.closet-item-info { display:flex; align-items:center; gap:8px; }
.closet-toggle {
  width:40px; height:22px; border-radius:11px; border:2px solid var(--lcd-dark);
  background:var(--lcd-mid); cursor:pointer; position:relative; transition:background 0.2s;
}
.closet-toggle.on { background:#2ecc71; }
.closet-toggle::after {
  content:''; position:absolute; top:1px; left:1px; width:16px; height:16px;
  border-radius:50%; background:#fff; border:1px solid var(--lcd-dark); transition:left 0.2s;
}
.closet-toggle.on::after { left:19px; }

/* Scrollbar */
.panel::-webkit-scrollbar { width:4px; }
.panel::-webkit-scrollbar-track { background:transparent; }
.panel::-webkit-scrollbar-thumb { background:var(--lcd-mid); border-radius:2px; }