:root{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#FFF6E5;background:#2B1B10}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button,select,input{font:inherit}button,select{cursor:pointer}[hidden]{display:none!important}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #FFC844;outline-offset:4px}
canvas{display:block;position:absolute;left:env(safe-area-inset-left);top:env(safe-area-inset-top);width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));height:calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
#title{position:absolute;inset:0;pointer-events:none}.hero{position:absolute;inset:0}.hero>*{display:none}.hero .primary,.hero .options,.hero .practice{display:flex;pointer-events:auto}.hero-caption{display:none}
.hero .primary{position:absolute;left:50%;top:78.5%;transform:translate(-50%,-50%);width:min(74%,420px);min-height:44px;justify-content:center;background:transparent;border:0;color:#FFF6E5;font-weight:900;font-size:clamp(17px,2.5vmin,25px);text-shadow:0 2px 2px #301A08;padding:8px;letter-spacing:.04em}.hero .primary>span:last-child{display:none}
.options{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));align-items:center;gap:10px;font-size:12px;color:#FFF6E5}.options select{padding:8px;border:1px solid #FFC84466;border-radius:8px;background:#2B1B10bf;color:#FFF6E5;max-width:210px}
.practice{position:absolute;left:50%;top:93%;transform:translate(-50%,-50%);align-items:center;justify-content:center;gap:8px;width:min(60%,300px);min-height:36px;padding:8px 12px;background:#28160866;border:1px solid #FFF6E559;border-radius:24px;font-size:clamp(11px,1.8vmin,16px);font-weight:800;white-space:nowrap}.practice input{accent-color:#FFC844;width:16px;height:16px}
#toolbar{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:8px;z-index:5}#toolbar button{width:44px;height:44px;border:1px solid #FFC84473;border-radius:10px;background:#2B1B10d9;color:#FFF6E5;font-size:22px;font-weight:800}
.veil{position:absolute;inset:0;background:#2B1B10ad;display:grid;place-items:center;z-index:10;padding:24px}.pause-card{width:min(340px,100%);border:1px solid #FFC84473;background:#2B1B10e8;border-radius:16px;padding:24px;text-align:center}.pause-card h2{font-size:30px;color:#FFC844;margin:16px 0}.pause-card p{color:#E8CE92;font-size:14px}.eyebrow{font-size:12px;letter-spacing:.12em}.pause-card button{width:100%;padding:12px;border:1px solid #FFC84473;border-radius:8px;background:#FFC844;color:#2B1B10;font-weight:800;min-height:44px;margin-top:16px}.pause-card .secondary{background:transparent;color:#FFF6E5}
#splash{position:absolute;inset:0;z-index:100;background:#2B1B10;display:flex;align-items:center;justify-content:center;flex-direction:column}#splash h2{font-size:27px;color:#FFC844;font-weight:900;letter-spacing:.06em}#splash p{color:#FFF6E5;font-size:12px;letter-spacing:.12em;opacity:.7}.loading-mark{display:none}.loading-bar{width:180px;height:8px;background:#FFC844;border-radius:6px;margin-top:10px}
@media(max-width:500px){.options{font-size:11px;gap:6px}.options select{max-width:175px}.hero .primary{font-size:19px}.practice{font-size:11px}}

/* A small wooden sign keeps the menu in the same modest table theme. */
.hero .primary{width:min(80%,420px);min-height:48px;background:#784b2e;border:2px solid #4d301e;border-radius:8px;box-shadow:0 3px 0 #4d301e;color:#fff2d6;font-size:clamp(14px,2.2vmin,20px);text-shadow:none;padding:10px 14px}
.hero .primary:hover{background:#885738}.hero .primary:active{box-shadow:none;transform:translate(-50%,calc(-50% + 3px))}
.veil{background:#2b1b107f;padding:20px}
.pause-card{position:relative;width:min(360px,100%);padding:26px;border:3px solid #775031;border-radius:10px;background:repeating-linear-gradient(0deg,transparent 0 35px,#9e6e3920 36px 37px),#e3b984;box-shadow:0 5px 0 #4d301e;color:#4d301e}
.pause-card:before{content:'Ⅱ';display:block;margin:auto;width:48px;height:48px;border:2px solid #775031;border-radius:50%;font-size:28px;line-height:44px;color:#775031}
.pause-card h2{color:#4d301e;margin:12px 0;font-size:30px}.pause-card p{color:#674327}.pause-card .eyebrow{margin:14px 0 0;font-weight:800;letter-spacing:.12em}
.pause-card button{background:#784b2e;border:2px solid #4d301e;color:#fff2d6;border-radius:7px;margin-top:12px;box-shadow:0 2px 0 #4d301e}.pause-card button:hover{background:#885738}.pause-card .secondary{background:#f1d5ab;color:#4d301e;box-shadow:none}.pause-card .secondary:hover{background:#f8e3c2}
@media(max-width:500px){.hero .primary{font-size:14px}.pause-card{padding:20px}}

@media(max-height:480px){.veil{padding:12px}.pause-card{padding:14px 20px;max-height:calc(100dvh - 24px);overflow-y:auto;touch-action:pan-y}.pause-card:before{display:none}.pause-card .eyebrow{margin-top:0}.pause-card h2{margin:8px 0;font-size:25px}.pause-card p{margin:8px 0}.pause-card button{margin-top:10px;padding:9px}}

#adPanel{z-index:30;inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button:disabled,select:disabled,input:disabled{cursor:wait}

/* Clear instructions and a prominent record, in the existing table palette. */
.hero .title-tips{display:flex;position:absolute;left:50%;top:65%;transform:translate(-50%,-50%);width:min(94%,800px);align-items:center;gap:14px;color:#4d301e;font-size:clamp(12px,2.1vmin,18px);font-weight:650;line-height:1.35;text-align:center}
.title-tips strong{flex:none;font-weight:900}.title-tips span{flex:1;padding:5px 10px;border-left:1px solid #77503180}
.hero .title-record{display:flex;position:absolute;left:50%;top:87%;transform:translate(-50%,-50%);align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 12px;width:min(88%,420px);padding:8px 14px;border:2px solid #775031;border-radius:8px;background:#f1d5ab;color:#4d301e;text-align:center;box-shadow:0 2px 0 #775031}
.title-record>span{font-size:clamp(12px,1.8vmin,16px);font-weight:900;letter-spacing:.07em}.title-record>strong{font-size:clamp(22px,3.2vmin,32px);font-weight:950;line-height:1}.title-record small{flex-basis:100%;font-size:clamp(11px,1.7vmin,14px);font-weight:650}
.hero .primary{width:min(90%,490px);font-size:clamp(18px,3vmin,29px);min-height:56px;line-height:1.15}
#start{display:inline-block;animation:invite-start 2.4s ease-in-out infinite}
@keyframes invite-start{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.035);opacity:.82}}
@media(max-width:500px){.hero .title-tips{gap:4px;font-size:12px}.title-tips span{padding:4px}.hero .primary{font-size:19px}.hero .title-record{top:87%;padding:6px 12px}}
@media(max-height:480px){.hero .title-tips{top:62%;font-size:12px}.hero .primary{top:75%;min-height:44px;padding:8px;font-size:18px}.hero .title-record{top:87%;padding:4px 12px;gap:2px 8px}.title-record>strong{font-size:21px}.title-record small{font-size:11px}.practice{top:96%;min-height:24px;padding:3px 10px;font-size:10px}}
@media(prefers-reduced-motion:reduce){#start{animation:none}}
.hero .primary{top:74.5%}
.hero .practice{left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));top:auto;transform:none;width:auto}
@media(max-height:480px){.hero .primary{top:73%}}
.hero .title-tips{font-size:clamp(14px,2.1vmin,18px)}
@media(max-width:500px){.hero .title-tips{font-size:14px}}
@media(max-height:480px){.hero .title-tips{top:60%;font-size:14px}}
#toolbar button svg{display:block;width:24px;height:24px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#toolbar .mute-mark{display:none}#toolbar button[aria-pressed="true"] .mute-mark{display:block}#sound[aria-pressed="true"] .sound-waves{display:none}
#toolbar #buzz svg{width:22px;height:22px}#buzz span{display:block;font-size:9px;line-height:10px;letter-spacing:.06em}#toolbar button[aria-pressed="true"]{color:#c5ad8b}