/* Toy-material UI. Layout, reading order and gameplay stay in style.css. */
:root{--ink:#43394d;--muted:#7a6d83;--accent:#886098;--accent-soft:#f0e5f6;--line:#e3d6e8;--surface:#f4edf6;--key-skin:url('ui/key.png');--gel-skin:url('ui/gel.png');--wax-skin:url('ui/wax.png');--foam-skin:url('ui/foam.png');--wax-grain:url('ui/wax-grain.png');--foam-grain:url('ui/foam-grain.png')}
html{background:#f4edf6}body{background:#f4edf6 var(--room-art) center/cover fixed}.app{padding:18px;background:linear-gradient(#fffaffb8,#f1e3f49c),var(--foam-grain) repeat;border:2px solid #ffffffd9;border-radius:42px;box-shadow:inset 3px 3px 5px #fffef5,inset -4px -5px 8px #c9acc459,0 7px 0 #ccb2cb,0 12px 0 #ead8e9,0 28px 65px #987d9c22}.brand-mark{overflow:hidden;background:#e5d3fb;border-radius:14px;box-shadow:0 2px 3px #aa86b82b}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}.brand small{color:#87718a}.club-label{color:#8b738d}.head-actions{gap:11px}
/* Keep labels and icons live HTML above raster material surfaces. */
.primary,.text-button,.icon-btn,.close,.sound-tests button{position:relative;isolation:isolate;background-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .18s cubic-bezier(.2,1.4,.4,1),filter .16s,box-shadow .16s}.primary:before,.text-button:before,.icon-btn:before,.close:before,.sound-tests button:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat;background-position:center}
.primary{min-height:58px;padding:16px 26px;color:#205e69;border:0;border-radius:24px;background:linear-gradient(#c9f7f4,#87dedd);font-weight:750;letter-spacing:-.015em;text-shadow:0 1px #edffff8c;box-shadow:0 5px 0 #83b7bf,0 10px 18px #72b6bf33,inset 0 2px 3px #e6ffff}.primary:before{border:0 solid transparent;border-image-source:var(--gel-skin);border-image-slice:40% 20% fill;border-image-width:25px 32px;border-image-repeat:stretch}.primary:hover{background:linear-gradient(#d5fcf8,#99e9e2);filter:brightness(1.04);box-shadow:0 6px 0 #83b7bf,0 12px 20px #72b6bf33;transform:translateY(-1px)}.primary:active{transform:translateY(4px) scale(1.035,.89);box-shadow:0 1px 0 #83b7bf,0 3px 9px #72b6bf25;transition-duration:.07s}
.icon-btn,.close{width:47px;height:47px;border:0;border-radius:15px;background:linear-gradient(#fff6df,#ead7b8);color:#836747;box-shadow:0 4px 0 #bba88e,0 6px 8px #8f7a6526}.icon-btn:before,.close:before{inset:-1px;background-image:var(--key-skin);background-size:100% 100%}.icon-btn svg{width:21px;height:21px;transform:translateY(-2px);stroke-width:1.8;filter:drop-shadow(0 1px 0 #fff8d9)}.icon-btn:hover,.close:hover{background:linear-gradient(#fff8e6,#f0dfc2);color:#705439;filter:brightness(1.035)}.icon-btn:active,.close:active{transform:translateY(4px);box-shadow:0 0 0 #bba88e,0 2px 3px #8f7a6526;transition-duration:.055s}.close{font-weight:700}
.text-button{min-height:48px;border:0;border-radius:15px;background:linear-gradient(#ffe9d8,#f7bfa5);color:#855249;font-weight:650;box-shadow:0 4px 0 #cda08e,0 7px 12px #b8887820}.text-button:before{border-image-source:var(--wax-skin);border-image-slice:40% 20% fill;border-image-width:21px 25px;border-image-repeat:stretch}.text-button:hover{background:linear-gradient(#fff0df,#f9ccae);filter:brightness(1.025)}.text-button:active{transform:translateY(3px) scale(.985);box-shadow:0 1px 0 #cda08e,0 2px 5px #b8887820}
.sound-tests{gap:11px;padding-bottom:25px}.sound-tests button{min-height:49px;border:0;border-radius:15px;color:#765e59;font-weight:650;box-shadow:0 4px 0 #bcabbf,0 7px 10px #8d718a15}.sound-tests button:before{border-image-source:var(--key-skin);border-image-slice:35% fill;border-image-width:19px 20px;border-image-repeat:stretch}.sound-tests button[data-ui-material="gel"]{background:#ade8e8;color:#205e69;box-shadow:0 4px 0 #8cbfc2}.sound-tests button[data-ui-material="gel"]:before{border-image-source:var(--gel-skin);border-image-slice:40% 20% fill}.sound-tests button[data-ui-material="key"]{background:#f0e0c6;color:#806448;box-shadow:0 4px 0 #bfaa8e}.sound-tests button[data-ui-material="wax"]{background:#f7d3ba;color:#855249;box-shadow:0 4px 0 #c69c89}.sound-tests button[data-ui-material="wax"]:before{border-image-source:var(--wax-skin);border-image-slice:40% 20% fill}.sound-tests button:hover{filter:brightness(1.045)}.sound-tests button:active{transform:translateY(3px);box-shadow:0 1px 0 #bcabbf}.sound-tests button[data-ui-material="gel"]:active{transform:translateY(3px) scale(1.035,.9)}
.primary:disabled{transform:none;filter:saturate(.55);opacity:.6;box-shadow:0 3px 0 #a6bbc3}
/* Wax rim is outside the playing area, so it does not hide toys or combo digits. */
.game-shell{border:8px solid transparent;border-radius:31px;background:linear-gradient(180deg,#fffefd,#fffcff 60%,#f4f1fa) padding-box,var(--wax-grain) border-box;background-size:auto,100px 100px;box-shadow:inset 0 3px 6px #9d71972b,inset 0 -2px 2px #fff,0 3px 0 #c6a4b2,0 6px 12px #947d9617}.game-shell:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border:2px solid #c8aab32e;border-radius:22px;box-shadow:inset 2px 3px 8px #b798b51a}.danger{border-top:2px dashed #ac879cad}.arena-hint{display:none}.guide{border-left:1.5px dashed #a68aad9e}.at-risk{box-shadow:0 0 0 2px #e87481,0 3px 0 #c6a4b2}.start-card,.gameover{background:radial-gradient(ellipse at 50% 28%,#fffefa 0,#fff7fb 53%,#f3ebf7 100%)}.start-card h2,.gameover h2{color:#57425c}.sound-hint i{color:#9985ab}
.scorebar{background:linear-gradient(#fffdf9c9,#f3e8f2ad),var(--foam-grain) repeat;border:1px solid #fffaf1;border-radius:23px;box-shadow:inset 1px 2px 3px #fff,inset -1px -2px 4px #c8b4c342,0 3px 0 #d5c1d3;padding:10px 6px}.stat span{color:#88748e}.stat strong{color:#685070}.record,.next{border-color:#d9c4d38c}.record strong{color:#8b7294}.next{border:0;border-radius:15px;background:linear-gradient(135deg,#fff4d3,#f0ddab);box-shadow:inset 1px 2px 3px #fff9e5,inset -1px -2px 3px #c4aa6926,0 2px 0 #d4bb89;margin-left:3px}.next span{color:#8e734a}.next img{filter:drop-shadow(0 2px 2px #92714320)}
footer{padding:1px 3px 0}.evolution{padding:3px 1px 6px}.evolution-item{border-radius:13px;background:linear-gradient(#f4edf5,#e4d7e8);border:1px solid #fff4fa;box-shadow:inset 0 1px 2px #fff,0 3px 0 #c4b1cc}.evolution-item.found{background:linear-gradient(#fff7e9,#f0e1c8);box-shadow:inset 1px 2px 2px #fffdf6,inset -1px -2px 3px #c5ac851f,0 3px 0 #c3ae8d}.evolution-item.target{border-color:#c3a0d6;background:linear-gradient(#fcf0ff,#e6cfef);box-shadow:inset 0 1px 2px #fff,0 3px 0 #b597c5}.evolution-item:active{transform:translateY(3px);box-shadow:inset 0 1px 2px #fff}.evolution-item:hover{filter:brightness(1.04)}.collection-link{color:#8a649c}.instruction{color:#947e9b}
.discovery-card{position:relative;isolation:isolate;background:linear-gradient(#fffdf7a8,#f6e8f2af),var(--foam-grain) repeat;border:2px solid #fffaf6;border-radius:30px;box-shadow:inset 2px 2px 4px #fff,inset -3px -4px 6px #ccb4c443,0 6px 0 #d2b9cd,0 14px 27px #93769b13}.discovery-card:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-image-source:var(--foam-skin);border-image-slice:28% fill;border-image-width:30px;border-image-repeat:stretch;opacity:.8}.panel-label,.texture-tag{color:#96704f;background:linear-gradient(#fff6dc,#f0e2bc);box-shadow:inset 0 1px 2px white,0 2px 0 #d7c397}.material-trio>div{border-radius:18px;background:#fff8fc6e;box-shadow:inset 1px 2px 3px #fff8,0 2px 0 #ddcce254}.studio-note progress,.studio-note progress::-webkit-progress-bar{background:#ddcbe6}.studio-note progress::-webkit-progress-value{background:#ab86ba}.studio-note progress::-moz-progress-bar{background:#ab86ba}.side-hint{color:#8c768f}
/* Collection and sound sheets are shallow foam trays with inset compartments. */
dialog{border:5px solid #f7e9f1;border-radius:32px;background:linear-gradient(#fff8fce8,#f5eaf5e8),var(--foam-grain) repeat;box-shadow:inset 2px 2px 4px #fff,inset -2px -3px 5px #cfb6d12b,0 6px 0 #c5acc7,0 25px 75px #503d5e40}dialog::backdrop{background:#4b315b4a}.modal-head{padding:20px 20px 17px}.modal-head h2{color:#674a71}.modal-kicker{color:#9d85a3}.modal-body{scrollbar-color:#ccb3d7 transparent}.touch-preview{border:4px solid #e9d8e8;background:radial-gradient(ellipse at 50% 25%,#fffefa,#f7f1fc);border-radius:25px;box-shadow:inset 0 2px 5px #b895ba25,0 2px 0 #fff}.collect-item{background:linear-gradient(#fffaf4,#f1e5ee);border:1px solid #fffcf6;box-shadow:inset 0 2px 2px #fff,0 3px 0 #ccb7cc}.collect-item[aria-pressed="true"]{border-color:#b38bc3;background:linear-gradient(#fff6ff,#edddf8);box-shadow:inset 0 2px 2px #fff,0 3px 0 #ae89be}.collect-item:not(:disabled):hover{background:linear-gradient(#fffcfa,#f7eaf7)}.collect-item:not(:disabled):active{transform:translateY(3px);box-shadow:inset 0 1px 2px #fff}.switch-row{background:#fffaf5d6;box-shadow:inset 0 2px 2px #fff}.volume-row{background:#fffaf5d6;box-shadow:0 2px 0 #dbc9d9}.switch{background:#d9cddd;box-shadow:inset 0 2px 3px #a38aa63d;border:1px solid #d4c2d7}.switch:after{background:linear-gradient(#fffdf3,#eadbbf);box-shadow:inset 0 1px 2px #fff,0 2px 2px #856f792e}.switch.on{background:linear-gradient(#a5dfd7,#6fc3ba);border-color:#83bbb6}.volume-row input{accent-color:#ad87ba}.toast{color:#6f5377;background:#fff6fbf5;border:2px solid #efddea;box-shadow:0 3px 0 #cbb0cc,0 8px 20px #765c8217}.help strong{color:#6d527a}
.primary:before,.text-button:before,.sound-tests button:before,.discovery-card:before{border:1px solid transparent}
@media(max-width:600px){body{background:#f4edf6 var(--room-art) center/cover fixed}.app{padding:4px;border:0;border-radius:24px;background:linear-gradient(#fff8ff45,#f5e8f645);box-shadow:none;gap:12px}.game-shell{border-width:7px;border-radius:29px}.icon-btn{width:44px;height:44px}.brand-mark{width:42px;height:42px}.primary{min-height:54px}.scorebar{padding:9px 6px}.start-card{padding:20px}.head-actions{gap:9px}dialog{border-width:4px}.modal-head{padding:20px 18px 16px}.close{width:44px;height:44px}}
@media(max-height:800px){.app{gap:10px}.primary{min-height:49px;padding:13px 22px}.primary:before{border-image-width:22px 29px}.scorebar{padding:7px 6px}.icon-btn{width:43px;height:43px}.next{height:48px}.brand-mark{width:39px;height:39px}}
@media(max-height:660px){.app{gap:8px}.primary{min-height:46px;padding:11px 20px}.primary:before{border-image-width:20px 26px}.start-card{padding:14px}}
@media(prefers-reduced-motion:reduce){.primary:active,.sound-tests button[data-ui-material="gel"]:active{transform:translateY(2px)}.primary:hover{transform:none}}
@media(prefers-contrast:more){:root{--ink:#33223a;--muted:#594160}.primary,.sound-tests button[data-ui-material="gel"]{color:#174850}.icon-btn,.close{color:#4f351f}.arena-hint,.instruction,.side-hint{color:#594160}}