/* v7c: a single-ink identity with its own outlined wordmark. */
.brand .brand-emblem{width:42px;height:42px}
.brand{gap:10px}
.brand-wordmark{display:block;width:190px;height:44px;flex:none;overflow:visible}
.footer-brand .brand-emblem{width:48px;height:48px}
.footer-brand .brand-wordmark{width:205px;color:var(--paper)}
.brand-name.sr,.word.sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}
@media(max-width:720px){.brand{gap:6px}.brand .brand-emblem{width:37px;height:37px}.brand-wordmark{width:155px;height:38px}.nav .wrap{gap:5px}.paper-switch button{padding-inline:6px}.nav-end{gap:5px}}

/* A plate's frame follows its trimmed aspect ratio. Tall objects use the full
   vertical allowance; wide plates use the column's full width. */
.engraving{--plate-limit:410px;width:min(100%,calc(var(--plate-limit) * var(--ratio,1.5)));height:auto;aspect-ratio:var(--ratio,1.5);margin-inline:auto}
.engraving .engraving-sheet{overflow:visible;clip-path:none!important}
.engraving .art-stage{width:100%;height:100%;aspect-ratio:var(--ratio);max-height:none}
.ink-layer{mask-size:100% 100%;-webkit-mask-size:100% 100%}
.hero-art.engraving{height:auto;width:100%;--plate-limit:480px;aspect-ratio:3/2}
.hero-art [data-art=hero]{--art:url('/assets/mockup/v9-loki/art/hero-1200.webp?v=3a7455b8f8')}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:30px}
.hero h1{font-size:clamp(64px,6.9vw,100px)}
.hero-art .art-stage{width:100%}
.minis .engraving{--plate-limit:270px;height:auto}
.faq-head>.engraving{--plate-limit:330px;height:auto}
.engraving:not(.loaded) .engraving-sheet{opacity:0}
.engraving.drawn.loaded .engraving-sheet{animation:plate-in 0s ease-out both}
.engraving.drawn:not(.loaded) .engraving-sheet{animation:none;opacity:0}
.reveal,.stag>*{transition:none;transform:none;translate:none;transition-delay:0s!important}
.motion{animation-delay:0s!important}
.engraving:not(.loaded) .motion{animation-play-state:paused!important}
.roulette-surface{position:absolute;inset:0;overflow:visible}
.wheel-plane,.ball-track{position:absolute;left:75.4%;top:91%;width:52%;aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.317);transform-origin:center}
.wheel-rotor{display:block;width:100%;height:100%;animation:wheel-turn 10s linear infinite;will-change:transform}
.wheel-rotor>g{opacity:.72}
[data-illustration=hero] .roulette-surface{overflow:hidden;mask-image:linear-gradient(to right,#000 91%,transparent 100%),linear-gradient(to bottom,#000 94%,transparent 100%);mask-composite:intersect}
@keyframes wheel-turn{to{transform:rotate(360deg)}}
.ball-track{left:75.4%;top:91%;width:55.5%;transform:translate(-50%,-50%) scaleY(.333)}
.ball-orbit{position:absolute;inset:0;animation:ball-orbit 4.8s linear infinite;will-change:transform}
.ball-level{position:absolute;left:98%;top:48%;width:4%;height:4%;animation:ball-level 4.8s linear infinite;will-change:transform}
.roulette-ball{display:block;width:100%;height:100%;transform:scaleY(3.003);overflow:visible}
.ball-orbit,.ball-level{animation-delay:-.6s!important}
@keyframes ball-orbit{to{transform:rotate(-360deg)}}
/* The spindle briefly occludes the rear pass; the raised wooden bowl hides
   the front pass. The ball stays on the actual outer track, never the table. */
@keyframes ball-level{0%{transform:rotate(0);opacity:1}22%{transform:rotate(79.2deg);opacity:1}24%{transform:rotate(86.4deg);opacity:0}26%{transform:rotate(93.6deg);opacity:0}28%{transform:rotate(100.8deg);opacity:1}49%{transform:rotate(176.4deg);opacity:1}51%{transform:rotate(183.6deg);opacity:0}99%{transform:rotate(356.4deg);opacity:0}100%{transform:rotate(360deg);opacity:1}}
[data-illustration=roulette] .wheel-plane{left:50%;top:46.3%;width:71.8%;transform:translate(-50%,-50%) scaleY(.477)}
[data-illustration=roulette] .ball-track{left:50%;top:46.3%;width:79%;transform:translate(-50%,-50%) scaleY(.477)}
[data-illustration=roulette] .roulette-ball{transform:scaleY(2.096)}
[data-illustration=roulette] .ball-level{width:3.6%;height:3.6%;left:98.2%;top:48.2%}
.lighthouse-light{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lighthouse-light>svg{display:block;width:100%;height:100%;overflow:visible}
.sweep-plane{transform-origin:37.763% 14.423%;animation:lighthouse-sweep 6.5s ease-in-out infinite;will-change:transform,opacity}
@keyframes lighthouse-sweep{0%,100%{transform:rotate(-1deg);opacity:.35}50%{transform:rotate(14deg);opacity:.9}}
.sea-scene.engraving{width:100%;height:300px;aspect-ratio:auto;margin:10px 0 0}
.sea-stage .vessel{inset:auto 13% 44px auto;width:400px;height:auto;aspect-ratio:1.57638;transform-origin:50% 83%;animation:ship-rock 6s ease-in-out infinite;will-change:transform}
.sea-stage .ocean{inset:auto -1% 0;width:102%;height:80px;mask-size:100% 100%;-webkit-mask-size:100% 100%;animation:sea-breathe 8s ease-in-out infinite;will-change:transform}
@keyframes ship-rock{0%,100%{transform:translateY(4px) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes sea-breathe{0%,100%{transform:translateX(-.35%) scaleY(1)}50%{transform:translateX(.35%) scaleY(1.05)}}
.final .sea-scene{height:330px;margin-top:24px}
.final .sea-stage .vessel{left:18%;right:auto;width:440px;height:auto;bottom:42px}
.sec .eyebrow b,.final .eyebrow b{outline:1px dashed var(--ink-3);outline-offset:3px;border:1px solid var(--ink);border-radius:50%;min-width:34px;text-align:center}
.divider-suit{width:44px;height:28px;left:calc(50% - 22px);padding:3px 5px}
.pick{border-radius:9px}
.pick::after{content:'♠';position:absolute;right:13px;bottom:7px;font:18px/1 var(--serif);opacity:.45}
.pick .boost-logo{border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:5px;border-radius:50%;padding:7px}
.stamp-chip{width:16px;height:16px;display:inline-grid;place-items:center;border:1px solid;border-radius:50%;font:12px/1 var(--serif)}
.cas .rank{outline:1px dashed var(--ink-3);outline-offset:4px}
.nav-links a::after{clip-path:none;opacity:0;transition:opacity .18s}.nav-links a:hover::after{opacity:1}
@media(max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}.hero-grid>.hero-side{max-width:620px}.hero h1{font-size:88px}}
@media(max-width:720px){
 .hero h1{font-size:clamp(57px,16vw,78px)}
 .hero-art [data-art=hero]{--art:url('/assets/mockup/v9-loki/art/hero-640.webp?v=48567ba3b3')}
 .engraving{--plate-limit:335px}
 .hero-art.engraving{width:100%;height:auto}
 .hero-grid{gap:21px}
 .minis .engraving{--plate-limit:290px;height:auto}
 .faq-head>.engraving{--plate-limit:290px;height:auto}
 .sea-scene.engraving{height:245px}
 .sea-stage .vessel{width:300px;right:8%;bottom:36px;height:auto}
 .sea-stage .ocean{height:58px}
 .final .sea-scene{height:255px}
 .final .sea-stage .vessel{width:310px;left:8%;bottom:38px;height:auto}
 .footer-brand{gap:9px}
}
@media(prefers-reduced-motion:reduce){
 .motion,.mtrack{animation:none!important;transform:none!important}
 .engraving .engraving-sheet{animation:none!important;opacity:1!important}
 .reveal,.stag>*{opacity:1!important;transition:none!important;transform:none!important}
 .btn:hover,.btn:active{transform:none!important}
 .ball-orbit{transform:rotate(-135deg)!important}.ball-level{transform:rotate(135deg)!important;opacity:1}
}

/* Logo back to version 7's engraved anchor seal (owner's choice, 2026-10-14):
   the same sizes as in version 7. */
.brand .brand-emblem{width:54px;height:54px}
.footer-brand .brand-emblem{width:54px;height:54px}
@media(max-width:720px){.brand .brand-emblem{width:36px;height:36px}.footer-brand .brand-emblem{width:48px;height:48px}}

/* Casino logos always in their own brand colours (owner, 2026-10-14: "the
   casinos themselves don't like it"). No greyscale, no blend, no night
   inversion: each logo sits on a white tile in day and night alike. Logos
   with a transparent background (Boost, Karhubet) get breathing room. */
.logo{background:#fff}
:root .logo img,:root[data-paper] .logo img{filter:none;mix-blend-mode:normal}
.logo img[src*="/boost."]{object-fit:contain;padding:12%}
.logo img[src*="/karhubet."]{object-fit:contain}
.pick .boost-logo,:root[data-paper=night] .pick .boost-logo{background:#fff;filter:none;mix-blend-mode:normal}

/* Approved homepage additions: byline, help note and author initials. */
.hero-meta.byline{display:block}
@media(max-width:980px){.hero-grid .byline{order:3}}
.rg-note{font-size:13px;color:var(--ink-2)}
.portrait[role="img"]{display:grid;place-items:center;font:40px/1 var(--serif);color:var(--ink)}

/* Opened straight from disk: Chrome refuses CSS masks on file:// pages, so the
   drawings are shown as plain images and recoloured to the ink by an SVG filter. */
.file-mode .ink-layer{-webkit-mask-image:none;mask-image:none;background:var(--art) center/100% 100% no-repeat;filter:url(#ink-day)}
.file-mode[data-paper=night] .ink-layer{filter:url(#ink-night)}

/* payment method logos in their own brand colours (from kasinokamut's /maksutavat/ files) */
.chips:has(.paylogo){align-items:center}
.paylogo{display:block;height:22px;width:auto;border-radius:5px;filter:none;mix-blend-mode:normal}
.paylogo.big{height:36px;border-radius:7px}

/* Image readiness never delays a visible picture; motion preferences still apply. */
.hero-plate,.hero-plate .plate-stage{opacity:1;transition:none}
.casino-logo,.casino-logo img,.casino-shot,.casino-shot img,.author-photo,.article-authors .mate,.section-emblem img{transition:none!important;animation-name:none!important}