/* =====================================================
   Chess Master - Tactics Page Styles
   ===================================================== */

.tactics-section {
  --tactics-board-size: min(100%, 560px);
  padding: 1.5rem 0 4rem;
}
.tactics-section .section-head {
  margin-bottom: 1.5rem;
}
.tactics-section .section-tag {
  margin-bottom: 0.55rem;
}
.tactics-section .section-head h1 {
  font-size: var(--font-size-2xl);
  line-height: 1.25;
}

/* Tactics Header */
.tactics-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.tactics-header-left h1 {
  font-size: var(--font-size-2xl); font-weight: 900;
  margin-bottom: 0.25rem;
}
.tactics-header-left p { color: var(--text-secondary); font-size: var(--font-size-sm); }

.tactics-header-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.th-stat {
  text-align: center;
  padding: 0.75rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.th-stat-val { display: block; font-size: var(--font-size-xl); font-weight: 900; color: var(--gold); }
.th-stat-lbl { font-size: var(--font-size-xs); color: var(--text-muted); }

/* Tactics Main Layout */
.tactics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 26vw, 340px);
  gap: 1.5rem;
  align-items: start;
}

/* Puzzle Board Area */
.tactics-board-area,
.puzzle-board-area {
  display: flex; flex-direction: column; gap: 1rem;
  align-items: center;
  min-width: 0;
}

/* Puzzle Info */
.puzzle-topbar,
.puzzle-info-bar {
  width: var(--tactics-board-size);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}
.puzzle-meta-badges,
.pib-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.puzzle-id {
  font-size: var(--font-size-xs); font-family: monospace;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  padding: 0.2rem 0.6rem; border-radius: var(--radius-sm);
}
.theme-badge,
.puzzle-theme-tag {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(102,126,234,0.12);
  color: var(--accent-blue);
  font-size: var(--font-size-xs); font-weight: 700;
}
.diff-badge,
.rating-badge,
.puzzle-diff-badge {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight: 700;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}
.puzzle-diff-badge.easy   { background: rgba(0,255,136,0.1); color: var(--accent-green); }
.puzzle-diff-badge.medium { background: rgba(248,213,109,0.12); color: var(--gold-light); }
.puzzle-diff-badge.hard   { background: rgba(233,69,96,0.1); color: var(--accent-red); }
.diff-badge { background: rgba(248,213,109,0.12); color: var(--gold-light); }
.diff-badge.easy {
  background: rgba(0,255,136,0.1);
  color: var(--accent-green);
  border-color: rgba(0,255,136,0.22);
}
.diff-badge.medium {
  background: rgba(248,213,109,0.12);
  color: var(--gold-light);
  border-color: rgba(248,213,109,0.24);
}
.diff-badge.hard {
  background: rgba(233,69,96,0.12);
  color: var(--accent-red);
  border-color: rgba(233,69,96,0.28);
}
.diff-badge.expert {
  background: rgba(168,85,247,0.14);
  color: #c9a7ff;
  border-color: rgba(168,85,247,0.28);
}
.theme-badge { background: rgba(102,126,234,0.12); color: var(--accent-blue); }
.rating-badge { color: var(--gold-light); }

.puzzle-score-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-weight: 700;
}

.puzzle-score-area strong {
  color: var(--text-primary);
}

.puzzle-rating-display {
  font-size: var(--font-size-lg); font-weight: 900; color: var(--gold);
}
.puzzle-rating-display small { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 400; }

/* Puzzle Board */
.tactics-board-shell {
  position: relative;
  width: var(--tactics-board-size);
  max-width: none;
}

#tactics-board,
#puzzle-board {
  width: 100%;
  max-width: none;
  display: grid; grid-template-columns: repeat(8, 1fr);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), var(--shadow-glow);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
  isolation: isolate;
}

.tactics-board-shell #tactics-board {
  max-width: none;
}

#tactics-board .square,
#tactics-board .sq,
#puzzle-board .sq {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  min-width: 0;
  min-height: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter var(--transition-fast);
}
#tactics-board .light,
#tactics-board .sq-light,
#puzzle-board .sq-light { background: #f0d9b5; }
#tactics-board .dark,
#tactics-board .sq-dark,
#puzzle-board .sq-dark  { background: #b58863; }
#tactics-board.theme-walnut .sq-light,
#puzzle-board.theme-walnut .sq-light {
  background:
    linear-gradient(110deg, rgba(255,255,255,0.16), transparent 45%, rgba(92,57,29,0.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 2px, rgba(104,62,31,0.05) 2px 7px),
    #d8bb8f;
}
#tactics-board.theme-walnut .sq-dark,
#puzzle-board.theme-walnut .sq-dark {
  background:
    linear-gradient(110deg, rgba(255,255,255,0.08), transparent 48%, rgba(52,31,17,0.16)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, rgba(42,24,13,0.09) 2px 7px),
    #8d623d;
}
#tactics-board.theme-tournament .sq-light,
#puzzle-board.theme-tournament .sq-light { background: #eeeed2; }
#tactics-board.theme-tournament .sq-dark,
#puzzle-board.theme-tournament .sq-dark  { background: #769656; }
#tactics-board.theme-slate .sq-light,
#puzzle-board.theme-slate .sq-light { background: #d9e1e8; }
#tactics-board.theme-slate .sq-dark,
#puzzle-board.theme-slate .sq-dark  { background: #5f7688; }
#tactics-board.theme-marble .sq-light,
#puzzle-board.theme-marble .sq-light {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.55), transparent 45%),
    repeating-linear-gradient(35deg, rgba(80,72,62,0.05) 0 2px, transparent 2px 11px),
    #f4efe5;
}
#tactics-board.theme-marble .sq-dark,
#puzzle-board.theme-marble .sq-dark {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), transparent 50%),
    repeating-linear-gradient(35deg, rgba(44,39,34,0.08) 0 2px, transparent 2px 12px),
    #9c9080;
}
#tactics-board.theme-blue .sq-light,
#puzzle-board.theme-blue .sq-light { background: #dee3e6; }
#tactics-board.theme-blue .sq-dark,
#puzzle-board.theme-blue .sq-dark  { background: #8ca2ad; }
#tactics-board.theme-green .sq-light,
#puzzle-board.theme-green .sq-light { background: #ffffdd; }
#tactics-board.theme-green .sq-dark,
#puzzle-board.theme-green .sq-dark  { background: #86a666; }
#tactics-board.theme-dark .sq-light,
#puzzle-board.theme-dark .sq-light { background: #cccccc; }
#tactics-board.theme-dark .sq-dark,
#puzzle-board.theme-dark .sq-dark  { background: #555555; }
#tactics-board.theme-wood .sq-light,
#puzzle-board.theme-wood .sq-light { background: #e8c887; }
#tactics-board.theme-wood .sq-dark,
#puzzle-board.theme-wood .sq-dark  { background: #a17a4a; }
#tactics-board .square:hover,
#tactics-board .sq:hover,
#puzzle-board .sq:hover { filter: brightness(1.1); }
#tactics-board .selected,
#tactics-board .sq.selected,
#puzzle-board .sq.selected { background: rgba(100,200,100,0.75) !important; }
#tactics-board .last-move,
#tactics-board .sq.last-move,
#puzzle-board .sq.last-move { background: rgba(200,180,50,0.55) !important; }
#tactics-board .correct,
#tactics-board .sq.correct,
#puzzle-board .sq.correct   { background: rgba(0,255,136,0.5) !important; animation: flashGreen 0.5s ease; }
#tactics-board .wrong,
#tactics-board .sq.wrong,
#puzzle-board .sq.wrong     { background: rgba(233,69,96,0.6) !important; animation: flashRed 0.5s ease; }
#tactics-board .legal-target::after,
#tactics-board .sq.legal-target::after,
#tactics-board .possible-move::after,
#tactics-board .sq.possible-move::after,
#puzzle-board .sq.possible-move::after {
  content: ''; position: absolute;
  width: 30%; height: 30%;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-full);
}
#tactics-board .legal-capture::after,
#tactics-board .sq.legal-capture::after,
#puzzle-board .sq.legal-capture::after {
  content: '';
  position: absolute;
  inset: 5%;
  border: 3px solid rgba(0,0,0,0.22);
  border-radius: var(--radius-full);
}
#tactics-board .piece,
#puzzle-board .piece {
  line-height: 1; user-select: none;
  cursor: grab;
  transition: transform var(--transition-fast);
}
#tactics-board .piece:hover,
#puzzle-board .piece:hover { transform: scale(1.12); }

#tactics-board.board-disabled .sq,
#tactics-board.board-disabled .piece {
  cursor: not-allowed;
}

.promotion-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  display: flex;
  transform: translate(-50%, -50%);
  flex-direction: column;
  gap: 1rem;
  width: min(92%, 360px);
  padding: 1.25rem;
  border: 2px solid var(--border-glow);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  text-align: center;
}

.promotion-dialog h4 {
  font-size: var(--font-size-base);
  font-weight: 800;
}

.promotion-pieces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.promotion-pieces button {
  min-height: 48px;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition-fast);
}

.promotion-pieces button:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,168,76,0.1);
}

@keyframes flashGreen {
  0%,100% { background: rgba(0,255,136,0.5) !important; }
  50%      { background: rgba(0,255,136,0.8) !important; }
}
@keyframes flashRed {
  0%,100% { background: rgba(233,69,96,0.5) !important; }
  50%      { background: rgba(233,69,96,0.9) !important; }
}

/* Puzzle Turn Prompt */
.move-sequence,
.puzzle-turn-prompt {
  width: var(--tactics-board-size);
  max-width: none;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm); font-weight: 600;
  text-align: center; color: var(--text-secondary);
}
.turn-label {
  display: block;
  color: var(--gold-light);
}
.puzzle-turn-prompt.white { color: var(--gold-light); border-color: rgba(248,213,109,0.2); }
.puzzle-turn-prompt.black { color: #aaa; }

/* Puzzle Feedback */
.puzzle-message,
.puzzle-feedback {
  width: var(--tactics-board-size);
  max-width: none;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base); font-weight: 700;
  text-align: center;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.puzzle-feedback.correct {
  display: block;
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.3);
  color: var(--accent-green);
}
.puzzle-feedback.wrong {
  display: block;
  background: rgba(233,69,96,0.08);
  border: 1px solid rgba(233,69,96,0.3);
  color: var(--accent-red);
}
.puzzle-feedback.info {
  display: block;
  background: rgba(201,168,76,0.08);
  border: 1px solid var(--border-glow);
  color: var(--gold-light);
}

.puzzle-message.msg-success,
.puzzle-message.msg-correct {
  background: rgba(0,255,136,0.08);
  border-color: rgba(0,255,136,0.28);
  color: var(--accent-green);
}

.puzzle-message.msg-error {
  background: rgba(233,69,96,0.08);
  border-color: rgba(233,69,96,0.28);
  color: var(--accent-red);
}

.puzzle-message.msg-info,
.puzzle-message.msg-hint,
.puzzle-message.msg-loading {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.26);
  color: var(--gold-light);
}

/* Puzzle Sidebar */
.tactics-sidebar,
.puzzle-sidebar { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 90px; }

.rating-card,
.daily-progress-card,
.filter-card,
.moves-panel-card,
.login-prompt-card,
.puzzle-controls,
.solution-panel,
.puzzle-progress-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.rating-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rc-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201,168,76,0.12);
  color: var(--gold-light);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.rc-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.rc-val {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.rc-lbl,
.rc-change,
#dp-text {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.daily-progress-card h4,
.filter-card h4,
.moves-panel-card h4,
.login-prompt-card p {
  margin-bottom: 1rem;
}

.dp-bar {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  margin-bottom: 0.75rem;
}

.dp-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-green), var(--gold));
  transition: width 0.35s ease;
}

.filter-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.filter-group label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 700;
}

.filter-group select {
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  outline: none;
}

.filter-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

.btn-load-puzzle,
.btn-outline,
.tac-btn {
  min-height: 48px;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-load-puzzle:hover,
.btn-outline:hover,
.tac-btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-glow);
  background: rgba(255,255,255,0.05);
}

.tactics-btns {
  width: var(--tactics-board-size);
  max-width: none;
  display: flex;
  gap: 0.75rem;
}
.tactics-btns .tac-btn {
  flex: 1;
  min-width: 0;
}

.tac-btn.primary,
.btn-load-puzzle {
  background: var(--gradient-gold);
  color: var(--bg-primary);
  border-color: transparent;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.moves-track {
  min-height: 120px;
  max-height: 280px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: flex-start;
}

.moves-track:empty::before {
  content: attr(data-empty);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.moves-track > * {
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: var(--font-size-xs);
}

.login-prompt-card {
  text-align: center;
}

.login-prompt-card .btn-outline {
  width: 100%;
  margin-top: 0.25rem;
}

/* Puzzle Controls Card */
.puzzle-controls {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
}
.puzzle-controls h3 {
  font-size: var(--font-size-sm); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 1.25rem;
}
.puzzle-action-btns { display: flex; flex-direction: column; gap: 0.5rem; }
.puzzle-btn {
  width: 100%;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer; transition: var(--transition-fast);
  text-align: right;
}
.puzzle-btn .pb-icon { font-size: 1.2rem; }
.puzzle-btn:hover { border-color: var(--border-glow); color: var(--text-primary); background: rgba(255,255,255,0.05); }
.puzzle-btn.primary {
  background: var(--gradient-gold);
  border-color: transparent;
  color: var(--bg-primary);
  font-weight: 800;
}
.puzzle-btn.primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn); }
.puzzle-btn.hint-btn:hover { border-color: rgba(248,213,109,0.4); color: var(--gold-light); background: rgba(248,213,109,0.06); }
.puzzle-btn.danger:hover { border-color: rgba(233,69,96,0.4); color: var(--accent-red); background: rgba(233,69,96,0.06); }

/* Solution Panel */
.solution-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: none;
}
.solution-panel.visible { display: block; }
.solution-panel h4 {
  font-size: var(--font-size-sm); font-weight: 800;
  color: var(--gold); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.solution-moves { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sol-move {
  padding: 0.2rem 0.5rem;
  background: rgba(201,168,76,0.08);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); font-weight: 600; font-family: monospace;
  color: var(--gold-light);
}
.solution-explanation {
  margin-top: 1rem;
  font-size: var(--font-size-sm); color: var(--text-secondary);
  line-height: 1.7;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* Puzzle Progress Card */
.puzzle-progress-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
}
.puzzle-progress-card h4 {
  font-size: var(--font-size-sm); font-weight: 800;
  margin-bottom: 1rem; color: var(--text-primary);
}
.progress-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; text-align: center; }
.ps-item .ps-val { display: block; font-size: var(--font-size-xl); font-weight: 900; }
.ps-item.correct .ps-val { color: var(--accent-green); }
.ps-item.wrong .ps-val   { color: var(--accent-red); }
.ps-item.streak .ps-val  { color: var(--gold); }
.ps-item .ps-lbl { font-size: 10px; color: var(--text-muted); }

.session-bar {
  margin-top: 1rem;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-full); overflow: hidden;
}
.session-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-green), var(--gold));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* Rating Change Display */
.rating-change-display {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  text-align: center;
}
.rcd-label { font-size: var(--font-size-xs); color: var(--text-muted); }
.rcd-value { font-size: var(--font-size-2xl); font-weight: 900; color: var(--gold); }
.rcd-change { font-size: var(--font-size-sm); font-weight: 700; }
.rcd-change.up   { color: var(--accent-green); }
.rcd-change.down { color: var(--accent-red); }

/* Filter Row */
.tactics-filter-row {
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.5rem;
}
.tactics-filter-row label {
  font-size: var(--font-size-sm); font-weight: 700; color: var(--text-muted);
}
.tactic-filter-select {
  padding: 0.45rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  outline: none; cursor: pointer;
  transition: var(--transition-fast);
}
.tactic-filter-select:focus { border-color: var(--gold); }

/* Responsive Tactics */
@media (max-width: 1000px) {
  .tactics-layout { grid-template-columns: 1fr; }
  .tactics-section { --tactics-board-size: min(100%, 600px); }
  .tactics-sidebar,
  .puzzle-sidebar { position: relative; top: auto; }
  .puzzle-action-btns { flex-direction: row; flex-wrap: wrap; }
  .puzzle-btn { flex: 1; min-width: 130px; }
}
@media (max-width: 600px) {
  .tactics-section {
    --tactics-board-size: 100%;
    padding-top: 1rem;
    padding-bottom: 2.5rem;
  }
  #tactics-board,
  #puzzle-board { max-width: 100%; }
  .tactics-header { flex-direction: column; align-items: flex-start; }
  .puzzle-topbar,
  .puzzle-info-bar {
    padding: 0.75rem;
    gap: 0.65rem;
  }
  .puzzle-meta-badges,
  .pib-meta {
    gap: 0.4rem;
  }
  .puzzle-score-area {
    gap: 0.65rem;
  }
  .tactics-btns {
    gap: 0.5rem;
  }
  .tac-btn {
    min-height: 44px;
    padding-inline: 0.5rem;
  }
  .puzzle-message,
  .puzzle-feedback,
  .move-sequence,
  .puzzle-turn-prompt {
    border-radius: 8px;
  }
}
@media (max-width: 380px) {
  .theme-badge,
  .diff-badge,
  .rating-badge,
  .puzzle-diff-badge {
    padding-inline: 0.55rem;
  }
  .tac-btn {
    font-size: 0.75rem;
  }
}