/* ===== Kotaku-style editorial gaming media =====
   Black header / yellow italic logo / white content / red bylines */
:root{
  --brand-red:#e71313;
  --brand-red-dark:#b30f0f;
  --brand-yellow:#f5c518;
  --brand-yellow-dark:#d4a910;
  --bg:#fff;
  --surface:#f5f5f5;
  --card-bg:#fff;
  --text:#111;
  --text-secondary:#444;
  --text-muted:#767676;
  --border:#e1e1e1;
  --border-color:#e1e1e1;
  --header-bg:#000;
  --header-text:#fff;
  --radius:4px;
  --radius-sm:2px;
  --shadow:0 1px 2px rgba(0,0,0,.06);
  --shadow-hover:0 6px 18px rgba(0,0,0,.1);
  --font-sans:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
  --header-h:64px;
  --max-w:1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .15s}
a:hover{color:var(--brand-red)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:700;line-height:1.2}

.container{max-width:var(--max-w);margin:0 auto;padding:0 16px}

/* ===== Header ===== */
.header{background:var(--header-bg);color:var(--header-text);position:sticky;top:0;z-index:100;border-bottom:1px solid #333}
.header .container{display:flex;align-items:center;height:var(--header-h);gap:24px}
.logo{display:flex;flex-direction:column;color:#fff;font-family:var(--font-serif);font-style:italic;font-weight:900;font-size:28px;line-height:.95;letter-spacing:-1px}
.logo .logo-text{color:var(--brand-yellow)}
.logo small{font-family:var(--font-sans);font-size:11px;font-style:normal;font-weight:400;color:#aaa;text-transform:none;margin-top:3px;letter-spacing:.2px}
.logo:hover{color:#fff}
.logo:hover .logo-text{color:var(--brand-yellow-dark)}

.nav{display:flex;gap:2px;flex:1;justify-content:center}
.nav a{padding:8px 11px;border-radius:var(--radius-sm);font-weight:800;font-size:12px;color:#fff;letter-spacing:.6px;text-transform:uppercase;transition:all .15s;white-space:nowrap}
.nav a:hover,.nav a.active{color:var(--brand-yellow);background:rgba(255,255,255,.08)}

.header-actions{display:flex;align-items:center;gap:12px;color:#fff}
.header-actions .icon-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:6px;line-height:1}
.header-actions .icon-btn:hover{color:var(--brand-yellow)}
.search-toggle-form{position:relative}
.search-toggle-form input{width:160px;padding:6px 10px 6px 32px;border:1px solid #444;border-radius:20px;font-size:13px;outline:none;background:#222;color:#fff;transition:border-color .2s,width .2s}
.search-toggle-form input::placeholder{color:#888}
.search-toggle-form input:focus{border-color:var(--brand-yellow);width:220px}
.search-toggle-form .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#888;font-size:13px;pointer-events:none}

.menu-toggle{display:none;font-size:22px;cursor:pointer;background:none;border:none;color:#fff;padding:6px}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#333}

/* ===== Main ===== */
.main{min-height:calc(100vh - var(--header-h) - 180px);padding:28px 0}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;cursor:pointer;border:none;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--brand-red);color:#fff}
.btn-primary:hover{background:var(--brand-red-dark);color:#fff}
.btn-outline{border:1px solid var(--border);background:#fff;color:var(--text)}
.btn-outline:hover{border-color:var(--brand-red);color:var(--brand-red)}
.btn-sm{padding:5px 12px;font-size:13px}
.btn-danger{background:#c62828;color:#fff}
.btn-danger:hover{background:#a02020;color:#fff}

/* ===== Homepage hero ===== */
.home-hero{display:grid;grid-template-columns:1.8fr 1fr;gap:28px;margin-bottom:44px}
.hero-featured{display:block}
.hero-featured .hero-img-wrap{width:100%;aspect-ratio:16/10;overflow:hidden;background:#eee}
.hero-featured img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.hero-featured:hover img{transform:scale(1.02)}
.hero-featured .hero-info{padding:16px 0 0}
.hero-featured h2{font-family:var(--font-serif);font-size:30px;font-weight:700;line-height:1.1;margin-bottom:10px;color:#111;letter-spacing:-.3px}
.hero-featured:hover h2{color:var(--brand-red)}
.hero-featured p{font-size:15px;color:var(--text-secondary);line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.byline{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.byline .author{color:var(--brand-red);margin-right:8px}

.latest-list{border-left:1px solid var(--border);padding-left:20px}
.latest-list > h3{font-family:var(--font-sans);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin-bottom:16px;color:#111}
.latest-item{display:block;padding:12px 0;border-bottom:1px solid var(--border)}
.latest-item:first-child{padding-top:0}
.latest-item time{display:block;font-size:12px;color:var(--text-muted);margin-bottom:4px}
.latest-item .title{font-family:var(--font-serif);font-size:16px;font-weight:700;line-height:1.25;color:#111;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.latest-item:hover .title{color:var(--brand-red)}
.latest-item .author{font-size:11px;color:var(--brand-red);font-weight:700;text-transform:uppercase;letter-spacing:.3px}

/* ===== Section headers ===== */
.section-header{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.section-header h2{font-family:var(--font-sans);font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#111}
.section-header .dot{color:var(--brand-red);font-weight:400;font-size:14px}
.section-header a{font-size:12px;color:var(--brand-red);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.section-header a:hover{text-decoration:underline}

/* ===== Editorial cards (4-col sections) ===== */
.card-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:44px}
.card-editorial{display:block}
.card-editorial .card-img-wrap{width:100%;aspect-ratio:16/10;overflow:hidden;background:#eee;margin-bottom:12px}
.card-editorial img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.card-editorial:hover img{transform:scale(1.03)}
.card-editorial h3{font-family:var(--font-serif);font-size:17px;font-weight:700;line-height:1.25;color:#111;margin-bottom:8px;letter-spacing:-.2px}
.card-editorial:hover h3{color:var(--brand-red)}
.card-editorial .byline{font-size:11px;color:var(--brand-red);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.card-editorial .subline{font-size:12px;color:var(--text-muted);margin-top:4px}

/* ===== Legacy card helpers kept for inner pages ===== */
.card{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.card-body{padding:14px}
.card-title{font-size:15px;font-weight:700;margin-bottom:4px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-meta{font-size:12px;color:var(--text-muted)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}

/* ===== Game detail ===== */
.game-detail{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.game-header{display:flex;gap:20px;margin-bottom:24px}
.game-header .game-icon-lg{width:100px;height:100px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#f5f5f5}
.game-header h1{font-size:26px;margin-bottom:8px;font-weight:800;letter-spacing:-.5px;font-family:var(--font-serif)}
.game-header .game-tags{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.game-header .game-tags span{padding:2px 10px;border-radius:2px;font-size:12px;background:#fbe4e4;color:var(--brand-red);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.download-btns{display:flex;gap:12px;margin-top:12px}
.download-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border-radius:var(--radius-sm);font-weight:700;font-size:14px}
.download-btn.ios{background:#111;color:#fff}
.download-btn.android{background:var(--brand-red);color:#fff}
.download-btn.android:hover{background:var(--brand-red-dark)}
.download-btn.pc{background:#0b5ed7;color:#fff}
.download-btn.pc:hover{background:#0949ad}

/* ===== Article ===== */
.article{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);max-width:800px;margin:0 auto}
.article h1{font-size:30px;margin-bottom:12px;font-weight:700;letter-spacing:-.3px;font-family:var(--font-serif)}
.article .article-meta{font-size:13px;color:var(--text-muted);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.article .article-meta a{color:var(--brand-red)}
.article .article-content{font-size:17px;line-height:1.75;font-family:var(--font-serif)}
.article .article-content p{margin-bottom:18px}
.article .article-content img{border-radius:var(--radius-sm);margin:18px 0}
.article .article-content h2,.article .article-content h3{margin:28px 0 14px;font-family:var(--font-serif)}
.article .article-content a{color:var(--brand-red);text-decoration:underline}
.article .article-content a:hover{color:var(--brand-red-dark)}
.article-content{font-size:17px;line-height:1.75;word-break:break-word;color:var(--text);font-family:var(--font-serif)}
.article-content p{margin-bottom:18px}
.article-content img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:18px 0}
.article-content h2,.article-content h3,.article-content h4{margin:28px 0 14px;color:var(--text);font-family:var(--font-serif)}
.article-content ul,.article-content ol{margin:0 0 18px;padding-left:28px}
.article-content li{margin-bottom:6px}
.article-content blockquote{border-left:4px solid var(--brand-red);margin:18px 0;padding:10px 18px;background:#f9f9f9}
.article-content a{color:var(--brand-red);text-decoration:underline}
.article-content a:hover{color:var(--brand-red-dark)}
.article-content table{width:100%;border-collapse:collapse;margin:18px 0}
.article-content table td,.article-content table th{border:1px solid var(--border);padding:8px 12px}
.article-content iframe{max-width:100%}

/* ===== News list page ===== */
.filter-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.filter-tabs a{padding:6px 16px;border-radius:20px;font-size:13px;background:#fff;border:1px solid var(--border);color:var(--text-secondary);transition:all .15s;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.filter-tabs a:hover{border-color:var(--brand-red);color:var(--brand-red)}
.filter-tabs a.active{background:var(--brand-red);color:#fff;border-color:var(--brand-red)}

.news-list-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.news-list-card{display:block}
.news-list-card .news-img-wrap{width:100%;aspect-ratio:16/10;overflow:hidden;background:#eee;margin-bottom:12px}
.news-list-card img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.news-list-card:hover img{transform:scale(1.03)}
.news-list-card h3{font-family:var(--font-serif);font-size:17px;font-weight:700;line-height:1.25;color:#111;margin-bottom:8px}
.news-list-card:hover h3{color:var(--brand-red)}
.news-list-card .byline{font-size:11px;color:var(--brand-red);font-weight:700;text-transform:uppercase;letter-spacing:.3px}

/* ===== Pagination ===== */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:32px}
.pagination a,.pagination span{padding:8px 14px;border-radius:var(--radius-sm);font-size:14px;border:1px solid var(--border);background:#fff;font-weight:700}
.pagination .current{background:var(--brand-red);color:#fff;border-color:var(--brand-red)}
.pagination a:hover{border-color:var(--brand-red);color:var(--brand-red)}

/* ===== Comment section ===== */
.comment-section{margin-top:32px}
.comment-form textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;resize:vertical;min-height:80px;font-family:var(--font-sans);background:#fff;color:var(--text)}
.comment-form textarea:focus{outline:none;border-color:var(--brand-red)}
.comment-item{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--border)}
.comment-item .comment-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0}
.comment-item .comment-body{flex:1}
.comment-item .comment-author{font-weight:700;font-size:14px}
.comment-item .comment-author a:hover{color:var(--brand-red)}
.comment-item .comment-text{font-size:14px;color:var(--text-secondary);margin-top:4px}
.comment-item .comment-time{font-size:12px;color:var(--text-muted);margin-top:4px}

/* ===== User center ===== */
.user-header{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px;display:flex;gap:24px;align-items:center;margin-bottom:24px;box-shadow:var(--shadow)}
.user-header .user-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover}
.user-header h2{font-size:22px;margin-bottom:4px;font-weight:800}
.user-header .user-bio{color:var(--text-secondary);font-size:14px}
.user-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:2px solid var(--border)}
.user-tabs a{padding:12px 20px;font-weight:700;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;font-size:14px;text-transform:uppercase;letter-spacing:.4px}
.user-tabs a.active{color:var(--brand-red);border-color:var(--brand-red)}

/* ===== Admin/shared tables ===== */
.data-table{width:100%;background:#fff;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}
.data-table table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
.data-table th{background:#f5f5f5;font-weight:700;color:var(--text-secondary);font-size:13px}
.data-table tr:hover{background:#f9f9f9}

/* ===== Forms ===== */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;outline:none;transition:border-color .2s;font-family:var(--font-sans);background:#fff;color:var(--text)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--brand-red)}
.form-group textarea{min-height:120px;resize:vertical}

/* ===== Like buttons ===== */
.like-group{display:flex;gap:12px;align-items:center}
.like-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:14px;transition:all .15s;font-weight:600;color:var(--text-secondary)}
.like-btn:hover{border-color:var(--brand-red);color:var(--brand-red)}
.like-btn.liked{background:#fbe4e4;border-color:var(--brand-red);color:var(--brand-red)}
.like-btn.disliked{background:#fdecea;border-color:#c62828;color:#c62828}

/* ===== Footer ===== */
.footer{background:#000;color:#999;padding:40px 0 24px;margin-top:60px;font-family:var(--font-sans)}
.footer .container{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px}
.footer .logo{color:#fff;font-size:22px;margin-bottom:6px}
.footer p{font-size:13px;color:#888}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{font-size:13px;color:#999;font-weight:600}
.footer-links a:hover{color:#fff}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #333;margin-top:24px;font-size:12px;color:#666}

/* ===== Toast ===== */
.toast{position:fixed;top:80px;right:20px;padding:12px 24px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--border);color:#111;font-size:14px;z-index:9999;animation:slideIn .3s ease;box-shadow:var(--shadow-hover)}
.toast.success{background:#e8f5e9;border-color:#00c853;color:#1b5e20}
.toast.error{background:#fdecea;border-color:#c62828;color:#b71c1c}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ===== H5 player ===== */
.h5-player{width:100%;aspect-ratio:16/9;border:none;border-radius:var(--radius);background:#000}

/* ===== Mobile ===== */
@media(max-width:1024px){
  .home-hero{grid-template-columns:1fr}
  .latest-list{border-left:none;padding-left:0;margin-top:20px}
  .card-grid-4,.news-list-grid{grid-template-columns:repeat(3,1fr)}
  .grid-5{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  :root{--header-h:56px}
  .logo{font-size:22px}
  .logo small{display:none}
  .nav{display:none;position:fixed;top:var(--header-h);left:0;right:0;background:#000;flex-direction:column;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:99}
  .nav.open{display:flex}
  .nav a{padding:12px 16px;font-size:13px}
  .menu-toggle{display:block}
  .header-actions .search-toggle-form{display:none}
  .home-hero{grid-template-columns:1fr}
  .hero-featured h2{font-size:22px}
  .card-grid-4,.news-list-grid{grid-template-columns:repeat(2,1fr)}
  .grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr)}
  .game-header{flex-direction:column;align-items:flex-start}
  .article{padding:20px}
  .article h1{font-size:22px}
  .footer .container{flex-direction:column;text-align:center;align-items:center}
}
@media(max-width:480px){
  .card-grid-4,.news-list-grid{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr}
}