*{box-sizing:border-box}body{margin:0;background:#202d24;color:#f4edda;font-family:system-ui,-apple-system,sans-serif}header{height:83px;padding:16px max(5vw,18px);display:flex;align-items:center;justify-content:space-between}h1{font-size:clamp(19px,3.5vw,27px);margin:2px 0;font-weight:600;letter-spacing:.04em}small{font-size:10px;color:#b2bd9f;letter-spacing:.24em}button{font:inherit;cursor:pointer;touch-action:manipulation;border:0}button:focus-visible,a:focus-visible{outline:3px solid #edc96b;outline-offset:4px}header button{background:#344638;color:#f4edda;padding:9px 14px;border-radius:50%;font-size:20px}main{max-width:1280px;margin:auto;padding:0 20px}.stage{position:relative;width:100%;height:clamp(270px,59vh,640px);overflow:hidden;border:1px solid #60705a;border-radius:24px;background:#b5bb98;box-shadow:0 14px 40px #10191144}canvas{width:100%;height:100%;display:block}.badge{position:absolute;top:20px;left:22px;padding:9px 15px;background:#233426b8;color:#f7f1dc;border:1px solid #f8f2dd33;border-radius:30px;font-size:14px;pointer-events:none}.voice{position:absolute;bottom:15px;left:0;right:0;text-align:center;color:#f8f3df;text-shadow:0 1px 4px #000;pointer-events:none;font-size:14px}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#324735e6;font-size:20px}.loading[hidden]{display:none}nav{display:flex;gap:12px;justify-content:center;margin:19px auto 0;max-width:780px}nav button{flex:1;background:#dddfc7;color:#2b3c2c;border-radius:17px;min-height:72px;font-weight:700;font-size:clamp(18px,3vw,23px);box-shadow:0 5px 0 #0e1911;transition:transform .1s}nav button:active{transform:translateY(4px)}nav button[aria-pressed=true]{background:#aec985}nav span{display:inline-block;font-size:26px;margin-right:12px}nav .roar{background:#ebbc69}button:disabled{opacity:.45}.sub{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:20px auto}.sub button{background:#344738;color:#f1eed9;border-radius:24px;padding:11px 18px;font-size:14px}.sub p{font-size:13px;color:#bec5ad;margin:0}dialog{border:1px solid #78866b;border-radius:22px;background:#f0ecdd;color:#2c3a2d;max-width:90%;width:390px;padding:26px}dialog::backdrop{background:#08160bc0}dialog h2{margin-top:0}dialog label{display:block;padding:10px 0}dialog input{width:20px;height:20px;vertical-align:middle}dialog p{font-size:13px;line-height:1.7}dialog a{color:#526b3b;font-size:14px}dialog button{display:block;margin-top:20px;background:#344738;color:white;border-radius:15px;padding:12px 25px;width:100%}@media(max-height:600px) and (orientation:landscape){header{height:52px;padding:7px 20px}small{display:none}main{padding:0 12px}.stage{height:calc(100vh - 142px);min-height:200px}nav{position:absolute;bottom:12px;right:14px;width:45%;margin:0}nav button{min-height:56px;font-size:17px}nav span{display:none}.sub{justify-content:start;margin:12px 0;max-width:48%}.sub p{display:none}}@media(max-width:500px){main{padding:0 10px}.stage{border-radius:16px;height:54vh}nav{gap:8px}nav span{display:block;margin:0;font-size:21px}nav button{min-height:76px}.badge{top:12px;left:12px;font-size:12px}}