*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#7ec8f2;font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Roboto,"DejaVu Sans",sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#cap{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 10px);transform:translateX(-50%);width:min(94vw,760px);text-align:center;pointer-events:none;background:rgba(255,255,255,.86);border-radius:18px;padding:8px 16px 10px;box-shadow:0 4px 18px rgba(40,60,90,.18);transition:opacity .35s}
#ttl{font-weight:800;color:#e0663f;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
#txt{font-size:clamp(16px,2.6vw,24px);color:#2c3550;font-weight:700;line-height:1.25;min-height:1.25em;transition:opacity .3s}
#txt.fade{opacity:0}
#ui{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 8px);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
#prog{width:min(70vw,420px);height:4px;border-radius:3px;background:rgba(255,255,255,.55);overflow:hidden}
#progIn{height:100%;width:0;background:#e0663f}
#dots{display:flex;gap:4px;pointer-events:auto;flex-wrap:wrap;justify-content:center;max-width:96vw}
#dots button{width:22px;height:22px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
#dots button i{display:block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s,background .2s}
#dots button.on i{background:#e0663f;transform:scale(1.35)}
#bar{display:flex;gap:12px;pointer-events:auto}
#bar button{width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 3px 12px rgba(30,50,80,.25);display:grid;place-items:center;cursor:pointer;color:#2c3550}
#bar button:active{transform:scale(.93)}
#bar svg{width:26px;height:26px;fill:#2c3550;stroke:none}
#prev svg path,#next svg path{fill:none;stroke:#2c3550;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#bar .ln{fill:none;stroke:#2c3550;stroke-width:2.4;stroke-linecap:round}
#play{background:#e0663f!important}
#play svg{fill:#fff}#play .ln{stroke:#fff}
#icoPlay,#icoReplay{display:none}
body.paused #icoPause{display:none}body.paused #icoPlay{display:block}
body.ended #icoPause,body.ended #icoPlay{display:none}body.ended #icoReplay{display:block}
#sndOn{display:none}body.sound #sndOn{display:block}body.sound #sndOff{display:none}
#hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 118px);font-size:13px;color:#fff;background:rgba(30,40,70,.55);padding:5px 12px;border-radius:12px;pointer-events:none;transition:opacity .6s;white-space:nowrap}
#hint.hide{opacity:0}
@media (max-height:500px){
  #cap{top:6px;padding:4px 12px 6px;border-radius:14px;width:min(70vw,640px)}
  #ttl{font-size:11px}#txt{font-size:16px}
  #ui{flex-direction:row;justify-content:center;bottom:6px;gap:10px;align-items:center}
  #prog{display:none}
  #bar button{width:42px;height:42px}#bar svg{width:22px;height:22px}
  #dots button{width:18px;height:18px}#dots button i{width:8px;height:8px}
  #hint{bottom:auto;top:52px}
}