/* =========================================================
   PUDDLE — responsive layer. Loaded last; only touches small screens and touch devices.
   Phones: bottom tab bar, safe-area insets, 16px inputs (no iOS zoom), 44px tap targets, tighter spacing, dvh heights.
   ========================================================= */
.m-tabbar { display: none; }

@supports (padding: max(0px)) {
    .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

@media (max-width: 860px) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--tb-h) + env(safe-area-inset-top)); }
    .m-tabbar {
        display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
        height: calc(58px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
        background: var(--bg-1); border-top: 1px solid var(--bg-2); box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
    }
    .m-tabbar a, .m-tabbar button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-1); font: 600 10.5px/1 var(--font-main); cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
    .m-tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .m-tabbar .on { color: var(--ice); }
    .m-tabbar a:active, .m-tabbar button:active { background: var(--bg-2); }
    .m-tabbar a:focus-visible, .m-tabbar button:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }
    body.nav-open .m-tabbar { z-index: 100; }
    /* floating things sit above the tab bar */
    .livechat-fab { bottom: calc(76px + env(safe-area-inset-bottom)) !important; right: 14px !important; width: 46px !important; height: 46px !important; }
    .cookie-note { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
    .toast-stack { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
    .sidebar { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

    /* spacing */
    .main-inner { padding-left: 14px; padding-right: 14px; }
    .page-head { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 14px; margin-bottom: 14px; }
    .section-title, .page-head h1 { font-size: 22px; }
    .site-footer { padding-bottom: 20px; }
    .sf-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
    .sf-brand { grid-column: 1 / -1; }
    .sf-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 700px) {
    /* the long cookie banner becomes a slim one */
    .cookie-note { padding: 12px 14px !important; gap: 10px !important; left: 10px !important; right: 10px !important; width: auto !important; transform: none !important; }
    .cookie-note p { font-size: 12px !important; line-height: 1.45 !important; }
    .cookie-note .btn { min-height: 38px !important; padding: 0 16px !important; }
    .pg-frame { height: calc(100dvh - 190px) !important; min-height: 420px; }
    .pg-bar { gap: 8px; }
    .pg-bar .pg-title { flex: 1 1 100%; order: -1; }
    .pg-bar .pg-bal { margin-left: auto; }
    .toast { max-width: calc(100vw - 24px); }
    .bet-table, .ft-table { font-size: 12px; }
}

/* touch devices: comfortable targets, no iOS zoom on focus */
@media (pointer: coarse) {
    input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], select, textarea { font-size: 16px !important; }
    .btn, button.btn { min-height: 44px; }
    .icon-btn { width: 42px; height: 42px; }
    .nav-item { min-height: 44px; }
    a, button, .btn, .nav-item { touch-action: manipulation; }
}
@media (hover: none) { .game-card:hover, .orig-card:hover, .sl-card:hover .sl-thumb { transform: none; } }

/* very small phones */
@media (max-width: 360px) {
    .main-inner { padding-left: 10px; padding-right: 10px; }
    .m-tabbar span { font-size: 10px; }
}

/* large screens: keep the content readable */
@media (min-width: 1600px) { :root { --content-max: 1400px; } }

/* landscape phones: tab bar would eat the screen */
@media (max-width: 860px) and (max-height: 480px) {
    .m-tabbar { display: none; }
    body { padding-bottom: 0; }
    .pg-frame { height: calc(100dvh - 70px) !important; min-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }