/* Site-owned styling. Kept separately from the imported game sources. */
@font-face { font-family: Montserrat; src: url('/fonts/montserrat-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Fredoka; src: url('/fonts/fredoka-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
:root { --blue-deep: var(--bg); --blue-deepest: var(--bg); --blue-dark: var(--surface); --blue-soft: var(--text-muted); --white: var(--text); --gray-light: var(--text); --blue-mid: var(--border-subtle); --blue-light: var(--text); --blue-tint: var(--text); }
html, body { min-height: 100%; height: 100%; background: var(--bg); color: var(--text); }
body { font-family: Montserrat, sans-serif; line-height: 1.5; }
.app { min-height: 100dvh; }
h1, h2, h3, .bar .brand { font-family: Fredoka, sans-serif; color: var(--text); }
#as-file-note { overflow-wrap: anywhere; }
.bar { flex-wrap: wrap; padding: 8px 16px; }
.bar-actions { flex-wrap: wrap; }
.bar .brand small { display: none; }
.btn, .btn.small, .bar .btn.small, .strip .btn.small, .tbtn { min-height: 48px; min-width: 48px; border: 2px solid var(--border); border-radius: 12px; padding: 10px 16px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; }
.btn:hover, .tbtn:active { background: var(--tint); }
.btn.cta { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.btn.cta:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-contrast); }
.btn:focus-visible, .tbtn:focus-visible, canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn.level[aria-pressed='true'] { color: var(--text); background: var(--tint); border-color: var(--border); }
.btn.level[aria-pressed='true'] small { color: var(--text); }
.btn.cta:disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--border); }
.panel, .card, .overlay .box { background: var(--surface); border: 2px solid var(--border-subtle); border-radius: 16px; box-shadow: none; }
.overlay { background: var(--overlay); border-radius: 12px; }
.overlay .note { color: var(--text); }
.field-wrap canvas { border: 2px solid var(--border-subtle); border-radius: 12px; }
.btn.level { min-width: 140px; }
.stats div:last-child, #lg-strip > span:nth-child(3), .card .best { display: none; }
.cards { grid-template-columns: minmax(0, 440px); }
.card .desc { min-height: auto; }
.card .hint { display: none; }
.keyboard-help { margin: 0 20px 8px; color: var(--text); font-size: 13px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--surface); color: var(--text); padding: 12px; border: 2px solid var(--border); }
.skip-link:focus { left: 8px; }
.setup-panel.over { background: var(--tint); }
.touch.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats { grid-template-columns: repeat(3, 1fr); }
.touch.pad { grid-template-columns: repeat(3, minmax(48px, 72px)); }
[hidden] { display: none !important; }
@media (max-width: 820px) {
  .touch { display: grid; }
  .btn.level { min-width: 88px; padding: 8px; }
  .bar { padding: 8px; gap: 8px; }
  .bar .brand { display: none; }
  .bar-actions { width: 100%; justify-content: space-between; gap: 6px; }
  .bar .btn.small { font-size: 12px; padding: 8px; }
  .strip .btn.small { font-size: 13px; }
  .keyboard-help { display: none; }
  .overlay { padding: 12px; }
  .overlay .box { max-width: 100%; padding: 12px; }
  .overlay h2 { font-size: 26px; }
  .overlay .line { font-size: 15px; }
  .menu { padding: 16px 12px; }
  .menu .foot { font-size: 13px; }
}
@media (max-width: 420px) { .pick-row, .level-row { width: 100%; gap: 8px; } .pick-row .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Pictures from the school, offered in Assembly alongside a family photo. */
.brand-note {
  margin-bottom: 4px;
}
.brand-row {
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.brand-pic {
  min-width: 48px;
  min-height: 48px;
  padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}

/* v5: preserve the supplied board/card artwork and expose full native controls. */
.alignment-controls { position:absolute; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); }
.alignment-controls button { background:transparent; border:0; padding:0; border-radius:12px; min-width:48px; min-height:48px; cursor:pointer; }
.alignment-controls button[aria-disabled='true'] { cursor:default; }
.alignment-controls button:focus-visible { outline:3px solid var(--focus); outline-offset:-5px; }
.ronda-hand-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:12px 16px; }
.ronda-hand-controls .btn { white-space:normal; }
#rd-rules { position:fixed; inset:8px; z-index:5; overflow:auto; align-items:safe center; }
#rd-rules .box { max-width:680px; width:100%; max-height:100%; overflow:auto; }
#al-result { order:2; }
.btn { transition:background-color 150ms ease, border-color 150ms ease; }
@media(max-width:420px) {
  .level-row { flex-wrap:wrap; }
  .ronda-hand-controls .btn { flex:1 1 140px; }
  #al-strip, #rd-strip { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .btn { transition:none; } }

/* Ground Work is a game surface, not a narrow card in the five-game menu. */
html[data-game='groundwork'], [data-game='groundwork'] body { height:auto; min-height:0; background:var(--surface); }
[data-game='groundwork'] .app { min-height:0; }
[data-game='groundwork'] .bar { border-bottom:1px solid var(--border-subtle); }
[data-game='groundwork'] .bar .brand { display:none; }
[data-game='groundwork'] .bar-actions { width:100%; justify-content:flex-end; }
[data-game='groundwork'][data-embedded='true'] #sas-back { display:none; }
[data-game='groundwork']:fullscreen #sas-back { display:inline-flex; }
[data-game='groundwork']:fullscreen .bar .brand { display:block; }
[data-game='groundwork'] .btn, [data-game='groundwork'] .tbtn { font-family:Montserrat,sans-serif; line-height:1.4; }
[data-game='groundwork'] .menu { padding:32px; text-align:left; align-items:stretch; }
[data-game='groundwork'] .menu > h1, [data-game='groundwork'] .menu > .lede { display:none; }
[data-game='groundwork'] .cards { display:grid; grid-template-columns:minmax(0,1fr); width:100%; max-width:none; margin:0; }
[data-game='groundwork'] .cards .card { align-items:flex-start; gap:24px; padding:0; border:0; background:transparent; }
[data-game='groundwork'] .card .desc { font-size:16px; line-height:1.6; }
[data-game='groundwork'] .pace-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:16px; }
[data-game='groundwork'] .pace-row .btn { min-width:0; padding:16px; align-items:flex-start; text-align:left; }
[data-game='groundwork'] .pace-row small { font-size:14px; }
[data-game='groundwork'] .pace-row [aria-pressed='true'] { border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text); }
[data-game='groundwork'] #screen-groundwork { padding-top:20px; }
[data-game='groundwork'] .stats { grid-template-columns:minmax(0,1fr); }
[data-game='groundwork'] .stats div:last-child { display:flex; }
[data-game='groundwork'] .label, [data-game='groundwork'] .stats dt { text-transform:none; letter-spacing:normal; font-size:14px; }
[data-game='groundwork'] .controls { font-size:14px; }
[data-game='groundwork'] #gw-touch { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); width:100%; max-width:1080px; margin:0 auto; padding:12px 20px 20px; }
[data-game='groundwork'] .tbtn { min-height:56px; }
[data-game='groundwork'] #gw-overlay { background:color-mix(in srgb,var(--surface) 94%,transparent); border:2px solid var(--border); padding:20px; left:50%; right:auto; transform:translateX(-50%); max-width:100%; }
[data-game='groundwork'] #gw-overlay h2 { font-size:28px; }
[data-game='groundwork'] #gw-overlay .line { color:var(--text); }
[data-game='groundwork'] #gw-overlay .actions { flex-direction:column; align-items:stretch; width:100%; }
.groundwork-dialog { width:calc(100% - 32px); max-width:760px; max-height:calc(100dvh - 32px); overflow:auto; padding:28px; background:var(--surface); color:var(--text); border:2px solid var(--border); border-radius:var(--radius-card); }
.groundwork-dialog::backdrop { background:var(--overlay); }
.groundwork-dialog h2 { font-size:26px; line-height:1.3; margin-bottom:16px; }
.groundwork-dialog p { margin-bottom:20px; }
.groundwork-dialog .actions { display:flex; flex-wrap:wrap; gap:12px; }
.groundwork-keys { display:grid; gap:12px; margin:0 0 24px; }
.groundwork-keys > div { display:grid; grid-template-columns:1fr 1.6fr; gap:16px; padding-top:12px; border-top:1px solid var(--border-subtle); }
.groundwork-keys dt { font-weight:600; }
.groundwork-keys dd { margin:0; }
@media(max-width:820px) {
  [data-game='groundwork'] .bar-actions { display:flex; justify-content:flex-start; gap:8px; }
  [data-game='groundwork'] .bar .btn { flex:1 1 auto; font-size:14px; padding:8px 12px; }
  [data-game='groundwork'] .menu { padding:24px 16px; }
  [data-game='groundwork'] .pace-row { gap:8px; }
  [data-game='groundwork'] .pace-row .btn { padding:12px 8px; }
  [data-game='groundwork'] .side.left .stats { order:0; flex:1 0 100%; grid-template-columns:repeat(4,minmax(0,1fr)); }
  [data-game='groundwork'] .stats dt { font-size:14px; }
  [data-game='groundwork'] .side.left .panel:first-child, [data-game='groundwork'] .side.right .panel { flex:1; }
  [data-game='groundwork'] #gw-touch { grid-template-columns:repeat(3,minmax(0,1fr)); padding:8px 10px 12px; }
  .groundwork-dialog { padding:20px; }
  .groundwork-keys > div { grid-template-columns:minmax(0,1fr); gap:4px; }
}
@media(max-width:380px) { [data-game='groundwork'] .pace-row { grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:no-preference) {
  [data-game='groundwork'] .tbtn { transition:background-color 150ms ease, transform 150ms ease; }
  [data-game='groundwork'] .tbtn:active { transform:translateY(2px); }
}

/* Shared game-page UI, preserving the supplied game-specific boards and pieces. */
html[data-game-ui], [data-game-ui] body { height:auto; min-height:0; background:var(--surface); }
[data-game-ui] .app { min-height:0; }
[data-game-ui] .bar { border-bottom:1px solid var(--border-subtle); }
[data-game-ui] .bar .brand, [data-game-ui][data-embedded='true'] #sas-back { display:none; }
[data-game-ui]:fullscreen .bar .brand, [data-game-ui]:fullscreen #sas-back { display:block; }
[data-game-ui] .bar-actions { width:100%; justify-content:flex-end; }
[data-game-ui] .btn, [data-game-ui] .tbtn { font-family:Montserrat,sans-serif; font-size:15px; line-height:1.5; white-space:normal; }
[data-game-ui] .btn:disabled { background:var(--disabled-bg); color:var(--disabled-text); cursor:default; }
[data-game-ui] .menu { align-items:stretch; text-align:left; padding:32px; }
[data-game-ui] .menu > h1, [data-game-ui] .menu > .lede { display:none; }
[data-game-ui] .cards { display:grid; grid-template-columns:minmax(0,1fr); max-width:none; margin:0; }
[data-game-ui] .cards .card { align-items:stretch; gap:24px; padding:0; border:0; background:transparent; }
[data-game-ui] .card .btn.cta { align-self:flex-start; }
[data-game-ui] .card .desc { font-size:16px; line-height:1.6; }
[data-game-ui] .setup { display:block; padding:32px; }
[data-game-ui] .setup-panel { max-width:none; border:0; border-radius:0; padding:0; text-align:left; align-items:stretch; gap:24px; }
[data-game-ui] .setup-panel h2, [data-game-ui] .card h2 { font-size:28px; line-height:1.3; }
[data-game-ui] .setup-panel .note { max-width:none; }
[data-game-ui] .setup-panel .hint { display:none; }
[data-game-ui] .setup-panel > .btn { align-self:flex-start; }
[data-game-ui] .pick-row, [data-game-ui] .level-row { justify-content:flex-start; }
[data-game-ui] .level-row { display:flex; flex-wrap:wrap; gap:16px; }
[data-game-ui] .btn.level { flex:1 1 160px; min-width:0; align-items:flex-start; padding:16px; text-align:left; }
[data-game-ui] .btn.level small { font-size:14px; }
[data-game-ui] .btn[aria-pressed='true'] { background:var(--tint); border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text); }
[data-game-ui] .rules-list { max-width:none; font-size:16px; line-height:1.6; }
[data-game-ui] .rules-list li + li { margin-top:12px; }
[data-game-ui] .strip { padding:20px 24px; gap:12px 24px; font-size:15px; align-items:center; }
[data-game-ui] .strip .keys { display:none; }
[data-game-ui] .strip .spacer { flex:1; }
[data-game-ui] .strip .btn.small { margin:0; }
[data-game-ui] .overlay:not(.bottom) { background:color-mix(in srgb,var(--surface) 94%,transparent); color:var(--text); border:2px solid var(--border); }
[data-game-ui] .overlay .box { border:0; background:transparent; padding:16px; max-width:100%; }
[data-game-ui] .overlay h2 { font-size:28px; }
[data-game-ui] .overlay .line { color:var(--text); white-space:normal; }
[data-game-ui] .overlay .actions { gap:12px; }
[data-game-ui] #lg-wrap { display:grid; justify-items:center; }
[data-game-ui] #lg-field { grid-area:1/1; }
[data-game-ui] #lg-overlay { position:relative; inset:auto; grid-area:1/1; align-self:stretch; max-width:100%; padding:16px 8px; }
[data-game-ui] #lg-touch { display:grid; width:100%; padding:12px 24px 20px; grid-template-columns:repeat(3,minmax(56px,96px)); }
[data-game-ui] #lg-strip > span:nth-child(3) { display:inline; }
[data-game-ui] .keyboard-help { display:block; flex:1 0 100%; margin:0; font-size:14px; line-height:1.5; }
[data-game-ui] .brand-row { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; width:100%; }
[data-game-ui] .brand-pic { display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px; width:calc((100% - 48px)/4); min-width:0; }
[data-game-ui] .brand-pic img { width:100%; aspect-ratio:4/3; height:auto; object-fit:contain; }
[data-game-ui] .picture-picker { width:100%; }
[data-game-ui] .picture-picker summary { display:list-item; cursor:pointer; padding:16px 0; font-weight:600; min-height:56px; }
[data-game-ui] .picture-picker summary:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
[data-game-ui] .thumb { width:auto; max-width:100%; object-fit:contain; }
[data-game-ui] #as-file-note { font-size:15px; }
[data-game-ui] .ronda-hand-controls { gap:12px; padding:12px 24px 20px; }
[data-game-ui] .ronda-hand-controls .btn { flex:1 1 180px; max-width:340px; }
[data-game-ui] .card-back-picker { min-width:0; margin:8px 0 0; padding:24px 0 0; border:0; border-top:1px solid var(--border-subtle); }
[data-game-ui] .card-back-picker legend { font-family:Fredoka,sans-serif; font-size:24px; line-height:1.4; padding:0 16px 0 0; }
[data-game-ui] .card-back-picker > p { margin:0 0 16px; }
[data-game-ui] .card-back-gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:20px; }
[data-game-ui] .card-back-choice { flex:0 1 calc((100% - 48px)/4); display:flex; flex-direction:column; align-items:center; min-width:0; padding:12px; gap:8px; }
[data-game-ui] .card-back-choice img { display:block; width:100px; max-width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; object-position:center; border-radius:6px; }
[data-game-ui] .card-back-selected { font-size:13px; visibility:hidden; }
[data-game-ui] .card-back-choice[aria-pressed='true'] .card-back-selected { visibility:visible; }
[data-game-ui] .card-back-choice[aria-busy='true'] { border-style:dashed; }
[data-game-ui] #ronda-back-status { margin:16px 0 0; font-size:14px; }
[data-game-ui] #ronda-back-status:empty { display:none; }
[data-game-ui] .result { max-width:none; border:0; padding:16px 0; gap:12px; }
.game-dialog { width:calc(100% - 32px); max-width:760px; max-height:calc(100dvh - 32px); overflow:auto; padding:28px; background:var(--surface); color:var(--text); border:2px solid var(--border); border-radius:var(--radius-card); }
.game-dialog::backdrop { background:var(--overlay); }
.game-dialog h2 { font-size:26px; line-height:1.3; margin:0 0 20px; }
.game-dialog p, .game-dialog dl, .game-dialog .rules-list { margin:0 0 20px; }
.game-dialog dl { display:grid; gap:12px; }
.game-dialog dl > div { border-top:1px solid var(--border-subtle); padding-top:12px; display:grid; grid-template-columns:1fr 2fr; gap:16px; }
.game-dialog dt { font-weight:600; }
.game-dialog dd { margin:0; }
.game-dialog .actions { display:flex; flex-wrap:wrap; gap:12px; }
.picture-dialog { max-width:960px; }
.picture-dialog img { display:block; width:100%; height:auto; max-height:calc(100dvh - 230px); object-fit:contain; margin-bottom:20px; }
.picture-dialog [role='status']:empty { display:none; }
@media(max-width:1023px) { [data-game-ui] .brand-pic { width:calc((100% - 32px)/3); } }
@media(max-width:680px) {
  [data-game-ui] .bar-actions { justify-content:flex-start; gap:8px; }
  [data-game-ui] .bar .btn { flex:1 1 auto; font-size:14px; padding:8px 12px; }
  [data-game-ui] .menu, [data-game-ui] .setup { padding:24px 16px; }
  [data-game-ui] .level-row { gap:12px; }
  [data-game-ui] .btn.level { flex-basis:130px; }
  [data-game-ui] .strip { padding:16px 12px; gap:12px; }
  [data-game-ui] .strip .spacer { display:none; }
  [data-game-ui] #al-turn, [data-game-ui] #rd-status { flex:1 0 100%; }
  [data-game-ui] .brand-row { gap:12px; }
  [data-game-ui] .brand-pic { width:calc((100% - 12px)/2); padding:8px; }
  [data-game-ui] .card-back-gallery { gap:12px; }
  [data-game-ui] .card-back-choice { flex-basis:calc((100% - 12px)/2); padding:10px; }
  [data-game-ui] .overlay .actions { flex-direction:column; align-items:stretch; }
  [data-game-ui] .overlay .box { padding:8px; }
  [data-game-ui] .overlay h2 { font-size:22px; }
  [data-game-ui] .ronda-hand-controls { padding-inline:12px; }
  .game-dialog { padding:20px; }
  .game-dialog dl > div { grid-template-columns:minmax(0,1fr); gap:4px; }
}
@media(prefers-reduced-motion:no-preference) {
  [data-game-ui] .brand-pic, [data-game-ui] .card-back-choice, [data-game-ui] .tbtn { transition:background-color 150ms ease,border-color 150ms ease,transform 150ms ease; }
  [data-game-ui] .brand-pic:active, [data-game-ui] .card-back-choice:active, [data-game-ui] .tbtn:active { transform:translateY(2px); }
}