/* 14q «قطار» (Train Tracks): the /tracks/ play screen. Shares the game head, status row, sheets, toasts and the done
   card with Sudoku (sudoku.css / games.css). The board is a picture (dir=ltr): the column counts on top, the row counts
   on the left, the train in the gutter on the right, the station in the gutter at the bottom. One square = --u; the
   count column/row and the gutters are .6 of a square. Accent: --g-tracks (games.css / dark.css). */
.tt{
  --tt-paper:var(--g-paper,#fff); --tt-grid:var(--g-line2,#DADCDF); --tt-frame:var(--ink,#111315); --tt-give:var(--ink,#111315);
  --tt-sleeper:color-mix(in srgb,var(--ink,#111315) 26%,transparent); --tt-xc:var(--ink-3,#6B6F75); --tt-cnt:var(--ink-2,#3A3D41);
  --tt-bad:color-mix(in srgb,var(--g-danger) 18%,var(--tt-paper));
}
.tt-play{display:flex;flex-direction:column;align-items:center;width:min(100%,600px);margin-inline:auto}
.tt-size{font:400 14px 'Onest',var(--font,var(--ar));color:var(--ink-3,var(--muted));font-variant-numeric:tabular-nums}
.tt-size:empty{display:none}

/* the tutorial lines (levels 1–3): above the board, short */
.tt-tip{display:flex;flex-direction:column;align-items:center;gap:2px;width:min(100%,440px);margin:2px 0 10px;padding:10px 14px;border-radius:10px;background:var(--g-tracks-wash);color:var(--ink,var(--fg));text-align:center}
.tt-tip[hidden]{display:none}
.tt-tip-1{font:500 15.5px/1.6 var(--font,var(--ar))}
.tt-tip-2{font-size:13.5px;line-height:1.6;color:var(--ink-2,var(--muted))}

/* the board */
.sd-board-wrap.tt-board-wrap{width:auto;margin-top:4px}
@media (min-width:1000px){.sd-board-wrap.tt-board-wrap{width:auto}}
.tt-board{--u:min(var(--cap,56px),calc((min(100vw,600px) - 16px) / (var(--n) + 1.2)));
  position:relative;display:grid;grid-template-columns:calc(var(--u) * .6) repeat(var(--n),var(--u)) calc(var(--u) * .6);
  grid-template-rows:calc(var(--u) * .6) repeat(var(--n),var(--u)) calc(var(--u) * .6);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tt-cell{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:var(--tt-paper);box-shadow:inset 0 0 0 .5px var(--tt-grid);cursor:pointer;outline:none;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background-color .12s}
.tt-board.x-mode .tt-cell{cursor:cell}
@media (hover:hover) and (pointer:fine){.tt-cell:hover{background:color-mix(in srgb,var(--g-tracks) 7%,var(--tt-paper))}}
.tt-cell:focus-visible{box-shadow:inset 0 0 0 2px var(--g-tracks),inset 0 0 0 3.5px var(--tt-paper),inset 0 0 0 5px var(--tt-frame);z-index:2}
.tt-cell.bad{background:var(--tt-bad);animation:ttBad .6s ease 2}
@keyframes ttBad{50%{background:color-mix(in srgb,var(--g-danger) 34%,var(--tt-paper))}}
/* the frame around the squares */
.tt-board::after{content:'';grid-area:2 / 2 / calc(var(--n) + 2) / calc(var(--n) + 2);border:2px solid var(--tt-frame);pointer-events:none;z-index:1}
.tt-svg{position:relative;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--ink,var(--fg))}
.tt-svg path{fill:none}
.tt-sleepers{stroke:var(--tt-sleeper);stroke-width:6.6;stroke-dasharray:1 2.333;stroke-dashoffset:-1.17}
.tt-rails{stroke-width:4.4;stroke-linecap:butt;stroke-linejoin:round}
.tt-rails.give{stroke:var(--tt-give)}
.tt-rails.mine{stroke:var(--g-tracks)}
.tt-rails.half{stroke:var(--g-tracks);opacity:.55}
.tt-sleepers.half{opacity:.55}
.tt-gap{stroke:var(--tt-paper);stroke-width:2.2;stroke-linecap:butt;stroke-linejoin:round}
.tt-x{stroke:var(--tt-xc);stroke-width:.9;stroke-linecap:round}
.tt-train-ico,.tt-station-ico{stroke:currentColor;stroke-width:.55;stroke-linecap:round;stroke-linejoin:round}
.tt-train-ico rect{fill:var(--g-tracks)}
.tt-train-ico circle{fill:var(--tt-page,var(--bg,#fff))}
.tt-station-ico :is(rect,path){fill:var(--tt-page,var(--bg,#fff))}
.tt-train-ico{transition:opacity .2s}
.tt-route{stroke:#fff;stroke-width:1;stroke-linecap:round;opacity:.9}
.tt-loco rect{fill:var(--g-tracks);stroke:var(--tt-frame);stroke-width:.5}
.tt-loco circle{fill:#fff}
/* counts: quiet ink; the game's colour once the row/column is right, red when it has too many */
.tt-cnt{display:grid;place-items:center;font:600 calc(var(--u) * .36)/1 'Onest',var(--font,var(--ar));font-variant-numeric:tabular-nums;color:var(--tt-cnt);transition:color .15s,opacity .15s}
.tt-cnt.tt-col{align-items:end;padding-bottom:4px}
.tt-cnt.tt-row{justify-items:end;padding-inline-end:6px}
.tt-cnt.done{color:var(--g-tracks);opacity:.6}
.tt-cnt.over{color:var(--g-danger);opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tt-board.done .tt-cnt{opacity:.45}
.tt-corner{grid-area:1/1}

/* tools under the board: tap targets 48px+ */
.tt-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:min(100%,460px);margin-top:16px}
.tt-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:4px 2px;border:0;border-radius:8px;background:var(--g-tile2);color:var(--ink,var(--fg));font:400 12.5px/1.2 var(--font,var(--ar));cursor:pointer;touch-action:manipulation;transition:background-color .12s,color .12s}
.tt-tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tt-tool[aria-pressed="true"]{background:var(--ink,#111315);color:var(--bg,#fff);font-weight:500}
.tt-tool:disabled{opacity:.4;cursor:default}
@media (hover:hover){.tt-tool:hover:not(:disabled):not([aria-pressed="true"]){background:color-mix(in srgb,var(--g-tile2) 85%,var(--ink,#000))}}
.tt-tool:focus-visible,.tt-lv:focus-visible,.tt-fb-c:focus-visible,.tt-fb-note:focus-visible{outline:2px solid var(--ink,var(--fg));outline-offset:2px}
.tt-page .sd-who{margin-top:14px}

/* the done card (Sudoku's shell) */
.tt .sd-done-in .sd-k{color:var(--g-tracks-ink)}
.tt-done-t{margin:2px 0 6px!important;font:300 40px/1.1 'Onest',var(--font,var(--ar))!important;font-variant-numeric:tabular-nums}
.tt-done-in{max-height:calc(100% - 8px);overflow:auto}
/* «خلصت الـ٢٠! تبي ألغاز يومية؟» */
.tt-fb{text-align:center}
.tt-fb-h{margin:4px 0 12px;font:600 19px/1.45 var(--font,var(--ar))}
.tt-fb-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tt-fb-c{min-height:48px;padding:0 10px;border:1px solid var(--g-line2);border-radius:10px;background:var(--g-paper);color:var(--ink,var(--fg));font:500 15px var(--font,var(--ar));cursor:pointer;transition:background-color .12s,border-color .12s}
.tt-fb-c[aria-pressed="true"]{border-color:var(--g-tracks);background:var(--g-tracks-wash);box-shadow:inset 0 0 0 1px var(--g-tracks)}
.tt-fb-l{display:block;margin:14px 0 6px;font-size:14px;text-align:start}
.tt-fb-note{box-sizing:border-box;display:block;width:100%;min-height:68px;padding:10px 12px;border:1px solid var(--g-line2);border-radius:10px;background:var(--g-paper);color:var(--ink,var(--fg));font:400 15px/1.6 var(--font,var(--ar));resize:vertical}
.tt-fb .sd-row .g-btn{min-width:96px}
.tt-fbsheet .tt-fb{padding-bottom:6px}

/* the levels sheet */
.tt-lv-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 4px}
.tt-lv{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:60px;padding:6px 2px;border:0;border-radius:10px;background:var(--g-tile2);color:var(--ink,var(--fg));cursor:pointer}
.tt-lv b{font:600 19px/1 'Onest',var(--font,var(--ar))}
.tt-lv small{font:400 11.5px/1 'Onest',var(--font,var(--ar));color:var(--ink-3,var(--muted))}
.tt-lv.done{background:var(--g-tracks-wash)}
.tt-lv.cur{box-shadow:inset 0 0 0 2px var(--g-tracks)}
.tt-lv.locked{opacity:.5;cursor:default}
.tt-lv-i{position:absolute;top:5px;inset-inline-end:5px;width:15px;height:15px;color:var(--g-tracks-ink)}
.tt-lv.locked .tt-lv-i{color:var(--ink-3,var(--muted))}
.tt-lv-i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.tt-lv:not(:disabled):hover{background:color-mix(in srgb,var(--g-tracks-wash) 70%,var(--g-tile2))}}
.tt-lv-fb{margin:10px 0 0}
.tt-lv-fb .g-link{color:var(--g-tracks-ink);text-decoration:underline;text-underline-offset:3px}

html[data-look] :is(.tt-tool,.tt-lv,.tt-fb-c,.tt-fb-note,.tt-tip){border-radius:10px!important}
html[data-look] .tt-tool{border-radius:8px!important}
html[data-look] .tt-cell{border-radius:0!important}
@media (prefers-reduced-motion:reduce){.tt-cell,.tt-cnt,.tt-tool,.tt-train-ico{transition:none}.tt-cell.bad{animation:none}}
/* phones: toasts drop from the top, away from the thumb */
@media (max-width:999px){.tt .sd-toast{top:calc(10px + env(safe-area-inset-top,0px));bottom:auto}}

/* dark (the site's, or this page's own setting): the squares stay white paper like Sudoku's board; the counts, the
   train and the station sit on the night */
html[data-look][data-theme="dark"] .tt{--tt-cnt:var(--ink-2); --tt-page:var(--bg)}
html[data-look][data-theme="dark"] .tt-board{--tt-paper:var(--dk-board,#F4F4F2); --tt-grid:#D5D7DA; --tt-frame:#2A2D31; --tt-give:#111315; --tt-sleeper:rgba(17,19,21,.26); --tt-xc:#6B6F75;
  --tt-bad:#F6E1DA}
html[data-look][data-theme="dark"] .tt-board .tt-cell{--g-tracks:#8B5E3C}
html[data-look][data-theme="dark"] .tt-board .tt-svg .tt-run,html[data-look][data-theme="dark"] .tt-board .tt-svg :is(.tt-rails,.tt-loco){--g-tracks:#8B5E3C}
html[data-look][data-theme="dark"] .tt-board::after{border-color:#5A5D63;box-shadow:0 22px 48px -28px var(--dk-shadow)}
html[data-look][data-theme="dark"] .tt-tool[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
/* 14z: the feedback lives in a sheet; its heading isn't the big timer style, and it reads in dark mode */
.tt-fbsheet .tt-fb-h,.sd-done-in .tt-fb-h{margin:4px 0 14px!important;font:600 19px/1.5 var(--font,var(--ar))!important;color:var(--ink,var(--fg))}
.tt-fbsheet .tt-fb{text-align:start}
.tt-fbsheet .tt-fb-choices{grid-template-columns:1fr}
@media (min-width:520px){.tt-fbsheet .tt-fb-choices{grid-template-columns:repeat(3,1fr)}}
.tt-fbsheet .sd-row{display:flex;gap:8px;margin-top:14px}
/* 14z: the «خلّصت» card reads in dark mode (light words were on a white card) */
html[data-theme="dark"] .tt-done-in{background:#1F2226;color:#ECEDEE;box-shadow:0 26px 60px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
html[data-theme="dark"] .tt-done-in :is(p,.tt-done-t){color:#ECEDEE}
html[data-theme="dark"] .tt-done-in .sd-k{color:#E3C3A5}
html[data-theme="dark"] .tt-done-in .g-btn:not(.primary){background:transparent;color:#ECEDEE;border-color:rgba(255,255,255,.22)}
html[data-theme="dark"] .tt-done-in .g-btn.primary{background:#ECEDEE;color:#1F2226;border-color:#ECEDEE}
/* 15a: three cleaner looks for the track (board data-v) — A: one smooth line · B: fine rails with neat sleepers · C: soft ribbon with a centre line */
.tt-board[data-v="a"] .tt-sleepers,.tt-board[data-v="a"] .tt-gap{display:none}
.tt-board[data-v="a"] .tt-rails{stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tt-board[data-v="a"] .tt-rails.half{opacity:.45}
.tt-board[data-v="b"] .tt-sleepers{stroke:color-mix(in srgb,var(--g-tracks) 45%,var(--tt-paper));stroke-width:5;stroke-dasharray:.8 2.2;stroke-dashoffset:-.7;stroke-linecap:butt}
.tt-board[data-v="b"] .tt-rails{stroke-width:3.3;stroke-linecap:butt}
.tt-board[data-v="b"] .tt-gap{stroke-width:1.9}
.tt-board[data-v="c"] .tt-sleepers{stroke:color-mix(in srgb,var(--g-tracks) 24%,var(--tt-paper));stroke-width:5.6;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round}
.tt-board[data-v="c"] .tt-gap{display:none}
.tt-board[data-v="c"] .tt-rails{stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.tt-board[data-v="c"] .tt-rails.give{stroke:var(--tt-give);stroke-width:1.3}
.tt-board[data-v="c"] .tt-rails.half{opacity:.5}
/* the grid recedes in all three: lighter lines */
.tt-board:is([data-v="a"],[data-v="b"],[data-v="c"]) .tt-cell{box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--tt-grid) 70%,var(--tt-paper))}
/* 15b: the simple car */

/* 15c: three new looks (a/b/c were turned down) — D: wooden toy track · E: soft tiles with a bold line · F: warm band with a dashed centre */
.tt-board[data-v="d"]{--wd-give:#C8955F;--wd-give-g:#7E5532;--wd-mine:#E7C99C;--wd-mine-g:#A87A4C}
.tt-board[data-v="d"] :is(.give,.mine):is(.tt-sleepers,.tt-rails,.tt-gap){stroke-linecap:butt!important}
.tt-board[data-v="d"] .tt-sleepers{stroke-width:6.8;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.tt-board[data-v="d"] .tt-rails{stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.tt-board[data-v="d"] .tt-gap{stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tt-board[data-v="d"] .give:is(.tt-sleepers,.tt-gap){stroke:var(--wd-give)}
.tt-board[data-v="d"] .tt-rails.give{stroke:var(--wd-give-g)}
.tt-board[data-v="d"] :is(.mine,.half):is(.tt-sleepers,.tt-gap){stroke:var(--wd-mine)}
.tt-board[data-v="d"] .tt-rails:is(.mine,.half){stroke:var(--wd-mine-g)}
.tt-board[data-v="d"] .tt-grp.half{opacity:.45}
.tt-board[data-v="d"] .tt-cell{box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--tt-grid) 60%,var(--tt-paper))}

.tt-board[data-v="e"]{--tile:color-mix(in srgb,var(--g-tracks) 6%,#F3F1EE);--tile-on:color-mix(in srgb,var(--g-tracks) 16%,#F6EFE7)}
.tt-board[data-v="e"]::after{border:0}
.tt-board[data-v="e"] .tt-cell{background:transparent;box-shadow:none}
.tt-board[data-v="e"] .tt-cell::before{content:'';position:absolute;inset:1.5px;border-radius:7px;background:var(--tile);transition:background-color .15s}
.tt-board[data-v="e"] .tt-cell.on::before{background:var(--tile-on)}
.tt-board[data-v="e"] .tt-cell.bad{background:transparent}
.tt-board[data-v="e"] .tt-cell.bad::before{background:color-mix(in srgb,var(--g-danger) 22%,#fff)}
.tt-board[data-v="e"] .tt-cell:focus-visible::before{box-shadow:inset 0 0 0 2px var(--g-tracks)}
.tt-board[data-v="e"] :is(.tt-sleepers,.tt-gap){display:none}
.tt-board[data-v="e"] .tt-rails{stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.tt-board[data-v="e"] .tt-rails.give{stroke:#4A3424}
.tt-board[data-v="e"] .tt-grp.half{opacity:.4}

.tt-board[data-v="f"] :is(.give,.mine):is(.tt-sleepers,.tt-rails,.tt-gap){stroke-linecap:butt!important}
.tt-board[data-v="f"] .tt-sleepers{stroke-width:6;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.tt-board[data-v="f"] .tt-sleepers.give{stroke:#6B4A31}
.tt-board[data-v="f"] .tt-sleepers:is(.mine,.half){stroke:var(--g-tracks)}
.tt-board[data-v="f"] .tt-rails{display:none}
.tt-board[data-v="f"] .tt-gap{stroke:#FFF8EE;stroke-width:.7;stroke-dasharray:1.3 1.2;stroke-linecap:round}
.tt-board[data-v="f"] .tt-grp.half{opacity:.4}
.tt-board[data-v="f"] .tt-cell{box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--tt-grid) 60%,var(--tt-paper))}

/* 15c: the engine and wagons */
.tt-car .b,.tt-car .c,.tt-car .i{stroke:#2A1C12;stroke-width:.35}
.tt-loco2 .b{fill:var(--g-tracks)}
.tt-loco2 .c{fill:#4E3221}
.tt-loco2 .l{stroke:#4E3221;stroke-width:.35;fill:none}
.tt-loco2 .k{fill:#2A2D31}
.tt-loco2 .h{fill:#FFD66B}
.tt-wagon.w1 .b{fill:#D9874A}.tt-wagon.w1 .i{fill:#F2C27E}
.tt-wagon.w2 .b{fill:#5F8A9E}.tt-wagon.w2 .i{fill:#A9C8D6}
.tt-puff{fill:#B9BDC2}