* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1d3a; touch-action: none; overscroll-behavior: none; }
body { font-family: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif; color: #fff; user-select: none; -webkit-user-select: none; }
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }
svg path { vector-effect: non-scaling-stroke; }

/* ---------- buttons ---------- */
.icon-btn { width: 48px; height: 48px; border-radius: 16px; background: #ffffff; box-shadow: 0 4px 0 #c7cbe0, 0 6px 14px rgba(0,0,0,.25); display: grid; place-items: center; padding: 0; transition: transform .08s; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c7cbe0; }
.icon-btn svg { width: 26px; height: 26px; fill: none; stroke: #2b2f5a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.big-btn { display: block; min-width: 230px; padding: 14px 34px 16px; border-radius: 22px; font-size: 30px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.18); transition: transform .08s; }
.big-btn small { display: block; font-size: 14px; font-weight: 600; opacity: .9; letter-spacing: 1.5px; margin-top: -2px; }
.big-btn:active { transform: translateY(4px); }
.big-btn.green { background: linear-gradient(#4be38d, #22c26c); box-shadow: 0 6px 0 #169452, 0 10px 22px rgba(0,0,0,.3); }
.big-btn.blue { background: linear-gradient(#62a5ff, #3d7ff0); box-shadow: 0 6px 0 #2a5cc0, 0 10px 22px rgba(0,0,0,.3); font-size: 22px; padding: 11px 28px 12px; }
.big-btn.orange { background: linear-gradient(#ffa35c, #ff7a2e); box-shadow: 0 6px 0 #cc5512, 0 10px 22px rgba(0,0,0,.3); }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; height: 50px; padding: 0 20px; border-radius: 25px; background: #fff; color: #2b2f5a; font-size: 18px; font-weight: 700; box-shadow: 0 4px 0 #c7cbe0, 0 8px 16px rgba(0,0,0,.25); }
.pill-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c7cbe0; }
.pill-btn svg { width: 22px; height: 22px; fill: none; stroke: #2b2f5a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pill-btn:disabled { opacity: .5; }
.pill-btn.go { background: linear-gradient(#4be38d, #22c26c); color: #fff; box-shadow: 0 4px 0 #169452, 0 8px 16px rgba(0,0,0,.25); font-size: 22px; padding: 0 28px; animation: pulse 1s ease-in-out infinite; }
.link-btn { background: none; color: #6b70a0; font-size: 16px; font-weight: 600; margin-top: 12px; padding: 6px 12px; }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
.top-right { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; }

#splash { background: radial-gradient(circle at 50% 45%, #2a2d5c 0%, #15162e 75%); z-index: 50; transition: opacity .45s ease; cursor: pointer; }
#splash.out { opacity: 0; pointer-events: none; }
.splash-logo { font-size: clamp(54px, 13vw, 118px); font-weight: 700; letter-spacing: 1px; line-height: 1; display: flex; align-items: baseline; animation: logoPop 2.3s ease-in-out both; }
.splash-logo span { display: inline-block; color: var(--c); text-shadow: 0 5px 0 rgba(0,0,0,.25); animation: letterIn .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
.splash-logo .games { color: #fff; font-weight: 600; font-size: .62em; margin-left: 2px; }
.splash-logo .dot { margin: 0 1px; }
.splash-sub { font-size: 18px; letter-spacing: 6px; color: #9aa0d6; text-transform: uppercase; animation: fadeIn .6s .9s both; }
@keyframes letterIn { 0% { transform: translateY(-70px) scale(.3); opacity: 0; } 70% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes logoPop { 0%, 55% { transform: scale(1); } 68% { transform: scale(1.07); } 80%, 100% { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#title { background: linear-gradient(180deg, rgba(27,29,58,.82) 0%, rgba(27,29,58,.45) 45%, rgba(27,29,58,.85) 100%); }
#title.enter .logo { animation: fadeIn .5s both; }
.logo { position: relative; text-align: center; line-height: .9; font-weight: 700; margin-bottom: 14px; padding-top: 34px; }
.logo .w1, .logo .w2, .logo .w3 { font-size: clamp(56px, 15vw, 104px); letter-spacing: 2px; }
.logo .w1 { color: #FFC53D; text-shadow: 0 6px 0 #c98a00, 0 12px 24px rgba(0,0,0,.35); transform: rotate(-3deg); }
.logo .w2 { color: #62a5ff; text-shadow: 0 6px 0 #2a5cc0, 0 12px 24px rgba(0,0,0,.35); transform: rotate(2deg); }
.logo .w3 { font-size: clamp(40px, 10.5vw, 70px); color: #FF5E6C; text-shadow: 0 5px 0 #b62a3a, 0 12px 24px rgba(0,0,0,.35); letter-spacing: 5px; margin-top: 6px; }
.logo .badge { position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(-8deg); width: 54px; height: 54px; border-radius: 14px; background: #3D8BFF; border: 4px solid #fff; display: grid; place-items: center; font-size: 34px; box-shadow: 0 5px 0 #2a5cc0; }
.logo-path { display: block; width: min(300px, 70vw); margin: 10px auto 0; }
.logo-path path { fill: none; stroke: #2ED47A; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 14; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.credit { font-size: 13px; color: rgba(255,255,255,.75); font-weight: 500; }
.credit a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.6); }
.title-credit { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); }

#select { background: rgba(27,29,58,.92); justify-content: flex-start; padding-top: calc(16px + env(safe-area-inset-top)); overflow-y: auto; touch-action: pan-y; }
.select-head { width: min(640px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.select-head h2 { margin: 0; font-size: 26px; letter-spacing: 1px; }
#starTotal { font-size: 18px; font-weight: 700; color: #FFC53D; min-width: 48px; text-align: right; }
#grid { width: min(640px, 100%); display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding-bottom: 28px; }
@media (min-width: 700px) { #grid { grid-template-columns: repeat(8, 1fr); } }
.lvl { aspect-ratio: 1; border-radius: 16px; background: #fff; color: #2b2f5a; font-size: 24px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 0 #c7cbe0; padding: 0; }
.lvl:active { transform: translateY(3px); box-shadow: 0 1px 0 #c7cbe0; }
.lvl .st { font-size: 12px; letter-spacing: 1px; line-height: 1; }
.lvl .st b { color: #FFC53D; } .lvl .st i { color: #d5d8ea; font-style: normal; }
.lvl.locked { background: #3a3d6b; color: #6d71a8; box-shadow: 0 4px 0 #2a2c52; cursor: default; }
.lvl.locked svg { width: 22px; height: 22px; fill: none; stroke: #6d71a8; stroke-width: 2.6; stroke-linecap: round; }
.lvl.current { background: #FFC53D; box-shadow: 0 4px 0 #c98a00; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #hud a { pointer-events: auto; }
#topbar { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; }
#levelLabel { font-size: 26px; font-weight: 700; letter-spacing: 1px; padding: 6px 18px; border-radius: 18px; background: rgba(27,29,58,.72); }
#bottombar { position: absolute; left: 0; right: 0; bottom: calc(34px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 14px; }
.game-credit { position: absolute; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom)); text-align: center; font-size: 11px; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#tip { position: absolute; left: 50%; transform: translateX(-50%); top: calc(70px + env(safe-area-inset-top)); width: max-content; max-width: calc(100% - 24px); text-align: center; background: rgba(27,29,58,.85); padding: 8px 16px; border-radius: 14px; font-size: 16px; font-weight: 600; }
#hand { position: absolute; width: 54px; height: 54px; z-index: 12; pointer-events: none; transform: translate(-14px, -4px); filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
#toast { position: absolute; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; background: #ff4d5e; color: #fff; padding: 9px 18px; border-radius: 14px; font-weight: 600; font-size: 16px; max-width: calc(100% - 24px); text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.3); pointer-events: none; }

/* ---------- result card ---------- */
#modal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(15,16,34,.55); animation: fadeIn .25s both; }
.card { width: min(360px, calc(100% - 36px)); background: #fff; color: #2b2f5a; border-radius: 28px; padding: 26px 22px 18px; text-align: center; box-shadow: 0 10px 0 #c7cbe0, 0 24px 50px rgba(0,0,0,.4); animation: cardIn .4s cubic-bezier(.3,1.5,.5,1) both; display: flex; flex-direction: column; align-items: center; }
.card h2 { margin: 0 0 8px; font-size: 32px; letter-spacing: 1px; }
.card.fail h2 { color: #ff4d5e; }
.card.win h2 { color: #22c26c; }
.card p { margin: 6px 0 18px; font-size: 17px; color: #5c6190; line-height: 1.35; }
#modalStars { display: flex; gap: 6px; justify-content: center; margin: 4px 0 2px; }
#modalStars svg { width: 62px; height: 62px; }
#modalStars svg:nth-child(2) { transform: translateY(-12px); width: 74px; height: 74px; }
#modalStars .on { animation: starIn .45s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes cardIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } }
@media (max-height: 560px) { .logo .w1, .logo .w2 { font-size: 56px; } .logo .w3 { font-size: 40px; } .screen { gap: 10px; } }