:root{--gold:#f4c04e;--gold2:#e08a1e;--red:#c0392b;--ink:#2d2118;--paper:#fffaf0;--glass:rgba(16,40,30,.55)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:"Nunito","Segoe UI",system-ui,Roboto,sans-serif;color:#fff;background:#123326}
button{font-family:inherit}
#bg{position:fixed;inset:0;background:center/cover no-repeat;transition:background-image .5s;filter:saturate(1.1)}
#shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(8,28,20,.25),rgba(8,24,18,.55) 45%,rgba(6,18,14,.85))}
#app{position:relative;height:100%;max-width:520px;margin:0 auto}
.screen{display:none;flex-direction:column;align-items:center;height:100%;padding:calc(10px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom))}
.screen.on{display:flex;animation:fadein .35s}
#scrHome{overflow-y:auto;-webkit-overflow-scrolling:touch}
#scrHome>*{flex-shrink:0}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}
.hbar,.gbar{display:flex;width:100%;align-items:center;gap:10px}
.sp{flex:1}
.ib{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:var(--glass);backdrop-filter:blur(8px);color:#fff;font-size:22px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.coins{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 6px;border-radius:20px;background:var(--glass);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);font-weight:800;font-size:16px}
.coins i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#f4c04e 45%,#c8820f);box-shadow:inset 0 -2px 0 #a8650a}
.coins.bump{animation:bump .5s}@keyframes bump{40%{transform:scale(1.18)}}
.gt{flex:1;text-align:center;line-height:1.15}
.gt b{display:block;font-size:17px;text-shadow:0 1px 4px #0008}
.gt small{font-size:12.5px;opacity:.85;font-weight:700;letter-spacing:.3px}
/* HOME */
.logo{text-align:center;margin:2.5vh 0 2vh}
.logo h1{font-size:44px;margin:6px 0 2px;font-weight:900;letter-spacing:.5px;text-shadow:0 4px 14px rgba(0,0,0,.55)}
.logo h1 span{color:var(--gold)}
.logo p{margin:0 0 6px;opacity:.92;font-weight:600}
.orn{height:16px;width:230px;margin:0 auto;background:none}
.playcard{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;border-radius:22px;cursor:pointer;color:#3a1d00;
 background:linear-gradient(180deg,#ffd76a,#f0a530);box-shadow:0 6px 0 #b46a12,0 12px 24px rgba(0,0,0,.35);text-align:left;transition:transform .1s}
.playcard:active{transform:translateY(4px);box-shadow:0 2px 0 #b46a12}
.pc-ic{font-size:30px;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center}
.pc-t{flex:1}.pc-t b{display:block;font-size:24px;font-weight:900}.pc-t small{font-size:14px;font-weight:700;opacity:.8}
.pc-go{width:44px;height:44px;border-radius:50%;background:#3a1d00;color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:18px}
.sect{align-self:flex-start;margin:22px 4px 10px;font-weight:900;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;opacity:.8}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.th{position:relative;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 10px 14px;min-height:66px;border-radius:18px;border:1px solid rgba(255,255,255,.18);
 background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.06));backdrop-filter:blur(10px);color:#fff;cursor:pointer;text-align:left;box-shadow:0 6px 16px rgba(0,0,0,.25);overflow:hidden}
.th .ic{grid-row:1/3;font-size:22px;width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--tc);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.th b{font-size:14.5px;line-height:1.1;align-self:end}.th small{font-size:11.5px;opacity:.8;font-weight:700;align-self:start}
.th .bar{position:absolute;left:12px;right:12px;bottom:7px;height:4px;border-radius:3px;background:rgba(255,255,255,.18)}
.th .bar i{display:block;height:100%;border-radius:3px;background:var(--gold)}
.th.lock{filter:grayscale(.7);opacity:.6}.th.lock::after{content:'🔒';position:absolute;right:8px;top:7px;font-size:12px}
.th.now{border-color:var(--gold);box-shadow:0 0 0 2px rgba(244,192,78,.55),0 6px 16px rgba(0,0,0,.25)}
.link{margin-top:16px;background:none;border:0;color:#fff;opacity:.85;font-weight:800;font-size:15px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.brand{margin-top:auto;opacity:.55;font-size:12px;font-weight:700;letter-spacing:.5px}
/* GAME */
.prog{position:relative;width:100%;height:8px;border-radius:5px;background:rgba(255,255,255,.18);margin:12px 0 4px}
.prog div{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),#ffe08a);transition:width .4s}
.prog span{position:absolute;right:0;top:11px;font-size:11.5px;font-weight:800;opacity:.85}
.curwrap{height:44px;display:flex;align-items:center;justify-content:center;margin:6px 0 4px}
.cur{padding:6px 18px;border-radius:14px;font-size:22px;font-weight:900;letter-spacing:3px;background:var(--paper);color:var(--ink);box-shadow:0 6px 16px rgba(0,0,0,.3);transform:scale(.6);opacity:0;transition:.15s}
.cur.on{transform:scale(1);opacity:1}
.cur.bad{background:#ffd9d4;animation:sh .3s}.cur.good{background:#d6f5d6}
.board{position:relative;width:min(92vw,430px);padding:10px;border-radius:26px;background:linear-gradient(180deg,#fffaf0,#f6ead2);
 box-shadow:0 0 0 3px #c0392b,0 0 0 6px #f4c04e,0 18px 40px rgba(0,0,0,.45)}
.board::before,.board::after{content:'';position:absolute;left:24px;right:24px;height:12px;background:none;opacity:.9}
.board::before{top:-17px}.board::after{bottom:-17px}
#grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--gap,6px);touch-action:none;user-select:none;-webkit-user-select:none}
.cell{position:relative;z-index:2;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:28%;background:linear-gradient(180deg,#fff,#fbf3e3);
 color:var(--ink);font-weight:900;font-size:calc(min(92vw,430px)/var(--n)*.44);box-shadow:0 3px 0 #e2cfa6,0 5px 10px rgba(110,80,30,.18);cursor:pointer;transition:transform .12s,background .2s,color .2s}
.cell.sel{background:linear-gradient(180deg,#ffe48a,#f4c04e);transform:scale(1.07);box-shadow:0 3px 0 #c98a1c,0 6px 14px rgba(200,140,30,.4)}
.cell.done{background:var(--wc);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.cell.hint::after{content:'';position:absolute;inset:3px;border-radius:26%;border:3px dashed var(--gold2);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.35}}
.cell.pop{animation:pop .45s both}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.22) rotate(-4deg)}100%{transform:scale(1)}}
#lines{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
#lines polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}
#lines .selline{stroke:rgba(224,138,30,.55)}
#lines .wl{stroke:rgba(255,255,255,.45)}
#lines .dot{fill:#fff}
.board.shake{animation:sh .32s}@keyframes sh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tr{min-height:54px;width:100%;margin-top:18px;display:flex;align-items:center;justify-content:center}
.tr .tc{display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.35);border-left:6px solid var(--wc);animation:rise .3s;max-width:100%}
.tr .tc b{font-size:19px}.tr .tc span{font-size:15px;color:#5d4a38;font-weight:600}
.tr .tc.info{border-left-color:var(--gold2)}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.96)}}
.found{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-content:flex-start;overflow:auto;flex:1;width:100%;padding:6px 0}
.w{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:14px;font-size:13px;font-weight:700;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.75);letter-spacing:2px}
.w.ok{background:rgba(255,250,240,.95);color:var(--ink);letter-spacing:0;border:0}
.w.ok i{width:10px;height:10px;border-radius:50%;background:var(--wc)}
.w.ok em{font-style:normal;color:#7a6650;font-weight:600}
.tools{display:flex;gap:10px;width:100%}
.tb{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:52px;border-radius:18px;border:0;font-size:16px;font-weight:800;cursor:pointer;color:#3a1d00;
 background:linear-gradient(180deg,#ffd76a,#f0a530);box-shadow:0 5px 0 #b46a12,0 10px 18px rgba(0,0,0,.3)}
.tb:active{transform:translateY(3px);box-shadow:0 2px 0 #b46a12}
.tb span{font-size:20px}.tb em{font-style:normal;font-size:13px;background:rgba(58,29,0,.15);padding:2px 8px;border-radius:10px}
.tb.ad{background:linear-gradient(180deg,#7fd1a0,#3f9e69);color:#fff;box-shadow:0 5px 0 #276b45,0 10px 18px rgba(0,0,0,.3)}
/* MODAL / WIN */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,15,10,.6);backdrop-filter:blur(4px);z-index:40}
.modal.on{display:flex}
.card{position:relative;background:var(--paper);color:var(--ink);border-radius:26px;padding:22px 18px 18px;width:min(90vw,390px);max-height:86vh;overflow:auto;text-align:center;box-shadow:0 0 0 4px #f4c04e,0 24px 60px rgba(0,0,0,.5);animation:win .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes win{from{transform:scale(.6);opacity:0}}
.card h2{margin:4px 0;font-size:26px;font-weight:900;color:#a8321f}
.stars{font-size:34px;letter-spacing:4px;animation:pop .7s .2s both}
#winTxt{margin:4px 0 10px;font-weight:700;color:#6b5641}
#winWords{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left;margin:0 0 16px}
#winWords div{padding:6px 9px;border-radius:12px;background:#f5ead4;font-size:13px;border-left:5px solid var(--wc);line-height:1.25}
#winWords b{display:block;font-size:14.5px}
.pri,.ghost{border:0;border-radius:16px;font-weight:900;font-size:16px;padding:12px 20px;cursor:pointer}
.pri{background:linear-gradient(180deg,#ffd76a,#f0a530);color:#3a1d00;box-shadow:0 4px 0 #b46a12}
.pri.big{width:100%;font-size:19px;padding:14px}
.ghost{background:transparent;color:#7a6650}
.burst{position:absolute;inset:0;pointer-events:none;overflow:visible}
.burst i{position:absolute;left:50%;top:40px;width:9px;height:14px;border-radius:2px;animation:conf 1.4s ease-out forwards}
@keyframes conf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
/* TUTORIAL */
.tut{position:fixed;inset:0;z-index:30;display:none;pointer-events:none}
.tut.on{display:block}
#finger{position:fixed;font-size:46px;z-index:31;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));transform:translate(-30%,-10%);opacity:0;transition:opacity .2s}
.tcard{position:fixed;left:50%;transform:translateX(-50%);width:min(92vw,400px);background:var(--paper);color:var(--ink);border-radius:20px;padding:14px 16px 10px;box-shadow:0 0 0 3px #f4c04e,0 16px 40px rgba(0,0,0,.5);pointer-events:auto;animation:rise .3s}
.tcard p{margin:0 0 8px;font-size:15.5px;font-weight:700;line-height:1.35}
.tcard p b{color:#a8321f}
.tbtns{display:flex;justify-content:space-between;align-items:center}
.spot{position:relative;z-index:32;box-shadow:0 0 0 4px #fff,0 0 0 9999px rgba(0,0,0,.55)!important;animation:none}
.adSim{position:fixed;inset:0;background:#000d;display:flex;align-items:center;justify-content:center;z-index:99}
.adSim div{background:#fff;color:#000;padding:20px;border-radius:12px;display:flex;flex-direction:column;gap:6px}
.gi{display:none}
.bonus{position:absolute;left:0;top:11px;font-size:11.5px;font-weight:800;opacity:.6}
.bonus.has{opacity:1;color:var(--gold)}
.winbonus{margin:-4px 0 10px;font-weight:800;color:#b8860b;font-size:14px}
.winbonus:empty{display:none}

.tr .tc .bw{display:flex;flex-direction:column;line-height:1.25;color:inherit}
.tr .tc .bw small{font-size:11.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:#c48a00}
.tr .tc .bw span{font-size:15px;color:inherit}.tr .tc .bw b{font-size:18px}
.gt b{font-size:23px!important;font-weight:900!important;line-height:1.1;letter-spacing:.2px}
.gt small{font-size:13px!important}

/* ===== Visual skin «Тӱр» (light minimal) — the only design ===== */
/* SKIN A — «Тӱр»: светлый минимализм. Кремовая бумага, плоские плитки, тонкая геометрия марийской вышивки. */
:root{--ink:#2b2420;--muted:#8a7c6c;--line:#e4d9c6;--paper:#fbf7ef;--red:#b8412c;--gold:#b8412c}
html,body{background:#f4ede0;color:var(--ink);font-family:"Inter","Segoe UI",system-ui,sans-serif}
#shade{display:none}
.ib,.coins{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:none;backdrop-filter:none;border-radius:12px}
.coins i{width:18px;height:18px;background:var(--red);box-shadow:none;border-radius:4px;transform:rotate(45deg) scale(.8)}
.logo{margin:5vh 0 3vh}
.logo h1{font-family:"Noto Serif","PT Serif",Cambria,serif;font-weight:700;font-size:42px;letter-spacing:0;color:var(--ink);text-shadow:none}
.logo h1 span{color:var(--red);font-style:italic}
.logo p{color:var(--muted);font-weight:500;font-size:14.5px}
.orn{width:160px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 5l5-5 5 5-5 5zM10 5l5-5 5 5-5 5z' fill='none' stroke='%23b8412c' stroke-width='1.2'/%3E%3C/svg%3E") center/auto 100% repeat-x;opacity:.9}
.playcard{background:var(--ink);color:#fbf7ef;border-radius:16px;box-shadow:none;padding:16px 18px}
.playcard:active{transform:scale(.98);box-shadow:none}
.pc-ic{background:rgba(255,255,255,.1);border-radius:12px}
.pc-t b{font-family:"Noto Serif","PT Serif",Cambria,serif;font-weight:700;font-size:23px}.pc-t small{color:#d9cdb9;opacity:1;font-weight:500}
.pc-go{background:var(--red);color:#fff}
.sect{color:var(--muted);opacity:1;font-weight:700;letter-spacing:2px;font-size:11.5px}
.themes{gap:8px}
.th{background:#fff;border:1px solid var(--line);box-shadow:none;backdrop-filter:none;color:var(--ink);border-radius:14px}
.th .ic{background:color-mix(in srgb,var(--tc) 18%,#fff);box-shadow:none;border-radius:10px}
.th small{color:var(--muted);opacity:1}
.th .bar{height:2px;background:var(--line)}.th .bar i{background:var(--red)}
.th.now{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.th.lock{filter:none;opacity:.45}
.link{color:var(--red);opacity:1;font-weight:600}
.brand{color:var(--muted)}
.gt b{text-shadow:none;font-family:"Noto Serif","PT Serif",Cambria,serif;color:var(--red)}.gt small{color:var(--muted);opacity:1;font-weight:600}
.prog{height:3px;background:var(--line)}.prog div{background:var(--red)}
.prog span{color:var(--muted)}.bonus.has{color:var(--red)}
.cur{background:var(--ink);color:#fbf7ef;box-shadow:none;border-radius:10px;font-weight:700}
.cur.good{background:#3d7a4f;color:#fff}.cur.bad{background:var(--red);color:#fff}
.board{background:transparent;box-shadow:none;padding:0;border-radius:0}
.board::before,.board::after{left:0;right:0;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 4l4-4 4 4-4 4zM8 4l4-4 4 4-4 4z' fill='%23b8412c' fill-opacity='.55'/%3E%3C/svg%3E") center/auto 100% repeat-x;opacity:1}
.board::before{top:-14px;opacity:.6}.board::after{bottom:-16px}
.cell{background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:10px;font-weight:600;color:var(--ink);font-family:"Inter","Segoe UI",system-ui,sans-serif}
.cell.sel{background:var(--ink);color:#fff;border-color:var(--ink);transform:none;box-shadow:none}
.cell.done{background:color-mix(in srgb,var(--wc) 22%,#fff);color:color-mix(in srgb,var(--wc) 70%,#000);border-color:color-mix(in srgb,var(--wc) 55%,#fff);text-shadow:none;box-shadow:none}
.cell.hint::after{border:1.5px dashed var(--red);border-radius:8px}
#lines .selline{stroke:rgba(43,36,32,.18)}#lines .wl{stroke:color-mix(in srgb,var(--ink) 15%,transparent)}#lines .dot{fill:var(--red)}
.tr .tc{background:#fff;border:1px solid var(--line);box-shadow:none;border-left:4px solid var(--wc);border-radius:12px}
.tr .tc b{font-family:"Noto Serif","PT Serif",Cambria,serif}.tr .tc span{color:var(--muted)}
.w{background:transparent;border:1px dashed #cdbfa8;color:#b9aa93;border-radius:8px}
.w.ok{background:#fff;border:1px solid var(--line);color:var(--ink)}.w.ok em{color:var(--muted)}
.w.ok i{border-radius:2px;transform:rotate(45deg) scale(.8)}
.tb{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;border-radius:14px;font-weight:700}
.tb:active{transform:scale(.98);box-shadow:none}.tb em{background:#f4ede0}
.tb.ad{background:var(--ink);color:#fff;box-shadow:none;border-color:var(--ink)}
.modal{background:rgba(43,36,32,.35)}
.card{box-shadow:0 20px 50px rgba(43,36,32,.25);border:1px solid var(--line);border-radius:20px}
.card h2{font-family:"Noto Serif","PT Serif",Cambria,serif;color:var(--ink);font-weight:700}
.stars{font-size:0;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 5l5-5 5 5-5 5zM10 5l5-5 5 5-5 5z' fill='%23b8412c'/%3E%3C/svg%3E") center/auto 100% repeat-x;width:120px;margin:0 auto 6px}
#winWords div{background:#f7f1e6;border-left-width:3px}
.pri{background:var(--ink);color:#fff;box-shadow:none;border-radius:12px;font-weight:700}
.tcard{box-shadow:0 14px 40px rgba(43,36,32,.3);border:1px solid var(--line);border-radius:16px}
.tcard p b{color:var(--red)}
.spot{box-shadow:0 0 0 3px var(--red),0 0 0 9999px rgba(43,36,32,.45)!important}

/* difficulty selector */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px}
.md{border:0;background:transparent;border-radius:10px;padding:8px 4px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:1px}
.md b{font-size:15px;font-weight:700}.md small{font-size:11px;color:var(--muted);font-weight:600}
.md.on{background:var(--ink);color:#fbf7ef}.md.on small{color:#d9cdb9}
.modesub{width:100%;text-align:center;font-size:12.5px;color:var(--muted);margin:7px 0 14px;font-weight:500}
.sect:first-of-type{margin-top:4px}
.w.hintw{letter-spacing:1px;color:#a8977f}.w.hintw em{font-style:normal;letter-spacing:0;color:var(--ink);font-weight:600;margin-left:4px}

/* Mari names + Russian translation */
.gt .ru{display:block;font-style:normal;font-size:13.5px;font-weight:600;color:var(--ink);opacity:.75;margin:1px 0 2px}
.th{grid-template-rows:auto auto auto}
.th .tn{display:flex;flex-direction:column;line-height:1.1;align-self:end}
.th .tn b{font-family:"Noto Serif","PT Serif",Cambria,serif;font-size:16.5px;font-weight:700;color:var(--ink)}
.th .tn i{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px}
.th small{grid-column:2}
.md{gap:0}.md b{font-family:"Noto Serif","PT Serif",Cambria,serif;font-size:16px}.md i{font-style:normal;font-size:11px;font-weight:600;opacity:.8}
.md small{margin-top:2px}
.wtheme{margin:2px 0 6px;line-height:1.15}.wtheme b{display:block;font-family:"Noto Serif","PT Serif",Cambria,serif;font-size:19px;color:var(--red)}.wtheme i{font-style:normal;font-size:13px;color:var(--muted);font-weight:600}
.th .tn b,.th .tn i{align-self:flex-start;text-align:left}
.th .ic{grid-row:1/4}
.th .tn b,.gt b,.md b,.wtheme b{font-family:"Inter","Segoe UI","Noto Sans",Roboto,system-ui,sans-serif!important;font-weight:800!important}
.th{padding-right:22px}.th .tn b{font-size:15px;overflow-wrap:anywhere}
/* no horizontal scroll in popups */
.modal,.card,.tut,.tcard,#toast,.tr,.tr .tc,#winWords,.found{overflow-x:hidden;max-width:100%}
.card,.tcard{max-width:calc(100vw - 24px)}
.card *,.tcard *,.tr *,.w{overflow-wrap:anywhere;word-break:break-word;min-width:0}
#winWords{grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr))}
.tr .tc{flex-wrap:wrap}
.winbonus{overflow-wrap:anywhere}
.w{height:auto;min-height:28px;flex-wrap:wrap;max-width:100%}
.tcard{animation:tfade .3s}@keyframes tfade{from{opacity:0}}

/* leaderboard */
.score{font-weight:700;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px 10px;margin-right:6px}
.lbcard{text-align:left;position:relative}
.lbcard h2{text-align:center;margin-top:0}
.lbsub,.lbrule,.lbnote{font-size:12.5px;color:var(--muted);text-align:center}
.lbrule{margin-top:10px}.lbnote:empty{display:none}.lbnote{margin:6px 0}
.x{position:absolute;right:10px;top:10px;border:0;background:#f1e8d8;border-radius:10px;width:34px;height:34px;font-size:16px;cursor:pointer;color:var(--ink)}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:#f1e8d8;border-radius:12px;padding:3px;margin:10px 0}
.tab{border:0;background:transparent;border-radius:9px;padding:8px;font-weight:700;cursor:pointer;color:var(--ink)}.tab.on{background:var(--ink);color:#fff}
.lblist{list-style:none;margin:0;padding:0;max-height:40vh;overflow-y:auto;overflow-x:hidden}
.lblist li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--line)}
.lblist li.me{background:#fbeee0;border-radius:10px}.lblist .r{font-weight:800;color:var(--red);text-align:center}.lblist .n{font-weight:700;overflow:hidden;text-overflow:ellipsis}.lblist .s{font-weight:800}
.lblist li.load{display:block;text-align:center;color:var(--muted)}
.lbme{margin:8px 0;text-align:center;font-size:14px}
.nick{display:flex;gap:8px;margin-top:6px}.nick input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit;font-size:15px;background:#fff}
.lberr{font-size:12.5px;color:var(--red);min-height:16px;margin-top:4px;text-align:center}
.winscore{margin:-4px 0 10px;font-weight:800;color:var(--ink);font-size:14px}

/* ===== Design «Корно» — the only design ===== */
/* DESIGN «Корно» (?design=new): a road through the Mari land. Illustrated scene, wooden plank board, linen tiles,
 * bold condensed type, forest/ochre/embroidery-red palette. Overrides css/style.css (design A). */
:root{--ink:#2a1d12;--muted:#6d5a44;--line:#d9c49c;--red:#b5322a;--ochre:#e3a33b;--forest:#1f4a33;--linen:#f7f0df}
html,body{background:#2f5d45;font-family:"Roboto Condensed","Arial Narrow","Noto Sans",system-ui,sans-serif}
#bg{background-color:#2f5d45;background-image:url(../img/scene.svg);background-position:center;background-size:cover;background-repeat:no-repeat}
#shade{display:block;background:linear-gradient(180deg,rgba(255,240,210,0) 0%,rgba(20,40,28,.05) 60%,rgba(20,40,28,.35))}
body[data-theme]:not([data-theme=home]) #shade{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 35%,transparent),rgba(20,40,28,.25) 55%,rgba(20,40,28,.55))}
.ib,.coins,.score{background:var(--linen);border:2px solid var(--ink);color:var(--ink);border-radius:999px;box-shadow:0 3px 0 var(--ink)}
.coins i{background:var(--ochre);border-radius:50%;transform:none;width:18px;height:18px;box-shadow:inset 0 -2px 0 #a86f17}
/* HOME */
#scrHome{padding-bottom:30px}
.logo{margin:2vh 0 1.5vh;position:relative}
.logo .orn{display:none}
.logo h1{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-stretch:condensed;text-transform:uppercase;font-size:50px;line-height:.95;font-weight:900!important;color:var(--linen);
 text-shadow:0 3px 0 var(--ink),0 6px 0 rgba(42,29,18,.35);letter-spacing:1px}
.logo h1 span{display:block;color:var(--ochre);font-style:normal;font-size:58px}
.logo p{display:inline-block;margin-top:8px;background:var(--red);color:#fff;padding:5px 16px;font-weight:800;font-size:13px;letter-spacing:.5px;text-transform:uppercase;
 clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%)}
.sect{color:var(--linen);text-shadow:0 2px 0 var(--ink);font-size:13px;letter-spacing:3px}
.modes{background:transparent;border:0;padding:0;gap:8px}
.md{background:linear-gradient(180deg,#c28a4e,#9c6633);color:#fff7e6;border-radius:8px;box-shadow:0 4px 0 #5b3a1c;border:2px solid #5b3a1c;padding:7px 4px}
.md b{font-size:17px;text-transform:uppercase;letter-spacing:.5px}.md i,.md small{color:#ffe9c4}
.md.on{background:linear-gradient(180deg,#d8463b,#a8281f);box-shadow:0 4px 0 #6e1712;border-color:#6e1712}
.modesub{color:var(--linen);text-shadow:0 1px 2px #000;font-weight:700}
.playcard{background:var(--red);color:#fff;border-radius:22px;border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);position:relative;overflow:hidden}
.playcard::after{content:'';position:absolute;inset:5px;border:2px dashed rgba(255,255,255,.55);border-radius:16px;pointer-events:none}
.pc-t b{font-family:inherit;text-transform:uppercase;font-size:28px;letter-spacing:1px}.pc-t small{color:#ffe1c4}
.pc-ic{background:var(--linen);border-radius:50%}.pc-go{background:var(--ochre);color:var(--ink)}
/* map */
.themes.map{display:block;position:relative;width:100%;margin-top:10px}
.road{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.road .r1{fill:none;stroke:#8a6a3c;stroke-width:30;stroke-linecap:round}
.road .r2{fill:none;stroke:#e8d3a2;stroke-width:22;stroke-linecap:round;stroke-dasharray:2 0}
.road .r3{fill:none;stroke:var(--red);stroke-width:5;stroke-dasharray:10 9;stroke-linecap:round}
.map .th{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:row;align-items:center;gap:8px;width:auto;max-width:62%;min-height:0;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
.map .th.right{flex-direction:row-reverse;text-align:right}
.map .th .ic{width:66px;height:66px;flex:none;font-size:30px;border-radius:50%;background:var(--linen);border:4px solid var(--ink);box-shadow:0 4px 0 var(--ink),inset 0 0 0 3px var(--tc)}
.map .th .tn{background:var(--linen);border:2px solid var(--ink);border-radius:12px;padding:5px 9px;box-shadow:0 3px 0 var(--ink)}
.map .th.right .tn b,.map .th.right .tn i{align-self:flex-end;text-align:right}
.map .th .tn b{font-size:16px;text-transform:uppercase;letter-spacing:.3px}
.map .th small{position:absolute;top:-10px;background:var(--ochre);color:var(--ink);font-weight:900;font-size:11px;border-radius:8px;padding:1px 7px;border:2px solid var(--ink);left:46px}
.map .th.right small{left:auto;right:46px}
.map .th .bar{display:none}
.map .th.lock{filter:grayscale(.85) brightness(.95);opacity:.9}
.map .th.lock::after{content:'🔒';position:absolute;left:46px;bottom:-4px;top:auto;right:auto;font-size:16px}
.map .th.right.lock::after{left:auto;right:46px}
.map .th.now .ic{animation:beat 1.4s infinite;box-shadow:0 4px 0 var(--ink),0 0 0 6px rgba(227,163,59,.6),inset 0 0 0 3px var(--tc)}
@keyframes beat{50%{transform:scale(1.08)}}
.link{color:var(--linen);text-shadow:0 1px 2px #000}.brand{color:var(--linen);opacity:.8}
/* GAME */
.gt b{font-family:"Roboto Condensed","Arial Narrow",sans-serif!important;text-transform:uppercase;font-size:30px!important;color:var(--linen);text-shadow:0 3px 0 var(--ink);letter-spacing:1px}
.gt .ru{color:var(--linen);opacity:1;text-shadow:0 1px 2px var(--ink);font-size:14px;font-weight:700}
.gt small{color:var(--linen)!important;text-shadow:0 1px 2px var(--ink)}
.prog{height:10px;background:rgba(42,29,18,.4);border:2px solid var(--ink);border-radius:8px}.prog div{background:var(--ochre)}
.prog span,.bonus{color:var(--linen);text-shadow:0 1px 2px var(--ink);opacity:1;top:14px}.bonus.has{color:#ffe08a}
.cur{background:var(--ink);color:var(--ochre);border-radius:8px;text-transform:uppercase;letter-spacing:4px}
.cur.good{background:var(--forest);color:#fff}.cur.bad{background:var(--red);color:#fff}
.board{padding:14px;border-radius:14px;border:3px solid #3b2412;
 background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 23px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px),linear-gradient(180deg,#b9824a,#8f5b2c);
 box-shadow:0 8px 0 #3b2412,0 18px 30px rgba(0,0,0,.45)}
.board::before,.board::after{content:'';display:block;position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e6d3b0,#6b5236);top:5px;left:5px;right:auto;bottom:auto;opacity:1}
.board::after{left:auto;right:5px}
.cell{background:var(--linen);border-radius:6px;border:0;box-shadow:inset 0 0 0 2px #f7f0df,inset 0 0 0 3px rgba(181,50,42,.35),0 3px 0 rgba(42,29,18,.5);font-weight:900;color:var(--ink);font-family:"Roboto Condensed","Arial Narrow",sans-serif}
.cell.sel{background:var(--ochre);color:var(--ink);box-shadow:inset 0 0 0 3px rgba(42,29,18,.35),0 3px 0 rgba(42,29,18,.5);transform:translateY(-2px)}
.cell.done{background:var(--wc);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:inset 0 0 0 3px var(--wc),inset 0 0 0 5px rgba(255,255,255,.55),0 3px 0 rgba(42,29,18,.5);border:0}
#lines .selline{stroke:rgba(42,29,18,.35)}#lines .wl{stroke:rgba(255,255,255,.65);stroke-dasharray:6 5}#lines .dot{fill:var(--red)}
.tr .tc{background:var(--linen);border:2px solid var(--ink);border-left:8px solid var(--wc);border-radius:10px;box-shadow:0 3px 0 var(--ink)}
.w{background:rgba(247,240,223,.25);border:2px dashed rgba(247,240,223,.7);color:var(--linen)}
.w.ok{background:var(--linen);border:2px solid var(--ink);color:var(--ink)}.w.hintw em{color:var(--linen)}
.tb{background:var(--linen);color:var(--ink);border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:14px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.tb.ad{background:var(--forest);color:#fff;border-color:var(--ink)}
/* modals: parchment with ribbon */
.modal{background:rgba(20,30,20,.55)}
.card{background:var(--linen);border:3px solid var(--ink);border-radius:16px;box-shadow:0 8px 0 var(--ink);padding-top:44px}
.card h2{position:absolute;left:50%;top:-18px;transform:translateX(-50%);margin:0;white-space:nowrap;background:var(--red);color:#fff!important;font-family:"Roboto Condensed","Arial Narrow",sans-serif!important;
 text-transform:uppercase;font-size:22px!important;padding:8px 26px;border:3px solid var(--ink);clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%)}
.lbcard h2{font-size:20px!important}
.stars{display:block;width:auto;height:auto;font-size:28px;background:none}
.wtheme b{text-transform:uppercase;font-family:"Roboto Condensed","Arial Narrow",sans-serif!important;font-size:24px;color:var(--forest)}
#winWords div{background:#fff;border:2px solid var(--line);border-left:6px solid var(--wc)}
.pri{background:var(--red);color:#fff;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);text-transform:uppercase;letter-spacing:.5px}
.tabs{background:#ead9b5;border:2px solid var(--ink)}.tab.on{background:var(--forest)}
.lblist li.me{background:#ffe8b8}
.x{background:#ead9b5;border:2px solid var(--ink)}
.tcard{background:var(--linen);border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);border-radius:14px}
.spot{box-shadow:0 0 0 4px var(--ochre),0 0 0 9999px rgba(20,30,20,.6)!important}
.map .th{max-width:none;width:max-content}
.map .th .tn{white-space:nowrap;max-width:200px}
.map .th .tn b{white-space:normal;overflow-wrap:normal;word-break:normal;max-width:190px}
.map .th{transform:translate(-33px,-50%)}
.map .th.right{transform:translate(calc(-100% + 33px),-50%)}
.map .th small{z-index:3;top:-14px}
/* photo backgrounds: soft blur + dimming for readability (JS sets inline background-image) */
#bg[style*="webp"]{filter:blur(1.5px) saturate(1.05);transform:scale(1.03)}
#bg[style*="webp"]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,8,.45) 0%,rgba(20,14,8,.12) 22%,rgba(20,14,8,.12) 70%,rgba(20,14,8,.4) 100%)}
/* no visible scrollbars anywhere; scrolling by finger/wheel stays */
*,*::before,*::after{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
/* popups fit any screen: ribbon (h2 at top:-18px) never clipped, scroll only inside word lists */
.card{display:flex;flex-direction:column;overflow:visible!important;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);margin-top:18px}
.card>*{flex:0 0 auto}
.card>#winWords,.card>#lbList,.lbcard #lbList{flex:0 1 auto;min-height:48px;overflow-y:auto;overscroll-behavior:contain}
#winWords{align-content:start;margin-bottom:12px}
.card>.burst{position:absolute}
@media (max-height:700px){
 .card{padding:36px 12px 12px}
 .card .stars{font-size:26px;margin:0}
 #winTxt{margin:2px 0 6px;font-size:14px}
 #winScore,#winBonus{margin:2px 0;font-size:12.5px}
 #winWords{gap:4px;margin-bottom:8px}
 #winWords div{padding:3px 7px;font-size:12px}
 #winWords b{font-size:13px}
 .card .pri.big{padding-top:10px;padding-bottom:10px}
}
/* tutorial spotlight: target stays full-bright inside the hole; everything else dimmed */
.spot{box-shadow:none!important}
#spotHole{position:fixed;z-index:0;pointer-events:none;border-radius:18px;box-shadow:0 0 0 3px var(--ochre,#e2a43a),0 0 18px 6px rgba(255,214,120,.65),0 0 0 9999px rgba(15,22,15,.62);animation:spotPulse 1.6s ease-in-out infinite;transition:left .25s,top .25s,width .25s,height .25s}
@keyframes spotPulse{50%{box-shadow:0 0 0 3px var(--ochre,#e2a43a),0 0 28px 12px rgba(255,214,120,.85),0 0 0 9999px rgba(15,22,15,.62)}}
.tcard{z-index:2;transition:top .25s}
.lbdel{display:block;margin:6px auto 0;background:none;border:0;color:#8a6a55;font-size:12.5px;text-decoration:underline;cursor:pointer}.lbdel[hidden]{display:none}
#lbNick[hidden]{display:none!important}