/* Shared layout and appearance for game-control Web Components. */
:root {
  --icon-btn-size: 3.2rem;
  --icon-svg-size: 1.6rem;
  --icon-fg: #fffaf0;
  --icon-btn-bg: linear-gradient(180deg, #dc9a4c, var(--accent));
  --icon-btn-bg-hover: linear-gradient(180deg, #e2a55a, #cf8438);
  --icon-btn-bg-white: linear-gradient(180deg, #fff, #eeeae2);
  --icon-btn-border-white: #948c7e;
  --icon-btn-bg-black: linear-gradient(180deg, #383838, #101010);
  --icon-btn-border-black: #666;
  --favorite-accent: #ac6627;
  --icon-btn-bg-featured: linear-gradient(180deg, #dc9a4c, #c9762f);
}
chess-toolbar {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
chess-action, chess-level, chess-spacer { display: block; margin-block: .15rem; }
.control-group { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.control-group > chess-action, .control-group > chess-level, .control-group > chess-turn { margin: 0; }
chess-toolbar { gap: .5rem; overflow: visible; padding: 0; background: transparent; border: 0; box-shadow: none; }
chess-toolbar > chess-spacer { height: .55rem; margin: 0; }
.picker-tools .control-group, .pgn-card-actions .control-group { flex-direction: row; }
.picker-tools > chess-spacer { width: .65rem; height: var(--icon-btn-size); margin: 0; }
.pgn-card-actions > chess-spacer { width: .35rem; height: var(--icon-btn-size); margin: 0; }
chess-spacer { width: var(--icon-btn-size); height: var(--icon-btn-size); flex-shrink: 0; pointer-events: none; }
chess-spacer[size="small"], chess-action[size="small"] {
  --icon-btn-size: 34px;
  --icon-svg-size: 18px;
}
chess-action[size="small"] .icon-btn {
  min-height: 0;
  box-shadow: 0 3px 7px rgba(var(--shell-shadow, 40, 30, 10), .18), inset 0 1px 0 rgba(255, 255, 255, .4);
}
chess-action[size="small"] .icon-btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
chess-appearance { display: contents; }
chess-action[hidden], chess-level[hidden], chess-toolbar[hidden], chess-appearance[hidden], chess-spacer[hidden] { display: none; }
.icon-btn, chess-turn {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--accent-dark);
  background: var(--icon-btn-bg);
  box-shadow: 0 6px 14px rgba(var(--shell-shadow, 40, 30, 10), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
chess-turn { cursor: default; }
.icon-btn:hover {
  background: var(--icon-btn-bg-hover);
}
.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.icon-btn:disabled:hover {
  background: var(--icon-btn-bg);
}
.icon-btn svg {
  display: block;
  flex-shrink: 0;
  width: var(--icon-svg-size);
  height: var(--icon-svg-size);
  stroke: var(--icon-fg);
  fill: none;
}

chess-toolbar .icon-btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 4px; }
.icon-btn[data-icon="hint"] svg, .icon-btn[data-icon="profile"] svg { fill: var(--icon-fg); stroke: none; }
.icon-btn[data-icon="restart"]:hover svg { transform: rotate(-25deg); }
.level-dot { fill: var(--icon-fg); opacity: .3; stroke: none; transition: opacity .15s ease; }
.level-dot.filled { opacity: 1; }
.icon-btn[data-icon="piece"] { padding: .45rem; }
.icon-btn[data-icon="theme"] { padding: .7rem; }
.piece-glyph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.5rem; line-height: 1; user-select: none; }
.icon-btn[data-icon="piece"] .piece-glyph { background-size: contain; background-repeat: no-repeat; background-position: center; filter: var(--piece-filter); }
.icon-btn[data-piece="rook"] .piece-glyph { background-image: var(--active-rook); }
.icon-btn[data-piece="bishop"] .piece-glyph { background-image: var(--active-bishop); }
.icon-btn[data-piece="queen"] .piece-glyph { background-image: var(--active-queen); }
.icon-btn[data-piece="knight"] .piece-glyph { background-image: var(--active-knight); }
.icon-btn[data-piece="king"] .piece-glyph { background-image: var(--active-king); }
.icon-btn[data-color="w"], .icon-btn[data-color="w"]:hover, chess-turn[color="w"] { background: var(--icon-btn-bg-white); border-color: var(--icon-btn-border-white); }
.icon-btn[data-color="w"] svg { stroke: #202020; }
.icon-btn[data-color="b"], .icon-btn[data-color="b"]:hover, chess-turn[color="b"] { background: var(--icon-btn-bg-black); border-color: var(--icon-btn-border-black); }
.icon-btn[data-color="b"] svg { stroke: #fff; }
.rating-badge { font-size: 1.05rem; font-weight: 700; color: var(--icon-fg); }
.icon-btn[data-favorite="none"] svg { opacity: .4; fill: none; }
.icon-btn[data-favorite="favorite"] svg { stroke: var(--icon-fg); fill: none; }
.icon-btn[data-favorite="featured"] { background: var(--icon-btn-bg-featured); border-color: var(--favorite-accent); }
.icon-btn[data-favorite="featured"]:hover:not(:disabled) { background: var(--icon-btn-bg-hover); }
.icon-btn[data-favorite="featured"] svg { stroke: var(--icon-fg); fill: none; }

chess-turn[hidden] { display: none; }

@media (max-width: 700px) {
  chess-toolbar .control-group { flex-direction: row; }
  chess-toolbar > chess-spacer { width: .55rem; height: var(--icon-btn-size); }
  chess-toolbar {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    gap: .65rem;
  }
}
@media (max-width: 760px) {
  .pgn-player chess-toolbar.pgn-tools .control-group { flex-direction: row; }
  .pgn-player chess-toolbar.pgn-tools > chess-spacer { width: .55rem; height: var(--icon-btn-size); }
  .pgn-player chess-toolbar.pgn-tools { position: static; right: auto; top: auto; transform: none; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0 0 1rem; }
}
.icon-btn[data-icon="group"][aria-pressed="false"] svg { opacity: .4; }