*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#0b0b14;color:#eef1ff;overflow:hidden}
.screen{position:absolute;inset:0;display:none}
.screen.visible{display:block}

/* Intro */
.intro-bg{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 45%, #b5aaff 0%, #6aa5ff 40%, #0b0b14 100%);animation:introHue 24s linear infinite alternate}
@keyframes introHue{from{filter:hue-rotate(0)}to{filter:hue-rotate(40deg)}}
.intro-pet-glow{position:absolute;left:50%;top:46%;width:260px;height:260px;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 120px 40px rgba(150,170,255,.35) inset, 0 0 180px 30px rgba(150,170,255,.25)}
.brand{position:absolute;top:8%;left:50%;transform:translateX(-50%);text-align:center}
.logo{font-weight:800;font-size:32px}
.kana{font-size:14px;opacity:.9}
.subs{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);max-width:86vw;text-align:center;font-size:18px;line-height:1.45;background:rgba(10,10,18,.35);padding:10px 14px;border-radius:12px;border:1px solid rgba(200,210,255,.18);backdrop-filter:blur(6px)}
.ghost-btn{position:absolute;right:14px;bottom:14px;padding:10px 14px;border-radius:12px;border:1px solid rgba(200,210,255,.25);background:transparent;color:#eef1ff}

/* Game bg */
#bg{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 40%, #b8aaff 0%, #6aa5ff 40%, #0b0b14 100%);animation:bgHue 28s linear infinite alternate}
@keyframes bgHue{from{filter:hue-rotate(0)}to{filter:hue-rotate(40deg)}}

/* Pet */
#pet-wrap{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center}
#pet{width:260px;height:auto;animation:float 4.5s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
#pet-name{margin-top:8px;color:#cfd6ff}
#zzz{position:absolute;right:-12px;top:-6px;opacity:0;transition:opacity .4s}

/* HUD */
#hud{position:absolute;left:14px;top:14px;display:flex;gap:10px;align-items:center}
.badge{display:inline-block;min-width:28px;text-align:center;background:rgba(255,255,255,.15);padding:6px 10px;border-radius:999px;border:1px solid rgba(200,210,255,.2)}

/* Chip bag */
.chipbag{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:120px;height:140px;border:none;background:transparent}
.chipbag img{width:100%;height:100%;object-fit:contain;transition:transform .12s ease}
.chipbag:active img{transform:scale(.94)} /* quick tap bounce */

/* Sheet */
.sheet{position:absolute;left:0;right:0;bottom:-100%;background:rgba(12,14,24,.9);backdrop-filter:blur(10px);border-top-left-radius:18px;border-top-right-radius:18px;border:1px solid rgba(200,210,255,.15);transition:bottom .35s;padding:12px 12px 18px}
.sheet.visible{bottom:0}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.title{font-weight:700}
.list{max-height:45vh;overflow:auto;margin-bottom:10px}
.goal{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(200,210,255,.15);margin:8px 0}
.goal .left{display:flex;gap:10px;align-items:center}
.goal input[type=checkbox]{width:20px;height:20px}
.goal .chips{font-weight:700;background:rgba(255,255,255,.15);padding:6px 10px;border-radius:999px;border:1px solid rgba(200,210,255,.2)}
.new-goal{display:flex;gap:8px;position:sticky;bottom:0;background:transparent;padding-top:8px}
button.primary,button.secondary{border:none;border-radius:12px;padding:10px 14px}
button.primary{background:#a2b3ff;color:#0b0b14}
button.secondary{background:#cfd6ff;color:#0b0b14}

/* Anim layer */
#anim{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #ffe8a4 0%, #ffd36a 60%, #f1b351 100%);box-shadow:0 4px 10px rgba(0,0,0,.3)}