:root{
  --ink:#3b2d27;
  --ink-2:#6b5546;
  --cream:#fff8ec;
  --panel:#fffdf7;
  --accent:#ff6a52;
  --yellow:#ffd166;
  --teal:#46c2b0;
  --violet:#9a5cff;
  --shadow:rgba(59,45,39,.18);
  --outline:rgba(122,88,64,.42);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 12% 8%, #fff3cf 0%, rgba(255,243,207,0) 60%),
    radial-gradient(800px 600px at 88% 18%, #ffe0ef 0%, rgba(255,224,239,0) 62%),
    radial-gradient(900px 700px at 50% 100%, #dff6ff 0%, rgba(223,246,255,0) 65%),
    linear-gradient(160deg,#fff9ee 0%,#fff1f6 45%,#eef9ff 100%);
  overflow-x:hidden;
}
.bg-blob{position:fixed;border-radius:50%;filter:blur(2px);opacity:.55;pointer-events:none;z-index:0;}
.bg-blob.b1{width:180px;height:180px;left:-60px;top:28%;background:radial-gradient(circle at 35% 35%,#ffd166,#ff9a6b);}
.bg-blob.b2{width:130px;height:130px;right:-40px;top:12%;background:radial-gradient(circle at 35% 35%,#9ae6d8,#46c2b0);}
.bg-blob.b3{width:100px;height:100px;right:8%;bottom:8%;background:radial-gradient(circle at 35% 35%,#e3b8ff,#9a5cff);}

/* ---------- home ---------- */
.home-screen{
  position:fixed;inset:0;z-index:30;display:flex;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  background:
    radial-gradient(700px 430px at 8% 4%,rgba(255,226,143,.72),transparent 65%),
    radial-gradient(650px 480px at 96% 22%,rgba(255,197,224,.62),transparent 68%),
    radial-gradient(600px 430px at 50% 100%,rgba(190,235,255,.68),transparent 68%),
    linear-gradient(160deg,#fff9ee,#fff1f6 48%,#eef9ff);
}
.home-screen[hidden]{display:none;}
.home-panel{width:min(100%,500px);margin:auto;text-align:center;position:relative;}
.home-logo{
  position:relative;width:94px;height:90px;margin:4px auto 18px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:31px;font-weight:900;letter-spacing:-.05em;
  background:linear-gradient(150deg,#ffb266,#ff6a52);border:4px solid var(--outline);border-radius:26px;
  box-shadow:0 8px 0 var(--shadow),inset 0 3px 0 rgba(255,255,255,.32);transform:rotate(-3deg);
}
.home-logo::before{
  content:'2 + 2';position:absolute;right:-39px;top:-14px;padding:5px 9px;border-radius:12px;
  background:linear-gradient(150deg,#9ae6d8,#46c2b0);border:2.5px solid var(--outline);
  color:#fff;font-size:12px;letter-spacing:0;box-shadow:0 3px 0 var(--shadow);transform:rotate(8deg);
}
.home-logo::after{content:'★';position:absolute;left:-25px;bottom:-7px;color:#ffd166;font-size:30px;text-shadow:0 3px 0 rgba(122,88,64,.24);transform:rotate(-12deg);}
.home-kicker{font-size:11px;font-weight:900;letter-spacing:.24em;color:#d97745;}
.home-panel h1{margin:4px 0 5px;font-size:34px;line-height:1.15;letter-spacing:.02em;}
.home-subtitle{margin:0;color:var(--ink-2);font-size:13px;font-weight:700;}
.mode-list{display:grid;gap:12px;margin:23px 0 16px;}
.mode-card{
  position:relative;width:100%;min-height:84px;display:grid;grid-template-columns:54px 1fr 24px;align-items:center;gap:13px;
  padding:15px 16px;text-align:left;font-family:inherit;color:var(--ink);cursor:pointer;
  border:3px solid var(--outline);border-radius:22px;box-shadow:0 5px 0 var(--shadow);
  transition:transform .12s,box-shadow .12s,filter .12s;
}
.mode-card:hover{filter:brightness(1.025);transform:translateY(-1px);}
.mode-card:active{transform:translateY(4px);box-shadow:0 1px 0 var(--shadow);}
.mode-endless{background:linear-gradient(145deg,#fff3cf,#ffd4b5);}
.mode-level{background:linear-gradient(145deg,#effdff,#c8eced);}
.mode-item{background:linear-gradient(145deg,#fffbe9,#ffe6a8);}
.mode-challenge{background:linear-gradient(145deg,#fbf2ff,#e5cdf5);}
.mode-card[aria-disabled="true"]{cursor:pointer;}
.mode-card[aria-disabled="true"] .mode-icon,.mode-card[aria-disabled="true"] .mode-copy{opacity:.76;}
.mode-badge{position:absolute;right:15px;top:-9px;padding:3px 9px;border:2px solid var(--outline);border-radius:999px;background:#f4e9df;color:#806e61;font-size:9px;font-weight:900;letter-spacing:.04em;}
.mode-endless .mode-badge{background:var(--accent);color:#fff;}
.mode-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:17px;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 2px rgba(255,255,255,.46);font-size:29px;line-height:1;}
.mode-copy{display:block;min-width:0;}
.mode-copy strong{display:block;margin-bottom:4px;font-size:18px;font-weight:900;}
.mode-copy small{display:block;color:var(--ink-2);font-size:12px;font-weight:700;white-space:nowrap;}
#levelCardSub{white-space:normal;line-height:1.45;}
.mode-arrow{font-size:30px;font-weight:900;color:rgba(59,45,39,.48);line-height:1;}
.home-notice{margin:0 0 14px;padding:9px 12px;border:2px solid rgba(216,143,54,.35);border-radius:14px;background:#fff5d8;color:#9a5c25;font-size:12px;font-weight:800;animation:dialogIn .22s ease;}
.home-notice[hidden]{display:none;}
.home-rules{
  display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:3px solid var(--outline);border-radius:16px;
  background:linear-gradient(160deg,#fffdf7,#ffe9c9);box-shadow:0 4px 0 var(--shadow);
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:900;text-decoration:none;cursor:pointer;
}
.home-rules:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow);}
.home-footer{margin:15px 0 0;color:rgba(107,85,70,.72);font-size:11px;font-weight:700;}

/* ---------- player guide ---------- */
.guide-overlay{z-index:70;background:rgba(59,45,39,.38);}
.guide-dialog{width:min(92vw,390px);max-height:calc(100dvh - 40px);overflow-y:auto;padding:20px 18px 18px;text-align:left;}
.guide-mascot{text-align:center;font-size:45px;line-height:1;margin-top:-4px;margin-bottom:8px;filter:drop-shadow(0 4px 0 rgba(59,45,39,.14));transform:rotate(-7deg);}
.guide-kicker{text-align:center;color:#d97745;font-size:10px;font-weight:900;letter-spacing:.18em;}
.guide-dialog h2{text-align:center;margin:4px 0 15px;font-size:23px;}
.guide-list{display:grid;gap:9px;}
.guide-item{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;padding:10px 12px;border:2px solid rgba(122,88,64,.20);border-radius:16px;}
.guide-item>span{font-size:26px;line-height:1;text-align:center;}
.guide-item p{margin:0;}
.guide-item b{display:block;margin-bottom:2px;font-size:14px;font-weight:900;}
.guide-item small{display:block;color:var(--ink-2);font-size:11px;font-weight:700;line-height:1.45;}
.guide-item.g1{background:#eefaff;}
.guide-item.g2{background:#fff4dc;}
.guide-item.g3{background:#fff0e8;}
.guide-item.g4{background:#f7efff;}
.guide-goal{margin-top:12px;padding:11px 12px;border-radius:16px;background:linear-gradient(145deg,#fff2b9,#ffd878);border:2px solid rgba(190,140,50,.32);text-align:center;font-size:14px;font-weight:900;color:#87551f;}
.guide-goal b{font-size:20px;color:#d94f30;}
.guide-goal small{display:block;margin-top:2px;font-size:11px;font-weight:800;}
.guide-dialog .dialog-actions{margin-top:14px;}

.app{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  max-width:720px;margin:0 auto;
  padding:calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}

/* ---------- buttons ---------- */
.btn{
  font-family:inherit;font-weight:900;color:#fff;cursor:pointer;
  background:linear-gradient(160deg,#ff8f6b,#ff5f52);
  border:3px solid var(--outline);border-radius:16px;
  padding:10px 20px;font-size:15px;
  box-shadow:0 5px 0 rgba(59,45,39,.28);
  transition:transform .12s,box-shadow .12s,filter .12s;
}
.btn:hover{filter:brightness(1.04);}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(59,45,39,.28);}
.btn.ghost{background:linear-gradient(160deg,#fff8ec,#ffe9c9);color:var(--ink);}
.game-actions{flex:none;min-height:44px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;}
.game-mode-label{
  justify-self:center;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  background:none;border:0;padding:0;
  color:var(--ink-2);font-size:12px;font-weight:900;letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.action-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;min-width:44px;height:44px;padding:0;border:2.5px solid var(--outline);border-radius:15px;
  font-family:inherit;color:var(--ink);cursor:pointer;
  box-shadow:0 3px 0 var(--shadow);transition:transform .1s,box-shadow .1s,filter .1s;
}
.action-home{justify-self:start;background:linear-gradient(160deg,#fffdf7,#ffe9c9);}
.action-restart{justify-self:end;background:linear-gradient(160deg,#fff0e5,#ffd1b8);color:#8d4633;}
.action-ico{font-size:24px;line-height:1;}
.action-btn:hover{filter:brightness(1.03);}
.action-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow);}

/* ---------- toolbar ---------- */
.bottom-bar{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;}
.toolbar{display:flex;justify-content:center;gap:14px;flex:none;padding:0 2px;}
.toolbar[hidden]{display:none;}
.tool{
  position:relative;flex:0 0 auto;width:66px;height:66px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:inherit;font-weight:900;font-size:11px;letter-spacing:.04em;color:var(--ink);cursor:pointer;
  border:3px solid var(--outline);border-radius:20px;padding:6px;
  box-shadow:0 4px 0 var(--shadow);
  transition:transform .1s,box-shadow .1s,background .16s,filter .16s,opacity .16s;
}
.tool:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow);}
.tool-clear{background:linear-gradient(160deg,#eefaff,#c3ecff);}
.tool-store{background:linear-gradient(160deg,#fff8e3,#ffdf9b);}
.tool:disabled{
  cursor:default;transform:none;box-shadow:0 4px 0 var(--shadow);
  background:linear-gradient(160deg,#f4efe7,#e7dfd3);
  color:rgba(59,45,39,.52);filter:grayscale(.35);
}
.tool:disabled .tool-ico{filter:grayscale(1);opacity:.72;}
.tool:disabled .tool-count{background:#c9bdb2;color:rgba(255,255,255,.85);}
.tool.active{box-shadow:0 0 0 4px rgba(143,220,255,.95),0 4px 0 var(--shadow);}
.tool.filled{background:linear-gradient(160deg,#fff2b8,#ffd36b);}
.tool.filled .tool-count{background:#b8781c;}
.tool-ico{font-size:25px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.10));}
.tool-name{white-space:nowrap;font-size:11px;}
.tool-count{
  position:absolute;top:-9px;right:-7px;
  display:flex;align-items:center;justify-content:center;
  min-width:26px;height:24px;padding:0 6px;border-radius:999px;
  font-size:12px;line-height:1;color:#fff;background:var(--accent);
  border:2.5px solid var(--outline);box-shadow:0 2px 0 rgba(0,0,0,.12);
}
.tool-count::before{content:'×';font-size:10px;margin-right:1px;opacity:.85;}
.tool-tip{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  z-index:7;white-space:nowrap;pointer-events:none;
  font-size:12px;font-weight:800;color:#fff;background:rgba(59,45,39,.86);
  border-radius:999px;padding:5px 12px;
}
.tool-tip[hidden]{display:none;}
.tool-tip.warn{background:#d94f30;animation:tipShake .3s ease;}
@keyframes tipShake{0%,100%{transform:translateX(-50%);}25%{transform:translateX(calc(-50% - 5px));}75%{transform:translateX(calc(-50% + 5px));}}
.board-shell.targeting{
  box-shadow:0 0 0 5px #8fdcff,0 0 34px rgba(90,190,255,.85),0 10px 0 rgba(59,45,39,.2);
}

/* ---------- hud ---------- */
.hud{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:9px;flex:none;}
.score-card,.combo-card{
  background:var(--panel);border:3px solid var(--outline);border-radius:18px;
  padding:10px 14px;box-shadow:0 5px 0 var(--shadow);overflow:hidden;
}
.score-card span{display:block;font-size:12px;font-weight:800;color:var(--ink-2);letter-spacing:.06em;}
.score-card b{
  display:block;font-size:clamp(22px,3.6vw,30px);line-height:1.15;font-weight:900;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.score-card.best b{color:#b8791f;}
.combo-card{
  background:linear-gradient(160deg,#fff6dd,#ffe3ac);
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.combo-card::after{
  content:"";position:absolute;right:-18px;top:-18px;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#ffd166);
  opacity:.7;
}
.combo-main{font-size:12px;font-weight:900;letter-spacing:.08em;color:#9a6a1f;}
.combo-main b{font-size:clamp(22px,3.6vw,30px);color:var(--ink);font-variant-numeric:tabular-nums;}
.combo-mult{font-size:14px;font-weight:900;color:#d94f30;}
.combo-card.hot{animation:comboPulse .45s ease;}
@keyframes comboPulse{0%,100%{transform:scale(1);}45%{transform:scale(1.06) rotate(-1deg);}}

/* ---------- board ---------- */
.stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;}
.board-shell{
  position:relative;flex:none;
  width:min(100%, calc(100vh - 202px));
  width:min(100%, calc(100dvh - 202px));
  aspect-ratio:1/1;
  background:linear-gradient(160deg,#ffd9a6,#ffc48a);
  border:4px solid var(--outline);border-radius:30px;
  box-shadow:0 8px 0 rgba(59,45,39,.18), inset 0 0 0 3px rgba(255,255,255,.22);
  touch-action:none;overflow:hidden;
  transition:box-shadow .25s;
}
.board-shell.crazy{
  box-shadow:0 0 0 5px var(--yellow),0 0 44px rgba(255,138,92,.85),0 10px 0 rgba(59,45,39,.2);
}
.board-shell.shake{animation:shake .24s ease;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px) rotate(-.4deg);}
  55%{transform:translateX(6px) rotate(.4deg);}
  78%{transform:translateX(-3px);}
}
.grid{
  position:absolute;inset:12px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;
}
.cell{
  border-radius:18px;background:#ffe9c9;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(196,142,92,.14);
}
.tiles{position:absolute;inset:0;}
.tile{
  position:absolute;display:flex;align-items:center;justify-content:center;
  border:3px solid rgba(255,255,255,.62);border-radius:18px;
  font-weight:900;line-height:1;color:#fff;
  box-shadow:0 5px 0 rgba(59,45,39,.2),inset 0 4px 0 rgba(255,255,255,.42),inset 0 -4px 0 rgba(59,45,39,.07);
  will-change:left,top,transform;z-index:2;
  transition:left .12s ease,top .12s ease,background .16s;
  overflow:hidden;
}
.tile .val{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:calc(var(--cell,80px)*.38);letter-spacing:-.02em;
  text-shadow:0 2px 0 rgba(0,0,0,.12);
}
.tile.d3 .val{font-size:calc(var(--cell,80px)*.30);}
.tile.d4 .val{font-size:calc(var(--cell,80px)*.235);}
.tile svg{width:84%;height:84%;display:block;}

/* tile colors */
.v2{background:linear-gradient(160deg,#fffdf6,#ffeecb);color:#7a5a2f;}
.v4{background:linear-gradient(160deg,#fff4d2,#ffdf9e);color:#7a5220;}
.v8{background:linear-gradient(160deg,#ffd07a,#ffb04d);color:#5a3310;}
.v16{background:linear-gradient(160deg,#ffb266,#ff8f3f);color:#fff;}
.v32{background:linear-gradient(160deg,#ff9a6b,#ff6a52);color:#fff;}
.v64{background:linear-gradient(160deg,#ff7a7a,#e8455f);color:#fff;}
.v128{background:linear-gradient(160deg,#c78bff,#9a5cff);color:#fff;}
.v256{background:linear-gradient(160deg,#a96bff,#7a3cff);color:#fff;}
.v512{background:linear-gradient(160deg,#6aa8ff,#3d6cff);color:#fff;}
.v1024{background:linear-gradient(160deg,#4d7dff,#2a3fd6);color:#fff;}
.v2048{background:linear-gradient(160deg,#8a5cff,#4a2fb0);color:#ffe8a3;}
.v4096{background:linear-gradient(160deg,#b34dff,#ff4f9a);color:#fff3c4;}
.v8192{background:linear-gradient(160deg,#ffd166,#ff7a3c);color:#fff;}

.tile.t-burst{background:linear-gradient(160deg,#ffd9a8,#ffb27a);}
.tile.t-rainbow{background:linear-gradient(160deg,#fffdf7,#eefaff);}
.tile.t-row{background:linear-gradient(160deg,#f2f8ff,#d5e8ff);}
.tile.t-col{background:linear-gradient(160deg,#f1fcf5,#d2f2e0);}
.tile.t-item{
  border-style:dashed;
}
.tile.t-item-clear{background:linear-gradient(160deg,#e9f8ff,#bfe9ff);border-color:rgba(70,140,190,.62);}
.tile.t-item-store{background:linear-gradient(160deg,#fff4da,#ffd98e);border-color:rgba(190,140,50,.65);}
.tile.t-item .item-icon{font-size:calc(var(--cell,80px)*.46);line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.12));}
.tile.t-item-store .item-icon{font-size:calc(var(--cell,80px)*.66);transform:translateY(-1px);}
.tile.spawn{animation:pop .2s cubic-bezier(.2,1.6,.4,1);}
.tile.merge{animation:mergePop .24s cubic-bezier(.2,1.6,.4,1);}
@keyframes pop{0%{transform:scale(.3);opacity:.2;}70%{transform:scale(1.08);}100%{transform:scale(1);opacity:1;}}
@keyframes mergePop{0%{transform:scale(.85);}55%{transform:scale(1.14) rotate(-2deg);}100%{transform:scale(1);}}

/* 消除动画：横扫 / 纵扫 / 爆炸 */
.tile.sweep-h{animation:sweepH .7s cubic-bezier(.35,.05,.35,1) forwards;}
.tile.sweep-v{animation:sweepV .7s cubic-bezier(.35,.05,.35,1) forwards;}
.tile.sweep-boom{animation:sweepBoom .62s cubic-bezier(.35,.05,.4,1.2) forwards;}
@keyframes sweepH{
  0%{transform:scale(1);opacity:1;filter:brightness(1);}
  18%{transform:scaleX(1.14) scaleY(.82);filter:brightness(1.7);box-shadow:0 0 26px 8px rgba(255,255,255,.85);}
  40%{transform:scaleX(1.05) scaleY(.78);filter:brightness(1.5);box-shadow:0 0 20px 6px rgba(255,255,255,.6);}
  72%{transform:scaleX(.72) scaleY(.72);opacity:.95;filter:brightness(1.35);}
  100%{transform:scaleX(0) scaleY(.5);opacity:0;filter:brightness(1);}
}
@keyframes sweepV{
  0%{transform:scale(1);opacity:1;filter:brightness(1);}
  18%{transform:scaleX(.82) scaleY(1.14);filter:brightness(1.7);box-shadow:0 0 26px 8px rgba(255,255,255,.85);}
  40%{transform:scaleX(.78) scaleY(1.05);filter:brightness(1.5);box-shadow:0 0 20px 6px rgba(255,255,255,.6);}
  72%{transform:scaleX(.72) scaleY(.72);opacity:.95;filter:brightness(1.35);}
  100%{transform:scaleX(.5) scaleY(0);opacity:0;filter:brightness(1);}
}
@keyframes sweepBoom{
  0%{transform:scale(1);opacity:1;}
  22%{transform:scale(1.38);opacity:1;}
  50%{transform:scale(1.16) rotate(12deg);opacity:1;}
  78%{transform:scale(.7) rotate(28deg);opacity:.9;}
  100%{transform:scale(0) rotate(45deg);opacity:0;}
}
/* 消除动画期间提升层级避免被新 tile 挡住 */
.tile.sweep-h,.tile.sweep-v,.tile.sweep-boom{z-index:6;}

/* lucky / curse highlight */
.tile.boost-up{
  box-shadow:0 0 0 4px #ffd166,0 0 28px 8px rgba(255,196,60,.9),0 5px 0 rgba(59,45,39,.22);
  z-index:3;animation:boostPulse .62s ease-in-out infinite alternate;
}
.tile.boost-down{
  box-shadow:0 0 0 4px #b07dff,0 0 28px 8px rgba(154,92,255,.85),0 5px 0 rgba(59,45,39,.22);
  z-index:3;animation:boostPulse .62s ease-in-out infinite alternate;
}
@keyframes boostPulse{from{transform:scale(1);}to{transform:scale(1.07);}}
.tile.frozen{
  box-shadow:0 0 0 4px #8ad7ff,inset 0 0 0 2px rgba(255,255,255,.9),0 4px 0 rgba(59,45,39,.22);
  background:linear-gradient(160deg,#cdeaff,#8fc7f5) !important;
  color:#2c5c8a !important;
  filter:saturate(.7) brightness(.92);
  pointer-events:none;
  animation:frozenPulse 1.6s ease-in-out infinite alternate;
}
@keyframes frozenPulse{from{box-shadow:0 0 0 4px #8ad7ff,inset 0 0 0 2px rgba(255,255,255,.9),0 4px 0 rgba(59,45,39,.22);}to{box-shadow:0 0 0 5px #b7e2ff,inset 0 0 0 2px rgba(255,255,255,1),0 4px 0 rgba(59,45,39,.22);}}
.tile.rain-mark{
  box-shadow:0 0 0 4px #7fd6ff,0 0 28px 8px rgba(90,190,255,.9),0 5px 0 rgba(59,45,39,.22);
  z-index:3;animation:rainPulse .8s ease-in-out infinite alternate;
}
.tile.rain-drop{
  box-shadow:0 0 0 4px #7fd6ff,0 0 28px 8px rgba(90,190,255,.9),0 5px 0 rgba(59,45,39,.22);
  z-index:3;
  animation:rainDrop .5s cubic-bezier(.2,1.25,.4,1) both, rainPulse .8s .5s ease-in-out infinite alternate;
}
@keyframes rainPulse{from{transform:scale(1);}to{transform:scale(1.06);}}
@keyframes rainDrop{
  0%{opacity:0;transform:translateY(-115%) scale(.85);}
  65%{opacity:1;transform:translateY(4%) scale(1.04);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
.tile-badge{
  position:absolute;right:2%;top:2%;font-size:calc(var(--cell,80px)*.34);line-height:1;
  pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));
  animation:badgePop .5s cubic-bezier(.2,1.7,.4,1);
}
@keyframes badgePop{
  0%{transform:scale(0) rotate(-45deg);opacity:0;}
  70%{transform:scale(1.35) rotate(10deg);opacity:1;}
  100%{transform:scale(1) rotate(0);opacity:1;}
}

.float-layer{position:absolute;inset:0;pointer-events:none;z-index:6;}
.float-score{
  position:absolute;font-size:18px;font-weight:900;color:#fff;
  text-shadow:0 2px 0 var(--ink),0 0 8px rgba(255,255,255,.8);
  transform:translate(-50%,-50%);
  animation:floatUp .75s ease-out forwards;
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(6px) scale(.8);}
  20%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) translateY(-44px) scale(1.05);}
}
.crazy-summary{
  position:absolute;left:50%;top:45%;z-index:9;white-space:nowrap;
  padding:10px 18px;border:3px solid rgba(151,82,25,.48);border-radius:999px;
  background:linear-gradient(160deg,#fff4b8,#ffb65c);color:#8f321f;
  font-size:clamp(16px,4.5vw,23px);font-weight:900;
  box-shadow:0 7px 0 rgba(89,45,25,.22),0 0 24px rgba(255,209,102,.72);
  animation:crazySummary 1.85s ease-out forwards;
}
@keyframes crazySummary{
  0%{opacity:0;transform:translate(-50%,-20%) scale(.72);}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1.10);}
  30%{transform:translate(-50%,-58%) scale(1);}
  76%{opacity:1;transform:translate(-50%,-88%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-145%) scale(.96);}
}
.coach-open .crazy-summary{animation-play-state:paused;}

/* event banner */
.event-banner{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:12px;width:min(86%,340px);
  background:#fffdf7;border:3px solid var(--outline);border-radius:20px;
  padding:12px 16px;z-index:8;box-shadow:0 10px 0 rgba(59,45,39,.22);
  animation:bannerIn .28s cubic-bezier(.2,1.5,.4,1);
}
.event-banner[hidden]{display:none;}
.event-banner.neg{background:#fff0ec;}
.event-banner.pos{background:#eefbf6;}
.event-banner.neu{background:#fff8e6;}
.event-icon{font-size:30px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.1));}
.event-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.event-text b{font-size:16px;}
.event-text span{font-size:12px;color:var(--ink-2);line-height:1.35;}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.82);}100%{opacity:1;transform:translate(-50%,-50%) scale(1);}}

.crazy-flash{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9),rgba(255,209,102,.35) 45%,rgba(255,138,92,0) 72%);}
.crazy-flash.on{animation:flashOnce .5s ease;}
@keyframes flashOnce{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;}}

/* ---------- crazy bottle ---------- */
.crazy-wrap{
  flex:none;display:flex;align-items:center;justify-content:center;gap:11px;
  background:var(--panel);border:3px solid var(--outline);border-radius:16px;
  padding:4px 13px 4px 10px;box-shadow:0 5px 0 var(--shadow);
}
.crazy-wrap[hidden]{display:none;}
.bottle{position:relative;width:34px;height:44px;flex:none;filter:drop-shadow(0 2px 0 rgba(59,45,39,.12));}
.bottle-neck{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:12px;height:13px;background:#eaf3fb;
  border:2.5px solid var(--outline);border-bottom:none;border-radius:4px 4px 0 0;
}
.bottle-body{
  position:absolute;left:2px;right:2px;top:11px;bottom:0;overflow:hidden;
  background:#f4f9ff;border:2.5px solid var(--outline);border-radius:9px 9px 12px 12px;
}
.bottle-liquid{
  position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(180deg,#ffc44d,#ff7a3d 55%,#ff4f3d);
  transition:height .28s ease;
}
.bottle-liquid::after{
  content:"";position:absolute;left:-10%;right:-10%;top:-4px;height:8px;border-radius:50%;
  background:#ffd36b;opacity:.9;
}
.bottle-gloss{
  position:absolute;left:3px;top:4px;width:5px;height:55%;border-radius:99px;
  background:rgba(255,255,255,.75);
}
.bottle-flame{
  position:absolute;left:50%;top:-13px;transform:translateX(-50%) scale(.6);
  font-size:15px;line-height:1;opacity:0;transition:opacity .2s,transform .2s;
  filter:drop-shadow(0 0 5px rgba(255,122,61,.9));
}
.bottle.lit .bottle-flame{opacity:1;transform:translateX(-50%) scale(1);animation:flicker .42s infinite alternate;}
.bottle.full .bottle-body{border-color:#c23a1f;box-shadow:0 0 0 3px rgba(255,122,61,.28);}
.bottle.full .bottle-liquid{background:linear-gradient(180deg,#ffe08a,#ff8a3d 45%,#ff3d6e);animation:liquidGlow .7s infinite alternate;}
@keyframes flicker{from{transform:translateX(-50%) scale(.92) rotate(-4deg);}to{transform:translateX(-50%) scale(1.12) rotate(4deg);}}
@keyframes liquidGlow{from{filter:brightness(1);}to{filter:brightness(1.3);}}
.crazy-info{display:flex;flex-direction:column;line-height:1.15;min-width:96px;}
.crazy-name{font-size:11px;font-weight:800;color:var(--ink-2);letter-spacing:.08em;}
.crazy-info b{font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.crazy-hint{font-size:10px;color:#a08974;font-weight:700;margin-top:1px;}
.bottle.full + .crazy-info b{color:#e0472a;}

/* ---------- overlay ---------- */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(59,45,39,.42);backdrop-filter:blur(4px);}
.overlay[hidden]{display:none;}
.dialog{
  width:min(92vw,360px);background:var(--panel);border:4px solid var(--outline);border-radius:26px;
  padding:24px 22px 20px;text-align:center;box-shadow:0 12px 0 rgba(59,45,39,.28);
  animation:dialogIn .28s cubic-bezier(.2,1.5,.4,1);
}
@keyframes dialogIn{0%{opacity:0;transform:scale(.9);}100%{opacity:1;transform:scale(1);}}
.dialog-emoji{font-size:54px;line-height:1;margin-bottom:6px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.08));}
.dialog h2{margin:0 0 8px;font-size:24px;}
.dialog p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;}
.dialog-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.dialog-actions .btn{width:100%;}
.coach-overlay{z-index:60;background:rgba(59,45,39,.30);backdrop-filter:blur(2px);}
.coach-dialog{border-color:rgba(216,143,54,.58);box-shadow:0 10px 0 rgba(59,45,39,.24),0 0 0 5px rgba(255,209,102,.24);}
.coach-kicker{display:inline-block;margin-bottom:12px;padding:4px 10px;border-radius:999px;background:#fff1c9;color:#9a6a1f;font-size:11px;font-weight:900;letter-spacing:.04em;}
.coach-dialog .dialog-emoji{font-size:48px;margin-bottom:8px;}
.coach-dialog h2{font-size:22px;}

/* ---------- responsive ---------- */
@media (max-width:520px){
  .app{padding:calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));gap:8px;}
  .hud{gap:7px;}
  .score-card,.combo-card{padding:7px 10px;border-radius:15px;border-width:2.5px;}
  .score-card span{font-size:10px;}
  .score-card b{font-size:24px;}
  .combo-main{font-size:10px;}
  .combo-main b{font-size:24px;}
  .combo-mult{font-size:13px;}
  .game-actions{min-height:42px;grid-template-columns:42px 1fr 42px;}
  .action-btn{width:42px;min-width:42px;height:42px;border-radius:14px;}
  .action-ico{font-size:23px;}
  .game-mode-label{font-size:11px;}
  .tool{width:60px;height:60px;font-size:10px;border-width:2.5px;border-radius:18px;padding:5px;gap:2px;}
  .tool-ico{font-size:22px;}
  .tool-name{font-size:10px;}
  .tool-count{min-width:22px;height:20px;font-size:11px;top:-8px;right:-6px;border-width:2px;}
  .board-shell{border-radius:24px;width:min(100%, calc(100vh - 186px));width:min(100%, calc(100dvh - 186px));}
  .grid{inset:10px;gap:8px;}
  .cell{border-radius:14px;}
  .tile{border-radius:14px;border-width:2.5px;}
  .crazy-wrap{padding:4px 10px 4px 8px;border-radius:14px;border-width:2.5px;gap:8px;}
  .bottle{width:30px;height:39px;}
  .crazy-info{min-width:78px;}
  .crazy-info b{font-size:17px;}
}
@media (max-height:560px){
  .game-actions{min-height:38px;grid-template-columns:38px 1fr 38px;}
  .action-btn{width:38px;min-width:38px;height:38px;border-radius:12px;box-shadow:0 2px 0 var(--shadow);}
  .action-ico{font-size:20px;}
  .game-mode-label{font-size:11px;}
  .score-card span,.combo-main{font-size:9px;}
  .score-card b,.combo-main b{font-size:16px;}
  .combo-mult{font-size:11px;}
  .crazy-hint{display:none;}
  .crazy-wrap{padding:4px 10px 4px 8px;}
  .bottle{width:28px;height:36px;}
}

/* ---------- level select ---------- */
.level-screen{z-index:31;}
.level-head{display:flex;align-items:center;gap:12px;text-align:left;margin-bottom:16px;}
.level-back{
  width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--outline);border-radius:14px;background:linear-gradient(160deg,#fffdf7,#ffe9c9);
  box-shadow:0 4px 0 var(--shadow);font-family:inherit;font-size:26px;font-weight:900;line-height:1;
  color:var(--ink);cursor:pointer;padding-bottom:4px;
}
.level-back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow);}
.level-head-copy h1{font-size:26px;margin:2px 0 3px;}
.level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:14px;}
.level-card{
  position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 12px 11px;text-align:left;
  font-family:inherit;color:var(--ink);border:3px solid var(--outline);border-radius:18px;
  background:linear-gradient(150deg,#fffdf7,#ffeecd);box-shadow:0 4px 0 var(--shadow);cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.level-card:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow);}
.level-card .lv-no{font-size:11px;font-weight:900;letter-spacing:.08em;color:#d97745;}
.level-card .lv-name{font-size:15px;font-weight:900;}
.level-card .lv-stars{font-size:12px;letter-spacing:.12em;color:#f0a92c;}
.level-card.done{background:linear-gradient(150deg,#eafbf0,#d3f3e0);}
.level-card.locked{filter:grayscale(.6);opacity:.7;cursor:not-allowed;background:linear-gradient(150deg,#f4f0e9,#e9e3d9);}
.lv-lock{position:absolute;right:10px;top:10px;font-size:14px;}

.level-strip{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 13px;border:3px solid var(--outline);border-radius:14px;
  background:linear-gradient(150deg,#eafbe6,#d6f2dd);box-shadow:0 3px 0 var(--shadow);
  font-size:12px;font-weight:900;
}
.level-strip[hidden]{display:none;}
.level-strip .lv-goal{color:#3d7a4a;}
.level-strip .lv-turns{color:#5a4a3a;font-variant-numeric:tabular-nums;}
.level-strip .lv-turns.warn{color:#e05a3c;}
#dlgDesc{white-space:pre-line;}

/* ---------- account & leaderboard ---------- */
.home-tools{display:flex;gap:10px;justify-content:center;margin:-4px 0 14px;}
.home-tool{flex:1;max-width:170px;padding:9px 12px;border:3px solid var(--outline);border-radius:14px;background:linear-gradient(160deg,#fffdf7,#eaf4ff);box-shadow:0 3px 0 var(--shadow);font-family:inherit;font-size:13px;font-weight:900;color:var(--ink);cursor:pointer;}
.home-tool:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow);}
.account-dialog,.board-dialog{width:min(94vw,400px);max-height:calc(100dvh - 40px);overflow-y:auto;text-align:left;}
.account-dialog h2,.board-dialog h2{text-align:center;}
.acc-status{margin:0 0 10px;text-align:center;font-size:12px;font-weight:800;color:var(--ink-2);}
.acc-row{display:flex;gap:8px;margin-bottom:6px;}
.acc-row input{flex:1;min-width:0;padding:10px 12px;border:2.5px solid var(--outline);border-radius:12px;background:#fff;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);}
.acc-row .btn{flex:none;padding:10px 14px;}
.acc-tip{margin:4px 0 10px;font-size:11px;font-weight:700;color:var(--ink-2);line-height:1.5;}
.acc-tip.err{color:#d94f30;}
.acc-card{padding:12px 13px;border:2.5px solid rgba(122,88,64,.22);border-radius:14px;background:linear-gradient(145deg,#fffbee,#fff4d8);}
.acc-card .acc-row{margin-bottom:4px;}
.acc-sub{margin:0 0 8px;font-size:10.5px;font-weight:700;color:#9a6b2e;letter-spacing:.02em;}
.acc-divider{height:1px;margin:8px 0;background:rgba(122,88,64,.16);}
.acc-code-body{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#fff;border-radius:10px;border:2px dashed rgba(122,88,64,.35);margin-bottom:4px;}
.acc-code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.04em;color:#b36a20;word-break:break-all;text-align:center;}
.acc-copy,.acc-reset{flex:none;font-size:16px;background:none;border:none;cursor:pointer;padding:3px 6px;border-radius:6px;line-height:1;}
.acc-reset{font-size:11px;font-weight:700;color:#9a6b2e;}
.acc-copy:active,.acc-reset:active{background:rgba(0,0,0,.08);}
.acc-opt{display:flex;align-items:center;gap:7px;margin:2px 0 0;font-size:12px;font-weight:700;color:var(--ink-2);}
.btn.danger{color:#c53f2a;}
.board-tabs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:12px;}
.board-tab{padding:7px 11px;border:2.5px solid var(--outline);border-radius:999px;background:#fffdf7;font-family:inherit;font-size:12px;font-weight:900;color:var(--ink-2);cursor:pointer;}
.board-tab.on{background:linear-gradient(150deg,#ffd166,#ffb266);color:#6b3f12;border-color:rgba(160,110,40,.55);}
.board-level-row{margin-bottom:10px;text-align:center;}
.board-level-row select{padding:8px 12px;border:2.5px solid var(--outline);border-radius:12px;background:#fff;font-family:inherit;font-size:13px;font-weight:800;color:var(--ink);}
.board-list{display:flex;flex-direction:column;gap:7px;min-height:120px;}
.board-empty{padding:26px 0;text-align:center;font-size:12px;font-weight:800;color:var(--ink-2);}
.board-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:2px solid rgba(122,88,64,.20);border-radius:13px;background:#fffdf7;font-size:13px;font-weight:800;}
.board-row.top1{background:linear-gradient(150deg,#fff3c4,#ffe3a1);}
.board-row.me{border-color:#46c2b0;background:#eafaf3;}
.board-row .rk{flex:none;width:30px;text-align:center;font-weight:900;color:#b06a1f;}
.board-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.board-row .sc{flex:none;font-variant-numeric:tabular-nums;color:#8a5a20;font-weight:900;}
.board-row .sub{flex:none;font-size:10px;color:var(--ink-2);}