.two-truths-setup { max-width: 600px; margin: 0 auto; }
.statement-input-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.statement-num { font-family: var(--font-pixel); font-size: 0.45rem; color: var(--muted); width: 2rem; flex-shrink: 0; }
.lie-toggle { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 0.3rem 0.6rem; cursor: pointer; font-family: var(--font-pixel); font-size: 0.4rem; transition: all 0.2s; flex-shrink: 0; }
.lie-toggle.selected { background: rgba(220,40,54,0.15); border-color: var(--accent); color: var(--accent); box-shadow: var(--glow-a); }
.player-setup { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.player-tag { display: flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--border); padding: 0.4rem 0.75rem; font-family: var(--font-crt); font-size: 1.1rem; color: var(--white); }
.player-tag i { color: var(--primary); }
.player-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; transition: color 0.2s; }
.player-remove:hover { color: var(--accent); }
.statements-game { max-width: 680px; margin: 0 auto; }
.statement-card { background: var(--card); border: 2px solid var(--border); padding: 1.25rem 1.5rem; margin-bottom: 0.75rem; cursor: pointer; transition: all 0.25s; font-family: var(--font-crt); font-size: 1.4rem; color: var(--white); position: relative; }
.statement-card:hover { border-color: var(--primary); box-shadow: var(--glow-p); }
.statement-card.selected { border-color: var(--accent); box-shadow: var(--glow-a); background: rgba(220,40,54,0.08); }
.statement-card.reveal-correct { border-color: var(--secondary); box-shadow: var(--glow-s); background: rgba(168,218,220,0.08); }
.statement-card.reveal-wrong { border-color: var(--accent); box-shadow: var(--glow-a); background: rgba(220,40,54,0.08); }
.statement-idx { font-family: var(--font-pixel); font-size: 0.45rem; color: var(--muted); margin-bottom: 0.4rem; }
.voting-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.vote-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 0.5rem 1rem; cursor: pointer; font-family: var(--font-pixel); font-size: 0.45rem; letter-spacing: 0.05em; transition: all 0.2s; }
.vote-btn.active { border-color: var(--primary); color: var(--primary); box-shadow: var(--glow-p); }
.round-counter { font-family: var(--font-pixel); font-size: 0.5rem; color: var(--muted); letter-spacing: 0.1em; }

.wordle-grid { display: grid; gap: 5px; margin: 0 auto 1.5rem; width: fit-content; }
.wordle-row { display: flex; gap: 5px; }
.wordle-cell { width: 56px; height: 56px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel); font-size: 0.8rem; color: var(--white); text-transform: uppercase; transition: transform 0.1s; }
.wordle-cell.filled { border-color: var(--muted); }
.wordle-cell.correct { background: rgba(168,218,220,0.25); border-color: var(--secondary); color: var(--secondary); text-shadow: var(--glow-s); }
.wordle-cell.present { background: rgba(255,170,0,0.2); border-color: #ffaa00; color: #ffaa00; }
.wordle-cell.absent { background: var(--surface); border-color: var(--surface); color: var(--muted); }
.wordle-cell.flip { animation: flip-cell 0.5s ease; }
@keyframes flip-cell { 0% { transform: scaleY(1); } 50% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.wordle-keyboard { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.wordle-key-row { display: flex; gap: 5px; }
.wordle-key { min-width: 36px; height: 44px; background: var(--surface); border: 1px solid var(--border); color: var(--white); font-family: var(--font-pixel); font-size: 0.4rem; cursor: pointer; transition: all 0.15s; padding: 0 0.4rem; }
.wordle-key:hover { border-color: var(--primary); box-shadow: var(--glow-p); }
.wordle-key.wide { min-width: 56px; }
.wordle-key.correct { background: rgba(168,218,220,0.2); border-color: var(--secondary); color: var(--secondary); }
.wordle-key.present { background: rgba(255,170,0,0.15); border-color: #ffaa00; color: #ffaa00; }
.wordle-key.absent { background: var(--bg); border-color: var(--bg); color: var(--muted); }

.quiz-question-box { background: var(--card); border: 1px solid var(--border); padding: 2rem; margin-bottom: 1.5rem; }
.quiz-question-text { font-family: var(--font-crt); font-size: 1.6rem; color: var(--white); line-height: 1.6; }
.quiz-difficulty { font-family: var(--font-pixel); font-size: 0.4rem; margin-bottom: 0.75rem; letter-spacing: 0.08em; }
.quiz-difficulty.easy { color: #4caf50; }
.quiz-difficulty.medium { color: #ffaa00; }
.quiz-difficulty.hard { color: var(--accent); }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.quiz-option { background: var(--surface); border: 2px solid var(--border); padding: 1rem 1.25rem; cursor: pointer; font-family: var(--font-crt); font-size: 1.3rem; color: var(--white); text-align: left; transition: all 0.2s; display: flex; align-items: flex-start; gap: 0.75rem; }
.quiz-option:hover:not(:disabled) { border-color: var(--primary); box-shadow: var(--glow-p); }
.quiz-option.selected { border-color: var(--primary); background: rgba(69,123,157,0.15); }
.quiz-option.correct { border-color: var(--secondary); background: rgba(168,218,220,0.15); color: var(--secondary); }
.quiz-option.wrong { border-color: var(--accent); background: rgba(220,40,54,0.1); color: var(--accent); animation: shake 0.4s; }
.quiz-option-letter { font-family: var(--font-pixel); font-size: 0.5rem; color: var(--muted); flex-shrink: 0; padding-top: 0.2rem; }
.quiz-topic-select { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.topic-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 0.4rem 0.75rem; cursor: pointer; font-family: var(--font-pixel); font-size: 0.4rem; letter-spacing: 0.05em; transition: all 0.2s; }
.topic-btn.active { border-color: var(--primary); color: var(--primary); background: rgba(69,123,157,0.1); }
.quiz-progress { font-family: var(--font-pixel); font-size: 0.45rem; color: var(--muted); letter-spacing: 0.1em; }
.quiz-streak { font-family: var(--font-crt); font-size: 2rem; color: var(--accent); text-shadow: var(--glow-a); }

.typing-text-display { background: var(--surface); border: 1px solid var(--border); padding: 1.5rem; font-family: var(--font-code); font-size: 1.2rem; line-height: 2; margin-bottom: 1rem; min-height: 100px; }
.typing-char { color: var(--muted); }
.typing-char.typed-correct { color: var(--white); }
.typing-char.typed-wrong { color: var(--accent); background: rgba(220,40,54,0.15); }
.typing-char.current { color: var(--white); border-bottom: 2px solid var(--secondary); }
.typing-input { opacity: 0; position: absolute; pointer-events: none; }
.wpm-display { font-family: var(--font-crt); font-size: 3.5rem; color: var(--secondary); text-shadow: var(--glow-s); }
.accuracy-display { font-family: var(--font-crt); font-size: 3.5rem; color: var(--primary); text-shadow: var(--glow-p); }

.unscramble-word-display { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0; }
.scramble-letter { width: 52px; height: 60px; background: var(--card); border: 2px solid var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel); font-size: 0.9rem; color: var(--secondary); text-shadow: var(--glow-s); animation: pop-in 0.3s ease both; }
.unscramble-hint { font-family: var(--font-crt); font-size: 1.3rem; color: var(--muted); text-align: center; margin-bottom: 1rem; }
.hint-reveal { color: var(--primary); cursor: pointer; border-bottom: 1px dashed var(--primary); }
.hint-reveal:hover { color: var(--secondary); }
.unscramble-input-row { display: flex; gap: 0.75rem; max-width: 400px; margin: 0 auto; }
.streak-fire { font-family: var(--font-crt); font-size: 1.5rem; color: var(--accent); }

.reaction-screen { height: 280px; border: 2px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; user-select: none; position: relative; overflow: hidden; }
.reaction-screen.wait { background: var(--surface); }
.reaction-screen.ready { background: rgba(220, 40, 54, 0.15); border-color: var(--accent); }
.reaction-screen.go { background: rgba(168, 218, 220, 0.15); border-color: var(--secondary); box-shadow: var(--glow-s); }
.reaction-screen.too-early { background: rgba(255, 170, 0, 0.1); border-color: #ffaa00; }
.reaction-instruction { font-family: var(--font-pixel); font-size: 0.65rem; color: var(--white); text-align: center; line-height: 2; letter-spacing: 0.05em; }
.reaction-time-big { font-family: var(--font-crt); font-size: 6rem; color: var(--secondary); text-shadow: var(--glow-s); }
.reaction-ms { font-family: var(--font-pixel); font-size: 0.5rem; color: var(--muted); letter-spacing: 0.2em; }
.reaction-history { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.reaction-attempt { font-family: var(--font-crt); font-size: 1.2rem; background: var(--surface); border: 1px solid var(--border); padding: 0.3rem 0.6rem; color: var(--muted); }
.reaction-attempt.best { border-color: var(--secondary); color: var(--secondary); text-shadow: var(--glow-s); }

.debug-code-block { background: #0a0a14; border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 1.5rem; font-family: var(--font-code); font-size: 1.1rem; color: #e0e0e0; line-height: 2; margin-bottom: 1.5rem; overflow-x: auto; white-space: pre; }
.debug-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.debug-option { background: var(--surface); border: 2px solid var(--border); padding: 0.85rem 1.1rem; cursor: pointer; font-family: var(--font-code); font-size: 1.1rem; color: var(--white); text-align: left; transition: all 0.2s; }
.debug-option:hover:not(:disabled) { border-color: var(--primary); box-shadow: var(--glow-p); }
.debug-option.correct { border-color: var(--secondary); background: rgba(168,218,220,0.12); color: var(--secondary); }
.debug-option.wrong { border-color: var(--accent); background: rgba(220,40,54,0.1); animation: shake 0.4s; }
.debug-explanation { background: var(--surface); border: 1px solid var(--secondary); padding: 1rem; font-family: var(--font-crt); font-size: 1.2rem; color: var(--secondary); margin-top: 1rem; animation: slide-up 0.3s ease; }

.password-field-row { display: flex; gap: 0.5rem; }
.password-toggle { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 0 1rem; cursor: pointer; font-size: 1.1rem; flex-shrink: 0; transition: all 0.2s; }
.password-toggle:hover { border-color: var(--primary); color: var(--primary); }
.strength-meter { height: 10px; background: var(--surface); border: 1px solid var(--border); margin-top: 0.75rem; overflow: hidden; }
.strength-fill { height: 100%; width: 0%; transition: width 0.4s, background 0.4s; }
.strength-label { font-family: var(--font-pixel); font-size: 0.45rem; margin-top: 0.4rem; letter-spacing: 0.08em; }
.strength-0 .strength-fill { width: 0%; background: transparent; }
.strength-1 .strength-fill { width: 20%; background: var(--accent); box-shadow: var(--glow-a); }
.strength-2 .strength-fill { width: 40%; background: #ff6600; }
.strength-3 .strength-fill { width: 60%; background: #ffaa00; }
.strength-4 .strength-fill { width: 80%; background: #4caf50; }
.strength-5 .strength-fill { width: 100%; background: var(--secondary); box-shadow: var(--glow-s); }
.criteria-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: 1rem; }
.criteria-item { font-family: var(--font-crt); font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--muted); transition: color 0.3s; }
.criteria-item i { font-size: 0.9rem; color: var(--border-bright); transition: color 0.3s; }
.criteria-item.met { color: var(--secondary); }
.criteria-item.met i { color: var(--secondary); }
.password-score-big { font-family: var(--font-crt); font-size: 5rem; color: var(--secondary); text-shadow: var(--glow-s); }

.click-arena { height: 260px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; user-select: none; transition: border-color 0.15s; }
.click-arena.active { border-color: var(--secondary); box-shadow: var(--glow-s); }
.click-arena.active:active { background: rgba(168,218,220,0.05); }
.click-count { font-family: var(--font-crt); font-size: 8rem; color: var(--secondary); text-shadow: var(--glow-s); pointer-events: none; transition: transform 0.05s; }
.click-count.clicked { transform: scale(1.06); }
.click-ripple { position: absolute; border-radius: 50%; background: rgba(168,218,220,0.2); width: 60px; height: 60px; transform: scale(0); animation: ripple-out 0.5s ease; pointer-events: none; }
@keyframes ripple-out { to { transform: scale(4); opacity: 0; } }
.click-rank-display { text-align: center; }
.click-rank-label { font-family: var(--font-pixel); font-size: 0.7rem; color: var(--secondary); text-shadow: var(--glow-s); display: block; margin-top: 0.5rem; }

.memory-grid { display: grid; gap: 8px; justify-content: center; margin: 0 auto; }
.memory-card { aspect-ratio: 1; background: var(--card); border: 2px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; position: relative; transform-style: preserve-3d; perspective: 600px; }
.memory-card-inner { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.4s; }
.memory-card.flipped .memory-card-inner, .memory-card.matched .memory-card-inner { transform: rotateY(180deg); }
.memory-card-front, .memory-card-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; }
.memory-card-front { background: var(--surface); border: 1px solid var(--border); font-size: 1.5rem; color: var(--primary); }
.memory-card-back { background: var(--card); border: 1px solid var(--primary); transform: rotateY(180deg); font-family: var(--font-pixel); font-size: 0.4rem; color: var(--secondary); text-align: center; padding: 0.5rem; }
.memory-card.matched .memory-card-back { border-color: var(--secondary); background: rgba(168,218,220,0.1); box-shadow: var(--glow-s); }
.memory-stats { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1.5rem; }
.memory-stat { text-align: center; }
.memory-stat .v { font-family: var(--font-crt); font-size: 2.5rem; color: var(--secondary); text-shadow: var(--glow-s); }
.memory-stat .k { font-family: var(--font-pixel); font-size: 0.4rem; color: var(--muted); }

.binary-input-area { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.binary-question { font-family: var(--font-crt); font-size: 3.5rem; color: var(--secondary); text-shadow: var(--glow-s); letter-spacing: 0.15em; text-align: center; min-height: 4rem; }
.binary-question .label { font-family: var(--font-pixel); font-size: 0.5rem; color: var(--muted); display: block; margin-bottom: 0.25rem; letter-spacing: 0.1em; }
.binary-input-row { display: flex; gap: 0.75rem; align-items: center; max-width: 400px; width: 100%; }
.binary-answer { font-family: var(--font-crt); font-size: 1.5rem; text-align: center; letter-spacing: 0.1em; }
.binary-direction { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.dir-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 0.4rem 1rem; cursor: pointer; font-family: var(--font-pixel); font-size: 0.4rem; transition: all 0.2s; letter-spacing: 0.05em; }
.dir-btn.active { border-color: var(--primary); color: var(--primary); background: rgba(69,123,157,0.1); }
.binary-score-chart { display: flex; gap: 4px; align-items: flex-end; height: 60px; margin-top: 1rem; }
.binary-bar { width: 16px; background: var(--primary); opacity: 0.7; transition: height 0.5s, background 0.3s; min-height: 3px; }
.binary-bar.correct { background: var(--secondary); opacity: 1; }
.binary-bar.wrong { background: var(--accent); opacity: 1; }

.fill-code-area { max-width: 700px; margin: 0 auto; }
.code-snippet { background: #0a0a14; border: 1px solid var(--border); border-left: 3px solid var(--primary); padding: 1.5rem; font-family: var(--font-code); font-size: 1.2rem; color: #e0e0e0; line-height: 2.2; margin-bottom: 1rem; }
.code-blank { display: inline-block; min-width: 80px; border-bottom: 2px solid var(--secondary); color: var(--secondary); text-align: center; cursor: pointer; font-family: var(--font-code); }
.fill-options { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.fill-option { background: var(--surface); border: 2px solid var(--border); padding: 0.5rem 1.2rem; cursor: pointer; font-family: var(--font-code); font-size: 1.1rem; color: var(--white); transition: all 0.2s; }
.fill-option:hover { border-color: var(--primary); box-shadow: var(--glow-p); }
.fill-option.selected { border-color: var(--primary); background: rgba(69,123,157,0.15); color: var(--secondary); }
.fill-option.correct { border-color: var(--secondary); background: rgba(168,218,220,0.12); }
.fill-option.wrong { border-color: var(--accent); background: rgba(220,40,54,0.1); animation: shake 0.4s; }
.fill-language-tag { font-family: var(--font-pixel); font-size: 0.4rem; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 0.4rem; }

.last-letter-game { max-width: 600px; margin: 0 auto; }
.word-chain { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 60px; background: var(--surface); border: 1px solid var(--border); padding: 0.75rem; margin-bottom: 1rem; align-content: flex-start; }
.chain-word { font-family: var(--font-crt); font-size: 1.3rem; background: var(--card); border: 1px solid var(--border); padding: 0.25rem 0.6rem; color: var(--white); }
.chain-word .highlight { color: var(--accent); font-weight: bold; }
.chain-word.new-word { border-color: var(--secondary); animation: pop-in 0.3s ease; }
.last-letter-hint { font-family: var(--font-pixel); font-size: 0.55rem; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 0.75rem; }
.player-turn-indicator { font-family: var(--font-pixel); font-size: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--primary); color: var(--primary); display: inline-block; margin-bottom: 1rem; letter-spacing: 0.08em; }
.eliminated-player { opacity: 0.4; text-decoration: line-through; }
.player-list-game { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.player-chip { font-family: var(--font-crt); font-size: 1.1rem; padding: 0.3rem 0.75rem; background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: all 0.3s; }
.player-chip.active { border-color: var(--secondary); color: var(--secondary); text-shadow: var(--glow-s); background: rgba(168,218,220,0.08); }
.player-chip.eliminated { border-color: var(--accent); color: var(--accent); text-decoration: line-through; opacity: 0.5; }

@media (max-width: 600px) {
  .quiz-options { grid-template-columns: 1fr; }
  .debug-options { grid-template-columns: 1fr; }
  .wordle-cell { width: 44px; height: 44px; font-size: 0.65rem; }
  .criteria-list { grid-template-columns: 1fr; }
  .binary-question { font-size: 2.5rem; }
  .reaction-time-big { font-size: 4rem; }
}