:root{
  --scale:1;
  --ink:#16222b; --muted:#43525c; --bg:#f7f3ea; --card:#ffffff; --line:#cfc6b4;
  --pri:#1d5a5e; --pri-ink:#ffffff; --pri-soft:#dcecea;
  --good:#1f6b3a; --goodbg:#e2f2e6; --soft:#8a3d14; --softbg:#fbe9dc;
  --sel:#ffe08a; --hint:#c46a00; --radius:18px;
  --c-classic:#2d5b8a; --c-words:#7a4a1d; --c-memory:#6a3d7a; --c-trivia:#1d5a5e;
  --c-numbers:#2f6b2f; --c-puzzles:#8a2d3b; --c-relax:#2f6f8a; --c-talk:#6b5a1d;
}
body.contrast{ --ink:#000; --muted:#1a1a1a; --bg:#fff; --line:#000; --pri:#003a40; --card:#fff; }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; font-size:calc(24px * var(--scale));}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.45;}
button,a,input,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:5px solid var(--hint);outline-offset:3px}
.app{max-width:1180px;margin:0 auto;padding:0 18px 48px}
h1{font-size:1.6rem;line-height:1.2;margin:.4em 0 .3em;font-family:Georgia,"Times New Roman",serif}
h2{font-size:1.35rem;line-height:1.25;margin:.5em 0 .3em;font-family:Georgia,"Times New Roman",serif}
h1:focus,h2:focus{outline:none}
p{margin:.4em 0}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:72px;min-width:72px;padding:12px 28px;border-radius:999px;border:3px solid var(--pri);background:#fff;color:var(--pri);text-decoration:none;font-weight:700;font-size:1rem;text-align:center}
.btn.pri{background:var(--pri);color:var(--pri-ink)}
.btn.big{min-height:88px;font-size:1.15rem;padding:14px 36px}
.btn.wide{width:100%;max-width:640px}
.btn[disabled]{opacity:.4;cursor:default}
.btn svg{width:1.3em;height:1.3em;flex:none}

.topbar{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:3px solid var(--line);margin-bottom:12px;position:sticky;top:0;background:var(--bg);z-index:5}
.topbar h1{flex:1;margin:0;font-size:1.3rem;text-align:center;min-width:0;overflow-wrap:break-word;order:2}
.topbar .btn{min-height:72px;padding:8px 22px}
.clock{font-size:.9rem;color:var(--muted);min-width:4.5em;text-align:right}

.hero{text-align:center;padding:26px 0 8px}
.hero h1{font-size:2rem;margin:0}
.hero p{font-size:1.05rem;color:var(--muted)}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;margin-top:18px}
.cat{display:flex;align-items:center;gap:18px;min-height:120px;padding:18px;border-radius:var(--radius);background:var(--card);border:3px solid var(--line);text-decoration:none;color:var(--ink)}
.cat .tile{width:84px;height:84px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.cat .tile svg{width:58px;height:58px}
.cat b{display:block;font-size:1.2rem;font-family:Georgia,serif}
.cat span{display:block;color:var(--muted);font-size:.92rem}
.homelinks{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:26px 0 8px}

.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.gcard{display:flex;align-items:center;gap:16px;min-height:110px;padding:16px;border-radius:var(--radius);background:var(--card);border:3px solid var(--line);text-decoration:none;color:var(--ink)}
.gcard .tile{width:72px;height:72px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.gcard .tile svg{width:50px;height:50px}
.gcard b{display:block;font-size:1.1rem;font-family:Georgia,serif}
.gcard span{display:block;color:var(--muted);font-size:.9rem}
.gcard .done{color:var(--good);font-weight:700}

.levels{display:flex;flex-direction:column;gap:18px;align-items:center;margin:20px 0}
.lvl{width:100%;max-width:680px;min-height:110px;border-radius:var(--radius);border:3px solid var(--pri);background:#fff;color:var(--ink);text-align:left;padding:16px 26px;display:flex;align-items:center;gap:20px;text-decoration:none}
.lvl b{font-size:1.25rem;display:block;color:var(--pri)}
.lvl span{display:block;color:var(--muted);font-size:.95rem}
.lvl .star{margin-left:auto;font-size:1rem;color:var(--good);font-weight:700;white-space:nowrap}
.gdesc{text-align:center;font-size:1.05rem;max-width:800px;margin:6px auto}

.instr{font-size:1.2rem;font-weight:700;text-align:center;margin:8px auto 4px;max-width:900px;min-height:1.5em}
.prog{text-align:center;color:var(--muted);font-size:.95rem;min-height:1.3em}
.area{margin:10px auto;max-width:1100px}
.tools{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:3px solid var(--line)}
.hint-glow{outline:6px dashed var(--hint)!important;outline-offset:4px}
.msg{text-align:center;font-size:1.1rem;min-height:1.6em;margin:10px 0;font-weight:600}
.msg.good{color:var(--good)} .msg.soft{color:var(--soft)}

.finish{text-align:center;padding:30px 0}
.finish svg.sun{width:150px;height:150px}
.finish h1{font-size:2rem}
.finish .line{font-size:1.2rem;max-width:760px;margin:10px auto}

.set{max-width:760px;margin:0 auto}
.set fieldset{border:3px solid var(--line);border-radius:var(--radius);padding:14px 20px;margin:16px 0;background:#fff}
.set legend{font-weight:700;font-size:1.1rem;padding:0 8px}
.opts{display:flex;gap:12px;flex-wrap:wrap}
.opt{min-height:72px;min-width:120px;border-radius:14px;border:3px solid var(--line);background:#fff;font-weight:700;padding:8px 18px}
.opt[aria-pressed="true"]{border-color:var(--pri);background:var(--pri);color:#fff}
input[type=range]{width:100%;height:64px;accent-color:var(--pri)}

.qtext{font-size:1.3rem;text-align:center;font-weight:600;max-width:900px;margin:10px auto 18px;font-family:Georgia,serif}
.choices{display:grid;grid-template-columns:1fr;gap:16px;max-width:760px;margin:0 auto}
@media (min-width:820px){.choices.two{grid-template-columns:1fr 1fr}}
.choice{min-height:84px;border-radius:16px;border:3px solid var(--pri);background:#fff;color:var(--ink);font-size:1.15rem;font-weight:600;padding:12px 20px;text-align:center}
.choice.right{background:var(--goodbg);border-color:var(--good);color:var(--good)}
.choice.nope{background:#eee;border-color:#aaa;color:#666;text-decoration:line-through}
.choice.sel{background:var(--sel)}
.fact{max-width:800px;margin:14px auto;text-align:center;font-size:1.05rem;background:var(--goodbg);border-radius:14px;padding:12px 18px}
.cards-grid{display:grid;gap:14px;margin:0 auto;max-width:980px}
.mcard{aspect-ratio:1/1;border-radius:16px;border:3px solid var(--pri);background:var(--pri-soft);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;padding:6px;min-height:72px;color:var(--ink)}
.mcard svg{width:78%;height:78%}
.mcard.back{background:var(--pri) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='6' fill='%23ffffff' fill-opacity='.25'/%3E%3C/svg%3E")}
.mcard.matched{background:var(--goodbg);border-color:var(--good)}
.tilegrid{display:grid;gap:10px;margin:0 auto;max-width:900px}
.big-pic{display:flex;justify-content:center}
.big-pic svg{width:min(90vw,560px);height:auto}
.wordbox{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0}
.slot{width:72px;height:84px;border-bottom:5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;text-transform:uppercase}
.keys{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:980px;margin:12px auto}
.key{min-width:72px;min-height:72px;border-radius:14px;border:3px solid var(--pri);background:#fff;font-size:1.3rem;font-weight:700;text-transform:uppercase}
.key.used{opacity:.3}
.cardtext{max-width:820px;margin:16px auto;background:#fff;border:3px solid var(--line);border-radius:var(--radius);padding:26px;font-size:1.3rem;text-align:center;font-family:Georgia,serif}
@media (max-width:600px){html{font-size:calc(22px * var(--scale))} .topbar .btn{padding:8px 14px}}

@media (orientation:landscape) and (max-height:860px){.choices{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:980px;gap:12px}.choice{min-height:72px}.big-pic svg{max-height:42vh;width:auto;max-width:min(90vw,560px)}.qtext{margin:6px auto 10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.searchwrap{max-width:980px;margin:18px auto 6px}
input.search{width:100%;min-height:76px;font-size:1.15rem;padding:10px 22px;border-radius:999px;border:3px solid var(--pri);background:#fff}
.searchwrap .glist{margin-top:14px}
.filt{justify-content:center;margin:12px 0 18px}
a.opt{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink)}
a.opt[aria-pressed="true"]{color:#fff}
.cat .skill{color:var(--pri);font-weight:700;font-size:.85rem;margin-top:4px}


.tbtns{display:contents}
.tbtns>*{order:3}
.tbtns>:first-child:not(.pri){order:1}
.topbar{transition:transform .25s ease-out}
.topbar.folding{transform:translateY(-110%)}
.menutab{display:none}
body.menu-hidden .topbar{display:none}
body.menu-hidden #app{padding-top:64px}
body.menu-hidden .menutab{display:inline-flex;position:fixed;top:6px;right:6px;z-index:30;min-height:56px;padding:6px 14px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.hidemenu svg,.menutab svg{width:26px;height:26px}
@media (prefers-reduced-motion: reduce){.topbar{transition:none}}
@media (max-width:600px){
  .topbar{flex-wrap:wrap;gap:8px;padding:8px 0;margin-bottom:8px}
  .topbar h1{order:0;flex-basis:100%;font-size:1.15rem;line-height:1.25}
  .tbtns{display:flex;width:100%;gap:8px;align-items:center}
  .tbtns>*,.tbtns>:first-child:not(.pri){order:0}
  .tbtns .hidemenu{margin-left:auto}
  .topbar .btn{min-height:56px;padding:6px 10px;font-size:1rem}
  .topbar .btn svg{width:22px;height:22px}
}


.likes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0 18px}
.likes.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn.like{min-height:72px;justify-content:center;font-size:1.15rem;border:3px solid var(--line)}
.btn.like[aria-pressed="true"]{background:var(--pri,#1f5f8b);color:#fff;border-color:var(--pri,#1f5f8b)}
.btn.like[aria-pressed="true"]::before{content:"\2713";margin-right:8px;font-weight:700}
.picks{margin:8px 0 18px}
.picks h2{margin:6px 0 10px;font-size:1.35rem}
.gskill{margin:0 0 8px}
@media (max-width:600px){.likes,.likes.two{grid-template-columns:1fr 1fr;gap:8px}.btn.like{min-height:64px;font-size:1.05rem;padding:6px 8px}}

@media (max-width:600px){.opts.filt{display:grid;grid-template-columns:1fr 1fr;gap:8px}.opts.filt .opt{min-height:56px;padding:6px 8px;font-size:1rem;margin:0;display:flex;align-items:center;justify-content:center;text-align:center}}

@media (orientation:landscape) and (max-height:920px){
  .play .topbar{padding:6px 0;margin-bottom:6px}
  .play .topbar .btn{min-height:64px;padding:4px 20px}
  .play .instr{margin:4px auto 2px}
  .play .prog:empty{min-height:0}
  .play .area{margin:6px auto}
}

@media (orientation:landscape) and (max-height:860px){
  html:has(main.play){font-size:calc(22px * var(--scale))}
  .play .instr{line-height:1.25}
  .play .prog{line-height:1.25}
}

@media (orientation:landscape) and (max-height:920px){
  .play .pk-relax3 .stg{max-width:min(100%,720px,calc((100vh - 420px) * 4 / 3))}
  .play .pk-relax3 .stg.sq{max-width:min(100%,600px,calc(100vh - 420px))}
  .play .pk-relax3 .stg.tall{max-width:min(100%,720px,calc((100vh - 380px) * 4 / 3))}
}

@media (orientation:landscape) and (max-height:920px) and (min-width:900px){
  .play .pk-relax3{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:repeat(10,min-content) 1fr;column-gap:20px;align-items:start}
  .play .pk-relax3>*{grid-column:2;min-width:0}
  .play .pk-relax3>.stg,.play .pk-relax3>.stg.sq,.play .pk-relax3>.stg.tall{grid-column:1;grid-row:1 / 12;width:100%;max-width:min(100%,calc((100vh - 190px) * 4 / 3));margin:0 auto}
  .play .pk-relax3>.stg.sq{max-width:min(100%,calc(100vh - 190px))}
}
@media (orientation:landscape) and (max-height:920px) and (min-width:900px){
  .play .pk-relax3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .play .pk-relax3 .ctl{gap:10px;margin:8px auto}
  .play .pk-relax3 .opt{min-width:100px;min-height:76px}
}
@media (orientation:landscape) and (max-height:920px) and (min-width:900px){
  .play .pk-relax3.g-r46{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
@media (orientation:landscape) and (max-height:920px){
  .play .k3-pic svg{width:min(60vw,240px,26vh)}
  .play .k3-paper{padding:10px 20px;margin:6px auto;font-size:1.05rem}
  .play .pk-k3 .k3-row{margin:6px 0}
}

:root{--tapmin:64px}
@media (max-width:600px){
  :root{--tapmin:44px}
  main.play{margin-left:-12px;margin-right:-12px}
  .play :is(.pk-c2,.pk-c3,.pk-c4){--bgap:2px;--bpad:2px}
  .play :is(.pk-c2,.pk-c3,.pk-c4) .felt{border-width:2px;padding:8px 2px;border-radius:12px}
}
@media (max-width:600px){
  .play .pk-c2.g-c26{--kst:38px;--kgap:2px;--kpad:3px;--kbd:2px}
  .play .g-c26 div[style*="span 2"] span:last-child{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.8rem}
}
@media (max-width:600px){
  .play .pk-c4 .hfan{flex-wrap:wrap;row-gap:6px}
}
@media (orientation:landscape) and (max-height:920px){
  .play .topbar{position:relative}
}
@media (max-width:600px){
  #app .area :is(.sc,.mz-c,.z-cell,.wscell,.nt){min-height:44px;min-width:0}
  #app .area .t{min-width:44px;min-height:44px}
  #app .area :is(.hs,.col){min-width:44px}
  #app .area .hc .t{width:auto;min-width:44px}
  #app .area .t3-b{min-width:44px}
}
@media (max-width:600px){
  #app .area .pt{width:44px;min-width:44px}
  #app .area .abc{grid-template-columns:repeat(var(--cols),minmax(44px,1fr))}
  #app .area :is(.z-grid,.wsgrid,.cw,.fence){gap:2px}
  #app .area .chart{gap:2px}
}
@media (max-width:600px){
  #app .area .chart .t{min-width:0;min-height:0}
}
@media (max-width:600px){
  #app .area .row2{flex-wrap:wrap}
  #app .area :is(.gp,.bed,.disp){width:auto;max-width:100%}
  #app .area .bed .c{width:auto;height:auto;aspect-ratio:1/1;min-width:0}
  #app .area .disp{flex-wrap:wrap;gap:8px;padding:8px}
}
@media (max-width:600px){
  #app .area .w5-c{width:100%;height:auto;aspect-ratio:1/1;min-width:0}
}
#app .area .pk-c4 .ycol>.strip{height:max(44px,calc(var(--cw)*var(--sv,.4)))}
#app .area .pk-c4 .hfan>.strip{width:max(44px,calc(var(--cw)*.4))}
@media (max-width:600px){
  #app .area .pk-classic :is(.pile,.free,.sq){min-width:44px;min-height:44px}
}
@media (max-width:600px){
  .play .pk-c2{--kbd:2px;--kpad:3px}
  #app .area .pk-c2 .grid{gap:2px}
}
@media (max-width:600px){
  #app .area .pk-c4 .hfan{flex-wrap:wrap;row-gap:6px}
}
@media (max-width:600px){
  #app .area .pk-classic :is(.row1,.tab){gap:2px}
}
@media (max-width:600px){
  .play .pk-c4{--fanwrap:wrap}
}
@media (max-width:600px){
  #app .area .w6-book{font-size:.8rem;letter-spacing:0;padding-left:1px;padding-right:1px}
}