/* MyCasino V18 — final game UI repair layer
   Purpose: clear fields, no overlap, one-scroll mobile gameplay, larger product cards. */

:root{
  --v18-bg:#0a1d2b;
  --v18-panel:#0e2738;
  --v18-panel-2:#102e42;
  --v18-panel-3:#0a202e;
  --v18-line:rgba(184,221,246,.16);
  --v18-line-strong:rgba(184,221,246,.30);
  --v18-text:#f6f9fb;
  --v18-muted:#9fb4c0;
  --v18-blue:#2da8ff;
  --v18-blue-2:#0f86f5;
  --v18-green:#42df7d;
  --v18-red:#ff6879;
}

/* Whole site: keep content readable and predictable. */
body{font-size:14px!important}
button,input,select,textarea{font:inherit!important}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid #64caff!important;outline-offset:2px!important}

/* Product cards: never look tiny on desktop, never crop their poster art. */
#gameGrid,.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
.game-card{min-width:0!important}
.game-art{aspect-ratio:3/4!important;height:auto!important;min-height:0!important;border-radius:14px!important;overflow:hidden!important;background:#071722!important;border:1px solid rgba(255,255,255,.10)!important}
.game-art img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important}
.game-meta{padding:10px 3px 3px!important}.game-meta h3{font-size:18px!important;line-height:1.12!important;margin:2px 0 3px!important}.game-meta span{font-size:11px!important;line-height:1.35!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

/* Game modal frame. */
.modal-overlay{padding:20px!important;align-items:center!important;overflow:hidden!important}
.modal-overlay .game-modal{width:min(1320px,calc(100vw - 40px))!important;max-width:1320px!important;height:min(900px,calc(100dvh - 40px))!important;max-height:calc(100dvh - 40px)!important;overflow:hidden!important;padding:14px!important;border-radius:16px!important;background:#081b29!important;border:1px solid rgba(174,219,246,.17)!important;box-shadow:0 32px 90px rgba(0,0,0,.52)!important}
.game-modal .game-shell{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;padding:0!important;margin:0!important}
.game-modal .modal-close{position:absolute!important;top:12px!important;right:12px!important;z-index:130!important;width:38px!important;height:38px!important;border-radius:11px!important;background:#102d40!important;border:1px solid var(--v18-line)!important;color:#edf7fb!important;font-size:22px!important}

/* Header + compact progress. */
.game-modal-head{flex:0 0 auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:14px!important;padding:4px 48px 11px 4px!important;border-bottom:1px solid var(--v18-line)!important}
.game-modal-head .eyebrow{font-size:9px!important;letter-spacing:.16em!important}.game-modal-head .modal-title{font-size:24px!important;line-height:1.05!important;margin:3px 0 4px!important}.game-modal-head .modal-sub{font-size:11px!important;line-height:1.35!important;margin:0!important;color:var(--v18-muted)!important}
.game-wallet-mini{min-width:120px!important;padding:9px 11px!important;border-radius:10px!important;background:#0d2636!important;border:1px solid var(--v18-line)!important;text-align:right!important}.game-wallet-mini small{display:block!important;font-size:8px!important;letter-spacing:.1em!important;color:#89a2b0!important}.game-wallet-mini b{font-size:15px!important}
.game-topline{flex:0 0 auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;padding:8px 4px 10px!important}
.game-flow{margin:0!important;min-width:0!important}.game-flow span{font-size:9px!important}.game-flow span i{width:23px!important;height:23px!important}.game-mini-stats{display:flex!important;gap:6px!important}.game-mini-stats>span{display:grid!important;gap:1px!important;min-width:86px!important;padding:7px 10px!important;border-radius:9px!important;background:#0d2636!important;border:1px solid var(--v18-line)!important}.game-mini-stats small{font-size:7px!important;letter-spacing:.08em!important;color:#89a2b0!important}.game-mini-stats b{font-size:10px!important;white-space:nowrap!important}

/* Core layout: wide controls + large stage. */
.game-layout{flex:1 1 auto!important;min-height:0!important;display:grid!important;grid-template-columns:370px minmax(0,1fr)!important;gap:12px!important;margin:0!important;align-items:stretch!important;overflow:hidden!important}
.game-controls{grid-column:1!important;grid-row:1!important;min-width:0!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;scrollbar-color:#31566d transparent!important;padding:0 5px 0 0!important;border:0!important;background:transparent!important;display:flex!important;flex-direction:column!important;gap:9px!important}
.game-controls::-webkit-scrollbar{width:7px}.game-controls::-webkit-scrollbar-thumb{background:#31566d;border-radius:999px}
.game-stage{grid-column:2!important;grid-row:1!important;min-width:0!important;min-height:0!important;height:100%!important;max-height:none!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important;border-radius:14px!important;background:radial-gradient(circle at 50% 8%,#153f59 0,#0a2332 55%,#071a26 100%)!important;border:1px solid var(--v18-line)!important}

/* Control sections. */
.control-card{display:grid!important;gap:10px!important;padding:12px!important;border-radius:13px!important;background:#0d2636!important;border:1px solid var(--v18-line)!important;box-shadow:0 8px 22px rgba(0,0,0,.12)!important}
.control-title{display:flex!important;align-items:center!important;gap:9px!important;padding-bottom:8px!important;border-bottom:1px solid rgba(184,221,246,.10)!important}.control-title>span{flex:0 0 auto!important;width:26px!important;height:26px!important;border-radius:8px!important;display:grid!important;place-items:center!important;background:#155d89!important;color:#dff4ff!important;font-size:11px!important;font-weight:950!important}.control-title>div{display:grid!important;gap:1px!important}.control-title b{font-size:12px!important}.control-title small{font-size:9px!important;color:#8ea7b5!important}
.beginner-summary{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;column-gap:8px!important;row-gap:2px!important;padding:8px 9px!important;border-radius:9px!important;background:#0a202e!important;border:1px solid rgba(184,221,246,.11)!important}.beginner-summary .beginner-badge{grid-row:1/3!important}.beginner-summary b{font-size:10px!important;line-height:1.3!important}.beginner-summary small{font-size:8px!important;line-height:1.35!important;color:#8fa7b4!important}

/* Forms: full-size, no squashed fields. */
.game-controls .field{display:grid!important;gap:6px!important;min-width:0!important}.game-controls .field label,.game-controls .field-label-row label{font-size:10px!important;line-height:1.2!important;color:#c5d4dc!important;font-weight:850!important;letter-spacing:.02em!important}.field-label-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}.field-label-row>span{font-size:9px!important;color:#89a2af!important;white-space:nowrap!important}
.game-controls input,.game-controls select,.game-controls textarea{width:100%!important;min-width:0!important;min-height:46px!important;padding:10px 12px!important;border-radius:10px!important;background:#071c29!important;border:1px solid var(--v18-line-strong)!important;color:#f3f8fa!important;font-size:14px!important;outline:0!important}.game-controls select{padding-right:34px!important}.game-controls input:focus,.game-controls select:focus,.game-controls textarea:focus{border-color:#62caff!important;box-shadow:0 0 0 3px rgba(45,168,255,.12)!important}
.bet-block{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}.bet-input{display:flex!important;align-items:center!important;min-height:48px!important;padding:0 11px!important;border-radius:10px!important;background:#071c29!important;border:1px solid var(--v18-line-strong)!important;overflow:hidden!important}.bet-input input{min-height:46px!important;border:0!important;background:transparent!important;padding:0!important;font-size:16px!important;font-weight:850!important}.bet-input>span{padding-left:8px!important;color:#9eb4c0!important;font-size:10px!important;font-weight:900!important}
.bet-tools.bet-presets{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;padding:0!important}.bet-tools.bet-presets button{min-width:0!important;min-height:40px!important;padding:0 5px!important;border-radius:9px!important;background:#12364c!important;border:1px solid var(--v18-line)!important;color:#eef8fc!important;font-size:10px!important;font-weight:900!important}.bet-tools.bet-presets button:hover,.bet-tools.bet-presets button.selected{background:#1b76aa!important;border-color:#70cfff!important;color:#fff!important}
.game-controls .form-grid.two{grid-template-columns:1fr 1fr!important;gap:8px!important}.choice-hint{padding:8px 9px!important;border-radius:9px!important;background:#091f2c!important;border:1px dashed rgba(184,221,246,.14)!important;color:#9db2bd!important;font-size:9px!important;line-height:1.45!important}

/* The action area is visually dominant and never hidden. */
.control-action{background:linear-gradient(180deg,#0e2b3e,#0c2535)!important}
.potential-preview,.next-action-box,.game-result{border-radius:10px!important;background:#081d2a!important;border:1px solid var(--v18-line)!important;padding:10px!important}.potential-preview{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:10px!important;align-items:center!important}.potential-preview small{font-size:8px!important;color:#8fa7b4!important}.potential-preview b{grid-row:1/3!important;grid-column:2!important;font-size:18px!important;white-space:nowrap!important}.potential-preview span{font-size:9px!important;color:#aac0ca!important}.next-action-box b{display:block!important;font-size:11px!important}.next-action-box span{display:block!important;margin-top:3px!important;font-size:9px!important;line-height:1.45!important;color:#a8bdc8!important}
.play-button{width:100%!important;min-height:54px!important;margin:0!important;border-radius:11px!important;font-size:14px!important;font-weight:950!important;letter-spacing:.01em!important;position:static!important}.game-result{min-height:58px!important;display:grid!important;align-content:center!important;gap:2px!important}.game-result b{font-size:12px!important}.game-result span{font-size:9px!important;line-height:1.4!important;color:#a7bbc5!important}.game-result.win{background:#0b3320!important;border-color:rgba(75,231,128,.38)!important}.game-result.loss{background:#33151c!important;border-color:rgba(255,104,121,.34)!important}
#sessionActions:empty{display:none!important}.session-action-row{display:grid!important;gap:7px!important}.session-action-row button{min-height:52px!important;border-radius:11px!important;font-size:12px!important;font-weight:900!important}.session-action-row span{font-size:9px!important;line-height:1.35!important;color:#9fb4be!important;text-align:center!important}

/* Advanced clutter is hidden behind one intentional disclosure. */
.game-extra{border-radius:11px!important;background:#0a202e!important;border:1px solid var(--v18-line)!important;overflow:hidden!important}.game-extra>summary{list-style:none!important;cursor:pointer!important;padding:11px 12px!important;font-size:10px!important;font-weight:900!important;color:#d8e6ec!important}.game-extra>summary::-webkit-details-marker{display:none!important}.game-extra>summary:after{content:"+"!important;float:right!important;color:#8cb0c3!important}.game-extra[open]>summary:after{content:"−"!important}.game-extra-body{display:grid!important;gap:8px!important;padding:0 10px 10px!important}.game-settings{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:0!important}.game-settings button{min-height:38px!important;padding:0 8px!important;border-radius:9px!important;background:#102d40!important;border:1px solid var(--v18-line)!important;color:#d7e7ee!important;font-size:9px!important}.game-extra .howto{background:#081d2a!important;border:1px solid rgba(184,221,246,.10)!important}.game-extra .howto summary{padding:9px 10px!important}.game-history{padding:9px!important;background:#081d2a!important;border:1px solid rgba(184,221,246,.10)!important;border-radius:9px!important}

/* Roulette, mines, blackjack and arcade-specific layout safety. */
.roulette-table{width:min(820px,100%)!important;grid-template-columns:minmax(180px,230px) minmax(0,1fr)!important;gap:18px!important}.roulette-numbers{width:100%!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:5px!important}.roulette-numbers button{min-height:36px!important}
.theme-mines .game-stage{overflow:visible!important}.mines-scene{width:min(540px,100%)!important;max-width:540px!important}.mines-board{width:100%!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important}.mines-board button,.mines-board span{width:100%!important;aspect-ratio:1!important;min-width:0!important;min-height:0!important;border-radius:10px!important}
.blackjack-table.interactive{width:min(820px,100%)!important;padding:14px!important;gap:18px!important}.blackjack-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.blackjack-actions button{min-width:0!important;min-height:58px!important;padding:8px!important;border-radius:10px!important}.blackjack-actions b{display:block!important;font-size:11px!important}.blackjack-actions small{display:block!important;margin-top:2px!important;font-size:8px!important;line-height:1.25!important}
.target-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}.target-btn{width:100%!important;min-width:0!important;min-height:76px!important}
.crash-stage,.plinko-stage,.dino-stage{width:min(820px,100%)!important;max-width:820px!important;min-height:430px!important;height:min(520px,100%)!important}.slot-machine{width:min(700px,100%)!important}.wheel-wrap{width:min(560px,100%)!important}

/* Multiplayer gets the same clean treatment. */
.multiplayer-modal{width:min(880px,calc(100vw - 40px))!important;max-width:880px!important;max-height:calc(100dvh - 40px)!important;overflow-y:auto!important;padding:22px!important;border-radius:16px!important;background:#0a1f2e!important;border:1px solid var(--v18-line)!important}.multiplayer-modal .beginner-summary.standalone{margin:10px 0!important}.multiplayer-modal .form-grid.two{grid-template-columns:1fr 1fr!important;gap:10px!important}.multiplayer-modal .modal-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.multiplayer-modal .modal-actions button{min-height:46px!important}.multiplayer-modal .lobby{min-height:48px!important}.multiplayer-modal .panel{overflow-x:auto!important}

/* Site-level card sizing. */
@media(max-width:1240px){#gameGrid,.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.game-layout{grid-template-columns:350px minmax(0,1fr)!important}}

/* Tablet + phone: one single scroll. No nested scrollbars, no sticky overlay on inputs. */
@media(max-width:900px){
  .modal-overlay{padding:0!important;display:block!important;overflow:hidden!important}
  .modal-overlay .game-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;padding:8px 8px calc(18px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important;background:#071a27!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
  .game-modal .game-shell{height:auto!important;min-height:100%!important;overflow:visible!important}.game-modal .modal-close{position:fixed!important;top:8px!important;right:8px!important}
  .game-modal-head{grid-template-columns:minmax(0,1fr) auto!important;padding:6px 46px 10px 4px!important}.game-modal-head .modal-title{font-size:21px!important}.game-modal-head .modal-sub{display:none!important}.game-wallet-mini{min-width:88px!important;padding:7px 8px!important}.game-wallet-mini small{display:none!important}.game-wallet-mini b{font-size:13px!important}
  .game-topline{grid-template-columns:1fr!important;gap:6px!important;padding:7px 3px!important}.game-mini-stats{display:none!important}.game-flow{width:100%!important}
  .game-layout{display:flex!important;flex-direction:column!important;overflow:visible!important;gap:9px!important}.game-stage{order:1!important;width:100%!important;height:auto!important;min-height:260px!important;max-height:none!important;overflow:hidden!important;padding:10px!important;border-radius:12px!important}.game-controls{order:2!important;width:100%!important;overflow:visible!important;padding:0!important;gap:8px!important}.control-card{padding:10px!important}.play-button,#sessionActions .primary,#sessionActions button{position:static!important;bottom:auto!important;box-shadow:0 10px 24px rgba(0,0,0,.26)!important}
  .game-controls input,.game-controls select{font-size:16px!important;min-height:46px!important}.game-controls .form-grid.two{grid-template-columns:1fr 1fr!important}.bet-tools.bet-presets button{min-height:42px!important}
  .game-extra{margin-bottom:4px!important}.game-settings{grid-template-columns:1fr 1fr!important}
  .theme-mines .game-stage{min-height:0!important;height:auto!important;overflow:visible!important;padding:4px!important}.mines-scene{width:100%!important}.mines-board{gap:5px!important}.mines-board button,.mines-board span{border-radius:8px!important}
  .roulette-table{grid-template-columns:1fr!important;gap:10px!important}.roulette-wheel{margin:auto!important}.roulette-numbers{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:4px!important}.roulette-numbers button{min-height:38px!important;font-size:10px!important}
  .blackjack-table.interactive{padding:8px!important}.blackjack-actions{grid-template-columns:1fr 1fr!important}.target-stage{gap:8px!important}.crash-stage,.plinko-stage,.dino-stage{min-height:250px!important;height:280px!important}.wheel-wrap{max-width:430px!important}.slot-machine{max-width:560px!important}
  .multiplayer-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;padding:14px 10px calc(22px + env(safe-area-inset-bottom))!important;overflow-y:auto!important}.multiplayer-modal .form-grid.two{grid-template-columns:1fr!important}.multiplayer-modal .modal-actions{grid-template-columns:1fr!important}.ubo-bot-callout{grid-template-columns:44px minmax(0,1fr)!important}.ubo-bot-callout .primary{grid-column:1/-1!important;width:100%!important}
}

@media(max-width:600px){
  #gameGrid,.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.game-meta h3{font-size:15px!important}.game-meta span{font-size:9px!important}.game-art{border-radius:11px!important}
  .control-title small{display:none!important}.beginner-summary small{display:none!important}.beginner-summary{grid-template-columns:auto minmax(0,1fr)!important}.field-label-row>span{font-size:8px!important}.bet-tools.bet-presets{grid-template-columns:repeat(3,minmax(0,1fr))!important}.bet-tools.bet-presets button:last-child{grid-column:2/4!important}
  .game-controls .form-grid.two{grid-template-columns:1fr!important}.potential-preview b{font-size:16px!important}.game-stage{min-height:230px!important}.crash-stage,.plinko-stage,.dino-stage{height:240px!important;min-height:220px!important}.theme-mines .game-stage{min-height:0!important}.mines-board{gap:4px!important}.blackjack-actions{grid-template-columns:1fr 1fr!important}.blackjack-actions button{min-height:62px!important}.roulette-numbers{grid-template-columns:repeat(6,minmax(0,1fr))!important}.target-row{gap:5px!important}.target-btn{min-height:66px!important}
}

@media(max-width:380px){
  .game-modal .game-flow span{font-size:8px!important}.game-flow span i{width:20px!important;height:20px!important}.control-card{padding:8px!important}.bet-tools.bet-presets{gap:4px!important}.bet-tools.bet-presets button{font-size:9px!important}.game-stage{padding:7px!important}.mines-board{gap:3px!important}.roulette-numbers{gap:3px!important}.blackjack-actions{grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
