/* ZumaBalls.com: "Play Fullscreen" button for game pages. Used with /img/fullscreen.js */

/* The old site CSS forces font-size and max-width with !important,
   so the rules below use !important where they have to win. */

/* ---------- "Play Fullscreen" button ---------- */

.zb-fs-bar {
    text-align: center;
    margin: 8px 0 10px;
}

.zb-fs-bar .zb-fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 8px 22px;
    font: normal 20px/1.2 viking77, Aladin, Arial, sans-serif !important;
    letter-spacing: 0.5px;
    color: #FFFAF0;
    background: #01437D;
    background-image: linear-gradient(#0a62b3, #01437D);
    border: 2px solid #FFA70F;
    border-radius: 8px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.zb-fs-bar .zb-fs-btn:hover,
.zb-fs-bar .zb-fs-btn:focus-visible {
    color: #01437D;
    background: #FFA70F;
    background-image: linear-gradient(#ffc04d, #FFA70F);
}

.zb-fs-bar .zb-fs-btn:focus-visible {
    outline: 3px solid #01437D;
    outline-offset: 2px;
}

.zb-fs-bar .zb-fs-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.zb-fs-bar .zb-fs-btn svg {
    flex: none;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Wide screens: controls | button | rating in one line ---------- */

/* fullscreen.js adds .zb-row to #game when all three fit in one line.
   The controls and the rating become floats, the button fills the gap between them.
   If the button does not fit, it stays under the game and none of this applies. */

#game.zb-row .mouse_left {
    float: left;
    margin: 9px 5px 0;
}

#game.zb-row .game_control {
    float: left;
    padding: 0 0 0 8px;
    line-height: 48px;
    white-space: nowrap;
}

#game.zb-row > #raiting_star {
    float: right;
    height: auto;
    margin: 12px 5px 0 10px;
}

.zb-fs-bar.zb-fs-bar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 270px;
    min-width: max-content;
    min-height: 48px;
    margin: 0 12px;
}

/* ---------- Fullscreen mode ---------- */

html.zb-fs-lock {
    overflow: hidden !important;
}

/* keeps the scroll position exactly where it was when the game comes back */
html.zb-fs-noanchor,
html.zb-fs-noanchor body {
    overflow-anchor: none !important;
}

#game_flash.zb-fs {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #000 !important;
    z-index: 2147483646 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Hide texts, links and related games around the game */
#game_flash.zb-fs > :not(.zb-fs-keep):not(.zb-fs-target):not(.zb-fs-close),
#game_flash.zb-fs .zb-fs-keep > :not(.zb-fs-keep):not(.zb-fs-target) {
    display: none !important;
}

/* The game and everything that holds it fill the screen */
#game_flash.zb-fs .zb-fs-keep,
#game_flash.zb-fs .zb-fs-target {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
}

/* ---------- Red round X (top right) ---------- */

.zb-fs-close {
    display: none !important;
}

#game_flash.zb-fs > .zb-fs-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    top: 10px;
    right: 10px;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    left: auto !important;
    bottom: auto !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e01b1b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    z-index: 2147483647 !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#game_flash.zb-fs > .zb-fs-close:hover {
    background: #ff3030;
}

#game_flash.zb-fs > .zb-fs-close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

#game_flash.zb-fs > .zb-fs-close:active {
    transform: scale(0.93);
}

#game_flash.zb-fs > .zb-fs-close svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 3.2;
    stroke-linecap: round;
}