/*
 * Wolf Legacy v15 production geometry.
 * Portrait and landscape are independent compositions. The JS stage fitter
 * uses the visible browser viewport so no top HUD element is cropped by
 * mobile browser chrome.
 */

/* ---------------- PORTRAIT / MOBILE ---------------- */
.top-controls{left:0;top:0;width:390px;height:50px;z-index:16}
.top-btn{top:4px;width:42px;height:42px}
.top-menu{left:9px}
.top-sound{left:55px}
.top-info{right:9px}

.jackpot-layer{left:5px;top:49px;width:380px;height:69px;z-index:14}
.jackpot-slot{top:0;width:92px;height:62px}
.jackpot-grand{left:0}
.jackpot-major{left:96px}
.jackpot-minor{left:192px}
.jackpot-mini{left:288px}
.jackpot-value{font-size:10px;top:62%;bottom:auto}
.jackpot-grand .jackpot-value,.jackpot-minor .jackpot-value{top:61.5%}
.jackpot-major .jackpot-value,.jackpot-mini .jackpot-value{top:63.5%}

/* The artwork is wider than v13 and shifted upward. This moves the wolf
 * crest above the first stopped row instead of covering its symbols. */
.reel-zone{left:0;top:120px;width:390px;height:246px}
.reel-frame{left:0;top:-26px;width:390px;height:259px}
.reel-layer{left:30px;top:44px;width:330px;height:162px;gap:4px;border-radius:4px}
.reel-col{height:162px}
.cell{height:54px}
.win-banner{padding:7px 13px;border-radius:10px}
.win-banner-label{font-size:13px}
.win-banner-value{font-size:20px}

.hud-layer{left:0;top:0;width:390px;height:844px}
.hud-win-panel{left:3px;top:377px;width:193px;height:65px}
.hud-balance-panel{left:194px;top:377px;width:193px;height:65px}
.hud-bet-panel{left:77px;top:447px;width:236px;height:78px}
.hud-win-panel strong{left:65.5%;top:62%;font-size:14px}
.hud-bet-panel strong{left:67.5%;top:68%;font-size:16px}
.hud-balance-panel strong{left:61.5%;top:63%;font-size:13px}

.control-layer{left:0;top:0;width:390px;height:844px}
.control-btn{z-index:2}
.btn-bet-minus,.btn-bet-plus{top:496px;width:69px;height:67px}
.btn-bet-minus{left:12px}
.btn-bet-plus{right:12px}
.btn-spin{left:124px;top:540px;width:142px;height:111px}
.btn-auto{left:16px;top:615px;width:102px;height:67px}
.btn-speed{right:16px;top:613px;width:91px;height:73px}
.control-state{font-size:8px}

.game-toast{top:696px;max-width:350px;font-size:9px}
.game-stage::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:120px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,0,0,.36))}
.control-layer,.hud-layer,.game-toast{z-index:12}

/* ---------------- LANDSCAPE 16:9 / DESKTOP-TABLET ---------------- */
@media (orientation:landscape){
  .game-stage{width:1920px;height:1080px}
  .stage-bg-portrait{display:none}
  .stage-bg-landscape{display:block}
  .stage-vignette{background:radial-gradient(ellipse at 50% 44%,transparent 19%,rgba(0,0,0,.12) 64%,rgba(0,0,0,.68) 100%)}
  .game-stage::after{height:150px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.42))}

  .top-controls{left:0;top:0;width:1920px;height:125px}
  .top-btn{top:25px;width:76px;height:76px}
  .top-menu{left:32px}
  .top-sound{left:120px}
  .top-info{right:32px}

  .jackpot-layer{left:385px;top:20px;width:1150px;height:132px}
  .jackpot-slot{top:0;width:270px;height:116px}
  .jackpot-grand{left:0}
  .jackpot-major{left:293px}
  .jackpot-minor{left:586px}
  .jackpot-mini{left:879px}
  .jackpot-value{font-size:25px;top:62%}
  .jackpot-grand .jackpot-value,.jackpot-minor .jackpot-value{top:61.5%}
  .jackpot-major .jackpot-value,.jackpot-mini .jackpot-value{top:63.5%}

  .reel-zone{left:455px;top:168px;width:1010px;height:660px}
  .reel-frame{left:-10px;top:-56px;width:1030px;height:685px}
  .reel-layer{left:83px;top:114px;width:844px;height:450px;gap:10px;border-radius:11px}
  .reel-col{height:450px;border-radius:10px}
  .cell{height:150px}
  .cell img{width:91%;height:91%}
  .win-banner{padding:18px 35px;border-width:4px;border-radius:22px}
  .win-banner-label{font-size:28px}
  .win-banner-value{font-size:46px}

  .hud-layer{left:0;top:0;width:1920px;height:1080px}
  .hud-win-panel{left:40px;top:375px;width:370px;height:124px}
  .hud-balance-panel{left:40px;top:505px;width:370px;height:124px}
  .hud-bet-panel{left:1490px;top:360px;width:385px;height:128px}
  .hud-win-panel strong{left:65.5%;top:62%;font-size:31px}
  .hud-bet-panel strong{left:67.5%;top:68%;font-size:32px}
  .hud-balance-panel strong{left:61.5%;top:63%;font-size:27px}

  .control-layer{left:0;top:0;width:1920px;height:1080px}
  .btn-bet-minus,.btn-bet-plus{top:505px;width:126px;height:121px}
  .btn-bet-minus{left:1510px}
  .btn-bet-plus{right:110px}
  .btn-spin{left:800px;top:833px;width:320px;height:215px}
  .btn-auto{left:510px;top:870px;width:220px;height:145px}
  .btn-speed{right:510px;top:870px;width:190px;height:150px}
  .control-state{font-size:17px;bottom:9%}

  .game-toast{top:832px;max-width:720px;padding:13px 26px;font-size:19px;border-width:2px}

  .entry-layer{background:radial-gradient(circle at 50% 36%,rgba(47,76,81,.25),rgba(0,0,0,.93) 70%),url('../public_assets/layout/universal-background.webp') center/cover no-repeat}
  .entry-card{width:620px}
  .entry-wolf-crest{width:210px}
  .entry-kicker{font-size:15px;margin-top:12px}
  .entry-card h1{font-size:74px}
  .entry-status{font-size:16px;min-height:28px;margin-top:23px}
  .entry-progress{width:440px;height:8px}
  .entry-play{width:230px;height:160px;margin-top:3px}
  .entry-play img{inset:-48px 0;width:230px;height:255px}
  .entry-retry{font-size:15px;padding:13px 22px}
}