/* Хулианка — visual system. Vanilla CSS, no build. Tokens → components. */
@font-face{
  font-family:"Unbounded";font-style:normal;font-weight:700;
  font-display:swap;src:url(/fonts/unbounded-subset.woff2) format("woff2");
}

:root{
  --bg:20 18% 11%; --bg2:22 16% 14%; --ink:34 30% 88%; --dim:30 12% 60%;
  --line:28 14% 22%; --accent:355 52% 58%; --correct:160 32% 44%;
  --present:36 64% 54%; --absent:24 9% 27%; --onstate:38 40% 96%;
  --gold:40 70% 58%;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
  --disp:"Unbounded",var(--sans);
  --r:10px; --shadow:0 1px 2px hsl(0 0% 0%/.28),0 8px 24px -10px hsl(0 0% 0%/.4);
  --t:240ms cubic-bezier(.4,0,.2,1);
}
html[data-theme="light"]{
  --bg:34 44% 92%; --bg2:38 52% 96%; --ink:18 36% 16%; --dim:24 14% 38%;
  --line:30 26% 80%; --accent:355 46% 38%; --correct:160 36% 31%;
  --present:34 72% 40%; --absent:28 16% 70%; --onstate:40 50% 97%;
  --gold:40 64% 42%;
  --shadow:0 1px 2px hsl(24 30% 30%/.12),0 10px 26px -12px hsl(24 30% 30%/.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;touch-action:manipulation}
[hidden]{display:none!important} /* иначе display:flex перебивает атрибут hidden */
body{
  background:hsl(var(--bg));color:hsl(var(--ink));font-family:var(--sans);
  display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;
  transition:background var(--t),color var(--t);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; /* без double-tap zoom на мобиле */
}
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
body>*:not(.grain){position:relative;z-index:1}

/* Header */
.bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(14px,4vw,28px);border-bottom:1px solid hsl(var(--line));
}
.mark{
  font-family:var(--disp);font-size:clamp(18px,5vw,26px);font-weight:700;
  letter-spacing:.12em;line-height:1;color:hsl(var(--ink));
  text-shadow:0 1px 0 hsl(var(--accent)/.18);
}
.tools{display:flex;gap:4px}
.icon{
  width:40px;height:40px;display:grid;place-items:center;border:0;
  background:none;color:hsl(var(--dim));border-radius:9px;cursor:pointer;
  touch-action:manipulation;
  transition:color 160ms,background 160ms,transform 160ms;
}
.icon:hover{color:hsl(var(--ink));background:hsl(var(--ink)/.06)}
.icon:active{transform:scale(.92)}
.icon svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon:focus-visible{outline:2px solid hsl(var(--accent));outline-offset:2px}
.i-sun{display:none} html[data-theme="light"] .i-moon{display:none}
html[data-theme="light"] .i-sun{display:block}

/* Layout */
main{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(18px,4.4vh,42px);
  padding:10px 12px 16px;min-height:0;
}
.toast{
  position:absolute;top:64px;left:50%;transform:translateX(-50%) translateY(-6px);
  background:hsl(var(--ink));color:hsl(var(--bg));font-size:14px;font-weight:600;
  padding:9px 16px;border-radius:999px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity 180ms,transform 180ms;
  z-index:5;max-width:92vw;text-align:center;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Board */
.board{
  display:grid;grid-template-rows:repeat(6,1fr);gap:7px;
  width:min(92vw,360px,calc((100dvh - 342px)*.833));aspect-ratio:5/6;
}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.cell{
  display:grid;place-items:center;border:1.5px solid hsl(var(--line));
  border-radius:var(--r);font-family:var(--disp);font-weight:700;
  font-size:clamp(22px,6.6vw,32px);text-transform:uppercase;
  color:hsl(var(--ink));user-select:none;background:hsl(var(--bg2)/.35);
  transition:border-color 140ms,background 140ms;
}
.cell.full{border-color:hsl(var(--ink)/.45);animation:pop 130ms ease-out}
.cell.flip{animation:flip 320ms ease both}
.cell.correct{background:hsl(var(--correct));border-color:hsl(var(--correct));
  color:hsl(var(--onstate));box-shadow:inset 0 2px 0 hsl(0 0% 100%/.14),
  inset 0 -3px 6px hsl(0 0% 0%/.22);text-shadow:0 1px 1px hsl(0 0% 0%/.25)}
.cell.present{background:hsl(var(--present));border-color:hsl(var(--present));
  color:hsl(var(--onstate));box-shadow:inset 0 2px 0 hsl(0 0% 100%/.16),
  inset 0 -3px 6px hsl(0 0% 0%/.2);text-shadow:0 1px 1px hsl(0 0% 0%/.22)}
.cell.absent{background:hsl(var(--absent));border-color:hsl(var(--absent));
  color:hsl(var(--ink)/.7);box-shadow:inset 0 -3px 6px hsl(0 0% 0%/.16)}
.row.win .cell{animation:winpop 720ms cubic-bezier(.2,.7,.2,1) both;
  border-color:hsl(var(--gold));
  box-shadow:0 0 16px hsl(var(--gold)/.55),inset 0 2px 0 hsl(0 0% 100%/.2),
  inset 0 -3px 6px hsl(0 0% 0%/.22)}
.row.win .cell:nth-child(2){animation-delay:80ms}
.row.win .cell:nth-child(3){animation-delay:160ms}
.row.win .cell:nth-child(4){animation-delay:240ms}
.row.win .cell:nth-child(5){animation-delay:320ms}

/* Keyboard */
.keyboard{display:flex;flex-direction:column;gap:7px;width:min(96vw,440px)}
.krow{display:flex;gap:6px;justify-content:center}
.key{
  flex:1;min-width:0;height:clamp(46px,7.4vh,58px);border:0;border-radius:8px;
  background:hsl(var(--bg2));color:hsl(var(--ink));font-family:var(--disp);
  font-weight:700;font-size:clamp(13px,3.4vw,17px);text-transform:uppercase;
  cursor:pointer;touch-action:manipulation;
  transition:transform 90ms,background 120ms,color 120ms,
  box-shadow 120ms;box-shadow:0 2px 0 hsl(0 0% 0%/.22);
}
.key:hover{background:hsl(var(--bg2)/.7)}
.key:active{transform:translateY(2px);box-shadow:0 0 0 hsl(0 0% 0%/.22)}
.key:focus-visible{outline:2px solid hsl(var(--accent));outline-offset:2px}
.key.wide{flex:1.7;font-size:clamp(11px,2.7vw,13px);letter-spacing:.04em}
.key.wide svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.key.correct{background:hsl(var(--correct));color:hsl(var(--onstate))}
.key.present{background:hsl(var(--present));color:hsl(var(--onstate))}
.key.absent{background:hsl(var(--absent));color:hsl(var(--ink)/.55);
  box-shadow:0 2px 0 hsl(0 0% 0%/.12)}

.foot{text-align:center;font-size:12.5px;color:hsl(var(--dim));
  padding:0 16px 14px}

/* Dialogs */
.sheet{
  border:0;padding:0;color:hsl(var(--ink));background:transparent;max-width:none;
}
.sheet::backdrop{background:hsl(var(--bg)/.7);backdrop-filter:blur(6px)}
.sheet[open]{
  position:fixed;inset:0;margin:auto;height:max-content;
  width:min(86vw,350px);background:hsl(var(--bg2));border:1px solid hsl(var(--line));
  border-radius:18px;padding:24px 22px 22px;box-shadow:var(--shadow);
  animation:rise 280ms cubic-bezier(.2,.7,.2,1)}
.sheet h2{font-family:var(--disp);font-size:19px;letter-spacing:.02em;
  margin-bottom:12px}
.sheet h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  color:hsl(var(--dim));margin:22px 0 12px}
.sheet p{font-size:14.5px;line-height:1.62;color:hsl(var(--ink)/.9);
  margin-bottom:12px}
.sheet .dim{color:hsl(var(--dim));font-size:13px}
.sheet form{display:contents}
.x{position:absolute;top:15px;right:15px;width:34px;height:34px;border:0;
  background:none;color:hsl(var(--dim));cursor:pointer;border-radius:8px}
.x:hover{color:hsl(var(--ink));background:hsl(var(--ink)/.06)}
.x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.legend{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.legend>div{display:flex;align-items:center;gap:14px;font-size:14px}
.legend .cell{width:42px;height:42px;font-size:20px;flex:none}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.nums b{font-family:var(--disp);font-size:26px;display:block}
.nums span{font-size:11px;color:hsl(var(--dim))}
.srate{text-align:center;color:hsl(var(--dim));font-size:13.5px;margin-top:18px}
.resword{font-family:var(--disp);font-weight:700;text-align:center;
  font-size:clamp(2.4rem,11vw,3rem);letter-spacing:.06em;color:hsl(var(--gold));
  margin:8px 0 2px}
.resbtns{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.resbtns .primary,.resbtns .ghost{width:100%;margin-top:0}
.endpanel{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;width:min(96vw,420px);text-align:center}
.endtitle{font-family:var(--disp);font-weight:700;color:hsl(var(--ink));
  font-size:clamp(1.9rem,7.5vw,2.5rem)}
.endpanel .resword{margin:4px 0 0}
.endpanel .resbtns{margin-top:18px;width:100%;max-width:300px}
.primary{border:0;border-radius:10px;padding:13px 22px;font-weight:700;
  font-size:14px;font-family:var(--sans);cursor:pointer;
  background:hsl(var(--accent));color:hsl(var(--onstate));
  transition:transform 110ms,filter 140ms}
.primary:hover{filter:brightness(1.08)} .primary:active{transform:scale(.97)}
.ghost{width:100%;margin-top:12px;border:1px solid hsl(var(--line));
  border-radius:10px;padding:12px;background:none;color:hsl(var(--ink));
  font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.ghost:hover{background:hsl(var(--ink)/.05)}

/* Motion */
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-88deg)}
  100%{transform:rotateX(0)}}
@keyframes winpop{0%{transform:translateY(0) scale(1)}
  28%{transform:translateY(-18px) scale(1.07)}
  55%{transform:translateY(2px) scale(1)}100%{transform:translateY(0) scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.row.shake{animation:shake 480ms cubic-bezier(.36,.07,.19,.97)}

@media (max-width:380px){
  .board{gap:6px;width:min(90vw,300px)} .row{gap:6px}
  .key{height:46px} .keyboard{gap:6px}
}
@media (min-width:560px) and (min-height:680px){
  .board{width:min(58vw,384px,calc((100dvh - 320px)*.833))}
}
@media (prefers-reduced-motion:reduce){
  *,*::after{animation:none!important;transition:background var(--t),
    color var(--t),border-color 120ms!important}
  .cell.flip{animation:none}
}