/* TJK-Chess 15.1.0 tactics navigation, rewards and sound control. */
.site-sound-toggle { font-size:1.05rem; }
.site-sound-toggle.is-muted { opacity:.62; }
.tactics-menu-summary { display:grid; gap:8px; margin:6px 8px 8px; padding:10px; border-radius:10px; background:var(--tjk-soft,#f2f5fa); color:var(--tjk-text,#0d1b3d); }
.tactics-menu-summary strong { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tactics-menu-summary strong span { color:#b07b00; }
.tactics-badges { display:flex; flex-wrap:wrap; gap:5px; }
.tactics-badge { padding:3px 6px; border-radius:999px; border:1px solid var(--tjk-border,#d8e1ee); color:#75839a; font-size:.7rem; white-space:nowrap; }
.tactics-badge.is-earned { border-color:#e1b438; background:#fff4cb; color:#513900; }
.tactics-next-badge { color:#64748b; font-size:.72rem; }
.tactics-award-toast { position:fixed; right:22px; bottom:22px; z-index:20000; display:grid; gap:3px; min-width:260px; max-width:min(360px,calc(100vw - 32px)); padding:15px 17px; border:1px solid #e4bd48; border-radius:13px; background:#fff8dc; color:#102047; box-shadow:0 18px 48px rgba(15,29,61,.28); opacity:0; transform:translateY(16px); transition:.22s ease; }
.tactics-award-toast.is-visible { opacity:1; transform:none; }
.tactics-award-toast strong { font-size:1.15rem; color:#9b6800; }
.tactics-award-toast b { margin-top:5px; }
html[data-theme="dark"] .tactics-menu-summary { background:#151d2d; color:#f3f6fc; }
html[data-theme="dark"] .tactics-badge { border-color:#35415a; color:#9eabc0; }
html[data-theme="dark"] .tactics-badge.is-earned { background:#493b13; border-color:#9b7a20; color:#ffe59b; }
html[data-theme="dark"] .tactics-award-toast { background:#27210f; color:#f8f4e8; border-color:#80651d; }
@media(max-width:760px){.tactics-award-toast{right:12px;bottom:12px}.tactics-menu-summary{margin:4px 0}}
.tactics-reward-strip { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:0 0 14px; padding:10px 13px; border:1px solid var(--tjk-border,#dce4ef); border-radius:12px; background:var(--tjk-card,#fff); }
.tactics-reward-strip > strong { white-space:nowrap; color:#9b6800; }
.tactics-reward-strip > small { margin-left:auto; color:#64748b; }
html[data-theme="dark"] .tactics-reward-strip { background:#101827; border-color:#2e3a52; }
@media(max-width:620px){.tactics-reward-strip>small{width:100%;margin-left:0}}
.tactics-reward-strip { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:0 0 14px; padding:10px 13px; border:1px solid var(--tjk-border,#dce4ef); border-radius:12px; background:var(--tjk-card,#fff); }
.tactics-reward-strip > strong { white-space:nowrap; color:#9b6800; }
.tactics-reward-strip > small { margin-left:auto; color:#64748b; }
html[data-theme="dark"] .tactics-reward-strip { background:#101827; border-color:#2e3a52; }
@media(max-width:620px){.tactics-reward-strip>small{width:100%;margin-left:0}}


/* v15.1.2 sound-volume popover. */
.site-volume-control { position:relative; display:inline-grid; place-items:center; }
.site-volume-popover {
  position:absolute;
  z-index:25000;
  top:calc(100% + 8px);
  right:-8px;
  display:grid;
  gap:9px;
  width:220px;
  padding:12px;
  border:1px solid var(--tjk-border,#d7dfeb);
  border-radius:12px;
  background:var(--tjk-card,#fff);
  color:var(--tjk-text,#102047);
  box-shadow:0 16px 42px rgba(15,29,61,.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px);
  transition:.15s ease;
}
.site-volume-control:hover .site-volume-popover,
.site-volume-control:focus-within .site-volume-popover,
.site-volume-control.is-open .site-volume-popover { opacity:1; visibility:visible; transform:none; }
.site-volume-popover label { display:grid; gap:7px; font-size:.78rem; font-weight:850; }
.site-volume-popover input[type="range"] { width:100%; accent-color:#315be8; }
.site-volume-popover button { min-height:34px; border:1px solid var(--tjk-border,#d7dfeb); border-radius:8px; background:transparent; color:inherit; font-weight:800; cursor:pointer; }
.site-volume-popover button:hover { background:var(--tjk-soft,#f2f5fa); }
html[data-theme="dark"] .site-volume-popover { background:#151d2d; border-color:#35415a; color:#f3f6fc; }