/* Crisp plum lettering; cream/rose wordmark; matte foam controls. */
:root{--copy-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;--letter-ink:#765078}
body{font-family:var(--copy-font)}
.brand,.primary,.stat strong,.next span,.start-card h2,.gameover h2,.gameover strong,.modal-head h2,.touch-preview h3,.shelf-heading h1,.discovery-card h2,.material-trio b,.combo-hud,.text-button,.collection-link,.sound-tests button,.collect-item span{font-family:var(--game-font);font-weight:400}
.brand{gap:9px;text-shadow:none;letter-spacing:-.025em}
.brand-title{display:block;color:#9b769e;font-size:34px;line-height:1;letter-spacing:.005em}
.brand-title>span{margin-left:1px}
.brand small{font-family:var(--copy-font);font-size:11px;line-height:1.2;letter-spacing:.08em;font-weight:600;color:#806684;margin-top:6px}
.stat span,.next span{font-family:var(--game-font);font-size:13px;color:#816484;font-weight:400;letter-spacing:0;margin-bottom:1px}
.stat strong{font-size:34px;color:#79517d;letter-spacing:.015em;line-height:1.05;text-shadow:none;font-variant-numeric:tabular-nums}
.record strong{font-size:28px;color:#94729d;padding-top:4px}
.start-card h2,.gameover h2{font-size:38px;line-height:1.2;color:#a276b5;letter-spacing:-.015em;margin-bottom:14px}
.eyebrow{width:fit-content;margin:0 auto;padding:6px 13px;border-radius:30px;background:#f3e5f5;color:#8c6494;font-family:var(--game-font);font-size:14px;font-weight:400;letter-spacing:.025em}
.start-card p,.gameover p{font-family:var(--copy-font);font-size:15px;line-height:1.7;color:#86718b;letter-spacing:-.035em}
.primary{font-size:24px;line-height:1.1;letter-spacing:.025em;color:#82633e;padding:15px 24px}
.text-button{font-size:18px;letter-spacing:-.02em}.sound-tests button{font-size:17px}
.modal-head h2{font-size:30px;letter-spacing:-.025em;text-shadow:none}
.modal-kicker{font-family:var(--copy-font);font-size:11px;font-weight:600;letter-spacing:.015em;color:#8c7392}
.touch-preview h3{font-size:24px;letter-spacing:-.015em;color:#735579;text-shadow:none}
.collect-item span{font-size:16px;color:#755a7d}.collect-item b,.collect-item .material-label{font-family:var(--copy-font);font-size:11px}
.touch-preview p,.help,.switch-row,.volume-row{font-family:var(--copy-font)}
.shelf-heading h1{font-size:27px;text-shadow:none}.discovery-card h2{font-size:25px}.material-trio b{font-size:17px}
.evolution-head>span{font-family:var(--game-font);font-size:15px}.evolution-head small{font-family:var(--copy-font);font-size:11px}.collection-link{font-size:14px}
.instruction,.sound-hint,.collection-caption,.touch-hint{font-family:var(--copy-font);font-size:12px;line-height:1.5;letter-spacing:-.025em}
/* Opaque ink keeps small letters clear on the textured board. */
.stat strong,.start-card h2,.gameover h2,.gameover strong,.modal-head h2,.touch-preview h3,.shelf-heading h1,.discovery-card h2,.material-trio b,.collect-item span,.evolution-head>span,.collection-link,.stat>span,.next>span{
  color:#65436f;background:none;-webkit-text-stroke:0;text-shadow:none;filter:none;
}
.stat strong{color:#644071}.record strong{color:#805771}
.start-card h2,.gameover h2{color:#704878;letter-spacing:-.025em}
.brand small,.start-card p,.gameover p,.instruction,.sound-hint,.collection-caption,.touch-hint,.touch-preview p,.help,.modal-kicker,.side-hint,.discovery-card p,.material-notes h2,.club-label,.shelf-heading>span,.collect-item b,.collect-item .material-label,.switch-row,.volume-row,.evolution-head small{
  color:#705871;text-shadow:none;filter:none;font-weight:500;
}
.brand-title{
  color:#ffebbd;background:none;filter:none;-webkit-text-stroke:2.4px #704474;paint-order:stroke fill;
  font-size:34px;line-height:1;letter-spacing:-.025em;
  text-shadow:0 2px 0 #704474,0 3.5px 0 #c493ad;
}
.brand-title>span{display:inline-block;color:#f5a6c3;transform:rotate(5deg);margin-left:1px}
.brand small{font-family:var(--game-font);font-size:12px;font-weight:400;letter-spacing:0;line-height:1.2;margin-top:7px;color:#79536f;white-space:nowrap}
.evolution-head small{font-family:var(--game-font);font-size:12px;font-weight:400;color:#705871;letter-spacing:0}
.instruction{font-family:var(--game-font);font-size:13px;font-weight:400;letter-spacing:0;color:#705871}
.instruction>span{font-family:var(--copy-font);font-size:11px;font-weight:600;color:#705871}
.eyebrow,.panel-label,.texture-tag{color:#765a38;background:linear-gradient(#fff5ddca,#eedeb9bf),var(--foam-grain);text-shadow:none;box-shadow:inset 0 1px 2px #fffdf4,0 1px 1px #b6a18b35}
.combo-hud strong{filter:drop-shadow(0 2px 0 var(--combo-shadow))}
.combo-spark{text-shadow:none;filter:none}
/* Low foam cushions: a rounded shoulder, a short contact shadow, no hard plinth. */
.primary,.text-button,.icon-btn,.close,.sound-tests button,.sound-tests button[data-ui-material]{
  --pad-top:#fff4d5;--pad-mid:#f1dfa9;--pad-bottom:#ddc58e;--pad-edge:#bca477;--pad-ink:#624427;
  background:linear-gradient(165deg,var(--pad-top),var(--pad-mid) 55%,var(--pad-bottom));
  color:var(--pad-ink);border:0;-webkit-text-stroke:0;
  text-shadow:none;
  box-shadow:inset 1px 2px 4px #fffdf2c9,inset -1px -3px 5px #93785024,0 2px 1px var(--pad-edge),0 5px 9px #7c667c22;
  transition:transform .16s ease-out,box-shadow .16s ease-out,filter .16s;
}
.primary{border-radius:24px;min-height:56px}
.primary:before,.text-button:before,.icon-btn:before,.close:before,.sound-tests button:before,.sound-tests button[data-ui-material]:before{
  inset:0;border:0;border-image:none;border-radius:inherit;background-image:var(--foam-grain);background-size:96px 96px;background-repeat:repeat;opacity:.45;mix-blend-mode:soft-light;
}
.text-button,.sound-tests button[data-ui-material="wax"]{--pad-top:#fff1e5;--pad-mid:#f3d4bf;--pad-bottom:#e5bfa8;--pad-edge:#c2a18e;--pad-ink:#79513d}
.sound-tests button[data-ui-material="gel"]{--pad-top:#e5f4ed;--pad-mid:#c1dcd2;--pad-bottom:#a8c6bf;--pad-edge:#8eada9;--pad-ink:#345f59;background:linear-gradient(165deg,var(--pad-top),var(--pad-mid) 55%,var(--pad-bottom));color:var(--pad-ink)}
.sound-tests button[data-ui-material="key"],.sound-tests button[data-ui-material="wax"]{background:linear-gradient(165deg,var(--pad-top),var(--pad-mid) 55%,var(--pad-bottom));color:var(--pad-ink)}
.primary:hover,.text-button:hover,.icon-btn:hover,.close:hover,.sound-tests button:hover{background:linear-gradient(165deg,var(--pad-top),var(--pad-mid) 55%,var(--pad-bottom));color:var(--pad-ink);filter:brightness(1.025);transform:translateY(-.5px);box-shadow:inset 1px 2px 4px #fffdf2c9,inset -1px -3px 5px #93785024,0 2px 1px var(--pad-edge),0 5px 9px #7c667c22}
.primary:active,.text-button:active,.icon-btn:active,.close:active,.sound-tests button:active,.sound-tests button[data-ui-material="gel"]:active{transform:translateY(2px) scale(.995,.97);filter:brightness(.99);box-shadow:inset 0 1px 3px #94765324,inset 0 -1px 2px #fff9e6a8,0 .5px 1px var(--pad-edge),0 1px 3px #7c667c16}
.primary:disabled{transform:none;filter:saturate(.55);opacity:.65}
.icon-btn svg{transform:none;filter:none}
.evolution-item,.evolution-item.found,.evolution-item.target,.collect-item,.collect-item[aria-pressed="true"]{box-shadow:inset 1px 2px 3px #fffdf5,inset -1px -2px 3px #b7a0b52e,0 1.5px 1px #c6b0c466,0 3px 5px #80608015}
.evolution-item{background:linear-gradient(#f6eef8c9,#e4d5e8c9),var(--foam-grain)}
.evolution-item.found,.collect-item{background:linear-gradient(#fff6e9c9,#f0e0cdc9),var(--foam-grain)}
.evolution-item.target,.collect-item[aria-pressed="true"]{background:linear-gradient(#f5e6f9c9,#e1ccebc9),var(--foam-grain)}
.evolution-item:active,.collect-item:not(:disabled):active{transform:translateY(1.5px);box-shadow:inset 0 1px 3px #8b6d8724,0 1px 2px #80608020}
.switch:after{background:linear-gradient(#fff7e3b8,#e6d6bcb8),var(--foam-grain);box-shadow:inset 0 1px 2px #fffdf5,0 1px 2px #856f7938}
.scorebar{box-shadow:inset 1px 2px 4px #fffdf5,inset -1px -2px 4px #c8b4c32e,0 1.5px 1px #d5c1d399,0 4px 7px #8060800d}
/* Reference: bold mobile-game lettering, light fill and a crisp dark outline.
   All outlines sit behind the fill; small supporting text stays unoutlined. */
:root{--game-outline:#62406e;--game-depth:#493052;--game-fill:#fff4d5}
.brand-title{
  color:#ffe9ab;-webkit-text-stroke:3.8px var(--game-outline);
  text-shadow:0 2px 0 var(--game-depth),0 3px 0 #bc8dac;
  letter-spacing:.015em;line-height:1.05;
}
.brand-title>span{color:#ffaccb;margin-left:2px;transform:rotate(4deg)}
.start-card h2,.gameover h2,.modal-head h2,.shelf-heading h1,.discovery-card h2,.touch-preview h3{
  color:var(--game-fill);-webkit-text-stroke:3.2px var(--game-outline);paint-order:stroke fill;
  text-shadow:0 2px 0 var(--game-depth);letter-spacing:.015em;line-height:1.25;
}
.start-card h2,.gameover h2{font-size:36px;letter-spacing:.005em;margin-bottom:16px}
.modal-head h2,.shelf-heading h1{font-size:27px;-webkit-text-stroke-width:2.8px}
.discovery-card h2,.touch-preview h3{font-size:23px;-webkit-text-stroke-width:2.4px;text-shadow:0 1.5px 0 var(--game-depth)}
.stat strong,.record strong,.gameover strong{
  color:#fffaf0;-webkit-text-stroke:3.2px var(--game-outline);paint-order:stroke fill;
  text-shadow:0 1.5px 0 var(--game-depth);letter-spacing:.025em;line-height:1.15;
}
.record strong{-webkit-text-stroke-color:#805171;text-shadow:0 1.5px 0 #65405b}
.stat>span,.next>span{color:#67456f;font-size:13px;letter-spacing:0}
.primary,.primary:hover,.primary:active{
  color:#fff9e5;-webkit-text-stroke:3px #735029;paint-order:stroke fill;
  text-shadow:0 1.5px 0 #5d4026;font-size:25px;letter-spacing:.025em;
}
.text-button,.text-button:hover,.text-button:active,.sound-tests button,.sound-tests button[data-ui-material],.sound-tests button:hover{
  color:#fff8eb;-webkit-text-stroke:2.2px var(--pad-ink);paint-order:stroke fill;
  text-shadow:0 1px 0 var(--pad-ink);letter-spacing:.015em;
}
.text-button{font-size:18px}.sound-tests button{font-size:17px}
.collection-link{color:#754b7e;font-size:14px}
.evolution-head>span{color:#613f6c;font-size:15px}
.evolution-head small{font-family:var(--copy-font);font-size:12px;font-weight:600;letter-spacing:-.025em}
.brand small,.instruction,.sound-hint,.collection-caption,.touch-hint{
  color:#705571;text-shadow:none;-webkit-text-stroke:0;filter:none;letter-spacing:0;
}
.brand small{font-size:12px;margin-top:6px}
.start-card p,.gameover p{font-weight:600;color:#705571;letter-spacing:-.025em}
.collect-item span{font-size:15px;color:#613f6c;letter-spacing:-.025em}
.combo-hud strong{-webkit-text-stroke-width:3px;filter:drop-shadow(0 2px 0 var(--combo-shadow))}
@media(max-width:360px){.primary{font-size:23px}.start-card h2{font-size:29px}}
/* A single painted sprite: the face moves with its own surface and key lid. */
.touch-toy>#touchImage,.touch-toy>.touch-key{display:none}
#touchRender{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 8px 9px #334d6415)}
.touch-stage.pressed .touch-toy{transform:scale(1.1,.82)}
.touch-stage[data-material="key"].pressed .touch-toy{transform:none}
.touch-stage[data-material="wax"].pressed .touch-toy{transform:scale(1.06,.9)}
@media(max-width:600px){.brand-title{font-size:32px}.start-card h2{font-size:34px}.stat strong{font-size:32px}.record strong{font-size:26px}}
@media(max-width:360px){.brand-title{font-size:28px}.stat{padding:0 10px}.stat strong{font-size:29px}.record strong{font-size:24px}.start-card h2{font-size:30px}.primary{font-size:22px}}
@container(max-height:460px){.start-card h2,.gameover h2{font-size:30px;margin-bottom:9px}.start-card p{font-size:14px;line-height:1.5}.start-card .primary{font-size:22px}}
@container(max-height:350px){.start-card h2,.gameover h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.touch-stage.pressed .touch-toy{transform:none}}
