:root { --app-height:100vh; --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; background:#9b1709; font-family:Arial,Helvetica,sans-serif; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { position:fixed; inset:0; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
button,a { -webkit-tap-highlight-color:transparent; }
.app { position:fixed; left:0; top:0; width:100vw; height:var(--app-height); overflow:hidden; color:#fff; background:#a71908 url("assets/wildLifeExtremeSlot/img/page-bg.webp") center/cover no-repeat; }
.app::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(143,0,0,.18),rgba(255,140,0,.04) 55%,rgba(71,13,0,.28)); }
.sun { position:absolute; z-index:1; left:50%; top:49%; width:750px; height:750px; transform:translate(-50%,-50%); background:url("assets/wildLifeExtremeSlot/img/circle-effect.webp") center/contain no-repeat; opacity:.68; animation:sunPulse 2.4s ease-in-out infinite alternate; }
.lion { position:absolute; z-index:5; right:-2%; bottom:-8%; height:72%; pointer-events:none; filter:drop-shadow(0 9px 12px rgba(66,14,0,.45)); }
.sound-button { position:absolute; z-index:20; top:calc(var(--safe-top) + 12px); right:calc(var(--safe-right) + 12px); width:47px; height:47px; border:3px solid #fff265; border-radius:50%; color:#fff; background:linear-gradient(#56cf12,#087003); box-shadow:0 4px 0 #3d3503,0 6px 12px rgba(0,0,0,.32); font-size:23px; font-weight:900; cursor:pointer; }
.sound-button.muted { color:#5b320e; background:linear-gradient(#d7b45b,#8a6428); }
.game { position:absolute; z-index:7; left:50%; top:50%; width:100%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(var(--safe-top) + 7px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 7px) calc(var(--safe-left) + 10px); }
.logo-wrap { position:relative; z-index:9; width:480px; }
.logo { display:block; width:100%; filter:drop-shadow(0 5px 3px rgba(59,9,0,.5)); animation:logoPulse 1.3s ease-in-out infinite alternate; }
.slot-shell { position:relative; z-index:8; width:885px; height:516px; margin-top:3px; }
.reels { position:absolute; z-index:2; display:flex; overflow:hidden; left:2.4%; top:3.2%; width:95.2%; height:93.6%; background:linear-gradient(180deg,#fff0a8,#e38d1d 47%,#6d1805); }
.reel { position:relative; width:20%; height:100%; overflow:hidden; border-right:1px solid rgba(72,10,0,.3); }
.strip { position:absolute; left:0; top:0; width:100%; will-change:transform; }
.symbol { width:100%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle,rgba(255,250,191,.5),rgba(255,181,42,.06) 68%); }
.symbol img { display:block; width:85%; height:85%; object-fit:contain; filter:drop-shadow(0 3px 2px rgba(66,18,0,.3)); }
.reel.spinning .symbol img { filter:blur(1px) drop-shadow(0 3px 2px rgba(66,18,0,.3)); }
.slot-frame { position:absolute; z-index:5; inset:0; pointer-events:none; background:url("assets/wildLifeExtremeSlot/img/frame.webp") center/100% 100% no-repeat; filter:drop-shadow(0 9px 11px rgba(69,12,0,.44)); }
.win-flare { display:none; position:absolute; z-index:4; left:-9%; top:-16%; width:118%; height:132%; pointer-events:none; background:url("assets/wildLifeExtremeSlot/img/effect-flare-1.webp") center/contain no-repeat; mix-blend-mode:screen; }
.slot-shell.winner .win-flare { display:block; animation:flarePulse .7s ease-in-out infinite alternate; }
.slot-shell.winner .symbol { filter:brightness(.58); }
.slot-shell.winner .winning-symbol { filter:brightness(1.15); animation:winPulse .65s ease-in-out infinite alternate; }
.status { z-index:10; margin:9px 0 7px; font-size:23px; line-height:1; font-weight:900; letter-spacing:.7px; color:#fff66d; text-align:center; text-shadow:0 3px 0 #641000,0 0 10px #ff6a00; }
.game-button { position:relative; z-index:11; display:flex; align-items:center; justify-content:center; width:275px; height:74px; border:0; outline:0; cursor:pointer; color:#fff; text-decoration:none; background-color:transparent; background-image:url("assets/wildLifeExtremeSlot/img/button_left.webp"),url("assets/wildLifeExtremeSlot/img/button_right.webp"),url("assets/wildLifeExtremeSlot/img/button_middle.webp"); background-position:left center,right center,center center; background-size:auto 100%,auto 100%,auto 100%; background-repeat:no-repeat,no-repeat,repeat-x; filter:drop-shadow(0 5px 3px rgba(57,14,0,.4)); }
.game-button span { position:relative; z-index:2; font-size:29px; line-height:1; font-weight:900; letter-spacing:.4px; text-shadow:0 3px 1px #174c03; }
.game-button:disabled { cursor:default; filter:grayscale(.55) drop-shadow(0 5px 3px rgba(57,14,0,.4)); }
.game-button:disabled span { opacity:.68; }
.pulse { animation:buttonPulse 1.2s ease-in-out infinite; }
.counter { z-index:10; margin-top:2px; font-size:13px; font-weight:900; letter-spacing:1.1px; color:#fff5a8; text-shadow:0 2px 2px #571000; }
.win-modal { position:absolute; z-index:30; inset:0; display:none; align-items:center; justify-content:center; padding:calc(var(--safe-top) + 10px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 10px); background:rgba(80,4,0,.72); backdrop-filter:blur(3px); }
.win-modal.active { display:flex; animation:modalIn .35s ease-out both; }
.modal-card { position:relative; width:650px; height:530px; max-width:96vw; border:8px solid #ffd340; border-radius:42px; background:radial-gradient(circle at 50% 30%,#ffb328,#bd2509 60%,#590600); box-shadow:inset 0 0 28px rgba(255,236,83,.52),0 18px 25px rgba(0,0,0,.48); }
.sensational { position:absolute; z-index:5; left:50%; top:-12%; width:54%; transform:translateX(-50%); animation:titlePulse 1.2s ease-in-out infinite; }
.modal-lion { position:absolute; z-index:3; left:-8%; bottom:-3%; height:57%; filter:drop-shadow(0 8px 7px rgba(42,0,0,.4)); }
.modal-copy { position:absolute; z-index:6; left:27%; right:5%; top:45%; text-align:center; }
.modal-copy h1 { font-size:51px; line-height:1; color:#fff36d; text-shadow:0 5px 0 #7e2104,0 0 13px #ff9c14; }
.modal-copy p { margin-top:13px; font-size:22px; font-weight:900; letter-spacing:.7px; text-shadow:0 3px 0 #601100; }
.claim-button { position:absolute; z-index:9; left:62%; bottom:7%; transform:translateX(-50%); }
.claim-pulse { animation:claimPulse 1.2s ease-in-out infinite; }
@keyframes logoPulse { from{transform:scale(.97)} to{transform:scale(1)} }
@keyframes sunPulse { from{transform:translate(-50%,-50%) scale(.92);opacity:.48} to{transform:translate(-50%,-50%) scale(1.05);opacity:.76} }
@keyframes buttonPulse { 0%,100%{transform:scale(.96)} 50%{transform:scale(1.04)} }
@keyframes titlePulse { 0%,100%{transform:translateX(-50%) scale(.97)} 50%{transform:translateX(-50%) scale(1.03)} }
@keyframes claimPulse { 0%,100%{transform:translateX(-50%) scale(.96)} 50%{transform:translateX(-50%) scale(1.04)} }
@keyframes flarePulse { from{opacity:.5;transform:scale(.94)} to{opacity:1;transform:scale(1.03)} }
@keyframes winPulse { from{transform:scale(.88)} to{transform:scale(1)} }
@keyframes modalIn { from{opacity:0} to{opacity:1} }
@media(max-width:1023px) {
  .app { background-image:url("assets/wildLifeExtremeSlot/img/page-bg-mobile.webp"); }
  .game { justify-content:flex-start; }
  .logo-wrap { width:315px; }
  .slot-shell { width:350px; height:350px; margin-top:7px; }
  .reels { left:3.1%; top:3%; width:93.8%; height:94%; }
  .slot-frame { background-image:url("assets/wildLifeExtremeSlot/img/frame-mobile.webp"); }
  .reel { width:33.333333%; }
  .status { margin:12px 0 7px; font-size:19px; }
  .game-button { width:245px; height:63px; }
  .game-button span { font-size:26px; }
  .counter { font-size:12px; }
  .lion { right:-20%; bottom:-5%; height:42%; }
  .sun { width:510px; height:510px; top:45%; }
  .win-modal { padding-top:calc(var(--safe-top) + 18px); padding-bottom:calc(var(--safe-bottom) + 18px); }
  .modal-card { width:360px; height:500px; border-width:5px; border-radius:28px; }
  .sensational { width:64%; top:-4%; }
  .modal-lion { left:-10%; bottom:-2%; height:47%; }
  .modal-copy { left:7%; right:7%; top:36%; }
  .modal-copy h1 { font-size:38px; line-height:1.04; white-space:nowrap; }
  .modal-copy p { margin-top:10px; font-size:16px; line-height:1.2; }
  .claim-button { left:60%; bottom:6%; }
}
@media(orientation:landscape) and (max-height:520px) {
  .game { flex-direction:row; }
  .logo-wrap { position:absolute; left:3%; top:6%; }
  .slot-shell { margin:0 165px 0 0; }
  .status { position:absolute; right:3%; top:29%; width:220px; }
  #spinButton { position:absolute; right:3%; top:45%; }
  .counter { position:absolute; right:3%; top:70%; width:220px; text-align:center; }
  .lion { right:-3%; height:62%; }
  .modal-card { width:500px; height:90vh; }
  .sensational { width:43%; top:-9%; }
  .modal-copy { left:29%; right:5%; top:41%; }
  .modal-lion { height:59%; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; } }