/* MUDA MAX 6.0 | Exclusive one-stroke experience in the Mystery Airspace */
body[data-screen='sky'] main{width:min(1320px,100%);padding:8px clamp(7px,2.2vw,20px) calc(110px + env(safe-area-inset-bottom,0px))}
#screenSky{width:100%;--stroke-one:#ff68b5;--stroke-two:#7ce8ff;--stroke-three:#fff28c;color:#f7f6ff}
.stroke-shell{isolation:isolate;border:2px solid #9c94ff92;background:radial-gradient(circle at 8% 4%,#8636b84c,transparent 36%),radial-gradient(circle at 88% 10%,#08bcda42,transparent 42%),linear-gradient(145deg,#171636,#111b43 66%,#17214d);border-radius:26px;box-shadow:0 25px 70px #040620a6;overflow:hidden}
.stroke-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:clamp(15px,3vw,28px);background:radial-gradient(circle at 93% 16%,#fd72b86b,transparent 32%),linear-gradient(110deg,#39226299,#14335d55);border-bottom:1px solid #97e7fb58;position:relative}
.stroke-hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.26;background-image:radial-gradient(circle,#fff 1.2px,transparent 2px);background-size:32px 42px}
.stroke-heading{position:relative;z-index:1}.stroke-kicker{letter-spacing:.14em;font-size:10px;color:#a6f7ff;font-weight:950}.stroke-heading h1{font-size:clamp(28px,5.3vw,49px);line-height:1.1;margin:8px 0 6px;font-weight:1000;letter-spacing:-.075em;color:#fff;text-shadow:0 4px 15px #071333}.stroke-heading h1 span{color:#ffe78c;text-shadow:0 0 22px #ffbd74a8}.stroke-heading p{color:#d5ddfa;font-size:clamp(11px,1.6vw,14px);line-height:1.6;margin:0}.stroke-heading p b{color:#fff}.stroke-emblem{position:relative;z-index:1;flex:none;min-width:110px;display:grid;place-items:center}.stroke-emblem span{font-size:74px;line-height:1;filter:drop-shadow(0 0 18px #d5b0ff);animation:stroke-float 5s ease-in-out infinite alternate}.stroke-emblem small{color:#fff5bc;font-size:10px;letter-spacing:.22em;font-weight:1000}
.stroke-headbar{display:flex;gap:10px;align-items:stretch;padding:12px clamp(13px,2vw,20px);background:#0d1737ad;border-bottom:1px solid #6b7bc069}
.stroke-levelbox,.stroke-stat{display:grid;gap:3px;justify-items:start;background:#263460aa;border:1px solid #7484bc8c;border-radius:13px;padding:9px 13px;flex:1;min-width:0}.stroke-levelbox{background:linear-gradient(115deg,#8c3f93,#3d4d94);border-color:#fa99cf}.stroke-levelbox small,.stroke-stat small{font-size:10px;color:#d6ddfc;font-weight:900}.stroke-levelbox strong,.stroke-stat strong{font-size:clamp(15px,2.5vw,22px);font-weight:1000;white-space:nowrap;color:#fff}.stroke-stat strong{color:#fff2a6}.stroke-levelpicker{flex:none;border-radius:13px;border:2px solid #b1aeec;background:linear-gradient(#454e8e,#323965);color:#fff;font-size:12px;font-weight:1000;padding:9px 14px;cursor:pointer}
.stroke-main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.75fr);gap:clamp(10px,2vw,22px);padding:clamp(12px,2.5vw,25px);align-items:start}
.stroke-field{min-width:0;border-radius:22px;padding:clamp(10px,2vw,20px);border:1px solid #a5aff4a6;background:radial-gradient(circle at 50% 20%,#2f5aa05a,transparent 60%),linear-gradient(135deg,#151839,#1c2954 90%);box-shadow:inset 0 2px 30px #071027}
.stroke-board-halo{margin:0 auto;width:min(100%,540px);padding:clamp(6px,1.1vw,12px);border-radius:22px;background:linear-gradient(120deg,var(--stroke-one),var(--stroke-two),var(--stroke-three));box-shadow:0 0 35px #907ff67d,0 12px 22px #0007}
.stroke-board{--cols:4;position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(3px,.7vw,7px);width:100%;aspect-ratio:1;border-radius:15px;padding:clamp(5px,.85vw,9px);background:radial-gradient(circle at 50% 25%,#262e6a,#0d1335);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:6px}
.stroke-board:focus-visible{outline:3px solid #fff2a3}
.stroke-cell{border:2px solid #9db1e5a3;position:relative;min-width:0;min-height:0;aspect-ratio:1;padding:0;border-radius:clamp(6px,1.7vw,13px);color:#fff;display:grid;place-items:center;font-weight:1000;background:linear-gradient(140deg,#3d5089,#253561 70%);box-shadow:inset 0 2px 5px #ffffff27,inset 0 -4px #121d4f,0 4px 7px #0004;cursor:crosshair;touch-action:none;-webkit-tap-highlight-color:transparent}
.stroke-cell::after{content:'';position:absolute;top:10%;left:14%;width:45%;height:20%;background:#ffffff17;border-radius:60%;transform:rotate(-20deg);pointer-events:none}
.stroke-cell.blocked{background:#0a1433bd;border:1px solid #2a376865;box-shadow:inset 0 0 16px #0008;opacity:.42;cursor:default}
.stroke-cell.visited{background:linear-gradient(130deg,var(--stroke-one),#684eba);border-color:#ffeab4;box-shadow:0 0 15px #ff80d15b,inset 0 1px 5px #fff9}
.stroke-cell.start{background:linear-gradient(135deg,#7eeaff,#236cc2);border-color:#b0ffff;box-shadow:0 0 12px #80f2ff7a,inset 0 2px #fff7}
.stroke-cell.end{background:linear-gradient(135deg,#ffe984,#ea9b2d);border-color:#fffaab;color:#3b2358;box-shadow:0 0 13px #ffe79177,inset 0 1px #fff7}
.stroke-cell.rune{border-color:#f7ec8e;box-shadow:0 0 15px #cce8ff88,inset 0 2px #fff7}
.stroke-cell.head{outline:3px solid #fffbe0;outline-offset:-4px;z-index:2;box-shadow:0 0 15px 4px var(--stroke-three)}
.stroke-cell.hint{z-index:3;background:linear-gradient(135deg,#fff38b,#d2ff98);border-color:white;color:#2d3558;animation:stroke-hint .65s alternate infinite}
.stroke-start-sign,.stroke-end-sign,.stroke-rune-sign{font-size:clamp(15px,3.5vw,29px);position:relative;z-index:3;text-shadow:0 1px 8px #29304a5c;pointer-events:none}
.stroke-rune-sign{color:#fff0bb}.stroke-tile-spark{position:relative;z-index:3;color:#ffffffa8;font-size:13px;pointer-events:none}.stroke-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}.stroke-trace-line{filter:drop-shadow(0 0 3px #ffeaa6b3);opacity:.78}
.stroke-progress{display:flex;gap:10px;align-items:center;margin:15px auto 0;width:min(100%,540px)}.stroke-progress-track{flex:1;background:#29355f;border:1px solid #7786b1;border-radius:999px;height:13px;overflow:hidden}.stroke-progress-track span{height:100%;display:block;border-radius:999px;background:linear-gradient(90deg,var(--stroke-one),var(--stroke-two),var(--stroke-three));transition:width .13s}.stroke-progress>strong{color:#ffefab;font-size:15px;min-width:48px;text-align:right}.stroke-notice{padding:12px 14px;margin:10px auto 0;width:min(100%,540px);min-height:48px;background:#1d305a;border:1px solid #719ae0;border-radius:12px;color:#f7eece;font-size:12px;font-weight:900;line-height:1.7}
.stroke-sidebar{display:grid;gap:13px;align-content:start}.stroke-task{padding:22px 18px;border:2px solid #f5d289;border-radius:21px;background:radial-gradient(circle at 85% 8%,#f7c46d3b,transparent 30%),linear-gradient(150deg,#34345f,#22284e)}.stroke-chip{display:inline-block;background:#ffeb9f;color:#45345d;padding:6px 11px;border-radius:999px;font-size:11px;font-weight:1000}.stroke-task h2{font-size:clamp(19px,3vw,27px);margin:12px 0 9px;line-height:1.3;letter-spacing:-.04em}.stroke-task p{font-size:13px;line-height:1.8;color:#e3e7fa}.stroke-checkpoint{padding:11px;border-radius:12px;background:#151b3fb5;border:1px solid #939acc;color:#c3ffdb;font-size:12px;font-weight:900;line-height:1.65}
.stroke-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.stroke-buttons button{border:2px solid #b7c4f1;border-bottom:5px solid #313f69;border-radius:14px;background:linear-gradient(135deg,#4e61a3,#30487a);color:white;padding:12px 5px;min-height:55px;font-size:12px;font-weight:1000;cursor:pointer;box-shadow:0 4px 10px #0005}.stroke-buttons button:last-child{background:linear-gradient(115deg,#f5dd86,#f89f9e);border-color:#fff0b2;border-bottom-color:#995b82;color:#402c4a}
.stroke-buttons button:active,.stroke-levelpicker:active{transform:translateY(3px);border-bottom-width:2px}.stroke-buttons button:focus-visible,.stroke-levelpicker:focus-visible,.stroke-sound:focus-visible{outline:3px solid #fff3ac;outline-offset:3px}
.stroke-rules{padding:17px 18px;background:#111a3f;border:1px solid #697bbd;border-radius:17px}.stroke-rules strong{color:#f7ebaf;font-size:15px}.stroke-rules p{font-size:12px;color:#c8d5f3;line-height:1.7;margin:10px 0 0}
.stroke-sound{justify-self:start;background:#35395e;border:1px solid #b7a5df;border-radius:11px;color:#e9dcff;font-size:12px;padding:9px 12px;font-weight:900}
.stroke-bottom{padding:13px 20px 18px;border-top:1px solid #8286c466;background:#0e1839}.stroke-bottom-copy{display:flex;align-items:center;gap:11px;font-size:16px}.stroke-bottom-copy strong{font-size:13px;color:#f5dfaa}.stroke-bottom-copy span{font-size:10px;color:#c4c5e5;margin-left:auto}
.stroke-picker[hidden],.stroke-win[hidden]{display:none!important}.stroke-picker,.stroke-win{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:15px;background:#070c23cf;backdrop-filter:blur(10px)}
.stroke-picker-card,.stroke-win-card{width:min(500px,100%);border:2px solid #f6e390;border-radius:24px;padding:20px;background:radial-gradient(circle at 88% 10%,#8637b893,transparent 47%),linear-gradient(140deg,#26265b,#0d2342);box-shadow:0 16px 75px #000c}
.stroke-picker-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.stroke-picker-title strong{font-size:19px}.stroke-picker-title button{background:#4e416d;border:1px solid #bcb2d7;border-radius:10px;color:white;width:40px;height:40px;font-size:18px}
.stroke-picker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:60vh;overflow-y:auto}.stroke-picker-item{border:1px solid #82c8e8;border-radius:10px;color:#eef9ff;background:#2a427a;min-height:47px;font-size:13px;font-weight:950}.stroke-picker-item.selected{border-color:#fff8a2;background:#91618f;color:#fff}.stroke-picker-grid p{grid-column:1/-1;font-size:12px;color:#cce8ff}
.stroke-win-card{text-align:center;padding:26px 20px;position:relative;z-index:1}.stroke-win-icon{font-size:64px;filter:drop-shadow(0 4px 12px #ffc973);animation:stroke-float 2s infinite alternate}.stroke-win-eyebrow{display:block;font-size:11px;font-weight:1000;letter-spacing:.2em;color:#aef4ff;margin:10px 0}.stroke-win-card h2{font-size:clamp(26px,7vw,38px);color:#ffe993;margin:6px 0}.stroke-win-big{font-size:25px!important;color:#fff;font-weight:1000}.stroke-win-card p{font-size:13px;line-height:1.7;color:#e5e7ff}.stroke-win-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.stroke-win-actions button{min-height:50px;flex:1;border:1px solid #afc2ec;border-radius:13px;background:#424978;color:white;font-size:13px;font-weight:1000}.stroke-win-actions .stroke-win-next{background:linear-gradient(130deg,#d6fa90,#77e6d8);color:#1c3a48;border:2px solid #ecffbe}
.stroke-confetti{position:absolute;z-index:0;width:9px;height:14px;border-radius:2px;pointer-events:none;animation:stroke-fall 1s forwards}
.stroke-board.stroke-shake{animation:stroke-shake .22s ease}
@keyframes stroke-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes stroke-fall{to{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}@keyframes stroke-float{to{transform:translateY(-8px) rotate(7deg)}}@keyframes stroke-hint{to{box-shadow:0 0 26px 8px #f2ffad;transform:scale(.93)}}
@media(max-width:790px){.stroke-main{grid-template-columns:1fr}.stroke-sidebar{display:flex;flex-direction:column}.stroke-rules{order:4}.stroke-buttons{order:2}.stroke-sound{order:3}.stroke-task{order:1}.stroke-bottom-copy{flex-wrap:wrap}.stroke-bottom-copy span{margin-left:0;width:100%}}
@media(max-width:500px){body[data-screen='sky'] main{padding:5px 5px calc(100px + env(safe-area-inset-bottom,0px))}.stroke-shell{border-radius:17px}.stroke-hero{padding:15px 13px}.stroke-heading h1{font-size:30px}.stroke-heading p{font-size:11px}.stroke-kicker{font-size:9px;letter-spacing:.09em}.stroke-emblem{min-width:63px}.stroke-emblem span{font-size:46px}.stroke-emblem small{font-size:8px}.stroke-headbar{gap:6px;padding:9px 7px}.stroke-levelbox,.stroke-stat{padding:8px 6px}.stroke-levelbox small,.stroke-stat small{font-size:8px}.stroke-levelbox strong,.stroke-stat strong{font-size:14px}.stroke-levelpicker{font-size:10px;padding:8px 6px}.stroke-main{padding:7px;gap:9px}.stroke-field{padding:10px 7px;border-radius:15px}.stroke-board-halo{padding:5px;border-radius:15px}.stroke-board{padding:5px;gap:4px;border-radius:12px}.stroke-cell{border-width:1px;border-radius:7px}.stroke-start-sign,.stroke-end-sign,.stroke-rune-sign{font-size:clamp(16px,5vw,24px)}.stroke-notice{font-size:11px}.stroke-task{padding:13px 14px}.stroke-task h2{font-size:19px;margin:7px 0}.stroke-task p{font-size:11px;margin:6px 0}.stroke-buttons button{min-height:48px;font-size:11px}.stroke-rules{padding:12px}.stroke-bottom{padding:10px}.stroke-picker-grid{grid-template-columns:repeat(5,1fr)}}
@media(prefers-reduced-motion:reduce){.stroke-emblem span,.stroke-win-icon,.stroke-cell.hint,.stroke-board.stroke-shake,.stroke-confetti{animation:none!important}.stroke-progress-track span{transition:none}}

.stroke-field>.stroke-buttons{width:min(100%,540px);margin:12px auto 0}
@media(max-width:500px){.stroke-field>.stroke-buttons{margin:9px auto 0}.stroke-field>.stroke-buttons button{min-height:44px}}

/* v6.0: mobile paint optimizations (no layout or filter repaint per tile). */
.stroke-cell.visited:not(.start):not(.end):not(.rune)::before{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:#ffffffb8;font-size:13px;pointer-events:none;z-index:2}
.stroke-trace-line{filter:none;opacity:.78}
.stroke-cell.visited{box-shadow:inset 0 1px 5px #fff7,0 0 5px #ff80d136}
.stroke-cell.head{box-shadow:0 0 10px 2px var(--stroke-three)}
.stroke-board{contain:layout style paint}
@media (max-width:790px){
 .stroke-cell{box-shadow:inset 0 1px 3px #ffffff23,inset 0 -3px #121d4f}
 .stroke-cell.visited{box-shadow:inset 0 1px 4px #fff6}
 .stroke-cell.head{box-shadow:0 0 7px 2px var(--stroke-three)}
 .stroke-board-halo{box-shadow:0 4px 16px #0005}
 .stroke-emblem span{filter:none}
}