/*
 * reset.css — single source for universal reset rules
 * Consolidates body/html base styles, * box-sizing, and global scrollbar theming.
 * Loaded BEFORE any other stylesheet.
 *
 * History: extracted from main.v28.css lines 61-140 (Milestone 2).
 */

/* Universal box reset */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    list-style-type: none;
    padding: 0;
    margin: 0;
    outline: 0;
}

/* Base body/html */
body,
html {
    display: flex;
    flex-direction: column;
    font-family: 'Google Sans', -apple-system, system-ui, Arial, sans-serif;
    background-color: #1b2030;
    color: #2d2a73;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Page-fill: only `#app` gets `min-height: 100vh`, NOT body.
   - Setting it on body broke the popup overlay layering (popups stacked
     under content because body grew taller than viewport, see earlier
     "popup duplicate visible" issue).
   - Setting it on #app alone fills the viewport on short ajax-loaded pages
     (the "grey strip below /bonus" symptom) without affecting popup z-stacking. */
#app { min-height: 100vh; }

/* Global scrollbar theme */
::-webkit-scrollbar { width: 0; }
::-webkit-scrollbar-track { background: #22293e; border-radius: 100px; }
::-webkit-scrollbar-thumb { background: #333d59; border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: #485478; border-radius: 100px; }

/* Transitions for interactive primitives. Cursor — только для реально
   кликабельных элементов: кнопок и ссылок с href. На ::before/::after
   pointer тек по всем псевдо-элементам (включая декоративный "WIN" в
   winner-tile), на input — мешал текстовым полям. */
:after,
:before,
a,
button,
input {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
button,
a[href] {
    cursor: pointer;
}

/* Text elements don't show pointer cursor by default */
b,
em,
h1, h2, h3, h4, h5, h6,
p,
span {
    cursor: default;
}

/* iOS auto-zooms when an input has font-size < 16px on focus. We force 16px
   on mobile inputs (with !important because there are dozens of legacy
   .searchSlots/.bx-input rules at 13-14px that would otherwise win). The
   viewport meta also gets maximum-scale=1 in app.blade.php, so even fields
   missed by the cascade can't trigger the auto-zoom. */
@media (max-width: 1024px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Suppress sticky :hover after a tap on touch devices — Safari otherwise
   keeps the hover state on whichever element happened to be at the same
   coordinate as the tap source (e.g. nav button → first slot card). */
@media (hover: none) {
    a, button, [role="button"], .slot_game, .provider, .btnSlots, .tf-button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
}

/* Disable iOS long-press → "Save image / Copy" callout menu and the photo-
   style selection halo. Applies to images and the card containers that
   wrap them; user-select on body covers text selection elsewhere. */
img,
.slot_game,
.tf-card-box,
.card-media,
.card-media a,
.card-media img,
.providersSlots .provider {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Chat text is selectable (overrides body user-select: none) */
.chat span {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Responsive media: never overflow their container.
   NOTE: <svg> is NOT included — inline SVG icons in blade templates rely on
   their own width/height attributes; max-width:100% + height:auto would inflate
   them to parent width (caused giant icons on /profile-v2). */
img,
picture,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* A11y: respect prefers-reduced-motion — kill big looping animations and instant-jump
   long-running transforms, but DON'T disable short hover transitions (color/border
   underline draws etc) since those don't trigger motion sickness. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}