/* ECOS layout v2 — welcome screen, menu shell, attribute allocation and move cards.
   Loaded last so it can override the older sheets. */
:root{--v2-bg:#0e262d;--v2-panel:#143239;--v2-panel2:#1a3d44;--v2-line:#3f6a68;--v2-gold:#f1d896;--v2-text:#e9f1e4;--v2-mute:#9fb8b0;--v2-good:#8fe0a8}

/* ---------- Welcome ---------- */
.creation-card{background:linear-gradient(180deg,#10292fee,#0b1f25f2)!important;border:1px solid #4f7c78!important;border-radius:20px!important;padding:26px!important;box-shadow:0 18px 60px #000a,inset 0 1px 0 #ffffff14!important;backdrop-filter:blur(8px)}
.creation-card>.overline{color:var(--v2-gold);letter-spacing:.2em}
.creation-card h2{font-size:30px!important;margin:6px 0 10px!important;letter-spacing:.01em}
#saved-banner{background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:14px;padding:16px;margin-bottom:18px}
#saved-banner::before{content:'SUA JORNADA';display:block;font:700 10px/1 Fredoka,system-ui,sans-serif;letter-spacing:.2em;color:var(--v2-gold);margin-bottom:10px}
#saved-banner #saved-summary{margin:10px 0 0;color:var(--v2-mute);font-size:14px;text-align:center}
#saved-banner .divider{margin:16px 0 0;color:var(--v2-mute);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:center}
#start{width:100%;margin-top:14px}
.cover-features span{background:#0b1f25cc;border:1px solid #4f7c78;border-radius:999px;padding:5px 12px}
.menu-copy,.creation-card .menu-copy{line-height:1.5}

/* ---------- Menu shell ---------- */
.menu-sheet{border-radius:18px!important;background:var(--v2-bg)!important;border:1px solid var(--v2-line)!important;box-shadow:0 24px 80px #000c!important}
.menu-sheet>header{background:linear-gradient(90deg,#173941,#0e262d)!important;border-bottom:1px solid var(--v2-line);padding:12px 20px!important;min-height:60px!important}
.menu-sheet>header h2{font-size:22px;margin:2px 0 0}
.menu-sheet>nav{display:flex;gap:6px;padding:8px 10px!important;background:#0b1f25!important;border-bottom:1px solid #2a4c50;overflow-x:auto}
.menu-sheet>nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1 0 auto;min-width:64px;min-height:50px!important;padding:6px 10px!important;border-radius:12px!important;border:1px solid transparent!important;background:transparent!important;color:var(--v2-mute)!important;font-size:11px!important;letter-spacing:.04em}
.menu-sheet>nav button i{font-style:normal;font-size:19px;line-height:1}
.menu-sheet>nav button.selected{background:var(--v2-panel2)!important;border-color:var(--v2-line)!important;color:var(--v2-gold)!important;box-shadow:inset 0 -2px 0 var(--v2-gold)}
.menu-sheet #menu-content{padding:18px 20px 24px!important}
@media(min-width:860px){
 .menu-sheet{display:grid!important;grid-template-columns:176px 1fr;grid-template-rows:auto 1fr;height:min(720px,calc(100dvh - 40px))!important}
 .menu-sheet>header{grid-column:1/-1}
 .menu-sheet>nav{flex-direction:column;overflow-x:hidden;overflow-y:auto;border-bottom:0;border-right:1px solid #2a4c50;padding:12px 10px!important}
 .menu-sheet>nav button{flex-direction:row;justify-content:flex-start;gap:12px;flex:0 0 auto;width:100%;font-size:14px!important;padding:8px 14px!important;min-height:46px!important}
 .menu-sheet>nav button i{width:22px;text-align:center}
}
@media(orientation:landscape) and (max-height:520px){.menu-sheet>nav button{min-height:40px!important}.menu-sheet>nav button i{font-size:16px}}

/* ---------- Hero tab ---------- */
.hero-card{background:linear-gradient(135deg,#1d4249,#142f36)!important;border:1px solid var(--v2-line)!important;border-radius:16px!important;padding:20px!important}
.hero-card canvas{width:96px!important;height:96px!important;background:#0b1f25;border-radius:14px;border:1px solid var(--v2-line)}
.xp-meter{height:10px!important;border-radius:999px!important;margin:12px 0}

/* ---------- Attribute allocation ---------- */
.alloc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.alloc-head h3{margin:2px 0 0;font-size:24px}
.points-chip{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:14px;background:var(--v2-panel);border:1px solid var(--v2-line);color:var(--v2-mute)}
.points-chip b{font:800 28px/1 Fredoka,system-ui,sans-serif;color:var(--v2-mute)}.points-chip span{font-size:11px;line-height:1.2;max-width:84px}
.points-chip.has{border-color:var(--v2-gold);background:#3a3a22}.points-chip.has b{color:var(--v2-gold)}
.alloc-body{display:grid;grid-template-columns:1fr;gap:16px}

.path-row{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.path-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border-radius:12px;border:1px solid var(--v2-line);background:var(--v2-panel);color:var(--v2-text);text-align:left;cursor:pointer}
.path-card b{font-size:14px;color:var(--v2-gold)}.path-card small{font-size:11px;line-height:1.35;color:var(--v2-mute)}
.path-card:hover:not(:disabled){background:var(--v2-panel2)}.path-card:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:560px){.path-row{grid-template-columns:1fr}}
.attribute-list{display:grid!important;gap:8px}
.attr-row{display:grid!important;grid-template-columns:44px 1fr auto auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--v2-panel);border:1px solid #2c5155}
.attr-row.changed{border-color:var(--v2-gold);background:#1f3b3a}
.attr-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#0b1f25;font-size:22px;color:var(--v2-gold)}
.attr-text{display:flex;flex-direction:column;gap:2px;min-width:0}.attr-text b{font-size:15px}.attr-text small{font-size:11px;color:var(--v2-mute)}
.attr-bar{display:block;height:6px;border-radius:99px;background:#0b1f25;overflow:hidden;margin-top:4px}.attr-bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#4fa58f,var(--v2-gold));transform-origin:left;transition:transform .25s}
.attr-row strong{font:800 22px/1 Fredoka,system-ui,sans-serif;min-width:46px;text-align:right}.attr-row strong em{display:block;font:700 11px/1 Fredoka,system-ui,sans-serif;color:var(--v2-good);font-style:normal;margin-top:3px}
.attr-btns{display:flex;gap:6px}.attr-btns button{width:44px!important;height:44px!important;border-radius:12px;border:1px solid var(--v2-line);background:#0b1f25;color:var(--v2-text);font-size:22px;cursor:pointer}
.attr-btns button:hover:not(:disabled){background:var(--v2-gold);color:#14242a}.attr-btns button:disabled{opacity:.3;cursor:not-allowed}
@media(max-width:480px){.attr-row{grid-template-columns:38px 1fr auto;}.attr-btns{grid-column:2/-1;justify-content:flex-end}.attr-icon{width:38px;height:38px}}
.alloc-side{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:#0b1f25;border:1px solid #2c5155}
.alloc-side h4{margin:0 0 4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-gold)}
.alloc-side .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.alloc-side .stat-box{background:var(--v2-panel);border-radius:10px;padding:8px 10px}.alloc-side .stat-box small{display:block;color:var(--v2-mute);font-size:11px}.alloc-side .stat-box b{font-size:18px}
.alloc-side .cta{margin-top:6px;width:100%}.alloc-side .secondary{width:100%}

/* ---------- Move cards ---------- */
.moves{margin-top:22px}
.move-card{padding:14px;margin-bottom:10px;border-radius:14px;background:var(--v2-panel);border:1px solid #2c5155}
.move-card.locked{opacity:.55}
.move-card>header{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px}
.move-sigil{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:radial-gradient(circle,#2c5a58,#0b1f25);font-size:24px;color:var(--v2-gold);border:1px solid var(--v2-line)}
.move-card b{font-size:16px}
.pips{display:flex;gap:5px;margin-top:6px}.pips i{width:22px;height:8px;border-radius:99px;background:#0b1f25;border:1px solid #2c5155}.pips i.on{background:linear-gradient(90deg,#4fa58f,var(--v2-gold));border-color:var(--v2-gold)}.pips i.cap{opacity:.35;border-style:dashed}
.move-card .evolve{min-height:44px;white-space:nowrap}
.move-stats{margin:10px 0 0;color:var(--v2-mute);font-size:12px;line-height:1.5}
.move-card .branch-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.move-card .branch{min-height:52px;border-radius:12px}
.move-card .branch.selected{border-color:var(--v2-gold);background:#2d4a46;box-shadow:inset 0 0 0 1px var(--v2-gold)}
@media(max-width:480px){.move-card>header{grid-template-columns:44px 1fr}.move-card .evolve{grid-column:1/-1}.move-card .branch-row{grid-template-columns:1fr}}

/* ---------- Title screen: Ribeiro veranda at night, logo and a short menu ---------- */
.welcome .cover-art{background:url(assets/title/titulo_vila_mare.webp) center/cover no-repeat!important;background-size:cover!important;image-rendering:auto}
.welcome .cover-shade{background:linear-gradient(90deg,#050d14cc 0,#050d1455 38%,#0000 62%)!important}
.welcome-inner{display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px!important;max-width:none!important;padding:5vh 5vw!important;min-height:calc(100dvh - 42px)}
.wordmark{padding:0!important;max-width:min(560px,88vw)}
.wordmark h1{margin:0;line-height:0}.wordmark h1 img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 18px #000a)}
.wordmark>.overline,.wordmark>p,.cover-features{display:none!important}
.creation-card{width:min(360px,88vw);background:none!important;border:0!important;box-shadow:none!important;padding:0!important;backdrop-filter:none!important}
.creation-card>.overline,.creation-card>h2,.creation-card .muted,.creation-card .menu-copy,.creation-card label,.creation-card #power-description,.creation-card #character-creator{display:none!important}
#saved-banner{background:none!important;border:0!important;padding:0!important;margin:0 0 10px!important}
#saved-banner::before{display:none}
#saved-banner .divider{display:none}
#saved-banner #saved-summary{text-align:left;margin:6px 4px 0;font-size:13px;color:#d9cfae;text-shadow:0 1px 2px #000}
.creation-card .cta,.creation-card #start{width:100%;margin-top:0!important;font-size:17px;letter-spacing:.1em;text-transform:uppercase}
.welcome footer{color:#c9bf9fa8;text-shadow:0 1px 2px #000}
@media(max-width:760px){.welcome-inner{padding:4vh 6vw!important;justify-content:flex-start;gap:8px!important}.wordmark{max-width:92vw}}

/* Loja no celular em paisagem: sem abas e com cabeçalho compacto, para a lista de produtos caber (844x390). */
@media(orientation:landscape) and (max-height:520px){#menu.shop-open .menu-sheet>nav{display:none}#menu.shop-open .menu-sheet>header{padding-top:2px;padding-bottom:2px}#menu.shop-open .menu-sheet>header h2{font-size:17px;margin:0}#menu.shop-open .menu-sheet>header small{display:none}#menu.shop-open #menu-content{padding-top:2px}#menu.shop-open #menu-content .overline{display:none}#menu.shop-open #menu-content h3{font-size:16px;margin:2px 0 4px}#menu.shop-open #menu-content .shop-balance{margin:2px 0 6px;padding:6px 12px}}