/* =============================================
   像素游戏 · 复古街机 - 主题样式
   Game Website - Arcade Pixel Theme
   ============================================= */

/* --- Google Font: Press Start 2P (像素字体) --- */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* --- 全局重置与基础 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    background: #FFD700;
    color: #1A1A2E;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #1A1A2E;
    color: #E2E8F0;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* --- CRT 扫描线叠加层 --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
}

/* --- 背景网格装饰 --- */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* =============================================
   像素字体工具类
   ============================================= */
.pixel-font {
    font-family: 'Press Start 2P', monospace;
    letter-spacing: 0;
}

.pixel-mono {
    font-family: 'VT323', 'Courier New', monospace;
}

/* =============================================
   导航栏 (Arcade Cabinet Top)
   ============================================= */
.navbar {
    background: #16213E;
    border-bottom: 3px solid #FFD700;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 0 #0F3460, 0 6px 12px rgba(0, 0, 0, 0.3);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.navbar-brand {
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    color: #FFD700 !important;
    text-decoration: none;
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 2px 2px 0 #B8860B;
    transition: text-shadow 0.2s;
}

.navbar-brand:hover {
    text-shadow: 3px 3px 0 #B8860B, 0 0 8px rgba(255, 215, 0, 0.4);
}

.navbar-brand .brand-icon {
    font-size: 20px;
}

.nav-link {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #A0AEC0 !important;
    text-decoration: none;
    padding: 16px 12px;
    display: inline-block;
    position: relative;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #FFD700 !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #FFD700;
    transform: scaleX(0);
    transition: transform 0.2s;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

/* 下拉菜单 */
.dropdown-menu {
    background: #16213E;
    border: 2px solid #FFD700;
    border-radius: 0;
    padding: 4px;
    margin-top: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.dropdown-item {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #A0AEC0;
    padding: 10px 14px;
    border-radius: 0;
    transition: all 0.15s;
}

.dropdown-item:hover {
    background: #FFD700;
    color: #1A1A2E;
}

/* =============================================
   主容器
   ============================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

main.container {
    padding-top: 32px;
    padding-bottom: 48px;
    min-height: calc(100vh - 200px);
}

/* =============================================
   像素卡片 (Arcade Cabinet)
   ============================================= */
.card {
    background: #16213E;
    border: 2px solid #2D3748;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    position: relative;
}

.card:hover {
    border-color: #FFD700;
    box-shadow: 6px 6px 0 rgba(255, 215, 0, 0.15);
    transform: translate(-1px, -1px);
}

/* 卡片顶部装饰线 */
.card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg, #FFD700, #FF4757, #2ED573, #3498FF);
    opacity: 0;
    transition: opacity 0.3s;
}

.card:hover::before {
    opacity: 1;
}

.card-header {
    background: #1A1A2E;
    border-bottom: 2px solid #2D3748;
    padding: 14px 20px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-body {
    padding: 20px;
}

.card-footer {
    background: #1A1A2E;
    border-top: 2px solid #2D3748;
    padding: 14px 20px;
}

/* =============================================
   像素按钮
   ============================================= */
.btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
    transition: all 0.1s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
}

/* 按下效果 */
.btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.btn-primary {
    background: #FFD700;
    color: #1A1A2E;
    border-color: #B8860B;
}

.btn-primary:hover {
    background: #FFC000;
    color: #1A1A2E;
    border-color: #B8860B;
    box-shadow: 4px 4px 0 rgba(255, 215, 0, 0.3);
    transform: translate(-1px, -1px);
}

.btn-primary:active {
    transform: translate(2px, 2px);
}

.btn-outline-primary {
    background: transparent;
    color: #FFD700;
    border-color: #FFD700;
}

.btn-outline-primary:hover {
    background: #FFD700;
    color: #1A1A2E;
    box-shadow: 4px 4px 0 rgba(255, 215, 0, 0.3);
    transform: translate(-1px, -1px);
}

.btn-secondary {
    background: #2D3748;
    color: #A0AEC0;
    border-color: #4A5568;
}

.btn-secondary:hover {
    background: #4A5568;
    color: #E2E8F0;
    border-color: #A0AEC0;
}

.btn-outline-secondary {
    background: transparent;
    color: #A0AEC0;
    border-color: #4A5568;
}

.btn-outline-secondary:hover {
    background: #2D3748;
    color: #FFD700;
    border-color: #FFD700;
}

.btn-danger {
    background: #FF4757;
    color: #FFFFFF;
    border-color: #C0392B;
}

.btn-danger:hover {
    background: #E84118;
    color: #FFFFFF;
}

.btn-success {
    background: #2ED573;
    color: #1A1A2E;
    border-color: #1B9F4A;
}

.btn-success:hover {
    background: #26B863;
    color: #1A1A2E;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 12px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 8px;
}

.btn-block {
    width: 100%;
}

/* =============================================
   表单
   ============================================= */
.form-control {
    background: #1A1A2E;
    border: 2px solid #2D3748;
    border-radius: 0;
    padding: 12px 14px;
    font-size: 14px;
    color: #E2E8F0;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 16px;
    transition: all 0.2s;
}

.form-control:focus {
    background: #16213E;
    border-color: #FFD700;
    color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15);
    outline: none;
}

.form-control::placeholder {
    color: #4A5568;
    font-family: 'VT323', monospace;
    font-size: 16px;
}

.form-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #A0AEC0;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-check-input {
    border: 2px solid #2D3748;
    border-radius: 0;
    background: #1A1A2E;
    cursor: pointer;
}

.form-check-input:checked {
    background: #FFD700;
    border-color: #FFD700;
}

.form-check-label {
    font-size: 13px;
    color: #A0AEC0;
}

.input-group-text {
    background: #1A1A2E;
    border: 2px solid #2D3748;
    border-radius: 0;
    color: #FFD700;
    font-family: 'VT323', monospace;
    font-size: 16px;
}

/* =============================================
   表格
   ============================================= */
.table {
    background: #16213E;
    border: 2px solid #2D3748;
    margin-bottom: 0;
    color: #E2E8F0;
}

.table th {
    background: #1A1A2E;
    border-bottom: 2px solid #2D3748;
    border-top: none;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 16px;
}

.table td {
    border-bottom: 1px solid #2D3748;
    padding: 12px 16px;
    vertical-align: middle;
    font-size: 14px;
}

.table tr:hover {
    background: rgba(255, 215, 0, 0.05);
}

.table-responsive {
    border: none;
}

/* =============================================
   徽章
   ============================================= */
.badge {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    padding: 6px 10px;
    border-radius: 0;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}

.badge-primary {
    background: #FFD700;
    color: #1A1A2E;
    border-color: #B8860B;
}

.badge-secondary {
    background: #2D3748;
    color: #A0AEC0;
    border-color: #4A5568;
}

.badge-success {
    background: #2ED573;
    color: #1A1A2E;
    border-color: #1B9F4A;
}

.badge-danger {
    background: #FF4757;
    color: #FFFFFF;
    border-color: #C0392B;
}

.badge-warning {
    background: #FFD700;
    color: #1A1A2E;
    border-color: #B8860B;
}

.badge-info {
    background: #3498FF;
    color: #FFFFFF;
    border-color: #2176CC;
}

/* =============================================
   首页英雄区域 (Arcade Marquee)
   ============================================= */
.hero-section {
    background: linear-gradient(135deg, #16213E 0%, #1A1A2E 50%, #0F3460 100%);
    border: 3px solid #FFD700;
    border-radius: 0;
    padding: 60px 32px;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 0 #0F3460, 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* 英雄区装饰 - 街机灯带 */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        #FF4757 0px, #FF4757 20px,
        #FFD700 20px, #FFD700 40px,
        #2ED573 40px, #2ED573 60px,
        #3498FF 60px, #3498FF 80px
    );
    animation: marqueeLights 1s linear infinite;
}

@keyframes marqueeLights {
    0% { background-position: 0 0; }
    100% { background-position: 80px 0; }
}

/* 英雄区装饰 - 角标 */
.hero-section::after {
    content: '★';
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 16px;
    color: #FFD700;
    opacity: 0.3;
    animation: blink 1s step-end infinite;
}

.hero-section h1 {
    font-family: 'Press Start 2P', monospace;
    font-size: 28px;
    font-weight: 400;
    color: #FFD700;
    margin-bottom: 16px;
    text-shadow: 3px 3px 0 #B8860B, 0 0 20px rgba(255, 215, 0, 0.3);
    line-height: 1.4;
}

.hero-section p {
    font-family: 'VT323', monospace;
    font-size: 22px;
    color: #A0AEC0;
    margin-bottom: 28px;
    letter-spacing: 2px;
}

/* =============================================
   游戏卡片 (Game Cartridge)
   ============================================= */
.game-card {
    border-radius: 0;
    overflow: hidden;
    border: 2px solid #2D3748;
    background: #16213E;
    transition: all 0.2s;
}

.game-card:hover {
    border-color: #FFD700;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(255, 215, 0, 0.2);
}

.game-card .card-img-top {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1A1A2E;
    border-bottom: 2px solid #2D3748;
    position: relative;
    overflow: hidden;
}

.game-card .card-img-top img {
    width: 64px;
    height: 64px;
    transition: transform 0.3s;
    image-rendering: pixelated;
}

.game-card:hover .card-img-top img {
    transform: scale(1.1) rotate(-5deg);
}

/* 游戏图标容器 - 像素背景装饰 */
.game-card .card-img-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.game-card:hover .card-img-top::after {
    opacity: 1;
}

.game-card .card-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #FFD700;
    margin-bottom: 10px;
    line-height: 1.5;
}

.game-card .card-text {
    font-size: 13px;
    color: #A0AEC0;
    line-height: 1.5;
}

/* =============================================
   游戏区域
   ============================================= */
.game-area {
    min-height: 400px;
    background: #1A1A2E;
    border: 2px solid #2D3748;
    padding: 24px;
}

.game-input-area {
    max-width: 400px;
    margin: 0 auto;
}

/* =============================================
   统计卡片
   ============================================= */
.stat-card {
    background: #16213E;
    border: 2px solid #2D3748;
    border-radius: 0;
    padding: 28px 20px;
    text-align: center;
    position: relative;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.stat-card h2 {
    font-family: 'VT323', monospace;
    font-size: 48px;
    color: #FFD700;
    margin-bottom: 4px;
    text-shadow: 2px 2px 0 #B8860B;
}

.stat-card p {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #A0AEC0;
    margin: 0;
    letter-spacing: 1px;
}

/* =============================================
   排行榜
   ============================================= */
.leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #2D3748;
    transition: background 0.2s;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.leaderboard-item:hover {
    background: rgba(255, 215, 0, 0.05);
}

.rank-badge {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    font-weight: 400;
    margin-right: 14px;
    border: 2px solid transparent;
}

.rank-1 {
    background: #1A1A2E;
    color: #FFD700;
    border-color: #FFD700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.rank-2 {
    background: #1A1A2E;
    color: #C0C0C0;
    border-color: #C0C0C0;
}

.rank-3 {
    background: #1A1A2E;
    color: #CD7F32;
    border-color: #CD7F32;
}

.rank-other {
    background: #1A1A2E;
    color: #4A5568;
    border-color: #2D3748;
}

/* =============================================
   分页
   ============================================= */
.pagination {
    margin-top: 24px;
    gap: 4px;
}

.page-link {
    background: #16213E;
    border: 2px solid #2D3748;
    border-radius: 0;
    color: #A0AEC0;
    padding: 10px 16px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    transition: all 0.2s;
}

.page-link:hover {
    background: #FFD700;
    color: #1A1A2E;
    border-color: #FFD700;
}

.page-item.active .page-link {
    background: #FFD700;
    border-color: #FFD700;
    color: #1A1A2E;
}

.page-item.disabled .page-link {
    background: #1A1A2E;
    color: #4A5568;
    border-color: #2D3748;
    opacity: 0.5;
}

/* =============================================
   页脚 (Arcade Cabinet Bottom)
   ============================================= */
footer {
    background: #16213E;
    border-top: 3px solid #FFD700;
    padding: 40px 0 32px;
    margin-top: 48px;
    position: relative;
    box-shadow: 0 -4px 0 #0F3460;
}

/* 页脚顶部装饰灯带 */
footer::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        #FF4757 0px, #FF4757 15px,
        transparent 15px, transparent 30px,
        #2ED573 30px, #2ED573 45px,
        transparent 45px, transparent 60px,
        #3498FF 60px, #3498FF 75px,
        transparent 75px, transparent 90px
    );
}

footer h5 {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #FFD700;
    margin-bottom: 16px;
}

footer h6 {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #A0AEC0;
    margin-bottom: 14px;
    text-transform: uppercase;
}

footer a {
    color: #A0AEC0;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

footer a:hover {
    color: #FFD700;
    text-decoration: none;
}

footer p {
    font-size: 13px;
    color: #A0AEC0;
}

footer hr {
    border-color: #2D3748 !important;
    opacity: 1;
    margin: 24px 0;
}

/* =============================================
   提示框
   ============================================= */
.alert {
    border-radius: 0;
    border: 2px solid transparent;
    font-size: 13px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.alert-success {
    background: #1A1A2E;
    border-color: #2ED573;
    color: #2ED573;
}

.alert-danger {
    background: #1A1A2E;
    border-color: #FF4757;
    color: #FF4757;
}

.alert-warning {
    background: #1A1A2E;
    border-color: #FFD700;
    color: #FFD700;
}

.alert-info {
    background: #1A1A2E;
    border-color: #3498FF;
    color: #3498FF;
}

.alert-dismissible .btn-close {
    filter: invert(1) brightness(0.8);
}

/* =============================================
   模态框
   ============================================= */
.modal-content {
    background: #16213E;
    border: 2px solid #FFD700;
    border-radius: 0;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
}

.modal-header {
    border-bottom: 2px solid #2D3748;
    padding: 16px 20px;
}

.modal-header .btn-close {
    filter: invert(1) brightness(0.8);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 2px solid #2D3748;
    padding: 16px 20px;
}

.modal-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #FFD700;
}

/* =============================================
   游戏特定样式
   ============================================= */
.guess-number-display {
    font-family: 'VT323', monospace;
    font-size: 80px;
    color: #FFD700;
    text-align: center;
    padding: 24px;
    text-shadow: 3px 3px 0 #B8860B;
}

.game-hint {
    font-family: 'VT323', monospace;
    font-size: 22px;
    color: #A0AEC0;
    text-align: center;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.game-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 24px 0;
}

.game-stat {
    text-align: center;
}

.game-stat-value {
    font-family: 'VT323', monospace;
    font-size: 36px;
    color: #FFD700;
    text-shadow: 2px 2px 0 #B8860B;
}

.game-stat-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #A0AEC0;
    letter-spacing: 1px;
}

/* 记忆卡片游戏 */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.memory-card {
    aspect-ratio: 1;
    background: #1A1A2E;
    border: 2px solid #2D3748;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.memory-card:hover {
    border-color: #FFD700;
    background: #16213E;
    box-shadow: 4px 4px 0 rgba(255, 215, 0, 0.15);
}

.memory-card.flipped {
    background: #16213E;
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.memory-card.matched {
    background: #1A1A2E;
    border-color: #2ED573;
    cursor: default;
    box-shadow: 0 0 8px rgba(46, 213, 115, 0.3);
}

/* 2048游戏 */
.game-2048-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 400px;
    margin: 0 auto;
    background: #1A1A2E;
    border: 2px solid #2D3748;
    padding: 8px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.tile-2048 {
    aspect-ratio: 1;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'VT323', monospace;
    font-size: 28px;
    font-weight: 400;
    transition: all 0.1s ease;
    border: 2px solid transparent;
}

.tile-0 { background: #1A1A2E; color: transparent; border-color: #2D3748; }
.tile-2 { background: #16213E; color: #E2E8F0; border-color: #2D3748; }
.tile-4 { background: #1A2A4E; color: #FFD700; border-color: #FFD700; }
.tile-8 { background: #2A1A2E; color: #FFD700; border-color: #FF4757; }
.tile-16 { background: #3A1A2E; color: #FFFFFF; border-color: #FF4757; }
.tile-32 { background: #4A1A2E; color: #FFFFFF; border-color: #FF4757; }
.tile-64 { background: #5A1A2E; color: #FFFFFF; border-color: #FF4757; }
.tile-128 { background: #2A2A1E; color: #FFD700; border-color: #FFD700; font-size: 24px; }
.tile-256 { background: #3A3A1E; color: #FFD700; border-color: #FFD700; font-size: 24px; }
.tile-512 { background: #4A3A1E; color: #FFD700; border-color: #FFD700; font-size: 24px; }
.tile-1024 { background: #4A2A1E; color: #FFD700; border-color: #FFD700; font-size: 20px; }
.tile-2048 { background: #1A2A1E; color: #2ED573; border-color: #2ED573; font-size: 20px; }

/* 打字游戏 */
.typing-text {
    font-family: 'VT323', monospace;
    font-size: 28px;
    letter-spacing: 3px;
    line-height: 1.8;
    text-align: center;
    padding: 24px;
    background: #1A1A2E;
    border: 2px solid #2D3748;
    margin-bottom: 24px;
}

.typing-text .correct {
    color: #2ED573;
}

.typing-text .incorrect {
    color: #FF4757;
    text-decoration: underline;
    text-decoration-style: wavy;
}

.typing-text .current {
    background: rgba(255, 215, 0, 0.2);
    padding: 2px 6px;
    border: 1px solid #FFD700;
}

/* 数学游戏 */
.math-question {
    font-family: 'VT323', monospace;
    font-size: 56px;
    color: #FFD700;
    text-align: center;
    padding: 32px;
    background: #1A1A2E;
    border: 2px solid #2D3748;
    margin-bottom: 24px;
    text-shadow: 2px 2px 0 #B8860B;
}

.math-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.math-option {
    padding: 16px;
    font-family: 'VT323', monospace;
    font-size: 28px;
    background: #16213E;
    border: 2px solid #2D3748;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    color: #E2E8F0;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.math-option:hover {
    border-color: #FFD700;
    background: #1A2A4E;
    box-shadow: 4px 4px 0 rgba(255, 215, 0, 0.15);
    transform: translate(-1px, -1px);
}

.math-option:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.math-option.correct {
    border-color: #2ED573;
    background: #1A2A1E;
    color: #2ED573;
}

.math-option.incorrect {
    border-color: #FF4757;
    background: #2A1A1E;
    color: #FF4757;
}

/* =============================================
   游戏结束模态框
   ============================================= */
.game-over-content {
    text-align: center;
    padding: 20px;
}

.game-over-content h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    color: #FFD700;
    margin-bottom: 16px;
    text-shadow: 2px 2px 0 #B8860B;
    animation: blink 1s step-end infinite;
}

.game-over-score {
    font-family: 'VT323', monospace;
    font-size: 60px;
    color: #FFD700;
    margin: 16px 0;
    text-shadow: 3px 3px 0 #B8860B;
}

.game-over-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 24px 0;
}

/* =============================================
   响应式
   ============================================= */
@media (max-width: 768px) {
    .hero-section {
        padding: 40px 20px;
    }

    .hero-section h1 {
        font-size: 18px;
    }

    .hero-section p {
        font-size: 18px;
    }

    .navbar-brand {
        font-size: 11px;
    }

    .nav-link {
        font-size: 7px;
        padding: 12px 8px;
    }

    .game-stats {
        gap: 20px;
    }

    .game-stat-value {
        font-size: 28px;
    }

    .memory-grid {
        max-width: 300px;
    }

    .game-2048-grid {
        max-width: 300px;
    }

    .game-card .card-title {
        font-size: 9px;
    }
}

/* =============================================
   像素动画
   ============================================= */

/* 闪烁 (用于街机灯效) */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 像素弹出 */
@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.pop-in {
    animation: popIn 0.3s steps(5);
}

/* 像素淡入 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s steps(5);
}

/* 像素弹出 (点击反馈) */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.pop {
    animation: pop 0.2s steps(3);
}

/* 像素抖动 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.shake {
    animation: shake 0.3s steps(3);
}

/* 扫描线脉冲 */
@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* 游戏标题闪烁 */
@keyframes titleGlow {
    0%, 100% { text-shadow: 3px 3px 0 #B8860B, 0 0 20px rgba(255, 215, 0, 0.3); }
    50% { text-shadow: 3px 3px 0 #B8860B, 0 0 40px rgba(255, 215, 0, 0.6); }
}

/* =============================================
   空状态
   ============================================= */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: #4A5568;
}

.empty-state h4 {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #A0AEC0;
    margin-top: 16px;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: #4A5568;
    margin-bottom: 20px;
}

/* =============================================
   面包屑
   ============================================= */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}

.breadcrumb-item a {
    color: #FFD700;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.breadcrumb-item a:hover {
    color: #FFC000;
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #A0AEC0;
    font-size: 13px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #4A5568;
    content: '>';
}

/* =============================================
   下拉菜单 (导航)
   ============================================= */
.dropdown-menu {
    background: #16213E;
    border: 2px solid #FFD700;
    border-radius: 0;
    padding: 4px;
    margin-top: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.dropdown-item {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #A0AEC0;
    padding: 10px 14px;
    border-radius: 0;
    transition: all 0.15s;
}

.dropdown-item:hover {
    background: #FFD700;
    color: #1A1A2E;
}

/* =============================================
   游戏统计卡片
   ============================================= */
.stat-card.bg-primary,
.stat-card.bg-success,
.stat-card.bg-warning {
    border: 2px solid #FFD700;
}

.stat-card.bg-primary {
    background: #16213E !important;
    color: #E2E8F0;
}

.stat-card.bg-success {
    background: #16213E !important;
    color: #E2E8F0;
}

.stat-card.bg-warning {
    background: #16213E !important;
    color: #E2E8F0;
}

.stat-card i {
    color: #FFD700;
}

/* =============================================
   列表组
   ============================================= */
.list-group-item {
    background: #16213E;
    border: 1px solid #2D3748;
    color: #E2E8F0;
}

.list-group-item:hover {
    background: #1A2A4E;
    border-color: #FFD700;
}

.list-group-flush .list-group-item {
    border-left: none;
    border-right: none;
}

/* =============================================
   页脚图标颜色
   ============================================= */
footer .bi {
    color: #FFD700;
}

/* =============================================
   关于页面特殊样式
   ============================================= */
.about-card .display-1,
.about-card .bi {
    color: #FFD700;
}

/* =============================================
   NEON//PLAY - cyberpunk theme override
   ============================================= */
:root {
    --void: #070811;
    --surface: rgba(14, 17, 35, 0.82);
    --surface-bright: rgba(21, 26, 53, 0.92);
    --line: rgba(0, 240, 255, 0.24);
    --cyan: #00f0ff;
    --pink: #ff2d78;
    --violet: #a855f7;
    --ink: #e8f7ff;
    --muted: #94a7bd;
    --muted-readable: #c2d1e4;
}

* { scrollbar-color: var(--cyan) var(--void); scrollbar-width: thin; }
body {
    font-family: 'Rajdhani', 'Microsoft YaHei', sans-serif;
    color: var(--ink);
    background: radial-gradient(circle at 18% 0%, #192451 0, transparent 34rem), radial-gradient(circle at 85% 24%, #380e3d 0, transparent 28rem), var(--void);
    letter-spacing: .02em;
}
body::before { background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0, 240, 255, .025) 4px); opacity: .55; }
body::after { display: none; }
.site-shell { position: relative; z-index: 1; min-height: 100vh; }
#cyber-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .62; }
.cyber-grid { position: fixed; inset: auto -20vw 0; height: 45vh; z-index: 0; pointer-events: none; transform: perspective(440px) rotateX(62deg); transform-origin: bottom; background-image: linear-gradient(rgba(0,240,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,.18) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to top, #000, transparent); opacity: .38; }
.cursor-glow { position: fixed; z-index: 0; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(0, 240, 255, .1), transparent 68%); transform: translate(-50%, -50%); transition: opacity .25s ease; }

.pixel-font, .navbar-brand, .nav-link, .btn, .card-header, .form-label, .badge, .page-link, footer h5, footer h6 { font-family: 'Orbitron', sans-serif; }
.pixel-mono { font-family: 'Rajdhani', monospace; }
.container { max-width: 1280px; }
main.container { padding-top: 46px; min-height: calc(100vh - 280px); }

.navbar { background: rgba(7, 8, 17, .72); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,45,120,.25), 0 14px 36px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
.navbar .container { min-height: 72px; }
.navbar-brand { font-size: 16px; padding: 0; gap: 11px; color: var(--ink) !important; text-shadow: none; letter-spacing: .08em; }
.navbar-brand:hover { text-shadow: 0 0 16px rgba(0,240,255,.7); }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; font-size: 10px; color: var(--void); background: var(--cyan); clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); box-shadow: 0 0 16px rgba(0,240,255,.7); }
.brand-accent { color: var(--pink); margin: 0 3px; }
.nav-link { font-size: 10px; padding: 25px 13px; color: var(--muted) !important; letter-spacing: .07em; }
.nav-link:hover { color: var(--cyan) !important; }
.nav-link::after { bottom: 15px; left: 13px; right: 13px; height: 1px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.dropdown-menu { background: rgba(10,12,27,.96); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 18px 45px rgba(0,0,0,.42); }
.dropdown-item { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 16px; color: var(--muted); }
.dropdown-item:hover { background: rgba(0,240,255,.1); color: var(--cyan); }

.card, .game-card, .stat-card { background: linear-gradient(145deg, rgba(20,24,48,.9), rgba(9,11,26,.88)); border: 1px solid rgba(123,146,195,.24); border-radius: 5px; box-shadow: 0 15px 42px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.045); }
.card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: 0 19px 48px rgba(0,0,0,.3), 0 0 24px rgba(0,240,255,.09); }
.card::before { height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent); }
.card-header { background: rgba(4,6,17,.34); border-bottom: 1px solid rgba(123,146,195,.2); padding: 16px 20px; font-size: 10px; color: var(--cyan); letter-spacing: .09em; }
.card-body { padding: 24px; }
.card-footer { background: transparent; border-top: 0; }

.btn { border-radius: 3px; font-size: 10px; letter-spacing: .08em; padding: 12px 20px; box-shadow: none; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-primary { color: var(--void); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 18px rgba(0,240,255,.22); }
.btn-primary:hover { color: var(--void); background: #62f7ff; border-color: #62f7ff; transform: translateY(-2px); box-shadow: 0 0 28px rgba(0,240,255,.48); }
.btn-outline-primary { color: var(--cyan); border-color: rgba(0,240,255,.58); background: rgba(0,240,255,.04); }
.btn-outline-primary:hover { color: var(--void); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 24px rgba(0,240,255,.35); }
.btn-secondary, .btn-outline-secondary { color: var(--muted); background: transparent; border-color: rgba(148,167,189,.35); }
.btn-secondary:hover, .btn-outline-secondary:hover { color: var(--ink); background: rgba(148,167,189,.14); border-color: var(--muted); }

.hero-section { min-height: 450px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: clamp(44px, 7vw, 96px); margin-bottom: 72px; border: 1px solid rgba(0,240,255,.36); border-radius: 6px; background: linear-gradient(105deg, rgba(8,11,26,.94) 0%, rgba(15,21,46,.8) 55%, rgba(76,10,66,.48) 100%); box-shadow: 0 0 0 1px rgba(255,45,120,.1), 0 28px 70px rgba(0,0,0,.32); }
.hero-section::before { inset: 0; height: auto; background: linear-gradient(110deg, transparent 52%, rgba(0,240,255,.12) 52.1%, transparent 52.4%), linear-gradient(160deg, transparent 75%, rgba(255,45,120,.16) 75.1%, transparent 75.4%); animation: none; }
.hero-section::after { content: 'SYSTEM ONLINE'; right: 28px; bottom: 22px; font-family: Orbitron, sans-serif; font-size: 9px; color: var(--pink); letter-spacing: .14em; animation: neonPulse 2.4s ease-in-out infinite; }
.hero-section h1 { max-width: 780px; font-family: Orbitron, sans-serif; font-size: clamp(32px, 5vw, 66px); color: var(--ink); line-height: 1.12; letter-spacing: -.035em; text-shadow: none; }
.hero-section h1::first-letter { color: var(--cyan); }
.hero-section p { max-width: 540px; font-family: Rajdhani, sans-serif; font-size: 22px; color: var(--muted); letter-spacing: .035em; }
.hero-section .btn-lg { padding: 16px 26px; font-size: 11px; }
.hero-kicker, .section-label, .game-index { display: block; font-family: Orbitron, sans-serif; font-size: 9px; font-weight: 600; color: var(--pink); letter-spacing: .14em; }
.hero-kicker { margin-bottom: 20px; color: var(--cyan); }
.content-section { margin-bottom: 76px; }
.section-heading { margin-bottom: 24px; }.section-heading h2, .page-intro h1 { margin: 7px 0 0; font-family: Orbitron, sans-serif; font-size: clamp(22px, 3vw, 34px); font-weight: 600; color: var(--ink); letter-spacing: -.035em; }
.section-link { font-family: Orbitron, sans-serif; font-size: 9px; color: var(--cyan); text-decoration: none; letter-spacing: .08em; }.section-link:hover { color: var(--pink); }.section-link span { margin-left: 5px; font-size: 15px; }
.page-intro { margin: 8px 0 44px; }.page-intro p { margin: 12px 0 0; color: var(--muted); font-size: 20px; }

.game-card { overflow: hidden; height: 100%; }
.game-card .card-img-top { height: 184px; background: radial-gradient(circle at 50% 42%, rgba(0,240,255,.13), transparent 38%), linear-gradient(145deg, #111a38, #0a0c1e); border-bottom: 1px solid rgba(123,146,195,.2); }
.game-card .card-img-top::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(0,240,255,.16); clip-path: polygon(0 0, 84% 0, 100% 20%, 100% 100%, 16% 100%, 0 80%); }
.game-card .card-img-top img { width: 78px !important; height: 78px !important; filter: drop-shadow(0 0 12px rgba(0,240,255,.42)); }
.game-card .card-title { color: var(--ink); font-family: Orbitron, sans-serif; font-size: 12px; }
.game-card .card-text { font-size: 16px; color: var(--muted); }
.game-card:hover .card-img-top { background: radial-gradient(circle at 50% 42%, rgba(255,45,120,.19), transparent 43%), linear-gradient(145deg, #141d41, #0b0d20); }
.game-index { margin-bottom: 12px; color: var(--pink); font-size: 8px; }.game-launch { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: 12px; border-top: 1px solid rgba(123,146,195,.18); color: var(--cyan); font-family: Orbitron, sans-serif; font-size: 9px; letter-spacing: .08em; text-decoration: none; }.game-launch:hover { color: var(--pink); }.game-launch span { font-size: 18px; }
.score-table-card { overflow: hidden; }.score-panel .table a { color: var(--cyan); text-decoration: none; }.score-panel .table a:hover { color: var(--pink); }.score-value { color: var(--cyan) !important; font-family: Orbitron, sans-serif; font-size: 13px; }.score-time { color: #718097 !important; font-size: 14px; }
.auth-shell { max-width: 470px; margin: 42px auto; }.auth-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border: 1px solid var(--cyan); color: var(--cyan); font-family: Orbitron, sans-serif; font-size: 17px; clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); box-shadow: 0 0 20px rgba(0,240,255,.22); }.auth-title { font-family: Orbitron, sans-serif; color: var(--ink); font-size: 19px; }.auth-subtitle { color: var(--muted); font-size: 18px; }.auth-note { color: var(--muted); font-size: 16px; }.auth-note a { color: var(--cyan); text-decoration: none; }.auth-note a:hover { color: var(--pink); }
.game-page-title { color: var(--ink); font-family: Orbitron, sans-serif; font-size: 18px; }.game-meta-card p { color: var(--muted); font-size: 17px; }.best-score { color: var(--cyan); font-family: Orbitron, sans-serif; font-size: 44px; text-shadow: 0 0 18px rgba(0,240,255,.25); }.best-label { color: var(--muted); font-family: Orbitron, sans-serif; font-size: 8px; }

.table { background: transparent; border: 0; color: var(--ink); }
.table th { background: rgba(0,240,255,.055); border-color: rgba(123,146,195,.18); font-family: Orbitron, sans-serif; color: var(--cyan); }
.table td { border-color: rgba(123,146,195,.16); color: var(--muted); }
.table tr:hover { background: rgba(0,240,255,.045); }
.rank-badge { border-radius: 50%; border: 1px solid rgba(148,167,189,.36); background: rgba(148,167,189,.08); color: var(--muted); }
.rank-1 { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(0,240,255,.28); }
.rank-2 { color: #d7def0; border-color: #d7def0; }
.rank-3 { color: var(--pink); border-color: var(--pink); }
.leaderboard-item { border-color: rgba(123,146,195,.18); padding: 15px 20px; }
.leaderboard-item:hover { background: rgba(0,240,255,.045); }

.form-control, .input-group-text { background: rgba(4,6,17,.55); border-color: rgba(123,146,195,.3); border-radius: 3px; color: var(--ink); font-family: Rajdhani, sans-serif; font-size: 18px; }
.form-control:focus { background: rgba(8,11,26,.9); border-color: var(--cyan); color: var(--ink); box-shadow: 0 0 0 3px rgba(0,240,255,.12); }
.form-control::placeholder { color: #65748c; font-family: Rajdhani, sans-serif; }
.form-label { color: var(--cyan); font-size: 9px; }
.list-group-item { background: transparent; border-color: rgba(123,146,195,.18); color: var(--ink); }
.list-group-item:hover { background: rgba(0,240,255,.045); border-color: rgba(0,240,255,.24); }

footer { background: rgba(6,7,16,.76); border-top: 1px solid var(--line); box-shadow: 0 -1px 0 rgba(255,45,120,.2); padding: 48px 0 30px; }
footer::before { height: 1px; background: linear-gradient(90deg, transparent, var(--pink), var(--cyan), transparent); }
footer h5 { color: var(--ink); font-size: 15px; }
footer h6 { color: var(--cyan); font-size: 12px; }
footer a, footer p { color: var(--muted); font-size: 16px; }
footer a:hover { color: var(--cyan); }
footer hr { border-color: rgba(123,146,195,.18) !important; }

.alert { background: rgba(10,13,29,.95); border-radius: 3px; font-family: Rajdhani, sans-serif; font-size: 18px; }
.alert-success { border-color: var(--cyan); color: var(--cyan); }.alert-danger { border-color: var(--pink); color: var(--pink); }.alert-warning { border-color: #ffc857; color: #ffc857; }
.empty-state { color: var(--muted); }.empty-state h4 { color: var(--cyan); }

/* Legacy game templates contain low-contrast inline grays from the former light theme. */
.text-muted,
[style*="color: #4A5568"], [style*="color:#4A5568"],
[style*="color: #64748B"], [style*="color:#64748B"],
[style*="color: #94A3B8"], [style*="color:#94A3B8"],
[style*="color: #A0AEC0"], [style*="color:#A0AEC0"] { color: var(--muted-readable) !important; }
.game-card .game-launch { font-size: 14px; font-weight: 600; }.game-card .game-launch span { font-size: 21px; }
.game-hint, .game-stat-label { color: var(--muted-readable); }.game-stat-value { color: var(--cyan); }
footer .text-muted, footer p, footer a { color: #d4e1f2 !important; }
footer h5 { font-size: 20px; } footer h6 { font-size: 16px; }

/* Load-order-safe contrast floor for old per-game templates, including mobile templates. */
main p, main small, main .text-muted, main .game-hint, main .game-stat-label,
main .instruction-text, main .game-description, main .help-text { color: var(--muted-readable) !important; }
main [style*="color: #4A5568"], main [style*="color:#4A5568"],
main [style*="color: #64748B"], main [style*="color:#64748B"],
main [style*="color: #94A3B8"], main [style*="color:#94A3B8"],
main [style*="color: #A0AEC0"], main [style*="color:#A0AEC0"] { color: var(--muted-readable) !important; }

/* A single readable floor for labels and secondary content throughout the site. */
small, .form-label, .game-stat-label, .badge, .page-link, .breadcrumb-item, .section-label { font-size: max(13px, 0.78rem); }
.dropdown-item { font-size: 17px; }.card-header { font-size: 13px; }.game-card .card-text { font-size: 17px; }

/* Typing words must retain contrast on both desktop and mobile game shells. */
.typing-text, #typing-text { color: #f3fbff !important; background: #101d38 !important; border: 1px solid rgba(0,240,255,.58) !important; text-shadow: none; }
.typing-text .correct, #typing-text .correct { color: #79ffaf !important; }.typing-text .incorrect, #typing-text .incorrect { color: #ff91b6 !important; }.typing-text .current, #typing-text .current { color: #07131f !important; background: #a8f6ff !important; border-color: #00f0ff !important; }

/* New compact game modules. */
.reflex-board, .color-command-board { max-width: 520px; margin: 0 auto; text-align: center; }
.reflex-target { min-height: 280px; display: grid; place-items: center; padding: 28px; border: 1px solid rgba(123,146,195,.36); background: #18213d; color: var(--ink); font: 600 20px Rajdhani, sans-serif; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; user-select: none; }
.reflex-target.ready { background: #063e48; border-color: var(--cyan); color: #d9fdff; }.reflex-target.go { background: #17613f; border-color: #79ffaf; color: #effff5; }.reflex-target.too-soon { background: #601c44; border-color: var(--pink); color: #fff0f7; }
.reflex-result, .color-command-copy { min-height: 34px; margin: 18px 0; color: var(--muted-readable); font-size: 18px; }
.color-command-target { display: grid; place-items: center; min-height: 165px; margin-bottom: 18px; border: 1px solid rgba(123,146,195,.36); background: #153a66; color: #f7fbff; font: 700 30px Orbitron, sans-serif; letter-spacing: .08em; }
.color-command-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.color-command-options button { min-height: 68px; border: 1px solid rgba(123,146,195,.45); background: rgba(14,17,35,.88); color: var(--ink); font: 600 17px Rajdhani, sans-serif; cursor: pointer; }.color-command-options button:hover { border-color: var(--cyan); color: var(--cyan); }.color-command-options button:focus-visible, .reflex-target:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.target-arena,.orbit-arena { position:relative; max-width:520px; height:310px; margin:0 auto; overflow:hidden; border:1px solid rgba(0,240,255,.38); background:radial-gradient(circle at center,rgba(0,240,255,.1),transparent 48%),rgba(5,9,24,.85); }.pulse-target { position:absolute; left:48%; top:42%; width:52px; height:52px; border:5px solid var(--pink); border-radius:50%; background:rgba(255,45,120,.22); box-shadow:0 0 20px rgba(255,45,120,.65); cursor:pointer; }.pulse-target::after { content:''; position:absolute; inset:10px; border-radius:50%; background:var(--cyan); }.number-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:420px; margin:0 auto; }.number-grid button,.sequence-grid button { min-height:70px; border:1px solid rgba(0,240,255,.35); background:rgba(15,25,52,.9); color:var(--ink); font:600 22px Orbitron,sans-serif; cursor:pointer; }.number-grid button:hover,.sequence-grid button:hover { border-color:var(--cyan); color:var(--cyan); }.number-grid button.done { background:rgba(69,217,130,.25); color:#79ffaf; border-color:#79ffaf; }.sequence-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:360px; margin:0 auto; }.sequence-grid button { min-height:120px; }.sequence-grid button:nth-child(1){background:#173b65}.sequence-grid button:nth-child(2){background:#562356}.sequence-grid button:nth-child(3){background:#17533a}.sequence-grid button:nth-child(4){background:#62411d}.sequence-grid button.flash { filter:brightness(2); box-shadow:0 0 28px var(--cyan); }.scramble-word { max-width:470px; margin:0 auto; padding:30px; border:1px solid rgba(0,240,255,.35); background:rgba(12,24,51,.9); color:var(--cyan); font:600 42px Orbitron,sans-serif; letter-spacing:.14em; text-align:center; }.orbit-ship,.orbit-rock { position:absolute; transform:translate(-50%,-50%); font:600 40px Orbitron,sans-serif; }.orbit-ship { top:86%; color:var(--cyan); text-shadow:0 0 16px var(--cyan); }.orbit-rock { color:var(--pink); text-shadow:0 0 16px var(--pink); }

/* Homepage: rotating featured choices plus a free-form wall that shows every game. */
.showcase-heading { align-items: end; }.showcase-heading p { max-width: 420px; margin: 10px 0 0; color: var(--muted-readable); font-size: 18px; }
.featured-carousel { position: relative; min-height: 346px; overflow: hidden; border: 1px solid rgba(0,240,255,.38); background: linear-gradient(120deg, rgba(10,49,72,.72), rgba(18,13,49,.85)); box-shadow: 0 22px 54px rgba(0,0,0,.26); }
.featured-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr); opacity: 0; transform: translateX(16px); pointer-events: none; transition: opacity .45s ease, transform .45s ease; }.featured-slide.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.featured-art { display: grid; place-items: center; padding: 42px; background: radial-gradient(circle, rgba(0,240,255,.22), transparent 63%); }.featured-art img { width: min(180px, 72%); filter: drop-shadow(0 0 24px rgba(0,240,255,.46)); }
.featured-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 56px); }.featured-content > span { color: var(--cyan); font: 600 13px Orbitron, sans-serif; letter-spacing: .08em; }.featured-content h3 { margin: 12px 0; color: var(--ink); font: 600 clamp(30px, 4vw, 52px) Orbitron, sans-serif; letter-spacing: -.04em; }.featured-content p { max-width: 52ch; margin: 0 0 25px; color: var(--muted-readable); font-size: 18px; }.featured-content .btn { align-self: flex-start; min-height: 54px; font-size: 16px; }
.carousel-controls { position: absolute; z-index: 2; right: 22px; bottom: 19px; display: flex; align-items: center; gap: 11px; }.carousel-button { display: grid; place-items: center; width: 38px; height: 34px; border: 1px solid rgba(0,240,255,.5); background: rgba(6,11,27,.76); color: var(--cyan); font-size: 19px; cursor: pointer; }.carousel-button:hover { background: var(--cyan); color: var(--void); }.carousel-dots { display: flex; gap: 7px; }.carousel-dot { width: 22px; height: 4px; padding: 0; border: 0; background: rgba(232,247,255,.3); cursor: pointer; }.carousel-dot.is-active { background: var(--pink); }
.game-globe-section { display: grid; grid-template-columns: minmax(240px,.72fr) minmax(500px,1.28fr); align-items: center; min-height: 520px; margin-top: 20px; overflow: hidden; border: 1px solid rgba(123,146,195,.28); background: radial-gradient(circle at 68% 48%, rgba(0,240,255,.09), transparent 36%), linear-gradient(120deg, rgba(10,17,39,.94), rgba(25,12,48,.8)); }.globe-copy { padding: 42px; }.globe-copy h3 { margin: 0; color: var(--ink); font: 600 clamp(26px,3vw,40px) Orbitron,sans-serif; line-height: 1.16; letter-spacing: -.045em; }.globe-copy p { max-width: 28ch; margin: 15px 0 0; color: var(--muted-readable); font-size: 18px; }.game-globe-scene { position: relative; display: grid; place-items: center; min-height: 500px; overflow: hidden; cursor: grab; touch-action: none; perspective:900px; }.game-globe-scene:active { cursor: grabbing; }.globe-rotor { position:relative; width:0; height:0; transform-style:preserve-3d; transform:rotateY(0deg); transition:transform .08s linear; }.game-globe { position:relative; width:0; height:0; transform-style:preserve-3d; }.globe-node { position:absolute; z-index:10; left:-32px; top:-32px; display:grid; justify-items:center; gap:4px; width:64px; color:var(--ink); font:600 9px Orbitron,sans-serif; text-align:center; text-decoration:none; transform-style:preserve-3d; backface-visibility:hidden; will-change:transform; cursor:pointer; pointer-events:auto; }.globe-node img { width:40px; height:40px; filter:drop-shadow(0 0 8px rgba(0,240,255,.32)); transition:transform .2s ease,filter .2s ease; }.globe-node span { padding:2px 3px; background:rgba(6,10,26,.78); border:1px solid rgba(123,146,195,.24); white-space:nowrap; }.globe-node:hover { color:var(--cyan); z-index:201 !important; }.globe-node:hover img { transform:scale(1.16); filter:drop-shadow(0 0 18px rgba(0,240,255,.74)); }.globe-node:hover span { border-color:var(--cyan); }
.score-panel .score-table-card { background: linear-gradient(145deg, rgba(16,23,47,.96), rgba(8,11,27,.96)); border-color: rgba(0,240,255,.26); box-shadow: 0 18px 46px rgba(0,0,0,.25); }.score-panel .table, .score-panel .table > :not(caption) > * > * { background-color: transparent !important; }.score-panel .table tbody tr { background: rgba(10,15,34,.52); }.score-panel .table tbody tr:nth-child(even) { background: rgba(18,23,48,.72); }.score-panel .table tbody tr:hover { background: rgba(0,240,255,.08); }
.mobile-score-feed { display:none; }

/* Profile: high-contrast operating dashboard rather than a faded list. */
.profile-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px 34px; margin: 7px 0 20px; border: 1px solid rgba(0,240,255,.3); background: linear-gradient(110deg, rgba(11,41,62,.72), rgba(25,14,52,.76)); }.profile-identity { display: flex; align-items: center; gap: 20px; }.profile-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 76px; height: 76px; border: 1px solid var(--cyan); color: var(--cyan); font: 700 30px Orbitron, sans-serif; background: rgba(0,240,255,.08); box-shadow: inset 0 0 20px rgba(0,240,255,.1); }.profile-label { margin: 0 0 5px; color: var(--cyan); font: 600 12px Orbitron, sans-serif; letter-spacing: .08em; }.profile-identity h1 { margin: 0; color: var(--ink); font: 600 30px Orbitron, sans-serif; }.profile-identity p:last-child { margin: 7px 0 0; color: var(--muted-readable); font-size: 17px; }
.profile-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 22px; border: 1px solid rgba(123,146,195,.3); background: rgba(123,146,195,.2); }.metric { min-height: 154px; padding: 24px 28px; background: rgba(12,16,34,.93); }.metric span { display: block; color: var(--muted-readable); font-size: 16px; }.metric strong { display: block; margin: 8px 0; color: var(--ink); font: 600 38px Orbitron, sans-serif; }.metric small { color: var(--cyan); font-size: 14px; }.metric-featured { background: linear-gradient(140deg, rgba(27,43,76,.98), rgba(42,15,64,.94)); }.metric-featured strong { color: var(--cyan); }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr); gap: 22px; }.profile-panel { border: 1px solid rgba(123,146,195,.3); background: rgba(12,16,34,.88); }.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 26px 20px; border-bottom: 1px solid rgba(123,146,195,.24); }.panel-heading h2 { margin: 0; color: var(--ink); font: 600 21px Orbitron, sans-serif; }.panel-heading p { margin: 8px 0 0; color: var(--muted-readable); font-size: 16px; }.panel-heading a { color: var(--cyan); font: 600 13px Orbitron, sans-serif; text-decoration: none; }.panel-heading a:hover { color: var(--pink); }
.performance-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 14px 25px; border-bottom: 1px solid rgba(123,146,195,.16); color: var(--ink); text-decoration: none; transition: background-color .2s ease; }.performance-row:last-child { border-bottom: 0; }.performance-row:hover { background: rgba(0,240,255,.055); }.performance-row img { width: 42px; height: 42px; }.performance-name { font-size: 18px; font-weight: 600; }.performance-name small, .performance-score small { display: block; margin-top: 2px; color: var(--muted-readable); font-size: 14px; font-weight: 400; }.performance-score { color: var(--cyan); font: 600 19px Orbitron, sans-serif; text-align: right; }.performance-score small { font-family: Rajdhani, sans-serif; }
.activity-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 26px; border-bottom: 1px solid rgba(123,146,195,.16); color: var(--ink); text-decoration: none; }.activity-row:hover { background: rgba(0,240,255,.055); }.activity-row span { font-size: 18px; font-weight: 600; }.activity-row small { display: block; margin-top: 3px; color: var(--muted-readable); font-size: 14px; font-weight: 400; }.activity-row strong { color: var(--cyan); font: 600 19px Orbitron, sans-serif; }.profile-empty { padding: 48px 26px; text-align: center; }.profile-empty p { color: var(--muted-readable); font-size: 18px; }

@media (prefers-reduced-motion: no-preference) { .featured-art img { animation: iconDrift 4s ease-in-out infinite; } }
@keyframes iconDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 768px) {
    .game-globe-section { grid-template-columns: 1fr; min-height: 650px; }
    .globe-copy { padding: 28px 22px 0; }
    .globe-copy p { font-size: 17px; }
    .game-globe-scene { min-height: 430px; }
    .game-globe-scene::before { width: 254px; height: 254px; }
    .globe-equator { width: 264px; height: 88px; }
    .globe-node { left:-28px; top:-28px; width:56px; font-size:8px; }
    .globe-node img { width:34px; height:34px; }
    main.container { padding:26px 14px 44px; }.row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }.card-body { padding:18px; }.card-header { padding:14px 16px; }.game-stats { gap:12px; flex-wrap:wrap; }.game-stat { min-width:62px; }.game-stat-value { font-size:30px; }.game-stat-label { font-size:12px; }.game-area { padding:14px; min-height:300px; }.math-question { font-size:42px; padding:22px 12px; }.typing-text { font-size:22px; padding:18px 14px; }.memory-grid,.game-2048-grid { max-width:100%; }.btn { min-height:46px; font-size:13px; padding:12px 16px; }.breadcrumb { margin-bottom:14px; }.score-panel .table-responsive { display:none; }.mobile-score-feed { display:block; }.mobile-score-item { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:11px; padding:14px 15px; border-bottom:1px solid rgba(123,146,195,.18); color:var(--ink); text-decoration:none; }.mobile-score-item:last-child { border-bottom:0; }.mobile-score-item:hover { background:rgba(0,240,255,.07); }.mobile-score-game { font-size:17px; font-weight:600; }.mobile-score-game small { display:block; margin-top:3px; color:var(--muted-readable); font-size:14px; font-weight:400; }.mobile-score-item strong { color:var(--cyan); font:600 17px Orbitron,sans-serif; }
}

@keyframes neonPulse { 0%,100% { opacity: .55; text-shadow: 0 0 0 transparent; } 50% { opacity: 1; text-shadow: 0 0 14px rgba(255,45,120,.75); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } #cyber-canvas, .cursor-glow { display: none; } }
@media (max-width: 768px) { .navbar .container { min-height: 62px; }.navbar-brand { font-size: 12px; }.brand-mark { width: 28px; height: 28px; font-size: 8px; }.nav-link { font-size: 8px; padding: 20px 7px; }.hero-section { min-height: 390px; margin-bottom: 48px; }.hero-section h1 { font-size: 31px; }.hero-section p { font-size: 19px; }.game-card .card-img-top { height: 154px; } }

/* Second-pass layout: give primary actions and game states a readable hierarchy. */
.nav-link { font-size: 15px; padding: 23px 16px; font-weight: 600; letter-spacing: .03em; }
.nav-register { min-height: 46px; padding: 12px 21px; font-size: 14px; }

.hero-section { min-height: 500px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: clamp(36px, 7vw, 110px); align-items: center; padding: clamp(42px, 6vw, 82px); margin-bottom: 84px; background: linear-gradient(105deg, rgba(8,11,26,.96) 0%, rgba(15,21,46,.88) 58%, rgba(47,10,52,.62) 100%); }
.hero-section h1 { max-width: 680px; font-size: clamp(38px, 5.3vw, 68px); line-height: 1.08; letter-spacing: -.045em; }
.hero-section::after { content: ''; right: 0; bottom: 0; width: 25%; height: 1px; background: var(--pink); }
.hero-copy, .hero-console { position: relative; z-index: 1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-cta, .hero-secondary { min-height: 64px; padding: 17px 31px; font-size: 20px; }
.hero-secondary { font-size: 16px; }
.hero-console { align-self: stretch; min-height: 332px; padding: 24px; display: flex; flex-direction: column; border: 1px solid rgba(0,240,255,.3); background: linear-gradient(145deg, rgba(0,240,255,.08), rgba(10,12,27,.42) 42%, rgba(255,45,120,.08)); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.console-topline { display: flex; justify-content: space-between; align-items: center; color: var(--cyan); font: 600 10px Orbitron, sans-serif; letter-spacing: .12em; }
.console-topline i { width: 9px; height: 9px; border-radius: 50%; background: #79ffaf; box-shadow: 0 0 12px #79ffaf; }
.console-orbit { position: relative; display: grid; place-items: center; width: 144px; height: 144px; margin: auto; border: 1px solid rgba(0,240,255,.52); border-radius: 50%; box-shadow: inset 0 0 28px rgba(0,240,255,.12), 0 0 20px rgba(0,240,255,.12); }
.console-orbit::before { content: ''; position: absolute; width: 96px; height: 96px; border: 1px solid rgba(255,45,120,.55); border-radius: 50%; }
.console-orbit span { position: relative; color: var(--ink); font: 700 19px Orbitron, sans-serif; letter-spacing: .1em; }
.console-status { display: flex; justify-content: space-between; color: var(--muted); font-size: 15px; }.console-status strong { color: #79ffaf; font-weight: 600; }
.console-links { margin-top: 17px; border-top: 1px solid rgba(123,146,195,.24); }.console-links a { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(123,146,195,.17); color: var(--ink); font: 600 11px Orbitron, sans-serif; text-decoration: none; }.console-links a:hover { color: var(--cyan); }.console-links span { color: var(--pink); }

.content-section { margin-bottom: 90px; }.section-heading { margin-bottom: 28px; }.section-heading h2 { margin: 0; font-size: clamp(27px, 3vw, 39px); letter-spacing: -.04em; }
.mission-wall { display: grid; grid-template-columns: 1.3fr .85fr .85fr; gap: 18px; }.mission-wall .game-card { min-height: 286px; }.mission-wall .game-col:nth-child(1), .mission-wall .game-col:nth-child(6) { grid-column: span 2; }.mission-wall .game-col:nth-child(1) .game-card, .mission-wall .game-col:nth-child(6) .game-card { min-height: 330px; }.mission-wall .game-col:nth-child(1) .card-img-top, .mission-wall .game-col:nth-child(6) .card-img-top { height: 196px; }.mission-wall .game-col:nth-child(3n) .game-card { background: linear-gradient(145deg, rgba(47,13,54,.86), rgba(10,11,27,.92)); }.mission-wall .game-col:nth-child(4n) .game-card { background: linear-gradient(145deg, rgba(9,39,57,.82), rgba(10,11,27,.92)); }

/* Memory game: the states must be distinguishable without relying on glow alone. */
.memory-grid { max-width: 480px; gap: 14px; padding: 14px; background: rgba(3,5,16,.58); border: 1px solid rgba(123,146,195,.26); }
.memory-card { position: relative; background: linear-gradient(145deg, #31145b, #190e35); border: 1px solid #b35cff; color: #f7ecff; font-family: Orbitron, sans-serif; font-size: 28px; text-shadow: 0 0 11px rgba(255,255,255,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 18px rgba(0,0,0,.32); }
.memory-card::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(222,171,255,.42); clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%); pointer-events: none; }
.memory-card:hover { border-color: #f4b4ff; background: linear-gradient(145deg, #43197a, #241043); box-shadow: 0 0 24px rgba(179,92,255,.34), inset 0 1px 0 rgba(255,255,255,.16); }
.memory-card.flipped { background: linear-gradient(145deg, #e6fcff, #9feeff); border-color: var(--cyan); color: #05131d; text-shadow: none; box-shadow: 0 0 28px rgba(0,240,255,.48), inset 0 1px 0 rgba(255,255,255,.9); }
.memory-card.flipped::after { border-color: rgba(5,19,29,.24); }
.memory-card.matched { background: linear-gradient(145deg, #baffd3, #49d982); border-color: #79ffaf; color: #042213; text-shadow: none; box-shadow: 0 0 27px rgba(121,255,175,.42), inset 0 1px 0 rgba(255,255,255,.72); }
.memory-card.matched::after { border-color: rgba(4,34,19,.26); }

@media (max-width: 768px) {
    .navbar .container { min-height: 66px; padding: 0 14px; }.navbar-brand { font-size: 11px; }.brand-mark { width: 27px; height: 27px; font-size: 8px; }.nav-actions { gap: 2px !important; }.nav-link { font-size: 11px; padding: 23px 7px; }.nav-register { min-height: 38px; padding: 9px 11px; font-size: 11px; }
    .hero-section { grid-template-columns: 1fr; min-height: auto; gap: 28px; margin-bottom: 55px; padding: 38px 24px 28px; }.hero-section h1 { font-size: 38px; }.hero-console { min-height: 250px; }.console-orbit { width: 106px; height: 106px; margin: 20px auto; }.console-orbit::before { width: 67px; height: 67px; }.console-orbit span { font-size: 14px; }.hero-cta, .hero-secondary { flex: 1; min-height: 54px; padding: 13px 12px; font-size: 15px; }
    .mission-wall { grid-template-columns: 1fr; gap: 15px; }.mission-wall .game-col:nth-child(n) { grid-column: auto; }.mission-wall .game-card, .mission-wall .game-col:nth-child(n) .game-card { min-height: auto; }.mission-wall .game-card .card-img-top, .mission-wall .game-col:nth-child(n) .card-img-top { height: 158px; }
    .memory-grid { max-width: 100%; gap: 9px; padding: 9px; }.memory-card { font-size: 23px; }
    .featured-carousel { min-height: 510px; }.featured-slide { grid-template-columns: 1fr; }.featured-art { min-height: 190px; padding: 28px; }.featured-art img { width: 120px; }.featured-content { padding: 26px 22px 68px; }.featured-content h3 { font-size: 31px; }.featured-content p { font-size: 17px; }.carousel-controls { right: 16px; bottom: 17px; }.all-games-wall { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }.wall-game, .wall-game:nth-child(n) { grid-column: auto; grid-row: auto; grid-template-columns: 62px minmax(0,1fr); min-height: 116px; padding: 17px; }.wall-game:nth-child(1) { grid-template-columns: 74px minmax(0,1fr); }.wall-game img, .wall-game:nth-child(1) img { width: 54px; }.wall-game h3 { font-size: 16px; }.wall-game p { font-size: 15px; }
    .profile-hero { align-items: flex-start; flex-direction: column; padding: 24px 20px; }.profile-identity { align-items: flex-start; gap: 14px; }.profile-avatar { width: 58px; height: 58px; font-size: 23px; }.profile-identity h1 { font-size: 23px; }.profile-identity p:last-child { font-size: 15px; }.profile-metrics { grid-template-columns: 1fr; }.metric { min-height: 112px; padding: 19px 20px; }.metric strong { font-size: 30px; }.profile-layout { grid-template-columns: 1fr; gap: 16px; }.panel-heading { padding: 20px; }.panel-heading h2 { font-size: 18px; }.panel-heading p { font-size: 15px; }.performance-row { grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; padding: 13px 18px; }.performance-row img { width: 36px; height: 36px; }.performance-name, .activity-row span { font-size: 16px; }.performance-score, .activity-row strong { font-size: 16px; }.activity-row { padding: 16px 18px; }.performance-name small, .performance-score small, .activity-row small { font-size: 13px; }
}