/* Only SQL board, tables and editor; the shell comes from game-ui.css. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: wait; opacity: .55; }
[hidden] { display: none !important; }
svg { display: block; shape-rendering: crispEdges; }
.page-wrap { margin: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -70px; left: 16px; z-index: 10; padding: 10px 16px; background: var(--accent); color: var(--bg); }
.skip-link:focus { top: 12px; }
.sql-game { --red: #d18c80; --blue: #88bbd0; }
.red { color: var(--red); } .blue { color: var(--blue); }
.sql-cabinet { border: 1px solid #39483d; border-radius: 6px; background: var(--panel); overflow: hidden; }
.stage-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 20px; border-bottom: 1px solid var(--border); font: 11px var(--mono); color: var(--muted); }
#stage-progress { margin-left: auto; }
.mission h2 { font-weight: 500; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 10px 18px; color: var(--muted); font: 10px var(--mono); }
.field-panel { min-width: 0; background: #1b271f; border-right: 1px solid var(--border); }
#legend { display: flex; gap: 12px; }
.mole-field { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 14px; padding: 0 18px 12px; min-height: 160px; }
.mole-field.eight { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mole-tile { position: relative; display: flex; flex-direction: column; align-items: center; padding: 3px 3px 7px; min-width: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; }
.mole-tile:hover, .mole-tile[aria-pressed="true"] { background: #273a2c; border-color: #70846c; }
.mole-tile > svg { width: 66px; height: 66px; max-width: 100%; }
.mole-label { color: #c1cec0; font: 10px var(--mono); overflow-wrap: anywhere; }
.mole-value { font: 11px var(--mono); margin-top: 3px; overflow-wrap: anywhere; }
.mole-mark { position: absolute; top: 4px; right: 4px; font: 12px var(--mono); }
.mole-tile.caught { border-color: #698b6f; background: #293c2c; }
.mole-tile.removed { opacity: .6; border-style: dashed; border-color: #7e7660; }
.mole-tile.removed > svg { opacity: .35; }
.arrival-slot { justify-content: center; border: 1px dashed #796654; font: 11px var(--mono); }
.mole-tile .hammer { position: absolute; width: 22px; height: 22px; top: 3px; left: 7px; transform: rotate(-22deg); }
.field-bottom { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 10px 18px; border-top: 1px solid #334235; color: #b0bcac; font-size: 10px; }
.field-bottom > span:last-child { white-space: nowrap; }
.field-bottom b { font: 12px var(--mono); color: var(--text); }
#board-loading { padding: 24px; text-align: center; color: var(--accent); }
.board-notice { padding: 24px 18px; color: var(--muted); font-size: 12px; }
.data-panel { min-width: 0; background: #151d18; }
.data-panel > summary { cursor: pointer; list-style: none; }
.data-panel > summary::-webkit-details-marker { display: none; }
.data-panel > summary::after { content: "+"; }
.data-panel[open] > summary::after { content: "−"; }
#row-count { margin-left: auto; }
.table-tabs { display: flex; gap: 4px; padding: 0 12px 8px; overflow-x: auto; }
.table-tabs button { padding: 5px 9px; font: 11px var(--mono); background: transparent; border: 1px solid var(--border); border-radius: 3px; white-space: nowrap; }
.table-tabs button[aria-selected="true"] { background: #293b2c; border-color: #70846c; color: var(--accent); }
.table-scroll { overflow: auto; max-height: 240px; scrollbar-color: #495f4d transparent; }
.sql-game table { width: 100%; border-collapse: collapse; text-align: left; font: 11px/1.7 var(--mono); white-space: nowrap; }
.sql-game th { font-weight: 400; color: #adc2b0; background: #18221b; }
.sql-game th, .sql-game td { border-bottom: 1px solid #2b372e; padding: 6px 12px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; }
.sql-game thead { position: sticky; top: 0; }
.sql-game tr.selected { background: #2a3d2e; }
.row-id { padding: 0 5px; min-width: 26px; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.schema-details { margin: 10px 16px; color: var(--muted); font-size: 11px; }
.schema-details summary { cursor: pointer; }
.schema-details pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 10px/1.8 var(--mono); }
.sql-editor { padding: 16px 20px 20px; border-top: 1px solid #39483d; }
#sql { display: block; width: 100%; resize: vertical; min-height: 94px; max-height: 280px; padding: 11px 14px; color: #d2e1cd; background: #101814; border: 1px solid #4a6050; border-radius: 4px; font: 13px/1.7 var(--mono); tab-size: 2; }
.execution-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
#sql-note { color: var(--muted); font-size: 10px; }
.run-actions { display: flex; gap: 8px; margin-left: auto; }
.execution-status, .transaction-status { color: var(--muted); font-size: 11px; margin-top: 9px; overflow-wrap: anywhere; }
.transaction-status { color: #e0b495; }
.query-result { margin-top: 14px; padding: 12px 14px; background: #131b17; border: 1px solid #344b3a; border-radius: 4px; }
.query-result.success { border-color: #688c6c; background: #203126; }
.query-result.warning { border-color: #896c50; }
.result-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.result-heading h3 { margin: 0; font-size: 13px; font-weight: 500; }
#result-meta { color: var(--muted); font: 10px var(--mono); }
#result-body { color: #bacbb8; font: 11px/1.8 var(--mono); overflow-wrap: anywhere; }
#result-body p, #result-body details { margin-top: 8px; }
#result-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.check-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.check-item.mismatch { color: #e0b495; }
.probe-detail summary { cursor: pointer; }
.mole-field.roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: center; }
.role-card { text-align: center; min-width: 0; }
.role-card svg { width: 82px; height: 82px; margin: auto; }
.role-name { font: 12px var(--mono); }
.role-actions { display: grid; gap: 4px; margin-top: 10px; color: #b8c8b5; font: 10px var(--mono); }
#summary-list { margin-bottom: 22px; }
.summary-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 12px; }
.summary-row small { color: var(--muted); }
@media (max-width: 760px) {
  .workspace { grid-template-columns: 1fr; }
  .field-panel { border-right: 0; border-bottom: 1px solid var(--border); }
  .mole-field { padding: 0 12px 8px; gap: 4px 8px; min-height: 120px; }
  .mole-tile > svg { width: 47px; height: 47px; }
  .mole-tile { padding-bottom: 4px; }
  .mole-label, .mole-value { font-size: 9px; }
  .mole-tile .hammer { width: 17px; height: 17px; left: 1px; }
  .mole-mark { font-size: 10px; right: 1px; }
  .stage-bar, .sql-editor { padding-inline: 14px; }
  .panel-heading { min-height: 34px; padding: 8px 14px; }
  .field-bottom { padding: 8px 14px; }
  .table-scroll { max-height: 165px; }
  .sql-editor { padding-block: 12px; }
  #sql { font-size: 16px; line-height: 1.5; min-height: 92px; padding: 9px; }
  .execution-bar { gap: 8px; }
  #sql-note { max-width: 170px; font-size: 9px; }
  .role-card svg { width: 56px; height: 56px; }
  .role-actions { margin-top: 5px; }
}
@media (max-width: 350px) {
  .mole-field.eight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sql-game .header-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sql-game * { scroll-behavior: auto !important; } }