/* Runekin · css/home.css — Home (3a): herói, tiles, faixa.
   Fatia do antigo style.css (linhas 314–378); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ HOME (3a) ============ */
.screen.home { padding: 0; min-height: 100dvh; overflow: hidden; }
.screen.home.is-active { display: flex; flex-direction: column; }
/* the poster block: head slab, stripe, logo, hero, tagline — composed on a fixed-height stage */
.home-top { position: relative; height: calc(392px + env(safe-area-inset-top)); flex: none; }
.home-head { position: absolute; left: 0; right: 0; top: 0; height: calc(330px + env(safe-area-inset-top)); background: var(--ink); clip-path: var(--e-hdr); z-index: 0; }
.home-stripe { position: absolute; left: -30px; width: calc(100% + 60px); top: calc(236px + env(safe-area-inset-top)); height: 96px; background: var(--c1); clip-path: var(--e-stripe); transform: rotate(-8deg); z-index: 0; }
.home-hud {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(56px + env(safe-area-inset-top)) 24px 0; color: #fff;
}
.home-hud .right { display: flex; gap: 8px; }
.camchip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: #fff; color: var(--ink); font: 400 15px var(--display); letter-spacing: 2px; text-transform: uppercase; clip-path: var(--e-chip); }
.camchip .camicon { display: none; }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; background: #fff; color: var(--ink); font: 400 14px var(--display); letter-spacing: 0; clip-path: var(--e-chip); }
.iconbtn svg { width: 16px; height: 16px; }
.home-logo { position: absolute; left: 14px; top: calc(118px + env(safe-area-inset-top)); width: 250px; transform: rotate(-6deg); filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); z-index: 2; }
.home-hero { position: absolute; right: -4px; top: calc(196px + env(safe-area-inset-top)); width: 140px; height: 140px; transform: rotate(6deg); filter: drop-shadow(0 8px 0 rgba(0,0,0,.25)); z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.home-hero img, .home-hero svg { width: 100%; height: 100%; object-fit: contain; }
.home-hero.sil img, .home-hero.sil svg { filter: brightness(0) invert(1) opacity(.28); }
.tagline { position: absolute; left: 24px; top: calc(352px + env(safe-area-inset-top)); margin: 0; font: 400 18px var(--display); letter-spacing: 6px; text-transform: uppercase; color: var(--ink); z-index: 2; }
.home-ctas { margin: 8px 34px 0 30px; display: grid; gap: 14px; z-index: 2; }
.play {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 22px;
  color: #fff; --face: var(--ink); --sh: #fff; --clip: var(--e-btn-a);
  transform: rotate(-1deg); transition: transform .08s ease;
}
.play::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); clip-path: var(--clip); }
.play::after  { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sh); clip-path: var(--clip); transform: translate(5px, 5px); transition: transform .08s ease; }
.play.white { --face: #fff; --sh: var(--ink); --clip: var(--e-btn-b); color: var(--ink); transform: rotate(1deg); margin-top: 4px; }
.play:active { transform: rotate(-1deg) translate(5px,5px); }
.play:active::after { transform: none; }
/* ARENA: branco como o EXPLORAR, inclinação alternada; com 3 chamadas os botões ficam mais
   baixos para a composição de altura fixa da Home caber num celular */
.play.arena { --clip: var(--e-btn-a); transform: rotate(-1deg); }
.play.arena:active { transform: rotate(-1deg) translate(5px,5px); }
.home-ctas { gap: 10px; }
.play { padding: 10px 20px; }
.play .pt b { font-size: 33px; }
.play .pgo { font-size: 33px; }
.tiles { margin-top: 12px; }
.tile { min-height: 62px; }
.tile .tile-in { min-height: 56px; }
.play.white:active { transform: rotate(1deg) translate(5px,5px); }
.play .pt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.play .pt b { font: 400 40px/.9 var(--display); text-transform: uppercase; }
.play .pt small { font: 400 12px var(--body); color: var(--muted-ink); white-space: nowrap; }
.play.white .pt small { color: var(--muted); }
.play .pgo { font: 400 40px/1 var(--display); }
.play .play-ico { display: none; }
.tiles { margin: 24px 24px 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; z-index: 2; }
.tile { display: block; background: var(--ink); color: #fff; padding: 3px; clip-path: var(--e-tile); min-height: 80px; transition: transform .08s ease; }
.tile:active { transform: translate(2px,2px); }
.tile > span { display: none; }
.tile .tile-in { display: grid; place-items: center; height: 100%; min-height: 74px; font: 400 16px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); background: var(--c2); clip-path: var(--e-tile); }
.tile.dark .tile-in { background: var(--ink); color: #fff; padding: 12px 6px; text-align: center; line-height: 1; }
.tile.dark .tile-in b { display: block; font: 400 34px/1 var(--display); }
.tile.dark .tile-in b span { font-size: 16px; color: #888; }
.tile.dark .tile-in small { display: block; font: 400 13px var(--display); letter-spacing: 2px; color: var(--muted-ink); margin-top: 2px; }
.home-foot { position: relative; margin-top: auto; padding-top: 34px; height: calc(80px + env(safe-area-inset-bottom)); flex: none; }
.home-foot::before { content: ""; position: absolute; inset: 0; background: var(--ink); clip-path: var(--e-foot); z-index: 0; }
.home-footline { position: absolute; left: 24px; right: 24px; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: baseline; font: 500 10px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: #888; z-index: 2; }
.home-footline button { color: #888; text-decoration: underline; text-underline-offset: 3px; }
.tiles + .home-foot { margin-top: max(24px, auto); }
.screen.home > .home-ctas, .screen.home > .tiles { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .screen.home.is-active .home-logo  { animation: bsPop .45s cubic-bezier(.2,.8,.2,1) both; }
  .screen.home.is-active .home-hero  { animation: bsPop .45s .08s cubic-bezier(.2,.8,.2,1) both; }
  .screen.home.is-active .home-ctas  { animation: bsRise .4s .12s cubic-bezier(.2,.8,.2,1) both; }
  .screen.home.is-active .tiles      { animation: bsRise .4s .18s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes bsPop  { from { opacity: 0; transform: scale(.9) rotate(-6deg); } to { opacity: 1; } }
@keyframes bsRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }