:root {
  --ink:#4f382f;
  --muted:#7b6258;
  --cream:#fff9ec;
  --card:rgba(255,255,255,.88);
  --line:rgba(89,61,46,.16);
  --accent:#ef8f70;
  --accent2:#76bfa5;
  --gold:#f1bc42;
  --shadow:0 14px 32px rgba(82,58,45,.16);
  --board:#f6dca7;
  --board2:#f0c985;
  --sky1:#fff0b8;
  --sky2:#d8f4dd;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Nunito,Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink)}
body{background:linear-gradient(160deg,var(--sky1),var(--sky2));padding:18px;transition:background .35s ease}
button{font:inherit}
button:focus-visible,.cell:focus-visible{outline:4px solid rgba(82,91,209,.45);outline-offset:2px}
.game-shell{width:min(1180px,100%);margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.brand-block h1{font-size:clamp(1.7rem,4vw,2.65rem);margin:0;letter-spacing:-.04em;line-height:1}
.eyebrow{margin:0 0 5px;text-transform:uppercase;font-weight:900;font-size:.75rem;letter-spacing:.12em;color:#9b674f}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.icon-btn,.action-btn,.secondary-btn,.primary-btn,.close-btn,.text-btn{border:0;cursor:pointer;font-weight:900}
.icon-btn,.action-btn{background:rgba(255,255,255,.8);color:var(--ink);border:1px solid var(--line);border-radius:14px;min-height:44px;padding:9px 13px;box-shadow:0 5px 12px rgba(87,62,48,.08)}
.icon-btn:hover,.action-btn:hover{transform:translateY(-1px)}
.status-strip{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:10px 16px;display:flex;align-items:center;gap:18px;margin-bottom:14px;box-shadow:0 8px 18px rgba(82,58,45,.08);backdrop-filter:blur(8px)}
.stat{display:flex;gap:7px;align-items:baseline}.stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}.stat strong{font-size:1.25rem}.score-stat{min-width:110px}.stars{margin-left:auto;display:flex;gap:3px}.star{font-size:1.4rem;color:#d6cabb;text-shadow:0 1px white}.star.on{color:var(--gold)}
.play-layout{display:grid;grid-template-columns:minmax(180px,230px) minmax(0,650px) minmax(180px,230px);gap:16px;align-items:start;justify-content:center}
.side-panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.side-panel h2{font-size:1.05rem;margin:0 0 12px}
.goal-list{display:grid;gap:9px}.goal-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.6);border-radius:14px;padding:8px;border:1px solid rgba(86,58,43,.08)}.goal-item.done{opacity:.52;text-decoration:line-through}.goal-item img{width:42px;height:42px;object-fit:contain}.goal-icon-text{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#e7d4a7;font-weight:1000}.goal-copy{min-width:0}.goal-copy strong{display:block;font-size:.9rem}.goal-copy span{font-size:.75rem;color:var(--muted)}
.meter-wrap{margin-top:15px}.meter-label{font-size:.72rem;font-weight:800;display:flex;justify-content:space-between;color:var(--muted);margin-bottom:5px}.meter{height:11px;background:#eee2d3;border-radius:999px;overflow:hidden}.meter-fill{height:100%;width:0;background:linear-gradient(90deg,#ef9c72,#f1bd45);border-radius:inherit;transition:width .35s ease}.tip,.small-note{font-size:.78rem;line-height:1.4;color:var(--muted);margin:14px 0 0}
.board-wrap{position:relative;min-width:0}.board{width:min(650px,100%);aspect-ratio:1/1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:4px;padding:8px;border-radius:28px;background:linear-gradient(145deg,var(--board),var(--board2));box-shadow:0 18px 40px rgba(89,58,35,.22),inset 0 2px 0 rgba(255,255,255,.45);touch-action:pan-y;user-select:none}
.cell{position:relative;border:0;padding:0;border-radius:16px;background:rgba(255,255,255,.42);min-width:0;min-height:0;cursor:pointer;overflow:hidden;transition:transform .14s ease,background .16s ease,box-shadow .16s ease}.cell:nth-child(even){background:rgba(255,255,255,.29)}.cell:hover{background:rgba(255,255,255,.58)}.cell.selected{box-shadow:inset 0 0 0 4px #fff,0 0 0 3px var(--accent);transform:scale(.94)}.cell.hint{animation:hintPulse .75s ease-in-out 3}.cell.bad-swap{animation:shake .26s linear}
.tile-img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(73,43,31,.16));pointer-events:none;transition:transform .18s ease,opacity .15s ease}.cell.pop .tile-img{animation:pop .25s ease forwards}.cell.fall .tile-img{animation:fall .25s ease}
.underlay{position:absolute;inset:4px;border-radius:13px;pointer-events:none}.underlay.grass{background:repeating-linear-gradient(35deg,rgba(82,170,96,.38) 0 7px,rgba(105,191,102,.52) 7px 14px);box-shadow:inset 0 0 0 2px rgba(57,121,67,.22)}.underlay.mud{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.18) 0 8%,transparent 9%),#b98a63;box-shadow:inset 0 0 0 3px rgba(110,71,46,.2)}
.special-mark{position:absolute;z-index:3;pointer-events:none}.special-mark.line-h{left:8%;right:8%;top:45%;height:12%;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 0 0 2px rgba(72,123,190,.55)}.special-mark.line-v{top:8%;bottom:8%;left:44%;width:12%;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 0 0 2px rgba(222,102,101,.55)}.special-mark.bomb{inset:22%;border-radius:50%;border:4px dotted rgba(255,255,255,.95);box-shadow:0 0 0 3px rgba(156,90,185,.55)}.special-mark.rainbow{inset:19%;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#f27d72,#f5c95d,#73c895,#78a8e5,#ae86d3,#f27d72);color:white;font-size:clamp(.8rem,2vw,1.35rem);text-shadow:0 1px 3px rgba(0,0,0,.25);box-shadow:inset 0 0 0 4px rgba(255,255,255,.72),0 2px 8px rgba(82,58,45,.18)}
.board-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}.action-btn{min-width:88px;background:rgba(255,255,255,.86)}
.special-help{display:flex;gap:10px;align-items:center;margin:10px 0}.special-help p{font-size:.78rem;margin:0;line-height:1.25}.mini-special{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#fff;display:grid;place-items:center}.mini-special.stripe-h{background:linear-gradient(#f3aaa0 38%,#fff 38% 58%,#f3aaa0 58%)}.mini-special.burst{border-radius:50%;border:5px dotted #9f79b9;background:#fff}.mini-special.rainbow{background:conic-gradient(#f27d72,#f5c95d,#73c895,#78a8e5,#ae86d3,#f27d72);color:#fff;font-weight:1000}
.combo-banner{position:absolute;z-index:8;left:50%;top:44%;transform:translate(-50%,-50%) scale(.75);pointer-events:none;font-weight:1000;font-size:clamp(1.3rem,5vw,2.7rem);color:#fff;text-shadow:0 3px 0 rgba(83,57,43,.36),0 4px 14px rgba(65,44,32,.45);opacity:0}.combo-banner.show{animation:combo .75s ease}
.instructions{margin:15px auto 0;background:rgba(255,255,255,.58);border-radius:18px;padding:11px 15px;font-size:.82rem;line-height:1.45;text-align:center;border:1px solid var(--line)}
.modal{position:fixed;inset:0;z-index:50;background:rgba(62,45,38,.48);display:grid;place-items:center;padding:18px;overflow:auto}.modal.hidden{display:none}.modal-card{width:min(480px,100%);background:#fffaf1;border-radius:26px;padding:22px;box-shadow:0 22px 70px rgba(43,30,24,.35);border:1px solid rgba(85,58,43,.12)}.wide-card{width:min(760px,100%)}.modal-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.modal-head h2{margin:0}.close-btn{width:44px;height:44px;border-radius:50%;background:#f0e5d8;color:var(--ink);font-size:1.6rem}.world-tabs{display:flex;gap:7px;overflow:auto;padding:14px 0 8px}.world-tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 12px;white-space:nowrap;font-weight:900;cursor:pointer;color:var(--ink)}.world-tab.active{background:var(--ink);color:#fff}.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:8px}.level-btn{min-height:76px;border:1px solid var(--line);border-radius:18px;background:#fff;cursor:pointer;font-weight:1000;color:var(--ink);display:grid;place-items:center;align-content:center;gap:3px}.level-btn.locked{opacity:.42;cursor:not-allowed}.level-btn.current{box-shadow:inset 0 0 0 3px var(--accent)}.level-stars{font-size:.7rem;color:var(--gold);letter-spacing:-1px}.text-btn{margin-top:16px;background:transparent;color:#946351;text-decoration:underline}.result-card{text-align:center}.result-mascot{height:115px}.result-mascot img{height:100%;max-width:140px;object-fit:contain}.result-card h2{font-size:2rem;margin:4px 0 8px}.result-stars{font-size:2.1rem;color:var(--gold);letter-spacing:4px}.result-card p{color:var(--muted)}.result-actions{display:flex;gap:9px;justify-content:center;margin-top:18px}.primary-btn,.secondary-btn{min-height:48px;border-radius:15px;padding:10px 18px}.primary-btn{background:var(--accent);color:#fff}.secondary-btn{background:#eee1d3;color:var(--ink)}
@keyframes hintPulse{0%,100%{transform:scale(1)}50%{transform:scale(.88);box-shadow:inset 0 0 0 4px #fff,0 0 0 4px #7d8fe8}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes pop{0%{transform:scale(1);opacity:1}70%{transform:scale(1.18);opacity:.85}100%{transform:scale(.1);opacity:0}}
@keyframes fall{0%{transform:translateY(-35%);opacity:.3}100%{transform:translateY(0);opacity:1}}
@keyframes combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
@media (max-width:900px){.play-layout{grid-template-columns:minmax(0,1fr) minmax(0,620px);grid-template-areas:"goals board" "special board"}.goals-panel{grid-area:goals}.specials-panel{grid-area:special}.board-wrap{grid-area:board}}
@media (max-width:680px){body{padding:10px}.topbar{align-items:flex-start}.top-actions{max-width:150px}.status-strip{gap:10px;padding:9px 11px}.stat{display:grid;gap:0}.score-stat{min-width:0}.stars{gap:0}.star{font-size:1.12rem}.play-layout{display:flex;flex-direction:column}.board-wrap{order:1;width:100%}.goals-panel{order:0;width:100%;padding:12px}.specials-panel{order:2;width:100%}.goal-list{grid-template-columns:repeat(2,minmax(0,1fr))}.meter-wrap{margin-top:10px}.board{border-radius:20px;padding:5px;gap:3px}.cell{border-radius:11px}.specials-panel{display:none}.level-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:390px){body{padding:7px}.brand-block h1{font-size:1.45rem}.eyebrow{font-size:.63rem}.icon-btn{padding:8px 9px;font-size:.78rem}.status-strip{gap:8px}.stat span{font-size:.58rem}.stat strong{font-size:1rem}.goal-item{gap:6px;padding:6px}.goal-item img,.goal-icon-text{width:34px;height:34px}.goal-copy strong{font-size:.78rem}.goal-copy span{font-size:.67rem}.action-btn{min-width:78px;padding:8px 10px}.level-grid{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}