/* lobby-creator.css — tela inicial: conta, lobby v2, cards de herói,
 * criador de personagem (aparência) e bloqueio de retrato no mobile.
 * Extraído do style.css para respeitar o teto de tamanho por arquivo */

/* Ícone da raça ao lado do ícone da classe (pedido do usuário) */
.race-mini { font-size:16px; margin-left:6px; filter:drop-shadow(0 1px 2px #000); vertical-align:baseline; }

/* ============ BLOQUEIO DE RETRATO (mobile só deitado) ============ */
#rotateOverlay { position:fixed; inset:0; z-index:9999; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:radial-gradient(circle at 50% 40%, #131a28, #05070c 75%); text-align:center; padding:24px; }
#rotateOverlay[hidden] { display:none; }
#rotateOverlay .rotate-icon { font-size:52px; animation:rotateWiggle 1.6s ease-in-out infinite; }
#rotateOverlay b { font:20px 'Cinzel',serif; color:var(--gold-hi,#f0d48a); letter-spacing:1px; }
#rotateOverlay span { font-size:13px; color:#a8b4cf; }
@keyframes rotateWiggle { 0%,100% { transform:rotate(0deg); } 50% { transform:rotate(-90deg); } }

/* Bloqueia o primeiro frame em retrato touch, antes mesmo do JS carregar.
 * Assim o jogador nunca vê o mundo ou o lobby em pé e tenta clicar em uma
 * interface que será girada depois. */
@media (orientation:portrait) and (pointer:coarse) {
  body > :not(#rotateOverlay) { visibility:hidden; pointer-events:none; }
  #rotateOverlay { display:flex; visibility:visible; pointer-events:auto; }
}

/* ============ CUSTOMIZAÇÃO DE APARÊNCIA (criação de personagem) ============ */
.app-row { display:flex; align-items:center; gap:10px; margin:6px 0; flex-wrap:wrap; }
.app-label { width:110px; min-width:110px; font-size:12px; color:#8a94a8; text-align:left; }
.app-chips, .app-options { display:flex; gap:6px; flex-wrap:wrap; }
.app-chip { width:26px; height:26px; border-radius:50%; border:2px solid #3a3f4a; cursor:pointer; padding:0; }
.app-chip.sel { border-color:var(--gold-hi, #f0d48a); box-shadow:0 0 8px rgba(240,212,138,.5); }
.app-chip:hover { border-color:#8a8a9a; }
.app-opt { background:#14161c; color:#c8d0dc; border:1px solid #3a3f4a; border-radius:6px; padding:4px 12px; font-size:12px; cursor:pointer; }
.app-opt.sel { border-color:var(--gold-hi, #f0d48a); color:#f0d48a; }
.app-opt:hover { border-color:#6a6a7a; }


/* ============ CONTA, LOBBY E SALVAMENTO ============ */
.portal-card { width:min(520px,94vw); margin:0 auto; background:#0b0e15e8; border:1px solid var(--gold-dk); border-radius:12px; padding:22px; box-shadow:0 0 0 4px #0005,0 22px 70px #000d; backdrop-filter:blur(7px); }
.portal-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.portal-tab,.portal-secondary { border:1px solid #4a4234; border-radius:7px; padding:10px 14px; background:#181d28; color:#b9c8e8; font-weight:700; letter-spacing:1px; }
.portal-tab.active { border-color:var(--gold-hi); color:var(--gold-hi); background:#292410; }
.auth-form { display:grid; gap:8px; text-align:left; }
.auth-form label { margin-top:5px; color:#cbbf9f; font-size:13px; }
.auth-form input,.portal-card input { user-select:text; -webkit-user-select:text; width:100%; background:#05070c; border:1px solid #49402d; color:#fff3c6; border-radius:7px; padding:11px 12px; font:15px Arial,sans-serif; outline:none; }
.auth-form input:focus,.portal-card input:focus { border-color:var(--gold-hi); box-shadow:0 0 0 2px #c8aa5a22; }
.portal-primary { border:2px solid #ffe9a8; border-radius:8px; margin-top:10px; padding:13px 18px; background:linear-gradient(#f0d48a,#c8a02c 58%,#987414); color:#271b06; font-weight:900; letter-spacing:2px; box-shadow:0 4px 0 #5a4310; }
.portal-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.portal-primary.compact { padding:10px 18px; font-size:13px; }
.portal-message { min-height:22px; margin-top:12px; font:13px Arial,sans-serif; color:#8fcfff; }
.portal-message.error { color:#ff7060; }
.portal-message.success { color:#73ed70; }
.lobby-card { width:min(1240px,96vw); max-height:88vh; overflow:auto; padding:0 0 8px; background:linear-gradient(180deg,#0d1119f2,#080b12f5); border:1px solid #2a3040; border-radius:14px; backdrop-filter:blur(6px); box-shadow:0 30px 80px #000000c8; }
.lobby-topbar { display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid #232a38; background:#0a0d13cc; flex-wrap:wrap; }
.lobby-brand { display:flex; align-items:baseline; gap:8px; margin-right:auto; }
.lobby-brand b { font:20px Cinzel,serif; color:var(--gold-hi,#f0d48a); letter-spacing:3px; }
.lobby-brand .lobby-brand-mark { color:var(--gold-hi,#f0d48a); font-size:15px; }
.lobby-brand-sub { font-size:11px; color:#6a7488; letter-spacing:1px; }
.lobby-user { display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.lobby-user span { font-size:10px; color:#6a7488; text-transform:uppercase; letter-spacing:1px; }
.lobby-user b { font:14px Arial,sans-serif; color:#e8d8a8; }
.lobby-top-actions { display:flex; align-items:center; gap:7px; }
.lobby-top-actions .portal-primary,
.lobby-top-actions .portal-secondary { min-height:38px; padding:7px 11px; font-size:10px; letter-spacing:1px; white-space:nowrap; }
.lobby-top-actions .portal-primary { margin-top:0; }
.lobby-top-actions button:disabled { cursor:not-allowed; filter:grayscale(.75); opacity:.65; }
.lobby-actions { display:flex; gap:8px; }
.lobby-actions .portal-secondary { padding:7px 14px; font-size:11px; letter-spacing:1px; }
.lobby-section-title { display:flex; align-items:center; gap:14px; margin:22px 18px 14px; }
.lobby-section-title h2 { margin:0; font:15px Cinzel,serif; color:var(--gold-hi,#f0d48a); letter-spacing:6px; text-transform:uppercase; white-space:nowrap; }
.lobby-section-title .title-line { flex:1; height:1px; background:linear-gradient(90deg, transparent, #4a4436, transparent); }
.lobby-section-title .title-glyph { color:#8a744a; font-size:15px; }
.lobby-footer { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 18px 6px; border-top:1px solid #232a38; font-size:11px; color:#6a7488; letter-spacing:1px; flex-wrap:wrap; }
.lobby-footer .foot-brand { font:Cinzel 13px serif; color:#c8aa5a; letter-spacing:2px; }
.lobby-footer .foot-version { color:#8a94a8; }
.lobby-footer .foot-sep { color:#3a4152; }
.character-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin:0 18px 16px; }
.lobby-card .create-hero-btn { margin:0 18px 14px; width:calc(100% - 36px); }
.world-news-panel { margin:0 18px 10px; columns:2; column-gap:14px; }
.world-news-panel .news-section { break-inside:avoid; margin-bottom:14px; }
.lobby-card { width:min(980px,96vw); max-height:76vh; overflow:auto; display:flex; flex-direction:column; }
.lobby-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #342f25; padding-bottom:12px; margin-bottom:14px; }
.lobby-head div { display:flex; flex-direction:column; text-align:left; font:12px Arial,sans-serif; color:#8f9ab5; }
.lobby-head b { color:#ffe9a8; font:18px 'Cinzel',serif; }
/* Responsivo (F3): a lista rola DENTRO do card — em telas baixas o 3º+ card
 * ficava cortado sem rolagem descubrível. Scrollbar visível nos dois motores. */
.character-list { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#4a4436 #10141d; padding:2px 4px 2px 2px; }
.character-list::-webkit-scrollbar { width:9px; }
.character-list::-webkit-scrollbar-track { background:#10141d; border-radius:5px; }
.character-list::-webkit-scrollbar-thumb { background:#4a4436; border-radius:5px; }
.character-list::-webkit-scrollbar-thumb:hover { background:#6a5c3a; }
.character-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 360px)); justify-content:center; gap:18px; margin-bottom:15px; align-content:start; }
.character-card { position:relative; border:1px solid color-mix(in srgb, var(--race-accent, #d8b06a) 55%, #141821); border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#10141d 0%,#0b0e14 80%); text-align:left; height:420px; box-shadow:0 10px 26px #00000088; }
.character-card:hover { border-color:var(--race-accent, var(--gold)); box-shadow:0 0 22px color-mix(in srgb, var(--race-accent, #c8aa5a) 30%, transparent), 0 12px 30px #000000aa; }
.character-card .hero-preview { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.character-card:hover .hero-preview { filter:saturate(1.12) brightness(1.06); }
.character-card .hero-card-overlay { position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; padding:80px 14px 12px; background:linear-gradient(180deg, transparent 0%, #0b0e14ee 38%, #0b0e14 100%); }
.character-card:hover .hero-card-overlay { background:linear-gradient(180deg, transparent 0%, #10141dee 38%, #10141d 100%); }
.character-card .hero-crest { font-size:20px; margin-bottom:2px; filter:drop-shadow(0 1px 3px #000); }
.character-card h3.hero-name { color:#ffe9a8; font:17px 'Cinzel',serif; letter-spacing:1px; text-shadow:0 1px 6px #000; }
.character-card .hero-sub { color:var(--race-accent, #c8aa5a); font:11px Arial,sans-serif; opacity:.95; }
.character-card .hero-meta { color:#a8b4cf; font:12px Arial,sans-serif; line-height:1.55; }
.character-card .hero-actions { display:flex; gap:7px; margin-top:auto; padding-top:8px; }
.character-card button { flex:1; padding:8px; border-radius:6px; border:1px solid var(--gold-dk); background:#242b38; color:#fff; }
.character-card .play-hero { background:linear-gradient(#e5c56f,#a9801d); color:#241805; font-weight:800; }
.character-card .delete-hero { flex:0 0 38px; color:#ff8070; }
.character-empty { grid-column:1/-1; padding:24px; border:1px dashed #4a4234; border-radius:8px; color:#8f9ab5; font:14px Arial,sans-serif; }
.creator-actions { display:flex; justify-content:center; gap:10px; align-items:center; }
#characterCreator { margin-top:14px; }
#characterCreator #nameInput { width:210px; }
#saveStatus { position:fixed; left:50%; top:7px; transform:translateX(-50%); z-index:28; padding:5px 10px; border:1px solid #4a4234; border-radius:12px; background:#080b10cc; color:#9fc8ee; font:11px Arial,sans-serif; pointer-events:none; transition:.2s; }
#saveStatus.saving { color:#ffe081; }
#saveStatus.saved { color:#7cf07a; }
#saveStatus.error { color:#ff6b5d; }

/* ============ LOBBY HERO DECK (composição responsiva) ============
 * O lobby usa os modelos Three.js reais, portanto a grade precisa se adaptar
 * à largura disponível sem criar uma segunda caixa de rolagem que corte cards.
 * Estas regras ficam no fim do arquivo para vencer os estilos legados acima e
 * também vencem o ajuste mobile menos específico de mobile-panels.css. */
#startScreen.lobby-mode { display:block; overflow-x:hidden; overflow-y:auto; align-items:initial; justify-content:initial; padding:clamp(12px, 2.4vw, 28px) clamp(10px, 3vw, 44px); -webkit-overflow-scrolling:touch; }
#startScreen.lobby-mode .start-content { width:min(1280px,100%); max-width:1280px; min-height:0; margin:0 auto; padding:0; justify-content:flex-start; }
#startScreen.lobby-mode .game-logo-mark,
#startScreen.lobby-mode .start-sub,
#startScreen.lobby-mode .start-foot { display:none; }
#startScreen.lobby-mode .lobby-card { width:100%; max-width:1200px; max-height:none; margin:0 auto; overflow:visible; padding:0 0 10px; }
#startScreen.lobby-mode .lobby-topbar { min-height:54px; }
#startScreen.lobby-mode .lobby-section-title { margin:18px 22px 12px; }
#startScreen.lobby-mode .character-carousel { display:flex; align-items:center; gap:10px; margin:0 12px 16px; min-width:0; }
#startScreen.lobby-mode .character-list { display:flex; flex:1 1 auto; gap:14px; margin:0; padding:12px 2px 16px; min-height:0; overflow-x:auto; overflow-y:visible; justify-content:flex-start; align-content:initial; scrollbar-width:none; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; touch-action:pan-x; perspective:900px; }
#startScreen.lobby-mode .character-list::-webkit-scrollbar { display:none; }
#startScreen.lobby-mode .character-card { flex:0 0 calc((100% - 28px) / 3); scroll-snap-align:start; height:clamp(340px,32vw,390px); min-width:0; border-radius:10px; transform:scale(.92) rotateY(2deg); transform-origin:center center; opacity:.68; filter:saturate(.72) brightness(.84); transition:transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s ease, filter .34s ease, box-shadow .34s ease; }
#startScreen.lobby-mode .character-card.is-carousel-neighbor { opacity:.88; filter:saturate(.9) brightness(.95); transform:scale(.96) rotateY(0deg); }
#startScreen.lobby-mode .character-card.is-carousel-center { z-index:3; opacity:1; filter:none; transform:scale(1.045) rotateY(0deg); box-shadow:0 0 0 1px #ffe9a866, 0 18px 34px #000c, 0 0 30px color-mix(in srgb, var(--race-accent,#d8b06a) 26%, transparent); }
#startScreen.lobby-mode .character-list.is-dragging { cursor:grabbing; scroll-snap-type:none; }
#startScreen.lobby-mode .character-list.is-dragging .character-card { transition:none; }
#startScreen.lobby-mode .character-nav { flex:0 0 42px; width:42px; height:74px; display:grid; place-items:center; border:1px solid #8a744a; border-radius:12px; background:linear-gradient(180deg,#262131,#111722); color:#ffe9a8; font:38px/1 Georgia,serif; cursor:pointer; box-shadow:0 8px 20px #0008, inset 0 0 15px #c8aa5a14; transition:transform .2s, border-color .2s, filter .2s; animation:carouselArrowPulse 2.8s ease-in-out infinite; }
#startScreen.lobby-mode .character-nav-prev { animation-delay:-1.4s; }
#startScreen.lobby-mode .character-nav:hover { transform:scale(1.08); border-color:#ffe9a8; filter:brightness(1.18); }
#startScreen.lobby-mode .character-nav:focus-visible { outline:2px solid #ffe9a8; outline-offset:2px; }
@keyframes carouselArrowPulse { 0%,100% { transform:scale(1) rotate(0deg); } 50% { transform:scale(1.05) rotate(3deg); } }
#startScreen.lobby-mode .character-list .character-empty { flex:1 0 100%; }
#startScreen.lobby-mode .character-card .hero-card-overlay { padding:clamp(78px,8vw,112px) 13px 12px; }
#startScreen.lobby-mode .character-card button { min-height:42px; }
#startScreen.lobby-mode .world-news-panel { margin-left:22px; margin-right:22px; }

@media (max-width:980px) {
  #startScreen.lobby-mode .character-card { flex-basis:calc((100% - 14px) / 2); }
  #startScreen.lobby-mode .lobby-topbar { gap:10px; }
  #startScreen.lobby-mode .lobby-brand { margin-right:auto; }
}

@media (max-width:640px) {
  #startScreen.lobby-mode { padding:8px max(8px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px)); }
  #startScreen.lobby-mode .character-carousel { margin-left:4px; margin-right:4px; gap:6px; }
  #startScreen.lobby-mode .character-list { margin-left:0; margin-right:0; gap:12px; scroll-snap-type:x mandatory; }
  #startScreen.lobby-mode .character-card { flex-basis:100%; }
  #startScreen.lobby-mode .character-nav { flex-basis:36px; width:36px; height:62px; font-size:32px; }
  #startScreen.lobby-mode .lobby-section-title { margin-left:12px; margin-right:12px; gap:8px; }
  #startScreen.lobby-mode .lobby-section-title h2 { font-size:13px; letter-spacing:3px; }
  #startScreen.lobby-mode .lobby-topbar { padding:10px 12px; }
  #startScreen.lobby-mode .lobby-brand-sub { display:none; }
  #startScreen.lobby-mode .lobby-user { order:3; width:100%; align-items:flex-start; }
  #startScreen.lobby-mode .lobby-actions { margin-left:auto; }
  #startScreen.lobby-mode .lobby-actions .portal-secondary { min-height:42px; padding:7px 10px; }
  #startScreen.lobby-mode .character-card { height:360px; }
  #startScreen.lobby-mode .character-card .hero-card-overlay { padding-top:90px; }
  #startScreen.lobby-mode .world-news-panel { columns:1; margin-left:12px; margin-right:12px; }
}

/* ============ CONTRATO FLUIDO DO LOBBY ============
 * O carrossel não pode depender da largura da viewport: em um webview com
 * barras, recorte seguro ou painel lateral a área útil é menor que a tela.
 * O próprio carrossel vira o contêiner de decisão e os cards nunca recebem
 * uma largura menor que a que seus textos e ações conseguem acomodar. */
#startScreen.lobby-mode,
#startScreen.lobby-mode .start-content,
#startScreen.lobby-mode .lobby-card,
#startScreen.lobby-mode .character-carousel,
#startScreen.lobby-mode .character-list,
#startScreen.lobby-mode .character-card { box-sizing:border-box; min-width:0; }
#startScreen.lobby-mode .lobby-card { width:min(100%,1200px); }
#startScreen.lobby-mode .character-carousel { width:100%; max-width:100%; container:lobby-carousel / inline-size; }
#startScreen.lobby-mode .character-list { width:100%; max-width:100%; }
#startScreen.lobby-mode .character-card {
  flex-basis:clamp(220px,calc((100% - 28px) / 3),360px);
  height:clamp(230px,min(32vw,62vh),390px);
}
#startScreen.lobby-mode .character-card .hero-card-overlay {
  min-height:44%; padding:clamp(62px,8vw,112px) clamp(10px,1.2vw,14px) clamp(10px,1.3vw,14px);
}
#startScreen.lobby-mode .character-card h3.hero-name {
  min-width:0; margin:0; line-height:1.15; overflow-wrap:anywhere;
  font-size:clamp(14px,1.35vw,17px);
}
#startScreen.lobby-mode .character-card .hero-sub,
#startScreen.lobby-mode .character-card .hero-meta { min-width:0; overflow-wrap:anywhere; }
#startScreen.lobby-mode .character-card .hero-actions { min-width:0; }
#startScreen.lobby-mode .character-card button { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#startScreen.lobby-mode .character-card .delete-hero { flex-basis:clamp(38px,12%,48px); }
#startScreen.lobby-mode .lobby-brand,
#startScreen.lobby-mode .lobby-user,
#startScreen.lobby-mode .lobby-top-actions,
#startScreen.lobby-mode .lobby-actions { min-width:0; }
#startScreen.lobby-mode .lobby-brand b { font-size:clamp(15px,2vw,20px); }
#startScreen.lobby-mode .lobby-brand-sub { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#startScreen.lobby-mode .lobby-actions { flex-wrap:wrap; justify-content:flex-end; }
#startScreen.lobby-mode .lobby-section-title h2 { min-width:0; font-size:clamp(12px,1.25vw,15px); letter-spacing:clamp(2px,.5vw,6px); overflow:hidden; text-overflow:ellipsis; }
#startScreen.lobby-mode .world-news-panel { column-width:min(360px,100%); columns:auto; }

/* O número de cards visíveis acompanha a largura útil, inclusive quando o
 * jogo está dentro de um iframe ou de uma janela redimensionada. As media
 * queries antigas permanecem como fallback para browsers sem container query. */
@container lobby-carousel (max-width:980px) {
  #startScreen.lobby-mode .character-card { flex-basis:calc((100% - 14px) / 2); }
}
@container lobby-carousel (max-width:640px) {
  #startScreen.lobby-mode .character-card { flex-basis:100%; }
  #startScreen.lobby-mode .character-nav { flex-basis:clamp(34px,8vw,42px); width:clamp(34px,8vw,42px); height:clamp(58px,16vw,74px); font-size:clamp(28px,6vw,38px); }
  #startScreen.lobby-mode .world-news-panel { columns:1; }
}

@media (max-height:560px) {
  #startScreen.lobby-mode .lobby-topbar { padding-block:8px; }
  #startScreen.lobby-mode .lobby-section-title { margin-block:10px 8px; }
  #startScreen.lobby-mode .character-carousel { margin-bottom:10px; }
  #startScreen.lobby-mode .character-card { height:clamp(230px,min(46vw,62vh),330px); }
}