/* ===== JOGOS DE ESTILO (moda, cabelo, unhas, maquiagem, desfile) ===== */
/* Classes compartilhadas pelos cinco jogos. A boneca vive num <canvas> dentro
   de .glam-stage; as escolhas ficam em barras roláveis abaixo. */

.glam-root{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.glam-stage{flex:1;position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
.glam-stage canvas{display:block;width:100%;height:100%;touch-action:none}

/* Painel inferior de escolhas */
.glam-panel{flex-shrink:0;background:rgba(255,255,255,.92);border-radius:22px 22px 0 0;box-shadow:0 -6px 22px rgba(0,0,0,.18);padding:8px 0 max(8px,var(--safe-bottom,8px));display:flex;flex-direction:column;gap:6px}
.glam-panel.dark{background:rgba(30,25,45,.92)}

/* Abas (categorias de item) */
.glam-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.glam-tabs::-webkit-scrollbar{display:none}
.glam-tab{flex:0 0 auto;border:0;border-radius:16px;padding:7px 13px;font-family:inherit;font-size:13px;font-weight:800;color:#6b5b7a;background:rgba(0,0,0,.06);cursor:pointer;display:flex;align-items:center;gap:5px;transition:transform .12s,background .15s}
.glam-tab:active{transform:scale(.94)}
.glam-tab.active{background:linear-gradient(180deg,#FF8AC0,#E75FA5);color:#fff;box-shadow:0 3px 10px rgba(231,95,165,.4)}

/* Itens (roupas, penteados, adesivos...) */
.glam-items{display:flex;gap:8px;overflow-x:auto;padding:2px 10px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.glam-items::-webkit-scrollbar{display:none}
.glam-item{flex:0 0 auto;width:64px;height:64px;border:3px solid transparent;border-radius:18px;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.12);cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;transition:transform .12s}
.glam-item:active{transform:scale(.92)}
.glam-item.active{border-color:#E75FA5;box-shadow:0 4px 14px rgba(231,95,165,.45)}
.glam-item canvas{width:46px;height:46px;display:block}
.glam-item .gi-icon{font-size:26px;line-height:1}
.glam-item .gi-name{font-size:9px;font-weight:800;color:#7a6a88;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Cores */
.glam-colors{display:flex;gap:8px;overflow-x:auto;padding:2px 10px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.glam-colors::-webkit-scrollbar{display:none}
.glam-swatch{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer;padding:0;transition:transform .12s}
.glam-swatch:active{transform:scale(.9)}
.glam-swatch.active{transform:scale(1.12);border-color:#E75FA5;box-shadow:0 3px 12px rgba(231,95,165,.5)}

/* Ferramentas flutuantes (tesoura, pincel, esmalte...) */
.glam-tools{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:8px;z-index:3}
.glam-tools.left{right:auto;left:8px}
.glam-tool{width:52px;height:52px;border-radius:16px;border:3px solid rgba(255,255,255,.8);background:rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(0,0,0,.2);font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .12s}
.glam-tool:active{transform:scale(.9)}
.glam-tool.active{border-color:#E75FA5;background:#fff;box-shadow:0 4px 16px rgba(231,95,165,.5);transform:scale(1.06)}

/* Botoes de acao */
.glam-actions{display:flex;gap:8px;padding:2px 10px}
.glam-btn{flex:1;border:0;border-radius:16px;padding:11px 10px;font-family:inherit;font-size:14px;font-weight:900;color:#fff;background:linear-gradient(180deg,#FF8AC0,#E75FA5);box-shadow:0 4px 12px rgba(231,95,165,.4);cursor:pointer;transition:transform .12s}
.glam-btn:active{transform:scale(.96)}
.glam-btn.ghost{background:rgba(0,0,0,.08);color:#6b5b7a;box-shadow:none}
.glam-btn.gold{background:linear-gradient(180deg,#FFD86B,#F0A93B);box-shadow:0 4px 12px rgba(240,169,59,.45);color:#5a3b00}
.glam-btn.blue{background:linear-gradient(180deg,#7FC7FF,#4A9BE0);box-shadow:0 4px 12px rgba(74,155,224,.4)}

/* Dica / instrucao dentro do palco */
.glam-hint{position:absolute;left:50%;transform:translateX(-50%);top:8px;background:rgba(0,0,0,.42);color:#fff;font-size:13px;font-weight:800;padding:7px 14px;border-radius:14px;z-index:3;pointer-events:none;max-width:88%;text-align:center;animation:glamHintIn .35s ease both}
@keyframes glamHintIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* Overlay de resultado (desfile) */
/* Nao reaproveitar glamHintIn aqui: aquela keyframe carrega o translate(-50%)
   que centraliza o .glam-hint e, com fill:both, empurrava o overlay meia tela
   para a esquerda. Keyframe propria, sem translate. */
.glam-overlay{position:absolute;inset:0;background:rgba(20,10,35,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:6;padding:18px;text-align:center;animation:glamOverlayIn .3s ease both}
@keyframes glamOverlayIn{from{opacity:0}to{opacity:1}}
.glam-overlay h2{color:#fff;font-size:26px;font-weight:900;margin:0;text-shadow:0 3px 12px rgba(0,0,0,.4)}
.glam-overlay p{color:rgba(255,255,255,.92);font-size:15px;font-weight:700;margin:0;line-height:1.4}
.glam-overlay .glam-stars{font-size:38px;letter-spacing:4px}
.glam-overlay .glam-btn{flex:0 0 auto;min-width:190px}

/* A categoria "Estilo" e a 5a do menu: num grid de 2 colunas ela ficaria
   sozinha e torta, entao o ultimo card impar ocupa a linha inteira. */
.premenu-grid > .premenu-card:nth-child(5):last-child{grid-column:1 / -1}