/* Главная: часы с таймером, кот, игрушки. Базовые токены и тема — из style.css. */
.home .topline{margin-bottom:22px; justify-content:flex-end}

.card{position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:22px; overflow:hidden}
.btn{font-family:var(--display); font-size:12px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  border-radius:999px; padding:10px 16px; border:1px solid var(--line); background:transparent; color:var(--ink); line-height:1}
.btn.main{background:var(--accent-hi); border-color:transparent; color:var(--bg); min-width:112px; font-weight:600}
.btn:hover{border-color:var(--soft)}
.btn.main:hover{filter:brightness(1.08)}
.btn[aria-pressed=true]{background:var(--ink); color:var(--bg); border-color:transparent}
.btn:focus-visible, .home button:focus-visible{outline:2px solid var(--accent-hi); outline-offset:2px}

/* ── раскладка: слева время/таймер/рандом/кот, справа игрушки; страница без прокрутки ── */
html:has(.home), body:has(.home){height:100%; overflow:hidden}
.home{display:grid; grid-template-columns:minmax(320px,1fr) minmax(0,1fr); gap:28px; height:100vh; height:100dvh;
  max-width:1500px; margin:0 auto; padding:22px 28px; position:relative}
.left{display:flex; flex-direction:column; gap:12px; min-height:0; container-type:inline-size}
.left .topline{margin:0}
.games{display:flex; flex-direction:column; min-height:0; min-width:0; border-left:1px solid var(--line); padding-left:28px}
.games .stage{flex:1; min-height:0; display:flex; flex-direction:column}

.now{font-family:var(--display); font-weight:800; font-size:clamp(40px,18cqi,112px); line-height:.95; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; margin-top:6px; white-space:nowrap}
.date{color:var(--soft); font-size:14px; margin-top:-6px}

.clock{padding:14px 16px; display:grid; gap:10px}
.clockhead{display:flex; justify-content:space-between; align-items:center; gap:10px}
.seg{display:inline-flex; padding:3px; border-radius:999px; background:var(--bg); border:1px solid var(--line)}
.seg button{font-family:var(--display); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  border:0; border-radius:999px; padding:6px 10px; background:transparent; color:var(--soft)}
.seg button[aria-selected=true]{background:var(--ink); color:var(--bg)}
.clock .big{font-family:var(--display); font-weight:600; font-size:clamp(26px,9cqi,36px); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.clock .bar{height:5px; border-radius:3px; background:var(--line); overflow:hidden}
.clock .bar i{display:block; height:100%; width:100%; background:var(--accent-hi); border-radius:3px; transform-origin:left; transition:transform .3s linear}
.clock.ring .big{color:var(--gold); animation:ring .5s ease-in-out 6}
@keyframes ring{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.presets{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.presets button{font-family:var(--display); font-size:12px; cursor:pointer; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--ink); font-variant-numeric:tabular-nums}
.presets button:hover{border-color:var(--accent-hi)}
.presets .unit{font-size:12px; color:var(--soft); margin-left:2px}
.ctrl{display:flex; gap:6px; flex-wrap:wrap}
.ctrl .btn{padding:9px 13px}
.clock[data-mode=watch] .presets, .clock[data-mode=watch] #tMinus, .clock[data-mode=watch] #tPlus{visibility:hidden}

.rand{padding:12px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:13px; color:var(--soft)}
.rand label{display:flex; align-items:center; gap:6px}
.rand input{width:64px; height:36px; box-sizing:border-box; font-family:var(--display); font-weight:600; font-size:14px; text-align:center; font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:0 8px; -moz-appearance:textfield; appearance:textfield}
.rand input:hover{border-color:var(--soft)}
.rand .ex{flex:1; min-width:150px}
.rand .ex input{flex:1; width:auto; min-width:0; font-family:"Golos Text",sans-serif; font-weight:500; padding:0 12px}
.rand .ex input::placeholder{color:var(--faint)}
.rand output.none{font-size:15px; color:var(--soft); font-family:"Golos Text",sans-serif; font-weight:500}
.rand input::-webkit-inner-spin-button, .rand input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.rand input:focus{outline:2px solid var(--accent-hi); outline-offset:1px; border-color:transparent}
.rand .btn{min-width:0; height:36px; padding:0 16px}
.rand output{margin-left:auto; font-family:var(--display); font-weight:800; font-size:26px; color:var(--ink); min-width:2.2ch; text-align:right; font-variant-numeric:tabular-nums}
.rand output.pop{animation:pop .3s cubic-bezier(.2,.7,.3,1.4)}
@keyframes pop{from{transform:scale(.6); opacity:.3}}

.cat{flex:1; min-height:120px; background:#0E0B12}
.cat video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.nocat{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; color:var(--soft); text-align:center; padding:20px;
  background:repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--accent) 10%, transparent) 14px 28px)}
.nocat b{font-size:48px; font-weight:400; color:var(--accent-hi); line-height:1}
.snd{position:absolute; right:12px; bottom:12px; font-family:var(--display); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 11px; border-radius:999px; border:0; cursor:pointer; background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(6px)}
.snd[aria-pressed=true]{background:rgba(255,255,255,.92); color:#241B2B}

/* ── игрушки ───────────────────────────── */
.ghead{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.ghead h2{margin:0}
.gtabs{display:inline-flex; gap:6px; flex-wrap:wrap}
.gtabs button{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.01em; cursor:pointer;
  padding:10px 18px; border-radius:14px; border:1px solid var(--line); background:transparent; color:var(--soft)}
.gtabs button[aria-selected=true]{background:var(--accent-hi); color:var(--bg); border-color:transparent}
.stage{animation:rise .35s cubic-bezier(.2,.7,.3,1) both}

.gbar{display:flex; justify-content:space-between; align-items:center; gap:10px 16px; flex-wrap:wrap; margin-bottom:16px}
.gbar .opts{display:flex; gap:6px; flex-wrap:wrap}
.gbar .stat{display:flex; gap:18px; font-size:13px; color:var(--soft); font-variant-numeric:tabular-nums}
.gbar .stat b{font-family:var(--display); font-weight:600; color:var(--ink); margin-left:5px}
.gmsg{min-height:24px; margin:14px 0 0; text-align:center; color:var(--soft); font-size:14px}
.gmsg.win{color:var(--gold); font-family:var(--display); font-weight:600; font-size:16px}
.gmsg.lose{color:#E86A7A}

/* судоку */
.sdk{display:grid; grid-template-columns:min(calc(100% - 224px), calc(100dvh - 250px), 560px) 200px; gap:24px; justify-content:center; align-items:start}
.sdk .grid{display:grid; grid-template-columns:repeat(9,1fr); aspect-ratio:1; border:2px solid var(--ink); border-radius:10px; overflow:hidden;
  background:var(--bg2); user-select:none; touch-action:manipulation}
.sdk .c{position:relative; display:grid; place-items:center; font-family:var(--display); font-size:clamp(16px,3.6vw,26px); cursor:pointer;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--accent-hi); font-weight:400; min-width:0}
.sdk .c:nth-child(9n){border-right:0}
.sdk .c:nth-child(9n+3), .sdk .c:nth-child(9n+6){border-right:2px solid var(--ink)}
.sdk .c:nth-child(n+19):nth-child(-n+27), .sdk .c:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--ink)}
.sdk .c:nth-child(n+73){border-bottom:0}
.sdk .c.g{color:var(--ink); font-weight:600}
.sdk .c.same{background:color-mix(in srgb, var(--accent) 45%, transparent); color:#fff}
.sdk .grid[data-hand=y] .c:not(.g):hover{background:color-mix(in srgb, var(--accent) 16%, transparent)}
.sdk .c.bad{color:#E86A7A}
.sdk .c .nt{position:absolute; inset:2px; display:grid; grid-template-columns:repeat(3,1fr); font-family:"Golos Text",sans-serif;
  font-size:clamp(7px,1.3vw,11px); color:var(--soft); font-weight:500; line-height:1}
.sdk .c .nt i{display:grid; place-items:center; font-style:normal}
.sdk .c .nt i.on{color:var(--ink); font-weight:700}
.sdk .side{display:grid; gap:14px}
.sdk .pad{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.sdk .pad button{font-family:var(--display); font-size:22px; aspect-ratio:1; border-radius:14px; border:1px solid var(--line);
  background:var(--bg2); color:var(--ink); cursor:pointer; position:relative; padding:0; min-width:0}
.sdk .pad button:hover{border-color:var(--accent-hi)}
.sdk .pad button.out{opacity:.3}
.sdk .pad button[aria-pressed=true]{background:var(--accent-hi); color:var(--bg); border-color:transparent; opacity:1}
.sdk .pad button[aria-pressed=true] small{color:var(--bg)}
.sdk .pad button small{position:absolute; right:6px; bottom:4px; font-size:9px; color:var(--soft); font-family:"Golos Text",sans-serif}
.sdk .row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px}
.sdk .row2 .btn{padding:10px 4px; font-size:11px; letter-spacing:.06em}
.sdk .row2 [data-r=new]{grid-column:1/-1}

/* кнопки только для сенсорных экранов */
@media (hover:hover) and (pointer:fine){ .touch-only{display:none} }

/* сапёр */
.mns .scroll{overflow:auto; max-width:100%; max-height:calc(100dvh - 250px); padding-bottom:4px}
.mns .grid{display:grid; gap:2px; width:max-content; margin:0 auto; user-select:none; -webkit-user-select:none; touch-action:manipulation; -webkit-touch-callout:none}
.mns .c{width:var(--s,34px); height:var(--s,34px); border-radius:6px; border:0; padding:0; cursor:pointer; font-family:var(--display); font-weight:800;
  font-size:calc(var(--s,34px) * .45); background:color-mix(in srgb, var(--accent) 38%, var(--bg2)); color:#fff;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.22); display:grid; place-items:center}
.mns .c:hover{filter:brightness(1.12)}
.mns .c.o{background:var(--bg2); box-shadow:none; cursor:default; filter:none}
.mns .c.f::after{content:""; width:40%; height:48%; background:var(--gold); clip-path:polygon(0 0,100% 32%,14% 64%,14% 100%,0 100%)}
.mns .c.boom{background:#C8364B}
.mns .c.m::after{content:""; width:44%; aspect-ratio:1; border-radius:50%; background:#1B1420; box-shadow:0 0 0 3px rgba(27,20,32,.25)}
.mns .c.o.m::after{background:var(--ink)}
.mns .c.wrong{background:var(--bg2); color:#E86A7A}
.mns .n1{color:#6FA8FF} .mns .n2{color:#5BC48A} .mns .n3{color:#F07A7A} .mns .n4{color:#B08CFF}
.mns .n5{color:#E6B455} .mns .n6{color:#4FC7C7} .mns .n7{color:var(--ink)} .mns .n8{color:var(--soft)}
:root[data-theme=light] .mns .n1{color:#2F63C9} :root[data-theme=light] .mns .n2{color:#23864F} :root[data-theme=light] .mns .n3{color:#C8364B}
:root[data-theme=light] .mns .n4{color:#6A3FC0} :root[data-theme=light] .mns .n5{color:#A06C0A} :root[data-theme=light] .mns .n6{color:#1B8A8A}

/* сет */
.set .table{display:grid; grid-template-columns:repeat(var(--cols,4), minmax(0,1fr)); gap:12px; width:min(100%, calc((100dvh - 300px) * 2), 900px); margin:0 auto}
.set .k{aspect-ratio:5/3.2; border-radius:14px; background:#FBF8F2; border:3px solid transparent; cursor:pointer; padding:6% 8%;
  display:flex; justify-content:center; align-items:center; gap:7%; box-shadow:0 10px 22px -16px rgba(0,0,0,.9);
  transition:transform .15s, border-color .15s}
.set .k.in{animation:rise .3s both}
.set .k:hover{transform:translateY(-3px)}
.set .k svg{height:82%; width:auto; flex:none}
.set .k.sel{border-color:var(--accent-hi); transform:translateY(-5px)}
.set .k.hint{border-color:var(--gold)}
.set .k.ok{border-color:#3FB36B}
.set .k.no{border-color:#E86A7A; animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.set .rules{max-width:760px; margin:12px auto 0; color:var(--soft); font-size:13.5px; text-align:center}

/* узкий экран: колонки друг под другом, прокрутка разрешена */
@media (max-width:860px){
  html:has(.home), body:has(.home){height:auto; overflow:visible}
  .home{grid-template-columns:1fr; height:auto; padding:18px 16px 48px}
  .games{border-left:0; padding-left:0}
  .cat{flex:none; aspect-ratio:16/10}
  .sdk{grid-template-columns:minmax(0,480px)}
  .mns .scroll{max-height:none}
  .set .table{width:100%}
  .sdk .side{grid-template-columns:1fr; max-width:480px}
  .sdk .pad{grid-template-columns:repeat(9,1fr); gap:5px}
  .sdk .pad button{font-size:17px; border-radius:10px}
  .sdk .pad button small{display:none}
}
@media (max-width:640px){
  .gtabs button{padding:8px 13px; font-size:13px}
  .set .table{gap:8px}
  .set .k{border-radius:10px; border-width:2px}
}
@media (prefers-reduced-motion:reduce){
  .stage, .set .k.in, .rand output.pop{animation:none}
  .clock.ring .big{animation:none}
}