/*
 * public_2025.css — "chunky game UI" theme
 * Used by public_2025.tpl.inc.php
 */
:root {
    --ink: #4b4b4b;
    --sub: #afafaf;
    --line: #e5e5e5;
    --green: #58cc02;  --green-dk: #46a302;
    --blue: #1cb0f6;   --blue-dk: #1899d6;
    --purple: #ce82ff; --purple-dk: #a568cc;
    --orange: #ff9600; --orange-dk: #cc7800;
    --red: #ff4b4b;    --red-dk: #cc3b3b;
    --teal: #2fd6c8;   --teal-dk: #25aba0;
}

body {
    background: #fff;
    font-family: "Nunito", system-ui, sans-serif;
    color: var(--ink);
}

/* ── Site header ─────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 2px solid var(--line);
    z-index: 100;
}
.site-header .bar {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
}
.site-logo {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--green);
    letter-spacing: -.5px;
    text-decoration: none;
}
.site-logo:hover { color: var(--green-dk); }
.site-nav { display: flex; gap: 8px; }
.site-nav a {
    text-decoration: none;
    color: var(--sub);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 12px;
    transition: .12s;
}
.site-nav a:hover { background: #f2fbff; color: var(--blue); }
.site-nav a.active {
    color: var(--blue);
    background: #ddf4ff;
    border: 2px solid #b0e5ff;
    padding: 8px 12px;
}

/* Mobile menu */
.menu-icon {
    display: none;
    font-size: 1.7rem;
    cursor: pointer;
    color: var(--ink);
    line-height: 1;
}
.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 16px;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    overflow: hidden;
    min-width: 200px;
}
.menu-dropdown a {
    display: block;
    padding: 12px 20px;
    color: var(--ink);
    font-weight: 800;
    font-size: .85rem;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.menu-dropdown a:last-child { border-bottom: none; }
.menu-dropdown a:hover { background: #f2fbff; color: var(--blue); }
@media (max-width: 860px) {
    .site-nav { display: none; }
    .menu-icon { display: block; }
}

/* ── Page body ───────────────────────────────────────────────── */
.page-main {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 28px 60px;
}

/* Hero: mascot + speech bubble */
.hero {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 38px 0 6px;
}
.mascot {
    flex: 0 0 120px;
    height: 120px;
    border-radius: 50%;
    background: #ddf4ff;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 4px solid #b0e5ff;
}
.mascot img { max-width: 82%; max-height: 82%; }
.speech {
    position: relative;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 18px;
    padding: 20px 26px;
}
.speech::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 38px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-left: 2px solid var(--line);
    border-bottom: 2px solid var(--line);
    transform: rotate(45deg);
}
.speech h1 {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -.5px;
}
.speech p { color: var(--sub); font-weight: 700; margin: 6px 0 0; }
@media (max-width: 560px) {
    .hero { flex-direction: column; text-align: center; }
    .speech::before { display: none; }
}

/* ── Deck tiles ──────────────────────────────────────────────── */
.deck-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 20px;
}
.tile {
    border-radius: 18px;
    padding: 20px 14px 16px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    border: none;
    transition: filter .12s, transform .05s;
}
.tile:active { transform: translateY(4px); box-shadow: none !important; }
.tile:hover { filter: brightness(1.06); }
.tile .art {
    display: grid;
    width: 92px;
    height: 92px;
    margin: 0 auto 12px;
    background: #fff;
    border-radius: 50%;
    place-items: center;
    padding: 10px;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.08);
}
.tile .art img { max-width: 100%; max-height: 100%; }
.tile .tile-name {
    display: block;
    font-size: 1.12rem;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.tile .pill {
    display: inline-block;
    margin-top: 8px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .5px;
    background: rgba(255,255,255,.25);
    padding: 3px 12px;
    border-radius: 999px;
}
.tile-g { background: var(--green);  box-shadow: 0 5px 0 var(--green-dk); }
.tile-b { background: var(--blue);   box-shadow: 0 5px 0 var(--blue-dk); }
.tile-p { background: var(--purple); box-shadow: 0 5px 0 var(--purple-dk); }
.tile-o { background: var(--orange); box-shadow: 0 5px 0 var(--orange-dk); }
.tile-r { background: var(--red);    box-shadow: 0 5px 0 var(--red-dk); }
.tile-t { background: var(--teal);   box-shadow: 0 5px 0 var(--teal-dk); }

/* ── Deeper pages: title + generic content ───────────────────── */
.page-title {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -.5px;
    text-align: center;
    padding: 34px 0 6px;
}
.image-container {
    text-align: center;
    margin-top: 40px;
}

/* Bootstrap overrides so forms/cards match the chunky theme */
.page-main .card {
    border: 2px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 5px 0 var(--line);
}
.page-main .card-title {
    font-weight: 900;
    letter-spacing: -.5px;
}
.page-main .form-control,
.page-main .form-select {
    border: 2px solid var(--line);
    border-radius: 12px;
    font-weight: 700;
}
.page-main .form-control:focus,
.page-main .form-select:focus {
    border-color: #b0e5ff;
    box-shadow: 0 0 0 3px #ddf4ff;
}
.page-main .form-label { font-weight: 800; font-size: .85rem; color: var(--sub); text-transform: uppercase; letter-spacing: .5px; }
.page-main .btn {
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    font-size: .85rem;
    border-radius: 14px;
    border: none;
    padding: 11px 18px;
}
.page-main .btn:active { transform: translateY(3px); box-shadow: none !important; }
.page-main .btn svg {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -.28em;
    margin-right: 4px;
}
.page-main .btn-primary {
    background: var(--blue);
    box-shadow: 0 4px 0 var(--blue-dk);
}
.page-main .btn-primary:hover, .page-main .btn-primary:focus { background: var(--blue); filter: brightness(1.06); }
.page-main .btn-secondary, .page-main .btn-outline-secondary {
    background: #fff;
    color: var(--sub);
    border: 2px solid var(--line);
    box-shadow: 0 4px 0 var(--line);
}
.page-main .btn-secondary:hover, .page-main .btn-outline-secondary:hover { color: var(--blue); border-color: #b0e5ff; background: #f2fbff; }
.page-main .btn-success {
    background: var(--green);
    box-shadow: 0 4px 0 var(--green-dk);
}
.page-main .btn-success:hover { background: var(--green); filter: brightness(1.06); }
.page-main .btn-danger {
    background: var(--red);
    box-shadow: 0 4px 0 var(--red-dk);
}
.page-main .btn-danger:hover { background: var(--red); filter: brightness(1.06); }
.page-main .btn-link { color: var(--blue); text-transform: none; letter-spacing: 0; }
.page-main a:not(.btn) { color: var(--blue); }
.page-main .btn-primary,
.page-main .btn-success,
.page-main .btn-danger { color: #fff; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
    text-align: center;
    color: var(--sub);
    font-weight: 700;
    font-size: .85rem;
    padding: 26px;
    border-top: 2px solid var(--line);
}
.site-footer a { color: var(--sub); text-decoration: underline; }
.site-footer a:hover { color: var(--blue); }