/* ECOS UI kit v5: warm cream-and-gold painted kit (assets/ui/v5, from docs/arte_v2/fontes/ui). Loaded last. */
:root{--ui-sand:#f6ecd4;--ui-ink:#1d3347;--ui-gold:#e0b252}

/* ---------- Wide buttons (9-slice) ---------- */
.cta,.secondary:not(.branch):not(.path-card):not(#sibling-hud),#dialogue-next{
 border:14px solid transparent!important;border-width:16px 26px!important;border-radius:0!important;background:none!important;box-shadow:none!important;
 border-image:url(assets/ui/v5/btn_wide_secondary.png) 40 70 fill/16px 26px stretch!important;
 color:var(--ui-ink)!important;font-weight:700;letter-spacing:.02em;text-shadow:none;padding:6px 4px!important;min-height:52px;cursor:pointer}
.cta{border-image-source:url(assets/ui/v5/btn_wide_primary.png)!important;color:#fff!important;text-shadow:0 1px 0 #0d4a43}
.secondary.danger,.danger{border-image-source:url(assets/ui/v5/btn_wide_danger.png)!important;color:#fff!important;text-shadow:0 1px 0 #7a2c1c}
.cta:hover:not(:disabled),.secondary:hover:not(:disabled):not(.branch):not(.path-card):not(#sibling-hud),#dialogue-next:hover{filter:brightness(1.08)}
.cta:active:not(:disabled),.secondary:active:not(:disabled):not(.branch):not(.path-card):not(#sibling-hud),#dialogue-next:active{transform:translateY(1px);filter:brightness(.94)}
.cta:disabled,.secondary:disabled:not(.branch):not(.path-card):not(#sibling-hud){filter:grayscale(.85) brightness(.95);opacity:.75;cursor:not-allowed}
.secondary.branch,.path-card{border:1px solid #3f6a68;border-radius:12px}
#dialogue-next{min-height:46px;padding:2px 2px!important;font-size:13px}
.top-actions .menu-btn span{display:none}

/* ---------- Round icon buttons and close ---------- */
.top-actions button{width:48px!important;min-width:48px!important;height:44px!important;padding:0!important;border:0!important;border-radius:0!important;
 background:url(assets/ui/v5/frame_square.png) center/contain no-repeat!important;box-shadow:none!important;color:var(--ui-ink)!important;font-size:19px}
.top-actions button:active{transform:translateY(1px);filter:brightness(.92)}
.close{width:44px!important;height:44px!important;border:0!important;border-radius:0!important;background:url(assets/ui/v5/close_x.png) center/contain no-repeat!important;color:transparent!important;font-size:0!important}
.close:active{transform:translateY(1px);filter:brightness(.92)}

/* ---------- Menu tabs: cream tabs, the open one is bright with a gold edge ---------- */
.menu-sheet>nav button{border:12px solid transparent!important;border-width:14px 16px!important;border-radius:0!important;background:none!important;
 border-image:url(assets/ui/v5/tab_off1.png) 30 40 fill/14px 16px stretch!important;color:#3a3326!important;padding:0 2px!important;min-height:46px!important;box-shadow:none!important;text-shadow:none;font-weight:600}
.menu-sheet>nav button:hover{filter:brightness(1.08)}
.menu-sheet>nav button.selected{border-image-source:url(assets/ui/v5/tab_on.png)!important;color:var(--ui-ink)!important;font-weight:700;transform:translateY(2px)}
@media(min-width:860px){.menu-sheet>nav button{padding:0 4px!important}}

/* ---------- Plus / minus ---------- */
.attr-btns button{border:0!important;border-radius:50%!important;color:#fff!important;font:700 22px/1 Fredoka,system-ui,sans-serif!important;text-shadow:0 1px 0 #0006;background:center/contain no-repeat!important}
.attr-btns [data-plus]{background-image:url(assets/ui/v5/btn_green.png)!important}
.attr-btns [data-minus]{background-image:url(assets/ui/v5/btn_coral.png)!important}
.attr-btns button:active:not(:disabled){transform:scale(.94)}
.attr-btns button:disabled{filter:grayscale(1) brightness(.9);opacity:.6!important}

/* ---------- Level pips ---------- */
.pips{gap:3px}
.pips i{width:20px;height:20px;border:0;border-radius:0;background:url(assets/ui/v5/ic_sparkle.png) center/contain no-repeat;opacity:.3;filter:grayscale(.6)}
.pips i.on{opacity:1;filter:none}
.pips i.cap{opacity:.5;filter:hue-rotate(160deg)}

/* ---------- Skill buttons: art per move in hud-v4.css (assets/ui/v5) ---------- */
#game .skills .skill{
 border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;
 color:var(--ui-sand);padding:9px 5px 6px!important}
#game .skills .skill:active,#game .skills .skill.pressed{filter:none!important;transform:translateY(2px)!important}
#game .skills .skill:disabled{opacity:1!important}
#game .skills .skill .cooldown{inset:14%;border-radius:50%;background:conic-gradient(#0b1418d9 var(--cool-angle,0deg),#0b141830 0)!important;color:var(--ui-sand);font-size:12px}
#game .skills .skill .glyph{color:var(--ui-sand);text-shadow:0 1px 0 var(--ui-ink)}
#game .skills .skill b,#game .skills .skill small{color:var(--ui-sand);text-shadow:0 1px 0 var(--ui-ink),0 0 3px #000}

/* ---------- Interact button and joystick ---------- */
#game #interact{border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;color:var(--ui-sand);background:url(assets/ui/v5/interagir.png) center/100% 100% no-repeat!important}
#game #interact:active{filter:brightness(.92)!important}
#joystick .joystick-base{background:url(assets/ui/v5/joystick_base.png) center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;border-radius:0!important;opacity:.9}
#joystick .joystick-base .joystick-knob{background:url(assets/ui/v5/joystick_knob.png) center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;width:44px!important;height:44px!important;margin:-22px 0 0 -22px!important}

#sibling-hud{border:1px solid #3f6a68!important;border-radius:10px!important;background:#163738d9!important;min-height:0!important;padding:5px 9px!important}

.close:focus-visible,.top-actions button:focus-visible{outline:2px solid #7ce8cf;outline-offset:2px;border-radius:50%}
.close:focus:not(:focus-visible){outline:none}

/* ---------- Frames ---------- */
.menu-sheet{border:16px solid transparent!important;border-image:url(assets/ui/v5/panel_navy.png) 60 fill/16px stretch!important;border-radius:0!important;background:#1d3347!important;box-shadow:0 24px 80px #000c!important}
#menu.modal{background:linear-gradient(#050d14b8,#050d14d9),url(assets/ui/menu_fundo.webp) center/cover no-repeat!important}
.menu-sheet>header{border-radius:0!important}
#dialogue{border:22px solid transparent!important;border-width:20px 26px!important;border-image:url(assets/ui/v5/dialog.png) 56 fill/20px 26px stretch!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--ui-ink)!important}
#dialogue strong,#dialogue #speaker{color:#c2362c!important}
#dialogue p,#dialogue #speech{color:var(--ui-ink)!important}
#toast,.toast{border:12px solid transparent!important;border-width:10px 16px!important;border-image:url(assets/ui/v5/toast_navy.png) 34 fill/10px 16px stretch!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--ui-sand)!important;padding:2px 4px!important}

#saved-banner:not(.hidden)~#start{border-image-source:url(assets/ui/v5/btn_wide_secondary.png)!important;color:var(--ui-ink)!important}
.close:focus-visible{outline:none;filter:brightness(1.3)}

/* Pulse button and support toggle */
#pulse-button{border:12px solid transparent!important;border-width:14px 24px!important;border-radius:0!important;background:none!important;box-shadow:none!important;border-image:url(assets/ui/v5/btn_wide_secondary.png) 40 70 fill/14px 24px stretch!important;color:var(--ui-ink)!important;font-weight:700;letter-spacing:.03em;padding:4px 2px!important}
#pulse-button:active{filter:brightness(.92)}
#hud-support{border:0!important;border-radius:0!important;box-shadow:none!important;background:url(assets/ui/v5/btn_teal.png) center/100% 100% no-repeat!important;color:var(--ui-sand)!important;overflow:visible!important}

/* Phone, landscape: the playfield is the whole screen (no bars, no frame); the top bar floats over it. The canvas keeps its own aspect, so nothing is stretched. */
@media (orientation:landscape) and (max-height:560px){
 #game,#game.academy-stage{position:fixed;inset:0;height:100dvh;max-width:none;padding:0!important}
 #game .topbar{position:absolute;top:0;left:0;right:0;z-index:20;height:42px;padding:0 max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px));background:linear-gradient(#0a1a22cc,#0a1a2200);pointer-events:none}
 #game .topbar button,#game .topbar .top-actions{pointer-events:auto}
 #game .playfield{position:absolute;inset:0;margin:0;min-height:0;border:0;border-radius:0;box-shadow:none}
 #game .hud{top:46px}
 #game #sibling-hud{top:118px!important}
}

@media (orientation:landscape) and (max-height:560px){#topbar #area,#area{display:none!important}#guide{left:50%!important;transform:translateX(-50%);max-width:min(46vw,420px)}}
.dom-note{display:grid;gap:3px;padding:8px 10px;margin:0 0 8px;border:1px solid #c9a96a55;border-radius:6px;background:#0d1b1fcc}.dom-note b{color:#efd094;font-size:13px}.dom-note small{color:#cfe0d4;font-size:11px;line-height:1.35}