/* Mozkuj – periodická tabulka her
   Design tokens: sešitový papír, inkoust z pera, 8 tiskových barev skupin. */

@font-face{font-family:"Shoulders";src:url(fonts/bsd-latin-ext-800.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Shoulders";src:url(fonts/bsd-latin-800.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson";src:url(fonts/ah-latin-ext-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson";src:url(fonts/ah-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson";src:url(fonts/ah-latin-ext-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson";src:url(fonts/ah-latin-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#E9EEF2;
  --grid:rgba(24,32,107,.075);
  --ink:#18206B;
  --ink-soft:#4A5290;
  --sheet:#FBFCFD;
  --line:#C3CCDA;
  --ok:#139A6E;
  --bad:#E02D4F;
  --g-hlavolamy:#FF5C9F;
  --g-cisla:#FF8A2E;
  --g-slova:#FFCC21;
  --g-deskove:#AEDB43;
  --g-kvizy:#2DC293;
  --g-hadanky:#52C9F2;
  --g-postreh:#98A2FF;
  --g-arkady:#C79AFF;
  --display:"Shoulders","Arial Narrow",Impact,sans-serif;
  --text:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
  --press:3px 3px 0 var(--ink);
  --press-lg:6px 6px 0 var(--ink);
  --r-tile:3px;--r-panel:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:17px/1.55 var(--text);
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
img,svg,canvas{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1280px,100% - 32px);margin-inline:auto}
main{flex:1}

/* ---------- Hlavička ---------- */
.top{display:flex;align-items:center;gap:18px;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--g-hlavolamy);border:2px solid var(--ink);border-radius:var(--r-tile);box-shadow:var(--press);font:800 22px/1 var(--display);position:relative}
.logo-mark small{position:absolute;top:2px;left:4px;font:700 9px/1 var(--text)}
.logo-name{font:800 30px/1 var(--display);letter-spacing:.01em}
.top nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.top nav a{text-decoration:none;padding:6px 12px;border-radius:999px;font-weight:700;font-size:15px}
.top nav a:hover{background:var(--sheet)}
.top nav a[aria-current]{background:var(--ink);color:var(--sheet)}

/* ---------- Dlaždice prvku ---------- */
.el{--c:var(--sheet);position:relative;display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:1/1.08;padding:5px 6px 6px;background:var(--c);border:2px solid var(--ink);border-radius:var(--r-tile);
  text-decoration:none;color:var(--ink);box-shadow:var(--press);transition:transform .12s,box-shadow .12s;min-width:0}
.el:hover,.el:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);z-index:2}
.el:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.el-n{font:700 11px/1 var(--text);font-variant-numeric:tabular-nums}
.el-s{font:800 clamp(22px,2.4vw,34px)/.9 var(--display);letter-spacing:-.01em;padding-top:4px}
.el-name{font:700 10.5px/1.15 var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el[data-g=hlavolamy]{--c:var(--g-hlavolamy)}.el[data-g=cisla]{--c:var(--g-cisla)}.el[data-g=slova]{--c:var(--g-slova)}
.el[data-g=deskove]{--c:var(--g-deskove)}.el[data-g=kvizy]{--c:var(--g-kvizy)}.el[data-g=hadanky]{--c:var(--g-hadanky)}
.el[data-g=postreh]{--c:var(--g-postreh)}.el[data-g=arkady]{--c:var(--g-arkady)}
.el.dim{opacity:.16;filter:grayscale(1);box-shadow:none;pointer-events:none}
.el .el-done{position:absolute;top:4px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--ink)}

/* ---------- Periodická tabulka ---------- */
.ptable{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:5px;margin:8px 0 28px;position:relative}
.ptable .gap-row{grid-column:1/-1;height:14px}
.ptable .fmark{display:grid;place-items:center;border:2px dashed var(--ink-soft);border-radius:var(--r-tile);font:800 15px var(--display);color:var(--ink-soft);opacity:.7}
.phead{grid-column:3/13;grid-row:1/4;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:0 2% 6px 3%}
.phead h1{font:800 clamp(38px,5.2vw,76px)/.86 var(--display);margin:0 0 10px;letter-spacing:-.005em}
.phead p{margin:0 0 12px;max-width:52ch;font-size:16px}
.search{display:flex;gap:8px;align-items:center;max-width:430px}
.search input{flex:1;min-width:0;padding:9px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet);box-shadow:var(--press)}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.legend button{display:flex;align-items:center;gap:7px;padding:4px 11px 4px 5px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet);font-size:14px;font-weight:700;cursor:pointer}
.legend button i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);background:var(--c)}
.legend button[aria-pressed=true]{background:var(--ink);color:var(--sheet)}
.legend button[aria-pressed=true] i{border-color:var(--sheet)}
.count{font-size:14px;color:var(--ink-soft);margin-top:8px;min-height:1.5em}

@media (max-width:1020px){
  .ptable{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));}
  .ptable .el{grid-row:auto!important;grid-column:auto!important}
  .ptable .gap-row,.ptable .fmark{display:none}
  .phead{grid-column:1/-1;grid-row:auto;padding:4px 0 14px}
  .el-s{font-size:28px}
}

/* ---------- Úvodní texty a seznamy ---------- */
.prose{max-width:70ch}
.prose h2,.section-h{font:800 34px/1 var(--display);margin:34px 0 10px}
.prose h3{font-size:19px;margin:22px 0 6px}
.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:10px 0 40px}
.group-card{background:var(--sheet);border:2px solid var(--ink);border-radius:var(--r-panel);padding:16px 18px;border-top:12px solid var(--c)}
.group-card h3{font:800 26px/1 var(--display);margin:0 0 6px}
.group-card h3 a{text-decoration:none}
.group-card p{margin:0;font-size:15px}
.minirow{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;margin:10px 0 0}

/* ---------- Stránka hry ---------- */
.game-head{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:end;margin:10px 0 18px}
.game-head .el{width:104px;cursor:default;pointer-events:none}
.game-head .el .el-s{font-size:52px}
.game-head .el .el-name{font-size:12px}
.game-head h1{font:800 clamp(40px,6vw,68px)/.9 var(--display);margin:0}
.game-head p{margin:6px 0 0;max-width:62ch}
.crumbs{font-size:14px;margin-bottom:6px}
.crumbs a{font-weight:700}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
@media (max-width:900px){.layout{grid-template-columns:1fr}.game-head .el{width:80px}.game-head .el .el-s{font-size:38px}}
.board{background:var(--sheet);border:2px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--press-lg);padding:18px;min-height:300px;position:relative}
@media (max-width:560px){.board{padding:12px;box-shadow:var(--press)}}
.side{display:flex;flex-direction:column;gap:18px}
.side .howto{background:var(--sheet);border:2px solid var(--ink);border-radius:var(--r-panel);padding:14px 16px;font-size:15.5px}
.side .howto h2{font:800 24px/1 var(--display);margin:0 0 8px}
.side .howto p{margin:0 0 8px}
.side .howto ul{margin:0 0 8px;padding-left:20px}

/* ---------- Ovládací prvky her ---------- */
.bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet);font-weight:700;cursor:pointer;box-shadow:var(--press);text-decoration:none;line-height:1.2;touch-action:manipulation}
.btn:hover{background:#fff}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--ink);color:var(--sheet)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.small{padding:5px 11px;font-size:14px}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--sheet)}
.seg button{border:0;background:none;padding:6px 12px;font-weight:700;font-size:14px;cursor:pointer}
.seg button+button{border-left:2px solid var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--sheet)}
.stats{display:flex;gap:16px;flex-wrap:wrap;font-size:15px;margin-left:auto}
.stats b{font-variant-numeric:tabular-nums;font-size:17px}
.msg{min-height:1.6em;font-weight:700;margin:10px 0 0;text-align:center}
.msg.ok{color:var(--ok)}.msg.bad{color:var(--bad)}
.center{display:flex;flex-direction:column;align-items:center}
.input{padding:9px 14px;border:2px solid var(--ink);border-radius:8px;background:#fff;min-width:0}
.big-input{font-size:26px;text-align:center;width:min(260px,100%);font-variant-numeric:tabular-nums}
.hint{font-size:14px;color:var(--ink-soft);text-align:center;margin:8px 0 0}

/* Mřížkové hlavolamy */
.grid{display:grid;gap:0;user-select:none;-webkit-user-select:none;touch-action:manipulation;margin-inline:auto;width:100%}
.cell{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line);background:#fff;font:700 clamp(14px,3.6vw,24px)/1 var(--text);cursor:pointer;position:relative;padding:0;color:var(--ink)}
.cell.given{color:var(--ink);background:#F1F4F8;cursor:default}
.cell.sel{background:#FFF1B3}
.cell.peer{background:#F6F8FB}
.cell.same{background:#E4E8FF}
.cell.err{color:var(--bad)}
.cell.on{background:var(--ink);color:var(--sheet)}

/* Kvíz */
.quiz-q{font:800 clamp(26px,4vw,40px)/1.05 var(--display);text-align:center;margin:12px 0 18px;min-height:2.1em;display:flex;align-items:center;justify-content:center}
.quiz-sub{text-align:center;color:var(--ink-soft);font-size:15px;margin:-10px 0 14px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.opts{grid-template-columns:1fr}}
.opt{padding:13px 14px;border:2px solid var(--ink);border-radius:10px;background:#fff;font-weight:700;cursor:pointer;text-align:left;box-shadow:var(--press);min-height:56px}
.opt:hover:not(:disabled){background:#FFF6CF}
.opt.right{background:var(--ok);color:#fff}
.opt.wrong{background:var(--bad);color:#fff}
.opt:disabled{cursor:default}
.progress{display:flex;gap:4px;margin:0 0 6px}
.progress i{flex:1;height:8px;border-radius:4px;background:var(--line)}
.progress i.ok{background:var(--ok)}.progress i.bad{background:var(--bad)}.progress i.now{background:var(--ink)}

/* Výsledek */
.result{text-align:center;padding:18px 8px}
.result h2{font:800 48px/1 var(--display);margin:0 0 6px}
.result p{margin:0 0 14px}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(233,238,242,.86);border-radius:var(--r-panel);z-index:5}
.overlay>div{background:var(--sheet);border:2px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--press-lg);padding:20px 26px;text-align:center;max-width:90%}
.overlay h2{font:800 40px/1 var(--display);margin:0 0 6px}
.overlay p{margin:0 0 12px}

canvas.play{display:block;margin:0 auto;background:#fff;border:2px solid var(--ink);border-radius:6px;touch-action:none;max-width:100%;height:auto}
.pad{display:none;justify-content:center;gap:8px;margin-top:12px}
.pad .btn{min-width:58px;min-height:48px;font-size:20px}
@media (hover:none){.pad{display:flex}}

.cards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pcard{width:62px;height:88px;border:2px solid var(--ink);border-radius:7px;background:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:4px 5px;font:700 17px/1 var(--text);box-shadow:2px 2px 0 var(--ink);user-select:none}
.pcard.red{color:var(--bad)}
.pcard.back{background:var(--ink) repeating-linear-gradient(45deg,transparent 0 6px,rgba(255,255,255,.12) 6px 12px)}
.pcard .mid{font-size:26px;text-align:center}
.pcard .bot{transform:rotate(180deg)}

/* Reklama a patička */
.ad{display:none;margin:22px auto;text-align:center;min-height:100px}
.ads-on .ad{display:block}
.related{margin:34px 0}
.related .minirow{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.foot{margin-top:50px;padding:26px 0 36px;border-top:2px solid var(--ink);font-size:15px}
.foot .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--sheet);padding:10px 18px;border-radius:999px;font-weight:700;z-index:50;box-shadow:var(--press)}

/* Úvodní animace: tabulka se „vytiskne“ v pořadí atomových čísel */
@media (prefers-reduced-motion:no-preference){
  .ptable.boot .el{animation:print .32s both;animation-delay:calc(var(--i)*6ms)}
  @keyframes print{from{opacity:0;transform:translate(-4px,-4px);box-shadow:0 0 0 var(--ink)}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Mobil: navigace jako vodorovný pás pod logem */
@media (max-width:900px){
  .top{flex-wrap:wrap;gap:10px;padding-bottom:6px}
  .top nav{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{white-space:nowrap;background:var(--sheet);border:2px solid var(--ink)}
  .top nav a[aria-current]{background:var(--ink)}
  .ptable{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
}
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{white-space:nowrap;flex:0 0 auto}
@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}

/* Mobil: celý název hry pod značkou, na dva řádky */
@media (max-width:1020px){
  .ptable,.minirow{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))!important;gap:7px}
  .ptable .el,.minirow .el{aspect-ratio:auto;min-height:96px;gap:4px}
  .ptable .el-name,.minirow .el-name{white-space:normal;font-size:12px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
}

/* SEO texty pod hrou */
.seo{margin-top:30px}
.seo h2{font:800 30px/1 var(--display);margin:22px 0 8px}
.seo ul{padding-left:20px}
.faq dt{font-weight:700;margin-top:10px}
.faq dd{margin:2px 0 0}
.more{margin:14px 0 0;font-weight:700}
.crumbs span{color:var(--ink-soft)}
.glist{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px}
.glist a{text-decoration:none;border-bottom:1px solid var(--line)}
.glist a:hover{border-color:var(--ink)}

/* Ikonka hry v pozadí dlaždice */
.el{overflow:hidden}
.el-ic{position:absolute;right:-9%;bottom:16%;width:64%;height:auto;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.26;pointer-events:none}
.el-n,.el-s,.el-name{position:relative}
.el:hover .el-ic{opacity:.4}
.el .el-done{z-index:1}
.el-ic{top:6%;right:6%;bottom:auto;width:40%;opacity:.42;stroke-width:1.8}
@media (max-width:1020px){
  .ptable .el-ic,.minirow .el-ic{top:auto;right:-9%;bottom:16%;width:64%;opacity:.26;stroke-width:1.6}
}
.toplist{position:absolute;left:0;bottom:0;width:1px;height:1px;overflow:hidden}