@font-face{
  font-family:"Archivo";
  src:url("/assets/archivo.woff2") format("woff2");
  font-weight:400 900;
  font-stretch:100% 125%;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}

:root{
  color-scheme:light dark;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);

  --paper:#F1F2F6;
  --panel:#FFFFFF;
  --panel-2:#E7E9F0;
  --ink:#1D2235;
  --soft:#5A6078;
  --line:#D5D9E4;
  --red:#DE3A2C;
  --blue:#2458D4;
  --green:#0F9C68;
  --yellow:#F0B20A;
  --orange:#EC6F0C;
  --violet:#7742CF;
  --focus:#2458D4;
  --shade:rgba(29,34,53,.14);
  --bar:12px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131726;
    --panel:#1B2032;
    --panel-2:#242A40;
    --ink:#EDEFF8;
    --soft:#A4AAC2;
    --line:#2F3653;
    --red:#FF5C4C;
    --blue:#5E8CFF;
    --green:#27C78A;
    --yellow:#FFC73C;
    --orange:#FF9040;
    --violet:#A97BFF;
    --focus:#8FB0FF;
    --shade:rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#131726;
  --panel:#1B2032;
  --panel-2:#242A40;
  --ink:#EDEFF8;
  --soft:#A4AAC2;
  --line:#2F3653;
  --red:#FF5C4C;
  --blue:#5E8CFF;
  --green:#27C78A;
  --yellow:#FFC73C;
  --orange:#FF9040;
  --violet:#A97BFF;
  --focus:#8FB0FF;
  --shade:rgba(0,0,0,.45);
}

html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  overflow-wrap:break-word;
}

h1,h2,h3{margin:0 0 .4em;line-height:1.08;font-weight:800;font-stretch:115%;font-variation-settings:"wdth" 115,"wght" 800;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,7.2vw,4.5rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.35rem)}
h3{font-size:1.12rem;font-stretch:108%;font-variation-settings:"wdth" 108,"wght" 750}
p{margin:0 0 1em}
a{color:inherit}
img,svg{max-width:100%}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.2rem,1140px);margin-inline:auto}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1rem;z-index:60}
.skip:focus{left:.6rem;top:.6rem}

/* ---------- fejléc ---------- */
.top{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top__in{display:flex;align-items:center;gap:1.4rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:800;font-stretch:118%;font-size:1.18rem;letter-spacing:-.02em}
.brand__mark{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:28px;height:28px;border-radius:7px;overflow:hidden;flex:none}
.brand__mark i{display:block;background:var(--line)}
.brand__mark i:nth-child(1){background:var(--red)}
.brand__mark i:nth-child(3){background:var(--blue)}
.brand__mark i:nth-child(5){background:var(--yellow)}
.brand__mark i:nth-child(7){background:var(--green)}
.brand__mark i:nth-child(9){background:var(--violet)}
.nav{margin-left:auto;display:flex;align-items:center;gap:.3rem}
.nav a{text-decoration:none;color:var(--soft);font-weight:600;font-size:.95rem;padding:.5rem .7rem;border-radius:8px}
.nav a:hover{color:var(--ink);background:var(--panel-2)}
@media (max-width:720px){.nav a{display:none}}
.themebtn{
  margin-left:.3rem;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  width:40px;height:40px;border-radius:50%;font-size:1.05rem;cursor:pointer;line-height:1;
}
.themebtn:hover{border-color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:clamp(2.6rem,7vw,5rem) 0 clamp(2rem,4vw,3rem)}
.hero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.8rem,5vw,3.6rem);align-items:center}
@media (max-width:860px){.hero__in{grid-template-columns:1fr}}
.hero p.lead{font-size:clamp(1.05rem,2.1vw,1.26rem);color:var(--soft);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

.btn{
  border:0;border-radius:999px;padding:.82rem 1.5rem;font:inherit;font-weight:700;cursor:pointer;
  background:var(--ink);color:var(--paper);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--sm{padding:.5rem 1rem;font-size:.92rem}

.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.4vw,.8rem);aspect-ratio:1;max-width:460px;margin-inline:auto;width:100%}
.chip{
  border:0;cursor:pointer;color:#fff;border-radius:clamp(12px,2.6vw,20px);
  display:grid;place-content:center;gap:.25rem;padding:.4rem;font:inherit;text-align:center;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.26),inset 0 -5px 0 rgba(0,0,0,.18);
}
.chip span{font-size:clamp(1.5rem,5.4vw,2.1rem);line-height:1}
.chip small{font-size:clamp(.62rem,1.5vw,.76rem);font-weight:700;opacity:.95}
.chip:hover{filter:brightness(1.07)}
.chip:active{transform:scale(.96)}
.c-red{background:var(--red)}.c-blue{background:var(--blue)}.c-green{background:var(--green)}
.c-yellow{background:var(--yellow);color:#231B02}.c-orange{background:var(--orange);color:#2A1402}.c-violet{background:var(--violet)}
.c-ink{background:var(--ink);color:var(--paper)}
.c-yellow,.c-orange{box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -5px 0 rgba(0,0,0,.14)}

@media (prefers-reduced-motion: no-preference){
  .mosaic .chip{animation:drop .5s cubic-bezier(.2,.9,.3,1.3) backwards}
  @keyframes drop{from{opacity:0;transform:translateY(-14px) rotate(-6deg) scale(.86)}}
}

/* ---------- játékrács ---------- */
.section{padding:clamp(2.4rem,5vw,3.6rem) 0}
.section__head{display:flex;flex-wrap:wrap;align-items:end;gap:1rem;margin-bottom:1.6rem}
.section__head p{color:var(--soft);margin:0;max-width:52ch}

.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem}
.filter{
  border:1px solid var(--line);background:var(--panel);color:var(--soft);
  border-radius:999px;padding:.42rem 1rem;font:inherit;font-size:.92rem;font-weight:650;cursor:pointer;
}
.filter[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(.8rem,1.6vw,1.15rem)}
.tile{
  position:relative;border-radius:20px;padding:1.15rem 1.2rem 1.25rem;color:#fff;
  display:flex;flex-direction:column;min-height:196px;
  box-shadow:inset 0 4px 0 rgba(255,255,255,.22),inset 0 -6px 0 rgba(0,0,0,.17);
}
.tile--wide{grid-column:span 2}
@media (max-width:700px){.tile--wide{grid-column:span 1}}
.tile__ico{font-size:1.9rem;line-height:1}
.tile h3{margin:.55rem 0 .25rem;font-size:1.3rem}
.tile p{font-size:.93rem;margin:0;opacity:.94;max-width:40ch}
.tile__meta{margin-top:auto;padding-top:1rem;display:flex;align-items:center;gap:.7rem;font-size:.82rem;font-weight:650}
.tile__best{opacity:.9}
.tile__go{
  margin-left:auto;background:rgba(255,255,255,.95);color:#15192A;border:0;border-radius:999px;
  padding:.46rem 1rem;font:inherit;font-weight:750;font-size:.88rem;cursor:pointer;
}
.c-yellow .tile__go,.c-orange .tile__go{background:rgba(0,0,0,.82);color:#fff}
.tile h3 a{color:inherit;text-decoration:none}
.tile h3 a::after{content:"";position:absolute;inset:0;border-radius:20px}
.tile h3 a:focus-visible{outline:none}
.tile:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.tile:hover{filter:brightness(1.05)}
.tile[hidden]{display:none}

/* ---------- szöveges blokkok ---------- */
.prose{max-width:68ch}
.prose h3{margin-top:1.8rem}
.prose ul{padding-left:1.1rem;color:var(--soft)}
.prose li{margin-bottom:.4rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem 2.4rem}
.cols h3{margin-top:0}
.cols p{color:var(--soft);font-size:.96rem}

.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:1.05rem 0}
summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none;display:flex;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-size:1.3rem;color:var(--soft);flex:none}
details[open] summary::after{content:"–"}
details p{margin:.7rem 0 0;color:var(--soft);max-width:70ch}

footer{border-top:1px solid var(--line);padding:2.4rem 0 3rem;color:var(--soft);font-size:.92rem}
.foot{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:1rem}
.foot a{color:var(--soft)}

/* ---------- játékoldal ---------- */
.gamepage{padding:clamp(1.4rem,4vw,2.4rem) 0 clamp(2.6rem,6vw,4rem)}
.crumbs{font-size:.86rem;color:var(--soft);margin:0 0 1rem}
.crumbs a{color:var(--soft)}
.crumbs span{margin:0 .4rem;opacity:.6}
.gamehead{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.4rem}
.gamehead__ico{font-size:2.4rem;line-height:1;flex:none}
.gamehead h1{font-size:clamp(1.9rem,4.6vw,2.9rem);margin-bottom:.35rem}
.gamehead p{color:var(--soft);margin:0;max-width:60ch}
.play{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:clamp(1rem,3vw,1.6rem);margin-bottom:2.6rem}
.article{max-width:70ch}
.article h2{margin-top:2.4rem;font-size:clamp(1.35rem,3vw,1.75rem)}
.article h2:first-child{margin-top:0}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;padding-left:3rem;position:relative;margin-bottom:1.1rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:.05rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--panel-2);color:var(--ink);display:grid;place-content:center;font-weight:800;font-size:.95rem}
.steps strong{display:block}
.steps span{color:var(--soft);font-size:.96rem}
.article ul.plain{padding-left:1.15rem;color:var(--soft)}
.article ul.plain li{margin-bottom:.5rem}
.more{border-top:1px solid var(--line);margin-top:2.8rem;padding-top:1.8rem;padding-bottom:.5rem}
.more__title{font-size:1.1rem;margin:0 0 1rem}
.more ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem}
.more a{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.75rem .9rem;font-size:.95rem}
.more a:hover{border-color:var(--ink)}
.board{width:min(100%,520px);margin-inline:auto}
.board--wide{width:min(100%,680px)}
.hud{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-bottom:1rem}
.pill{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.42rem .8rem;font-size:.86rem;font-weight:700}
.pill b{font-weight:800}
.hint{color:var(--soft);font-size:.88rem;margin:1rem 0 0;text-align:center}
.msg{text-align:center;font-weight:750;margin:1rem 0 0;min-height:1.5em}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:transparent;color:var(--soft);font:inherit;font-size:.85rem;font-weight:650;padding:.42rem .85rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* memória */
.mem{display:grid;gap:.5rem}
.mem button{aspect-ratio:1;border:0;background:transparent;padding:0;cursor:pointer;perspective:700px}
.mem i{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .32s ease}
.mem button[data-up="1"] i{transform:rotateY(180deg)}
.mem em,.mem span{position:absolute;inset:0;display:grid;place-content:center;border-radius:14px;backface-visibility:hidden;font-style:normal;font-size:clamp(1.4rem,6vw,2rem)}
.mem em{background:var(--blue);box-shadow:inset 0 3px 0 rgba(255,255,255,.25),inset 0 -5px 0 rgba(0,0,0,.18)}
.mem span{background:var(--panel);border:1px solid var(--line);transform:rotateY(180deg)}
.mem button[data-done="1"] span{background:var(--green);color:#fff;border-color:transparent}

/* 2048 */
.g2048{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;background:var(--panel-2);padding:.55rem;border-radius:16px;touch-action:none}
.g2048 div{aspect-ratio:1;display:grid;place-content:center;border-radius:11px;background:var(--panel);font-weight:800;font-size:clamp(1.1rem,5vw,1.7rem);color:var(--ink)}
.g2048 div[data-v="2"]{background:#EDE6D6;color:#4A4236}
.g2048 div[data-v="4"]{background:#E7D9B5;color:#4A4236}
.g2048 div[data-v="8"]{background:var(--yellow);color:#2A2003}
.g2048 div[data-v="16"]{background:var(--orange);color:#fff}
.g2048 div[data-v="32"]{background:var(--red);color:#fff}
.g2048 div[data-v="64"]{background:#B32114;color:#fff}
.g2048 div[data-v="128"],.g2048 div[data-v="256"]{background:var(--green);color:#fff}
.g2048 div[data-v="512"],.g2048 div[data-v="1024"]{background:var(--blue);color:#fff}
.g2048 div[data-v="2048"]{background:var(--violet);color:#fff}
.g2048 div[data-big]{font-size:clamp(.85rem,3.6vw,1.25rem)}

/* kígyó */
.wrapcanvas{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:.5rem;touch-action:none}
canvas{display:block;width:100%;height:auto;border-radius:10px}
.dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,52px);gap:.4rem;justify-content:center;margin-top:1rem}
.dpad button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;font-size:1.1rem;cursor:pointer}
.dpad .up{grid-column:2}
.dpad .left{grid-column:1;grid-row:2}
.dpad .down{grid-column:2;grid-row:2}
.dpad .right{grid-column:3;grid-row:2}

/* aknakereső */
.mine{display:grid;gap:3px;background:var(--panel-2);padding:3px;border-radius:12px;overflow-x:auto}
.mine button{
  aspect-ratio:1;min-width:26px;border:0;border-radius:5px;background:var(--blue);color:#fff;
  font:inherit;font-weight:800;font-size:clamp(.7rem,2.6vw,1rem);cursor:pointer;display:grid;place-content:center;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.18);
}
.mine button[data-open="1"]{background:var(--panel);color:var(--ink);box-shadow:none;cursor:default}
.mine button[data-mine="1"]{background:var(--red);color:#fff}
.mine button[data-n="1"]{color:var(--blue)}
.mine button[data-n="2"]{color:var(--green)}
.mine button[data-n="3"]{color:var(--red)}
.mine button[data-n="4"]{color:var(--violet)}

/* amőba */
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:340px;margin-inline:auto}
.ttt button{aspect-ratio:1;border:1px solid var(--line);background:var(--panel);border-radius:14px;font-size:2.4rem;font-weight:800;color:var(--ink);cursor:pointer}
.ttt button[data-w="1"]{background:var(--green);color:#fff;border-color:transparent}

/* akasztófa */
.word{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:1rem 0 1.2rem}
.word i{font-style:normal;width:1.6rem;height:2.2rem;border-bottom:3px solid var(--line);display:grid;place-content:center;font-size:1.4rem;font-weight:800}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(38px,1fr));gap:.35rem;max-width:460px;margin-inline:auto}
.keys button{aspect-ratio:1;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;font:inherit;font-weight:700;cursor:pointer}
.keys button:disabled{opacity:.3;cursor:default}
.gallows{display:block;margin:0 auto;max-width:200px}

/* színsor */
.simon{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;max-width:340px;margin-inline:auto}
.simon button{aspect-ratio:1;border:0;border-radius:18px;cursor:pointer;opacity:.5;transition:opacity .12s}
.simon button[data-on="1"]{opacity:1;filter:brightness(1.3)}

/* számolás / kvíz */
.quiz{max-width:540px;margin-inline:auto}
.opt{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:13px;padding:.85rem 1.1rem;font:inherit;font-weight:650;margin-bottom:.55rem;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt[data-ok="1"]{background:var(--green);color:#fff;border-color:transparent}
.opt[data-ok="0"]{background:var(--red);color:#fff;border-color:transparent}
.bigq{font-size:clamp(2rem,9vw,3rem);font-weight:800;text-align:center;margin:1.4rem 0}
.answer{width:100%;max-width:220px;margin:0 auto;display:block;text-align:center;font:inherit;font-size:1.6rem;font-weight:800;padding:.6rem;border-radius:13px;border:2px solid var(--line);background:var(--panel);color:var(--ink)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;max-width:260px;margin:1rem auto 0}
.pad button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:11px;padding:.75rem;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer}

/* reakció */
.react{height:min(52vh,340px);border-radius:20px;display:grid;place-content:center;text-align:center;cursor:pointer;color:#fff;font-weight:800;font-size:1.3rem;padding:1.5rem;background:var(--violet);border:0;width:100%;font-family:inherit}
.react[data-s="wait"]{background:var(--red)}
.react[data-s="go"]{background:var(--green)}

/* 15-ös */
.puz{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;background:var(--panel-2);padding:.5rem;border-radius:16px;max-width:400px;margin-inline:auto}
.puz button{aspect-ratio:1;border:0;border-radius:11px;background:var(--panel);color:var(--ink);font:inherit;font-weight:800;font-size:clamp(1.1rem,5vw,1.6rem);cursor:pointer}
.puz button[data-empty="1"]{background:transparent;cursor:default}
.puz button[data-ok="1"]{background:var(--green);color:#fff}


/* ---------- impresszum ---------- */
.impr{max-width:720px;padding:clamp(1.4rem,4vw,2.4rem) 0 clamp(2.6rem,6vw,4rem)}
.impr h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:.6rem}
.impr .bev{color:var(--soft);max-width:60ch}
.impr dl{display:grid;grid-template-columns:minmax(150px,230px) 1fr;margin:2rem 0 0}
.impr dt{color:var(--soft);padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--line)}
.impr dd{margin:0;padding:.95rem 0;border-bottom:1px solid var(--line);font-weight:600}
.impr dd a{color:var(--ink)}
.impr .utoirat{color:var(--soft);font-size:.95rem;margin-top:2rem}
@media (max-width:620px){
  .impr dl{grid-template-columns:1fr}
  .impr dt{padding:.9rem 0 0;border-bottom:0;font-size:.9rem}
  .impr dd{padding:.15rem 0 .9rem}
}

/* ---------- jogi oldalak ---------- */
.doc{max-width:74ch;padding:clamp(1.4rem,4vw,2.4rem) 0 clamp(2.6rem,6vw,4rem)}
.doc h1{font-size:clamp(2rem,4.8vw,2.9rem);margin-bottom:.6rem}
.doc .bev{color:var(--soft);max-width:62ch}
.doc h2{margin-top:2.6rem;font-size:clamp(1.25rem,2.8vw,1.6rem)}
.doc h3{margin-top:1.8rem;font-size:1.05rem}
.doc ul{padding-left:1.15rem;color:var(--soft)}
.doc li{margin-bottom:.45rem}
.doc dl{display:grid;grid-template-columns:minmax(150px,230px) 1fr;margin:1.4rem 0 0}
.doc dt{color:var(--soft);padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--line)}
.doc dd{margin:0;padding:.8rem 0;border-bottom:1px solid var(--line);font-weight:600}
.doc dd a{color:var(--ink)}
.doc .kiemelt{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem;margin:1.6rem 0}
.doc .kiemelt p:last-child{margin-bottom:0}
.doc .datum{color:var(--soft);font-size:.92rem;margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.2rem}
@media (max-width:620px){
  .doc dl{grid-template-columns:1fr}
  .doc dt{padding:.85rem 0 0;border-bottom:0;font-size:.9rem}
  .doc dd{padding:.15rem 0 .85rem}
}

/* ---------- kiegészítések ---------- */
.chip{text-decoration:none}
.tile__go{pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  .mosaic .chip:nth-child(2){animation-delay:45ms}
  .mosaic .chip:nth-child(3){animation-delay:90ms}
  .mosaic .chip:nth-child(4){animation-delay:135ms}
  .mosaic .chip:nth-child(5){animation-delay:180ms}
  .mosaic .chip:nth-child(6){animation-delay:225ms}
  .mosaic .chip:nth-child(7){animation-delay:270ms}
  .mosaic .chip:nth-child(8){animation-delay:315ms}
  .mosaic .chip:nth-child(9){animation-delay:360ms}
}

/* ---------- 404 ---------- */
.nf{text-align:center;padding:clamp(3rem,10vw,6rem) 0}
.nf h1{font-size:clamp(3rem,12vw,6rem)}
.nf p{color:var(--soft)}

/* ---------- sudoku ---------- */
.sudoku{display:grid;grid-template-columns:repeat(9,1fr);gap:0;max-width:480px;margin:0 auto;background:var(--line);border:3px solid var(--ink);border-radius:8px;overflow:hidden}
.sudoku button{
  aspect-ratio:1;border:1px solid var(--line);background:var(--panel);color:var(--blue);
  font:inherit;font-weight:700;font-size:clamp(1rem,4.4vw,1.5rem);cursor:pointer;padding:0;
  display:grid;place-content:center;
}
.sudoku button[data-fix="1"]{color:var(--ink);font-weight:800;background:var(--panel-2)}
.sudoku button[data-sel="1"]{background:var(--blue);color:#fff}
.sudoku button[data-same="1"]{background:var(--panel-2);background:color-mix(in srgb,var(--blue) 22%,var(--panel))}
.sudoku button[data-bad="1"]{color:var(--red)}
.sudoku button:nth-child(3n){border-right:2px solid var(--ink)}
.sudoku button:nth-child(9n){border-right:0}
.sudoku button:nth-child(n+19):nth-child(-n+27),
.sudoku button:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--ink)}
.jegy{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;font-size:.5em;font-weight:600;color:var(--soft)}
.jegy i{display:grid;place-content:center;font-style:normal}
.supad{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;max-width:480px;margin:1rem auto 0}
.supad button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:11px;padding:.7rem .2rem;font:inherit;font-weight:800;font-size:1.1rem;cursor:pointer}
.supad button:hover{border-color:var(--ink)}
.supad__del{grid-column:span 5;font-size:.95rem;font-weight:700}

/* ---------- pasziánsz ---------- */
.sol{--cw:clamp(46px,9.4vw,74px);--ch:calc(var(--cw)*1.42);user-select:none}
.sol__top{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin-bottom:1rem}
.sol__gap{min-height:1px}
.sol__tab{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.pile{position:relative;min-height:var(--ch);border-radius:8px;border:1px dashed var(--line)}
.pile--tab{border-style:none;background:transparent}
.pile__jel,.pile__ujra{position:absolute;inset:0;display:grid;place-content:center;color:var(--soft);font-size:1.4rem}
.card{
  position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1.42;border-radius:7px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  font-weight:800;font-size:clamp(.78rem,2.4vw,1.05rem);cursor:pointer;
  box-shadow:0 1px 0 var(--line);
}
.card span{font-size:1.15em;font-weight:600}
.card--p{color:var(--red)}
.card--le{background:var(--blue);background:repeating-linear-gradient(45deg,var(--blue),var(--blue) 5px,color-mix(in srgb,var(--blue) 70%,#000) 5px,color-mix(in srgb,var(--blue) 70%,#000) 10px);border-color:transparent}
.card--sel{outline:3px solid var(--yellow);outline-offset:-1px;z-index:40}
.pile--waste .card{position:relative;margin-top:0}
.pile--stock .card,.pile--waste .card{width:100%}

/* ---------- mahjong ---------- */
.mjwrap{overflow:hidden;position:relative;margin-bottom:1rem}
.mjboard{position:relative;transform-origin:top left}
.mjt{
  position:absolute;width:52px;height:68px;border:0;border-radius:7px;cursor:pointer;
  background:linear-gradient(180deg,#FFFDF6,#E8E2CF);color:#23262F;
  font:inherit;font-weight:800;font-size:1.2rem;display:grid;place-content:center;
  box-shadow:2px 3px 0 rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.9);
}
.mjt--kor{color:#2458D4}
.mjt--bam{color:#0F8A5F}
.mjt--szam{color:#23262F}
.mjt--szel{color:#B3401A}
.mjt--sark0{color:#DE3A2C}
.mjt--sark1{color:#0F9C68}
.mjt--sark2{color:#6B7280}
.mjt--vir,.mjt--vir2{color:#C0399B}
.mjt--zar{filter:brightness(.82) saturate(.6);cursor:default}
.mjt--sel{outline:3px solid var(--yellow);outline-offset:-2px}
.mjt--tipp{animation:mjvill .4s 3}
@keyframes mjvill{50%{background:var(--yellow)}}

/* ---------- szótaláló ---------- */
.wgrid{display:grid;gap:.4rem;max-width:330px;margin:0 auto 1.2rem}
.wsor{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.wc{aspect-ratio:1;border:2px solid var(--line);border-radius:8px;display:grid;place-content:center;font-weight:800;font-size:clamp(1.2rem,5vw,1.7rem);text-transform:uppercase}
.wc--jo{background:var(--green);border-color:transparent;color:#fff}
.wc--van{background:var(--yellow);border-color:transparent;color:#2A2003}
.wc--nincs{background:var(--panel-2);border-color:transparent;color:var(--soft)}
.wkeys{display:grid;grid-template-columns:repeat(auto-fit,minmax(34px,1fr));gap:.3rem;max-width:520px;margin:0 auto}
.wkeys button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:7px;padding:.6rem .1rem;font:inherit;font-weight:700;cursor:pointer}
.wkeys button:disabled{opacity:.45;cursor:default}
.wkeys .wk--jo{background:var(--green);color:#fff;border-color:transparent}
.wkeys .wk--van{background:var(--yellow);color:#2A2003;border-color:transparent}
.wkeys .wk--nincs{background:var(--panel-2);color:var(--soft)}
.wkeys .wk--w{grid-column:span 3;font-size:.85rem}

/* ---------- szókereső ---------- */
.skwrap{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:1.4rem;align-items:start}
@media (max-width:640px){.skwrap{grid-template-columns:1fr}}
.skracs{display:grid;gap:2px;background:var(--line);border:2px solid var(--line);border-radius:10px;overflow:hidden}
.skracs button{
  aspect-ratio:1;border:0;background:var(--panel);color:var(--ink);font:inherit;font-weight:700;
  font-size:clamp(.62rem,2.1vw,.95rem);cursor:pointer;padding:0;
}
.skracs button[data-ok="1"]{background:var(--green);color:#fff}
.skracs button[data-sel="1"]{background:var(--yellow);color:#2A2003}
.sklista{list-style:none;padding:0;margin:0;display:grid;gap:.3rem;font-weight:650;font-size:.92rem}
.sklista li{padding:.3rem .5rem;border-radius:7px;background:var(--panel);border:1px solid var(--line)}
.sklista li[data-ok="1"]{text-decoration:line-through;color:var(--soft);background:transparent}

/* ---------- nyomtatás ---------- */
@media print{
  .top,footer,.crumbs,.article,.more,.hud,.hint,.msg,.skip{display:none !important}
  body{background:#fff;color:#000}
  .play{border:0;padding:0}
  .skracs button{border:1px solid #999;background:#fff;color:#000}
  .sklista li{border:0;background:transparent}
  .gamepage{padding-top:0}
}