*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --ocean:#1e5a67;--ocean-2:#174b58;--ocean-3:#2b6d79;--ocean-deep:#123f4b;
  --ink:#fff;--ink-soft:#eff8fa;--muted:#cfe5e8;--muted-2:#abcbd0;
  --good:#8fe7cf;--bad:#ffaca8;
}
html,body{margin:0;min-height:100%;color:var(--ink);font-family:ui-rounded,"SF Pro Rounded","Nunito","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#1e5a67}
body{overflow-x:hidden;-webkit-user-select:none;user-select:none;overscroll-behavior-y:contain;position:relative;background:
  radial-gradient(circle at 50% -8%,rgba(255,255,255,.25),transparent 30%),
  radial-gradient(circle at 3% 34%,rgba(97,240,213,.18),transparent 25%),
  radial-gradient(circle at 96% 13%,rgba(255,197,145,.13),transparent 25%),
  radial-gradient(circle at 82% 84%,rgba(100,203,220,.12),transparent 24%),
  linear-gradient(180deg,#2a6b77 0%,#1e5a67 46%,#174b58 100%)}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(34px);opacity:.48;animation:ambient-drift 13s ease-in-out infinite alternate}
body::before{width:210px;height:210px;left:-70px;top:22%;background:radial-gradient(circle,rgba(102,224,196,.24),transparent 68%)}
body::after{width:250px;height:250px;right:-85px;top:8%;background:radial-gradient(circle,rgba(255,196,142,.18),transparent 68%);animation-duration:17s}
button{font:inherit;color:inherit;touch-action:manipulation}button,svg{display:block}
.game{width:min(100%,520px);margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));min-height:640px;position:relative;z-index:1}
.topbar{height:56px;display:grid;grid-template-columns:52px 1fr 52px;align-items:center}.level-heading{text-align:center;line-height:1}.level-kicker{display:block;color:rgba(255,255,255,.68);font-size:12px;font-weight:900;letter-spacing:.15em;margin-bottom:7px}.level-heading strong{font-size:21px;font-weight:860;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 12px rgba(7,54,64,.18)}
.round-button{width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.13);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 22px rgba(7,51,60,.22);transition:transform .12s ease,background .12s ease}.round-button.quiet{color:#fff}.round-button:active{transform:scale(.92);background:rgba(255,255,255,.18)}.round-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.sound-off{display:none}.sound-muted .sound-on{display:none}.sound-muted .sound-off{display:block}
.stage{margin-top:11px}.progress-row{height:25px;position:relative;display:grid;place-items:center}.progress-track{width:76px;height:5px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;box-shadow:inset 0 1px 2px rgba(7,51,60,.15)}.progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#9ff2d8,#82dcf1);box-shadow:0 0 12px rgba(133,229,218,.4);transition:width .42s cubic-bezier(.2,.8,.2,1)}
.flow-orb{position:absolute;right:5px;top:4px;display:flex;gap:5px;opacity:.38;transition:opacity .2s ease}.flow-orb i{display:block;width:6px;height:6px;border-radius:50%;background:#a3f0da;box-shadow:0 0 12px rgba(163,240,218,.52);transform:scale(.76);transition:transform .2s cubic-bezier(.2,1.6,.4,1),opacity .2s}.flow-orb.flow-1 i:nth-child(1),.flow-orb.flow-2 i:nth-child(-n+2),.flow-orb.flow-3 i{transform:scale(1.3);opacity:1}.flow-orb.flow-2,.flow-orb.flow-3{opacity:.92}
.board-shell{position:relative;width:100%;aspect-ratio:1;border-radius:30px;padding:9px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.09));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 28px 62px rgba(7,50,60,.28),0 0 0 1px rgba(255,255,255,.10);transform:translateZ(0);overflow:hidden;transition:box-shadow .32s ease,transform .32s ease}
.board-shell::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 38%),radial-gradient(circle at 50% 100%,rgba(106,238,213,.11),transparent 35%);pointer-events:none}.board-shell[data-flow="2"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 68px rgba(7,50,60,.30),0 0 34px rgba(120,226,207,.10)}.board-shell[data-flow="3"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 32px 72px rgba(7,50,60,.32),0 0 42px rgba(120,226,207,.16)}
.board{position:relative;width:100%;height:100%;touch-action:none;isolation:isolate;border-radius:23px;background:linear-gradient(180deg,rgba(28,91,103,.92),rgba(20,72,84,.96));box-shadow:inset 0 2px 10px rgba(6,47,56,.22)}
.tile{position:absolute;border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.145));box-shadow:0 4px 0 rgba(8,55,64,.34),0 8px 14px rgba(6,48,57,.15),inset 0 1px 0 rgba(255,255,255,.24);z-index:1;transform-origin:center;transition:transform .105s cubic-bezier(.2,.86,.35,1),background .14s ease,box-shadow .14s ease,filter .14s ease}.tile::after{content:"";position:absolute;inset:1px;border-radius:inherit;border:1px solid rgba(255,255,255,.055);pointer-events:none}.tile.pressed{transform:translateY(2.9px) scale(.957);box-shadow:0 1px 0 rgba(8,53,62,.28),0 3px 7px rgba(6,48,57,.09);filter:saturate(.98)}.tile.good-zone{background:linear-gradient(180deg,rgba(255,255,255,.31),rgba(255,255,255,.19))}.tile.rebound{animation:tile-rebound .42s cubic-bezier(.18,1.35,.34,1)}
.clue{position:absolute;z-index:9;display:grid;place-items:center;pointer-events:none;font-weight:880;font-size:var(--clue-size,28px);letter-spacing:-.045em;color:#fff;text-shadow:0 2px 8px rgba(6,47,56,.24),0 1px 0 rgba(255,255,255,.18);transform:translateZ(0)}.clue.magnet{animation:clue-magnet .2s cubic-bezier(.2,1.7,.35,1)}
.region,.preview{position:absolute;border-radius:14px;overflow:hidden;pointer-events:none;will-change:left,top,width,height,transform,opacity}.region{z-index:3;background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),var(--fill);box-shadow:0 5px 0 var(--edge),0 11px 19px rgba(6,46,55,.18),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(7,49,58,.07);animation:region-jelly .46s cubic-bezier(.15,.92,.25,1.24) both}.region::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,transparent calc(100% - 1px),rgba(7,49,58,.09) 0),linear-gradient(to bottom,transparent calc(100% - 1px),rgba(7,49,58,.09) 0);background-size:var(--cell-w) 100%,100% var(--cell-h);opacity:.40}.region::after{content:"";position:absolute;top:-36%;left:-60%;width:34%;height:170%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:shine .76s .05s ease-out both}
.preview{z-index:6;background:linear-gradient(145deg,rgba(255,255,255,.25),transparent 40%),var(--preview-fill);box-shadow:0 5px 0 var(--preview-edge),0 11px 20px rgba(6,46,55,.20),inset 0 1px 0 rgba(255,255,255,.28);transition:left .075s cubic-bezier(.2,.94,.25,1),top .075s cubic-bezier(.2,.94,.25,1),width .105s cubic-bezier(.12,.92,.18,1.1),height .105s cubic-bezier(.12,.92,.18,1.1),background-color .11s ease,box-shadow .11s ease;transform:scale(.982)}.preview.valid{transform:scale(1);filter:saturate(1.04) brightness(1.02)}.preview.invalid{background:rgba(246,127,123,.42)!important;box-shadow:0 5px 0 rgba(191,91,87,.5),0 10px 18px rgba(6,46,55,.16)}.preview.rejected{animation:reject .34s ease both}
.drag-particle{position:absolute;z-index:8;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:rgba(255,255,255,.75);pointer-events:none;box-shadow:0 0 10px rgba(255,255,255,.4);animation:drag-particle .42s ease-out forwards}.hint-outline{position:absolute;z-index:7;border:3px solid rgba(163,235,255,.85);border-radius:15px;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 26px rgba(131,221,240,.20);animation:hint-pulse 1s ease-in-out 2}.pop-dot{position:absolute;z-index:11;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--dot);pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 8px rgba(255,255,255,.10);animation:pop-dot .56s cubic-bezier(.16,.7,.3,1) forwards}.soft-ring{position:absolute;z-index:10;border:2px solid var(--ring);border-radius:15px;pointer-events:none;animation:soft-ring .48s ease-out forwards}.finish-ring{position:absolute;z-index:13;border:2px solid rgba(213,255,243,.72);border-radius:50%;pointer-events:none;animation:finish-ring .78s ease-out forwards}.float-word{position:absolute;z-index:12;transform:translate(-50%,-50%);padding:6px 10px;border-radius:999px;background:rgba(21,76,87,.76);backdrop-filter:blur(12px);font-size:12px;font-weight:880;letter-spacing:.08em;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px rgba(6,49,58,.20);animation:float-word .78s cubic-bezier(.18,.8,.28,1) forwards}.float-word.good{color:#e5fff7;border:1px solid rgba(155,240,216,.35)}.float-word.bad{color:#ffe0df;border:1px solid rgba(255,180,176,.28)}
.status{height:28px;margin-top:17px;text-align:center;color:rgba(236,248,250,.78);font-size:12px;font-weight:690;letter-spacing:.02em;transition:color .15s ease,transform .15s ease}.status.good{color:#b9f1df;transform:translateY(-1px)}.status.bad{color:#ffd1c7}.status.flow{animation:status-pop .24s cubic-bezier(.2,1.4,.35,1)}
.actions{display:flex;justify-content:center;gap:29px;margin-top:11px}.tool-button{min-width:66px;border:0;background:transparent;padding:5px 4px 0;display:flex;flex-direction:column;align-items:center;gap:7px;color:#eff8fa;font-size:12px;font-weight:770}.tool-button:active .tool-icon{transform:translateY(2px) scale(.91);box-shadow:0 2px 0 rgba(9,51,60,.27)}.tool-button:disabled{opacity:.3}.tool-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);box-shadow:0 4px 0 rgba(9,52,61,.30),0 10px 20px rgba(8,49,58,.14),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.tool-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.tool-button.hint .tool-icon{background:linear-gradient(180deg,#9be1d1,#73c8b8);color:#fff;box-shadow:0 4px 0 rgba(9,52,61,.34),0 10px 22px rgba(62,158,146,.18),inset 0 1px 0 rgba(255,255,255,.28)}
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}.hidden{display:none!important}.sheet-backdrop{position:absolute;inset:0;border:0;background:rgba(10,50,59,.38);backdrop-filter:blur(9px)}.sheet-card{position:relative;width:min(100%,540px);max-height:86%;overflow:auto;border-radius:30px 30px 0 0;background:linear-gradient(180deg,#286b78,#1b5260);padding:9px 18px calc(25px + env(safe-area-inset-bottom));box-shadow:0 -24px 70px rgba(8,48,57,.32),inset 0 1px 0 rgba(255,255,255,.14);animation:sheet-up .28s cubic-bezier(.2,.86,.25,1) both}.grabber{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.24);margin:2px auto 17px}.sheet-title-row{display:flex;align-items:center;justify-content:space-between}.sheet-kicker{font-size:12px;color:rgba(255,255,255,.60);font-weight:900;letter-spacing:.16em}.sheet-title-row h2{margin:5px 0 0;font-size:25px;letter-spacing:-.035em;color:#fff}.round-button.small{width:42px;height:42px}
.chapter-tabs{display:flex;gap:7px;overflow-x:auto;padding:17px 0 12px;scrollbar-width:none}.chapter-tabs::-webkit-scrollbar{display:none}.chapter-tab{flex:0 0 38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:0 3px 0 rgba(9,52,61,.22),inset 0 1px 0 rgba(255,255,255,.18);color:rgba(255,255,255,.72);font-size:12px;font-weight:860}.chapter-tab.active{background:linear-gradient(180deg,#9de8d4,#79cdb7);color:#174650;box-shadow:0 3px 0 rgba(9,52,61,.22),0 8px 20px rgba(112,211,190,.14)}.chapter-tab.done:not(.active){color:#d2fff2}
.chapter-hero{min-height:132px;border-radius:23px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.09));box-shadow:0 4px 0 rgba(9,51,60,.20),inset 0 1px 0 rgba(255,255,255,.18);display:grid;grid-template-columns:58px 1fr;gap:12px;padding:17px 16px;position:relative;overflow:hidden}.chapter-hero::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-48px;top:-60px;background:radial-gradient(circle,rgba(131,235,213,.24),rgba(255,255,255,0) 70%)}.chapter-index{width:50px;height:50px;border-radius:17px;background:linear-gradient(180deg,#a7f0db,#7bd1ba);color:#15434d;display:grid;place-items:center;font-weight:920;font-size:16px;box-shadow:0 4px 0 rgba(9,51,60,.22),0 14px 30px rgba(86,190,164,.12)}.chapter-copy{min-width:0;padding-right:4px}.chapter-copy span{font-size:12px;color:rgba(255,255,255,.62);font-weight:900;letter-spacing:.12em}.chapter-copy h3{font-size:20px;margin:4px 0 5px;letter-spacing:-.03em;color:#fff}.chapter-copy p{font-size:12px;line-height:1.55;color:rgba(255,255,255,.68);margin:0;max-width:310px}.chapter-meter{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:1px}.chapter-meter>span{font-size:12px;color:rgba(255,255,255,.58);font-weight:800}.chapter-meter>div{display:flex;gap:5px}.chapter-meter i{display:block;width:19px;height:4px;border-radius:99px;background:rgba(255,255,255,.14)}.chapter-meter i.on{background:linear-gradient(90deg,#a6f0dc,#88dff0)}
.chapter-progress{display:flex;align-items:center;gap:12px;padding:14px 2px 9px;color:rgba(255,255,255,.62);font-size:12px;font-weight:800}.chapter-progress>span{white-space:nowrap}.chapter-progress>i{height:3px;flex:1;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden}.chapter-progress b{display:block;height:100%;width:0;background:linear-gradient(90deg,#a6f0dc,#8bdff0);border-radius:inherit;transition:width .25s ease}
.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;padding:4px 0 15px}.level-btn{position:relative;min-width:0;aspect-ratio:1;border:0;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.09));box-shadow:0 4px 0 rgba(9,51,60,.20),inset 0 1px 0 rgba(255,255,255,.17);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.level-btn strong{font-size:13px;font-weight:900}.level-btn small{font-size:12px;color:rgba(255,255,255,.56);font-weight:760}.level-btn.current{background:linear-gradient(180deg,#a7efdc,#7fd3bd);color:#15434d;box-shadow:0 4px 0 rgba(9,51,60,.20),0 12px 26px rgba(112,211,190,.15)}.level-btn.current small{color:#2a6973}.level-btn.done:not(.current){color:#dcfff5}.level-btn.done:not(.current)::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#b7f5e3;box-shadow:0 0 10px rgba(183,245,227,.45);top:6px;right:6px}
.rank-panel{margin:5px 0 4px;padding:14px;border-radius:20px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}.rank-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.rank-heading>div{min-width:0}.rank-heading strong{display:block;font-size:15px;color:#fff}.rank-heading span{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.62)}.rank-refresh{min-width:68px;min-height:44px;border:0;border-radius:14px;padding:0 12px;background:rgba(255,255,255,.13);color:#eafff8;font-size:13px;font-weight:850;box-shadow:0 3px 0 rgba(9,51,60,.18)}.rank-refresh:disabled{opacity:.45}.rank-list{display:grid;gap:7px;margin-top:12px}.rank-row{min-height:46px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 11px;border-radius:14px;background:rgba(255,255,255,.075)}.rank-row b{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.12);font-size:13px}.rank-row:nth-child(1) b{background:#ffe08d;color:#5a4300}.rank-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:760}.rank-row strong{font-size:13px;color:#b7f5e3}.rank-empty{margin:0;padding:17px 8px;text-align:center;color:rgba(255,255,255,.62);font-size:13px}
.complete{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px;background:rgba(10,50,59,.40);backdrop-filter:blur(10px)}.complete-card{width:min(100%,340px);background:linear-gradient(180deg,#2b7080,#1c5563);border-radius:32px;padding:28px 25px 23px;text-align:center;box-shadow:0 30px 90px rgba(8,48,57,.36),inset 0 1px 0 rgba(255,255,255,.17);animation:complete-in .4s cubic-bezier(.18,1.08,.35,1) both}.complete-icon{width:68px;height:68px;border-radius:23px;background:linear-gradient(145deg,#b7f4e3,#82d9c1);box-shadow:0 4px 0 rgba(9,51,60,.20),inset 0 1px 0 rgba(255,255,255,.5);margin:0 auto 19px;display:grid;place-items:center;color:#15434d;font-size:31px;font-weight:920}.complete-icon span{animation:check-pop .42s .08s cubic-bezier(.2,1.6,.35,1) both}.complete-kicker{font-size:12px;font-weight:900;letter-spacing:.21em;color:rgba(255,255,255,.62)}.complete h2{font-size:29px;margin:7px 0 7px;letter-spacing:-.04em;color:#fff}.complete p{font-size:12px;color:rgba(255,255,255,.68);margin:0 0 20px}.next-button{width:100%;height:54px;border:0;border-radius:17px;background:linear-gradient(180deg,#b0f2df,#82d8c0);color:#15434d;font-weight:880;display:flex;align-items:center;justify-content:center;gap:11px;box-shadow:0 4px 0 rgba(9,51,60,.20)}.next-button:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(9,51,60,.20)}.text-button{min-height:44px;border:0;background:transparent;color:rgba(255,255,255,.66);padding:12px 16px 4px;font-size:12px;font-weight:760;margin:0 auto}
.board-celebrate{animation:board-celebrate .78s cubic-bezier(.18,.9,.3,1.2)}.region.finish-wave{animation:finish-wave .60s cubic-bezier(.2,1.4,.35,1) both}
@keyframes region-jelly{0%{transform:scale(.94,.91);opacity:.38}38%{transform:scale(1.032,.984);opacity:1}68%{transform:scale(.99,1.016)}84%{transform:scale(1.008,.997)}100%{transform:scale(1)}}
@keyframes tile-rebound{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-2px) scale(1.035)}68%{transform:translateY(1px) scale(.988)}100%{transform:translateY(0) scale(1)}}
@keyframes drag-particle{0%{transform:scale(.45);opacity:.7}100%{transform:translateY(-10px) scale(.05);opacity:0}}@keyframes shine{0%{left:-60%;opacity:0}22%{opacity:1}100%{left:132%;opacity:0}}@keyframes reject{0%,100%{transform:translateX(0);opacity:1}22%{transform:translateX(-5px) scale(.99)}54%{transform:translateX(5px)}100%{opacity:0;transform:scale(.96)}}
@keyframes hint-pulse{0%,100%{transform:scale(1);opacity:.54}50%{transform:scale(.988);opacity:1}}@keyframes pop-dot{0%{transform:translate(0,0) scale(.55);opacity:0}26%{opacity:.95}100%{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}@keyframes soft-ring{from{transform:scale(.962);opacity:.58}to{transform:scale(1.055);opacity:0}}@keyframes finish-ring{from{transform:translate(-50%,-50%) scale(.25);opacity:.75}to{transform:translate(-50%,-50%) scale(4.4);opacity:0}}@keyframes clue-magnet{0%{transform:scale(1)}52%{transform:scale(1.13)}100%{transform:scale(1)}}
@keyframes float-word{0%{transform:translate(-50%,-48%) scale(.9);opacity:0}18%{opacity:1}100%{transform:translate(-50%,-124%) scale(1.02);opacity:0}}@keyframes status-pop{0%{transform:scale(.97)}65%{transform:scale(1.03)}100%{transform:scale(1)}}@keyframes sheet-up{from{transform:translateY(34px);opacity:.55}to{transform:translateY(0);opacity:1}}@keyframes complete-in{from{transform:scale(.89) translateY(12px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes check-pop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:scale(1);opacity:1}}@keyframes board-celebrate{0%,100%{transform:scale(1)}36%{transform:scale(1.018)}70%{transform:scale(.995)}}@keyframes finish-wave{0%{transform:scale(1)}46%{transform:translateY(-2.5px) scale(1.018)}100%{transform:scale(1)}}@keyframes ambient-drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(18px,-12px,0)}}
@media(max-width:370px){.game{padding-left:10px;padding-right:10px}.stage{margin-top:8px}.board-shell{padding:7px}.actions{gap:17px}.level-grid{gap:7px}.tile{border-radius:9px}.status{margin-top:15px}.chapter-hero{padding:15px 13px;grid-template-columns:52px 1fr}.chapter-index{width:46px;height:46px}.chapter-copy p{font-size:12px}}
@media(min-width:600px){.game{padding-top:28px}.stage{margin-top:18px}.board-shell{padding:9px}.actions{margin-top:18px}.tool-icon{width:52px;height:52px}.level-grid{grid-template-columns:repeat(6,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* V9: WordPress 云存档 + 移动端可读性 / 大图标 */
.sync-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 4px;padding:12px 13px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.085));box-shadow:0 4px 0 rgba(9,51,60,.18),inset 0 1px 0 rgba(255,255,255,.16)}
.sync-info{display:flex;align-items:center;gap:10px;min-width:0}.sync-state-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#b7f5e3;box-shadow:0 0 0 4px rgba(183,245,227,.08),0 0 12px rgba(183,245,227,.42)}.sync-state-dot.saving{background:#ffe4a8;box-shadow:0 0 0 4px rgba(255,228,168,.08),0 0 12px rgba(255,228,168,.35)}.sync-state-dot.offline{background:#ffb2ad;box-shadow:0 0 0 4px rgba(255,178,173,.08),0 0 12px rgba(255,178,173,.34)}
.sync-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.sync-copy strong{font-size:12px;color:#fff;font-weight:880;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sync-copy span{font-size:12px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sync-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.sync-icon-button{width:52px;height:52px;border:0;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#eafff8;box-shadow:0 3px 0 rgba(9,51,60,.20),inset 0 1px 0 rgba(255,255,255,.16)}.sync-icon-button:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(9,51,60,.20)}.sync-icon-button:disabled{opacity:.42}.sync-icon-button svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.sync-login-button{min-height:52px;border:0;border-radius:16px;padding:0 14px;background:linear-gradient(180deg,#b0f2df,#82d8c0);color:#15434d;font-size:12px;font-weight:880;box-shadow:0 3px 0 rgba(9,51,60,.20)}.sync-login-button[hidden]{display:none}.sync-login-button:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(9,51,60,.20)}

/* 图标提升约 2 倍，同时扩大触控区 */
.topbar{height:72px;grid-template-columns:72px 1fr 72px}.round-button{width:66px;height:66px}.round-button svg{width:44px;height:44px;stroke-width:1.6}.round-button.small{width:58px;height:58px}.round-button.small svg{width:40px;height:40px}.tool-icon{width:70px;height:70px}.tool-icon svg{width:44px;height:44px;stroke-width:1.6}.actions{gap:22px}.tool-button{min-width:76px}

@media(max-width:599px){
  /* 移动端所有可见辅助文字最低 12px */
  .level-kicker,.status,.tool-button,.sheet-kicker,.chapter-tab,.chapter-copy span,.chapter-copy p,.chapter-meter>span,.chapter-progress,.level-btn small,.complete-kicker,.complete p,.text-button,.float-word,.sync-copy strong,.sync-copy span,.sync-login-button{font-size:12px!important}
  .level-btn strong{font-size:14px}.chapter-copy h3{font-size:20px}.level-heading strong{font-size:21px}
  .game{padding-left:10px;padding-right:10px}.topbar{grid-template-columns:70px 1fr 70px}.round-button{width:64px;height:64px}.round-button svg{width:44px;height:44px}.round-button.small{width:56px;height:56px}.round-button.small svg{width:40px;height:40px}
  .tool-icon{width:68px;height:68px}.tool-icon svg{width:44px;height:44px}.actions{gap:16px}.tool-button{min-width:70px;gap:8px}
  .sync-panel{padding:11px 11px;gap:8px}.sync-icon-button{width:54px;height:54px}.sync-icon-button svg{width:38px;height:38px}.sync-login-button{min-height:54px;padding:0 12px}
}

@media(max-width:370px){
  .actions{gap:8px}.tool-button{min-width:70px}.tool-icon{width:66px;height:66px}.tool-icon svg{width:44px;height:44px}
  .sync-panel{align-items:stretch}.sync-actions{gap:6px}.sync-login-button{padding:0 10px}.sync-copy{max-width:150px}
}

/* =========================================================
   方境 1.0 · 正式移动端界面
   ========================================================= */
.account-sync-chip{width:100%;min-height:58px;margin:8px 0 2px;border:0;border-radius:18px;padding:9px 12px;display:flex;align-items:center;gap:10px;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.095));color:#fff;box-shadow:0 4px 0 rgba(9,51,60,.18),inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px rgba(8,52,61,.10)}
.account-sync-chip:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(9,51,60,.18),inset 0 1px 0 rgba(255,255,255,.15)}
.account-sync-chip.cloud{background:linear-gradient(180deg,rgba(166,240,220,.22),rgba(114,205,181,.14))}.account-sync-chip.offline{background:linear-gradient(180deg,rgba(255,181,175,.15),rgba(255,255,255,.08))}
.account-sync-icon{flex:0 0 44px;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}.account-sync-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account-sync-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}.account-sync-copy strong{font-size:13px;font-weight:900;letter-spacing:.01em}.account-sync-copy small{font-size:12px;color:rgba(255,255,255,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-sync-arrow{flex:0 0 auto;font-size:28px;line-height:1;color:rgba(255,255,255,.66);transform:translateY(-1px)}

#hintBtn:disabled{opacity:.38}.tool-button.hint:disabled .tool-icon{filter:saturate(.45);box-shadow:0 3px 0 rgba(9,51,60,.16),inset 0 1px 0 rgba(255,255,255,.10)}

@media(max-width:599px){
  .game{width:100%;max-width:480px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .topbar{height:62px;grid-template-columns:62px 1fr 62px}.round-button{width:58px;height:58px}.round-button svg{width:40px;height:40px}.level-heading strong{font-size:22px}.level-kicker{font-size:12px!important;letter-spacing:.11em;margin-bottom:5px}
  .account-sync-chip{margin-top:7px;min-height:58px}.stage{margin-top:7px}.progress-row{height:21px}.status{margin-top:13px;height:26px}.actions{margin-top:8px}
  .tool-icon{width:66px;height:66px}.tool-icon svg{width:44px;height:44px}.tool-button{font-size:12px!important}

  /* 关卡页按移动端底部弹层重构，参考卡片式关卡旅程 */
  .sheet{align-items:flex-end;padding-top:max(12px,env(safe-area-inset-top))}.sheet-backdrop{background:rgba(10,50,59,.52);backdrop-filter:blur(10px)}
  .sheet-card{width:100%;max-width:520px;max-height:calc(100% - 12px);border-radius:30px 30px 0 0;padding:8px 14px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#2b7180 0%,#246674 28%,#1c5866 100%);box-shadow:0 -24px 70px rgba(6,44,52,.35),inset 0 1px 0 rgba(255,255,255,.18);scrollbar-width:none}
  .sheet-card::-webkit-scrollbar{display:none}.grabber{width:48px;height:5px;margin:3px auto 17px;background:rgba(255,255,255,.28)}
  .sheet-title-row{align-items:center}.sheet-title-row h2{font-size:29px;margin-top:5px}.sheet-kicker{font-size:12px!important;letter-spacing:.12em}.round-button.small{width:58px;height:58px;background:rgba(255,255,255,.15)}.round-button.small svg{width:38px;height:38px}

  .sync-panel{margin:14px 0 12px;padding:12px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.10));box-shadow:0 4px 0 rgba(9,51,60,.18),inset 0 1px 0 rgba(255,255,255,.16)}
  .sync-info{flex:1;min-width:0}.sync-copy{max-width:none}.sync-copy strong{font-size:13px!important}.sync-copy span{font-size:12px!important}.sync-state-dot{width:10px;height:10px;flex-basis:10px}
  .sync-actions{gap:7px}.sync-icon-button{width:52px;height:52px;border-radius:16px}.sync-icon-button svg{width:34px;height:34px}.sync-login-button{min-height:52px;padding:0 13px;font-size:12px!important;white-space:nowrap}

  .chapter-tabs{gap:8px;padding:13px 0 14px}.chapter-tab{flex-basis:44px;height:44px;font-size:12px!important;box-shadow:0 4px 0 rgba(9,51,60,.18),inset 0 1px 0 rgba(255,255,255,.16)}
  .chapter-hero{min-height:137px;border-radius:22px;grid-template-columns:68px 1fr;gap:13px;padding:16px 14px;background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.10))}.chapter-index{width:64px;height:64px;border-radius:19px;font-size:18px}.chapter-copy span{font-size:12px!important}.chapter-copy h3{font-size:23px;margin:4px 0 5px}.chapter-copy p{font-size:12px!important;line-height:1.55}.chapter-meter>span{font-size:12px!important}.chapter-meter i{width:24px;height:5px}
  .chapter-progress{font-size:12px!important;padding:15px 3px 10px}.chapter-progress>i{height:4px}

  .level-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding-top:6px}.level-btn{border-radius:14px;min-height:54px;box-shadow:0 4px 0 rgba(9,51,60,.20),inset 0 1px 0 rgba(255,255,255,.16)}.level-btn strong{font-size:14px}.level-btn small{font-size:12px!important}.level-btn.done:not(.current)::after{width:6px;height:6px;top:5px;right:5px}
}

@media(max-width:370px){
  .account-sync-chip{padding-left:10px;padding-right:10px}.account-sync-icon{width:42px;height:42px;flex-basis:42px}.account-sync-icon svg{width:28px;height:28px}
  .sheet-card{padding-left:11px;padding-right:11px}.sync-panel{gap:7px;padding:10px}.sync-copy strong{max-width:145px;overflow:hidden;text-overflow:ellipsis}.sync-login-button{padding:0 9px}.chapter-tabs{gap:6px}.chapter-tab{flex-basis:44px;height:44px}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.level-btn{min-height:58px}
}