/* Layout A (Black 2 look): Ataque in the corner and five customisable slots on an arc around it (hud-slots.mjs);
   joystick and Interagir on the left. Loaded last, so it wins over the older HUD sheets. */
#game .skills .skill{background:center/contain no-repeat transparent!important;border:0!important;box-shadow:none!important;border-radius:50%!important;color:#fff}
#game .skills .skill[data-skill=attack]{background-image:url(assets/ui/v5/ataque.png?v=1.2.74)!important}
#game .skills .skill[data-skill=special]{background-image:url(assets/ui/v5/especial.png?v=1.2.74)!important}
#game .skills .skill[data-skill=burst]{background-image:url(assets/ui/v5/rajada.png?v=1.2.74)!important}
#game .skills .skill[data-skill=ultimate]{background-image:url(assets/ui/v5/supremo.png?v=1.2.74)!important}
#game .skills .skill[data-skill=guard]{background-image:url(assets/ui/v5/defesa.png?v=1.2.74)!important}
#game .skills .skill[data-skill=heal]{background-image:url(assets/ui/v5/cura.png?v=1.2.74)!important}
#game .skills .skill[data-item=tonico]{background-image:url(assets/ui/v5/tonico.png?v=1.2.74)!important}
#game .skills .skill[data-item=antidoto]{background-image:url(assets/ui/v5/antidoto.png?v=1.2.74)!important}
#game .skills .skill.empty{background-image:url(assets/ui/v5/vazio.png?v=1.2.74)!important;opacity:.75}
/* The art carries the icon: hide the old glyph and name, keep the badge (level lock, kits, count). */
#game .skills .skill .glyph,#game .skills .skill b{display:none!important}
#game .skills .skill small{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);padding:1px 5px;border-radius:7px;background:#14213df0;border:1px solid #fff;color:#fff;font:700 8px Fredoka,system-ui,sans-serif;white-space:nowrap;pointer-events:none}
#game .skills .skill small:empty{display:none}
#game .skills .skill .cooldown{position:absolute;inset:9%;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 13px Fredoka,system-ui,sans-serif;text-shadow:0 1px 0 #000}
#game .skills .skill:disabled{filter:grayscale(.7) brightness(1.05)!important;opacity:.7}
#game .skills .skill:active,#game .skills .skill.pressed{transform:scale(.92)!important;filter:brightness(1.15)!important}
#game #hud-support{display:none!important}
#game #interact{background:center/contain no-repeat url(assets/ui/v5/interagir.png?v=1.2.74)!important;border:0!important;box-shadow:none!important;color:transparent!important}
#game #interact b,#game #interact span{opacity:0}
#joystick .joystick-base{background:center/contain no-repeat url(assets/ui/v5/joystick_base.png?v=1.2.74)!important;border:0!important;box-shadow:none!important;opacity:.9!important}
#joystick .joystick-base .joystick-knob{background:center/contain no-repeat url(assets/ui/v5/joystick_knob.png?v=1.2.74)!important;border:0!important;box-shadow:none!important;width:44px!important;height:44px!important;margin:-22px 0 0 -22px!important}

/* The panel must not be a containing block for fixed children (an identity transform made Interagir and Técnica land on top of the attack button). */
#game .combat-panel{transform:none!important;will-change:auto!important;animation:none!important}
/* Touch: the arc. Attack centre sits 52 px from the corner; slots on a 150-px arc from left (slot 1) to top (slot 5). */
@media(max-width:1100px),(pointer:coarse){
 #game .skills .skill[data-slot]{display:block!important;visibility:visible!important;pointer-events:auto!important;width:54px!important;height:54px!important}
 #game .skills .skill[data-skill=attack]{width:84px!important;height:84px!important;right:10px!important;bottom:10px!important}
 #game .skills .skill[data-slot="0"]{right:175px!important;bottom:25px!important}
 #game .skills .skill[data-slot="1"]{right:164px!important;bottom:82px!important}
 #game .skills .skill[data-slot="2"]{right:131px!important;bottom:131px!important}
 #game .skills .skill[data-slot="3"]{right:82px!important;bottom:164px!important}
 #game .skills .skill[data-slot="4"]{right:25px!important;bottom:175px!important}
 /* Técnica (when a technique is ready) moves to the left cluster, above Interagir, off the arc. */
 #game #technique-button{position:fixed!important;right:auto!important;left:calc(max(12px,env(safe-area-inset-left)) + 150px)!important;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 76px)!important}
 #game #interact{position:fixed!important;right:auto!important;left:calc(max(12px,env(safe-area-inset-left)) + 150px)!important;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 8px)!important;width:58px!important;height:58px!important}
}
@media(orientation:portrait) and (max-width:1100px){
 #game #interact{left:auto!important;right:calc(max(12px,env(safe-area-inset-right)) + 200px)!important;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 8px)!important}
}
/* Desktop: a row, slot order kept. */
@media(min-width:1101px) and (pointer:fine){#game .skills .skill{width:64px!important;height:64px!important;position:relative}}

.slot-picker{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:#08111bcc;padding:16px}
.slot-picker-card{max-width:440px;width:100%;max-height:calc(100dvh - 32px);overflow:auto;background:#f6f1df;color:#14213d;border:4px solid #fff;outline:3px solid #14213d;border-radius:14px;padding:16px}
.slot-picker-card h3{margin:0 0 4px;font:700 16px Fredoka,system-ui,sans-serif}.slot-picker-card p{margin:0 0 12px;font-size:13px;line-height:1.4}
.slot-picker-grid,.slot-settings{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.slot-option{min-height:96px;border:2px solid transparent;border-radius:12px;background:center 8px/56px no-repeat #e9e2c8;display:flex;align-items:flex-end;justify-content:center;padding:6px;color:#14213d;font:700 11px Fredoka,system-ui,sans-serif;cursor:pointer}
.slot-option.current{border-color:#e2463b;background-color:#fff}
.slot-picker-close{margin-top:14px;width:100%;min-height:48px;border-radius:10px;border:3px solid #14213d;background:#fff;font:700 13px Fredoka,system-ui,sans-serif;color:#14213d}
.slot-settings .slot-option{background-color:#203c40;color:#e9e5cc}

/* Panels and top buttons (cream parchment frames of the v5 kit). The frame art is a 9-slice: corners kept, edges and fill stretched. */
#game .hero-vitals,#game .quest-hud,#game #sibling-hud,#game .target-hud{border:12px solid transparent!important;border-image:url(assets/ui/v5/panel_cream.png?v=1.2.74) 60 fill / 14px stretch!important;background:none!important;box-shadow:none!important;color:#14213d!important;text-shadow:none!important}
#game .quest-hud{border-image-source:url(assets/ui/v5/panel_cream.png?v=1.2.74)!important}
#game .hero-vitals *,#game .quest-hud *,#game #sibling-hud,#game #sibling-hud *,#game .target-hud *{color:#14213d!important;text-shadow:none!important}
#game .quest-hud span{color:#1f6fb2!important;font-weight:700}
#game .hero-vitals .level{background:#14213d!important;color:#fff!important;border-color:#fff!important}
#game .meter{background:#1d3347!important;border:1.5px solid #e0b252!important;border-radius:999px!important;overflow:hidden;height:11px!important;min-height:11px}
#game .meter i{border-radius:999px!important}
#game .meter.health i{background:linear-gradient(#a5ec7a,#5cb83e)!important}
#game .meter.energy i{background:linear-gradient(#8fdcff,#2e8fe0)!important}
#game #dialogue:not(.ritual-mode){border:14px solid transparent!important;border-image:url(assets/ui/v5/dialog.png?v=1.2.74) 56 fill / 18px stretch!important;background:none!important;box-shadow:0 4px 0 #0b142477!important;color:#14213d!important}
#game #dialogue:not(.ritual-mode) #speech,#game #dialogue:not(.ritual-mode) #speaker{color:#14213d!important;text-shadow:none!important}
#game #dialogue:not(.ritual-mode) #speaker{color:#c2362c!important}
#game .top-actions>button{width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;border:0!important;border-image:none!important;background:center/contain no-repeat url(assets/ui/v5/icone_vazio.png?v=1.2.74)!important;color:transparent!important;font-size:0!important;box-shadow:none!important}
#game .top-actions>button *{display:none!important}
#game #quick-inventory{background-image:url(assets/ui/v5/icone_mochila.png?v=1.2.74)!important}
#game #quick-attributes{background-image:url(assets/ui/v5/icone_estrela.png?v=1.2.74)!important}
#game #sound{background-image:url(assets/ui/v5/icone_musica.png?v=1.2.74)!important}
#game #fullscreen{background-image:url(assets/ui/v5/icone_tela.png?v=1.2.74)!important}
#game #menu-open{background-image:url(assets/ui/v5/icone_menu.png?v=1.2.74)!important}
#game .top-actions>button:active{transform:translateY(2px)}
#game .guide{border:10px solid transparent!important;border-image:url(assets/ui/v5/toast_cream.png?v=1.2.74) 36 fill / 10px stretch!important;background:none!important;box-shadow:none!important;color:#14213d!important;text-shadow:none!important;padding:0 6px!important}
#game .guide::before,#game .guide::after{display:none!important}
/* Short landscape: keep the objective pill clear of the five top buttons. */
@media(max-height:500px) and (orientation:landscape){#game .guide{left:46%!important;max-width:26%!important;white-space:normal!important}}
/* Portrait: hero card on the left, mission card narrower on the right, sibling chip below both (no overlap). */
@media(orientation:portrait) and (max-width:1100px){
 #game .hero-vitals{max-width:calc(50% - 6px)!important}
 #game .quest-hud{width:calc(50% - 10px)!important;max-width:none!important;left:auto!important;right:6px!important;top:56px!important}
 #game #sibling-hud{top:calc(56px + 96px)!important;left:6px!important}
}

/* A change of objective step pulses the fixed objective chip instead of raising a second banner with the same text. */
#game .guide.guide-flash{animation:guideFlash 1.6s ease-out 1}
@keyframes guideFlash{0%{filter:none}20%{filter:drop-shadow(0 0 6px #ffe9a8) brightness(1.18)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){#game .guide.guide-flash{animation:none;outline:2px solid #ffe9a8}}

/* Toasts sit low and centred (above the thumbs' row), never over the objective chip or the top buttons. */
@media (orientation:landscape) and (max-height:500px){#game .toast,.toast{top:auto!important;bottom:24%!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;max-width:42%!important;font-size:11px!important;padding:6px 10px!important;text-align:center}}
@media (orientation:portrait) and (max-width:600px){#game .toast,.toast{top:auto!important;bottom:31%!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;max-width:84%!important;font-size:12px!important;text-align:center}}

/* An element marked hidden must never show: several HUD boxes set display:flex and kept empty grey bars on screen. */
#game [hidden],#playfield [hidden]{display:none!important}

/* Portrait phones (390x844): the menu's number grid fits its card, and the tab bar tells the player it scrolls. */
@media (max-width:600px) and (orientation:portrait){
 #game .stat-grid,.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .stat-box{min-width:0;padding:8px 8px}
 .stat-box b{font-size:clamp(14px,4.6vw,18px);overflow-wrap:anywhere}
 #menu-tabs{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);scroll-snap-type:x proximity}
 #menu-tabs [data-tab]{scroll-snap-align:start}
}

/* Touch targets in the menu: at least 44 px tall (settings rows were 39-42 px). */
@media (pointer:coarse),(max-width:600px),(max-height:500px){
 #menu-content button,#menu-content select,#menu-content input,#menu-content [role=button],#menu-content label.row,#menu-content .setting-row{min-height:44px}
}

/* Installed / full-screen on iPhone (viewport-fit=cover): the whole game container stays inside the notch and the home bar,
   so the HUD (positioned inside it) never sits under them. Without insets these are 0 and nothing changes. */
@media (orientation:landscape) and (max-height:500px){
 #game.game,.game{padding-left:env(safe-area-inset-left,0px)!important;padding-right:env(safe-area-inset-right,0px)!important}
}
@media (orientation:portrait){
 #game.game,.game{padding-top:env(safe-area-inset-top,0px)}
}

/* Landscape phones (844x390): the menu gives its height to the content, not to the header and the tab row. */
@media (orientation:landscape) and (max-height:500px){
 #menu .menu-sheet header{padding-top:0!important;padding-bottom:0!important;min-height:0!important;margin:0!important}
 #menu .menu-sheet header .overline{display:none!important}
 #menu .menu-sheet header h2{font-size:15px!important;line-height:1.1!important;margin:0!important}
 #menu-close{width:44px!important;height:44px!important}
 #menu-tabs{height:48px!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important}
 #menu-tabs button{height:44px!important;min-height:44px!important;flex-direction:row!important;gap:6px!important;padding:0 12px!important;align-items:center!important}
 #menu-tabs button i{font-size:14px!important;margin:0!important}
}
#menu-content a{display:inline-flex;align-items:center;min-height:44px}

/* Dialogue with choices on landscape phones: the choices sit in a 2x2 grid, the box may grow to ~72% of the height without an inner
   scrollbar, "Continuar/Entendido" hides while there are choices (it closed the scene without choosing), and the box is opaque so map
   labels no longer show through the text. */
.no-next,#game #dialogue-next.no-next{display:none!important}
#game #dialogue:not(.ritual-mode){background-color:#102b35!important}
@media (orientation:landscape) and (max-height:500px){
 #game #dialogue:not(.ritual-mode){max-height:72dvh!important}
 #game .dialogue-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;overflow:visible!important;max-height:none!important}
 #game .dialogue-actions button{min-height:44px;padding:6px 8px;font-size:13px;line-height:1.15}
}

/* Landscape phones: every control cluster keeps at least 24 px from the left and right edges (thumbs, notch, edge gestures). */
@media (orientation:landscape) and (max-height:500px){
 #game .skills{left:24px!important;right:24px!important}
 #game #joystick{margin-left:12px}
 #game .top-actions{margin-right:14px}
 #game .hero-vitals,#game #sibling-hud{margin-left:14px}
 #game .quest-hud{margin-right:9px}
 #game #brand{margin-left:14px}
}

/* 814x374 (real iPhone landscape): a long line plus four choices must fit. The box may use almost the whole height, the text is a
   little smaller and the choice buttons keep 44 px height with tighter padding. */
@media (orientation:landscape) and (max-height:420px){
 #game #dialogue:not(.ritual-mode){max-height:calc(100dvh - 16px)!important;bottom:8px!important;row-gap:6px!important;padding-top:10px!important;padding-bottom:10px!important}
 #game #dialogue:not(.ritual-mode) #speech{font-size:15px!important;line-height:1.3!important}
 #game .dialogue-actions button{font-size:12px!important;padding:4px 10px!important;line-height:1.1!important}
}