:root{
  --paper:#F4EEE2;--paper-2:#FBF7EF;--ink:#28243D;--ink-soft:rgba(40,36,61,.55);
  --line:rgba(40,36,61,.22);--berry:#C44569;--berry-tint:#FBE9EE;--berry-soft:#F3D2DC;
  --teal:#2A9D8F;--wrong:#D64545;--wrong-tint:#FBE4E4;--cs:38px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--paper);background-image:radial-gradient(120% 80% at 50% -10%, #FAF5EC 0%, var(--paper) 60%);
  color:var(--ink);font-family:"Nunito",system-ui,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto;padding:16px 14px 56px}

header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;
  background:var(--paper-2);border:2px solid var(--ink);border-radius:8px;font-family:"Unbounded";font-weight:700;
  font-size:22px;position:relative;box-shadow:3px 3px 0 var(--berry-soft)}
.mark::before{content:"1";position:absolute;top:2px;left:4px;font-family:"Nunito";font-weight:800;font-size:10px;color:var(--berry)}
.titles h1{font-family:"Unbounded";font-weight:500;font-size:clamp(21px,6vw,28px);margin:0;letter-spacing:-.5px;line-height:1}
.titles p{margin:3px 0 0;font-size:12.5px;color:var(--ink-soft);font-style:italic;font-family:"Lora"}

.setup{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-bottom:12px}
.field{flex:1 1 140px;min-width:130px;display:flex;flex-direction:column;gap:3px}
.field label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);padding-left:2px}
select{font-family:"Nunito";font-weight:700;font-size:14px;color:var(--ink);background:var(--paper-2);
  border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%2328243D' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}
.newbtn{flex:1 1 140px;min-width:130px;align-self:flex-end;cursor:pointer;border-radius:11px;padding:11px 14px;
  font-family:"Nunito";font-weight:800;font-size:15px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper-2);
  box-shadow:3px 3px 0 var(--berry-soft);display:flex;align-items:center;justify-content:center;gap:7px;transition:.12s;height:42px}
.newbtn:active{transform:translateY(1px);box-shadow:1px 1px 0 var(--berry-soft)}

.cluebar{display:flex;align-items:center;gap:10px;margin:6px 0 12px;background:var(--paper-2);
  border:1.5px solid var(--line);border-radius:12px;padding:10px 8px}
.cluebar .nav{flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);background:transparent;
  cursor:pointer;font-size:18px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.cluebar .nav:active{background:var(--berry-tint)}
.cluebar .txt{flex:1;min-width:0}
.cluebar .tag{font-weight:800;font-size:12px;color:var(--berry);text-transform:uppercase;letter-spacing:.4px}
.cluebar .ct{font-family:"Lora";font-size:15px;line-height:1.3;margin-top:1px}

.main{display:flex;gap:26px;align-items:flex-start}
.left{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:13px;width:100%}
.right{flex:1;min-width:0;display:none}
@media(min-width:780px){.left{width:auto}.right{display:block}}

.gridwrap{width:100%;display:flex;justify-content:center;overflow-x:auto;min-height:120px;position:relative}
.grid{display:grid;gap:0;touch-action:manipulation}
.gap{width:var(--cs);height:var(--cs)}
.cell{position:relative;width:var(--cs);height:var(--cs);background:var(--paper-2);border:1px solid var(--line);
  margin:-0.5px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;
  font-weight:800;color:var(--ink);font-size:calc(var(--cs)*.5);line-height:1;transition:background .1s}
.cell .num{position:absolute;top:1px;left:3px;font-size:calc(var(--cs)*.27);font-weight:800;color:var(--ink-soft);line-height:1;pointer-events:none}
.cell.inword{background:var(--berry-tint)}
.cell.active{background:var(--berry);color:#fff;z-index:3;border-color:var(--berry)}
.cell.active .num{color:rgba(255,255,255,.85)}
.cell.right{color:var(--teal)}
.cell.wrong{background:var(--wrong-tint);color:var(--wrong)}
.cell.active.wrong{background:var(--berry);color:#fff}
.cell.revealed{color:var(--teal)}
#hidden{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;border:0;padding:0;font-size:16px;z-index:-1}

.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  background:var(--paper);font-family:"Lora";font-style:italic;color:var(--ink-soft);font-size:14px}
.spinner{width:26px;height:26px;border:3px solid var(--berry-soft);border-top-color:var(--berry);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%;max-width:460px}
.btn{flex:1 1 auto;min-width:120px;cursor:pointer;border-radius:11px;padding:11px 12px;font-family:"Nunito";font-weight:800;
  font-size:14px;border:1.5px solid var(--ink);background:var(--paper-2);color:var(--ink);transition:.12s;
  display:flex;align-items:center;justify-content:center;gap:7px}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:3px 3px 0 rgba(42,157,143,.25)}
.btn.ghost{flex:0 0 auto;min-width:0;width:46px;padding:11px 0}
.progress{font-size:13px;color:var(--ink-soft);font-weight:700;text-align:center;width:100%}
.progress b{color:var(--ink)}
.hint{font-size:12px;color:var(--ink-soft);text-align:center;font-family:"Lora";font-style:italic}

.cluecol h3{font-family:"Unbounded";font-weight:500;font-size:13px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--berry);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.cluecol h3::after{content:"";flex:1;height:2px;background:var(--line);border-radius:2px}
.cluecol{margin-bottom:20px}
.clue{display:flex;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;font-family:"Lora";font-size:14.5px;line-height:1.3;transition:.1s}
.clue .n{font-family:"Nunito";font-weight:800;color:var(--berry);flex:0 0 auto;min-width:18px}
.clue:hover{background:var(--paper-2)}
.clue.active{background:var(--berry-tint)}
.clue.solved{color:var(--ink-soft)}
.clue.solved .n{color:var(--teal)}
.clue.solved .t{text-decoration:line-through;text-decoration-color:var(--teal);text-decoration-thickness:1.5px}
.mobileclues{display:block;margin-top:24px}
@media(min-width:780px){.mobileclues{display:none}}

.win{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(40,36,61,.45);z-index:50;padding:24px}
.win.show{display:flex}
.wincard{background:var(--paper-2);border:2px solid var(--ink);border-radius:18px;padding:24px;text-align:center;max-width:330px;
  box-shadow:8px 8px 0 var(--berry-soft);animation:pop .35s ease}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.wincard h2{font-family:"Unbounded";font-weight:700;font-size:21px;margin:6px 0 8px}
.wincard p{font-family:"Lora";color:var(--ink-soft);margin:0 0 18px;font-size:15px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:49;overflow:hidden}
.conf{position:absolute;width:11px;height:11px;border:1.5px solid var(--ink);border-radius:2px;top:-20px}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important}}

/* ---- сканворд ---- */
.gridwrap.scan-mode{
  background:
    radial-gradient(ellipse 65% 55% at 14% 14%,rgba(196,69,105,.08) 0%,transparent 70%),
    radial-gradient(ellipse 65% 55% at 86% 86%,rgba(42,157,143,.08) 0%,transparent 70%),
    var(--paper);
  border-radius:12px;
}
.grid.scanword{position:relative;z-index:1;background:rgba(40,36,61,.05)}
.grid.scanword .gap{background:transparent}
.scan-bg{position:absolute;z-index:-1;line-height:1;pointer-events:none;user-select:none}
.scan-bg-1{top:-10px;left:-4px;font-size:min(140px,30vw);opacity:.17;transform:rotate(-8deg)}
.scan-bg-2{bottom:-10px;right:-4px;font-size:min(150px,32vw);opacity:.16;transform:rotate(7deg)}
.scan-bg-3{top:-6px;right:6px;font-size:min(96px,21vw);opacity:.13;transform:rotate(10deg)}
.scan-bg-4{bottom:-4px;left:6px;font-size:min(100px,22vw);opacity:.13;transform:rotate(-6deg)}
.cell.clue-cell{background:var(--paper);border-color:rgba(40,36,61,.35);cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:1px}
.cell.clue-cell .qline{display:flex;align-items:center;justify-content:center;gap:1px;flex:1;min-height:0;overflow:hidden}
.cell.clue-cell.multi .qline{border-bottom:.5px solid rgba(40,36,61,.22)}
.cell.clue-cell.multi .qline:last-child{border-bottom:0}
.cell.clue-cell .qtext{flex:0 1 auto;min-width:0;font-family:"Nunito";font-weight:700;
  font-size:calc(var(--cs)*.165);line-height:1.02;color:var(--ink);text-align:center;
  overflow:hidden;word-break:break-word;hyphens:auto}
.cell.clue-cell .arrow{flex:0 0 auto;font-size:calc(var(--cs)*.36);line-height:1;font-weight:900;color:var(--berry)}
.cell.clue-cell.clue-active{background:var(--berry-tint)}
.cell.clue-cell.clue-active .arrow{color:var(--ink)}