/* DESIGN TAXI tutorial: login menu, pixel handbook and Test Run.
   Colours come from theme.css variables, so light and dark themes both apply. */
.tutorial-root{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--game-ui-ink);background:var(--game-ground);font-family:var(--font-body);overflow:hidden}
.tutorial-root[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.tutorial-root::backdrop{background:#0d1018}
.tutorial-root *{box-sizing:border-box}
.tutorial-root img{image-rendering:pixelated}
.tutorial-root .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tutorial-root :focus-visible{outline:3px solid var(--game-focus);outline-offset:2px}
.tutorial-root h1,.tutorial-root h2,.tutorial-root h3{font-family:var(--font-game);font-weight:400;letter-spacing:0;margin:0}

/* Top bar and footer */
.tb-top{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--game-hud);border-bottom:3px solid var(--game-frame)}
.tb-top-taxi{width:48px;height:24px}
.tb-brand{flex:1;font-size:20px;color:var(--game-ui-ink);text-shadow:2px 2px 0 var(--game-taxi)}
.tb-tool,.tb-btn,.tm-big,.tr-tabs button,.tr-squeeze button,.tr-style-actions button,.tb-toc button,.tr-go{font:inherit;cursor:pointer;border-radius:0}
.tb-tool{min-height:44px;padding:6px 12px;border:2px solid var(--game-frame);background:var(--game-control);color:var(--game-ui-ink);font-family:var(--font-game);font-size:14px}
.tb-tool:hover{background:var(--game-control-hover)}
.tb-tool[aria-pressed=true]{box-shadow:inset 0 -4px var(--game-taxi)}
[data-view=menu] .tb-top-close{display:none}
.tb-main{min-height:0;overflow:auto;display:grid;padding:18px;overscroll-behavior:contain}
.tb-nav{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--game-hud);border-top:3px solid var(--game-frame)}
.tb-nav:empty{display:none}
.tb-count{flex:1;text-align:center;font-family:var(--font-game);font-size:14px;color:var(--game-ui-muted)}
.tb-btn{min-height:44px;padding:8px 16px;border:2px solid var(--work-edge);background:var(--work-paper-deep);color:var(--work-ink);font-family:var(--font-game);font-size:15px;box-shadow:inset 2px 2px var(--work-highlight),inset -2px -3px var(--work-wood)}
.tb-btn:hover{filter:brightness(1.06)}
.tb-btn:active{transform:translateY(2px);box-shadow:inset 2px 2px var(--work-wood)}
.tb-btn:disabled{opacity:.45;cursor:not-allowed}
.tb-primary{background:var(--game-taxi);color:#1f1a10}
.tb-big{min-height:60px;padding:12px 28px;font-size:20px}
.tb-actions,.tb-final-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tb-final-actions{flex-direction:column;align-items:stretch;justify-content:center;height:100%;max-width:360px;margin:auto}

/* Login menu */
.tm{place-self:center;width:min(760px,100%);display:grid;justify-items:center;text-align:center;gap:12px;padding:28px;background:var(--game-paper);color:var(--game-ink);border:4px solid var(--game-frame);box-shadow:8px 8px 0 #0006}
.tm-taxi{width:96px;height:48px;animation:tb-drive 3s steps(6) infinite}
.tm-title{font-size:clamp(34px,8vw,64px);line-height:1;color:var(--game-ink);text-shadow:3px 3px 0 var(--game-taxi)}
.tm-sub{margin:0;font-size:17px}
.tm-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin-top:8px}
.tm-big{display:grid;gap:6px;min-height:120px;padding:18px;border:3px solid var(--work-edge);background:var(--game-taxi);color:#1f1a10;text-align:center;box-shadow:inset 3px 3px #fff8,inset -3px -4px #0003,4px 4px 0 #0005}
.tm-big span{font-family:var(--font-game);font-size:clamp(20px,3vw,28px)}
.tm-big small{font-size:14px}
.tm-enter{background:var(--work-green);color:#fff}
.tm-big:hover{transform:translate(-1px,-1px);box-shadow:inset 3px 3px #fff8,inset -3px -4px #0003,6px 6px 0 #0005}
.tm-big:active{transform:translate(2px,2px);box-shadow:inset 3px 3px #0003}
.tm-team{display:flex;justify-content:center;gap:4px;margin-top:6px}
.tm-team .tb-avatar{width:48px;height:72px;animation:tb-bob 1.6s steps(2) infinite}
.tm-team .tb-avatar:nth-child(2n){animation-delay:.4s}
.tm-progress{margin:0;font-weight:700}
.tm-hide{display:flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.tm-hide input{width:20px;height:20px;accent-color:var(--work-green)}
.tm-note{margin:0;font-size:13px;color:inherit;opacity:.8}

/* Book */
.tb-stage{display:grid;place-self:center;width:min(1240px,100%);height:min(760px,100%);perspective:2200px;touch-action:pan-y}
.tb-page{grid-area:1/1;position:relative;min-height:0;overflow:auto;background:var(--work-paper);color:var(--work-ink);border:4px solid var(--work-edge);box-shadow:inset 0 0 0 4px var(--work-paper-deep),10px 10px 0 #0005;transform-origin:left center;backface-visibility:hidden}
.tb-flip-out{z-index:2;animation:tb-flip-out .45s steps(6) forwards}
.tb-flip-in{z-index:2;animation:tb-flip-in .45s steps(6)}
@keyframes tb-flip-out{to{transform:rotateY(-90deg);filter:brightness(.6)}}
@keyframes tb-flip-in{from{transform:rotateY(-90deg);filter:brightness(.6)}}
.tb-spread{display:grid;grid-template-columns:1fr 1fr;min-height:100%}
.tb-leaf{padding:28px 32px 44px;min-width:0}
.tb-leaf+.tb-leaf{border-left:4px dashed var(--work-paper-deep);background:linear-gradient(90deg,#0000000d,transparent 24px)}
.tb-folio{position:absolute;right:16px;bottom:8px;margin:0;font-family:var(--font-game);font-size:13px;color:var(--work-muted)}
.tb-kicker{margin:0 0 4px;font-family:var(--font-game);font-size:13px;text-transform:uppercase;color:var(--work-muted)}
.tr .tb-kicker,.tm .tb-kicker{color:inherit;opacity:.75}
.tb-h{font-size:clamp(26px,3.2vw,38px);line-height:1.1;margin-bottom:12px}
.tb-h:focus{outline:none}
.tb-h:focus-visible{outline:none}
.tutorial-root h3{font-size:18px;margin:16px 0 6px}
.tb-lede{font-size:17px;line-height:1.45}
.tb-list,.tb-steps{margin:0;padding-left:22px;line-height:1.5}
.tb-list li,.tb-steps li{margin:4px 0}
.tb-steps li::marker{font-family:var(--font-game);color:var(--work-blue)}
.tb-tip{margin:14px 0 0;padding:10px 12px;border-left:6px solid var(--game-taxi);background:var(--work-paper-deep);font-size:14px}
.tb-role{margin:0;color:var(--work-muted);font-weight:700}
.tb-person{display:flex;align-items:flex-end;gap:14px;margin-bottom:6px}
.tb-avatar{width:48px;height:72px;object-fit:contain}
.tb-avatar-big{width:96px;height:144px;animation:tb-bob 1.6s steps(2) infinite}
.tb-done{font-weight:700;color:var(--work-green)}

/* Cover */
.tb-cover{display:grid;place-items:center;background:var(--work-navy);color:#fff;text-align:center}
.tb-cover-inner{display:grid;justify-items:center;gap:12px;padding:32px}
.tb-cover-kicker{margin:0;font-family:var(--font-game);font-size:16px;color:var(--game-taxi)}
.tb-cover-title{font-size:clamp(52px,10vw,110px);line-height:.9;color:var(--game-taxi);text-shadow:5px 5px 0 #0007}
.tb-cover-taxi{width:128px;height:64px;animation:tb-drive 3s steps(6) infinite}
.tb-cover-team{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tb-cover-team .tb-avatar{width:56px;height:84px}
.tb-cover-sub{max-width:520px;margin:0;font-size:17px}
.tb-cover-hint{margin:0;font-size:13px;opacity:.8}
.tb-final-team{justify-content:flex-start;margin:12px 0}

/* Table of contents */
.tb-toc{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.tb-toc button{display:flex;align-items:baseline;gap:8px;width:100%;min-height:44px;padding:8px 6px;border:0;background:none;color:var(--work-ink);text-align:left;font-size:17px}
.tb-toc button:hover{background:var(--work-paper-deep)}
.tb-toc i{flex:1;border-bottom:3px dotted var(--work-muted)}
.tb-toc b{font-family:var(--font-game)}
.tb-run-card{display:flex;gap:12px;align-items:flex-end;margin-top:18px;padding:14px;border:3px solid var(--work-edge);background:var(--work-paper-deep)}
.tb-run-card p{margin:4px 0 10px}

/* Traffic lights and medal shelf */
.tb-lights{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tb-lights li{display:flex;align-items:center;gap:10px}
.tb-lights i{width:22px;height:22px;border:3px solid var(--work-edge)}
.tutorial-root i.RED,.tutorial-root .mk-legend .RED::before{background:var(--work-signal-red)}
.tutorial-root i.YELLOW,.tutorial-root .mk-legend .YELLOW::before{background:var(--work-signal-yellow)}
.tutorial-root i.GREEN,.tutorial-root .mk-legend .GREEN::before{background:var(--work-signal-green)}
.tb-medal-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.tb-medal-card{display:grid;justify-items:center;gap:6px;margin:0;padding:14px 8px;border:3px solid var(--work-edge);background:var(--work-paper-deep);text-align:center}
.tb-medal-card img{width:48px;height:64px}
.tb-medal-card figcaption{display:grid;font-size:14px}
.tb-medal-card.locked{opacity:.7}
.tb-medal-lock{display:grid;place-items:center;width:48px;height:64px;border:3px dashed var(--work-muted);font-family:var(--font-game);font-size:26px;color:var(--work-muted)}

/* Window previews (static mock, aria-hidden) */
.tb-preview{margin:14px 0 0}
.tb-preview figcaption{margin-bottom:6px;font-size:13px;font-weight:700;color:var(--work-muted)}
.tb-win{--tone:var(--work-navy);border:3px solid var(--work-edge);background:var(--work-paper);color:var(--work-ink);box-shadow:5px 5px 0 #0004;font-size:13px}
.tb-win[data-tone=sam]{--tone:var(--work-green)}
.tb-win[data-tone=pi]{--tone:var(--work-navy)}
.tb-win[data-tone=ava]{--tone:var(--work-amber)}
.tb-win[data-tone=leo]{--tone:var(--work-blue)}
.tb-win[data-tone=missl]{--tone:var(--work-navy)}
.tb-win[data-tone=niko]{--tone:var(--work-violet)}
.tb-win[data-tone=board]{--tone:var(--work-wood)}
.tb-win[data-tone=boss]{--tone:var(--work-red)}
.tb-win-bar{display:flex;align-items:center;gap:8px;padding:4px 8px;background:var(--tone);color:var(--work-title-ink);font-family:var(--font-game);font-size:15px}
.tb-win-bar .tb-avatar{width:22px;height:33px;object-fit:cover;object-position:top}
.tb-win-bar span{flex:1;display:grid}
.tb-win-bar small{font-family:var(--font-body);font-size:11px;opacity:.85}
.tb-demo-tag{padding:2px 6px;background:var(--game-taxi);color:#1f1a10;font-size:11px;font-weight:400}
.tb-win-body{display:grid;gap:7px;padding:10px}
.mk-h{margin:4px 0 0;font-family:var(--font-game);font-size:14px}
.mk-tabs{display:flex;flex-wrap:wrap;gap:4px}
.mk-tabs span{padding:4px 8px;border:2px solid var(--work-edge);background:var(--work-paper-deep)}
.mk-tabs .on{background:var(--tone);color:var(--work-title-ink)}
.mk-field{display:grid;gap:2px}
.mk-field small{font-weight:700;color:var(--work-muted)}
.mk-field span{min-height:28px;padding:5px 8px;background:var(--work-input);border:2px solid var(--work-input-edge);color:var(--work-ghost)}
.mk-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk-btn{display:inline-block;justify-self:start;padding:5px 12px;border:2px solid var(--work-edge);background:var(--work-paper-deep);font-family:var(--font-game);box-shadow:inset 2px 2px var(--work-highlight),inset -2px -3px var(--work-wood)}
.mk-primary{background:var(--tone);color:var(--work-title-ink)}
.mk-work{background:var(--work-green);color:#fff}
.mk-pause{background:var(--work-signal-red);color:#fff}
.mk-result{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px;padding:6px;border:2px solid var(--work-paper-deep)}
.mk-result span:first-child{display:grid}
.mk-result small{color:var(--work-muted)}
.mk-icon{width:24px;height:24px}
.mk-slot{display:grid;grid-template-columns:24px 48px 1fr;align-items:center;gap:6px}
.mk-slot span{min-height:26px;padding:4px 6px;background:var(--work-input);border:2px solid var(--work-input-edge)}
.mk-job{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px}
.mk-job span:first-child{display:grid}
.mk-bar{height:14px;border:2px solid var(--work-edge);background:var(--work-paper-deep)}
.mk-bar i{display:block;width:60%;height:100%;background:repeating-linear-gradient(90deg,var(--work-amber) 0 8px,transparent 8px 10px);animation:tb-bar 2s steps(8) infinite}
.mk-queue{display:grid;border:2px solid var(--work-edge)}
.mk-q-head,.mk-q-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:4px 8px}
.mk-q-head{background:var(--work-paper-deep);font-weight:700}
.mk-q-row{grid-template-columns:24px 1fr auto;align-items:center}
.mk-q-row em{font-style:normal;padding:1px 6px;border:2px solid var(--work-edge)}
.mk-q-row em.RED{background:var(--work-signal-red);color:#fff}
.mk-q-row em.YELLOW{background:var(--work-signal-yellow);color:#1f1a10}
.mk-q-row em.GREEN{background:var(--work-signal-green);color:#fff}
.mk-check{display:flex;align-items:center;gap:6px}
.mk-check i{width:16px;height:16px;border:2px solid var(--work-edge);background:var(--work-green)}
.mk-matrix{display:grid;gap:2px}
.mk-mx-row{display:grid;grid-template-columns:minmax(110px,2fr) repeat(4,1fr);gap:2px;align-items:center}
.mk-mx-row i{height:18px;background:var(--work-paper-deep);border:1px solid var(--work-input-edge)}
.mk-mx-head{font-weight:700;font-size:11px}
.mk-top,.mk-story{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:center}
.mk-top{padding:8px;background:var(--work-paper-deep)}
.mk-top span,.mk-story span{display:grid}
.mk-top small,.mk-story small{color:var(--work-muted)}
.mk-board{position:relative;height:190px;background:#f4f1e6;border:4px solid #b9b2a0;background-image:linear-gradient(#0000000a 1px,transparent 1px),linear-gradient(90deg,#0000000a 1px,transparent 1px);background-size:16px 16px}
.mk-note{position:absolute;width:110px;padding:8px;color:#2a2416;font-size:12px;box-shadow:3px 3px 0 #0003}
.mk-note.n1{left:8%;top:12%;background:#ffe27a;transform:rotate(-3deg)}
.mk-note.n2{left:52%;top:8%;background:#a8e0ff;transform:rotate(2deg)}
.mk-note.n3{left:32%;top:56%;background:#b9f2a8;transform:rotate(-1deg)}
.mk-link{position:absolute;left:30%;top:38%;width:30%;border-top:3px dashed #555;transform:rotate(18deg)}
.mk-map{position:relative;height:190px;border:3px solid var(--work-edge);background:#bfdba8;background-image:linear-gradient(115deg,transparent 46%,#8fb8d8 46% 54%,transparent 54%),linear-gradient(20deg,transparent 48%,#e8e2cc 48% 51%,transparent 51%),linear-gradient(160deg,transparent 60%,#e8e2cc 60% 63%,transparent 63%)}
.mk-map i{position:absolute;width:14px;height:14px;border:3px solid #fff;outline:2px solid #2228}
.mk-legend{display:flex;flex-wrap:wrap;gap:10px}
.mk-legend span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-1px;border:2px solid var(--work-edge)}
.mk-chain{display:flex;align-items:center;justify-content:space-around;gap:6px;padding:6px;background:var(--work-paper-deep)}
.mk-chain span{display:grid;justify-items:center;font-family:var(--font-game)}
.mk-chain small{font-family:var(--font-body);color:var(--work-muted)}
.mk-chain b{font-size:26px;color:var(--work-muted)}
.mk-boss{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:8px;background:#3a2b22}
.mk-dart{aspect-ratio:1;max-width:190px;border-radius:50%;background:radial-gradient(circle,var(--work-signal-green) 0 18%,#222 18% 21%,var(--work-signal-yellow) 21% 52%,#222 52% 55%,var(--work-signal-red) 55% 100%);border:5px solid #111;position:relative}
.mk-dart i{position:absolute;left:46%;top:40%;width:5px;height:22px;background:#eee;transform:rotate(30deg)}
.mk-boss-side{display:grid;gap:10px}
.mk-door{padding:28px 10px 10px;background:#6b4a33;color:#fff;border:3px solid #241811;text-align:center;font-size:12px}

/* Speech bubbles */
.tb-say{display:flex;align-items:flex-end;gap:10px}
.tb-say .tb-avatar{width:72px;height:108px;flex:none;animation:tb-bob 1.6s steps(2) infinite}
.tb-bubble{position:relative;display:grid;gap:4px;margin:0 0 40px;padding:12px 14px;max-width:420px;background:#fffdf4;color:#1f1a10;border:3px solid #1f1a10;box-shadow:4px 4px 0 #0005;font-size:16px;line-height:1.4}
.tb-bubble::before{content:"";position:absolute;left:-12px;bottom:12px;border:8px solid transparent;border-right:10px solid #1f1a10;border-left:0}
.tb-bubble strong{font-family:var(--font-game);font-size:13px;font-weight:400;color:#6b5a2f}
.tb-say.talking .tb-bubble{animation:tb-pop .3s steps(3)}
.tb-say.talking .tb-avatar{animation:tb-talk .14s steps(2) 4}
.tb-say.wrong .tb-bubble{background:#ffe3df;border-color:#8f1d12}
.tb-say.happy .tb-bubble{background:#e6f8dc}

/* Test Run */
.tr{place-self:center;width:min(1180px,100%);display:grid;gap:14px;padding:22px;background:var(--game-paper);color:var(--game-ink);border:4px solid var(--game-frame);box-shadow:8px 8px 0 #0006}
.tr-body{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:20px;align-items:start}
.tr-coach{position:sticky;top:0}
.tr-plan{display:grid;gap:10px}
.tr-plan-row{display:flex;align-items:center;gap:12px;padding:10px;border:3px solid var(--work-edge);background:var(--work-paper);color:var(--work-ink)}
.tr-plan-row span{display:grid}
.tr-win{font-size:15px}
.tr-win.shake{animation:tb-shake .3s steps(4)}
.tr-form{display:grid;gap:10px}
.tr-form label{display:grid;gap:4px;font-weight:700}
.tr-form input{min-height:44px;padding:8px 10px;font:inherit;font-weight:400;background:var(--work-input);color:var(--work-ink);border:2px solid var(--work-input-edge);border-radius:0}
.tr-form input:disabled{opacity:.7}
.tr-go{justify-self:start;min-height:46px;padding:8px 20px;border:3px solid #555;background:#9a9a9a;color:#efefef;font-family:var(--font-game);font-size:17px;box-shadow:inset 2px 2px #bdbdbd,inset -2px -3px #6e6e6e;transition:background .2s steps(2)}
.tr-go[aria-disabled=true]{cursor:not-allowed}
.tr-go.ready[data-color=green]{background:var(--work-signal-green);border-color:#1d5b20;color:#fff;box-shadow:inset 2px 2px #fff6,inset -2px -3px #0004}
.tr-go.ready[data-color=blue]{background:var(--work-signal-blue);border-color:#173a7a;color:#fff;box-shadow:inset 2px 2px #fff6,inset -2px -3px #0004}
.tr-go:disabled{opacity:.8;cursor:default}
.tr-results,.tr-styles{display:grid;gap:8px}
.tr-results:empty,.tr-styles:empty{display:none}
.tr-status{margin:0;font-weight:700}
.tr-status:empty{display:none}
.tr-style{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:10px;border:3px solid var(--work-paper-deep)}
.tr-style h3{margin:0;font-size:16px}
.tr-style p{margin:2px 0 0}
.tr-style.accept{border-color:var(--work-signal-green)}
.tr-style.deny{border-color:var(--work-signal-red);opacity:.75}
.tr-swatch{width:44px;height:44px;border:3px solid var(--work-edge)}
.tr-swatch.s0{background:linear-gradient(#f6f1e7 0 60%,#2d2a26 60%)}
.tr-swatch.s1{background:linear-gradient(135deg,#14161c 0 70%,#30e0a1 70%)}
.tr-swatch.s2{background:linear-gradient(#e9d6b8 0 50%,#9b5b3c 50%)}
.tr-style-actions{grid-column:1/-1;display:flex;gap:8px}
.tr-style-actions button,.tr-tabs button,.tr-squeeze button{min-height:44px;padding:6px 14px;border:2px solid var(--work-edge);background:var(--work-paper-deep);color:var(--work-ink);box-shadow:inset 2px 2px var(--work-highlight),inset -2px -3px var(--work-wood);font-family:var(--font-game)}
.tr-style-actions [data-choice=accept][aria-pressed=true]{background:var(--work-signal-green);color:#fff}
.tr-style-actions [data-choice=deny][aria-pressed=true]{background:var(--work-signal-red);color:#fff}
.tr-tabs{display:flex;flex-wrap:wrap;gap:4px}
.tr-tabs button[aria-pressed=true]{background:var(--work-navy);color:var(--work-title-ink)}
.tr-tab-body{display:grid;gap:8px}
.tr-squeeze{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr-squeeze button{display:grid;gap:4px;justify-items:start;text-align:left;min-height:96px;padding:10px;font-family:var(--font-body)}
.tr-squeeze button span{font-family:var(--font-game);color:var(--work-muted)}
.tr-squeeze button strong{font-family:var(--font-game);font-weight:400;font-size:16px}
.tr-squeeze button em{font-style:normal;font-weight:700;color:var(--work-green)}
.tr-squeeze button[aria-pressed=true]{border-color:var(--work-signal-green);background:var(--work-paper)}
.tr-progress{margin:0;font-weight:700;color:var(--work-muted)}
.tr-dots{flex:1;display:flex;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.tr-dots li{padding:4px 10px;border:2px solid var(--game-frame);font-family:var(--font-game);font-size:13px;color:var(--game-ui-muted)}
.tr-dots li.now{color:var(--game-ui-ink);background:var(--game-control)}
.tr-dots li.done{color:#fff;background:var(--work-green)}
.tr-next[aria-disabled=true]{background:#9a9a9a;color:#e6e6e6;box-shadow:inset 2px 2px #bdbdbd,inset -2px -3px #6e6e6e;cursor:not-allowed}
.tr-congrats,.tr-award{justify-items:center;text-align:center;max-width:720px}
.tr-congrats p{margin:0}
.tr-congrats-title{font-family:var(--font-game);font-size:22px;color:var(--work-green)}
.tr-congrats .tb-say{text-align:left}
.tr-burst,.tr-medal{position:relative;display:grid;place-items:center;width:180px;height:180px}
.tr-medal{width:160px;height:160px}
.tr-burst::before,.tr-medal::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(var(--game-taxi) 0 15deg,transparent 15deg 30deg);animation:tb-spin 6s steps(24) infinite}
.tr-burst .tb-avatar{position:relative;animation:tb-jump .6s steps(3) infinite alternate}
.tr-medal img{position:relative;width:72px;height:96px;animation:tb-medal .8s steps(4) both}
.tr-award .tb-h{font-size:clamp(34px,6vw,56px);color:var(--game-ink);text-shadow:3px 3px 0 var(--game-taxi)}
.tr-award p{margin:0}
.tr-award-status{font-weight:700}

@keyframes tb-bob{50%{transform:translateY(-3px)}}
@keyframes tb-talk{50%{transform:translateY(-4px) scaleY(1.03)}}
@keyframes tb-pop{from{transform:scale(.85);opacity:.4}}
@keyframes tb-shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes tb-spin{to{rotate:360deg}}
@keyframes tb-jump{to{transform:translateY(-12px)}}
@keyframes tb-medal{from{transform:scale(.2) translateY(40px);opacity:0}}
@keyframes tb-drive{50%{transform:translateX(6px)}}
@keyframes tb-bar{to{background-position:20px 0}}

/* Phone: single column, scrolling pages, larger touch targets */
@media (max-width:760px){
 .tb-top{padding:8px 10px;gap:6px}
 .tb-brand{font-size:16px}
 .tb-top-taxi{display:none}
 .tb-tool{padding:6px 8px;font-size:13px}
 .tb-main{padding:8px}
 .tb-stage{height:100%}
 .tb-spread,.tr-body,.tm-actions{grid-template-columns:1fr}
 .tb-leaf{padding:18px 16px 26px}
 .tb-leaf+.tb-leaf{border-left:0;border-top:4px dashed var(--work-paper-deep);background:none}
 .tb-nav{gap:6px;padding:8px}
 .tb-nav .tb-mini{display:none}
 .tb-count{font-size:12px}
 .tb-btn{padding:8px 12px}
 .tm{padding:20px 14px}
 .tm-big{min-height:96px}
 .tr{padding:14px}
 .tr-coach{position:static}
 .tb-say .tb-avatar{width:52px;height:78px}
 .tb-bubble{font-size:15px;margin-bottom:24px}
 .tr-squeeze{grid-template-columns:1fr}
 .tr-dots li{padding:3px 6px;font-size:11px}
 .mk-mx-row{grid-template-columns:minmax(90px,2fr) repeat(4,1fr);font-size:11px}
 .tb-final-actions{height:auto}
}
@media (prefers-reduced-motion:reduce){
 .tutorial-root *,.tutorial-root *::before{animation:none!important;transition:none!important}
}