* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
html,body { width:100%; height:100%; overflow:hidden; background:#0f9cc9; font-family:"Baloo 2", "Arial Rounded MT Bold", -apple-system, "Segoe UI", sans-serif; touch-action:none; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; }

.screen { position:fixed; inset:0; display:none; z-index:10; }
.screen.show { display:flex; }
.screen.center { align-items:center; justify-content:center; }
.screen.overlay { background:rgba(6,40,60,.45); backdrop-filter:blur(4px); }
.menu-side { align-items:center; justify-content:flex-start; pointer-events:none; }
.menu-panel { pointer-events:auto; margin-left:4vw; max-height:94vh; overflow-y:auto; padding:18px 20px; border-radius:26px; background:rgba(255,255,255,.88); box-shadow:0 12px 40px rgba(0,60,90,.35); display:flex; flex-direction:column; gap:10px; min-width:290px; max-width:380px; }

.game-title { font-family:"Titan One", "Baloo 2", sans-serif; font-weight:400; font-size:34px; line-height:1.08; color:#0b6d96; text-shadow:0 2px 0 #fff, 0 4px 0 rgba(11,109,150,.18); letter-spacing:0; }
.game-title.small { font-size:26px; }
h2 { font-family:"Titan One", "Baloo 2", sans-serif; font-weight:400; color:#0b6d96; font-size:24px; }
h3 { color:#12809f; font-size:15px; margin-top:4px; }

.btn { pointer-events:auto; border:none; border-radius:18px; background:#e8f6fb; color:#0b6d96; font-family:inherit; font-size:18px; font-weight:800; padding:12px 18px; cursor:pointer; box-shadow:0 4px 0 rgba(11,109,150,.25); transition:transform .08s; }
.btn:active { transform:scale(.95) translateY(2px); box-shadow:0 1px 0 rgba(11,109,150,.25); }
.btn.big { font-size:22px; padding:15px 20px; }
.btn.primary { background:linear-gradient(180deg,#ffd93d,#ffb830); color:#7a4a00; box-shadow:0 5px 0 #d9922a; }
.btn.sm { font-size:15px; padding:8px 14px; }
.btn.back { background:#d6ecf5; margin-top:8px; }
.btn.round { width:52px; height:52px; border-radius:50%; font-size:20px; padding:0; }
.row { display:flex; gap:10px; align-items:center; }
.row .btn { flex:1; }

.token-pill { align-self:flex-start; background:#0b6d96; color:#fff; font-weight:800; border-radius:999px; padding:6px 14px; font-size:16px; }

.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.grid .card { background:#fff; border:3px solid #cfe9f2; border-radius:16px; padding:8px 4px; text-align:center; cursor:pointer; font-weight:800; color:#0b6d96; font-size:13px; }
.grid .card .emoji { font-size:30px; display:block; }
.grid .card.sel { border-color:#ffb830; background:#fff6df; }
.grid .card.locked { opacity:.75; filter:grayscale(.4); }
.grid .card .cost { display:block; font-size:11px; color:#12809f; }
.grid.colors { grid-template-columns:repeat(6,1fr); }
.grid .swatch { height:34px; border-radius:12px; border:3px solid #cfe9f2; cursor:pointer; }
.grid .swatch.sel { border-color:#333; }
.note { min-height:20px; font-size:14px; color:#c2571a; font-weight:700; }

.panel { pointer-events:auto; background:rgba(255,255,255,.94); border-radius:26px; padding:22px 26px; box-shadow:0 12px 40px rgba(0,60,90,.4); display:flex; flex-direction:column; gap:12px; align-items:center; max-height:92vh; overflow-y:auto; max-width:92vw; }
.panel.wide { min-width:min(760px,90vw); }
.level-grid { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.level-card { width:200px; border-radius:20px; padding:14px; text-align:center; cursor:pointer; color:#fff; font-weight:800; box-shadow:0 6px 18px rgba(0,40,60,.3); }
.level-card.locked { filter:grayscale(.8); opacity:.6; }
.level-card .lv-emoji { font-size:40px; }
.level-card .lv-stars { font-size:18px; margin-top:4px; }
.level-card .lv-best { font-size:13px; opacity:.9; }

/* HUD */
.hud { pointer-events:none; }
.hud-top { position:absolute; top:env(safe-area-inset-top,8px); left:0; right:0; display:flex; align-items:flex-start; justify-content:space-between; padding:10px 14px; gap:10px; }
.hud-place { font-family:"Titan One", sans-serif; font-size:34px; font-weight:400; color:#fff; text-shadow:0 3px 0 rgba(0,60,90,.5); min-width:80px; }
.hud-mid { flex:1; max-width:440px; margin:0 auto; text-align:center; }
.hud-timer { font-size:24px; font-weight:900; color:#fff; text-shadow:0 2px 0 rgba(0,60,90,.5); }
.progress { position:relative; height:10px; background:rgba(255,255,255,.35); border-radius:999px; margin-top:4px; }
#hud-progress { position:absolute; left:0; top:0; bottom:0; width:0%; background:#ffd93d; border-radius:999px; }
#hud-dots { position:absolute; inset:0; }
#hud-dots .dot { position:absolute; top:-4px; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid #0b6d96; margin-left:-8px; display:flex; align-items:center; justify-content:center; font-size:9px; }
#hud-dots .dot.me { background:#ffd93d; z-index:2; width:20px; height:20px; top:-6px; font-size:11px; }
.hud-right { display:flex; gap:10px; align-items:center; pointer-events:auto; }
.hud-tokens { font-size:20px; font-weight:900; color:#fff; text-shadow:0 2px 0 rgba(0,60,90,.5); }
.hud-power { position:absolute; top:70px; left:50%; transform:translateX(-50%); font-size:22px; font-weight:900; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.3); }
.hud-msg { font-family:"Titan One", sans-serif; position:absolute; top:26%; width:100%; text-align:center; font-size:34px; font-weight:400; color:#fff; text-shadow:0 3px 0 rgba(200,80,0,.6); opacity:0; transition:opacity .3s; }
.hud-msg.show { opacity:1; }
.countdown { font-family:"Titan One", sans-serif; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:110px; font-weight:400; color:#ffd93d; text-shadow:0 6px 0 rgba(0,60,90,.5); pointer-events:none; }

.joystick { position:absolute; left:4vw; bottom:5vh; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.22); border:3px solid rgba(255,255,255,.5); pointer-events:auto; display:none; }
.joy-knob { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(255,255,255,.85); box-shadow:0 3px 8px rgba(0,40,60,.3); }
.touch-buttons { position:absolute; right:4vw; bottom:5vh; display:none; gap:16px; pointer-events:auto; }
.tbtn { width:96px; height:96px; border-radius:50%; border:none; font-size:30px; font-weight:900; font-family:inherit; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 5px 0 rgba(0,40,60,.35); }
.tbtn span { font-size:12px; }
.tbtn.jump { background:linear-gradient(180deg,#4cd964,#2fae49); }
.tbtn.boost { background:linear-gradient(180deg,#ff9f43,#f0762b); }
.tbtn:active { transform:scale(.92); }
body.touch .joystick, body.touch .touch-buttons { display:flex; }

/* results */
.res-place { font-family:"Titan One", sans-serif; font-size:52px; font-weight:400; color:#f0762b; }
.res-stars { font-size:40px; letter-spacing:6px; }
.res-rows { display:grid; grid-template-columns:auto auto; gap:4px 26px; font-size:18px; font-weight:700; color:#0b6d96; }
.res-rows .val { text-align:right; color:#083f57; }
.res-unlock { font-weight:900; color:#2fae49; min-height:22px; font-size:18px; }

.setrow { display:flex; align-items:center; justify-content:space-between; gap:16px; width:290px; font-size:18px; font-weight:800; color:#0b6d96; }
.setrow.danger { color:#c0392b; }
input[type=range] { width:140px; pointer-events:auto; }
.vol-row { font-size:20px; }
.vol-row input { width:90px; }

.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:560px; }
.help-grid div { background:#eaf7fc; border-radius:16px; padding:12px; font-size:14px; color:#0b6d96; text-align:center; }
.help-grid b { display:block; font-size:16px; }

.load-card { margin:auto; text-align:center; background:rgba(255,255,255,.9); padding:34px 44px; border-radius:30px; box-shadow:0 12px 40px rgba(0,60,90,.4); }
.load-logo { font-size:60px; }
.load-bar { width:240px; height:14px; background:#d6ecf5; border-radius:999px; margin:18px auto 8px; overflow:hidden; }
#load-fill { height:100%; width:5%; background:linear-gradient(90deg,#1ec8e8,#ffd93d); border-radius:999px; transition:width .3s; }
.load-tip { color:#12809f; font-weight:700; }
#screen-loading { background:linear-gradient(180deg,#8fe3f7,#1ec8e8); }

.toast { position:fixed; top:14px; left:50%; transform:translate(-50%,-120px); background:#2fae49; color:#fff; font-weight:900; font-size:18px; padding:12px 22px; border-radius:999px; box-shadow:0 6px 20px rgba(0,40,20,.4); transition:transform .35s; z-index:99; }
.toast.show { transform:translate(-50%,0); }

.rotate-hint { display:none; position:fixed; inset:0; z-index:98; background:rgba(10,60,90,.92); color:#fff; font-size:26px; font-weight:900; text-align:center; align-items:center; justify-content:center; padding:30px; }
body.want-landscape .rotate-hint { display:flex; }

@media (max-height:420px) {
  .menu-panel { padding:10px 14px; gap:6px; max-height:96vh; }
  .game-title.small { font-size:20px; }
  .btn.big { font-size:17px; padding:9px 14px; }
  .tbtn { width:78px; height:78px; font-size:24px; }
  .joystick { width:104px; height:104px; }
}


/* custom SVG icons */
.ic { width:1.05em; height:1.05em; vertical-align:-0.16em; fill:currentColor; display:inline-block; }
.ic.big { width:56px; height:56px; color:#1ec8e8; }
.token-pill .ic, .hud-tokens .ic { color:#7fe3ff; }
.tbtn .ic { width:34px; height:34px; }
.setrow .ic { color:#12809f; }

/* generated art */
#screen-loading { background:linear-gradient(rgba(9,80,110,.25), rgba(9,80,110,.45)), url('../assets/splash.jpg') center/cover, linear-gradient(180deg,#8fe3f7,#1ec8e8); }
.load-card { background:rgba(255,255,255,.93); }
.grid .card .pic { display:block; height:52px; }
.grid .card .pic img { width:52px; height:52px; object-fit:cover; border-radius:12px; display:block; margin:0 auto; }
.grid .card .pic .emoji-fb { font-size:30px; line-height:52px; }
.level-card { position:relative; overflow:hidden; background-size:cover !important; background-position:center !important; text-shadow:0 2px 4px rgba(0,20,40,.65); }
.level-card .lv-name { font-family:"Titan One", sans-serif; font-weight:400; font-size:16px; }