:root{font-family:'Trebuchet MS',Arial,sans-serif;color:#173e2c;background:#f5f5e9;font-size:18px}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto;padding:25px}header{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:25px;font-weight:bold}a{color:#245c3d}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:4px solid #325dce;outline-offset:4px}[hidden]{display:none!important}#menu{text-align:center;padding:25px 0}.eyebrow{font-size:.75rem;letter-spacing:.13em;font-weight:bold;color:#59733f}h1{font-size:clamp(2rem,4vw,3rem);margin:20px 0 12px}p{line-height:1.5;font-size:1.15rem}.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:790px;margin:30px auto}.character{border:3px solid #d6dfc9;border-bottom-width:7px;border-radius:25px;background:#fffefa;color:inherit;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:12px}.character.selected{border-color:#438044;background:#e6f0d7}.character strong{font-size:1.6rem}.character small{font-size:.86rem}.sprite{display:block;font-size:5rem;line-height:1.3}.orange{filter:hue-rotate(285deg) saturate(1.5)}.primary{background:#245c3d;color:white;font-weight:bold;border:0;border-bottom:5px solid #123d26;border-radius:16px;padding:17px 30px;min-height:60px;font-size:1.15rem}.primary:hover{background:#184b30}.secondary{border:2px solid #9eb289;background:#f4f8ea;color:#245c3d;border-radius:14px;padding:14px 20px;min-height:52px;font-weight:bold}.instructions{color:#536649;margin:25px 0 12px}.record{font-size:1.35rem;margin:20px 0 8px}#storage-note{font-size:.85rem;color:#627358}.scorebar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:15px 0;font-size:1.1rem}.scorebar b{font-size:1.65rem;margin-left:8px}.scorebar button{border:1px solid #b1c3a0;background:transparent;border-radius:12px;padding:12px;color:inherit;min-height:48px}.field{position:relative;border:5px solid #d9e4c5;border-radius:26px;overflow:hidden;background:#dff0ed}canvas{display:block;width:100%;height:auto;touch-action:none;user-select:none}.under{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;color:#526847}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#e8f0deba;backdrop-filter:blur(3px)}.dialog{text-align:center;background:#fffef4;border:2px solid #c1d4a6;border-radius:24px;padding:22px;max-width:480px;max-height:100%;overflow:auto;box-shadow:0 10px 35px #173e2c20}.dialog>span{font-size:2.2rem}.dialog h2{font-size:1.8rem;margin:6px 0 10px}.dialog p{margin:12px 0}.dialog button{margin:4px}.dialog h2:focus{outline:none}footer{text-align:center;color:#647153;font-size:.85rem;margin-top:35px;padding-top:20px;border-top:1px solid #dbe0cd}@media(max-width:600px){main{padding:16px}header{font-size:.83rem;gap:10px}.characters{gap:9px}.character{padding:16px 6px;border-radius:18px}.character strong{font-size:1.15rem}.character small{font-size:.75rem}.sprite{font-size:3.6rem}.scorebar{font-size:.83rem;flex-wrap:wrap;gap:7px}.scorebar b{font-size:1.2rem;margin-left:3px}.scorebar button{font-size:.83rem}.field{border-width:3px;border-radius:18px}canvas{height:350px}.under{font-size:.8rem}.under .primary{padding:15px 18px}.dialog{padding:14px;max-width:96%}.dialog h2{font-size:1.5rem}.dialog p{font-size:1rem}.dialog .primary,.dialog .secondary{padding:12px;font-size:1rem}.instructions{font-size:1rem}#menu{padding-top:15px}}

.character .sprite{filter:saturate(2) brightness(1.18) contrast(1.08) drop-shadow(0 2px 0 white)}.character .sprite.orange{filter:hue-rotate(285deg) saturate(2.5) brightness(1.2) contrast(1.08) drop-shadow(0 2px 0 white)}

.character .sprite.tri{width:117px;height:117px;object-fit:contain;filter:none}.character:disabled{cursor:wait;opacity:.6}@media(max-width:600px){.character .sprite.tri{width:84px;height:84px}}