.mini-hero { padding: 52px 20px 28px; text-align: center; }
.mini-hero h1 { margin: 0; font-size: clamp(3.5rem, 8vw, 5.8rem); line-height: .88; }
.mini-hero h1 span { color: var(--gold); }
.mini-hero > p:last-child { max-width: 600px; margin: 21px auto 0; color: var(--muted); line-height: 1.65; }
.mini-game-shell { width: min(850px, calc(100% - 28px)); min-height: 650px; margin: 12px auto 75px; padding: 16px; position: relative; border: 1px solid rgba(203,186,245,.2); border-radius: 30px; background: rgba(22,29,56,.88); box-shadow: var(--shadow); }
.mini-game-bar { min-height: 70px; padding: 7px 14px 15px; display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; gap: 15px; }
.mini-stage { min-height: 540px; padding: clamp(18px,4vw,34px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(105,214,196,.18); border-radius: 22px; text-align: center; background: radial-gradient(circle at 50% 25%, rgba(105,214,196,.09), transparent 35%), linear-gradient(160deg, rgba(8,17,35,.85), rgba(31,22,56,.92)); }
.stage-title { margin: 0 0 5px; font: 800 clamp(1.8rem,4vw,2.5rem) "Baloo 2"; }
.stage-text { margin: 0 0 22px; color: var(--muted); }
.listen-orb { width: 118px; height: 118px; margin-bottom: 22px; display: grid; place-items: center; border: 1px solid rgba(246,212,123,.45); border-radius: 50%; color: var(--gold); background: radial-gradient(circle, rgba(246,212,123,.16), rgba(31,34,69,.8) 65%); box-shadow: 0 0 45px rgba(246,212,123,.14); font-size: 48px; }
.listen-orb.playing { animation: voice-pulse .8s ease-in-out infinite alternate; }
@keyframes voice-pulse { to { transform: scale(1.06); box-shadow: 0 0 60px rgba(105,214,196,.32); color: #fff0b7; } }
.listen-button { min-height: 47px; margin-bottom: 26px; padding: 10px 21px; border: 1px solid rgba(105,214,196,.42); border-radius: 99px; color: #cbfff4; background: rgba(39,92,88,.48); font-weight: 900; cursor: pointer; }
.choice-grid { width: 100%; max-width: 650px; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.choice-card { padding: 7px 7px 11px; overflow: hidden; border: 2px solid rgba(203,186,245,.2); border-radius: 18px; color: var(--ink); background: rgba(37,44,78,.88); cursor: pointer; transition: transform .18s,border-color .18s; }
.choice-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.choice-card img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border-radius: 12px; }
.choice-card span { display: block; padding-top: 8px; font-weight: 900; }
.choice-card.correct { border-color: var(--mint); box-shadow: 0 0 26px rgba(105,214,196,.3); }
.choice-card.wrong { border-color: #dc7796; opacity: .55; }
.choice-card:disabled { cursor: default; }
.round-status { min-height: 24px; margin: 18px 0 0; color: var(--gold); font-weight: 900; }
.mini-overlay { position: absolute; inset: 0; z-index: 8; padding: 18px; display: grid; place-items: center; border-radius: inherit; background: rgba(7,12,29,.7); backdrop-filter: blur(8px); }
.mini-overlay.hidden { display: none; }
.mini-overlay-card { width: min(485px,94%); padding: clamp(28px,5vw,45px); border: 1px solid rgba(203,186,245,.32); border-radius: 26px; text-align: center; background: linear-gradient(155deg,rgba(31,39,73,.98),rgba(32,23,54,.98)); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.mini-overlay-card > span { width: 78px; height: 78px; margin: 0 auto 16px; display: grid; place-items: center; border: 1px solid rgba(246,212,123,.4); border-radius: 50%; color: var(--gold); font-size: 40px; }
.mini-overlay-card h2 { margin: 0 0 10px; font-size: clamp(2rem,5vw,2.7rem); line-height: 1.05; }
.mini-overlay-card p { margin: 0 0 23px; color: var(--muted); line-height: 1.55; }
@media (max-width:600px){.mini-game-shell{min-height:620px;padding:8px}.mini-game-bar{grid-template-columns:90px 1fr 90px;padding-inline:4px}.mini-stage{min-height:510px;padding:16px 10px}.choice-grid{gap:8px}.choice-card{padding:5px 5px 9px;border-radius:14px}.choice-card img{border-radius:10px}.choice-card span{font-size:.78rem}.listen-orb{width:92px;height:92px;font-size:38px}.mini-overlay{padding:8px}.mini-overlay-card{padding:27px 18px}}

.sequence-grid { width: min(530px,100%); display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.sequence-card { aspect-ratio: 1; padding: 7px; position: relative; overflow: hidden; border: 3px solid rgba(203,186,245,.18); border-radius: 24px; color: var(--ink); background: rgba(31,39,72,.8); cursor: pointer; transition: transform .16s,filter .16s,border-color .16s,box-shadow .16s; }
.sequence-card img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 16px; filter: brightness(.72) saturate(.82); transition: filter .16s,transform .16s; }
.sequence-card span { position: absolute; inset: auto 13px 12px; padding: 5px 8px; border-radius: 99px; background: rgba(8,13,30,.74); font-size: .75rem; font-weight: 900; }
.sequence-card.active { z-index: 2; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(246,212,123,.18),0 0 42px rgba(246,212,123,.48); transform: scale(1.045); }
.sequence-card.active img { filter: brightness(1.2) saturate(1.12); transform: scale(1.025); }
.sequence-card.player-correct { border-color: var(--mint); box-shadow: 0 0 28px rgba(105,214,196,.4); }
.sequence-card:disabled { cursor: default; }
.sequence-progress { width: min(530px,100%); height: 10px; margin: 0 0 20px; overflow: hidden; border-radius: 99px; background: rgba(203,186,245,.11); }
.sequence-progress > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--mint),var(--gold)); transition: width .25s; }
@media(max-width:600px){.sequence-grid{gap:9px;max-width:420px}.sequence-card{padding:5px;border-radius:17px}.sequence-card img{border-radius:11px}}