/* Janela de idioma e tema (boas-vindas na primeira visita) */
html.lp-open { overflow: hidden; }
.lp { position: fixed; inset: 0; z-index: 95000; display: grid; place-items: center; padding: 16px; }
.lp[hidden] { display: none; }
.lp-backdrop { position: absolute; inset: 0; background: rgba(4, 7, 14, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lpFade 0.25s ease both; }
.lp-box {
  position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 26px 26px 22px; border: 1px solid var(--line-2); border-radius: 22px;
  background: radial-gradient(600px 220px at 100% 0%, rgba(255, 168, 0, 0.12), transparent 60%), var(--panel);
  color: var(--tx); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: lpPop 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.lp-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--tx-3); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lp-x:hover { background: var(--panel-3); color: var(--tx); }
.lp-head { display: flex; align-items: center; gap: 16px; padding-inline-end: 36px; }
.lp-head img { flex: none; border-radius: 14px; box-shadow: 0 6px 18px rgba(255, 168, 0, 0.25); }
.lp-head h2 { font-family: "Rajdhani", var(--font); font-size: 1.75rem; line-height: 1.1; letter-spacing: 0; }
.lp-head p { margin: 4px 0 0; color: var(--tx-2); font-size: 0.95rem; }
.lp-label { margin: 22px 0 10px; color: var(--tx-3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.lp-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lp-lang {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--panel-2); color: var(--tx); font: 600 0.92rem/1.2 var(--font); text-align: start; cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.lang-flag { flex: none; display: block; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.25); }
.lp-lang:hover { border-color: var(--line-2); background: var(--panel-3); }
.lp-lang.is-on { border-color: var(--accent); background: rgba(255, 168, 0, 0.1); }

.lp-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-theme {
  display: grid; gap: 8px; padding: 10px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel-2);
  color: var(--tx); font: 700 0.92rem/1.2 var(--font); cursor: pointer; transition: border-color 0.15s;
}
.lp-theme:hover { border-color: var(--line-2); }
.lp-theme.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 168, 0, 0.18); }
/* cena do jogo em cada tema, com uma tropa correndo (sprite parado + pulinhos + deslocamento) */
.lp-scene { position: relative; display: block; height: 112px; border-radius: 10px; overflow: hidden; background: url("../coc/bg/th17.webp") 68% 38% / cover no-repeat; }
.lp-scene::before { content: ""; position: absolute; inset: 0; }
.lp-theme--dark .lp-scene::before { background: linear-gradient(180deg, rgba(6, 12, 30, 0.55), rgba(6, 12, 30, 0.25) 60%, rgba(6, 12, 30, 0.6)); }
.lp-theme--light .lp-scene { background-image: url("../coc/bg/th18.webp"); }
.lp-theme--light .lp-scene::before { background: linear-gradient(180deg, rgba(255, 244, 214, 0.35), rgba(255, 255, 255, 0) 60%); }
.lp-runner { position: absolute; bottom: 2px; left: 100%; animation: lpRun var(--run) linear infinite; }
.lp-runner b { display: block; width: var(--w); height: var(--h); background: var(--sheet) 0 0 / calc(var(--w) * var(--frames)) var(--h) no-repeat; transform-origin: 50% 100%; animation: lpFrames var(--flap) steps(var(--frames)) infinite, lpHop 0.32s ease-out infinite alternate; }
.lp-theme--dark .lp-runner { --w: 128px; --h: 139px; --frames: 7; --flap: 0.58s; --run: 3.6s; --sc: 0.55; --sheet: url("../coc/troops/idle/hog_rider.webp"); }
.lp-theme--light .lp-runner { --w: 45px; --h: 62px; --frames: 5; --flap: 0.42s; --run: 2.8s; --sc: 0.95; --sheet: url("../coc/troops/idle/goblin.webp"); left: -60px; animation-name: lpRunRight; }
.lp-theme-name { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.lp-theme.is-on .lp-theme-name { color: var(--accent); }
@keyframes lpRun { from { left: 100%; } to { left: -130px; } }
@keyframes lpRunRight { from { left: -60px; } to { left: 100%; } }
@keyframes lpFrames { to { background-position: calc(var(--w) * var(--frames) * -1) 0; } }
@keyframes lpHop { from { transform: translateY(0) scale(var(--sc)); } to { transform: translateY(-7px) scale(var(--sc)); } }

/* estilo do site: miniatura de cada visual */
.lp-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-style {
  display: grid; gap: 10px; padding: 10px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel-2);
  color: var(--tx); text-align: start; cursor: pointer; transition: border-color 0.15s;
}
.lp-style:hover { border-color: var(--line-2); }
.lp-style.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 168, 0, 0.18); }
/* mini página: barra do topo, título + botão, cartões */
.lp-style-shot { display: flex; flex-direction: column; gap: 7px; height: 112px; padding: 0 0 8px; border-radius: 10px; overflow: hidden; }
.lp-style-shot i, .lp-style-shot em, .lp-style-shot u { display: block; font-style: normal; text-decoration: none; }
.lp-ss-nav { display: flex; align-items: center; gap: 5px; height: 18px; padding: 0 8px; }
.lp-ss-nav em { width: 12px; height: 12px; margin-inline-end: auto; border-radius: 4px; }
.lp-ss-nav i { width: 16px; height: 4px; border-radius: 2px; }
.lp-ss-hero { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.lp-ss-hero b { font-size: 1.35rem; line-height: 1; }
.lp-ss-hero > span { display: grid; gap: 4px; flex: 1; }
.lp-ss-hero > span i { height: 4px; border-radius: 2px; }
.lp-ss-hero > span i + i { width: 60%; }
.lp-ss-hero u { width: 34px; height: 14px; }
.lp-ss-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1; padding: 0 10px; }

.lp-style--padrao .lp-style-shot { background: radial-gradient(160px 70px at 100% 0%, rgba(255, 168, 0, 0.16), transparent 70%), #0e131d; }
.lp-style--padrao .lp-ss-nav { background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.lp-style--padrao .lp-ss-nav em { background: linear-gradient(135deg, #ffb400, #ff7a00); }
.lp-style--padrao .lp-ss-nav i, .lp-style--padrao .lp-ss-hero > span i { background: rgba(255, 255, 255, 0.18); }
.lp-style--padrao .lp-ss-hero b { font-family: "Rajdhani", var(--font); font-weight: 700; color: #fff; }
.lp-style--padrao .lp-ss-hero u { border-radius: 7px; background: linear-gradient(90deg, #ffb400, #ff7a00); }
.lp-style--padrao .lp-ss-cards i { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 7px; background: #171e2c; }

.lp-style--clash .lp-style-shot { background: linear-gradient(180deg, #3d6fb4, #1d3b6e); }
.lp-style--clash .lp-ss-nav { background: #0c1729; border-bottom: 2px solid #050b16; }
.lp-style--clash .lp-ss-nav em { border: 2px solid #050b16; background: linear-gradient(180deg, #ffe06a, #f5a800); }
.lp-style--clash .lp-ss-nav i { background: #f3e3bd; }
.lp-style--clash .lp-ss-hero b { font-family: "Lilita One", "Rajdhani", var(--font); font-weight: 400; color: #fff; -webkit-text-stroke: 1px #0a1528; text-shadow: 0 2px 0 #0a1528; }
.lp-style--clash .lp-ss-hero > span i { background: rgba(255, 255, 255, 0.6); }
.lp-style--clash .lp-ss-hero u { border: 2px solid #0a1528; border-radius: 5px; background: linear-gradient(180deg, #ffe06a, #f5a800); box-shadow: 0 2px 0 #0a1528; }
.lp-style--clash .lp-ss-cards i { border: 2px solid #0a1528; border-radius: 5px; background: #f3e3bd; box-shadow: 0 3px 0 #0a1528; }
.lp-style-txt { display: grid; gap: 2px; }
.lp-style-txt b { font: 700 0.95rem/1.2 var(--font); }
.lp-style-txt small { color: var(--tx-3); font-size: 0.8rem; line-height: 1.3; }
.lp-style.is-on .lp-style-txt b { color: var(--accent); }
.lp-style { position: relative; }
.lp-style-tag {
  position: absolute; top: -11px; inset-inline-end: 14px; z-index: 1; padding: 3px 12px 4px;
  border: 2px solid #5a3500; border-radius: 8px; background: linear-gradient(180deg, #ffe06a, #f5a800);
  color: #fff; font: 400 0.82rem/1 "Lilita One", "Rajdhani", var(--font); letter-spacing: 0.04em; text-transform: uppercase;
  -webkit-text-stroke: 0.8px #5a3500; paint-order: stroke fill; text-shadow: 0 1px 0 #5a3500;
  box-shadow: 0 3px 0 #5a3500; transform: rotate(3deg);
}

.lp-go {
  display: block; width: 100%; min-height: 50px; margin-top: 22px; border: 0; border-radius: 14px;
  background: var(--grad); color: var(--on-accent); font: 800 1rem/1 var(--font); cursor: pointer;
  box-shadow: 0 4px 0 var(--accent-deep); transition: transform 0.1s, box-shadow 0.1s;
}
.lp-go:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--accent-deep); }
.lp-go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); }
.lp :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* botão do idioma na barra (visitante) e linha no menu da conta */
.app-lang-btn { display: grid; place-items: center; }
.app-lang-row .app-lang-now { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; color: var(--tx-3); font-size: 0.82rem; font-style: normal; font-weight: 600; }

/* idiomas da direita para a esquerda: menus abrem para dentro da tela */
[dir="rtl"] .app-dropdown, [dir="rtl"] .app-cart-dropdown { right: auto; left: 0; }

@keyframes lpFade { from { opacity: 0; } }
@keyframes lpPop { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@media (max-width: 520px) {
  .lp-box { padding: 20px 16px 16px; }
  .lp-langs { grid-template-columns: 1fr 1fr; }
  .lp-head img { width: 42px; height: 42px; }
  .lp-head h2 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-backdrop, .lp-box, .lp-runner, .lp-runner b { animation: none; }
  .lp-runner { left: 40%; }
  .lp-runner b { transform: scale(var(--sc)); }
}