/* CandleSheep Studio — crayon-on-paper, taken from the character sheet */
:root{--paper:#f6efe2;--paper-2:#efe4d0;--ink:#3b2a1e;--ink-2:#6e5a48;--wool:#7a5236;--green:#2f8a58;--red:#d0453a;--line:#d8c8ae;
  --f-head:"LXGW WenKai TC","Kaiti TC","BiauKai",serif;--f-body:"LXGW WenKai TC","PingFang TC","Microsoft JhengHei",sans-serif}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.75 var(--f-body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
.wrap{max-width:960px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 20px var(--f-head)}
.brand img{width:40px;height:auto}
.nav{display:flex;gap:18px;font-size:15px}
.nav a{text-decoration:none;color:var(--ink-2);white-space:nowrap}
.nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.hero{display:grid;grid-template-columns:1fr minmax(0,300px);align-items:center;gap:28px;padding-block:28px 40px}
.hero h1{font:700 clamp(36px,7vw,60px)/1.1 var(--f-head);margin:0 0 12px;text-wrap:balance}
.hero h1 .k{display:inline-block;width:.18em;height:.62em;margin:0 .04em .05em;border-radius:2px;vertical-align:middle;background:var(--green)}
.hero h1 .k+.k{background:var(--red);height:.46em}
.hero p{margin:0 0 6px;font-size:18px;max-width:34em}
.hero figure{margin:0;position:relative}
.hero figure img{display:block;width:100%;height:auto;animation:bob 3s ease-in-out infinite}
.hero figcaption{position:absolute;top:2%;left:-6%;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:4px 12px;font-size:15px;transform:rotate(-4deg)}
@keyframes bob{50%{transform:translateY(-6px) rotate(-1.5deg)}}
h2{font:700 26px var(--f-head);margin:0 0 16px;display:flex;align-items:baseline;gap:10px}
h2 small{font:400 14px var(--f-body);color:var(--ink-2)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:20px;padding-bottom:48px}
.game{display:flex;flex-direction:column;background:#fffaf1;border:2px solid var(--ink);border-radius:18px;overflow:hidden;text-decoration:none;
  box-shadow:4px 5px 0 var(--wool);transition:transform .15s,box-shadow .15s}
.game:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--wool)}
.game:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.game .thumb{aspect-ratio:16/10;background:#1d2a27 center/cover no-repeat;border-bottom:2px solid var(--ink)}
.game .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.game h3{margin:0;font:700 21px/1.3 var(--f-head)}
.game p{margin:0;font-size:15px;line-height:1.6}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.tag{font-size:12.5px;border:1.5px solid var(--line);border-radius:999px;padding:1px 10px;color:var(--ink-2)}
.play{align-self:flex-start;margin-top:6px;background:var(--green);color:#fff;border-radius:999px;padding:6px 18px;font-weight:700;font-size:15px}
.soon{border:2px dashed var(--line);border-radius:18px;display:grid;place-items:center;text-align:center;padding:28px;color:var(--ink-2);min-height:220px}
.soon b{display:block;font:700 19px var(--f-head);color:var(--ink)}
.doc{max-width:42em;padding-bottom:48px}
.doc h1{font:700 34px var(--f-head);margin:16px 0 4px}
.doc h3{font:700 20px var(--f-head);margin:28px 0 6px}
.doc .meta{color:var(--ink-2);font-size:14px}
footer{border-top:2px dashed var(--line);padding-block:20px 28px;font-size:14px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
@media (max-width:640px){.nav>a{display:none}.brand{font-size:18px}.hero{grid-template-columns:1fr;text-align:left}.hero figure{max-width:220px;justify-self:center;order:-1}.nav{gap:12px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* language switch: both languages ship in the page, one is shown */
html[data-lang="en"] .zh,html[data-lang="zh"] .en,html:not([data-lang]) .en{display:none!important}
.lang{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;flex:none}
.lang button{all:unset;cursor:pointer;font:700 13px var(--f-body);padding:2px 11px;color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lang button:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.nav{align-items:center}
.game .sub{font-size:14px;color:var(--ink-2);margin-top:-4px}
.hero p{font-size:18px}