:root{--ink: #eaf2ff;--ink-dim: #a8b6d8;--deep: #070a1c;--deep-2: #0d1230;--panel: rgba(16, 22, 52, .86);--panel-solid: #131a3d;--line: rgba(140, 170, 255, .22);--teal: #35e0d0;--teal-dark: #128a92;--pink: #ff4d9d;--gold: #ffc94d;--danger: #ff5f6d;--radius: 16px;--radius-sm: 10px;--shadow: 0 10px 30px rgba(0, 0, 0, .45);--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--deep);color:var(--ink);font-family:var(--font);overscroll-behavior:none;touch-action:manipulation}#app{position:fixed;inset:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 10px);overflow:hidden}.screen.is-active{display:flex}.bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}.bg-home{background-image:url(images/bg_cavern.jpg)}.bg-map{background-image:url(images/bg_map.jpg)}.bg-game{background-image:url(images/bg_cavern.jpg)}.bg-layer:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#070a1c59,#070a1cdb 78%)}.btn{appearance:none;border:1px solid var(--line);background:#ffffff0f;color:var(--ink);font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.4px;padding:12px 20px;border-radius:var(--radius-sm);cursor:pointer;transition:transform .12s ease,background .18s ease,box-shadow .18s ease;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:active{transform:scale(.96)}.btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.btn-primary{background:linear-gradient(180deg,#4ff0dd,#17a8b4);border-color:#7ff5ea;color:#04202a;box-shadow:0 6px #0b6b78,0 10px 22px #17a8b466}.btn-primary:active{box-shadow:0 2px #0b6b78;transform:translateY(3px) scale(.99)}.btn-ghost{background:#ffffff12}.btn-ghost:hover{background:#ffffff21}.btn-danger{background:#ff5f6d29;border-color:#ff5f6d80;color:#ffc3c8}.btn-lg{font-size:19px;padding:16px 34px;min-height:58px;border-radius:14px}.btn[disabled]{opacity:.45;pointer-events:none}.icon-btn{appearance:none;border:1px solid var(--line);background:#ffffff12;color:var(--ink);width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}.icon-btn svg{width:22px;height:22px}.icon-btn:active{transform:scale(.94)}.icon-btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.home-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center;padding:10px}.logo{display:flex;flex-direction:column;align-items:center;gap:4px}.logo-gem{width:clamp(84px,24vw,130px);height:clamp(84px,24vw,130px);filter:drop-shadow(0 8px 22px rgba(53,224,208,.5));animation:floaty 3.6s ease-in-out infinite}@keyframes floaty{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}.logo-title{margin:6px 0 0;font-size:clamp(30px,9.5vw,52px);line-height:.98;letter-spacing:2px;font-weight:900;color:#fff;text-shadow:0 3px 0 #0b6b78,0 6px 18px rgba(0,0,0,.6)}.logo-title span{display:block;color:var(--teal);text-shadow:0 3px 0 #0b3f52,0 6px 18px rgba(0,0,0,.6)}.logo-sub{margin:8px 0 0;font-size:clamp(11px,3.4vw,15px);letter-spacing:6px;color:var(--gold);font-weight:700}.home-actions{display:flex;flex-direction:column;gap:12px;width:min(320px,84vw)}.home-row{display:flex;gap:10px}.home-row .btn{flex:1;font-size:13px;padding:11px 8px}.home-foot{position:relative;z-index:1;margin:0;font-size:11px;color:var(--ink-dim);text-align:center}.topbar{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:4px 2px 10px}.topbar-title{flex:1;margin:0;font-size:19px;letter-spacing:1.4px;text-transform:uppercase;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}.star-pill{display:inline-flex;align-items:center;gap:6px;background:#0000006b;border:1px solid var(--line);padding:7px 13px;border-radius:999px;font-weight:800;font-size:14px}.star-pill svg{width:17px;height:17px;color:var(--gold)}.level-scroll{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:4px 2px 24px}.level-grid{display:flex;flex-direction:column;gap:14px;max-width:720px;margin:0 auto}.level-card{position:relative;appearance:none;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:12px 6px 10px;color:var(--ink);font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:104px;transition:transform .14s ease,box-shadow .2s ease;box-shadow:0 4px 14px #00000059}.level-card:active{transform:scale(.95)}.level-card:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.level-card.is-locked{opacity:.5;cursor:not-allowed}.level-card.is-current{border-color:var(--teal);box-shadow:0 0 0 2px #35e0d059,0 8px 22px #35e0d047}.level-num{font-size:22px;font-weight:900;color:#fff;line-height:1}.level-name{font-size:10px;color:var(--ink-dim);text-align:center;line-height:1.2;min-height:24px}.level-stars{display:flex;gap:2px}.level-stars svg{width:13px;height:13px;color:#fff3}.level-stars svg.on{color:var(--gold)}.level-lock{position:absolute;top:8px;right:8px;width:15px;height:15px;color:var(--ink-dim)}.hud{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:2px 2px 8px}.hud-left{flex:1;min-width:0}.hud-level{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal);font-weight:800}.hud-level-name{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-moves{display:flex;flex-direction:column;align-items:center;background:#00000073;border:1px solid var(--line);border-radius:14px;padding:5px 16px;min-width:78px}.hud-moves-num{font-size:24px;font-weight:900;line-height:1;color:#fff}.hud-moves-label{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-dim)}.hud-moves.is-low .hud-moves-num{color:var(--danger);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.14)}}.hud-right{flex:1;text-align:right;min-width:0}.hud-score-label{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-dim)}.hud-score{font-size:20px;font-weight:900;color:var(--gold);line-height:1.1}.objective-bar{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;padding:0 2px 8px}.obj-chip{display:inline-flex;align-items:center;gap:7px;background:#0000006b;border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px;font-size:12px;font-weight:700}.obj-chip.is-done{border-color:var(--teal);background:#35e0d029}.obj-chip.is-done .obj-text{color:var(--teal)}.obj-icon{width:22px;height:22px;flex:0 0 auto}.obj-text{white-space:nowrap}.board-area{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}.board-wrap{position:relative;border-radius:20px;background:#06091a9e;border:1px solid rgba(140,170,255,.2);box-shadow:inset 0 0 40px #0009,0 12px 34px #00000080;padding:6px;touch-action:none}#board-canvas{display:block;border-radius:14px;touch-action:none;cursor:pointer}#board-canvas:focus-visible{outline:3px solid var(--teal);outline-offset:3px}.combo-banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.6);font-size:clamp(22px,7vw,40px);font-weight:900;letter-spacing:2px;color:#fff;text-shadow:0 3px 0 #b03a72,0 0 26px rgba(255,77,157,.9);opacity:0;pointer-events:none;white-space:nowrap}.combo-banner.show{animation:comboPop .95s cubic-bezier(.2,1.4,.4,1) forwards}@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-6deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(2deg)}70%{opacity:1;transform:translate(-50%,-58%) scale(1) rotate(0)}to{opacity:0;transform:translate(-50%,-78%) scale(.94)}}.game-controls{position:relative;z-index:2;display:flex;gap:8px;justify-content:center;padding:10px 2px 2px}.ctrl-btn{appearance:none;border:1px solid var(--line);background:#ffffff12;color:var(--ink);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;border-radius:13px;padding:8px 14px;display:inline-flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;min-width:74px;min-height:52px}.ctrl-btn svg{width:20px;height:20px}.ctrl-btn:active{transform:scale(.94);background:#ffffff24}.ctrl-btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.ctrl-btn[disabled]{opacity:.4;pointer-events:none}.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#040612c7;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);animation:fadeIn .18s ease}.modal[hidden]{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-card{width:min(400px,100%);max-height:100%;overflow-y:auto;background:linear-gradient(180deg,#1a2350,#101637);border:1px solid rgba(140,170,255,.3);border-radius:20px;padding:22px 20px;box-shadow:var(--shadow);animation:cardIn .26s cubic-bezier(.2,1.3,.4,1);text-align:center}.modal-card-wide{width:min(480px,100%)}@keyframes cardIn{0%{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}.modal-title{margin:0 0 14px;font-size:23px;letter-spacing:1.2px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}.modal-text{margin:0 0 14px;font-size:14px;color:var(--ink-dim)}.modal-actions{display:flex;flex-direction:column;gap:9px;margin-top:16px}.modal-actions .btn{width:100%}.stars-row{display:flex;justify-content:center;gap:10px;margin:6px 0 16px}.stars-row svg{width:46px;height:46px;color:#ffffff29}.stars-row svg.on{color:var(--gold);filter:drop-shadow(0 0 12px rgba(255,201,77,.8));animation:starPop .5s cubic-bezier(.2,1.6,.4,1) backwards}.stars-row svg.on:nth-child(1){animation-delay:.05s}.stars-row svg.on:nth-child(2){animation-delay:.2s}.stars-row svg.on:nth-child(3){animation-delay:.35s}@keyframes starPop{0%{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}.result-rows{display:flex;flex-direction:column;gap:7px}.result-row{display:flex;justify-content:space-between;align-items:center;background:#0000004d;border-radius:10px;padding:9px 14px;font-size:14px;color:var(--ink-dim)}.result-row strong{color:#fff;font-size:16px}.setting-list{display:flex;flex-direction:column;gap:4px;text-align:left}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;font-size:15px;font-weight:600;border-bottom:1px solid rgba(140,170,255,.12);cursor:pointer}.setting-row:last-child{border-bottom:0}.switch{appearance:none;width:50px;height:28px;flex:0 0 auto;background:#ffffff29;border-radius:999px;position:relative;cursor:pointer;transition:background .2s ease;border:1px solid var(--line)}.switch:after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s cubic-bezier(.3,1.4,.5,1)}.switch:checked{background:var(--teal-dark);border-color:var(--teal)}.switch:checked:after{transform:translate(22px)}.switch:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.help-body{text-align:left;font-size:14px;line-height:1.55;color:var(--ink-dim)}.help-body p{margin:0 0 10px}.help-body strong{color:var(--ink)}.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 84px);transform:translate(-50%) translateY(14px);background:#0a0e24f2;border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;padding:11px 20px;border-radius:999px;z-index:80;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;max-width:88vw;text-align:center;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.loading{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--deep);transition:opacity .4s ease}.loading.hide{opacity:0;pointer-events:none}.loading p{margin:0;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim)}.loading-gem{width:54px;height:54px;background:linear-gradient(135deg,#7ff5ea,#17a8b4);clip-path:polygon(50% 0%,100% 35%,82% 100%,18% 100%,0% 35%);animation:spinGem 1.5s ease-in-out infinite;box-shadow:0 0 30px #35e0d099}@keyframes spinGem{0%,to{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.82)}}.save-io{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.save-io-btns{display:flex;gap:8px}
.save-io-btns .btn{flex:1;font-size:12px;padding:9px 8px}
.save-code{width:100%;background:#101637;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font:12px/1.4 monospace;padding:8px;resize:vertical;min-height:56px}
.world-scroll{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:4px 2px 24px}
.world-scene{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 26px #00000073;background:#0c1327}
.world-svg{display:block;width:100%;height:auto}
.wf-layer{opacity:.14;filter:grayscale(1);transition:opacity .8s ease,filter .8s ease}
.wf-layer.restored{opacity:1;filter:none}
.world-progress{margin:14px 2px 4px;max-width:720px;margin-left:auto;margin-right:auto}
.world-progress-bar{height:12px;border-radius:999px;background:#101637;border:1px solid var(--line);overflow:hidden}
#world-progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#17a8b4,#7ff5ea);transition:width .8s ease}
.world-progress-text{margin:8px 2px 0;font-size:12px;color:var(--ink-dim);font-weight:700}
.world-note{margin:6px 2px 2px;font-size:11px;color:var(--ink-dim);max-width:720px;margin-left:auto;margin-right:auto}
.world-stories{display:flex;flex-direction:column;gap:10px;margin-top:12px;max-width:720px;margin-left:auto;margin-right:auto}
.world-story{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.world-story.is-done{border-color:#35e0d066}
.world-story-title{margin:0 0 6px;font-size:14px;color:#fff;letter-spacing:.6px}
.world-story-text{margin:0;font-size:13px;line-height:1.5;color:var(--ink-dim)}
.world-story-req{margin:0;font-size:12px;color:var(--ink-dim);font-style:italic}
.world-new{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:var(--teal);color:#04202a;border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:6px}
@media(min-width:700px){.screen{padding-left:calc(var(--safe-l) + 24px);padding-right:calc(var(--safe-r) + 24px)}.hud,.objective-bar,.game-controls,.topbar{max-width:720px;width:100%;margin-left:auto;margin-right:auto}.region-levels{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.modal-actions{flex-direction:row;flex-wrap:wrap}.modal-actions .btn{flex:1 1 44%}}@media(min-width:1024px){.hud,.objective-bar,.game-controls,.topbar{max-width:640px}}@media(max-height:620px){.logo-gem{width:66px;height:66px}.home-inner{gap:14px}.ctrl-btn{min-height:44px;padding:6px 10px}.hud-moves-num{font-size:20px}}body.reduced-motion *,body.reduced-motion *:before,body.reduced-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* ---- Relic vault ---- */
.relic-list{display:flex;flex-direction:column;gap:10px;padding:2px 2px 4px;max-width:720px;margin-left:auto;margin-right:auto}
.relic-card{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:12px;box-shadow:0 4px 14px #00000059}
.relic-card.is-owned{background:#12294acc;border-color:#35e0d059}
.relic-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.relic-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;text-align:left}
.relic-name{font-weight:800;color:#eaf6ff;font-size:1rem}
.relic-when{font-size:.76rem;color:var(--gold);letter-spacing:.3px}
.relic-text{font-size:.85rem;color:#c9d9f2;line-height:1.45}
.relic-card:not(.is-owned) .relic-name{color:#93a7c9}
.relic-card:not(.is-owned) .relic-when{color:#8fa3c8}

/* ---- Accessibility: global focus visibility ---- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,canvas:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* ---- Story modal ---- */
.story-portrait{display:flex;align-items:center;justify-content:center;min-height:54px}
.story-portrait-dot{width:34px;height:34px;border-radius:50%;display:inline-block;box-shadow:0 0 12px rgba(255,255,255,.3)}
.story-speaker{font-weight:800;color:var(--gold);letter-spacing:.4px;margin:4px 0 2px;font-size:.95rem}
.story-text{font-size:.92rem;color:#c9d9f2;line-height:1.5;margin:0}

/* ---- UI polish pass ---- */
.home-progress{display:inline-flex;align-items:center;gap:12px;background:#00000073;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:13px;font-weight:700;color:var(--ink-dim)}
.home-progress strong{color:#fff;font-size:15px}
.hp-stars{display:inline-flex;align-items:center;gap:5px}
.hp-stars svg{width:14px;height:14px;color:var(--gold);vertical-align:-2px}
.hp-sep{width:1px;height:14px;background:var(--line)}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-grid .btn{min-height:50px;font-size:14px;padding:11px 10px}
.btn-play{position:relative;overflow:hidden;font-size:21px;letter-spacing:1.2px;min-height:62px;box-shadow:0 8px #0b6b78,0 14px 30px #17a8b466}
.btn-play:after{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(105deg,transparent,#ffffff2e,transparent);animation:playShine 3.4s ease-in-out infinite}
@keyframes playShine{0%,55%{left:-80%}100%{left:150%}}
.region-block{border-radius:var(--radius)}
.region-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 14px;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;background:#0000008c;position:relative}
.region-head:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--region-accent,#35e0d0);border-radius:var(--radius) 0 0 var(--radius)}
.region-name{font-size:15px;font-weight:900;letter-spacing:1.2px;color:#fff;text-transform:uppercase}
.region-range{font-size:11px;font-weight:700;color:var(--ink-dim);letter-spacing:.6px}
.region-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);background:#070a1c80;padding:12px}
.level-card.is-current{animation:currentGlow 2.4s ease-in-out infinite}
@keyframes currentGlow{0%,100%{box-shadow:0 0 0 2px #35e0d059,0 8px 22px #35e0d047}50%{box-shadow:0 0 0 3px #35e0d09c,0 10px 26px #35e0d080}}
.level-card.is-perfected{border-color:#ffc94d80}
.level-badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase;background:var(--teal);color:#04202a;border-radius:999px;padding:2px 7px}
.level-stars svg{width:14px;height:14px}
.hud-pause{margin-left:2px}
.hud-moves-num,.hud-score{text-shadow:0 2px 6px rgba(0,0,0,.55)}
.obj-chip{flex-wrap:wrap;padding:5px 12px 6px 6px}
.obj-meter{flex:1 0 100%;display:block;height:4px;border-radius:999px;background:#ffffff1f;margin:4px 2px 0;overflow:hidden}
.obj-meter-fill{display:block;height:100%;border-radius:999px;background:var(--teal);transition:width .3s ease}
.obj-chip.is-done .obj-meter-fill{background:var(--gold)}
.new-best{display:inline-block;margin:2px auto 10px;padding:4px 14px;border-radius:999px;background:linear-gradient(180deg,#ffd98a,#ffb347);color:#3d2500;font-weight:900;letter-spacing:1.2px;font-size:12px;text-transform:uppercase;box-shadow:0 4px 14px #ffb34766}
.new-best[hidden]{display:none}
@media(max-height:700px){.home-inner{gap:16px}.logo-gem{width:clamp(70px,20vw,96px);height:clamp(70px,20vw,96px)}.btn-play{min-height:54px;font-size:18px}.home-grid .btn{min-height:44px}}
@media(max-height:560px){.home-progress{padding:5px 12px;font-size:12px}.home-foot{display:none}}