:root{font-family:Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;color:#14243c;background:#faf6e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ff885c;outline-offset:4px}header{height:67px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dedbd3;background:#fff}header a{background:#b43827;color:white;border-radius:6px;padding:11px 17px;font-size:13px;font-weight:bold;text-decoration:none}header>span{font-size:14px}header b{font-size:16px;letter-spacing:-.7px}header b span{font-size:11px}main{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.18fr 1fr;min-height:calc(100svh - 67px)}.show{position:relative;background:#101d32;min-height:670px;overflow:hidden}.show:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #080c222a}#stage{position:absolute;inset:0}#stage canvas,#stage svg{width:100%;height:100%;display:block}.intro{position:absolute;top:35px;left:32px;right:32px;pointer-events:none;color:#fff2d8}.eyebrow{font-size:12px;font-weight:bold;letter-spacing:.16em}h1{font-size:clamp(34px,4.7vw,68px);line-height:1.12;letter-spacing:-.065em;margin:16px 0;font-weight:900}h1 em{font-style:normal;color:#ffcd6e}.stamp{position:absolute;right:4px;top:18px;writing-mode:vertical-rl;font-size:17px;letter-spacing:.18em;line-height:1.7;border-right:2px solid #ff8066;padding-right:14px}.scene-bottom{position:absolute;bottom:22px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;color:#f8edd5;font-size:12px}.scene-bottom i{display:inline-block;width:7px;height:7px;background:#ff9475;border-radius:50%;margin-right:6px}.scene-bottom button{border:1px solid #ffffff50;background:#12263bcc;color:#fff0d9;padding:9px 13px;border-radius:30px;font-size:12px}.editor{padding:30px 35px 20px;display:flex;flex-direction:column;justify-content:center;gap:14px}.draw-heading{display:flex;justify-content:space-between;align-items:center}.step-label{font-size:11px;font-weight:bold;color:#b64733;letter-spacing:.1em}.draw-heading h2{font-size:23px;margin:5px 0 0;letter-spacing:.01em}#clear{background:none;border:0;font-size:12px;padding:10px}.pad{position:relative;background:#fffdf6;border:2px solid #172b43;border-radius:16px;overflow:hidden;height:clamp(180px,32vh,320px);box-shadow:4px 5px 0 #e8ddc4;background-image:radial-gradient(#c9c7b950 .9px,transparent 1px);background-size:21px 21px}#draw{width:100%;height:100%;touch-action:none;display:block}#draw-hint{position:absolute;top:45%;left:0;right:0;text-align:center;font-size:13px;color:#767f87;pointer-events:none}.pad-label{position:absolute;bottom:10px;left:13px;color:#929487;font-size:10px;pointer-events:none}.presets{display:flex;gap:8px}.presets button{border:1px solid #d3ccbd;background:transparent;border-radius:20px;padding:8px 14px;font-size:12px;flex:1}.presets button:hover{background:#f1e4c9}.settings{margin-top:6px}.setting-title{display:flex;align-items:center;justify-content:space-between}.setting-title label{display:flex;align-items:baseline;gap:4px}.setting-title input{font:bold 29px Arial;color:#14243c;border:0;border-bottom:1px solid #d6c7a9;background:transparent;width:74px;text-align:right;padding:0;-moz-appearance:textfield}.setting-title input::-webkit-inner-spin-button{display:none}input[type=range]{accent-color:#d65940;width:100%;height:18px;margin:9px 0 0;cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:#818074;font-size:10px}.tempo{display:flex;align-items:center;gap:18px;margin-top:18px;font-size:12px}.tempo label{white-space:nowrap}.tempo output{font-weight:bold;margin-left:8px}.tempo input{margin:0}#start{border:0;border-radius:12px;background:#f9c85b;padding:20px 24px;font-size:24px;font-weight:900;box-shadow:0 5px 0 #14243c;display:flex;justify-content:space-between;align-items:center;margin-top:5px}#start:hover{background:#ffd97e;transform:translateY(-1px)}.footnote{text-align:center;font-size:10px;color:#8c8579;margin:5px 0}.live-top,.live-bottom{display:none}.performing header,.performing .editor,.performing .intro{display:none}.performing main{display:block;max-width:none}.performing .show{height:100svh;min-height:0}.performing .live-top{display:flex;position:absolute;top:max(20px,env(safe-area-inset-top));left:22px;right:22px;justify-content:space-between;align-items:center;color:#fff0d6}.live-top button{border:1px solid #ffffff50;border-radius:24px;background:#12263bcc;padding:12px 17px;color:inherit;font-size:13px}.live-top span{font-weight:bold;font-size:14px}.performing .live-bottom{display:block;position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:24px;right:24px}.performing .scene-bottom{bottom:116px}.live-controls{display:flex;justify-content:center;align-items:center;gap:12px;color:#fff0d6}.live-controls button{border:1px solid #ffffff50;background:#172a40d9;color:inherit;padding:9px 15px;border-radius:25px}.live-controls strong{min-width:55px;text-align:center}.progress{height:4px;background:#ffffff20;border-radius:5px;margin-top:20px}.progress i{display:block;background:#ffce70;height:100%;width:0}#call{position:absolute;top:16%;left:0;right:0;text-align:center;color:#ffe6ab;font-size:clamp(30px,5vw,60px);font-weight:900;letter-spacing:.14em;pointer-events:none;opacity:0;transition:opacity .2s;text-shadow:0 3px #9d4537}#result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fcf5e7f5;border:2px solid #eacb88;border-radius:22px;padding:30px;text-align:center;width:min(400px,90vw);box-shadow:0 16px 60px #0005}#result[hidden]{display:none}#result h2{font-size:35px;line-height:1.4;margin:15px 0 24px}#result h2 span{color:#c94e36;font-size:64px}.result-actions{display:flex;gap:8px}.result-actions button{border:1px solid #14243c;border-radius:10px;padding:13px 8px;background:#ffcd70;flex:1;font-weight:bold;font-size:13px}.result-actions button+button{background:transparent}#share{background:transparent;border:0;text-decoration:underline;font-size:12px;margin-top:20px}#notice{font-size:11px;min-height:12px;margin:8px 0 0}@media(min-width:1450px){main{margin-top:26px;min-height:760px;border-radius:22px;overflow:hidden}.performing main{margin:0;border-radius:0}}@media(max-width:720px){header{height:51px;padding:0 12px}header a{font-size:10px;padding:8px 10px}header>span{font-size:11px}header b{font-size:12px}header b span{font-size:9px}main{display:block}.show{height:31svh;min-height:235px;max-height:350px}.intro{top:15px;left:20px;right:20px}.intro .eyebrow{font-size:9px}h1{font-size:38px;margin:10px 0}.stamp{font-size:11px;top:0;padding-right:8px}.scene-bottom{bottom:11px;left:19px;right:15px;font-size:10px}.scene-bottom button{padding:6px 10px}.editor{padding:17px 20px 23px;gap:10px}.draw-heading h2{font-size:18px;margin-top:3px}.step-label{font-size:10px}.pad{height:25svh;min-height:150px;max-height:240px;border-radius:12px}.presets button{padding:6px 10px;font-size:11px}.settings{margin-top:1px}.setting-title input{font-size:24px}.tempo{margin-top:11px}#start{padding:15px 20px;font-size:21px}.footnote{font-size:9px}.range-labels{font-size:9px}.performing .show{max-height:none}.performing .scene-bottom{bottom:110px}}
@media(max-width:720px){.show{height:28svh;min-height:180px;max-height:260px}.editor{padding:12px 16px 18px;gap:8px}.pad{height:22svh;min-height:120px;max-height:200px}.footnote{display:none}}
#map{display:block;width:140px;height:50px;margin:0 auto 12px;background:#12263b90;border-radius:10px}.finished .live-controls{visibility:hidden}@media(max-width:720px){h1{font-size:34px}.performing .scene-bottom{bottom:175px}}
.hand-tabs{display:flex;gap:10px}.hand-tabs button{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;border:2px solid #d8d2c6;border-radius:11px;padding:9px 12px;background:#fffcf4;font-weight:bold;color:#d45b42}.hand-tabs button+button{color:#2b909a}.hand-tabs button[aria-pressed=true]{border-color:currentColor;box-shadow:0 3px 0 currentColor}.hand-tabs canvas{width:80px;height:27px}.hand-tabs button:hover{background:#fff}.pad{height:clamp(160px,29vh,280px)}.performing .scene-bottom{bottom:174px}#call{top:12%;font-size:clamp(24px,3.8vw,43px)}button:disabled{cursor:default;opacity:.45}.live-controls button:disabled{opacity:.3}#map{width:160px;height:58px}.editor{gap:11px}@media(max-width:720px){.show{height:24svh;min-height:165px;max-height:215px}.editor{gap:7px;padding-top:10px}.hand-tabs button{padding:6px 10px;font-size:13px}.hand-tabs canvas{height:22px}.pad{height:22svh;min-height:130px;max-height:200px}.draw-heading h2{font-size:17px}.tempo{margin-top:8px}#start{padding:13px 20px}.stamp{display:none}.intro .eyebrow{font-size:8px}}

/* A taller drawing surface makes large overhead gestures easier to author. */
.pad{height:clamp(300px,42vh,440px)}
@media(max-width:720px){.show{height:17svh;min-height:125px;max-height:155px}.intro{top:10px}h1{font-size:28px;margin-top:8px}.intro .eyebrow{font-size:8px}.pad{height:33svh;min-height:230px;max-height:330px}.editor{gap:7px}.range-labels{display:none}.performing .show{height:100svh;max-height:none}}
@media(max-width:720px) and (max-height:740px){.show{height:16svh;min-height:105px}.pad{height:28svh;min-height:170px}.editor{gap:5px;padding-top:7px}.hand-tabs button{padding:4px 9px}.draw-heading h2{font-size:16px}.tempo{margin-top:5px}#start{padding:11px 18px}}

@media(max-width:720px) and (max-height:740px){body:not(.performing) .scene-bottom>span{display:none}.scene-bottom{justify-content:flex-end}}

/* Sunny festival colours keep faces and fine hand trails readable. */
.show{background:#fff1c9}.show:after{box-shadow:none}.intro{color:#183755}h1 em{color:#d85b42}.scene-bottom,.performing .live-top,.live-controls{color:#183755}.scene-bottom button,.live-top button,.live-controls button{background:#fffaf0ed;border-color:#19395540;color:#183755}#map{background:#fffaf0d9}.progress{background:#1b496b20}.progress i{background:#e56d4f}#call{color:#ce533a;text-shadow:0 2px #fff7e7}.phrase-controls{display:flex;align-items:center;gap:12px;font-size:12px}.phrase-controls label{white-space:nowrap}.phrase-controls select{font:inherit;border:1px solid #c8c5b9;background:#fffdf6;color:#183755;border-radius:6px;padding:6px}.phrase-controls>div{display:flex;gap:5px}.phrase-controls button{width:34px;height:32px;border:1px solid #d5cebf;border-radius:7px;background:#fffaf0}.phrase-controls button[aria-pressed=true]{background:#183755;color:white;border-color:#183755}.phrase-controls>span{font-size:10px;color:#7d817e;margin-left:auto}.phrase-controls button:disabled{opacity:.25}
@media(max-width:720px){.phrase-controls{gap:8px}.phrase-controls>span{font-size:9px}.phrase-controls button{width:30px;height:28px}.phrase-controls select{padding:4px}.pad{height:29svh;min-height:215px}.scene-bottom>span{background:#fff8e8b0;border-radius:10px;padding:3px}}
@media(max-width:720px) and (max-height:740px){.pad{height:24svh;min-height:155px}.phrase-controls{font-size:11px}.phrase-controls>span{display:none}}

.target-row{display:flex;align-items:center;gap:8px;min-height:32px;font-size:12px;color:#415469}
.target-row label{white-space:nowrap;font-weight:700;color:#183755}
.target-row select{font:inherit;border:1px solid #c8c5b9;background:#fffdf6;color:#183755;border-radius:7px;padding:6px;margin-left:5px;min-width:100px}
#inherit-status{margin-left:auto;color:#637884;font-size:11px;white-space:nowrap}
#reset-hand{border:0;background:none;color:#bb593f;text-decoration:underline;font-size:11px;padding:5px 0;white-space:nowrap}
#reset-hand[hidden]{display:none}
#map-caption{display:block;text-align:center;font-size:11px;font-weight:700;color:#183755;margin-bottom:3px}
@media(max-width:720px){.target-row{min-height:29px;font-size:11px}.target-row select{min-width:88px;padding:4px}#inherit-status,#reset-hand{font-size:10px}.editor{gap:5px}.pad{height:30svh;min-height:205px}}
@media(max-width:720px) and (max-height:740px){.pad{height:24svh;min-height:150px}}

#result{max-height:calc(100svh - 32px);overflow:auto;padding:24px;width:min(410px,92vw)}.result-count{font-size:13px;margin:12px 0}.score-row{display:flex;align-items:center;justify-content:center;gap:24px}.score-row>div>span{font-size:12px;color:#687677}#result-score{font-size:76px;line-height:1;font-weight:900;letter-spacing:-5px;color:#d95c40}.rank-badge{display:flex;flex-direction:column;border:2px solid #dfb348;border-radius:15px;background:#ffdc72;min-width:75px;padding:8px}.rank-badge small{font-size:10px;letter-spacing:2px}.rank-badge strong{font-size:44px;line-height:1.1}#result h2{font-size:25px;margin:16px 0}.score-metrics{display:flex;justify-content:space-around;gap:6px;border-top:1px solid #e2d6be;border-bottom:1px solid #e2d6be;padding:12px 0}.score-metrics span{font-size:10px}.score-metrics b{display:block;font-size:21px;margin-top:5px}.score-note{font-size:10px;color:#738080;margin:12px 0 18px}.finished .live-bottom,.finished .scene-bottom{visibility:hidden}@media(max-height:600px){#result{padding:16px}#result-score{font-size:52px}#result h2{margin:8px 0;font-size:21px}.score-metrics{padding:6px}.score-note{margin:8px}.result-count{margin:6px}}

/* Mobile X in-app browser: primary action before the pad, not below all settings. */
@media(max-width:720px){
 body:not(.performing) .show{height:18svh;min-height:115px;max-height:145px}
 .editor .draw-heading{order:0}.editor .target-row{order:1}.editor .hand-tabs{order:2}.editor .phrase-controls{order:3}
 .editor #start{order:4;margin:3px 0 7px;padding:11px 18px;font-size:20px;min-height:48px}
 .editor .pad{order:5;height:27svh;min-height:165px;max-height:235px}.editor .presets{order:6}.editor .settings{order:7}.editor .footnote{order:8}
 .editor{padding-top:12px;padding-bottom:calc(100px + env(safe-area-inset-bottom))}
 .intro h1{font-size:29px;margin:5px 0}.intro .eyebrow{font-size:8px}.intro{top:9px}.intro .stamp{display:none}
 .scene-bottom{bottom:8px}.performing .show{height:100svh;max-height:none}
}

.share-actions{display:flex;gap:8px;margin-top:15px}.share-actions button{flex:1;border:1px solid #193955;border-radius:10px;padding:12px 5px;font-size:13px;font-weight:bold;background:#fffaf0}#share{margin:0;text-decoration:none;border:1px solid #193955}#share-x{background:#193955;color:white}#share-text{width:100%;min-height:100px;margin-top:10px;font:inherit;font-size:12px}