@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@700;800;900&display=swap');

:root { --ink:#34285a; --purple:#7052ce; --purple-dark:#4c359a; --pink:#ff6da6; --cream:#fffaf1; --mint:#83e1c8; --yellow:#ffd45c; --border:#e8d9ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; color:var(--ink); font-family:Fredoka, "PingFang TC", system-ui, sans-serif; background:linear-gradient(160deg,#f5efff 0%,#fff5fa 45%,#e9fbff 100%); }
button { font:inherit; cursor:pointer; border:0; }
.app-shell { width:min(100%, 740px); min-height:100svh; margin:auto; padding:18px 18px 28px; position:relative; overflow:hidden; }
.brand { display:flex; align-items:center; gap:10px; margin:0 2px 14px; } .brand-icon { width:44px; height:44px; transform:rotate(-8deg); filter:drop-shadow(0 3px 2px rgba(80,50,150,.2)); } .brand h1 { margin:0; color:#573eae; font-size:26px; line-height:1; letter-spacing:.04em; } .brand p { margin:3px 0 0; color:#9b86c3; font-size:12px; font-weight:700; letter-spacing:.12em; }
.screen { width:100%; } .hidden { display:none!important; }
.intro-card,.end-card { background:rgba(255,255,255,.82); border:2px solid #fff; box-shadow:0 12px 32px rgba(91,65,158,.12); border-radius:28px; padding:22px; }
.eyebrow { color:#ec5794; font-weight:800; font-size:13px; letter-spacing:.08em; margin:0 0 5px; } h2 { margin:0; font-size:25px; } .intro-card>p:last-child { margin:10px 0 0; color:#776891; line-height:1.55; font-weight:600; }
.pilot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:15px 0; }
.pilot-card { position:relative; min-height:157px; overflow:hidden; text-align:left; color:var(--ink); padding:11px; border:3px solid transparent; border-radius:22px; background:linear-gradient(145deg,#fff,#f6f2ff); box-shadow:0 6px 14px rgba(77,52,141,.08); transition:.18s transform,.18s border,.18s box-shadow; }
.pilot-card:hover,.pilot-card.selected { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 10px 20px color-mix(in srgb,var(--accent) 25%,transparent); } .pilot-art { height:84px; display:grid; place-items:center; filter:drop-shadow(0 6px 3px rgba(48,30,90,.16)); } .pilot-art img { width:84px; height:84px; transition:transform .25s; } .pilot-card:hover .pilot-art img,.pilot-card.selected .pilot-art img { transform:rotate(-6deg) scale(1.08); animation:hover-bob 1.4s ease-in-out infinite; } @keyframes hover-bob { 50% { translate:0 -4px; } } .pilot-plane { position:absolute; font-size:26px; right:6px; top:54px; transform:rotate(-14deg); } .pilot-card strong { display:block; font-size:16px; } .pilot-card small { display:block; margin-top:3px; color:#85769f; font-weight:700; line-height:1.25; } .pilot-burst { display:block; margin-top:5px; padding:3px 6px; border-radius:8px; font-style:normal; font-size:11px; font-weight:800; color:#fff; background:var(--accent); line-height:1.25; } .pilot-tag { position:absolute; top:8px; right:9px; font-size:10px; color:#fff; font-weight:800; padding:3px 7px; border-radius:999px; background:var(--accent); }
.start-actions { text-align:center; }.start-actions p { color:#8c7da8; font-size:12px; font-weight:700; margin:11px 0 0; }.primary-button { padding:14px 25px; color:white; font-weight:800; font-size:18px; border-radius:18px; background:linear-gradient(135deg,#ff7fb1,#e85597); box-shadow:0 7px 0 #bd3d76,0 13px 20px rgba(201,62,118,.24); transition:.12s transform,.12s box-shadow; }.primary-button:hover { transform:translateY(-2px); }.primary-button:active { transform:translateY(5px); box-shadow:0 2px 0 #bd3d76; }.primary-button span { margin-left:7px; }
.game-screen { position:relative; margin:auto; width:min(100%,480px); border-radius:27px; overflow:hidden; box-shadow:0 17px 35px rgba(65,38,130,.25); background:#80cdf6; aspect-ratio:480/760; }.game-screen canvas { display:block; width:100%; height:100%; touch-action:none; }
.hud { position:absolute; display:flex; align-items:center; z-index:3; pointer-events:none; }.top-hud { top:12px; left:12px; right:52px; gap:6px; }.hud-chip { display:flex; align-items:center; gap:4px; padding:5px 8px; border:2px solid rgba(255,255,255,.8); border-radius:999px; color:#fff; background:rgba(48,44,108,.55); text-shadow:0 1px 1px rgba(0,0,0,.2); font-size:15px; }.hud-chip.score { margin-left:auto; }.lives span { color:#ff9bbd; }.ticket span { font-size:13px; }
.lower-hud { left:11px; right:11px; bottom:12px; gap:7px; }.power-panel,.burst-panel,.buddy-list { padding:6px 8px; border:2px solid rgba(255,255,255,.75); border-radius:13px; color:white; background:rgba(48,44,108,.48); text-shadow:0 1px 1px rgba(0,0,0,.2); }.power-panel span,.burst-panel span { display:block; font-size:10px; font-weight:800; }.pips { display:flex; gap:2px; margin-top:2px; }.pip { height:8px; width:7px; border-radius:3px; background:rgba(255,255,255,.25); }.pip.on { background:#ffe270; box-shadow:0 0 7px #ffe270; }.pip.on.super { background:#ff8fd0; box-shadow:0 0 7px #ff8fd0; }.power-level { font-style:normal; margin-left:3px; color:#ffe270; }.power-level.max { background:linear-gradient(90deg,#ff7fb1,#ffd86a,#75f1ec,#b998ff); -webkit-background-clip:text; background-clip:text; color:transparent; animation:hue 1.2s linear infinite; } @keyframes hue { to { filter:hue-rotate(360deg); } }.burst-panel { width:101px; }.burst-track { margin-top:3px; height:8px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.27); }.burst-fill { height:100%; width:0%; border-radius:inherit; background:linear-gradient(90deg,#ff6baf,#ffd86a,#75f1ec); transition:width .18s; }.buddy-list { display:flex; gap:3px; margin-left:auto; min-height:38px; align-items:center; }.buddy-icon { position:relative; display:grid; place-items:center; height:28px; width:28px; border-radius:9px; background:rgba(255,255,255,.26); }.buddy-icon img { width:26px; height:26px; }.buddy-icon b { position:absolute; right:-4px; top:-6px; min-width:13px; padding:0 2px; color:#594294; font-size:9px; text-align:center; border-radius:999px; background:#fff; }
.pause-button,.mute-button { position:absolute; z-index:4; color:#fff; width:31px; height:31px; border:2px solid rgba(255,255,255,.8); border-radius:10px; background:rgba(48,44,108,.54); }.pause-button { top:13px; right:13px; }.mute-button { top:50px; right:13px; font-size:17px; line-height:1; }.mute-button.muted { opacity:.55; }.announcement { position:absolute; z-index:5; top:18%; left:50%; width:90%; color:white; font-size:24px; font-weight:900; text-align:center; transform:translateX(-50%); text-shadow:0 3px 0 #6d4aac,0 0 12px #6d4aac; pointer-events:none; opacity:0; transition:opacity .2s; }.announcement.show { opacity:1; }
.end-screen { display:grid; min-height:calc(100svh - 90px); place-items:center; }.end-card { width:min(100%,430px); text-align:center; }.end-pilot { width:120px; height:120px; animation:hover-bob 1.6s ease-in-out infinite; }.start-actions kbd { display:inline-block; min-width:18px; padding:0 4px; border-radius:5px; background:#fff; border:1px solid #d9c9f5; box-shadow:0 2px 0 #d9c9f5; font:inherit; font-size:11px; color:#5c42ae; }.burst-button { position:absolute; z-index:4; right:14px; bottom:72px; width:70px; height:70px; border-radius:50%; color:#fff; font-size:13px; font-weight:900; line-height:1.15; border:3px solid #fff; background:conic-gradient(#ff74ad,#ffd662,#84e8e2,#b998ff,#ff74ad); text-shadow:0 1px 2px rgba(60,30,110,.6); box-shadow:0 5px 12px rgba(65,38,130,.3); }.burst-button:disabled { filter:grayscale(.75) brightness(1.05); opacity:.6; cursor:default; }.burst-button.ready { animation:ready-pulse .7s ease-in-out infinite alternate; } @keyframes ready-pulse { to { transform:scale(1.1); box-shadow:0 0 22px #ffd86a; } }.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:18px 0; }.result-grid>div { padding:10px 4px; border-radius:15px; background:#f4efff; }.result-grid span,.result-grid strong { display:block; }.result-grid span { color:#8d79ac; font-size:11px; font-weight:700; }.result-grid strong { color:#5c42ae; font-size:19px; margin-top:3px; }.text-button { display:block; margin:17px auto 0; color:#816ca6; font-weight:800; background:transparent; text-decoration:underline; }
@media (max-width:430px) { .app-shell { padding:12px 12px 20px; }.pilot-grid { gap:7px; }.pilot-card { min-height:144px; padding:8px; border-radius:18px; }.pilot-art { height:70px; }.pilot-art img { width:72px; height:72px; }.pilot-card strong { font-size:14px; }.pilot-card small { font-size:11px; }.pilot-plane { top:48px; font-size:22px; }.intro-card { padding:18px; }.brand { margin-bottom:10px; } }