/* Layout: a wall of 70s posters — hero is an orange poster with rainbow rings and the ball troupe; every section is its own scallop-edged color poster with paper cards on it */
:root{
  --mint:#F1E4C8; --mint-deep:#F2B43A; --foam:#FFF8EA; --ink:#1F2C38; --ink-soft:#5A5148;
  --felt:#2F9E6B; --felt-deep:#1F7A50; --rail:#8A5A2B; --lime:#F2B43A; --card:#FFF8EA;
  --cream:#F4EAD5; --mustard:#F2B43A; --orange:#EE8530; --tomato:#D63B2A; --rose:#E86A5C; --teal:#2F7D84; --navy:#1F2C38; --paper:#FFF8EA;
  --script:"Shrikhand","RocknRoll One",cursive; --hand:"Yellowtail","Shrikhand",cursive; --cond:"Oswald","RocknRoll One",sans-serif;
  --b1:#F7C531; --b2:#2F6FD6; --b3:#E5483F; --b4:#7A4FB8; --b5:#F28C28; --b6:#2E9E5B; --b7:#9B2F2F; --b8:#2A2A2A; --b9:#F7C531;
  --display:"Shrikhand","RocknRoll One",cursive;
  --pop:"RocknRoll One","Hiragino Maru Gothic ProN",sans-serif;
  --body:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--mint);color:var(--ink)}
body{margin:0;font-family:var(--body);font-weight:400;font-size:16px;line-height:1.9;overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:3px dashed var(--ink);outline-offset:3px;border-radius:8px}

/* bubbles */
.bubbles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bubbles i{position:absolute;bottom:-60px;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55) 0 18%,transparent 19%);animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-115vh) translateX(var(--dx,0))}}
@media (prefers-reduced-motion:reduce){.bubbles i{animation:none;bottom:auto}}

.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto}

/* nav */
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;padding-block:18px 0}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none}
.mark svg{width:40px;height:40px}
.mark b{font-family:var(--display);font-size:18px;letter-spacing:.06em;line-height:1}
.mark small{display:block;font-family:var(--display);font-size:11px;letter-spacing:.3em;color:var(--ink-soft)}
nav{display:flex;flex-wrap:wrap;gap:4px 18px}
nav a{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-decoration:none;padding:4px 0}
nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--foam)}

/* hero */
.hero{text-align:center;padding-block:28px 10px}
.hero h1{margin:0;font-family:var(--display);font-weight:700;color:var(--foam);font-size:clamp(40px,9vw,92px);line-height:.95;letter-spacing:.04em;
  text-shadow:0 4px 0 var(--mint-deep),0 8px 18px rgba(38,48,46,.12);text-wrap:balance}
.hero h1 span{display:block;font-size:.42em;letter-spacing:.32em;margin-top:.35em;color:var(--ink)}
.hero p.lead{margin:14px auto 0;max-width:30em;font-family:var(--pop);font-weight:800;font-size:clamp(17px,3.4vw,21px);line-height:1.7}
.troupe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 4px;max-width:640px;margin:22px auto 0}
.troupe button{all:unset;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.troupe button:focus-visible{outline:3px dashed var(--ink)}
.troupe svg{width:100%;max-width:110px;height:auto;filter:drop-shadow(0 8px 6px rgba(38,48,46,.18));transition:transform .2s}
.troupe button:hover svg{transform:translateY(-6px) rotate(-6deg)}
.troupe .row2{grid-column:span 1}
.bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.bob{animation:none}}
.down{display:block;margin:18px auto 0;width:28px;height:28px;color:var(--foam)}

/* section */
section{padding-block:72px 8px}
.st{margin:0 0 6px;text-align:center;font-family:var(--display);font-weight:700;color:var(--foam);font-size:clamp(40px,8vw,64px);letter-spacing:.1em;line-height:1;text-shadow:0 4px 0 var(--mint-deep)}
.sj{margin:0 0 28px;text-align:center;font-family:var(--pop);font-weight:800;font-size:15px;color:var(--ink-soft)}
.prose{max-width:36em;margin:0 auto;font-size:16.5px;line-height:2}
.prose p{margin:0 0 1.2em}
ruby rt{font-size:.5em;font-weight:700}

/* characters */
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cc{all:unset;cursor:pointer;display:grid;justify-items:center;gap:2px;padding:14px 8px 12px;border-radius:24px;background:rgba(255,255,255,.35);text-align:center}
.cc:hover,.cc[aria-pressed="true"]{background:var(--card)}
.cc:focus-visible{outline:3px dashed var(--ink)}
.cc svg{width:96px;height:96px}
.cc b{font-family:var(--pop);font-weight:800;font-size:17px;line-height:1.4}
.cc small{font-size:12px;color:var(--ink-soft);line-height:1.5}
.profile{max-width:640px;margin:18px auto 0;padding:18px 22px;border-radius:24px;background:var(--card);display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center}
.profile svg{width:96px;height:96px}
.profile h3{margin:0;font-family:var(--pop);font-weight:800;font-size:20px}
.profile p{margin:4px 0 0;font-size:15px;line-height:1.8}

/* game */
.gm{max-width:920px;margin:0 auto;padding:18px clamp(12px,3vw,24px) 20px;border-radius:32px;background:var(--card)}
.gm-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.gm-no{display:inline-block;font-family:var(--display);font-size:14px;letter-spacing:.14em;padding:2px 12px;border-radius:999px;background:var(--ink);color:var(--foam);margin-right:10px;vertical-align:3px}
.gm-name{font-family:var(--pop);font-weight:800;font-size:clamp(18px,4vw,22px)}
.gm-stars{font-size:22px;letter-spacing:2px;color:rgba(38,48,46,.16);white-space:nowrap}
.gm-stars .on{color:var(--b1)}
.gm-goal{margin:6px 0 10px;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.gm-goal b{color:var(--ink)}
.gm-table{border-radius:18px;overflow:hidden;background:var(--rail);box-shadow:0 8px 0 rgba(38,48,46,.12)}
.gm-table canvas{display:block;width:100%;max-width:100%;height:auto;touch-action:none;cursor:crosshair}
.gm-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.gm-aim{display:flex;align-items:center;gap:6px}
.gm-b{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--mint);font-size:16px}
.gm-deg{min-width:5.2em;text-align:center;font-size:15px}
.gm-deg b{font-family:var(--display);font-size:20px;font-variant-numeric:tabular-nums}
.gm-pow{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--mint)}
.gm-p{all:unset;cursor:pointer;min-height:38px;padding:0 14px;border-radius:999px;font-family:var(--pop);font-weight:800;font-size:14px;display:grid;place-items:center}
.gm-p[aria-checked="true"]{background:var(--ink);color:var(--foam)}
.gm-shot{all:unset;cursor:pointer;min-height:52px;padding:0 28px;border-radius:999px;background:var(--b3);color:var(--foam);font-family:var(--pop);font-weight:800;font-size:18px;box-shadow:0 5px 0 #A92F28;display:grid;place-items:center}
.gm-shot:active{transform:translateY(3px);box-shadow:0 2px 0 #A92F28}
.gm-shot[disabled]{opacity:.45;cursor:default}
.gm-b:focus-visible,.gm-p:focus-visible,.gm-shot:focus-visible,.gm-link:focus-visible,.gm-st:focus-visible{outline:3px dashed var(--ink);outline-offset:2px}
.gm-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;font-size:14px}
.gm-sw{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.gm-sw input{width:18px;height:18px;accent-color:var(--b6)}
.gm-link{all:unset;cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.gm-try{margin-left:auto;color:var(--ink-soft)}
.gm-try b{font-family:var(--display);font-size:17px;color:var(--ink)}
.gm-msg{margin:12px 0 0;padding:12px 16px;border-radius:16px;background:var(--mint);font-family:var(--pop);font-weight:800;font-size:16px;line-height:1.6;min-height:3.2em}
.gm-msg.win{background:var(--b1)}
.gm-stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:16px}
@media (max-width:560px){.gm-stages{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gm-st{all:unset;cursor:pointer;display:grid;justify-items:center;gap:0;padding:8px 4px;border-radius:14px;background:var(--mint);text-align:center}
.gm-st b{font-family:var(--display);font-size:20px;line-height:1.2}
.gm-st small{font-size:11px;letter-spacing:1px;color:rgba(38,48,46,.22)}
.gm-st small .on{color:#E0A800}
.gm-st[aria-current="true"]{background:var(--ink);color:var(--foam)}
.gm-st[aria-current="true"] small{color:#C9D6D2}
.gm-st[disabled]{opacity:.4;cursor:default}
.gm-note{margin:12px 0 0;font-size:12.5px;line-height:1.7;color:var(--ink-soft)}
/* quiz */
.qz{max-width:720px;margin:0 auto;padding:22px clamp(16px,4vw,30px);border-radius:32px;background:var(--card)}
.qz-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft)}
.qz-day{font-family:var(--display);letter-spacing:.1em;font-size:14px}
.qz-who{display:inline-flex;align-items:center;gap:6px}
.qz-who svg{width:36px;height:36px}
.qz-q{margin:10px 0 14px;font-family:var(--pop);font-weight:800;font-size:clamp(18px,4.2vw,22px);line-height:1.6;text-wrap:balance}
.qz-ops{display:grid;gap:8px}
.qz-op{all:unset;cursor:pointer;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:var(--mint);font-size:15.5px;line-height:1.6}
.qz-op i{font-style:normal;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--foam);font-family:var(--display);font-size:16px}
.qz-op:focus-visible{outline:3px dashed var(--ink)}
.qz-op.right{background:#CDEFD9;box-shadow:inset 0 0 0 3px var(--b6)}
.qz-op.wrong{background:#F9D6D3;box-shadow:inset 0 0 0 3px var(--b3)}
.qz-op[disabled]{cursor:default}
.qz-ans{margin-top:14px;padding:14px 16px;border-radius:16px;background:var(--mint);font-size:15px;line-height:1.85}
.qz-ans b{font-family:var(--pop);font-weight:800;font-size:17px;display:block}
/* zukan lock */
.cc.lock svg{filter:brightness(0) opacity(.22)}
.cc.lock b{letter-spacing:.2em}
.zk-count{text-align:center;margin:-14px 0 18px;font-size:14px}
.zk-count b{font-family:var(--display);font-size:22px}

/* kentei */
.kt-intro{max-width:760px;margin:0 auto 18px;display:grid;gap:12px;font-size:15.5px;line-height:1.9}
.kt-intro p{margin:0}
.kt-now{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:22px;background:var(--ink);color:var(--foam)}
.kt-now .rk{font-family:var(--display);font-size:34px;line-height:1;color:var(--lime);white-space:nowrap}
.kt-now span{font-size:14px;line-height:1.6}
.kt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.kc{display:grid;gap:8px;align-content:start;padding:18px 18px 16px;border-radius:24px;background:var(--card);min-width:0;position:relative}
.kc.done{box-shadow:inset 0 0 0 3px var(--b1)}
.kc.next{box-shadow:inset 0 0 0 3px var(--ink)}
.kc.lock{opacity:.55}
.kc-top{display:flex;align-items:center;gap:10px}
.kc-rank{flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-family:var(--pop);font-weight:800;font-size:17px;color:var(--foam);line-height:1}
.kc-rank small{display:block;font-size:10px;margin-top:2px;text-align:center}
.kc h3{margin:0;font-family:var(--pop);font-weight:800;font-size:18px;line-height:1.4}
.kc .goal{margin:0;padding:10px 12px;border-radius:14px;background:var(--mint);font-size:14.5px;line-height:1.75}
.kc .goal b{display:block;font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
.kc .tip{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-soft)}
.kc-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}
.kc-btn{all:unset;cursor:pointer;min-height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--foam);font-family:var(--pop);font-weight:800;font-size:14px;display:inline-grid;place-items:center}
.kc-btn.sub{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.kc-btn:focus-visible{outline:3px dashed var(--ink);outline-offset:2px}
.kc-btn[disabled]{opacity:.4;cursor:default}
.kc-stamp{position:absolute;top:12px;right:14px;transform:rotate(12deg);padding:2px 10px;border:3px solid #D23B32;border-radius:10px;color:#D23B32;font-family:var(--pop);font-weight:800;font-size:15px;background:rgba(255,255,255,.7)}
.kc-ask{display:grid;gap:8px;padding:12px;border-radius:14px;background:#FFF6D6;font-size:14px;line-height:1.7}
.kc-ask .row{display:flex;gap:8px;flex-wrap:wrap}

/* science */
.sci{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;padding:20px;border-radius:28px;background:var(--card)}
@media (max-width:760px){.sci{grid-template-columns:minmax(0,1fr)}}
.sci svg{display:block;width:100%;height:auto}
.sci h3{margin:0 0 8px;font-family:var(--pop);font-weight:800;font-size:20px;line-height:1.5}
.sci p{margin:0;font-size:15.5px;line-height:1.95;color:var(--ink-soft)}
.facts{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.fact{padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.55);display:grid;gap:4px;align-content:start}
.fact .num{font-family:var(--display);font-weight:700;font-size:32px;line-height:1.1;font-variant-numeric:tabular-nums}
.fact .num small{font-size:.5em;margin-left:3px}
.fact span{font-size:14px;line-height:1.75;color:var(--ink-soft)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:s}
.step{position:relative;padding:22px 20px 20px;border-radius:28px;background:var(--card);min-width:0}
.step .n{position:absolute;top:-18px;left:18px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:22px;color:var(--foam);box-shadow:0 4px 0 rgba(38,48,46,.15)}
.step h3{margin:14px 0 6px;font-family:var(--pop);font-weight:800;font-size:19px;line-height:1.5}
.step p{margin:0;font-size:15px;line-height:1.85;color:var(--ink-soft)}
.step svg{display:block;width:100%;height:auto;margin-top:12px;border-radius:16px}

/* rules + table game */
.rule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:center}
@media (max-width:760px){.rule{grid-template-columns:minmax(0,1fr)}}
.rule ol{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.rule li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:20px;background:var(--card);font-size:15px;line-height:1.8}
.rule li svg{width:40px;height:40px}
.game{border-radius:28px;background:var(--rail);padding:14px;box-shadow:0 10px 0 rgba(38,48,46,.12)}
.felt{position:relative;aspect-ratio:2/1;max-width:100%;border-radius:18px;background:radial-gradient(ellipse at center,var(--felt) 55%,var(--felt-deep));overflow:hidden}
.felt .pk{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:#141a18;transform:translate(-50%,-50%)}
.felt .gb{all:unset;position:absolute;width:15%;aspect-ratio:1;cursor:pointer;transition:transform .15s}
.felt .gb svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.felt .gb:hover{transform:scale(1.08)}
.felt .gb:focus-visible{outline:3px dashed var(--foam);border-radius:50%}
.felt .gb.ng{animation:ng .35s}
.felt .gb.in{transform:scale(.2);opacity:0;transition:transform .4s,opacity .4s}
@keyframes ng{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.gbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;color:#FFF7EA}
.gmsg{font-family:var(--pop);font-weight:800;font-size:16px;line-height:1.5;min-height:1.5em}
.gbtn{all:unset;cursor:pointer;padding:8px 18px;border-radius:999px;background:var(--b1);color:var(--ink);font-family:var(--pop);font-size:14px}
.gbtn:focus-visible{outline:3px dashed var(--foam)}

/* manners */
.manners{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.mn{padding:18px;border-radius:24px;background:var(--card);display:grid;gap:6px;align-content:start;min-width:0}
.mn .ok,.mn .no{justify-self:start;font-family:var(--display);font-size:14px;letter-spacing:.1em;padding:1px 12px;border-radius:999px;color:var(--foam)}
.mn .ok{background:var(--b6)}.mn .no{background:var(--b3)}
.mn b{font-family:var(--pop);font-weight:800;font-size:17px;line-height:1.5}
.mn span{font-size:14px;line-height:1.75;color:var(--ink-soft)}

/* parents */
.parents{max-width:820px;margin:0 auto;padding:28px clamp(18px,4vw,36px);border-radius:32px;background:var(--card);font-weight:500}
.parents h3{margin:0 0 4px;font-family:var(--body);font-weight:900;font-size:17px}
.parents p{margin:0 0 18px;font-size:15px;line-height:1.85;color:var(--ink-soft)}
.parents .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.parents .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--foam);font-weight:700;font-size:14px;text-decoration:none}
.parents .links a.line{background:#06C755}

footer{padding-block:72px 40px;text-align:center}
footer .row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:14px}
footer .row svg{width:clamp(30px,9vw,52px);height:auto}
footer a.main{display:inline-block;font-family:var(--display);letter-spacing:.12em;font-size:15px;text-decoration:none;padding:10px 22px;border-radius:999px;background:var(--ink);color:var(--foam)}
footer a.main em{font-style:normal;color:var(--lime)}
footer small{display:block;margin-top:14px;font-size:12px;color:var(--ink-soft);font-weight:500}

/* ===== 70s retro poster theme ===== */
html,body{background:var(--cream)}
.bubbles{display:none}
.wrap{max-width:1080px}
.poster{position:relative;--sc:12px;
  -webkit-mask:radial-gradient(var(--sc) at 50% var(--sc),#000 99%,#0000 101%) 50% calc(-1*var(--sc))/calc(2*var(--sc)) 100% repeat-x,radial-gradient(var(--sc) at 50% calc(100% - var(--sc)),#000 99%,#0000 101%) 50% calc(100% + var(--sc))/calc(2*var(--sc)) 100% repeat-x,linear-gradient(#000 0 0) 0 var(--sc)/100% calc(100% - 2*var(--sc)) no-repeat;
          mask:radial-gradient(var(--sc) at 50% var(--sc),#000 99%,#0000 101%) 50% calc(-1*var(--sc))/calc(2*var(--sc)) 100% repeat-x,radial-gradient(var(--sc) at 50% calc(100% - var(--sc)),#000 99%,#0000 101%) 50% calc(100% + var(--sc))/calc(2*var(--sc)) 100% repeat-x,linear-gradient(#000 0 0) 0 var(--sc)/100% calc(100% - 2*var(--sc)) no-repeat}
.checker{height:22px;margin-top:16px;background:repeating-conic-gradient(var(--navy) 0 25%,var(--paper) 0 50%) 0 0/22px 22px}

/* header */
.mark{align-items:baseline;gap:8px}
.mark b{font-family:var(--script);font-weight:400;font-size:30px;letter-spacing:0;color:var(--tomato);text-shadow:2px 2px 0 var(--mustard)}
.mark small{display:inline;font-family:var(--hand);font-size:24px;letter-spacing:0;color:var(--teal);margin-left:6px}
.mark>span:first-child{align-self:center}
nav a{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.14em}
nav a:hover{color:var(--tomato);text-decoration:none}

/* hero poster */
.hero{margin-top:14px;padding:56px 18px 44px;background:var(--orange);overflow:hidden;--sc:16px}
.hero .rings{position:absolute;left:50%;top:44%;width:min(640px,140%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--mustard) 0 26%,var(--paper) 26% 29%,var(--tomato) 29% 40%,var(--paper) 40% 43%,var(--teal) 43% 54%,var(--paper) 54% 57%,var(--mustard) 57% 68%,transparent 68%)}
.hero>*{position:relative}
.hero .kick{display:block;font-family:var(--cond);font-weight:700;letter-spacing:.3em;font-size:clamp(13px,2.4vw,16px);color:var(--navy)}
.hero h1{font-family:var(--script);font-weight:400;color:var(--paper);font-size:clamp(84px,19vw,190px);line-height:.95;letter-spacing:0;
  text-shadow:5px 5px 0 var(--tomato),10px 10px 0 var(--navy);transform:rotate(-6deg);margin:6px 0 0}
.hero p.lead{display:inline-block;margin-top:22px;padding:10px 22px;border-radius:26px;background:var(--paper);color:var(--navy);font-family:var(--pop);font-weight:400;line-height:1.7}
.hero .bubble{position:absolute;right:7%;top:9%;padding:8px 16px;background:var(--paper);color:var(--tomato);border-radius:20px;font-family:var(--script);font-size:22px;line-height:1;transform:rotate(8deg)}
.hero .bubble::after{content:"";position:absolute;left:18px;bottom:-12px;border:8px solid transparent;border-top-color:var(--paper);border-left-color:var(--paper)}
.hero .daisy{position:absolute;width:52px;height:52px}
@media (max-width:560px){.hero .bubble{top:auto;bottom:5%;right:5%;font-size:18px}}
.troupe{margin-top:26px}
.troupe svg{filter:drop-shadow(4px 4px 0 rgba(31,44,56,.35))}
.down{color:var(--navy)}
@media (prefers-reduced-motion:no-preference){.hero .daisy{animation:sway 4s ease-in-out infinite alternate}@keyframes sway{to{transform:rotate(16deg)}}}

/* section posters */
.sec{margin-top:22px;padding:58px clamp(16px,4vw,40px) 50px;--fg:var(--paper);--hd:var(--paper);--hs:var(--navy);color:var(--fg)}
.st{font-family:var(--script);font-weight:400;letter-spacing:.01em;color:var(--hd);text-shadow:4px 4px 0 var(--hs);font-size:clamp(46px,9vw,76px);text-transform:capitalize}
.sj{display:table;margin:10px auto 28px;padding:5px 18px;border-radius:999px;background:var(--paper);color:var(--navy);font-family:var(--pop);font-weight:400;font-size:15px;line-height:1.6;text-align:center;max-width:100%}
.s-paper{background:var(--paper);--fg:var(--ink);--hd:var(--tomato);--hs:var(--mustard)}
.s-paper .sj{background:var(--mustard)}
.s-teal{background:var(--teal)}
.s-ging{background-color:var(--teal);background-image:linear-gradient(90deg,rgba(255,248,234,.16) 50%,transparent 50%),linear-gradient(rgba(255,248,234,.16) 50%,transparent 50%);background-size:28px 28px}
.s-sun{background:repeating-conic-gradient(from 0deg at 50% 40%,var(--mustard) 0 7deg,#F7C55E 7deg 14deg);--fg:var(--navy);--hd:var(--tomato);--hs:var(--paper)}
.s-rose{background:var(--rose);--hs:var(--tomato)}
.s-orange{background:var(--orange);--hs:var(--tomato)}
.s-mustard{background:var(--mustard);--fg:var(--navy);--hd:var(--paper);--hs:var(--tomato)}
.s-navy{background:var(--navy);--hd:var(--mustard);--hs:var(--tomato)}
.s-tomato{background:var(--tomato);--hs:var(--navy)}
.s-redging{background-color:var(--paper);background-image:linear-gradient(90deg,rgba(214,59,42,.28) 50%,transparent 50%),linear-gradient(rgba(214,59,42,.28) 50%,transparent 50%);background-size:28px 28px;--fg:var(--ink);--hd:var(--tomato);--hs:var(--mustard)}
.s-redging .st{text-shadow:4px 4px 0 var(--paper),7px 7px 0 var(--navy)}

/* cards → paper on posters */
.gm,.qz,.sci,.step,.mn,.kc,.parents,.profile,.rule li{background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 rgba(31,44,56,.28)}
.gm,.qz,.sci,.parents{border-radius:22px}
.step,.mn,.kc,.profile,.rule li{border-radius:18px}
.fact{background:var(--paper);color:var(--ink);border-radius:18px}
.fact .num{font-family:var(--script);font-weight:400;color:var(--tomato)}
.cc{background:rgba(255,248,234,.35);color:var(--ink)}
.cc:hover,.cc[aria-pressed="true"]{background:var(--paper)}
.cc b{font-family:var(--pop);font-weight:400}
.s-rose .cc small{color:var(--ink)}
.zk-count{color:var(--paper)}
.zk-count b{font-family:var(--script);font-weight:400}
.prose{color:var(--ink)}
.gm-note,.kt-note{opacity:.9}
.kt-note{color:var(--paper);font-size:13px;line-height:1.75;max-width:760px;margin:16px auto 0}
.kt-intro{color:var(--paper)}
.kt-now{background:var(--tomato);box-shadow:5px 5px 0 rgba(0,0,0,.3)}
.kt-now .rk{font-family:var(--script);font-weight:400;color:var(--mustard);text-shadow:2px 2px 0 var(--navy)}
.kc.next{box-shadow:inset 0 0 0 3px var(--tomato),5px 5px 0 rgba(0,0,0,.3)}
.kc.done{box-shadow:inset 0 0 0 3px var(--mustard),5px 5px 0 rgba(0,0,0,.3)}
.kc h3,.step h3,.sci h3,.mn b,.profile h3,.gm-name,.qz-q,.gm-msg{font-weight:400}
.kc-rank{font-weight:400}
.kc .goal{background:var(--cream)}
.step .n{font-family:var(--script);font-weight:400;box-shadow:3px 3px 0 var(--navy)}
.gm-no{font-family:var(--cond);font-weight:700}
.gm-st b,.gm-deg b,.gm-try b,.qz-op i{font-family:var(--script);font-weight:400}
.gm-shot{background:var(--tomato);box-shadow:4px 4px 0 var(--navy);font-weight:400}
.gm-shot:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--navy)}
.gm-p{font-weight:400}
.gm-st[aria-current="true"]{background:var(--navy)}
.gm-msg.win{background:var(--mustard)}
.gm-table,.game{box-shadow:5px 5px 0 rgba(31,44,56,.35)}
.qz-day{font-family:var(--cond);font-weight:700}
.qz-op.right{background:#D9EBDD;box-shadow:inset 0 0 0 3px var(--teal)}
.qz-op.wrong{background:#F6D3CC;box-shadow:inset 0 0 0 3px var(--tomato)}
.mn .ok,.mn .no{font-family:var(--cond);font-weight:700}
.mn .ok{background:var(--teal)}.mn .no{background:var(--tomato)}
.gbtn{background:var(--mustard);font-family:var(--pop)}
.parents .links a{background:var(--navy);box-shadow:3px 3px 0 var(--tomato)}
.parents .links a.line{background:#06C755}
.sci text{font-family:"BIZ UDPGothic",sans-serif}


/* types: pocket vs carom */
.s-cream{background:#EADCBF;--fg:var(--ink);--hd:var(--teal);--hs:var(--mustard)}
.s-cream .sj{background:var(--navy);color:var(--paper)}
.ty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.ty{grid-template-columns:minmax(0,1fr)}}
.tyc{padding:34px clamp(16px,3vw,26px) 30px;color:var(--paper);display:grid;gap:12px;align-content:start;min-width:0}
.tyc.pk{background:var(--teal)}.tyc.cr{background:var(--tomato)}
.tyc h3{margin:0;font-family:var(--script);font-weight:400;font-size:clamp(34px,5vw,44px);line-height:1;text-shadow:3px 3px 0 var(--navy)}
.tyc h3 small{display:block;margin-top:8px;font-family:var(--pop);font-size:16px;text-shadow:none;color:var(--mustard)}
.tyc svg{display:block;width:100%;height:auto;border-radius:14px}
.tyc p{margin:0;font-size:15.5px;line-height:1.9}
.tyc ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.tyc li{padding:12px 14px;border-radius:14px;background:var(--paper);color:var(--ink);font-size:14.5px;line-height:1.8}
.tyc li b{display:block;font-family:var(--pop);font-weight:400;font-size:16.5px;color:var(--tomato)}
.tyc.cr li b{color:var(--teal)}
.cmp{margin-top:18px;padding:20px clamp(14px,3vw,24px);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 rgba(31,44,56,.28);overflow-x:auto}
.cmp h3{margin:0 0 10px;font-family:var(--pop);font-weight:400;font-size:19px;text-align:center}
.cmp table{width:100%;min-width:480px;border-collapse:collapse;font-size:14.5px;line-height:1.7}
.cmp th,.cmp td{padding:10px 12px;border-bottom:2px dashed #E3D3B2;text-align:left;vertical-align:top}
.cmp thead th{font-family:var(--pop);font-weight:400;font-size:15px;border-bottom:3px solid var(--navy)}
.cmp thead th:nth-child(2){color:var(--teal)}.cmp thead th:nth-child(3){color:var(--tomato)}
.cmp tbody th{font-family:var(--pop);font-weight:400;white-space:nowrap;color:var(--ink-soft)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}

/* game mode tabs */
.gm-mode{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px;padding:6px;border-radius:20px;background:var(--mint)}
.gm-md{all:unset;cursor:pointer;display:grid;justify-items:center;gap:0;padding:8px 6px;border-radius:14px;font-family:var(--script);font-size:clamp(20px,4vw,26px);line-height:1.2;text-align:center;color:var(--ink)}
.gm-md small{font-family:var(--body);font-size:12px;line-height:1.5}
.gm-md[aria-selected="true"][data-m="p"]{background:var(--ink);color:var(--paper)}
.gm-md[aria-selected="true"][data-m="9"]{background:var(--teal);color:var(--paper)}
.gm-md[aria-selected="true"][data-m="8"]{background:var(--navy);color:var(--mustard)}
@media (max-width:700px){.gm-mode{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.gm-md{font-size:17px;padding:8px 2px}.gm-md small{font-size:10px;line-height:1.4}}
.gm-md[aria-selected="true"][data-m="z"]{background:var(--orange);color:var(--paper)}
.gm [hidden]{display:none!important}
.pz-wrap{padding:clamp(10px,2.6vw,18px);border-radius:18px;background:#8A5A2B;box-shadow:0 8px 0 rgba(38,48,46,.12)}
.pz-board{position:relative;aspect-ratio:9/5;border-radius:8px;background:radial-gradient(circle at 50% 50%,#33A874,#217F54);
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),radial-gradient(circle at 50% 50%,#33A874,#217F54);background-size:calc(100%/9) 20%,calc(100%/9) 20%,100% 100%;touch-action:none;outline:none}
.pz-board:focus-visible{box-shadow:0 0 0 4px var(--mustard)}
.pz-pk,.pz-ch,.pz-b{position:absolute;width:calc(100%/9);height:20%;display:grid;place-items:center}
.pz-pk::before{content:"";width:78%;height:78%;border-radius:50%;background:#141A18;box-shadow:inset 0 3px 6px rgba(0,0,0,.6)}
.pz-ch i{width:58%;height:58%;border-radius:6px;background:linear-gradient(135deg,#6FB7E8,#2F7FC0);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 3px 0 rgba(0,0,0,.25);display:block}
.pz-b{transition-property:left,top;transition-timing-function:cubic-bezier(.2,.7,.3,1);z-index:2}
.pz-b i{width:72%;height:72%;border-radius:50%;border:2.5px solid #26302E;display:grid;place-items:center;font-style:normal;box-shadow:0 3px 0 rgba(0,0,0,.25);position:relative}
.pz-b em{font-style:normal;background:#fff;border-radius:50%;width:56%;height:56%;display:grid;place-items:center;font-family:Fredoka,var(--body);font-weight:700;font-size:clamp(9px,2.4vw,16px);color:#26302E}
.pz-b s{position:absolute;right:16%;top:16%;width:20%;height:20%;border-radius:50%;background:#4FA3E0}
.pz-b.hit i{transform:scale(1.12)}
.pz-b.fall i{transform:scale(.2);opacity:0;transition:transform .26s,opacity .26s}
.pz-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.pz-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);gap:6px}
.pz-dir{all:unset;cursor:pointer;display:grid;place-items:center;border-radius:14px;background:var(--b3);color:var(--foam);font-size:22px;font-weight:800;box-shadow:0 4px 0 #A92F28}
.pz-dir:active{transform:translateY(2px);box-shadow:0 2px 0 #A92F28}
.pz-dir:focus-visible{outline:3px dashed var(--ink);outline-offset:2px}
.pz-dir[data-d="u"]{grid-column:2;grid-row:1}.pz-dir[data-d="l"]{grid-column:1;grid-row:2}.pz-dir[data-d="d"]{grid-column:2;grid-row:2}.pz-dir[data-d="r"]{grid-column:3;grid-row:2}
.pz-side{display:grid;gap:8px;justify-items:end;font-size:14px}
.pz-cnt b{font-family:var(--display);font-size:22px}
.pz-btns{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.pz-b{transition:none}}
.gm-help{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media (max-width:700px){.gm-help{grid-template-columns:1fr}}
.gm-hcol{padding:14px 16px 12px;border-radius:16px;background:var(--mint);font-size:14px;line-height:1.75}
.gm-hcol h3{margin:0 0 6px;font-family:var(--pop);font-weight:800;font-size:17px}
.gm-hcol ol{margin:0;padding-left:1.4em}
.gm-hcol li{margin:0 0 6px}
.gm-hcol b{color:var(--ink)}
.gm-hcol .nt{margin:6px 0 0;font-size:12px;color:var(--ink-soft)}
.gm-rack{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:4px 0 10px}
.gm-who{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--mint)}
.gm-pp{all:unset;cursor:pointer;min-height:36px;padding:0 14px;border-radius:999px;font-family:var(--pop);font-weight:800;font-size:14px;display:grid;place-items:center}
.gm-pp[aria-checked="true"]{background:var(--ink);color:var(--foam)}
.gm-pp:focus-visible{outline:3px dashed var(--ink);outline-offset:2px}
.gm-score{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 10px}
.gm-pl{padding:8px 12px;border-radius:14px;background:var(--mint);font-size:13px;line-height:1.6;border:3px solid transparent}
.gm-pl[aria-current="true"]{border-color:var(--ink);background:var(--foam)}
.gm-pl b{display:block;font-family:var(--pop);font-weight:800;font-size:15px}
.gm-pl .dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.gm-pl .dots i{width:16px;height:16px;border-radius:50%;border:2px solid #26302E;font-style:normal;font-size:9px;font-weight:700;display:grid;place-items:center;background:#fff;color:#26302E}

.gm-md[aria-selected="true"][data-m="c"]{background:var(--tomato);color:var(--paper)}
.gm-md:focus-visible{outline:3px dashed var(--ink);outline-offset:2px}
.gm-rule{display:inline-block;margin-right:8px;padding:0 10px;border-radius:999px;background:var(--tomato);color:var(--paper);font-family:var(--pop);font-size:13px;vertical-align:2px}

/* footer */
footer{padding-block:56px 40px}
footer a.main{font-family:var(--cond);font-weight:700;background:var(--tomato);box-shadow:4px 4px 0 var(--navy)}
footer a.main em{color:var(--mustard)}