@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');
:root{font-family:Nunito,system-ui,sans-serif;color:#fff8f1;background:#10152e}
*{box-sizing:border-box}
body{min-width:320px;margin:0}
button{font:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.44}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ffe797;outline-offset:3px}
.world{min-height:100svh;display:flex;flex-direction:column;background:linear-gradient(180deg,#0b1134b8 0%,#10153063 36%,#0d112cbe 100%),url('./assets/pixel-world.jpg') center/cover fixed}
.topbar{width:min(1080px,100%);margin:0 auto;padding:10px 18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.back{color:#eef2ff;text-decoration:none;font-size:14px;font-weight:900;text-shadow:0 2px 8px #080d2c}
.back:first-letter{font-size:23px}
.brand{display:flex;align-items:center;gap:5px;min-width:0}
.brand-mark{width:42px;height:42px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 4px #0008)}
.brand h1{margin:0;font-size:clamp(19px,2.5vw,26px);line-height:1;letter-spacing:-.04em;white-space:nowrap;text-shadow:0 2px 0 #0b123b}
.brand small{display:block;margin-top:2px;color:#b8f2ee;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.top-actions{display:flex;justify-content:flex-end;gap:7px}
.top-actions button{width:39px;height:39px;display:grid;place-items:center;padding:0;border:1px solid #b3b8ed;border-radius:11px;background:linear-gradient(#475a9d,#28396f);color:#fff;font-size:21px;line-height:1;font-weight:900;box-shadow:0 4px 0 #131a42,inset 0 1px #ffffff67}
.top-actions button:hover{filter:brightness(1.15)}
.game-shell{width:min(1020px,100%);margin:auto;display:flex;flex-direction:column;align-items:center;padding:0 12px 5px}
.game-stage{position:relative;isolation:isolate;width:min(650px,100%);padding:11px 18px 16px;border:3px solid #9eadd8;border-radius:23px;background:linear-gradient(155deg,#27376ddf,#182555f1 64%,#283467ed);box-shadow:0 7px 0 #101638,0 13px 0 #080e2c,0 24px 58px #02051ca8,inset 0 2px #e5eeff6a;overflow:hidden}
.game-stage:before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 3% 4%,#9edff944 0 2px,transparent 3px),radial-gradient(circle at 93% 8%,#ffe4aa55 0 2px,transparent 3px),radial-gradient(circle at 88% 39%,#b995ff3b 0 2px,transparent 3px),radial-gradient(circle at 11% 78%,#a5f4e746 0 2px,transparent 3px),radial-gradient(ellipse at 50% 36%,#5462aa48,transparent 70%);pointer-events:none}
.stage-heading{display:grid;grid-template-columns:105px minmax(0,1fr) 70px;align-items:center;gap:8px;text-align:center}
.level-badge,.level-size{font-size:11px;font-weight:900;letter-spacing:.05em}
.level-badge{color:#fff4d0;padding:7px 3px;border:1px solid #d5baff;border-radius:8px;background:linear-gradient(#6559aa,#3b407d);box-shadow:0 3px #1a2251}
.level-size{color:#d8edff}
.mystery span{display:block;color:#85e7e0;font-size:10px;line-height:1.2;text-transform:uppercase;font-weight:900;letter-spacing:.16em}
.mystery h2{margin:2px 0 0;font-size:20px;line-height:1.05;text-shadow:0 2px #101744}
.hud{width:min(390px,100%);margin:9px auto 7px;display:flex;justify-content:center;gap:5px;text-align:center}
.hud>div{min-width:95px;padding:4px 12px;border:1px solid #8698c55e;border-radius:8px;background:#101a42a8;box-shadow:inset 0 1px #bde3ff16}
.hud small{display:block;color:#b9caf1;font-size:9px;font-weight:900;letter-spacing:.14em}
.hud strong{font-size:16px;line-height:1.18}
.hud-heart strong{color:#ffa4ae;letter-spacing:.08em}
.progress-track{width:min(390px,100%);height:6px;margin:auto;border:1px solid #8494c1;border-radius:8px;background:#101735;overflow:hidden}
.progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#62dfcf,#ffe394);box-shadow:0 0 12px #91f8e3;transition:width .24s ease}
.board-lead{margin:6px 0 7px;text-align:center;color:#d0dcf7;font-size:11px;font-weight:900;letter-spacing:.04em}
.puzzle-wrap{display:flex;justify-content:center;align-items:center;min-height:0;margin:auto}
.puzzle{--cell:42px;--n:5;--clue-n:2;display:grid;grid-template-columns:calc(var(--cell)*var(--clue-n)) repeat(var(--n),var(--cell));grid-template-rows:calc(var(--cell)*var(--clue-n)) repeat(var(--n),var(--cell));padding:7px;border:3px solid #a7b9df;border-radius:14px;background:linear-gradient(#1a2854,#111a3e);box-shadow:0 6px 0 #0b1232,0 12px 27px #0008,inset 0 0 0 2px #456da2;touch-action:manipulation}
.corner{display:flex;align-items:center;justify-content:center;color:#8deee1;font-size:23px;text-shadow:0 0 12px #65d6dc}
.clue{display:flex;align-items:center;justify-content:center;gap:3px;color:#fff2d0;font-size:calc(var(--cell)*.33);font-weight:900;text-shadow:0 2px #172046;line-height:1}
.clue.col{flex-direction:column}
.clue.row{gap:6px}
.clue.done{color:#81f3d5}
.cell{width:var(--cell);height:var(--cell);padding:0;display:grid;place-items:center;position:relative;border:1px solid #b8c6d6;border-radius:2px;background:linear-gradient(145deg,#fff9eb,#e8e6dc);box-shadow:inset 0 2px #fff,inset 0 -2px #c4cdd3;transition:background .13s,filter .13s,transform .13s,box-shadow .13s;touch-action:manipulation}
.cell:hover,.cell:focus-visible{z-index:2;outline:2px solid #ffe7a0;outline-offset:-2px;filter:brightness(1.06)}
.cell.filled{border-color:#2797ad;background:linear-gradient(145deg,#a4fff0 5%,#55d9d1 40%,#289ac0);box-shadow:inset 2px 2px #eafffa,inset -3px -3px #1d739e,0 1px 5px #1b5180;animation:tile-pop .18s ease-out}
.cell.cross:after{content:'×';color:#897c99;font-size:calc(var(--cell)*.54);line-height:1}
.cell.wrong{background:#ff697e!important;animation:shake .24s 2}
.cell.revealed{background:#ffe39a}
.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0 8px}
.tool,.action-row button{border:1px solid #93a8d5;color:#f3f4ff;background:linear-gradient(#445a9a,#293c76);border-radius:11px;box-shadow:0 4px 0 #121b47,inset 0 1px #e7f0ff55;font-weight:900;transition:filter .15s,transform .12s,box-shadow .12s}
.tool:hover:not(:disabled),.action-row button:hover:not(:disabled){filter:brightness(1.16)}
.tool{position:relative;min-height:54px;display:grid;grid-template-columns:30px max-content;align-items:center;justify-content:center;column-gap:5px;padding:3px 6px;font-size:14px}
.tool.selected{border-color:#ffe0aa;color:#fff5d2;background:linear-gradient(#936cc3,#594d9c);box-shadow:0 4px 0 #382b72,0 0 16px #c6a5ff60,inset 0 1px #fff9}
.tool-icon{width:30px;height:30px;display:block;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 2px #111943)}
.tool>span{text-align:left}
.tool kbd{position:absolute;right:7px;top:5px;font-size:10px;color:#e2e4ff;border:1px solid #bec5ec88;border-radius:4px;padding:0 3px}
.tool:active,.action-row button:active,.top-actions button:active{transform:translateY(3px);box-shadow:none}
.action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.action-row button{min-height:44px;display:grid;grid-template-columns:28px max-content;align-items:center;justify-content:center;column-gap:5px;padding:3px 6px;font-size:13px}
.action-row button img{width:28px;height:28px;display:block;object-fit:contain;image-rendering:pixelated}
.action-row button span{text-align:left}
.action-row button:disabled{opacity:.67}
.action-row #hintBtn{border-color:#ffe1a0;background:linear-gradient(#b88759,#855d65);box-shadow:0 4px 0 #59415a,inset 0 1px #fff8}
.below{width:min(650px,100%);display:flex;align-items:start;gap:9px;margin-top:20px}
.level-drawer{flex:1;border:1px solid #92a9dc;border-radius:10px;background:#172557e9;color:#edf1ff;box-shadow:0 4px #0c1435}
.level-drawer summary{min-height:41px;padding:9px 14px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:900;cursor:pointer;list-style:none}
.level-drawer summary::-webkit-details-marker{display:none}
.level-drawer em{margin-left:6px;color:#92eee0;font-style:normal}
.level-list{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;padding:4px 10px 12px}
.level-button{height:31px;border:1px solid #8197ca;border-radius:6px;background:#344777;color:#fff;font-size:12px;font-weight:900}
.level-button.current{background:#79ddd7;color:#142851}
.level-button.done{background:#b49ae6;color:#1d2850}
.level-button.locked{opacity:.5}
.help-btn{min-height:41px;padding:0 12px;border:1px solid #92a9dc;border-radius:10px;background:#172557e9;color:#edf1ff;font-size:13px;font-weight:900;box-shadow:0 4px #0c1435}
footer{text-align:center;color:#bbc7eb;font-size:11px;font-weight:900;letter-spacing:.08em;padding:15px;text-shadow:0 2px 5px #111731}
.toast{position:fixed;left:50%;bottom:24px;z-index:30;max-width:92vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:9px 15px;border:2px solid #fbd17c;border-radius:10px;background:#fff1c7;color:#1d2b4f;font-size:13px;font-weight:900;opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:opacity .15s,transform .15s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.overlay{position:fixed;inset:0;z-index:40;display:none;place-items:center;padding:16px;background:#090f28cc}
.overlay.show{display:grid}
.modal{width:min(390px,100%);padding:22px;border:2px solid #bfc7ef;border-radius:18px;background:linear-gradient(#36467f,#1d2c60);text-align:center;box-shadow:0 10px 0 #0b143b,0 25px 65px #000a}
.modal-art{min-height:74px;display:flex;justify-content:center;align-items:center;color:#92ecdc;font-size:52px;font-weight:900}
.pixel-preview{display:grid;gap:2px;padding:5px;border:2px solid #99b9d8;background:#121d48;image-rendering:pixelated}
.pixel-preview i{width:11px;height:11px;background:#2c3a68}
.pixel-preview i.on{background:#7de2da}
.modal h2{margin:10px 0;font-size:25px}
.modal p{line-height:1.45;color:#e1e8ff;font-size:14px}
.modal-actions{display:flex;gap:8px;margin-top:18px}
.modal-actions button,.pause-dialog button{flex:1;min-height:43px;border:1px solid #b6c6f7;border-radius:9px;background:#40558f;color:#fff;font-weight:900}
.modal-actions button:last-child,.pause-dialog button{border-color:#a4fff2;background:#73d5cf;color:#162d57}
.pause-dialog{position:fixed;inset:0;margin:auto;width:min(330px,calc(100vw - 30px));padding:21px;border:2px solid #9ec5de;border-radius:17px;background:#263969;color:#fff;text-align:center;box-shadow:0 25px 80px #000b}
.pause-dialog::backdrop{background:#090f28c9}
.pause-dialog img{width:100px;height:100px;object-fit:contain;object-position:center}
.pause-dialog h2{margin:2px 0}
.pause-dialog p{margin:4px 0 15px;color:#c8d9ed}
.pause-dialog button{width:100%}
[data-berfin-nida-pause]{display:none!important}
@keyframes tile-pop{from{transform:scale(.76)}to{transform:scale(1)}}
@keyframes shake{25%{transform:translateX(3px)}75%{transform:translateX(-3px)}}
@media(max-width:620px){
 .world{background-attachment:scroll}
 .topbar{padding:8px 10px;gap:3px}
 .back span{display:none}
 .brand-mark{width:32px;height:32px}
 .brand h1{font-size:18px}
 .brand small{font-size:8px}
 .top-actions{gap:4px}
 .top-actions button{width:35px;height:35px;font-size:19px}
 .game-shell{padding:0 6px 5px}
 .game-stage{padding:9px 7px 12px;border-radius:15px}
 .stage-heading{grid-template-columns:70px 1fr 49px;gap:3px}
 .level-badge,.level-size{font-size:10px}
 .mystery h2{font-size:17px}
 .hud{gap:3px;margin:7px auto 6px}
 .hud>div{min-width:0;flex:1;padding:3px 4px}
 .hud strong{font-size:14px}
 .tool-row{gap:4px;margin:9px 0 6px}
 .tool{min-height:46px;grid-template-columns:27px max-content;column-gap:3px;font-size:12px}
 .tool-icon{width:27px;height:27px}
 .tool kbd{display:none}
 .action-row{gap:4px}
 .action-row button{min-height:41px;grid-template-columns:25px max-content;column-gap:3px;font-size:11px}
 .action-row button img{width:25px;height:25px}
 .below{margin-top:16px}
 .level-list{grid-template-columns:repeat(5,1fr)}
}
@media(max-height:760px) and (min-width:621px){.topbar{padding-block:6px}.game-stage{padding-block:8px}.hud{margin:5px auto}.tool-row{margin:8px 0 5px}.tool{min-height:46px}.action-row button{min-height:38px}.below{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}