.real-game {
  --pen-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C75 3 126 6 198 4S325 5 402 3.8S527 5 598 3' fill='none' stroke='%231467b7' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pen-stroke-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C75 3 126 6 198 4S325 5 402 3.8S527 5 598 3' fill='none' stroke='%231467b7' stroke-width='3.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  min-width: 0;
}
.real-game .game-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 0; background: transparent; color: #fff; font: 600 16px/24px 'IBM Plex Sans',sans-serif; text-decoration: none; cursor: pointer; }
.real-game .game-button::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--pen); clip-path: polygon(1% 5%,98% 0,100% 92%,0 100%); pointer-events: none; }
.real-game .game-button:hover::before { background: var(--accent-hover); }
.real-game .game-button:focus-visible { outline: 0; }
.real-game .game-button:focus-visible::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 6px; background: var(--pen); mask: var(--pen-stroke-focus) center / 100% 100% no-repeat; }
.real-game .game-button:disabled { opacity: .6; cursor: wait; }
.real-game .game-tool { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; min-height: 44px; padding: 6px 3px; border: 0; background: none; color: var(--ink); font: 400 14px/22px 'IBM Plex Sans',sans-serif; text-decoration: none; cursor: pointer; }
.real-game .game-tool:hover,.real-game .game-details > summary:hover { background: linear-gradient(transparent 35%,#f3dc6266 35%,#f3dc6266 78%,transparent 78%); }
.real-game .game-tool:focus-visible,.real-game .game-details > summary:focus-visible { outline: 0; background: none; box-shadow: 0 3px var(--pen); }
.real-game .icon { flex-shrink: 0; width: 23px; height: 25px; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.real-game .series-overview-sheet { position: relative; max-width: 620px; margin-inline: auto; padding: 24px 28px; background: #fff; }
.real-game .game-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.game-frame path { fill: none; stroke: var(--pen); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.series-overview-sheet > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.real-game .series-overview-sheet h1 { margin: 0; color: var(--pen); font: 600 38px/42px Caveat,cursive; }
.series-overview-sheet time { color: var(--muted); font-size: 14px; white-space: nowrap; }
.real-game .series-overview-sheet h2 { margin: 0 0 20px; color: var(--ink); font: 500 20px/28px 'IBM Plex Sans',sans-serif; }
.series-marks { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: center; gap: 8px; max-width: 380px; padding: 0; margin: 0 0 12px; list-style: none; color: var(--pen); }
.series-marks li { display: grid; place-items: center; min-width: 0; height: 40px; font: 400 17px/24px 'IBM Plex Sans',sans-serif; }
.series-marks li > span { display: grid; place-items: center; width: 34px; height: 34px; background: var(--control-radio-ring) center / 34px no-repeat; }
.series-marks li > .icon { width: 32px; height: 34px; }
.series-marks li:has(> .icon) > span { display: none; }
.series-overview-score { margin: 0 0 14px; color: var(--pen); font: 600 22px/30px 'IBM Plex Sans',sans-serif; }
.series-overview-note { margin: 0 0 20px; max-width: 48ch; color: var(--muted); font-size: 14px; line-height: 22px; }
.series-overview-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; }
.series-overview-actions > .game-details { flex: 1 1 100px; }
.real-game .game-details { margin-top: 0; font-size: 14px; line-height: 22px; }
.game-details > summary { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; padding: 6px 0; list-style: none; cursor: pointer; }
.game-details > summary::-webkit-details-marker { display: none; }
.game-details > summary::after { content: '›'; color: var(--pen); font-size: 21px; }
.game-details[open] > summary::after { transform: rotate(90deg); }
.game-details > p { max-width: 48ch; margin: 6px 0 12px; color: var(--muted); }
.real-game .game-preferences { margin-top: 14px; }
.game-preferences form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.game-preferences select { width: auto; max-width: 100%; min-height: 44px; padding: 6px 25px 8px 2px; border: 0; border-radius: 0; color: var(--ink); background: #fff var(--pen-stroke) center bottom / 100% 7px no-repeat; box-shadow: none; font: inherit; }
.game-preferences select:focus-visible { outline: 0; background-image: var(--pen-stroke-focus); }
.game-preferences .ink-select-wrap { flex: 1 1 220px; max-width: 380px; }
.game-workspace { position: relative; max-width: 760px; margin-inline: auto; }
.game-topline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; min-height: 48px; margin-bottom: 16px; }
.game-score { display: inline-flex; align-items: baseline; gap: 7px; margin: 0; color: var(--muted); font-size: 13px; }
.game-score strong { min-width: 1ch; color: var(--pen); font: 600 30px/34px Caveat,cursive; font-variant-numeric: tabular-nums; }
.game-margin-actions { display: flex; align-items: flex-start; gap: 8px 18px; margin-left: auto; }
.game-margin-actions .game-tool,.game-margin-actions summary { font-size: 13px; }
.game-margin-actions .game-skip { position: relative; }
.game-skip > div { position: absolute; right: 0; top: 100%; z-index: 5; width: 240px; padding: 12px 16px; background: #fff; box-shadow: 0 3px 12px #24344224; }
.game-skip > div > p { color: var(--muted); font-size: 13px; }
.game-reroll { margin-left: auto; }
.real-game .known-history { display: grid; grid-template-columns: 36px minmax(0,max-content) 36px; align-items: center; gap: 2px 4px; width: fit-content; max-width: 100%; margin: 0 0 18px; color: var(--pen); }
.known-history ol { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 0; margin: 0; list-style: none; overflow-x: auto; }
.known-history .game-tool { justify-content: center; min-width: 36px; padding: 6px; font-size: 13px; white-space: nowrap; }
.known-history .icon { width: 18px; height: 22px; }
.known-history .history-arrow { width: 36px; height: 44px; }
.known-history .known-history-number[aria-current=step] { color: var(--pen); font-weight: 600; }
.known-history .known-history-number[aria-current=step]::before { content: ''; width: 3px; height: 18px; background: var(--pen); transform: rotate(5deg); }
.game-review-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: -8px 0 12px; color: var(--muted); font-size: 13px; }
.game-task-stage { position: relative; min-width: 0; isolation: isolate; overflow: hidden; }
.game-task { position: relative; min-width: 0; }
.real-game .gi-task-heading { margin-bottom: 24px; }
.gi-task-number { margin: 0 0 5px; color: var(--muted); font-size: 13px; line-height: 20px; }
.real-game .gi-task-heading h1 { margin: 0; color: var(--pen); font: 600 40px/44px Caveat,cursive; overflow-wrap: anywhere; }
.real-game .task-statement { font: 400 18px/28px Literata,Georgia,serif; overflow-wrap: anywhere; }
.task-statement p + p { margin-top: 18px; }
.real-game .katex-display { max-width: 100%; padding: 4px 0; overflow-x: auto; overflow-y: hidden; }
.game-figure { display: block; max-width: 100%; height: auto; margin: 20px 0; }
.game-pause { margin-top: 26px; }
.real-game .game-pause h2 { margin-bottom: 12px; color: var(--pen); font: 600 30px/36px Caveat,cursive; }
.game-answer { max-width: 540px; margin-top: 28px; }
.game-equation { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 22px; min-height: 62px; font: 22px/32px Literata,Georgia,serif; }
.game-equation input { flex: 0 1 152px; width: 152px; min-width: 0; max-width: 100%; min-height: 48px; padding: 6px 7px 10px; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: #fff var(--pen-stroke) center bottom / 100% 7px no-repeat; color: var(--ink); font: inherit; text-align: center; }
.game-equation input:focus-visible { background-image: var(--pen-stroke-focus); }
.game-equation > .game-button { margin-left: 6px; }
.game-answer fieldset { padding: 0; border: 0; }
.game-answer legend { margin-bottom: 12px; font: 600 24px/30px Caveat,cursive; color: var(--pen); }
.game-choice { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 5px 0; cursor: pointer; }
.game-choice input { flex: 0 0 21px; width: 21px; height: 21px; }
.game-answer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-top: 4px; }
.game-attempts { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.game-attempts > span:last-child { display: inline-flex; align-items: center; gap: 10px; }
.game-attempts i { display: block; width: 2px; height: 18px; background: var(--pen); transform: rotate(12deg); }
.game-attempts i.used { opacity: .25; }
.game-feedback { min-height: 24px; max-width: 540px; margin-top: 8px; color: var(--pen); font-size: 14px; }
.real-game .game-reveal { margin-top: 4px; font-size: 13px; }
.game-result { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; max-width: 760px; margin-top: 28px; padding: 18px 0 10px; }
.game-result-copy { display: flex; align-items: flex-start; gap: 12px; }
.game-result-copy > .icon { width: 29px; height: 32px; color: var(--pen); }
.real-game .game-result h2 { margin: 0; color: var(--pen); font: 600 30px/34px Caveat,cursive; }
.game-result-copy p { margin-top: 6px; font-size: 15px; }
.game-result-copy .game-rating-change { color: var(--muted); font-size: 13px; }
.real-game .game-solution { margin-top: 16px; }
.game-solution .text { margin-top: 12px; font: 400 17px/27px Literata,Georgia,serif; }
.game-source { margin-top: 20px; color: var(--muted); }
.game-source p { max-width: 72ch; margin-top: 6px; font-size: 13px; }
.game-source .icon { width: 15px; height: 16px; vertical-align: middle; }
.game-error,.game-request-error { max-width: 760px; margin: 0 auto 20px; color: var(--no); font-size: 14px; }
.game-request-error { margin-top: 20px; }
.game-notice { max-width: 760px; margin: 0 auto 16px; font-size: 14px; }
.game-empty { max-width: 620px; margin-inline: auto; padding: 24px 0; }
.game-empty h1 { margin-bottom: 18px; }
.game-empty p { margin: 0 0 20px; }
.real-game #record-scene { grid-template-rows: minmax(220px,1fr) auto; }
.real-game #record-scene .record-actions .game-button { width: min(460px,88vw); }
.real-game #record-scene .record-trail .icon { stroke: var(--pen); }
body:has(#record-scene[open]) { overflow: hidden; }
.game-task-ghost { position: absolute; inset: 0 auto auto 0; width: 100%; pointer-events: none; user-select: none; z-index: 2; }
.game-task-sliding .game-task { background-color: #fff; background-image: linear-gradient(#e2ecf8 1px,transparent 1px),linear-gradient(90deg,#e2ecf8 1px,transparent 1px); background-size: 24px 24px; }
.real-game [aria-busy=true] { cursor: progress; }
.real-game #game-heading:focus { outline: 0; }
@media (width >= 1180px) {
  .game-workspace { margin-right: 170px; }
  .game-topline { min-height: 0; }
  .game-score { position: absolute; top: 22px; left: calc(100% + 32px); white-space: nowrap; }
  .game-margin-actions { position: absolute; top: 66px; left: calc(100% + 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 145px; }
  .game-reroll { position: absolute; top: 16px; left: calc(100% + 32px); width: 160px; }
  .game-skip > div { right: auto; left: -94px; }
}
@media (width < 640px) {
  .real-game .series-overview-sheet { padding: 20px; }
  .real-game .series-overview-sheet h1 { font-size: 34px; line-height: 38px; }
  .real-game .series-overview-sheet h2 { font-size: 18px; line-height: 26px; }
  .series-marks { gap: 3px; }
  .game-topline { gap: 2px 12px; margin-bottom: 14px; }
  .game-margin-actions { gap: 0 10px; }
  .game-margin-actions .game-tool,.game-margin-actions summary { padding-inline: 0; font-size: 12px; }
  .game-margin-actions .icon { width: 17px; height: 20px; }
  .game-score { gap: 5px; }
  .real-game .gi-task-heading { margin-bottom: 20px; }
  .real-game .gi-task-heading h1 { font-size: 33px; line-height: 37px; }
  .real-game .task-statement { font-size: 17px; line-height: 27px; }
  .task-statement .katex { font-size: 1em; }
  .game-answer { margin-top: 24px; }
  .game-equation { gap: 6px 12px; font-size: 21px; }
  .game-equation input { flex-basis: 116px; width: 116px; }
  .real-game .game-equation > .game-button { margin-left: 0; padding-inline: 12px; font-size: 14px; }
  .known-history .game-tool { padding-inline: 4px; }
  .game-result { gap: 10px; }
  .game-result > form,.game-result > a { margin-left: auto; }
}