:root {
  --bg: #0d0d1a; --surface: #13132b; --surface2: #1a1a38; --surface3: #22224a;
  --border: #2a2a5a; --accent: #7c3aed; --accent2: #a855f7; --accent3: #4f46e5;
  --gold: #f59e0b; --green: #10b981; --red: #ef4444; --cyan: #06b6d4;
  --text: #e2e8f0; --text2: #94a3b8; --text3: #64748b;
  --xp-bar: linear-gradient(90deg, #7c3aed, #a855f7, #c084fc);
  --pixel-shadow: 2px 2px 0 #000;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:'Rajdhani',sans-serif}
#app{max-width:480px;margin:0 auto;min-height:100vh;padding:12px 12px 70px}
h1,h2,h3,h4,.label,.badge,.nav-btn small,.btn{font-family:'Press Start 2P',cursive;letter-spacing:.5px}
.screen { display: none; padding: 16px; }
.screen.active { display: block; }
.screen.active{animation:fadeIn .2s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:14px}
.hero{background:linear-gradient(145deg,var(--surface2),var(--surface3));padding:14px;border-radius:14px;border:1px solid var(--border)}
.belt-badge{display:inline-block;padding:8px 10px;border-radius:10px;font-size:10px;text-shadow:var(--pixel-shadow)}
.xp-wrap{height:12px;background:#090914;border:1px solid var(--border);border-radius:99px;overflow:hidden}
.xp-bar{height:100%;background:var(--xp-bar)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat-chip{background:var(--surface2);border:1px solid var(--border);padding:8px;border-radius:10px;text-align:center}
.filter-row{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--border);background:var(--surface2);color:var(--text);padding:8px 10px;border-radius:10px;font-size:10px}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none}
.btn.tiny{padding:6px 8px;font-size:9px}
.grid{display:grid;gap:8px}.skill-card,.quest-card,.move-card,.log-entry{background:var(--surface);border:1px solid var(--border);padding:10px;border-radius:12px}
.move-card .avatar{width:34px;height:34px;border-radius:8px;background:var(--surface3);display:grid;place-items:center;image-rendering:pixelated}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.muted{color:var(--text2)} .tiny{font-size:12px;color:var(--text3)}
.status-rusty{color:var(--red)} .status-fresh{color:var(--green)} .status-stable{color:var(--cyan)}
#bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;max-width:480px;width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;background:rgba(10,10,30,.97);border-top:1px solid var(--border);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.nav-btn{background:transparent;border:none;color:var(--text2);display:grid;place-items:center;gap:4px;padding:6px 4px}.nav-btn.active{color:var(--accent2)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;z-index:30}
.modal-overlay.open{display:flex}.modal-sheet{width:100%;max-width:480px;margin:0 auto;background:var(--surface);border-top:1px solid var(--border);border-radius:18px 18px 0 0;max-height:88vh;display:flex;flex-direction:column;animation:slideUp .2s ease-out}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.drag{width:44px;height:5px;background:var(--text3);border-radius:99px;margin:8px auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border)}
.modal-header button{background:none;border:none;color:var(--text);font-size:18px}.modal-body{padding:12px;overflow:auto}
.form-grid{display:grid;gap:10px}label{display:grid;gap:6px;font-weight:700}input,select,textarea{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:9px;border-radius:8px;font-family:'Rajdhani',sans-serif}
.outcomes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.outcome{padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text)}.outcome.active{outline:2px solid var(--accent2)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;max-width:460px;background:#191936;border:1px solid var(--accent3);color:var(--text);padding:10px 12px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.xp-popup{position:fixed;right:18px;bottom:110px;color:var(--gold);font-family:'Press Start 2P',cursive;animation:xpFloat .9s ease-out forwards;z-index:40}
@keyframes xpFloat{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}
.belt-selector{display:flex;gap:8px;flex-wrap:wrap}.belt-btn{padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface2)}
.history-row{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;padding:6px 0;border-bottom:1px dashed var(--border)}

#bottom-nav{grid-template-columns:repeat(6,1fr)}
.nav-btn{flex:1;min-width:0;font-size:8px;padding:4px 2px}
.nav-btn small{font-size:8px}
.flow-item{background:var(--surface);border:1px solid var(--border);padding:10px;border-radius:12px}
.icon-btn{background:none;border:none;color:var(--text2);cursor:pointer}
.flow-tree{margin-top:10px;display:grid;gap:10px;max-height:70vh;overflow:auto;padding-bottom:12px}
.flow-node{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px;position:relative}
.flow-node::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:8px 0 0 8px;background:var(--border)}
.type-start{border-color:var(--accent)} .type-start::before{background:var(--accent)}
.type-move{border-color:var(--accent3)} .type-move::before{background:var(--accent3)}
.type-reaction{border-color:var(--gold)} .type-reaction::before{background:var(--gold)}
.type-outcome{border-color:var(--green)} .type-outcome::before{background:var(--green)}
.flow-children{margin-top:8px;padding-left:14px;border-left:1px dashed var(--border)}
.flow-child{position:relative;padding-top:8px}
.flow-child::before{content:'';position:absolute;left:-14px;top:16px;width:14px;border-top:1px dashed var(--border)}
.flow-placeholder{margin-top:8px;background:transparent;border:1px dashed var(--border);color:var(--text3);padding:8px;border-radius:8px;width:100%;text-align:left}
.skill-badge{padding:3px 6px;border-radius:999px;font-size:9px;border:1px solid var(--border)}
.badge-start{color:var(--accent);border-color:var(--accent)}
.badge-move{color:var(--accent3);border-color:var(--accent3)}
.badge-reaction{color:var(--gold);border-color:var(--gold)}
.badge-outcome{color:var(--green);border-color:var(--green)}

.stat-row { gap: 12px; margin-top: 16px; margin-bottom: 14px; }
.section, .motd-card, .skill-item, .quest-card, .tlog-entry { margin-bottom: 14px; }
#home-hero { padding: 20px 16px 16px; }
#screen-skills .skill-list { padding-top: 14px; }
#screen-skills .log-search { margin-top: 14px; margin-bottom: 14px; }

.motd-card { margin-top: 14px; margin-bottom: 14px; }
#screen-home .section,
#screen-home .motd-card,
#screen-home .stat-row {
  margin-bottom: 14px;
}
#quest-list { padding-top: 14px; }
.settings-btn-grid { margin-top: 14px; }

.section-title{font-family:'Press Start 2P',cursive;font-size:11px;color:var(--text2);margin-bottom:10px}
.form-group{display:grid;gap:6px}
.form-label{font-weight:700;color:var(--text2);font-size:12px}
.form-input{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:9px;border-radius:8px;font-family:'Rajdhani',sans-serif}
.btn-secondary{border:1px solid var(--border);background:var(--surface2);color:var(--text);padding:8px 10px;border-radius:10px;font-size:10px;font-family:'Press Start 2P',cursive}

.timeline{position:relative;padding-left:18px;border-left:2px solid var(--border);display:grid;gap:10px}
.timeline-item{position:relative;padding-left:10px}
.timeline-dot{position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surface)}
.timeline-main{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.timeline-title{font-weight:700}
.timeline-date{font-size:12px;color:var(--text2)}
.timeline-notes{font-size:12px;color:var(--text3);margin-top:2px}

.belt-event-btn {
  opacity: 0.6;
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 7px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}

.belt-event-btn[data-belt="white"]  { background: #f1f5f9; color: #0f172a; }
.belt-event-btn[data-belt="blue"]   { background: #2563eb; color: #fff; }
.belt-event-btn[data-belt="purple"] { background: #9333ea; color: #fff; }
.belt-event-btn[data-belt="brown"]  { background: #92400e; color: #fff; }
.belt-event-btn[data-belt="black"]  { background: #334155; color: #fff; }

.belt-event-btn.selected {
  opacity: 1;
  border-color: #ffffff;
  box-shadow: 0 0 8px rgba(255,255,255,0.25);
}

.event-type-btn {
  padding: 7px 12px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  cursor: pointer;
  transition: all .15s;
}

.event-type-btn.selected {
  background: var(--accent);
  border-color: var(--accent2);
  color: #ffffff;
}

.belt-timeline {
  position: relative;
  padding-left: 24px;
  margin-top: 8px;
}

.belt-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.bt-row {
  position: relative;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid var(--border);
}

.bt-row:last-child { border-bottom: none; }

.bt-dot {
  position: absolute;
  left: -20px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.bt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.bt-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 3px 7px;
  border-radius: 3px;
}

.bt-title {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  flex: 1;
}

.bt-date {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
}

.bt-notes {
  font-size: 12px;
  color: var(--text2);
  margin-top: 4px;
}