/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; }
html { background: #f4ead7; }
body { min-height: 100dvh; overflow: hidden; background: #f4ead7; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.slot-shell { width: 100%; height: 100dvh; min-height: 100svh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display: grid; grid-template-rows: minmax(0, 1fr) clamp(74px, 10dvh, 92px); background: #f4ead7; }
.scene { position: relative; min-width: 0; min-height: 0; padding: clamp(8px, 1.5vw, 24px); padding-bottom: 0; overflow: hidden; }
.game-zone { width: min(76%, 1080px); height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; }
.reel-frame { width: min(100%, 900px); max-height: 100%; aspect-ratio: 5 / 4; padding: clamp(7px, 1vw, 13px); border: clamp(3px, .45vw, 6px) solid #5c4328; border-radius: clamp(16px, 2vw, 28px); background: #d9a94f; box-shadow: 0 8px 0 #a8772e, 0 13px 24px rgba(86,65,45,.18); }
.reel-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); grid-gap: clamp(3px, .55vw, 8px); gap: clamp(3px, .55vw, 8px); }
.symbol-cell { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(92,67,40,.22); border-radius: clamp(9px, 1.2vw, 17px); background: #fff5df; box-shadow: inset 0 -5px 0 rgba(191,143,65,.12); }
.symbol-cell:nth-child(even) { background: #ffefd1; }
.symbol-cell span { color: rgba(92,67,40,.38); font-size: clamp(13px, 2vw, 27px); font-weight: 900; }
.character-anchor { position: absolute; right: clamp(8px,2vw,32px); bottom: 0; width: clamp(170px,23vw,360px); height: min(78%,620px); min-height: 180px; display: grid; place-items: center; border: 2px dashed rgba(86,65,45,.34); border-radius: 18px 18px 0 0; background: rgba(255,255,255,.22); }
.zone-label { color: rgba(86,65,45,.6); font-size: clamp(12px,1.3vw,18px); font-weight: 700; letter-spacing: .14em; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.control-zone { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(7px,1vw,16px); padding: 7px clamp(10px,1.5vw,22px); background: rgba(255,250,239,.97); border-top: 2px solid rgba(86,65,45,.15); box-shadow: 0 -6px 20px rgba(86,65,45,.08); color: #493725; }
.control-label { color: rgba(73,55,37,.55); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.balance-control { min-width: 94px; height: 50px; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; border-radius: 14px; background: rgba(255,255,255,.48); }
.balance-control strong { margin-top: 3px; font-size: 16px; }
.round-control, .bet-step, .feature-control, .spin-control { border: 0; cursor: pointer; color: #493725; font-weight: 900; }
.round-control { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; border-radius: 50%; background: #fff8e9; font-size: 22px; box-shadow: 0 3px 0 rgba(86,65,45,.2), 0 5px 12px rgba(86,65,45,.1); }
.bet-control { height: 50px; display: grid; grid-template-columns: 42px minmax(76px,104px) 42px; overflow: hidden; border: 2px solid rgba(86,65,45,.18); border-radius: 999px; background: #fff8e9; box-shadow: 0 3px 0 rgba(86,65,45,.15); }
.bet-step { background: transparent; font-size: 25px; }
.bet-value { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid rgba(86,65,45,.12); border-right: 1px solid rgba(86,65,45,.12); line-height: 1; }
.bet-value strong { margin-top: 4px; font-size: 17px; }
.feature-control { height: 50px; display: flex; align-items: center; gap: 7px; padding: 0 17px; border: 2px solid #8c6429; border-radius: 16px; background: #ffe08a; box-shadow: 0 3px 0 #c09239, 0 5px 12px rgba(86,65,45,.12); font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.feature-star { font-size: 19px; }
.spin-control { width: 66px; height: 66px; flex: 0 0 66px; display: grid; place-items: center; border: 3px solid #5c4328; border-radius: 50%; background: #ffd45f; box-shadow: 0 5px 0 #b98227, 0 8px 16px rgba(86,65,45,.2); font-size: 42px; line-height: 1; }
.auto-control { position: relative; font-size: 25px; }
.auto-text { position: absolute; bottom: 5px; font-size: 7px; letter-spacing: .08em; }
.auto-icon { transform: translateY(-4px); }
.round-control:active, .bet-step:active, .feature-control:active, .spin-control:active { transform: translateY(2px); }

@media (max-width: 760px) {
  .slot-shell { grid-template-rows: minmax(0,1fr) 70px; }
  .scene { padding: 8px; padding-bottom: 0; }
  .game-zone { width: 100%; height: 100%; align-items: center; }
  .reel-frame { width: 100%; max-width: 620px; max-height: 100%; padding: 6px; border-width: 3px; border-radius: 17px; }
  .reel-grid { gap: 4px; }
  .symbol-cell { border-width: 1px; border-radius: 9px; }
  .character-anchor { right: 8px; bottom: 0; width: clamp(105px,32vw,155px); height: clamp(170px,38%,300px); min-height: 0; }
  .control-zone { gap: 5px; padding: 6px; }
  .balance-control { display: none; }
  .round-control { width: 43px; height: 43px; flex-basis: 43px; font-size: 19px; }
  .bet-control { height: 44px; flex: 1 1 auto; grid-template-columns: 32px minmax(45px,1fr) 32px; }
  .bet-step { font-size: 21px; }
  .bet-value strong { font-size: 14px; }
  .feature-control { width: 43px; height: 43px; padding: 0; justify-content: center; border-radius: 50%; }
  .feature-control > span:last-child { display: none; }
  .feature-star { font-size: 18px; }
  .spin-control { width: 58px; height: 58px; flex-basis: 58px; font-size: 36px; }
  .auto-text { display: none; }
  .auto-icon { transform: none; }
}

@media (max-width: 390px) {
  .control-zone { gap: 4px; padding-left: 4px; padding-right: 4px; }
  .round-control, .feature-control { width: 39px; height: 39px; flex-basis: 39px; }
  .bet-control { height: 41px; grid-template-columns: 29px minmax(42px,1fr) 29px; }
  .spin-control { width: 54px; height: 54px; flex-basis: 54px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .slot-shell { grid-template-rows: minmax(0,1fr) 60px; }
  .scene { padding: 8px; padding-bottom: 0; }
  .game-zone { width: calc(100% - clamp(150px,22vw,250px)); }
  .reel-frame { width: auto; height: 100%; max-width: 100%; }
  .character-anchor { right: 8px; width: clamp(140px,21vw,240px); height: 88%; }
  .control-zone { padding-top: 4px; padding-bottom: 4px; }
  .balance-control, .round-control, .bet-control, .feature-control { height: 44px; }
  .round-control { width: 44px; flex-basis: 44px; }
  .spin-control { width: 52px; height: 52px; flex-basis: 52px; font-size: 34px; }
}

