/* Web-only styles (tulpor.com/play); the Android app never loads this file. */
/* No ads on the web unless WEB_ADS is on: every "watch an ad" button goes away, so nothing can be asked for and nothing is granted. */
html.web-noads :is([data-act="ad"],[data-act="extra"],[data-double]){display:none!important}
/* (The desktop layout is the app's own: app.css, wide-window block at the end. There is no separate shell or frame any more.) */
.pre{outline:2px solid #ffcf6e;outline-offset:3px;border-radius:16px;animation:prepulse 1.6s ease-out 2}
@keyframes prepulse{50%{outline-color:transparent}}

/* Hero video (web/hero-video.mjs): only ever added at ≥ 900 px; the static art fades out once the video really plays. The video is 3:1: the whole game board sits in its right ~55%, a blurred dark copy fills the rest. A side gradient keeps the title,
   subtitle and button above 4.5:1 on any frame of the clip (the title sits on the .95–.85 part of the gradient). */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none;z-index:0;background:#0b1e3f}
.hero.hv-has .hero-art{transition:opacity .6s ease}
.hero.hv-on .hero-art{opacity:0}
.hero-vid{transition:opacity .4s ease .25s}.hero-vid.off,.hero-vid.hv-game{transition:opacity .25s ease}.hero-vid.hv-game.on{transition:opacity .4s ease .25s}.hero-vid.off{opacity:0}   /* one timeline for media and text: the old slide is out in .25 s, then the new text and the new clip fade in together (.4 s) */
/* per-slide game clips: the 1200×480 hero variant (assets/video/games/hero/) covers the right 66 % of the card edge to edge and top to bottom (cover), its left edge melting into the dark panel */
.hero-vid.hv-game{left:auto;right:0;width:66%;opacity:0;background:transparent;object-position:50% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.hero-vid.hv-game.on{opacity:1}
/* premium dark overlay in EVERY theme (the light themes used a pale wash): deep navy panel, white text */
.hero.hv-has{background:#0a1124}
.hero.hv-has:before{content:none}
.hero.hv-has .hslide{z-index:1}
.hero.hv-has .hslide:after{background:linear-gradient(90deg,rgba(8,14,34,.97) 0%,rgba(10,17,40,.93) 32%,rgba(12,22,52,.6) 42%,rgba(12,22,52,.12) 52%,rgba(12,22,52,0) 62%),radial-gradient(120% 90% at 0% 100%,rgba(70,90,220,.28),transparent 60%)}
.hero.hv-has .hslide .hero-text{max-width:min(720px,46%)}.hero.hv-has .hslide .hero-text p{max-width:100%}
.hero.hv-has .hslide h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}.hero.hv-has .hslide p{color:rgba(255,255,255,.86)}.hero.hv-has .hslide small{color:#ffd77a}
.hero.hv-has .hdots i{background:rgba(255,255,255,.4)}.hero.hv-has .hdots i.on{background:#fff}
.hero.hv-has{border-color:rgba(255,255,255,.14)}
.hero.hv-link{cursor:pointer}.hero.hv-link:focus-visible{outline:3px solid #ffd77a;outline-offset:3px}
/* slide hand-over: the outgoing slide is gone (opacity 0 + visibility hidden) before the next one fades in — no ghost text */
.hero.hv-has .hslide{visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}
.hero.hv-has .hslide.on{visibility:visible;transition:opacity .4s ease .25s,transform .4s ease .25s,visibility 0s}
@media not all and (min-width:900px){.hero-vid{display:none}}
@media(prefers-reduced-motion:reduce){.hero-vid{display:none}}

/* Game card clip (web/game-clip.mjs): the top .ghead of a level list / duel lobby plays that game's own loop (720×900, whole board in the top ~45%, blurred fill). Only added at ≥ 900 px; the cover art fades out once it really plays; a card-colour gradient keeps the title/button readable. */
.ghead{position:relative;isolation:isolate}
.gc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.55;filter:brightness(1.4) saturate(1.2);background:transparent}
.ghead.gc-has>img{transition:opacity .6s ease}.ghead.gc-on>img{opacity:1}   /* the bright cover art stays; the clip plays over it, half transparent and brightened, so the game is clear and not a dark screen */
.ghead.gc-has>div{position:relative;z-index:1}
.ghead.gc-has:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,transparent 0%,transparent 20%,rgb(var(--hf-c)/.16) 27%,rgb(var(--hf-c)/.46) 33%,rgb(var(--hf-c)/.78) 39%,rgb(var(--hf-c)/.93) 46%,rgb(var(--hf-c)/.97) 100%)}
@media not all and (min-width:900px){.gc-vid{display:none}}
@media(prefers-reduced-motion:reduce){.gc-vid{display:none}}
/* cover art and poster both missing: a calm gradient instead of an empty card */
.ghead.noart,.hero.noart .hero-art{background:linear-gradient(135deg,#2a1d5c,#1a3a6e 55%,#0f5f6b)}
.hero.noart .hero-art{visibility:visible}