*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#080818;color:#fff;font-family:'Apple SD Gothic Neo','Noto Sans KR',sans-serif;height:100vh;overflow:hidden;-webkit-tap-highlight-color:transparent}
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none}

/* Shell */
#shell{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column}

/* Header */
#header{flex-shrink:0;padding:max(env(safe-area-inset-top,0px),44px) 16px 12px;display:flex;align-items:center;gap:10px;background:rgba(8,8,24,.96);border-bottom:1px solid rgba(150,100,255,.12)}
#back-btn{background:none;border:none;color:#c8a0ff;font-size:22px;cursor:pointer;padding:2px 8px}
#game-title{flex:1;font-size:15px;font-weight:700;color:#e0d0ff}
#timer{font-size:20px;font-weight:700;color:#ffd700;min-width:36px;text-align:right}

/* Content */
#content{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}

/* Result */
#result{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;background:rgba(8,8,24,.96);backdrop-filter:blur(8px);z-index:5;text-align:center}
.res-emoji{font-size:68px;margin-bottom:14px;display:block}
.res-title{font-size:19px;font-weight:700;color:#c8a0ff;margin-bottom:6px}
.res-score{font-size:50px;font-weight:700;color:#fff;text-shadow:0 0 28px rgba(200,160,255,.5);margin-bottom:4px;line-height:1}
.res-grade{font-size:14px;color:#c8a0ff;margin-bottom:4px}
.res-desc{font-size:12px;color:#7777aa;margin-bottom:28px}
.btn-p{background:linear-gradient(135deg,#7b4fff,#c060ff);border:none;border-radius:50px;padding:14px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 22px rgba(123,79,255,.3);display:block;width:100%;max-width:280px;margin-bottom:10px}
.btn-s{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:50px;padding:12px;color:#aaa;font-size:14px;cursor:pointer;display:block;width:100%;max-width:280px}

/* Index hub */
.hub-wrap{width:100%;max-width:480px;padding:8px 12px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hub-head{text-align:center;padding:max(env(safe-area-inset-top,0px),44px) 20px 14px}
.hub-logo{font-size:12px;color:#7b5fff;letter-spacing:3px;margin-bottom:6px}
.hub-title{font-size:24px;font-weight:700;color:#e8d8ff;margin-bottom:4px;text-shadow:0 0 20px rgba(200,160,255,.4)}
.hub-sub{font-size:12px;color:#555588}
.game-card{background:#161630;border:1px solid rgba(160,140,255,.16);border-radius:14px;padding:14px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;text-decoration:none}
.game-card:active{background:#1d1b3e;border-color:rgba(160,140,255,.4);transform:scale(.96)}
@media(hover:hover){.game-card:hover{background:#1d1b3e;border-color:rgba(160,140,255,.32)}}
.gc-icon{font-size:28px;line-height:1;filter:drop-shadow(0 0 8px rgba(160,140,255,.45))}
.gc-name{font-size:11px;font-weight:700;color:#f3f1ff;text-align:center;line-height:1.25;word-break:keep-all}
.gc-desc{display:none}
.gc-dur{font-size:9px;color:#c5b8ff;background:rgba(150,130,255,.2);border-radius:20px;padding:1px 6px;margin-top:2px}
.game-card>div{width:100%;text-align:center}

/* Progress dots */
.pdots{display:flex;gap:8px}
.pdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);transition:.2s}
.pdot.done{background:#c8a0ff;border-color:#c8a0ff}
.pdot.cur{background:#ffd700;border-color:#ffd700;animation:pd .8s infinite}
@keyframes pd{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}

/* Animations */
@keyframes popIn{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.pop-in{animation:popIn .32s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}