/* ===== TANGOX TV - Styles ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ===== THEME: DARK ===== */
[data-theme="dark"]{
  --bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;
  --bg-card:rgba(30,41,59,0.85);--bg-card-hover:rgba(51,65,85,0.9);
  --text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;
  --accent:#3b82f6;--accent-hover:#2563eb;--accent-glow:rgba(59,130,246,0.3);
  --success:#22c55e;--danger:#ef4444;--warning:#f59e0b;--purple:#8b5cf6;
  --border:rgba(148,163,184,0.12);--border-hover:rgba(59,130,246,0.4);
  --glass-bg:rgba(30,41,59,0.8);--glass-border:rgba(148,163,184,0.1);
  --shadow:0 8px 32px rgba(0,0,0,0.3);--font-body:'Inter','Noto Sans JP',sans-serif;
  --gradient-bg:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);
  --orb1:rgba(59,130,246,0.08);--orb2:rgba(139,92,246,0.06);
  --scrollbar-thumb:rgba(148,163,184,0.3);
  --card-radius:16px;--btn-radius:12px;
  --nav-bg:rgba(15,23,42,0.95);
}

/* ===== THEME: LIGHT (default) ===== */
:root,[data-theme="light"]{
  --bg-primary:#f8fafc;--bg-secondary:#e2e8f0;--bg-tertiary:#cbd5e1;
  --bg-card:rgba(255,255,255,0.9);--bg-card-hover:rgba(241,245,249,0.95);
  --text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;
  --accent:#2563eb;--accent-hover:#1d4ed8;--accent-glow:rgba(37,99,235,0.2);
  --success:#16a34a;--danger:#dc2626;--warning:#d97706;--purple:#7c3aed;
  --border:rgba(0,0,0,0.08);--border-hover:rgba(37,99,235,0.3);
  --glass-bg:rgba(255,255,255,0.85);--glass-border:rgba(0,0,0,0.06);
  --shadow:0 4px 24px rgba(0,0,0,0.08);--font-body:'Inter','Noto Sans JP',sans-serif;
  --gradient-bg:linear-gradient(135deg,#f8fafc 0%,#e0e7ff 50%,#f8fafc 100%);
  --orb1:rgba(59,130,246,0.05);--orb2:rgba(139,92,246,0.04);
  --scrollbar-thumb:rgba(0,0,0,0.15);
  --card-radius:16px;--btn-radius:12px;
  --nav-bg:rgba(248,250,252,0.95);
}

/* ===== THEME: FAMICOM (8-bit pixel art, NES/Famicom console) ===== */
[data-theme="famicom"]{
  --bg-primary:#000000;--bg-secondary:#1a0a2e;--bg-tertiary:#2d1b4e;
  --bg-card:rgba(26,10,46,0.95);--bg-card-hover:rgba(45,27,78,0.95);
  --text-primary:#fcfcfc;--text-secondary:#a0d0a0;--text-muted:#5a8a5a;
  --accent:#e04040;--accent-hover:#c03030;--accent-glow:rgba(224,64,64,0.4);
  --success:#40c040;--danger:#e04040;--warning:#e0c040;--purple:#8060c0;
  --border:rgba(160,208,160,0.2);--border-hover:rgba(224,64,64,0.5);
  --glass-bg:rgba(0,0,0,0.9);--glass-border:rgba(160,208,160,0.15);
  --shadow:0 0 0 3px #a0d0a0,0 0 20px rgba(160,208,160,0.2);
  --font-body:'Press Start 2P','Noto Sans JP',monospace;
  --gradient-bg:linear-gradient(180deg,#000000 0%,#0a0020 100%);
  --orb1:rgba(160,208,160,0.04);--orb2:rgba(224,64,64,0.03);
  --scrollbar-thumb:rgba(160,208,160,0.4);
  --card-radius:0px;--btn-radius:0px;
  --nav-bg:rgba(0,0,0,0.98);
}

/* ===== THEME: 1980s (Synthwave / Neon / Miami Vice) ===== */
[data-theme="eighties"]{
  --bg-primary:#1a0030;--bg-secondary:#2a0050;--bg-tertiary:#3d0070;
  --bg-card:rgba(42,0,80,0.85);--bg-card-hover:rgba(61,0,112,0.9);
  --text-primary:#fff0ff;--text-secondary:#e0b0ff;--text-muted:#a070c0;
  --accent:#ff2d95;--accent-hover:#e0207a;--accent-glow:rgba(255,45,149,0.4);
  --success:#00ff88;--danger:#ff2d55;--warning:#ffdd00;--purple:#b050ff;
  --border:rgba(255,45,149,0.2);--border-hover:rgba(0,255,255,0.5);
  --glass-bg:rgba(26,0,48,0.85);--glass-border:rgba(255,45,149,0.15);
  --shadow:0 0 20px rgba(255,45,149,0.3),0 0 40px rgba(0,255,255,0.1);
  --font-body:'VT323','Inter','Noto Sans JP',monospace;
  --gradient-bg:linear-gradient(180deg,#1a0030 0%,#0a0040 40%,#001030 100%);
  --orb1:rgba(255,45,149,0.08);--orb2:rgba(0,255,255,0.06);
  --scrollbar-thumb:rgba(255,45,149,0.5);
  --card-radius:4px;--btn-radius:4px;
  --nav-bg:rgba(26,0,48,0.95);
  --neon-cyan:#00ffff;--neon-pink:#ff2d95;--neon-yellow:#ffdd00;
}

body{
  font-family:var(--font-body);
  background:var(--gradient-bg);
  color:var(--text-primary);
  min-height:100vh;
  overflow-x:hidden;
  transition:background 0.4s,color 0.4s;
}

/* ===== FAMICOM SPECIFIC ===== */
[data-theme="famicom"] body,
[data-theme="famicom"]{font-size:11px;line-height:1.8}
[data-theme="famicom"] h1,[data-theme="famicom"] h2,[data-theme="famicom"] h3{letter-spacing:2px}
[data-theme="famicom"] .glass-card{border:3px solid var(--border);image-rendering:pixelated}
[data-theme="famicom"] .btn-primary{border:3px solid var(--accent);box-shadow:4px 4px 0 rgba(0,0,0,0.5)}
[data-theme="famicom"] .btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,0.5)}
[data-theme="famicom"] .btn-primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,0.5)}
[data-theme="famicom"] .quiz-option{border:2px solid var(--border)}
[data-theme="famicom"] .quiz-option:hover{border-color:var(--accent);background:rgba(224,64,64,0.1)}
[data-theme="famicom"] *{text-shadow:1px 1px 0 rgba(0,0,0,0.5)}
[data-theme="famicom"] .stat-card{border:2px solid var(--border)}
[data-theme="famicom"] input{font-family:'Press Start 2P',monospace !important;border:2px solid var(--border) !important;border-radius:0 !important}
[data-theme="famicom"] body::after{
  content:'';position:fixed;top:0;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.1) 2px,rgba(0,0,0,0.1) 4px);
  pointer-events:none;z-index:9999;
}

/* ===== 1980s SYNTHWAVE SPECIFIC ===== */
[data-theme="eighties"] body{font-size:16px;line-height:1.6;letter-spacing:0.5px}
[data-theme="eighties"] h1,[data-theme="eighties"] h2,[data-theme="eighties"] h3{
  letter-spacing:1px;
  text-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-pink),0 0 40px rgba(255,45,149,0.3);
}
[data-theme="eighties"] .glass-card{
  border:1px solid rgba(255,45,149,0.3);
  box-shadow:0 0 15px rgba(255,45,149,0.1),inset 0 0 15px rgba(0,255,255,0.03);
}
[data-theme="eighties"] .glass-card:hover{
  border-color:rgba(0,255,255,0.5);
  box-shadow:0 0 25px rgba(0,255,255,0.2),0 0 50px rgba(255,45,149,0.1);
}
[data-theme="eighties"] .btn-primary{
  background:linear-gradient(135deg,#ff2d95,#b050ff);
  border:none;
  box-shadow:0 0 15px rgba(255,45,149,0.4),0 4px 15px rgba(0,0,0,0.3);
  text-shadow:0 0 8px rgba(255,255,255,0.5);
}
[data-theme="eighties"] .btn-primary:hover{
  box-shadow:0 0 25px rgba(255,45,149,0.6),0 0 40px rgba(0,255,255,0.2),0 6px 20px rgba(0,0,0,0.3);
  transform:translateY(-2px);
}
[data-theme="eighties"] .btn-secondary{
  border:1px solid rgba(0,255,255,0.3);
  text-shadow:0 0 5px rgba(0,255,255,0.3);
}
[data-theme="eighties"] .btn-secondary:hover{
  border-color:var(--neon-cyan);
  box-shadow:0 0 15px rgba(0,255,255,0.2);
  color:var(--neon-cyan);
}
[data-theme="eighties"] .quiz-option{
  border:1px solid rgba(0,255,255,0.2);
}
[data-theme="eighties"] .quiz-option:hover{
  border-color:var(--neon-cyan);
  box-shadow:0 0 15px rgba(0,255,255,0.15);
  background:rgba(0,255,255,0.05);
}
[data-theme="eighties"] .quiz-option.correct{
  border-color:var(--success)!important;
  box-shadow:0 0 20px rgba(0,255,136,0.3)!important;
}
[data-theme="eighties"] .quiz-option.wrong{
  border-color:var(--danger)!important;
  box-shadow:0 0 20px rgba(255,45,85,0.3)!important;
}
[data-theme="eighties"] .stat-card{
  border:1px solid rgba(255,45,149,0.2);
  box-shadow:0 0 10px rgba(255,45,149,0.05);
}
[data-theme="eighties"] .stat-card:hover{
  box-shadow:0 0 20px rgba(0,255,255,0.15);
  border-color:rgba(0,255,255,0.3);
}
[data-theme="eighties"] .progress-fill{
  background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
  box-shadow:0 0 10px rgba(255,45,149,0.3);
}
[data-theme="eighties"] .memory-fill{
  box-shadow:0 0 8px currentColor;
}
[data-theme="eighties"] input{
  font-family:'VT323',monospace !important;
  font-size:18px !important;
  border:1px solid rgba(0,255,255,0.3) !important;
  background:rgba(0,0,0,0.5) !important;
}
[data-theme="eighties"] input:focus{
  border-color:var(--neon-cyan) !important;
  box-shadow:0 0 15px rgba(0,255,255,0.2) !important;
}
[data-theme="eighties"] .nav-item.active{color:var(--neon-cyan)}
[data-theme="eighties"] .nav-item.active::after{background:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan)}
[data-theme="eighties"] .badge{text-shadow:0 0 5px currentColor}
/* 1980s grid floor effect */
[data-theme="eighties"] body::before{
  content:'';position:fixed;bottom:0;left:0;right:0;height:30vh;
  background:linear-gradient(180deg,transparent 0%,rgba(255,45,149,0.03) 100%);
  pointer-events:none;z-index:0;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 15px var(--accent-glow)}50%{box-shadow:0 0 35px var(--accent-glow)}}
@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes wrongShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes streakFire{0%{text-shadow:0 0 8px var(--warning)}50%{text-shadow:0 0 25px var(--danger),0 0 50px var(--warning)}100%{text-shadow:0 0 8px var(--warning)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes progress{from{width:0}to{width:100%}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes popIn{0%{transform:scale(0.8);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes neonFlicker{0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}20%,24%,55%{opacity:0.6}}

.animate-fadeIn{animation:fadeIn .4s ease-out forwards}
.animate-slideIn{animation:slideIn .35s ease-out forwards}
.animate-slideUp{animation:slideUp .4s ease-out forwards}
.animate-correct{animation:correctPop .35s ease-out}
.animate-wrong{animation:wrongShake .35s ease-out}
.animate-streak{animation:streakFire 1.5s ease-in-out infinite}
.animate-float{animation:float 3s ease-in-out infinite}
.animate-popIn{animation:popIn .3s ease-out forwards}

/* ===== COMPONENTS ===== */
.glass-card{
  background:var(--bg-card);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--card-radius);
  transition:all .3s ease;
}
.glass-card:hover{
  border-color:var(--border-hover);
  box-shadow:var(--shadow);
}

.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  color:white;border:none;border-radius:var(--btn-radius);
  padding:12px 24px;font-weight:700;cursor:pointer;
  transition:all .25s ease;position:relative;overflow:hidden;
  font-family:var(--font-body);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}

.btn-secondary{
  background:rgba(148,163,184,0.08);
  color:var(--text-secondary);
  border:1px solid var(--border);
  border-radius:var(--btn-radius);
  padding:12px 24px;font-weight:600;cursor:pointer;
  transition:all .25s ease;font-family:var(--font-body);
}
.btn-secondary:hover{background:var(--bg-tertiary);color:var(--text-primary)}

.btn-danger{
  background:linear-gradient(135deg,var(--danger),#b91c1c);
  color:white;border:none;border-radius:var(--btn-radius);
  padding:10px 20px;font-weight:600;cursor:pointer;
  transition:all .25s ease;font-family:var(--font-body);
}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,0.3)}

.input-field{
  background:var(--bg-secondary);
  border:2px solid var(--border);
  border-radius:var(--btn-radius);
  padding:14px 18px;color:var(--text-primary);
  font-size:16px;width:100%;transition:all .3s;
  outline:none;font-family:var(--font-body);
}
.input-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.input-field.correct{border-color:var(--success);box-shadow:0 0 0 3px rgba(34,197,94,0.2)}
.input-field.wrong{border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,0.2)}

.quiz-option{
  background:var(--bg-card);
  border:2px solid var(--border);
  border-radius:var(--card-radius);
  padding:16px 20px;cursor:pointer;
  transition:all .25s ease;
}
.quiz-option:hover{border-color:var(--accent);background:var(--bg-card-hover);transform:translateX(4px)}
.quiz-option.correct{border-color:var(--success)!important;background:rgba(34,197,94,0.12)!important;animation:correctPop .35s ease-out}
.quiz-option.wrong{border-color:var(--danger)!important;background:rgba(239,68,68,0.12)!important;animation:wrongShake .35s ease-out}
.quiz-option.correct-answer{border-color:var(--success)!important;background:rgba(34,197,94,0.08)!important}
.quiz-option.disabled{pointer-events:none;opacity:0.7}

.progress-bar{height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--purple));border-radius:3px;transition:width .4s ease-out}

.stat-card{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--card-radius);
  padding:20px;text-align:center;
  transition:all .3s;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

.badge{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:20px;
  font-size:12px;font-weight:600;
}

.nav-bottom{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--nav-bg);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  z-index:100;
  padding:6px 0 env(safe-area-inset-bottom, 6px);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;
  padding:8px 4px;cursor:pointer;transition:all .25s;
  color:var(--text-muted);font-size:10px;gap:4px;
  font-family:var(--font-body);
}
.nav-item:hover,.nav-item.active{color:var(--accent)}
.nav-item.active::after{
  content:'';width:4px;height:4px;
  border-radius:50%;background:var(--accent);
}
.nav-item i{font-size:18px}

.orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.orb-1{width:350px;height:350px;background:var(--orb1);top:-80px;right:-80px}
.orb-2{width:250px;height:250px;background:var(--orb2);bottom:-40px;left:-40px}

.cover-img{
  width:80px;height:auto;border-radius:8px;
  box-shadow:0 4px 15px rgba(0,0,0,0.3);
  transition:transform .3s;
}
.cover-img:hover{transform:scale(1.05)}
[data-theme="famicom"] .cover-img{border-radius:0;border:2px solid var(--border)}
[data-theme="eighties"] .cover-img{box-shadow:0 0 15px rgba(255,45,149,0.2)}

.memory-bar{height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}
.memory-fill{height:100%;border-radius:4px;transition:width .5s}

.toast{position:fixed;top:20px;right:20px;z-index:999;animation:slideIn .3s ease-out}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}

.pwa-prompt{position:fixed;bottom:80px;left:16px;right:16px;z-index:200;animation:slideUp .4s ease-out}
#app{position:relative;z-index:1;min-height:100vh}
.chart-bar{display:flex;align-items:flex-end;gap:4px;height:120px}
.chart-bar-item{flex:1;border-radius:4px 4px 0 0;transition:height .5s ease;min-width:8px;position:relative}
.chart-bar-item:hover{opacity:0.8}

/* Explanation box */
.explanation-box{
  background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);
  border-radius:8px;padding:10px 14px;margin-top:8px;
}
[data-theme="eighties"] .explanation-box{
  background:rgba(0,255,255,0.05);border-color:rgba(0,255,255,0.2);
}
[data-theme="famicom"] .explanation-box{
  background:rgba(160,208,160,0.08);border-color:rgba(160,208,160,0.2);border-radius:0;
}

/* Token display */
.token-display{
  font-family:'Courier New',monospace;font-size:18px;letter-spacing:3px;
  background:var(--bg-tertiary);padding:12px 20px;border-radius:8px;
  text-align:center;color:var(--accent);font-weight:700;
  border:2px dashed var(--accent);user-select:all;
}

/* Admin log table */
.log-table{width:100%;border-collapse:collapse;font-size:11px}
.log-table th,.log-table td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--border)}
.log-table th{color:var(--text-secondary);font-weight:600;position:sticky;top:0;background:var(--bg-secondary)}
.log-table td{color:var(--text-primary)}
.log-scroll{max-height:400px;overflow-y:auto}

@media(max-width:640px){
  [data-theme="famicom"]{font-size:9px}
  [data-theme="eighties"]{font-size:14px}
  .nav-item{font-size:9px}
  .nav-item i{font-size:16px}
}

/* ===== PRINT STYLES ===== */
.print-page{
  font-family:'Noto Sans JP','Helvetica Neue',Arial,sans-serif;
  color:#1a1a1a;background:#fff;
  padding:20px;
}
.print-header{
  text-align:center;padding-bottom:16px;
  border-bottom:3px double #333;margin-bottom:16px;
}
.print-table{
  width:100%;border-collapse:collapse;font-size:12px;
}
.print-table th{
  background:#f0f0f0;font-weight:700;text-align:left;
  padding:8px 10px;border-bottom:2px solid #333;font-size:11px;
  color:#333;
}
.print-table td{
  padding:6px 10px;border-bottom:1px solid #e0e0e0;
  vertical-align:top;
}
.print-table tr:nth-child(even){background:#f9f9f9}
.print-table tr:hover{background:#f0f4ff}
.print-footer{
  margin-top:20px;padding-top:12px;
  border-top:1px solid #ccc;
  font-size:10px;color:#999;text-align:center;
}

@media print{
  body{background:#fff !important;color:#000 !important;margin:0;padding:0}
  body *{color:#000 !important;background:transparent !important;box-shadow:none !important;text-shadow:none !important}
  .no-print,.nav-bottom,.orb,.toast,.pwa-prompt{display:none !important}
  #app{position:static;min-height:auto}
  .print-page{padding:10mm;font-size:11px}
  .print-table{page-break-inside:auto}
  .print-table tr{page-break-inside:avoid;page-break-after:auto}
  .print-header{page-break-after:avoid}
  .print-table th{background:#f0f0f0 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-table tr:nth-child(even){background:#f9f9f9 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:10mm;size:A4}
}

/* ===== BROWSE HIDDEN TEXT ===== */
.browse-hidden{
  transition:color .2s,background .2s;
}