:root {
  color-scheme: dark;
  --bg: #121212;
  --surface: #1e1e1e;
  --surface-strong: #272727;
  --text: #f3f3f3;
  --muted: #c0c0c0;
  --accent: #8c78ff;
  --accent-soft: #4f46e5;
  --border: #333;
  --paper: var(--bg);
  --ink: var(--text);
  --line: var(--border);
  --green: var(--accent);
  --green-soft: rgba(140, 120, 255, 0.18);
  --coral: #ff806a;
  --white: var(--surface);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at top, #262136 0%, var(--bg) 45%);
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.hidden { display: none !important; }

.playground-header {
  min-height: 68px;
  padding: 0 5vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.wordmark { grid-column: 1; justify-self: start; }
.environment-badge { grid-column: 2; grid-row: 1; justify-self: center; }
.playground-header-meta { grid-column: 3; display: flex; align-items: center; justify-self: end; gap: 1rem; }
.playground-user { min-width: 0; display: flex; align-items: center; gap: 0.55rem; }
.playground-user-avatar { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--border); border-radius: 50%; object-fit: cover; }
.playground-user-name { max-width: 180px; overflow: hidden; color: var(--text); font-size: 0.85rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.playground-user-role { padding: 0.22rem 0.5rem; border: 1px solid rgba(140, 120, 255, 0.48); border-radius: 999px; background: var(--green-soft); color: #ddd7ff; font-size: 0.68rem; font-weight: 800; }
.playground-user-role.owner { border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.18); color: #fef3c7; }
.playground-user-role.admin { border-color: rgba(140, 120, 255, 0.48); background: var(--green-soft); color: #ddd7ff; }

.wordmark, .home-link, .back-link {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 800;
}

.wordmark { display: flex; align-items: center; gap: 0.8rem; }
.wordmark span, .eyebrow { color: var(--green); font-size: 0.72rem; font-weight: 800; }
.home-link span { color: var(--coral); }
.environment-badge { padding: 0.25rem 0.55rem; border: 1px solid rgba(245, 158, 11, 0.55); border-radius: 999px; background: rgba(245, 158, 11, 0.22); color: #fef3c7; font-size: 0.7rem; font-weight: 800; }

.playground-main { width: min(920px, 90vw); margin: 0 auto; padding: clamp(3rem, 9vh, 6.5rem) 0 5rem; }
.hub-heading { margin-bottom: 2.5rem; }
h1 { margin: 0; font-family: inherit; font-size: 3rem; font-weight: 700; line-height: 1.08; }
.eyebrow { margin: 0 0 0.8rem; }
.game-list { border-top: 1px solid var(--line); }
.tag-master-modes { display: grid; gap: 1.5rem; }
.tag-master-mode-list { border-top: 1px solid var(--line); }
.concept-clash-panel { display: grid; gap: 1.5rem; }
.concept-clash-pvp-view { display: grid; gap: 1.5rem; }
.concept-clash-match-play { display: grid; gap: 1rem; }
.concept-clash-match-play.match-maximized { position: fixed; z-index: 100; inset: 0; width: auto; height: 100dvh; min-height: 100dvh; max-height: 100dvh; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; overflow-y: auto; align-content: stretch; padding: clamp(1rem, 3vw, 2.5rem); background: var(--surface); }
.concept-clash-match-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.concept-clash-match-header > :last-child { justify-self: end; }
.concept-clash-match-header #concept-clash-match-leave { justify-self: center; }
.concept-clash-match-header #concept-clash-match-leave { width: auto; min-width: 0; white-space: nowrap; }
.concept-clash-match-header h3 { margin: 0; overflow-wrap: anywhere; font-size: 1.2rem; }
.concept-clash-match-rules { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.match-round-label, .match-player-label { color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.concept-clash-progress-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.concept-clash-progress-board { min-width: 0; padding: 0.75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.concept-clash-progress-board h4 { margin: 0 0 0.65rem; overflow-wrap: anywhere; font-size: 0.82rem; }
.concept-clash-progress-grid { display: grid; grid-template-columns: minmax(4.2rem, 1fr) repeat(3, minmax(2.5rem, 0.65fr)); gap: 0.3rem; align-items: stretch; }
.progress-grid-color-header { min-width: 0; display: grid; justify-items: center; gap: 0.25rem; color: var(--muted); font-size: 0.62rem; }
.progress-grid-element { display: flex; align-items: center; color: var(--text); font-size: 0.68rem; font-weight: 700; }
.progress-grid-cell { min-height: 30px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 6px; background: var(--surface-strong); }
.progress-grid-cell.earned { border-style: solid; border-color: var(--accent); background: var(--green-soft); }
.progress-color-dot { width: 0.85rem; height: 0.85rem; display: inline-block; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; }
.progress-color-dot.purple { background: #9e86ff; }
.progress-color-dot.blue { background: #5ba8ff; }
.progress-color-dot.red { background: #f06c72; }
.concept-clash-match-playmat { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); }
.concept-clash-match-play.match-maximized .concept-clash-match-playmat { min-height: 0; height: 100%; box-sizing: border-box; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.concept-clash-match-play.match-maximized .concept-clash-match-side { height: 100%; min-height: 0; width: 100%; grid-template-rows: auto minmax(0, 1fr); }
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot { min-height: 0; height: 100%; border: 0; padding: 0; overflow: hidden; }
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot .concept-clash-match-card,
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot .concept-clash-hidden-card { display: flex; flex-direction: column; height: 100%; width: auto; max-width: min(100%, 340px); min-height: 0; aspect-ratio: 5 / 6; box-sizing: border-box; }
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot .concept-clash-hidden-card { justify-content: center; align-items: center; }
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot .match-card-image { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot .match-card-copy { flex: none; }
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot .match-card-copy { padding: 0.8rem; }
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot .match-card-copy strong { font-size: 1rem; }
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot .match-card-copy span,
.concept-clash-match-play.match-maximized .concept-clash-match-card-slot .match-card-copy small { font-size: 0.85rem; }
.concept-clash-match-play.match-maximized .concept-clash-hidden-card span { width: 3.5rem; height: 3.5rem; font-size: 2rem; }
.concept-clash-match-side { min-width: 0; display: grid; justify-items: center; gap: 0.65rem; }
.concept-clash-match-card-slot { width: 100%; min-height: 210px; display: grid; place-items: center; padding: 0.5rem; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; }
.concept-clash-hidden-card { width: min(100%, 190px); min-height: 210px; display: grid; align-content: center; justify-items: center; gap: 0.7rem; border: 2px solid #9e86ff; border-radius: 8px; background: repeating-linear-gradient(135deg, #34313c, #34313c 10px, #3d3948 10px, #3d3948 20px); color: #d6cbff; }
.concept-clash-hidden-card span { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid #9e86ff; border-radius: 50%; font-size: 1.4rem; font-weight: 900; }
.concept-clash-hidden-card small { font-size: 0.72rem; font-weight: 800; }
.match-playmat-divider { color: var(--accent); font-size: 0.8rem; font-weight: 900; }
.concept-clash-match-result { grid-column: 1 / -1; min-height: 1.3rem; margin: 0; color: var(--accent); font-size: 0.85rem; font-weight: 800; text-align: center; }
.concept-clash-match-card { width: min(100%, 190px); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); text-align: left; }
.concept-clash-match-card[data-color="purple"] { border-color: #9e86ff; }
.concept-clash-match-card[data-color="blue"] { border-color: #5ba8ff; }
.concept-clash-match-card[data-color="red"] { border-color: #f06c72; }
.match-card-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-strong); }
.match-card-image-empty { background: var(--surface-strong); }
.match-card-copy { display: grid; gap: 0.25rem; padding: 0.55rem; }
.match-card-copy strong { overflow-wrap: anywhere; font-size: 0.8rem; }
.match-card-copy span, .match-card-copy small { color: var(--muted); font-size: 0.7rem; }
.concept-clash-match-hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; }
button.match-hand-card { width: 100% !important; min-width: 0; display: block; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--text) !important; text-align: left; }
button.match-hand-card:not(:disabled):hover { transform: translateY(-3px); filter: brightness(1.08); }
button.match-hand-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button.match-hand-card:disabled { cursor: not-allowed; opacity: 0.65; }
.concept-clash-option-list { border-top: 1px solid var(--line); }
.concept-clash-choice .game-number { color: var(--accent); }
.deck-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.deck-list-heading-actions { display: flex; align-items: center; gap: 0.8rem; }
.deck-list-heading-actions button { margin: 0 !important; }
.deck-count { color: var(--muted); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.concept-clash-deck-list { display: grid; gap: 0.65rem; }
.concept-clash-deck-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.concept-clash-deck-row.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--green-soft); }
.concept-clash-pvp-deck-section { display: grid; gap: 0.65rem; }
.concept-clash-pvp-deck-section + .game-actions { margin-top: 0.65rem; }
.concept-clash-pvp-deck-section h3, .concept-clash-pvp-deck-help { margin: 0; }
.concept-clash-pvp-deck-section h3 { font-size: 1rem; }
.concept-clash-pvp-deck-help { color: var(--muted); font-size: 0.8rem; }
.concept-clash-deck-row.concept-clash-pvp-deck { border: 2px solid var(--accent); background: #37343f; }
button.concept-clash-deck-row.concept-clash-pvp-deck:not(.selected) { background: #37343f; color: var(--text); }
.concept-clash-deck-row.concept-clash-pvp-deck.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #725cff; color: #fff; }
.concept-clash-pvp-deck.selected .concept-clash-deck-info p,
.concept-clash-pvp-deck.selected .deck-eligibility,
.concept-clash-pvp-deck.selected .deck-select-label { color: #fff; }
.concept-clash-pvp-deck:disabled { cursor: not-allowed; }
.concept-clash-deck-row.ineligible { border-color: rgba(240, 108, 114, 0.65); }
.concept-clash-deck-info { min-width: 0; }
.concept-clash-deck-info h3, .concept-clash-deck-info p { margin: 0; }
.concept-clash-deck-info h3 { overflow-wrap: anywhere; font-size: 0.95rem; }
.concept-clash-deck-info p { margin-top: 0.3rem; color: var(--muted); font-size: 0.75rem; }
.deck-select-label { color: var(--accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.deck-eligibility.eligible { color: #8de2a4; }
.deck-eligibility.ineligible { color: #ff9298; }
.concept-clash-deck-actions { display: flex; flex: 0 0 auto; gap: 0.5rem; }
.concept-clash-deck-actions button { min-height: 36px !important; padding: 0.45rem 0.7rem !important; font-size: 0.75rem; }
.concept-clash-deck-editor { display: grid; gap: 1rem; }
.deck-name-field { display: grid; gap: 0.4rem; width: min(100%, 480px); margin: 0; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.deck-name-field input { margin: 0; }
.deck-rules-summary { padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 0.8rem; font-weight: 700; }
.deck-card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.7rem; }
.deck-card-choice { width: 100% !important; min-width: 0; display: grid !important; grid-template-rows: auto auto auto 1fr; gap: 0.35rem; margin: 0 !important; padding: 0.45rem !important; overflow: hidden; border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--surface) !important; color: var(--text) !important; text-align: left; }
.deck-card-choice.selected { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent); background: var(--green-soft) !important; }
.deck-card-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: var(--surface-strong); }
.deck-card-choice-name { display: -webkit-box; min-height: 2.4em; overflow: hidden; font-size: 0.76rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.deck-card-choice-meta { color: var(--muted); font-size: 0.65rem; line-height: 1.2; }
.deck-card-selected-indicator { align-self: end; color: var(--accent); font-size: 0.64rem; font-weight: 800; }
.deck-editor-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; }
.deck-editor-actions button { margin: 0 !important; }
.deck-editor-actions #concept-clash-deck-delete { color: #ff9298 !important; }
.owned-concept-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.owned-concept-card:not(.game-choice):not(.back-link) { width: 100%; min-width: 0; min-height: 0; display: grid; gap: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); text-align: left; }
.owned-concept-card:not(.game-choice):not(.back-link):hover { transform: translateY(-1px); filter: none; }
.owned-concept-card.has-card[data-color="purple"] { border-color: #9e86ff; box-shadow: inset 0 0 0 1px rgba(158, 134, 255, 0.45); }
.owned-concept-card.has-card[data-color="blue"] { border-color: #5ba8ff; box-shadow: inset 0 0 0 1px rgba(91, 168, 255, 0.42); }
.owned-concept-card.has-card[data-color="red"] { border-color: #f06c72; box-shadow: inset 0 0 0 1px rgba(240, 108, 114, 0.42); }
.owned-concept-image, .owned-concept-image-placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-strong); }
.owned-concept-name { display: -webkit-box; min-height: 2.6em; padding: 0.6rem 0.6rem 0.3rem; overflow: hidden; color: var(--text); font-size: 0.82rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-status-strip { min-height: 2.25rem; display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem 0.55rem; color: var(--muted); font-size: 0.7rem; }
.card-status-strip.has-card { color: var(--text); }
.card-status-swatch { width: 0.7rem; height: 0.7rem; flex: 0 0 0.7rem; border-radius: 50%; background: var(--accent); }
.card-status-strip[data-color="blue"] .card-status-swatch { background: #5ba8ff; }
.card-status-strip[data-color="red"] .card-status-swatch { background: #f06c72; }
.card-status-copy { min-width: 0; display: grid; gap: 0.15rem; }
.card-status-copy strong { overflow: hidden; font-size: 0.72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.card-status-copy small { color: var(--muted); font-size: 0.66rem; }
.mode-unavailable { opacity: 0.5; }
.game-choice {
  width: 100%; min-height: 112px; display: grid; grid-template-columns: 4rem 1fr 2rem; align-items: center; gap: 1rem;
  padding: 1.2rem 1rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left;
}
.game-choice:hover, .game-choice:focus-visible { background: var(--surface); outline: none; }
.game-number { color: var(--green); font-size: 1.1rem; font-weight: 800; }
.random-choice .game-number { color: var(--coral); }
.game-copy { display: grid; gap: 0.35rem; }
.game-copy strong { font-size: 1.25rem; font-weight: 700; }
.game-copy small { color: var(--muted); font-size: 0.9rem; }
.game-arrow { color: var(--green); font-size: 1.5rem; text-align: right; }

.access-state { max-width: 560px; padding-top: 4vh; }
.access-state p:not(.eyebrow), .game-heading > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.access-actions { margin-top: 1.5rem; }
.access-actions a { color: var(--green); font-weight: 800; }
.game-view { display: grid; gap: 1.4rem; }
.back-link { width: max-content; padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-strong); color: var(--green); font-size: 1.05rem; cursor: pointer; }
.back-link:hover { border-color: var(--green); }
#concept-clash-game:has(> .concept-clash-panel:not(#concept-clash-home):not(.hidden)) > .back-link,
#concept-clash-pvp:has(#concept-clash-pvp-quick-match:not(.hidden)) > .back-link,
#concept-clash-decks:has(#concept-clash-deck-editor:not(.hidden)) > .back-link,
#tag-master-game:has(#tag-master-solo:not(.hidden)) > .back-link { display: none; }
@media (min-width: 1200px) {
  .back-link { position: fixed; z-index: 5; top: 6rem; left: clamp(1rem, 3vw, 3rem); }
}
.game-heading { max-width: 680px; }
.game-heading > p:not(.eyebrow) { max-width: 620px; }
.setup-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.setup-row label, .search-label { color: var(--muted); font-size: 0.82rem; font-weight: 800; }
input { min-height: 42px; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); }
#tag-master-rounds { width: 5rem; }
button:not(.game-choice):not(.back-link), .action-link { width: auto; min-height: 42px; margin: 0; padding: 0.75rem 1rem; border: 1px solid transparent; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: white; font-weight: 800; transition: transform 0.2s ease, filter 0.2s ease; }
button:not(.game-choice):not(.back-link):hover { transform: translateY(-1px); filter: brightness(1.05); }
button:disabled { cursor: wait; opacity: 0.6; }
.quiet-button { background: rgba(255,255,255,0.08) !important; color: var(--ink) !important; border-color: rgba(255,255,255,0.12) !important; }
.status-line { min-height: 1.4rem; margin: 0; color: var(--muted); }
.status-line.error { color: #a8392f; }
.tag-master-play { display: grid; gap: 1.1rem; }
.scoreboard { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; color: var(--muted); font-size: 0.9rem; font-weight: 800; }
.round-image { display: block; width: min(100%, 760px); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #111; }
.round-image img { display: block; width: 100%; max-height: 56vh; object-fit: contain; }
.answer-controls { width: min(100%, 760px); display: grid; gap: 1rem; }
.selected-tags { min-height: 2rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.selected-tag { border: 1px solid rgba(140, 120, 255, 0.55) !important; border-radius: 999px !important; background: var(--green-soft) !important; color: var(--ink) !important; font-size: 0.82rem; }
.search-label { display: grid; gap: 0.4rem; }
.taxonomy { display: grid; gap: 0.8rem; }
.taxonomy-main, .taxonomy-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.taxonomy-chip { min-height: 34px !important; padding: 0.4rem 0.65rem !important; border: 1px solid var(--line) !important; border-radius: 999px !important; background: rgba(255,255,255,0.08) !important; color: var(--ink) !important; font-size: 0.8rem; font-weight: 700 !important; }
.taxonomy-chip.active, .taxonomy-chip.selected { border-color: var(--green) !important; background: var(--green-soft) !important; }
.taxonomy-group { width: 100%; padding-top: 0.55rem; border-top: 1px solid var(--line); }
.taxonomy-group h3 { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.game-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
#concept-clash-match-key { flex: 0 1 16rem; min-width: 9rem; }
.feedback, .results { width: min(100%, 760px); display: grid; gap: 1rem; }
.feedback-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.feedback-group { padding: 0.8rem; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 8px; background: var(--surface); }
.feedback-group.correct { border-color: var(--green); }
.feedback-group.incorrect { border-color: var(--coral); }
.feedback-group.missed { border-color: #ce9b36; }
.feedback-group h3 { margin: 0 0 0.6rem; font-size: 0.85rem; }
.feedback-tags { color: var(--muted); font-size: 0.82rem; line-height: 1.6; }
.result-score { color: var(--green); font-size: 3rem; }
.random-result { width: min(100%, 760px); margin-top: 1.5rem; }
.random-concept-image { display: block; max-width: 100%; max-height: 55vh; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #111; }
.random-concept-title { margin: 0.8rem 0; font-size: 1.4rem; }
.concept-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.concept-tag { padding: 0.3rem 0.5rem; border: 1px solid rgba(140, 120, 255, 0.35); border-radius: 999px; background: var(--green-soft); color: var(--text); font-size: 0.78rem; }
.empty-message { color: var(--muted); }

.concept-card-dialog {
  width: min(940px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}
.concept-card-dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(5px); }
.concept-clash-result-dialog { width: min(440px, calc(100% - 2rem)); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48); }
.concept-clash-result-dialog::backdrop { background: rgba(0, 0, 0, 0.74); backdrop-filter: blur(5px); }
.concept-clash-result-dialog-content { display: grid; gap: 0.9rem; padding: 1.4rem; }
.concept-clash-result-dialog-content .eyebrow, .concept-clash-result-dialog-content p { margin: 0; }
.concept-clash-result-dialog-content h2 { margin: 0; overflow-wrap: anywhere; font-size: 1.7rem; line-height: 1.15; }
.concept-clash-result-dialog-content .game-actions { justify-content: flex-end; margin-top: 0.4rem; }
.concept-card-dialog-content { display: grid; gap: 1.25rem; padding: 1.25rem; }
.concept-card-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.concept-card-dialog-header h2 { margin: 0; font-size: 1.35rem; }
.concept-card-close { width: 2.5rem !important; min-width: 2.5rem; height: 2.5rem; padding: 0 !important; font-size: 1.35rem; }
.concept-card-editor-grid { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.2fr); gap: 1.5rem; align-items: start; }
.concept-card-preview-column { position: sticky; top: 0; }
.concept-card-preview { --preview-color: #9e86ff; overflow: hidden; border: 2px solid var(--preview-color); border-radius: 12px; background: var(--surface-strong); box-shadow: 0 10px 30px rgba(0,0,0,0.22); }
.concept-card-preview[data-color="blue"] { --preview-color: #5ba8ff; }
.concept-card-preview[data-color="red"] { --preview-color: #f06c72; }
.concept-card-preview-image-wrap { width: 100%; aspect-ratio: 5 / 6; overflow: hidden; background: #0d0d0f; }
.concept-card-preview-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.concept-card-preview-info { display: grid; gap: 0.55rem; padding: 0.8rem; }
.concept-card-preview-info > strong { overflow-wrap: anywhere; }
.concept-card-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--muted); font-size: 0.72rem; }
.concept-card-controls { display: grid; gap: 0.85rem; }
.concept-card-controls > label { display: grid; gap: 0.4rem; margin: 0; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.concept-card-controls input[type="text"] { width: 100%; margin: 0; }
.concept-card-controls input[type="range"] { min-height: 1.8rem; margin: 0; padding: 0; accent-color: var(--accent); }
.concept-card-fieldset { min-width: 0; display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.concept-card-fieldset legend { margin-bottom: 0.5rem; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.concept-card-fieldset > label { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: 0.75rem; margin: 0; color: var(--muted); font-size: 0.75rem; }
.concept-card-choice-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.concept-card-choice-row button { min-height: 2.25rem !important; padding: 0.45rem 0.65rem !important; border: 1px solid var(--line) !important; border-radius: 9px !important; background: rgba(255,255,255,0.06) !important; color: var(--text) !important; font-size: 0.76rem; }
.concept-card-choice-row button.selected { border-color: var(--accent) !important; background: var(--green-soft) !important; }
.concept-card-color-choice { display: inline-flex; align-items: center; gap: 0.4rem; }
.card-color-swatch { width: 0.85rem; height: 0.85rem; border: 1px solid rgba(255,255,255,0.36); border-radius: 50%; }
.card-color-swatch.purple { background: #9e86ff; }
.card-color-swatch.blue { background: #5ba8ff; }
.card-color-swatch.red { background: #f06c72; }
.concept-card-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }

@media (max-width: 600px) {
  .playground-header { grid-template-columns: minmax(0, 1fr) auto; padding: 0.5rem 5vw; }
  .environment-badge { grid-column: 1 / -1; grid-row: 2; margin: 0.5rem 0; }
  .playground-header-meta { grid-column: 2; }
  .playground-header-meta { gap: 0.55rem; }
  .playground-user { gap: 0.35rem; }
  .playground-user-avatar { width: 30px; height: 30px; flex-basis: 30px; }
  .playground-user-name { max-width: 90px; font-size: 0.75rem; }
  .playground-user-role { padding: 0.2rem 0.4rem; font-size: 0.62rem; }
  .wordmark { gap: 0.4rem; }
  .wordmark span { font-size: 0.62rem; }
  h1 { font-size: 2rem; }
  .game-choice { grid-template-columns: 2.5rem 1fr 1.5rem; gap: 0.6rem; }
  .game-copy strong { font-size: 1.25rem; }
  .setup-row { align-items: stretch; flex-wrap: wrap; }
  .setup-row label { width: 100%; }
  .setup-row button { flex: 1; }
  .feedback-groups { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .owned-concept-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .owned-concept-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .owned-concept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .concept-clash-match-play.match-maximized { padding: 0.85rem; }
  .concept-card-editor-grid { grid-template-columns: 1fr; }
  .concept-card-preview-column { position: static; width: min(100%, 260px); margin: 0 auto; }
  .concept-card-dialog-content { padding: 1rem; }
  .deck-list-heading { align-items: flex-start; flex-direction: column; }
  .deck-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .concept-clash-deck-row { align-items: flex-start; flex-direction: column; }
  .concept-clash-deck-actions { width: 100%; }
  .concept-clash-match-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .concept-clash-progress-boards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .deck-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concept-clash-match-playmat { grid-template-columns: minmax(0, 1fr); }
  .match-playmat-divider { text-align: center; }
  .concept-clash-match-card-slot { min-height: 190px; }
  .concept-clash-match-play.match-maximized .concept-clash-match-playmat { grid-template-rows: none; overflow-y: auto; }
  .concept-clash-match-play.match-maximized .concept-clash-match-side { height: auto; }
  .concept-clash-match-play.match-maximized .concept-clash-match-card-slot { height: auto; }
  .concept-clash-match-play.match-maximized .concept-clash-match-card-slot .concept-clash-match-card,
  .concept-clash-match-play.match-maximized .concept-clash-match-card-slot .concept-clash-hidden-card { height: auto; width: min(100%, 190px); aspect-ratio: auto; min-height: 190px; }
  .concept-clash-match-play.match-maximized .concept-clash-match-card-slot .match-card-image { flex: none; aspect-ratio: 4 / 3; }
  .concept-clash-match-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}