*{box-sizing:border-box}
html,body{margin:0;background:#f6f4ef;color:#111;font-family:Nunito,Arial,sans-serif}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.page{width:min(900px,calc(100% - 24px));margin:auto;padding:24px 0 64px}
.site-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1px solid #ccc;padding-bottom:18px}
.site-head small,.hud small,.boss-copy small{font-weight:800;letter-spacing:.14em}
h1,h2{font:800 clamp(46px,8vw,82px)/.9 "Baloo 2",sans-serif;letter-spacing:-.045em;margin:5px 0}
.site-head p{margin:0;color:#555}.pill{border:2px solid #111;border-radius:999px;background:#111;color:#fff;padding:10px 18px;font-weight:800}.pill.big{padding:12px 30px;font-size:17px}
.shell{margin-top:26px;border:2px solid #111;border-radius:24px;background:#fff;padding:10px;box-shadow:0 9px 0 #111}
.hud{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:4px 8px 10px}.hud div{display:flex;flex-direction:column}.hud div:not(:first-child):not(:last-child){align-items:center;text-align:center}.hud div:last-child{align-items:flex-end;text-align:right}.hud b{font:800 29px "Baloo 2"}.hud-bank span{display:flex;align-items:center;justify-content:flex-end;gap:5px}.hud-bank img{width:29px;height:29px;object-fit:contain;image-rendering:pixelated}.hud-bank.reward{animation:sushiBankReward .5s ease}.hud-bank.reward b{color:#d1352e}@keyframes sushiBankReward{50%{transform:scale(1.14)}}
.boss-panel{display:none;grid-template-columns:1fr 124px;align-items:center;gap:14px;margin:0 0 10px;padding:10px 12px;border:2px solid #111;border-radius:16px;background:#fff3f0;overflow:hidden}.boss-panel.show{display:grid}.boss-copy strong{display:block;font-size:20px;margin:2px 0 7px}.boss-hp-track{height:18px;border:2px solid #111;border-radius:999px;background:#fff;overflow:hidden}.boss-hp-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff554f,#ffc74d);transition:width .18s ease}.boss-copy span{display:block;font-size:11px;font-weight:800;margin-top:4px}.boss-panel img{width:100%;height:82px;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}.boss-hit{animation:bossHit .18s linear}@keyframes bossHit{0%,100%{transform:translateX(0)}35%{transform:translateX(-6px)}70%{transform:translateX(6px)}}.boss-down{animation:bossDown .68s ease forwards}@keyframes bossDown{0%{opacity:1}40%{transform:scale(1.12) rotate(-4deg)}100%{opacity:0;transform:translateY(-28px) scale(.72)}}
.area{position:relative;border:2px solid #111;border-radius:17px;overflow:hidden;touch-action:none;background:#f3cf67}.board{aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:4px;padding:7px;cursor:grab;touch-action:none;background:linear-gradient(135deg,#f5da82,#efc65d)}.board.dragging{cursor:grabbing}
.tile{position:relative;border:1px solid rgba(90,70,20,.22);border-radius:11px;background:#fff9e8;display:grid;place-items:center;padding:0;overflow:hidden;touch-action:none;will-change:transform,opacity;transition:transform .14s cubic-bezier(.2,.8,.2,1),opacity .14s ease}.tile img{width:90%;height:90%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.tile.drag-source{transform:scale(.93);outline:4px solid #111;z-index:8}.tile.pop{animation:pop .21s ease forwards}.tile.bad{animation:bad .18s linear}.tile.drop{animation:drop .19s ease}.tile.explode{animation:boom .24s ease forwards}@keyframes pop{48%{transform:scale(1.17)}100%{transform:scale(.08);opacity:0}}@keyframes bad{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}@keyframes drop{0%{transform:translateY(-32%);opacity:.25}100%{transform:none;opacity:1}}@keyframes boom{0%{transform:scale(1)}42%{transform:scale(1.25);filter:brightness(1.7)}100%{transform:scale(.05);opacity:0}}
.tile.bomb{background:#fff6ca;border-color:#a98300;box-shadow:inset 0 0 0 2px rgba(255,204,0,.45)}.tile.bomb img{width:98%;height:98%;object-fit:contain;filter:drop-shadow(0 0 7px rgba(255,184,0,.8))}
.message{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:40;font:800 clamp(30px,7vw,62px) "Baloo 2";text-shadow:0 4px #fff;opacity:0;pointer-events:none;white-space:nowrap}.message.show{animation:msg .62s ease}@keyframes msg{0%{opacity:0;transform:translate(-50%,-60%) scale(.7)}18%,72%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-58%) scale(.95)}}
.overlay{position:absolute;inset:0;z-index:50;background:rgba(255,255,255,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px}.overlay.hide{visibility:hidden;opacity:0;pointer-events:none}.cover{width:min(46%,310px);aspect-ratio:1;border:2px solid #111;border-radius:16px;object-fit:cover;box-shadow:0 7px 0 #111;margin-bottom:10px}.overlay h2{font-size:clamp(38px,7vw,70px)}.overlay p{max-width:540px;margin:4px 0 14px;color:#555}
.boss-warning{position:absolute;inset:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(17,17,17,.9);color:#fff;opacity:0;visibility:hidden;pointer-events:none}.boss-warning.show{animation:warn 1.35s ease forwards}.boss-warning small{font-weight:900;letter-spacing:.18em}.boss-warning strong{font:800 clamp(30px,7vw,62px)/.95 "Baloo 2";margin-top:8px}@keyframes warn{0%{opacity:0;visibility:visible;transform:scale(1.07)}15%,78%{opacity:1;visibility:visible;transform:scale(1)}100%{opacity:0;visibility:hidden;transform:scale(.98)}}
.area.flash::after{content:"";position:absolute;inset:0;z-index:34;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.98) 0 18%,rgba(255,229,77,.78) 36%,rgba(255,190,0,0) 74%);animation:flash .23s ease-out forwards}@keyframes flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}.area.shake{animation:boardShake .14s linear}@keyframes boardShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.explosion-art{position:absolute;z-index:36;width:22%;aspect-ratio:1;object-fit:contain;pointer-events:none;transform:translate(-50%,-50%) scale(.35);animation:explosionArt .38s ease-out forwards}@keyframes explosionArt{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff3a0;box-shadow:0 0 10px #ffd21f,0 0 18px #fff;z-index:37;pointer-events:none;animation:sparkFly .4s ease-out forwards}@keyframes sparkFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
.help{text-align:center;color:#666;font-size:13px;line-height:1.45;margin:20px auto 0;max-width:760px}
#soundToggle{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:999;width:44px;height:44px;border:2px solid #111;border-radius:50%;background:#fff;color:#111;box-shadow:0 4px 0 #111;font-size:19px;font-weight:900}
@media(max-width:600px){.page{padding-top:14px}.site-head{align-items:center}.site-head h1{font-size:42px}.site-head p{font-size:13px}.pill{padding:8px 13px}.shell{padding:6px;box-shadow:0 6px 0 #111}.hud{font-size:9px;padding-left:2px;padding-right:2px;gap:2px}.hud small{font-size:7px;letter-spacing:.07em;white-space:nowrap}.hud b{font-size:19px}.hud-bank span{gap:2px}.hud-bank img{width:21px;height:21px}.board{gap:2px;padding:4px}.tile{border-radius:7px}.boss-panel{grid-template-columns:1fr 76px;padding:7px 8px;gap:8px}.boss-copy strong{font-size:14px}.boss-panel img{height:58px}.cover{width:min(58%,250px)}.overlay p{font-size:13px}.help{font-size:11px}}

/* game5 v1.1 — no-move shuffle */
.board.shuffle-out{
  animation:mpiShuffleOut .26s ease forwards;
  pointer-events:none;
}
.board.shuffle-in{
  animation:mpiShuffleIn .36s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes mpiShuffleOut{
  0%{opacity:1;transform:scale(1) rotate(0)}
  55%{opacity:.55;transform:scale(.94) rotate(-1deg)}
  100%{opacity:0;transform:scale(.88) rotate(1deg)}
}
@keyframes mpiShuffleIn{
  0%{opacity:0;transform:scale(.88) rotate(-1deg)}
  65%{opacity:1;transform:scale(1.025) rotate(.4deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

.tile.stone{cursor:not-allowed}.tile.stone img{transform:scale(.94);filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}.stone-break{animation:stoneBreak .3s ease forwards}@keyframes stoneBreak{to{opacity:0;transform:scale(.25) rotate(12deg)}}.boss-meta{display:flex;gap:14px;margin-top:5px;font-size:10px;font-weight:900}.boss-meta b{font-size:13px}

/* v1.2.1 boss attack performance */
.tile.stone img{
  width:88%;
  height:88%;
  object-fit:contain;
  contain:paint;
}
.tile.stone-hit{
  will-change:transform,opacity;
}

/* v1.2.3 — robust drag input after boss stone attack */
html,body,.area,.board,.tile{
  overscroll-behavior:none;
}
.board,.tile{
  touch-action:none !important;
}
.tile{
  -webkit-tap-highlight-color:transparent;
}

/* v1.2.4 — event-delegated touch/mouse drag */
.board{
  touch-action:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}
.tile,.tile img{
  pointer-events:auto;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}
.tile img{
  pointer-events:none;
}


/* ===== Game 5 Online Leaderboard v1 ===== */
.leaderboard-panel{
  margin-top:18px;border:2px solid #111;border-radius:20px;background:#fff;
  padding:16px;box-shadow:0 6px 0 #111
}
.leaderboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.leaderboard-head small{font-weight:900;letter-spacing:.14em;font-size:10px}
.leaderboard-head h2{font:800 clamp(28px,5vw,42px)/1 "Baloo 2";margin:2px 0 0}
.leaderboard-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lb-tab{
  border:2px solid #111;border-radius:999px;background:#fff;padding:8px 12px;
  font:800 12px "Nunito";cursor:pointer
}
.lb-tab.active{background:#111;color:#fff}
.leaderboard-status{font-size:13px;color:#666;padding:8px 2px}
.leaderboard-list{list-style:none;margin:0;padding:0;border-top:1.5px solid #111}
.leaderboard-list li{
  display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;
  border-bottom:1px solid #ddd;padding:10px 4px;font-weight:800
}
.leaderboard-list .rank{font-family:"Baloo 2";font-size:20px;text-align:center}
.leaderboard-list .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaderboard-list .score{font-family:"Baloo 2";font-size:21px}
.leaderboard-month{margin:10px 2px 0;color:#777;font-size:12px;text-align:right}

.score-submit-modal{
  position:fixed;inset:0;z-index:999;background:rgba(255,255,255,.93);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease
}
.score-submit-modal.show{opacity:1;visibility:visible;pointer-events:auto}
.score-submit-card{
  width:min(460px,100%);border:3px solid #111;border-radius:24px;background:#fff;
  box-shadow:0 9px 0 #111;padding:22px;text-align:center
}
.score-submit-card>small{font-weight:900;letter-spacing:.16em}
.score-submit-card h2{font:800 clamp(34px,8vw,58px)/.95 "Baloo 2";margin:8px 0}
.submit-score-number{font:800 clamp(44px,10vw,76px)/1 "Baloo 2";margin:8px 0 4px}
.score-submit-card p{color:#555;margin:6px 0 14px}
.score-name-wrap label{display:block;text-align:left;font-size:12px;font-weight:900;margin:0 0 5px}
.score-name-wrap input{
  width:100%;border:2px solid #111;border-radius:14px;padding:12px 14px;
  font:800 18px "Nunito";text-transform:uppercase;outline-offset:2px
}
.score-submit-card .pill{width:100%;margin-top:10px}
.score-skip{background:#fff!important;color:#111!important}
.submit-result{min-height:20px;margin-top:10px;font-size:13px;font-weight:800}
@media(max-width:640px){
  .leaderboard-head{align-items:flex-start;flex-direction:column}
  .leaderboard-tabs{justify-content:flex-start}
}

.nickname-privacy{font-size:10px;font-weight:800;letter-spacing:.06em;color:#777;text-align:left;margin:4px 0 8px;text-transform:uppercase}

.autofill-shield-note{font-size:10px;font-weight:800;letter-spacing:.06em;color:#777;text-align:left;margin:4px 0 8px;text-transform:uppercase}


/* Game 5 v1.5 — END GAME confirmation */
.end-game-modal{
  position:fixed;inset:0;z-index:1000;background:rgba(255,255,255,.93);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease
}
.end-game-modal.show{opacity:1;visibility:visible;pointer-events:auto}
.end-game-card{
  width:min(420px,100%);border:3px solid #111;border-radius:24px;background:#fff;
  box-shadow:0 9px 0 #111;padding:24px;text-align:center
}
.end-game-card>small{font-weight:900;letter-spacing:.16em}
.end-game-card h2{font:800 clamp(34px,8vw,54px)/.95 "Baloo 2";margin:9px 0}
.end-game-card p{color:#555;margin:4px 0 18px}
.end-game-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.end-game-actions .pill{width:100%;margin:0;font-size:16px}