/* Shared look for the fraction games (2026-10-31). Layout follows Prep for Exam: one compact
   progress row, the question card beside the shared scratch pad (/math/scratch-pad.css),
   stacked on phones. Everything fits one screen. */
.fg-shell { --ink:#1f1a2e; --paper:#fffdf8; --main:#5a3fb8; --soft:#ece6ff; --accent:#f7c843; --ok:#9be2c5; --line:#d9d2ea;
  --piece-empty:#f2edf7; --whole-line:#b9a7c4; --shadow:0 18px 50px rgba(40,30,70,.14); }
.fg-violet { --main:#5a3fb8; --soft:#ece6ff; }
.fg-coral { --main:#b84a2f; --soft:#ffe9e1; }
.fg-teal { --main:#0f6b62; --soft:#dff5f1; }
.fg-pink { --main:#b23a68; --soft:#ffe7ef; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:#1f1a2e; background:radial-gradient(circle at 8% 4%,rgba(247,200,67,.22),transparent 28%),radial-gradient(circle at 92% 10%,rgba(168,146,240,.26),transparent 30%),#f3f1f8; font-family:"Trebuchet MS","Avenir Next",system-ui,sans-serif; }
button,a { font:inherit; }
[hidden] { display:none!important; }
.fg-shell { width:min(1180px,calc(100% - 24px)); margin:0 auto; padding:10px 0 12px; color:var(--ink); }
.fg-no-pad { width:min(820px,calc(100% - 24px)); }
/* Reset the K&K-wide header rule in case style.css is ever loaded with this page. */
.fg-topbar { display:flex; align-items:center; justify-content:space-between; height:auto; min-height:36px; margin-bottom:8px; padding:0; background:none; border:0; }
.fg-back { color:var(--main); font-weight:900; text-decoration:none; }
.fg-chip { padding:4px 12px; border-radius:999px; background:var(--main); color:#fff; font-size:12px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.fg-loading { min-height:60vh; display:grid; place-content:center; text-align:center; }
.fg-mark { width:96px; height:96px; margin:0 auto 14px; display:grid; place-items:center; border-radius:26px; background:var(--accent); border:3px solid var(--main); box-shadow:8px 8px 0 var(--main); font:900 42px/1 Georgia,serif; }
.fg-loading h1, .fg-done h1 { margin:0; font:900 clamp(30px,5.5vw,56px)/1 Georgia,serif; letter-spacing:-.02em; }

.fg-progress { display:flex; align-items:center; gap:14px; padding:8px 14px; border:2px solid var(--main); border-radius:14px; background:rgba(255,255,255,.8); }
.fg-progress-copy { display:flex; flex-direction:column; min-width:0; }
.fg-progress-copy strong { font-size:16px; } .fg-progress-copy span { color:#6a6280; font-size:13px; font-weight:800; }
.fg-dots { display:flex; gap:6px; margin-left:auto; }
.fg-dots i { width:15px; height:15px; border:2px solid var(--main); border-radius:50%; background:#fff; }
.fg-dots i.done { background:var(--ok); } .fg-dots i.done.miss { background:#ffd9a8; } .fg-dots i.current { background:var(--accent); transform:scale(1.2); }
.fg-score { padding:4px 12px; border:2px solid var(--main); border-radius:999px; background:var(--soft); font-weight:900; white-space:nowrap; }

.fg-card { margin-top:10px; display:grid; grid-template-columns:minmax(0,1fr); border:3px solid var(--main); border-radius:24px 8px 24px 8px; overflow:hidden; background:var(--paper); box-shadow:var(--shadow); }
.fg-has-pad .fg-card { grid-template-columns:minmax(0,1fr) minmax(320px,1fr); }
.fg-question { padding:clamp(14px,2.4vw,24px); min-width:0; }
.fg-meta { display:flex; gap:6px; flex-wrap:wrap; }
.fg-topic,.fg-kind { border:2px solid var(--main); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.fg-topic { background:var(--accent); } .fg-kind { border-color:#9a92ad; color:#5f5872; }
.fg-question h2 { margin:10px 0 10px; font:800 clamp(21px,2.6vw,28px)/1.35 Georgia,serif; }
.fg-question h2.fg-long { font-size:clamp(18px,2.2vw,23px); }
.fg-visual { margin:4px 0 10px; display:grid; place-items:center; }
.fg-visual .shape { max-height:150px; width:auto; max-width:100%; }
.fg-visual .shape-bar { width:min(100%,330px); height:auto; }
.fg-visual .shape-set { max-height:110px; }
.fg-note { margin:6px 0 0; font-weight:800; color:#4b4360; text-align:center; }

/* Stacked fractions in text. */
.fr { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 .12em; font-weight:900; line-height:1.02; font-size:.92em; }
.fr > span:first-child { border-bottom:.11em solid currentColor; padding:0 .14em .04em; }
.fr > span:last-child { padding:.04em .14em 0; }
.fbox { display:inline-grid; place-items:center; min-width:1.5em; height:1.5em; margin:0 .1em; border:2px dashed var(--main); border-radius:6px; color:var(--main); font-size:.85em; vertical-align:middle; }
.big-fraction { display:inline-grid; justify-items:center; gap:4px; padding:8px 20px; border-radius:20px; background:var(--soft); font-size:clamp(40px,8vw,62px); font-weight:900; line-height:.96; color:var(--main); }
.big-fraction i { width:100%; min-width:1.1em; height:6px; border-radius:4px; background:currentColor; }
.fq-compare { display:flex; align-items:center; justify-content:center; gap:clamp(12px,4vw,30px); }
.fq-slot { display:grid; place-items:center; width:64px; height:64px; border:3px dashed var(--main); border-radius:50%; font:900 30px/1 Georgia,serif; color:var(--main); background:#fff; }

/* Shapes (ported from This or That): equal pieces, gradient fill, white seams. */
.shape { overflow:visible; filter:drop-shadow(0 4px 8px rgba(146,96,26,.14)); }
.shape .piece { stroke:#fff; stroke-width:3; stroke-linejoin:round; }
.shape .piece.off { fill:var(--piece-empty); }
.shape .piece.on2 { fill:#46b39a; }
.shape .s0 { stop-color:#ffcf63; } .shape .s1 { stop-color:#f28f16; }
.shape .whole { fill:none; stroke:var(--whole-line); stroke-width:3; }
.shape.dense .piece { stroke-width:1.8; }
.shape-set .piece { stroke:#c9b8d6; stroke-width:2.2; }
.shape-triangle .piece,.shape-trapezoid .piece { stroke-width:2.6; }

.fg-steps { list-style:none; margin:8px 0; padding:8px 10px; display:flex; flex-wrap:wrap; gap:6px 12px; border-left:5px solid var(--ok); background:#f2f8f3; font-size:14px; font-weight:800; }
.fg-steps li { display:flex; align-items:center; gap:6px; }
.fg-steps span { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--main); color:#fff; font-size:12px; }
.fg-hint:empty { display:none; }
.fg-hint .hc-viz svg { max-height:200px; }

.fg-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:8px; }
.fg-choices-long { grid-template-columns:1fr; }
.fg-choices-symbols { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:420px; margin-left:auto; margin-right:auto; }
.fg-choices.n3:not(.fg-choices-symbols):not(.fg-choices-long) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fg-choice { min-height:58px; padding:8px 12px; border:2px solid var(--main); border-radius:14px; background:#fff; color:var(--ink); font-size:clamp(19px,2.2vw,24px); font-weight:900; cursor:pointer; touch-action:manipulation; display:grid; place-items:center; }
.fg-choices-symbols .fg-choice { font:900 36px/1 Georgia,serif; min-height:64px; }
.fg-choices-long .fg-choice { min-height:48px; font-size:clamp(17px,1.9vw,20px); justify-items:start; text-align:left; }
.fg-choices-art .fg-choice { min-height:0; padding:8px; }
.fg-art { display:grid; place-items:center; width:100%; }
.fg-art .shape { max-height:118px; width:auto; max-width:100%; }
.fg-art .shape-bar { width:100%; height:auto; max-height:78px; }
.fg-choice:hover:not(:disabled),.fg-choice:focus-visible { transform:translateY(-2px); box-shadow:4px 4px 0 var(--main); }
.fg-choice.hc-correct { background:var(--ok); border-color:#1f9f85; }
.fg-choice.hc-wrong { background:#fff; border-color:#d64c58; outline:2px solid #d64c58; color:#8b3a40; }
.fg-choice:disabled { cursor:default; transform:none; box-shadow:none; }
.fg-retry { min-height:20px; margin:6px 0 0; color:#7a4b10; font-weight:900; text-align:center; }
.fg-retry:empty { min-height:0; margin:0; }
.fg-next { width:100%; min-height:52px; margin-top:10px; border:0; border-radius:12px; background:var(--main); color:#fff; font-weight:900; font-size:18px; cursor:pointer; }
.fg-why { margin-top:10px; font-size:14px; color:#544c66; } .fg-why summary { cursor:pointer; font-weight:900; } .fg-why p { margin:6px 0 2px; font-weight:800; } .fg-why small { color:#736b85; }

/* Hint pictures that are not engine bars. */
.fq-side-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.fq-side-cell { display:grid; justify-items:center; gap:4px; padding:6px 10px; border-radius:12px; border:2px solid #ddd; background:#fff; }
.fq-side-cell .shape { max-height:96px; width:auto; max-width:180px; }
.fq-side-cell.fq-side-mine { border-color:#d64c58; } .fq-side-cell.fq-side-right { border-color:#1f9f85; }
.fq-side-cell span { font-weight:900; font-size:14px; }

.fg-has-pad .fg-card > .fg-pad { margin:10px; align-self:start; position:relative; }

/* Done screen */
.fg-done { max-width:860px; margin:24px auto; padding:clamp(20px,4vw,40px); border:3px solid var(--main); border-radius:28px 8px; background:var(--paper); box-shadow:var(--shadow); text-align:center; }
.fg-eyebrow { margin:0 0 6px; color:#6a6280; font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.fg-summary { font-size:20px; font-weight:900; }
.fg-review { display:grid; gap:6px; margin:14px 0; text-align:left; }
.fg-review-row { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:8px 12px; border-radius:12px; background:#f6f4fb; }
.fg-review-row.no { background:#fff3e6; }
.fg-review-i { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--main); color:#fff; font-weight:900; }
.fg-review-q { font-weight:800; } .fg-review-q small { display:block; margin-top:3px; color:#6b4a1d; font-weight:700; }
.fg-review-m { font-size:22px; }
.fg-focus { margin:12px 0; padding:12px 16px; border-radius:12px; background:#f0f7f0; text-align:left; }
.fg-focus strong { display:block; font-size:13px; color:#4f6b59; text-transform:uppercase; letter-spacing:.06em; } .fg-focus b { display:block; font-size:19px; } .fg-focus p { margin:4px 0 0; }
.fg-skill-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:12px 0; text-align:left; }
.fg-skill { padding:8px 10px; border:2px solid var(--line); border-radius:12px; background:#fff; }
.fg-skill.focus { border-color:var(--main); }
.fg-skill span { font-size:11px; font-weight:900; text-transform:uppercase; color:var(--main); } .fg-skill b { display:block; font-size:13px; margin:2px 0 5px; }
.fg-skill i { display:block; height:6px; border-radius:4px; background:#eee; overflow:hidden; } .fg-skill em { display:block; height:100%; background:#46b39a; }
.fg-skill small { color:#6a6280; font-weight:700; }
.fg-reward { display:inline-block; margin:6px 0 10px; padding:12px 20px; border:2px solid #9b6b00; border-radius:999px; background:#fff2b8; color:#694500; font-weight:950; }
.fg-done-link { display:inline-block; margin-top:14px; color:var(--main); font-weight:900; }

/* iPad landscape (short): tighter header + question. */
@media (min-width:900px) and (max-height:860px) {
  .fg-shell { padding-top:6px; } .fg-topbar { margin-bottom:6px; }
  .fg-question h2 { margin:6px 0 6px; } .fg-visual .shape { max-height:118px; } .fg-art .shape { max-height:96px; }
  .fg-hint .hc-viz svg { max-height:150px; }
}
/* Phone: stack; pad takes the height left. */
@media (max-width:760px) {
  .fg-shell,.fg-no-pad { width:calc(100% - 16px); padding-top:6px; }
  .fg-topbar { min-height:30px; margin-bottom:6px; }
  .fg-progress { gap:8px; padding:6px 10px; } .fg-progress-copy strong { font-size:14px; } .fg-progress-copy span { font-size:12px; }
  .fg-dots { gap:4px; } .fg-dots i { width:11px; height:11px; }
  .fg-has-pad .fg-card { grid-template-columns:1fr; } .fg-card { border-radius:18px 5px; }
  .fg-question { padding:12px; }
  .fg-kind { display:none; }
  .fg-question h2 { font-size:clamp(18px,5vw,22px); margin:6px 0 8px; }
  .fg-question h2.fg-long { font-size:clamp(16px,4.3vw,19px); }
  .fg-visual .shape { max-height:110px; } .fg-visual .shape-set { max-height:84px; }
  .big-fraction { font-size:40px; padding:6px 14px; } .fq-slot { width:50px; height:50px; font-size:24px; }
  .fg-choice { min-height:48px; font-size:19px; }
  .fg-choices-symbols .fg-choice { min-height:54px; font-size:30px; }
  .fg-art .shape { max-height:84px; } .fg-art .shape-bar { max-height:56px; }
  .fg-hint .hc-viz svg { max-height:130px; }
  .fq-side-cell .shape { max-height:70px; }
  .fg-why { display:none; }
  .fg-has-pad .fg-card > .fg-pad { margin:0 8px 8px; }
  .fg-steps { font-size:13px; padding:6px 8px; }
}
@media (max-width:420px) { .fg-score { padding:3px 8px; } .fg-chip { display:none; } }