:root{
  --pink:#ff63b4;
  --purple:#7b4dff;
  --blue:#33c9ff;
  --yellow:#ffde59;
  --cream:#fff7dc;
  --ink:#30174f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter, ui-rounded, system-ui, -apple-system, Segoe UI, sans-serif;background:linear-gradient(180deg,#89dbff,#98e4ff 60%,#b6ebff);color:var(--ink);touch-action:none}
#game{position:fixed;inset:0}
.hud{position:fixed;left:12px;right:12px;top:max(12px,env(safe-area-inset-top));display:flex;justify-content:space-between;gap:10px;align-items:flex-start;pointer-events:none;z-index:5}
.brand{display:flex;gap:10px;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(254,242,255,.82));border:1px solid rgba(255,255,255,.95);box-shadow:0 16px 45px rgba(71,37,135,.18);backdrop-filter:blur(14px);border-radius:24px;padding:10px 14px;max-width:420px}
.spark{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue));color:white;font-size:24px;box-shadow:0 8px 20px rgba(123,77,255,.35)}
.brand strong{display:block;font-size:16px;letter-spacing:-.02em}.brand small{display:block;font-size:12px;opacity:.76;margin-top:2px}
.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:420px}
.stats div{min-width:70px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(244,236,255,.86));border:1px solid rgba(255,255,255,.85);box-shadow:0 16px 45px rgba(71,37,135,.16);backdrop-filter:blur(14px);border-radius:20px;padding:8px 10px}
.stats b{display:block;font-size:20px}.stats span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.68}
.sound{position:fixed;right:14px;top:96px;z-index:7;width:48px;height:48px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--pink),var(--purple));color:white;font-weight:900;font-size:20px;box-shadow:0 14px 34px rgba(76,35,132,.25)}
.message{position:fixed;left:50%;bottom:118px;transform:translateX(-50%);max-width:min(560px,calc(100vw - 24px));background:linear-gradient(135deg,rgba(74,49,132,.94),rgba(48,23,79,.94));color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 60px rgba(20,6,50,.28);backdrop-filter:blur(14px);border-radius:24px;padding:14px 18px;text-align:center;z-index:5;font-size:15px;line-height:1.35;transition:opacity .35s, transform .35s}
.message.fade{opacity:0;transform:translateX(-50%) translateY(18px);pointer-events:none}
.help-btn{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:6;border:0;border-radius:999px;padding:16px 26px;background:linear-gradient(135deg,#ffde59,#ff7bbd,#8e6cff);color:white;font-size:19px;font-weight:900;box-shadow:0 18px 45px rgba(123,77,255,.35), inset 0 1px 0 rgba(255,255,255,.55);animation:bob 1.4s ease-in-out infinite}
.build-btn{position:fixed;right:20px;bottom:28px;z-index:6;border:0;border-radius:999px;padding:15px 22px;background:linear-gradient(135deg,#60d96b,#33c9ff,#8e6cff);color:white;font-size:17px;font-weight:900;box-shadow:0 18px 45px rgba(79,116,185,.28), inset 0 1px 0 rgba(255,255,255,.55)}
.exit-house-btn{position:fixed;right:20px;bottom:28px;z-index:8;border:0;border-radius:999px;padding:15px 22px;background:linear-gradient(135deg,#ffde59,#ff63b4,#7b4dff);color:white;font-size:17px;font-weight:900;box-shadow:0 18px 45px rgba(123,77,255,.28), inset 0 1px 0 rgba(255,255,255,.55)}

.hidden{display:none!important}
.joystick{position:fixed;left:22px;bottom:22px;width:118px;height:118px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(235,225,255,.34));border:1px solid rgba(255,255,255,.75);box-shadow:0 15px 50px rgba(51,28,97,.18);backdrop-filter:blur(10px);z-index:7;touch-action:none}
.stick{position:absolute;left:34px;top:34px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 10px 24px rgba(65,46,129,.28), inset 0 1px 0 rgba(255,255,255,.5)}
.quest-panel,.win-panel{position:fixed;inset:0;display:grid;place-items:center;background:rgba(35,15,65,.38);backdrop-filter:blur(8px);z-index:20;padding:18px}
.quest-card,.win-card{position:relative;width:min(500px,100%);background:linear-gradient(180deg,#fffafc,#fff4ff 42%,#f7fbff);border:1px solid rgba(255,255,255,.95);border-radius:34px;padding:24px;box-shadow:0 28px 90px rgba(38,17,82,.34);text-align:center;overflow:hidden}
.quest-card:before,.win-card:before{content:"";position:absolute;inset:-60px -50px auto;height:150px;background:radial-gradient(circle at 20% 10%,rgba(255,99,180,.28),transparent 35%),radial-gradient(circle at 75% 20%,rgba(51,201,255,.25),transparent 35%),radial-gradient(circle at 55% 0%,rgba(255,222,89,.18),transparent 28%);pointer-events:none}
.close{position:absolute;right:16px;top:14px;width:40px;height:40px;border:0;border-radius:50%;background:#f3eaff;color:var(--ink);font-size:26px;font-weight:700}
.stall-icon{font-size:52px;margin-bottom:4px}
.quest-card h2{margin:0 0 8px;font-size:28px;letter-spacing:-.04em}
.quest-card p{font-size:19px;line-height:1.38;margin:10px auto 18px;max-width:390px}
.sum-row{display:inline-block;margin-top:8px;padding:8px 14px;border-radius:16px;background:linear-gradient(135deg,#fff6c9,#ffe3f3,#e6f9ff);box-shadow:0 10px 22px rgba(72,45,121,.08);font-size:28px}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.answer-grid button{min-height:60px;border:0;border-radius:20px;background:linear-gradient(135deg,#fff2b8,#ffd4e9,#dff7ff);font-size:26px;font-weight:900;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(72,45,121,.12)}
.answer-grid button:active{transform:scale(.97)}
.feedback{min-height:30px;margin-top:14px;font-weight:900;font-size:19px}
.feedback.good{color:#15a35a}.feedback.bad{color:#e33b6b}
.trophy{font-size:76px}
.win-card h1{font-size:36px;line-height:1.05;margin:5px 0 10px}.win-card p{font-size:18px;opacity:.8}
.win-card button{border:0;border-radius:20px;background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue));color:white;font-weight:900;font-size:18px;padding:15px 24px;box-shadow:0 16px 35px rgba(123,77,255,.32)}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
@media (max-width:720px){
  .brand small{display:none}
  .brand{padding:9px 10px;max-width:250px}
  .brand strong{font-size:13px}
  .stats div{min-width:55px;padding:7px 6px}
  .stats b{font-size:15px}
  .stats span{font-size:9px}
  .sound{top:84px}
  .message{bottom:154px;font-size:13px}
  .help-btn{bottom:156px;font-size:18px}
  .build-btn{right:14px;bottom:92px;font-size:15px;padding:13px 18px}
  .quest-card{padding:22px 16px}
  .answer-grid button{min-height:64px}
  .joystick{width:124px;height:124px}
  .stick{left:37px;top:37px}
  .sum-row{font-size:24px}
}
@media (hover:hover) and (pointer:fine){
  .joystick{opacity:.45}
  .help-btn:hover,.build-btn:hover,.exit-house-btn:hover,.answer-grid button:hover,.win-card button:hover,.sound:hover{filter:brightness(1.04);transform:translateY(-1px)}
}