#madagascar-interface{position:fixed;inset:0;z-index:30;pointer-events:none;font-family:Nunito,sans-serif;color:#642D16;user-select:none}#madagascar-interface[hidden],#madagascar-interface [hidden]{display:none!important}
.md-top{position:absolute;top:max(16px,env(safe-area-inset-top));left:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.md-country{display:flex;gap:10px;align-items:center;background:#fff9e9ed;padding:10px 17px;border:2px solid #642D16;border-radius:20px;box-shadow:0 4px #642d1620}.md-country img{width:43px;height:32px}.md-country div{display:flex;flex-direction:column}.md-country small{font-size:10px;font-weight:900;letter-spacing:2px}.md-country strong{font-family:'Bree Serif',serif;font-size:22px;font-weight:400}.md-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:330px}.md-timer{font-family:'Bree Serif',serif;font-size:29px;background:#fff9e9ed;border:2px solid #642D16;border-radius:15px;padding:6px 13px;font-variant-numeric:tabular-nums}
.md-sound,.md-options summary{font:800 12px Nunito,sans-serif;color:#642D16;background:#fff9e9ed;border:2px solid #642D16;padding:10px 12px;border-radius:14px;cursor:pointer;list-style:none;pointer-events:auto}.md-options{pointer-events:auto;position:relative}.md-options[open]{z-index:5}.md-options label,.md-options>small{display:block;background:#fff9e9;padding:12px;font-size:12px;width:220px}.md-options label{position:absolute;right:0;top:45px;border:2px solid #642D16;border-radius:12px}.md-options>small{position:absolute;right:0;top:123px;border-radius:0 0 10px 10px}.md-options input{width:190px;display:block;margin-top:12px;accent-color:#2879AF;touch-action:auto}.md-options output{font-weight:900;float:right}
.md-cue{position:absolute;top:100px;left:50%;transform:translateX(-50%);text-align:center;width:min(560px,90vw)}.md-stage{display:inline-block;margin:0 0 7px;background:#fff9e9f0;border:2px solid #642D16;border-radius:24px;padding:8px 22px;font-weight:900;font-size:17px;box-shadow:0 3px #642d1620}.md-pattern{display:flex;justify-content:center;gap:7px;min-height:35px}.md-pattern span{display:grid;place-items:center;border:2px solid #642D16;width:36px;height:32px;border-radius:9px;background:#fff9e9;color:#2879AF;font-size:24px;font-weight:900;transition:transform .1s}.md-pattern span[data-side="1"]{color:#E95B4A}.md-pattern .is-calling{background:#F8C83D;transform:translateY(-4px) scale(1.1)}.md-pattern .is-hit{background:#d4e7bb}.md-pattern .is-missed{background:#f4c2ae;opacity:.65}.md-phrase{display:inline-block;margin-top:6px;font-size:10px;font-weight:900;background:#fff9e9cb;border-radius:10px;padding:2px 9px;letter-spacing:1px}

.md-controls{position:absolute;inset:auto 0 max(22px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;padding:0 max(24px,env(safe-area-inset-left));gap:130px}.md-controls button{pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center;gap:14px;min-width:190px;min-height:70px;border:3px solid #642D16;border-radius:23px;background:#2879AF;color:#fff9e9;box-shadow:0 6px #642D16;cursor:pointer;font-family:Nunito,sans-serif}.md-controls .md-right{background:#E95B4A}.md-controls b{font-size:37px}.md-controls span{font-size:13px;font-weight:900;letter-spacing:1px}.md-controls kbd{display:block;font:800 11px Nunito,sans-serif;opacity:.8;margin-top:3px}.md-controls button:disabled{filter:saturate(.45);opacity:.68;cursor:default}.md-controls button:not(:disabled):active{transform:translateY(4px);box-shadow:0 2px #642D16}#madagascar-interface button:focus-visible,#madagascar-interface summary:focus-visible{outline:4px solid #F8C83D;outline-offset:4px}
.md-results{position:absolute;inset:0;display:grid;place-items:center;background:#243b2c9c;pointer-events:auto;padding:22px;overflow:auto;touch-action:pan-y}.md-result-panel{width:min(570px,100%);max-height:calc(100dvh - 44px);overflow:auto;background:#fff9e9;border:3px solid #642D16;border-radius:28px;padding:28px;box-shadow:0 8px #642d1650;text-align:center}.md-result-panel>small{font-size:10px;font-weight:900;letter-spacing:2px}.md-result-panel h1{font:400 35px 'Bree Serif',serif;margin:12px 0}.md-result-panel>p{font-size:13px}.md-ranking{padding:0;list-style:none;text-align:left}.md-ranking li{display:flex;align-items:center;gap:14px;padding:11px;border-radius:13px;font-size:14px}.md-ranking li:nth-child(odd){background:#eee9d6}.md-ranking .is-you{background:#f8c83d55!important}.md-ranking li>b{min-width:26px}.md-ranking li>span{flex:1;font-weight:900}.md-ranking small{display:block;font-size:10px;font-weight:600;margin-top:3px}.md-ranking strong{white-space:nowrap}.md-result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.md-result-actions button{min-height:48px;padding:12px 20px;border:2px solid #642D16;border-radius:15px;font:900 13px Nunito,sans-serif;background:#F8C83D;color:#642D16;cursor:pointer}.md-result-actions .md-replay{background:#fff9e9}
@media(max-width:650px){.md-top{left:10px;right:10px;top:10px}.md-country{padding:8px 10px;gap:6px;border-radius:15px}.md-country img{width:31px;height:24px}.md-country small{font-size:8px;letter-spacing:1px}.md-country strong{font-size:16px}.md-tools{max-width:155px;gap:5px}.md-timer{font-size:22px;padding:4px 9px}.md-sound,.md-options summary{font-size:10px;padding:8px}.md-options{position:absolute;right:0;top:45px}.md-cue{top:102px}.md-stage{font-size:13px;padding:7px 13px}.md-pattern span{width:30px;height:28px;font-size:21px}.md-phrase{font-size:8px}.md-controls{padding:0 12px;gap:90px;bottom:max(17px,env(safe-area-inset-bottom))}.md-controls button{min-width:0;width:calc(50% - 45px);min-height:64px;gap:4px;border-radius:19px}.md-controls span{font-size:9px;letter-spacing:0}.md-controls kbd{font-size:9px}.md-controls b{font-size:29px}.md-result-panel{padding:20px}.md-result-panel h1{font-size:29px}}
@media(max-height:540px){.md-top{top:7px}.md-country{padding:5px 10px}.md-country strong{font-size:17px}.md-timer{font-size:22px}.md-cue{top:65px}.md-stage{font-size:12px;margin-bottom:4px;padding:4px 12px}.md-pattern span{height:23px;width:28px;font-size:20px}.md-phrase{display:none}.md-controls{bottom:10px}.md-controls button{min-height:48px}}
@media(prefers-reduced-motion:reduce){.md-pattern span{transition:none}.md-pattern .is-calling{transform:none}}
/* Large two-hand controls; each touch half reaches the screen edge. */
.md-controls button{min-width:230px;min-height:94px;width:min(34vw,390px)}
.md-controls b{font-size:48px}.md-controls span{font-size:15px}
@media(max-width:650px),(max-height:540px),(pointer:coarse){
  .md-controls{inset:auto 0 0;padding:0;gap:0;height:clamp(100px,22dvh,180px)}
  .md-controls button{width:50%;min-width:0;min-height:100%;border-radius:22px 22px 0 0;box-shadow:none;gap:12px;padding-bottom:env(safe-area-inset-bottom)}
  .md-controls button:active{transform:none!important;box-shadow:inset 0 5px 15px #642d1644!important}
  .md-controls b{font-size:42px}.md-controls span{font-size:12px}.md-controls kbd{font-size:10px}


}
@media(max-height:540px){.md-pattern{display:none}.md-cue{top:62px}.md-country strong{font-size:17px}}

/* Visual judgments originate from the canvas targets; keep announcements accessible. */
.md-feedback{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.md-pattern{display:none}
.md-combo{position:absolute;left:50%;top:calc(53% + clamp(24px,4.8vw,42px));transform:translateX(-50%);font:900 clamp(13px,1.8vw,19px) Nunito,sans-serif;color:#642D16;white-space:nowrap;text-shadow:0 2px 0 #fff9e9,1px 0 0 #fff9e9,-1px 0 0 #fff9e9;font-variant-numeric:tabular-nums}
.md-result-animal{display:block;width:160px;height:112px;max-width:100%;margin:0 auto;pointer-events:none}