/* ==========================================================================
   propecity.com - main stylesheet
   Mobile-only design: a single phone-sized column on every screen.
   ========================================================================== */

/* ---------- Base ---------- */
:root {
    --text-color: #5b6270;
    --text_color: #5b6270;          /* old name, kept so nothing breaks */
    --heading: #1f2430;
    --brand: #3b82f6;
    --brand-dark: #2563eb;
    --border: #e5e7eb;
    --radius: 14px;
    --shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.28);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: "Dosis", Arial, sans-serif;
    color: var(--text-color);
    background: #fff;
    line-height: 1.45;
    overflow-x: hidden;   /* safety net: nothing (ads included) can ever cause sideways scroll/clipping */
}

img, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- Page frame ----------
   Mobile-only design: one phone-sized column (max 400px), centered on bigger screens. */
main {
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

/* grid background stays put while scrolling (works on iPhone too) */
main::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url(../assets/grid_Frame.svg) center / cover no-repeat;
}

.bg-top, .bg-bottom { display: none; }      /* old decorative layers, no longer used */

.main_div {
    width: 100%;
    max-width: 400px;
    min-height: 100vh;
    padding: 16px 14px 0;
    background: #fff;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.pokii_game_section { width: 100%; text-align: center; }
.pokii_game_section > br, .pokii_game_section > div > br { display: none; }   /* old spacer tags */


/* ---------- Heading block ---------- */
.logo_content {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 4px;
}

.logo_content .title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color);
    padding-top: 4px;
}

ins.adsbygoogle { display: block; max-width: 100%; margin: 12px auto; overflow: hidden; }

/* ---------- Cards / boxes ---------- */
.resp_play_btn, .resp_choose_game, .resp_about_section, .resp_footer {
    display: flex;
    justify-content: center;
}

.choose_game, .play_btn {
    width: 100%;
    margin-top: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.play_btn_txt {
    font-size: 16px;
    font-weight: 600;
    color: var(--heading);
}

.play_btn_txt1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 20px;
}

/* ---------- Buttons ---------- */
.click_btn {
    display: inline-block;
    margin-top: 12px;
    padding: 11px 22px;
    background: var(--brand);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.6);
    transition: background-color .2s, transform .2s;
}
.click_btn:hover { background: var(--brand-dark); }
.click_btn:active { transform: scale(.97); }
.btn1 { width: 100%; }

/* Category buttons: 2 x 2 on phones, one row on wider screens */
.class_flex {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* always exactly 2 columns, never overflows */
    gap: 10px;
    width: 100%;
    margin-top: 14px;
}
.class_flex a { display: block; width: 100%; min-width: 0; }

/* Category tiles: white background, blue outline (matches the reference design) */
.cat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 14px 8px;
    background: #fff;
    color: var(--brand);
    font-size: 15px;
    font-weight: 700;
    border: 2px solid var(--brand);
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s, color .15s;
}
.cat-btn:hover { background: var(--brand); color: #fff; }
.cat-btn:hover .cat_img { filter: brightness(0) invert(1); }
.cat_img { width: 20px; height: 20px; flex: none; transition: filter .15s; }


/* ---------- Game grid ---------- */
.game_section { margin-top: 16px; width: 100%; }

.game-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin-top: 16px;
}

.game-card {
    display: flex;
    flex-direction: column;
    padding: 8px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s;
}
.game-card:hover { transform: translateY(-3px); }
.game-card[hidden] { display: none; }

.game-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}

.game-card h3 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading);
    text-wrap: balance;
}

.game-card a { display: block; }

.play-button {
    width: 100%;
    padding: 9px;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .2s;
}
.play-button:hover { background: var(--brand-dark); }

.more-games {
    width: 100%;
    max-width: 360px;
    margin: 18px auto 4px;
    text-align: center;
}
.more-games a { display: block; }
.more-games button {
    width: 100%;
    padding: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.6);
    transition: background-color .2s;
}
.more-games button:hover { background: var(--brand-dark); }


/* ---------- Single game page ---------- */
.game_hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}
.game_title { font-size: 24px; font-weight: 700; color: var(--heading); }
.game_hero img {
    width: 172px;
    height: 172px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.start-button {
    display: inline-block;
    padding: 14px 36px;
    background: #facc15;
    color: #1f2430;
    font-size: 20px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.3);
    transition: background-color .2s, transform .2s;
}
.start-button:hover { background: #eab308; }
.start-button:active { transform: scale(.96); }

.game_frame { width: 100%; max-width: 900px; margin: 16px auto; }
.game_frame[hidden] { display: none; }
.game_frame iframe { display: block; width: 100%; height: 520px; border: 0; border-radius: 10px; background: #000; }

/* ---------- Text blocks (home / category / game description / legal pages) ---------- */
.about_section {
    width: 100%;
    margin-top: 20px;
    padding-bottom: 16px;
    text-align: left;
}
.about_section h1 { margin-bottom: 8px; font-size: 24px; color: var(--heading); }
.about_section h2 { margin: 22px 0 6px; font-size: 18px; color: var(--heading); }
.about_section p  { margin: 0 0 12px; font-size: 16px; color: var(--text-color); }
.about_section ul { margin: 6px 0 12px; padding-left: 20px; color: var(--text-color); font-size: 16px; }
.about_section li { margin-bottom: 4px; }
.about_section a  { text-decoration: underline; }
.about_section .updated { font-size: 14px; }

/* ---------- Footer ---------- */
.resp_footer {
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
    padding: 10px 0 4px;
    border-top: 1px solid var(--border);
}
footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    width: 100%;
    padding: 6px 0;
    font-size: 14px;
}
.anchor_text { color: #3f4654; }
.anchor_text:hover { text-decoration: underline; }
.legal_line { margin: 4px 0 16px; font-size: 13px; text-align: center; color: #8a90a0; }

/* ---------- Common game player (play.html) ----------
   Full screen: only the game and a small floating "Exit" control. */
body.play-page {
    margin: 0;
    height: 100%;
    background: #000;
}
.player_wrap {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh; /* falls back to 100vh automatically on browsers without dvh */
    height: 100vh;
    height: 100dvh;
    background: #000;
}
.player_frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.player_back {
    position: fixed;
    top: env(safe-area-inset-top, 10px);
    left: env(safe-area-inset-left, 10px);
    z-index: 10;
    padding: 8px 14px;
    background: rgba(20, 20, 26, 0.65);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    backdrop-filter: blur(2px);
}
.player_back:hover { background: rgba(20, 20, 26, 0.85); }