/* PROJECT OHANA V36 · CINEMATIC UI
   Shared interaction language for in-game buttons, pause, map and help. */
:root{
  --v36-panel:linear-gradient(180deg,rgba(12,20,34,.9),rgba(3,8,17,.94));
  --v36-line:rgba(255,255,255,.12);
  --v36-soft:rgba(226,238,250,.68);
  --v36-gold:#ffe19a;
  --v36-cyan:#9deaff;
}
body.playing #top-actions{
  display:flex;top:12px;gap:6px;padding:4px;
  border:1px solid rgba(255,255,255,.07);border-radius:14px;
  background:rgba(3,8,17,.44);backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}
body.playing #top-actions button{
  min-height:34px;padding:0 11px;border:1px solid transparent;border-radius:9px;
  background:transparent;color:rgba(238,247,255,.64);
  box-shadow:none;font:800 8px/1 Outfit,sans-serif;letter-spacing:.11em;text-transform:uppercase;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
body.playing #top-actions button kbd{margin-left:3px;color:rgba(255,255,255,.38);font:700 8px/1 Outfit,sans-serif}
body.playing #top-actions button:hover,body.playing #top-actions button:focus-visible{
  transform:translateY(-1px);color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);outline:0;
}
body.playing #top-actions button[aria-pressed="true"]{color:var(--v36-cyan);background:rgba(126,231,255,.08);border-color:rgba(126,231,255,.18)}

#help,#map-overlay,#pause-overlay{
  background:
    radial-gradient(circle at 50% 35%,rgba(80,150,200,.09),transparent 36%),
    rgba(1,4,10,.78)!important;
  backdrop-filter:blur(8px);
}
#help::before,#map-overlay::before,#pause-overlay::before,
#help::after,#map-overlay::after,#pause-overlay::after{
  content:"";position:absolute;left:0;right:0;height:clamp(34px,7vh,72px);background:#010307;pointer-events:none;
}
#help::before,#map-overlay::before,#pause-overlay::before{top:0}
#help::after,#map-overlay::after,#pause-overlay::after{bottom:0}
#help .panel,#map-overlay .panel,#pause-overlay .panel{
  position:relative;z-index:2;width:min(620px,calc(100vw - 36px));max-height:min(76vh,680px);
  margin:0;padding:30px 30px 24px;border:1px solid var(--v36-line);border-radius:24px;
  background:var(--v36-panel);box-shadow:0 34px 100px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
#pause-overlay .panel{width:min(390px,calc(100vw - 36px));padding:32px 26px 24px}
#help .panel::before,#map-overlay .panel::before,#pause-overlay .panel::before{
  content:"MUNDO 1 · ISLA HOKU";display:block;margin:0 0 8px;color:var(--v36-gold);
  font:800 8px/1 Outfit,sans-serif;letter-spacing:.32em;text-transform:uppercase;
}
#help h2,#map-overlay h2,#pause-overlay h2{
  margin:0 0 16px;color:#fff;font:700 clamp(30px,4vw,42px)/.95 Fredoka,sans-serif;letter-spacing:-.025em;
}
#help ul,#help p{color:var(--v36-soft);font-size:13px;line-height:1.55}
#help li+li{margin-top:7px}
#help kbd,#map-overlay kbd{
  margin:0 2px;padding:2px 6px;border:1px solid rgba(255,255,255,.12);border-radius:6px;
  background:rgba(255,255,255,.055);color:#fff;font:800 10px/1 Outfit,sans-serif;
}
#help .cta,#map-overlay .cta,#pause-overlay .cta{
  min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.12)!important;border-radius:10px!important;
  background:rgba(255,255,255,.045)!important;color:#fff!important;box-shadow:none!important;
  font:800 9px/1 Outfit,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  animation:none!important;transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
#help .cta:hover,#map-overlay .cta:hover,#pause-overlay .cta:hover,
#help .cta:focus-visible,#map-overlay .cta:focus-visible,#pause-overlay .cta:focus-visible{
  transform:translateY(-1px)!important;border-color:rgba(255,255,255,.32)!important;background:rgba(255,255,255,.08)!important;outline:0;
}
#pause-overlay #btn-resume{
  background:linear-gradient(135deg,#ffe49d,#efb33f)!important;border-color:#ffe08a!important;color:#1c1307!important;
}
#map-grid{gap:8px}
#map-grid>*{border-color:rgba(255,255,255,.09)!important;background:rgba(255,255,255,.035)!important}

#boss-wrap{
  top:58px!important;width:min(580px,62vw)!important;padding:9px 14px 11px!important;border:1px solid rgba(255,91,117,.22)!important;
  border-radius:14px!important;background:linear-gradient(180deg,rgba(45,7,17,.66),rgba(7,4,10,.72))!important;
  box-shadow:0 18px 46px rgba(0,0,0,.34),0 0 28px rgba(255,68,99,.07)!important;backdrop-filter:blur(14px)!important;
}
#boss-wrap .boss-label{font:800 9px/1 Outfit,sans-serif!important;letter-spacing:.3em!important;color:#ffd6dc!important}
#boss-wrap .bar.boss{height:8px!important;margin-top:7px!important;border-radius:99px!important;overflow:hidden!important}

@media(max-width:820px){
  body.playing #top-actions{top:6px;transform:translateX(-50%) scale(.88)}
  #help .panel,#map-overlay .panel,#pause-overlay .panel{padding:24px 20px 20px}
  #boss-wrap{top:48px!important;width:min(620px,86vw)!important}
}
@media(max-width:560px){
  body.playing #top-actions{gap:2px;padding:2px}
  body.playing #top-actions button{min-height:30px;padding:0 7px;font-size:7px}
  #help .panel,#map-overlay .panel,#pause-overlay .panel{width:calc(100vw - 20px);border-radius:19px;padding:22px 16px 18px}
}
@media(prefers-reduced-motion:reduce){
  body.playing #top-actions button,#help .cta,#map-overlay .cta,#pause-overlay .cta{transition:none!important}
}