:root {
  --gol-blue: #149bd7;
  --gol-dark: #071018;
  --gol-ink: #102131;
  --gol-muted: #5c6b78;
  --gol-paper: #eef4f8;
  --gol-panel: #fff;
  --gol-line: #d8e2ea;
  --gol-green: #187b4c;
  --gol-amber: #a65f00;
  --gol-violet: #6252c7;
  --gol-shadow: 0 10px 26px rgba(15, 33, 49, .13);
  --gol-radius: 8px;
  --gol-touch: 48px;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-height: 0; margin: 0; overflow: hidden; color: var(--gol-ink); background: linear-gradient(#dce8f0 1px, transparent 1px), linear-gradient(90deg, #dce8f0 1px, transparent 1px), var(--gol-paper); background-size: 34px 34px; touch-action: manipulation; }
button, select, input, summary { font: inherit; }
button, select, summary { min-height: var(--gol-touch); }
button:focus-visible, select:focus-visible, summary:focus-visible, input:focus-visible, a:focus-visible { outline: 4px solid rgba(20, 155, 215, .38); outline-offset: 2px; }

.gol-app { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100vh; height: 100dvh; min-height: 0; }
.gol-topbar { display: grid; grid-template-columns: minmax(230px, 1fr) auto; align-items: center; gap: 14px; min-height: 62px; padding: 7px 14px; background: var(--gol-dark); color: #fff; }
.gol-brand, .top-actions { display: flex; align-items: center; gap: 12px; }
.gol-brand { min-width: 0; }
.gol-brand img { display: block; width: 126px; height: auto; }
.gol-brand h1 { margin: 0; font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1; }
.top-actions { justify-content: flex-end; }
.icon-button, .home-button { min-height: var(--gol-touch); border: 2px solid #263d51; border-radius: var(--gol-radius); background: #122436; color: #fff; }
.icon-button { width: var(--gol-touch); padding: 0; display: inline-grid; place-items: center; cursor: pointer; }
.icon-button svg { width: 24px; height: 24px; pointer-events: none; }
.home-button { display: inline-flex; align-items: center; padding: 0 14px; font-weight: 800; text-decoration: none; }
.icon-button:hover, .home-button:hover { border-color: #8fd8f3; background: var(--gol-blue); color: #06111a; }

.gol-page { min-height: 0; width: min(1320px, calc(100% - 20px)); margin: 0 auto; padding: 7px 0; }
#greaterOrLessHost, .gol-game { height: 100%; min-height: 0; }
.gol-game { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 6px; }
.gol-toolbar, .gol-score, .gol-team-strip, .gol-progress, .gol-play { border: 1px solid var(--gol-line); border-radius: var(--gol-radius); background: var(--gol-panel); box-shadow: var(--gol-shadow); }

.gol-toolbar { position: relative; z-index: 7; min-height: 54px; display: flex; align-items: center; gap: 9px; padding: 5px 9px; }
.gol-toolbar > label { display: flex; align-items: center; gap: 6px; font-size: .83rem; font-weight: 900; }
.gol-toolbar > label:not([hidden]) { min-width: 0; }
.gol-stage-setting { flex: 0 1 270px; }
.gol-stage-setting select { width: 100%; min-width: 0; }
.gol-toolbar select, .gol-button, .gol-teacher-settings summary { min-height: var(--gol-touch); border: 2px solid var(--gol-line); border-radius: var(--gol-radius); background: #f8fbfd; color: var(--gol-ink); font-weight: 850; cursor: pointer; }
.gol-toolbar select { padding: 0 30px 0 9px; }
.gol-button { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; }
.gol-button--primary { border-color: #4c3fa4; background: var(--gol-violet); color: #fff; }
.gol-button:disabled { cursor: not-allowed; opacity: .48; }
.gol-teacher-settings { position: relative; }
.gol-teacher-settings summary { list-style: none; display: flex; align-items: center; padding: 0 13px; }
.gol-teacher-settings summary::-webkit-details-marker { display: none; }
.gol-teacher-settings summary::after { content: "▾"; margin-left: 8px; }
.gol-teacher-panel { position: absolute; top: calc(100% + 7px); left: 0; width: min(760px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 9px; padding: 11px; border: 1px solid #b9cbd7; border-radius: var(--gol-radius); background: #fff; box-shadow: 0 16px 36px rgba(15, 33, 49, .2); }
.gol-teacher-panel fieldset { min-width: 0; margin: 0; padding: 7px; border: 1px solid var(--gol-line); border-radius: 7px; }
.gol-teacher-panel legend { padding: 0 4px; color: var(--gol-muted); font-size: .8rem; font-weight: 900; }
.gol-teacher-panel label { min-height: 38px; display: flex; align-items: center; gap: 7px; font-weight: 750; }
.gol-teacher-panel input { width: 20px; height: 20px; margin: 0; }

.gol-score { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 10px; }
.gol-score span { font-weight: 900; }
.gol-score strong { min-width: 38px; border-radius: 99px; background: var(--gol-dark); color: #fff; font-size: 1.25rem; text-align: center; }
.gol-score small { color: var(--gol-muted); font-weight: 700; }
.gol-team-strip { min-height: 48px; display: grid; grid-template-columns: repeat(var(--gol-team-columns, 2), minmax(0, 1fr)); gap: 5px; padding: 5px; }
.gol-team-strip[data-team-count="2"] { --gol-team-columns: 2; }
.gol-team-strip[data-team-count="3"] { --gol-team-columns: 3; }
.gol-team-strip[data-team-count="4"] { --gol-team-columns: 4; }
.gol-team { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; padding: 3px 9px; border: 2px solid transparent; border-radius: 7px; background: #f1f5f8; }
.gol-team.is-active { border-color: var(--gol-blue); background: #e4f6fd; }
.gol-team span { font-weight: 900; }
.gol-team strong { grid-row: span 2; font-size: 1.3rem; }
.gol-team small { color: var(--gol-muted); font-weight: 750; }

.gol-progress { min-height: 43px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 5px; list-style: none; }
.gol-progress-card { min-width: 0; display: grid; place-items: center; border: 2px solid var(--gol-line); border-radius: 6px; background: #edf2f5; color: var(--gol-muted); font-weight: 900; white-space: nowrap; overflow: hidden; }
.gol-progress-card.is-visible { background: #fff; color: var(--gol-ink); }
.gol-progress-card.is-current { border-color: var(--gol-violet); background: #eeeafd; }
.gol-progress-card.is-complete { border-color: #78b996; background: #e8f6ee; }

.gol-play { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 7px; padding: 7px; overflow: hidden; }
.gol-active-cards { min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.gol-card { min-width: 0; min-height: 0; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); place-items: center; padding: 8px; border: 3px solid #b9cbd7; border-radius: 10px; background: #fbfdfe; overflow: hidden; }
.gol-card.is-hidden { grid-template-rows: auto 1fr auto; border-style: dashed; background: repeating-linear-gradient(135deg, #f3f6f8 0 16px, #e7edf1 16px 32px); }
.gol-card.is-hidden strong { align-self: center; font-size: clamp(4rem, 13vh, 8rem); color: #6c7a86; }
.gol-card.is-hidden > span:last-child { font-weight: 900; }
.gol-card-label { justify-self: start; padding: 3px 8px; border-radius: 99px; background: var(--gol-dark); color: #fff; font-size: .78rem; font-weight: 900; }
.gol-card-value { align-self: center; max-width: 100%; margin: 0; font-weight: 900; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.gol-card-value.is-numeral { font-size: clamp(2.2rem, 6vw, 5.8rem); font-variant-numeric: tabular-nums; }
.gol-card-value.is-words { font-size: clamp(1.15rem, 2.2vw, 2.1rem); }
.gol-card-value.is-expanded, .gol-card-value.is-relative { font-size: clamp(1.35rem, 2.8vw, 2.7rem); }
.gol-counter-model { width: 100%; min-height: 0; align-self: stretch; display: grid; place-items: center; overflow: hidden; }
.gol-counter-model > *, .gol-counter-model .diagram-visual { width: 100%; height: 100%; max-height: 100%; }
.gol-counter-model figcaption, .gol-proof-model figcaption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.gol-response { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 7px; overflow: auto; }
.gol-response:not(.is-revealed) { justify-content: center; }
.gol-prediction, .gol-proof, .gol-proof-model { padding: 8px; border: 1px solid var(--gol-line); border-radius: 8px; background: #f8fbfd; }
.gol-prediction { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; }
.gol-prediction h2 { grid-column: 1 / -1; margin: 0; font-size: clamp(1rem, 1.8vw, 1.4rem); text-align: center; }
.gol-prediction-buttons { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 7px; }
.gol-prediction-buttons button, .gol-proof-choices button { min-height: var(--gol-touch); border: 2px solid #b9cbd7; border-radius: 8px; background: #fff; color: var(--gol-ink); font-weight: 900; cursor: pointer; }
.gol-proof-choices button { padding: 4px 5px; font-size: clamp(.74rem, .9vw, .86rem); line-height: 1.05; }
.gol-prediction-buttons button[aria-pressed="true"] { border-color: var(--gol-violet); background: #e9e5fd; }
.gol-prediction-buttons button:disabled { opacity: .75; cursor: default; }
.gol-proof h3 { margin: 0 0 6px; text-align: center; }
.gol-proof-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 5px; }
.gol-support-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.gol-proof-model { min-height: 120px; flex: 1 1 140px; display: grid; grid-template-rows: minmax(80px, 1fr) auto; overflow: hidden; }
.gol-proof-model > div { min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; }
.gol-proof-model .question-visual { position: absolute; inset: 0; width: 100%; height: 100%; max-height: 100%; margin: 0; }
.gol-proof-model .diagram-visual { width: 100%; height: 100%; max-height: 100%; }
.gol-feedback { grid-column: 1 / -1; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 5px 9px; border: 1px solid var(--gol-line); border-radius: 8px; background: #f8fbfd; }
.gol-feedback p { margin: 0; font-weight: 800; line-height: 1.25; }
.gol-feedback[data-tone="success"] { border-color: #78b996; background: #e8f6ee; }
.gol-feedback[data-tone="try"] { border-color: #e3b36b; background: #fff4dd; }
.gol-feedback[data-tone="hint"] { border-color: #9c91dc; background: #f0edff; }
.gol-row-complete, .gol-outcome { grid-column: 1 / -1; align-self: center; justify-self: center; max-width: 620px; padding: 28px; text-align: center; }
.gol-row-complete h2, .gol-outcome h2 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 4rem); }
.gol-row-complete p, .gol-outcome p { font-size: 1.25rem; font-weight: 800; }
.gol-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-height: 760px) and (min-width: 901px) {
  .gol-topbar { min-height: 56px; padding-block: 4px; }
  .gol-toolbar { min-height: 49px; }
  .gol-toolbar select, .gol-button, .gol-teacher-settings summary, .gol-prediction-buttons button, .gol-proof-choices button { min-height: var(--gol-touch); }
  .gol-score, .gol-team-strip, .gol-progress { min-height: 37px; }
  .gol-card { padding: 5px; }
  .gol-proof-choices { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
}

@media (min-width: 901px) and (min-height: 650px) {
  .gol-response.is-revealed { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: stretch; overflow: visible; }
  .gol-response.is-revealed .gol-proof,
  .gol-response.is-revealed .gol-proof-model { grid-column: 1 / -1; grid-row: 1; min-height: 150px; }
  .gol-response.is-revealed.has-active-proof.has-support .gol-proof,
  .gol-response.is-revealed.has-active-proof.has-support .gol-proof-model { min-height: 190px; }
  .gol-response.is-revealed.has-active-proof.has-support .gol-proof { grid-column: 1; }
  .gol-response.is-revealed.has-active-proof.has-support .gol-proof-model { grid-column: 2; }
  .gol-response.is-revealed.has-support:not(.has-active-proof) .gol-proof-model { min-height: 250px; }
}

@media (max-width: 900px), (max-height: 649px) {
  html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  .gol-app { height: auto; min-height: 100vh; }
  .gol-page { width: min(100% - 12px, 1320px); padding: 6px 0 12px; }
  #greaterOrLessHost, .gol-game { height: auto; }
  .gol-game { grid-template-rows: auto; }
  .gol-toolbar { flex-wrap: wrap; }
  .gol-play { grid-template-columns: 1fr; grid-template-rows: auto; overflow: visible; }
  .gol-active-cards { min-height: 330px; }
  .gol-response { overflow: visible; }
  .gol-feedback { grid-column: 1; }
}

@media (max-width: 560px) {
  .gol-topbar { grid-template-columns: 1fr auto; padding: 6px 8px; }
  .gol-brand img { width: 98px; }
  .gol-brand h1 { font-size: 1.05rem; }
  .home-button { display: none; }
  .gol-toolbar > label { flex: 1 1 120px; display: flex; }
  .gol-toolbar > .gol-stage-setting { flex-basis: 230px; }
  .gol-toolbar select { width: 100%; min-width: 0; }
  .gol-teacher-settings { flex: 1 1 auto; }
  .gol-teacher-panel { position: fixed; z-index: 20; top: 64px; left: 6px; width: calc(100vw - 12px); max-height: calc(100vh - 76px); grid-template-columns: 1fr; overflow: auto; }
  .gol-score small { display: none; }
  .gol-team-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gol-progress { gap: 3px; }
  .gol-progress-card { font-size: 0; }
  .gol-progress-card::after { content: attr(data-short-label); font-size: .75rem; }
  .gol-active-cards { min-height: 470px; grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(220px, 1fr)); }
  .gol-prediction { grid-template-columns: 1fr; }
  .gol-prediction-buttons { grid-template-columns: repeat(2, 1fr); }
  .gol-proof-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gol-support-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .gol-feedback { align-items: stretch; flex-direction: column; }
}

@media (max-width: 480px) {
  .gol-topbar { grid-template-columns: 1fr; gap: 5px; }
  .gol-brand { justify-content: flex-start; }
  .gol-brand img { width: 106px; }
  .gol-brand h1 { font-size: 1.15rem; }
  .top-actions { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }