/*
Theme Name: 12SQ - Thập Nhị Sứ Quân (All-in-One)
Theme URI: https://12sq.game
Author: Quang Tuyên
Description: All-in-One WordPress Game Theme featuring full Match-3 RPG mechanics, 12 Warlords, Five Elements system, dungeon battles, world boss, gacha tavern, arena, topup system, and admin dashboard.
Version: 1.3.2
/* Balance v2 permanently established as primary data */
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: 12sq-theme
Tags: gaming, minimal, dark, one-column
*/

:root {
    --tsq-bg-deep: #0b0f1a;
    --tsq-bg: #0f172a;
    --tsq-bg-panel: #1e293b;
    --tsq-bg-surface: #273548;
    --tsq-bg-game: #1a1a2e;
    --tsq-text: #e2e8f0;
    --tsq-text-muted: #94a3b8;
    --tsq-text-dim: #64748b;
    --tsq-text-white: #fff;
    --tsq-border: #334155;
    --tsq-border-light: #475569;
    --tsq-accent: #38bdf8;
    --tsq-gold: #fbbf24;
    --tsq-red: #ef4444;
    --tsq-green: #4ade80;
    --tsq-purple: #a855f7;
    --tsq-radius-sm: 6px;
    --tsq-radius-md: 12px;
    --tsq-radius-lg: 16px;
    --tsq-radius-pill: 9999px;
    --tsq-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tsq-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    margin-top: 0 !important;
}

body {
    font-family: var(--tsq-font);
    background: var(--tsq-bg);
    color: var(--tsq-text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--tsq-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--tsq-border); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--tsq-border) var(--tsq-bg-deep); }

/* Typography */
h1, h2, h3, h4 { color: var(--tsq-text-white); font-weight: 700; line-height: 1.3; }
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; }
p { color: var(--tsq-text); margin-bottom: 1em; }
a { color: var(--tsq-accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--tsq-gold); }
img { max-width: 100%; height: auto; }
::selection { background: rgba(56,189,248,0.3); color: #fff; }

/* Page wrapper */
.tsq-page-wrap {
    min-height: 100vh;
    background: var(--tsq-bg);
    background-image: radial-gradient(ellipse at top center, var(--tsq-bg-panel) 0%, var(--tsq-bg) 50%);
    padding: 40px 16px;
}
.tsq-page-content { max-width: 900px; margin: 0 auto; }

/* Buttons */
.tsq-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px;
    border: none; border-radius: var(--tsq-radius-pill); font-family: var(--tsq-font);
    font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: all 0.3s var(--tsq-ease); line-height: 1;
}
.tsq-btn-primary { background: linear-gradient(135deg, var(--tsq-accent), #0ea5e9); color: #fff; box-shadow: 0 4px 15px rgba(56,189,248,0.3); }
.tsq-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(56,189,248,0.5); color: #fff; }
.tsq-btn-gold { background: linear-gradient(135deg, var(--tsq-gold), #f59e0b); color: #000; box-shadow: 0 4px 15px rgba(251,191,36,0.3); }
.tsq-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(251,191,36,0.5); color: #000; }
.tsq-btn-ghost { background: transparent; color: var(--tsq-text); border: 1px solid var(--tsq-border); }
.tsq-btn-ghost:hover { background: var(--tsq-bg-surface); border-color: var(--tsq-accent); color: #fff; }

/* Post Card Hover */
.tsq-post-card:hover {
    transform: translateY(-4px);
    border-color: var(--tsq-accent) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Pagination */
.tsq-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 4px;
    background: var(--tsq-bg-panel);
    border: 1px solid var(--tsq-border);
    border-radius: var(--tsq-radius-sm);
    color: var(--tsq-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.tsq-pagination .page-numbers:hover,
.tsq-pagination .page-numbers.current {
    background: var(--tsq-accent);
    color: #fff;
    border-color: var(--tsq-accent);
}

/* Post content tags */
.tsq-post-tags a {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--tsq-accent);
    margin-right: 6px;
    margin-bottom: 6px;
}
.tsq-post-tags a:hover {
    background: var(--tsq-accent);
    color: #fff;
}

/* Admin bar subtle */
#wpadminbar { opacity: 0.3; transition: opacity 0.3s; }
#wpadminbar:hover { opacity: 1; }

@media (max-width: 768px) {
    html { font-size: 15px; } h1 { font-size: 2rem; }
    .tsq-page-wrap { padding: 24px 8px; }
}
@media (max-width: 480px) { html { font-size: 14px; } h1 { font-size: 1.7rem; } }