#combo { --combo-color:#ffe3a4; color:var(--combo-color); transition:color .18s; }
#combo.combo-tier-1 { --combo-color:#ffce76; }
#combo.combo-tier-2 { --combo-color:#ffae57; text-shadow:0 0 14px #ef9d5266; }
#combo.combo-tier-3 { --combo-color:#ff875d; text-shadow:0 0 18px #ff855788; }
#combo.combo-tier-4 { --combo-color:#fff0b2; text-shadow:0 0 8px #ffbd57,0 0 24px #ff684388; }
#combo.combo-tier-2::after,#combo.combo-tier-3::after,#combo.combo-tier-4::after { content:''; position:absolute; inset:-8px -12px; border:1px solid currentColor; border-radius:8px; opacity:.6; transform:skewX(-7deg); pointer-events:none; }
/* A five-character title must fit phone portrait and narrow desktop windows. */
.intro h1 { font-size:clamp(38px,7vw,96px); letter-spacing:.08em; }
.intro { max-width:min(620px,86vw); }
html[lang="en"] .intro h1 { font-size:clamp(36px,5vw,64px); }
#loading h1 { font-size:clamp(26px,6vw,52px); }
@media(max-width:800px) { .intro h1 { font-size:clamp(34px,9vw,64px); } .brand { font-size:18px; } }
@media(prefers-reduced-motion:reduce) { #combo { transition:none; } }
#freestyle { margin-top:12px; border-top:1px solid #ffffff25; padding-top:10px; font-size:11px; }
#freestyle summary { cursor:pointer; color:#d8edb9; }
#freestyle summary b { float:right; }
#freestyle p { font-size:10px; line-height:1.5; color:#bbcbb6; }
#freestyle .challenge-row { display:flex; justify-content:space-between; gap:10px; margin-top:7px; }
#relief-note { position:absolute; top:calc(50% + 72px); left:50%; transform:translateX(-50%); padding:8px 14px; max-width:80vw; color:#dce8d1; background:#172b2399; border-radius:20px; font-size:12px; text-align:center; pointer-events:none; }
#relief-note button { pointer-events:auto; margin-left:10px; color:#e4efd7; background:transparent; border:1px solid #a4bb96; border-radius:14px; padding:4px 8px; }
#practice-coach { position:absolute; top:110px; left:50%; transform:translateX(-50%); width:min(420px,calc(100vw - 32px)); padding:16px 18px; border:1px solid #a7c88f66; border-radius:12px; background:#17352bee; pointer-events:auto; }
#practice-coach small { color:#b8cda8; } #practice-coach h2 { margin:8px 0; font-size:21px; } #practice-coach p { line-height:1.6; margin:8px 0 12px; }
#practice-coach .panel-actions { margin-top:10px; } #practice-coach button { padding:9px 13px; }
body[data-coach-step="0"] #joystick,body[data-coach-step="2"] [data-touch="attack"],body[data-coach-step="3"] [data-touch="heavy"] { outline:3px solid #dfedac; box-shadow:0 0 18px #d8edb955; }
.practice-intro { max-width:640px; margin:auto; } .practice-intro>small { color:#d6e9b7; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.result-stats div { padding:14px; border:1px solid #78916b; border-radius:8px; text-align:center; } .result-stats strong { display:block; color:#e3edbc; font-size:32px; } .result-stats span { display:block; font-size:12px; margin-top:5px; }
.result-maps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .result-maps figure { margin:0; min-width:0; } .result-maps figcaption { margin-bottom:8px; color:#d3e0c4; } .result-maps canvas { position:static; display:block; width:100%; height:auto; border-radius:8px; }
.record-badge { color:#edcd83!important; }
@media(max-width:600px) { #practice-coach { top:86px; font-size:12px; padding:12px; } .result-stats div { padding:8px; } .result-stats strong { font-size:26px; } .result-maps { gap:8px; } }
@media(max-height:500px) and (orientation:landscape) {
 #practice-coach { top:66px; left:14px; transform:none; width:min(290px,42vw); padding:8px 10px; font-size:11px; }
 #practice-coach h2 { font-size:16px; margin:4px 0; } #practice-coach p { margin:4px 0 6px; line-height:1.4; }
 #practice-coach .panel-actions { margin-top:5px; } #practice-coach button { padding:6px 8px; font-size:11px; }
}