:root{color-scheme:light;--paper:#f6f0df;--ink:#173d42;--muted:#526966;--water:#c4e6de;--red:#b23f32;--line:#b3c2b6;font-family:ui-rounded,"Avenir Next",Avenir,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,summary{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:var(--ink);background:#fffdf5;border:1.5px solid var(--ink);border-radius:8px;padding:11px 16px;min-height:46px;font-weight:650;line-height:1.35}button:hover:not(:disabled){background:#e4eddd}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,#river:focus-visible{outline:3px solid #ae382b;outline-offset:4px}a{color:inherit;text-underline-offset:3px}p{line-height:1.55;margin:0 0 14px}h1,h2,h3{line-height:1.12;margin:0;text-wrap:balance}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.2rem,5.5vw,4.5rem);letter-spacing:-.045em;font-weight:normal}h1{overflow-wrap:anywhere}h1 span{color:var(--red)}h2{font-size:1.4rem}h3{font-size:1.3rem}.masthead,main,footer{width:min(1120px,calc(100% - 48px));margin-inline:auto}.masthead{padding-block:22px;display:flex;gap:20px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:750;text-decoration:none;min-height:44px}.brand svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2}.edition,.eyebrow{font-size:.875rem;letter-spacing:.055em;font-weight:650}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:32px 0}.eyebrow{margin-bottom:8px}.promise{margin:0;font-size:1.125rem;line-height:1.5}.game-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:32px;align-items:start}.river-panel{min-width:0;border:1.5px solid var(--ink);border-radius:16px;overflow:clip;background:#fffdf5;box-shadow:5px 6px 0 #d8dfcb}.course-heading{display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;align-items:center;padding:24px 24px 12px}.course-heading>div{min-width:0;flex:1 1 180px}.course-heading h2{overflow-wrap:anywhere;font-family:Georgia,serif;font-weight:normal;font-size:2rem}.stamp{transform:rotate(7deg);flex-shrink:0;border:2px dashed var(--red);color:var(--red);font-size:.875rem;text-align:center;line-height:1.2;padding:8px 10px;font-weight:750}.course-note{padding-inline:24px}.play-instruction{padding:0 24px;font-size:.95rem;font-weight:650}.current-guide{padding:0 24px;font-size:.875rem;color:var(--muted)}#river{display:block;width:100%;height:auto;aspect-ratio:600/520;max-height:calc(100svh - 150px);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:var(--water)}.action-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:16px 16px 0}.primary{background:var(--ink);color:#fffdf5;border-color:var(--ink)}.primary:hover:not(:disabled){background:#28545a;color:#fff}.primary span{margin-left:4px}.dispatch-status{padding:16px 20px 6px}.dispatch-status #status{font-weight:650;margin-bottom:6px}.muted{font-size:.875rem;color:var(--muted)}.result{border-top:1px dashed var(--line);background:#edf1df;padding:20px}.result h3{margin-bottom:8px}.result button{width:100%}.desk{display:grid;gap:24px;min-width:0}.controls{padding-bottom:22px;border-bottom:1px solid var(--line)}.controls h2{margin-bottom:12px}.controls p{font-size:.95rem}.controls label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-weight:700;margin-top:20px}.controls output{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;accent-color:var(--red);min-height:44px;margin:4px 0 0;cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:.875rem;color:var(--muted)}.controls .tip{margin:20px 0 0;background:#e8eddd;border-radius:8px;padding:12px 14px}.section-heading{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:14px}.route-list,.route-list ol{min-width:0;max-width:100%}.route-list ol{padding:0;list-style:none;display:grid;gap:8px;margin:0 0 14px}.course-button{width:100%;min-width:0;max-width:100%;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;align-items:center;text-align:left;background:transparent;border-color:#a9bcb1;min-height:55px}.course-button[aria-current=true]{border:2px solid var(--ink);background:#e3ecde}.course-button .number{white-space:nowrap;overflow-wrap:normal;grid-row:1/3;align-self:center;font-family:Georgia,serif;font-size:1.4rem;min-width:20px}.course-button .course-record{grid-column:2;margin-left:0;font-size:.875rem;color:var(--muted);text-align:left;font-weight:500}.text-button{border:0;text-decoration:underline;text-underline-offset:3px;background:transparent;padding-inline:0;font-weight:500}.help{border-top:1px solid var(--line);padding-top:14px}.help summary{font-weight:650;min-height:44px;padding:10px 0;cursor:pointer}.help p{font-size:.95rem}.privacy-consent{padding:12px 14px;border:1.5px solid var(--ink);border-radius:12px;background:#fffdf5;box-shadow:5px 6px 0 #d8dfcb;display:grid;gap:8px;opacity:0;transform:translateY(8px);animation:privacy-consent-in .18s ease-out forwards}.privacy-consent p{margin:0;font-size:.95rem;line-height:1.4}.privacy-consent a{text-decoration:underline;text-underline-offset:3px}.privacy-consent-actions{display:flex;gap:8px}.privacy-consent-actions button{flex:1;min-height:44px;padding:9px 10px}.privacy-consent-allow{background:var(--ink);color:#fffdf5;border-color:var(--ink)}.privacy-consent-allow:hover:not(:disabled){background:#28545a;color:#fff}.privacy-consent-decline{background:transparent;color:var(--muted);border-color:var(--line);font-weight:600}.privacy-consent-decline:hover:not(:disabled){background:#e4eddd}@keyframes privacy-consent-in{to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.privacy-consent{animation:none;opacity:1;transform:none}}footer{border-top:1px solid var(--line);margin-top:40px;padding-block:26px 36px;font-size:.95rem}footer nav{display:flex;gap:8px 24px;flex-wrap:wrap;align-items:center;margin-bottom:12px}footer nav a{padding-block:12px;min-height:44px}.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}#share-fallback{display:block;overflow-wrap:anywhere;margin-top:12px}.notice{padding:20px;background:#fff0da}.document{max-width:720px;margin:40px auto}.document h1{margin-bottom:24px}.document h2{margin:28px 0 14px}.document li{line-height:1.6;margin-bottom:12px}.document details{margin:0 0 14px}.document details summary{min-height:44px;padding:10px 0;cursor:pointer}.document details label{display:flex;align-items:center;gap:10px;min-height:44px}.document details input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--ink)}[hidden]{display:none!important}@media(max-width:800px){.game-layout{grid-template-columns:minmax(0,1fr);gap:28px}.desk{grid-template-columns:1fr 1fr;gap:28px}.help{grid-column:1/-1}.controls{border-bottom:0}.intro{align-items:flex-start}.promise{font-size:1rem}}@media(max-width:520px){.masthead,main,footer{width:calc(100% - 28px)}.masthead{padding-block:12px;gap:8px;flex-wrap:wrap}.brand{font-size:.95rem}.brand svg{width:32px;height:32px}.edition{font-size:.875rem}.intro{display:block;margin:24px 0}.promise{margin-top:12px}.promise br{display:none}.promise br:after{content:' '}.eyebrow{letter-spacing:.025em}.course-heading{padding:18px 16px 10px}.course-heading>div{min-width:0;flex:1 1 180px}.course-heading h2{overflow-wrap:anywhere;font-size:1.7rem}.course-note{padding-inline:16px;min-height:0;font-size:.95rem}.stamp{padding:7px;font-size:.875rem}.action-bar{padding:12px 10px 0;gap:8px;grid-template-columns:1fr 1fr}.action-bar .primary{grid-column:1/-1}.current-guide,.play-instruction{padding-inline:16px}.action-bar button{padding:11px 9px}.desk{grid-template-columns:minmax(0,1fr);gap:22px}.controls{border-bottom:1px solid var(--line)}.privacy-consent{padding:10px 12px}.dispatch-status{padding:14px 16px 4px}.result{padding:16px}.document{margin-block:28px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.course-button span{min-width:0;overflow-wrap:anywhere}

/* RTG-030 app-like navigation, preserving Drift's river palette and route cards. */
[hidden]{display:none!important}.drift-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:520px;margin:0 auto 18px;padding:4px;border:1px solid #afc6ba;border-radius:14px;background:#e9f1eb}.drift-tabs [role=tab]{min-height:46px;border:0;border-radius:10px;background:transparent;color:#315c57;font:inherit;font-weight:750;cursor:pointer}.drift-tabs [aria-selected=true]{background:#fff;color:#173d42;box-shadow:0 2px 8px #173d421c}.drift-tabs :focus-visible{outline:3px solid #39847c;outline-offset:3px}#course-list-panel{width:min(100%,760px);min-height:60vh;min-height:60svh;margin:0 auto;padding:clamp(16px,4vw,28px);border:1px solid #bad0c5;border-radius:20px;background:#f7fbf7}.#course-list-panel .section-heading h2{font-size:24px}#course-list-panel .course-button{min-height:58px}.masthead{padding-top:max(14px,env(safe-area-inset-top));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}
@media(max-width:640px){.drift-tabs{margin-bottom:13px}.drift-tabs [role=tab]{min-height:48px}#course-list-panel{border-radius:17px}.game-layout{gap:14px}}
@media(max-width:650px){.intro{margin-bottom:12px}.drift-tabs{margin-bottom:10px}.game-layout{gap:10px}.river-panel{padding:12px}.course-note,.play-instruction,.current-guide{margin-bottom:8px}#river{display:block;width:min(100%,320px);height:auto;margin:0 auto}}
@media(max-width:650px){main{padding-top:12px}.drift-tabs{margin-bottom:8px}.river-panel{padding:8px}.course-note,.play-instruction,.current-guide{margin-bottom:8px}#river{width:min(100%,280px)}}
@media(max-width:650px){.action-bar{grid-template-columns:minmax(0,1fr) minmax(100px,.58fr);grid-template-rows:auto auto;gap:8px}.action-bar #primary{grid-column:1;grid-row:1}.action-bar #pause{grid-column:2;grid-row:1}.action-bar #retry{grid-column:1/-1;grid-row:2}}
html{min-height:100%}body{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}

/* RTG-031: keep the page end (footer links) reachable above the floating consent card. */
body:has(.privacy-consent-floating){padding-bottom:calc(150px + env(safe-area-inset-bottom))}
/* Full screen: the whole trip fits one screen; the river takes every pixel the controls leave. */
html.game-fullscreen-lock{overflow:hidden;overscroll-behavior:none}
.fullscreen-fit{display:contents}
#river:focus:not(:focus-visible){outline:none}
.fullscreen-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-align:center;border-color:var(--ink);background:#e3efe9;color:var(--ink);font-weight:750}
.fullscreen-toggle:hover{background:#d3e6dd}
.fullscreen-toggle svg,.river-panel .fullscreen-toggle svg{flex:none;display:inline-block;width:20px;height:20px;aspect-ratio:auto;max-height:none;background:none}
/* The river spans the phone's width; nothing shrinks it to fit text or buttons. */
@media(max-width:650px){#river{width:100%}}
/* After a delivery the trip button already says "Next delivery", so the result card doesn't repeat it. */
.result #next{display:none}
/* The trip buttons keep the same slots in every state, so nothing jumps when a delivery ends: one row when the river is wide, two rows when it is narrow. */
.river-panel{container:river-panel/inline-size}
.action-bar:has(.fullscreen-toggle){grid-template-columns:minmax(0,1fr) auto auto auto}
@media(max-width:359px){.action-bar .fullscreen-label{display:none}}
@container river-panel (max-width:600px){.action-bar:has(.fullscreen-toggle){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.action-bar .fullscreen-toggle{padding-inline:6px;gap:5px}.action-bar:has(.fullscreen-toggle) #primary{grid-column:1;grid-row:1}.action-bar:has(.fullscreen-toggle) #pause{grid-column:2;grid-row:1}.action-bar:has(.fullscreen-toggle) #retry{grid-column:1;grid-row:2}.action-bar:has(.fullscreen-toggle) .fullscreen-toggle{grid-column:2;grid-row:2}}
@container river-panel (max-width:300px){.action-bar:has(.fullscreen-toggle){grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.action-bar:has(.fullscreen-toggle) #primary{grid-column:1/-1;grid-row:1}.action-bar:has(.fullscreen-toggle) #pause{grid-column:1;grid-row:2}.action-bar:has(.fullscreen-toggle) #retry{grid-column:2;grid-row:2}.action-bar:has(.fullscreen-toggle) .fullscreen-toggle{grid-column:3;grid-row:2}}
/* Full screen: heading, river, buttons and status sit together as one group. The river row is exactly as tall as the full-width river,
   so spare height goes above and below the whole group, never between the heading and the river. */
.game-layout.is-fullscreen{--fs-t:max(10px,env(safe-area-inset-top));--fs-r:max(12px,env(safe-area-inset-right));--fs-b:max(10px,env(safe-area-inset-bottom));--fs-l:max(12px,env(safe-area-inset-left));container:drift-fs/inline-size;position:fixed;inset:0;z-index:2147483001;margin:0;background:var(--paper);overflow:auto;overscroll-behavior:none;padding:var(--fs-t) var(--fs-r) var(--fs-b) var(--fs-l);display:grid;gap:8px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto minmax(min(35dvh,70vw),calc((100vw - var(--fs-l) - var(--fs-r)) * 520 / 600)) auto auto minmax(0,1fr);grid-template-areas:"." "head" "guide" "board" "actions" "status" "."}
.game-layout.is-fullscreen .river-panel{display:contents}
.game-layout.is-fullscreen .desk,.game-layout.is-fullscreen .course-note,.game-layout.is-fullscreen .play-instruction,.game-layout.is-fullscreen #run-detail{display:none}
.game-layout.is-fullscreen .course-heading{grid-area:head;flex-wrap:wrap;gap:8px 12px;padding:0}
/* An em-based basis keeps one row at normal sizes and gives the title its own line when text is enlarged. */
.game-layout.is-fullscreen .course-heading>div{flex:1 1 6em;min-width:0}
.game-layout.is-fullscreen .course-heading h2{overflow-wrap:normal}
.game-layout.is-fullscreen .course-heading h2{font-size:1.5rem}
.game-layout.is-fullscreen .course-heading .eyebrow{margin-bottom:2px}
.game-layout.is-fullscreen .stamp{font-size:.75rem;padding:5px 7px;min-width:7em}
.game-layout.is-fullscreen .course-heading .fullscreen-toggle{min-height:44px;padding:0 13px 0 10px;border:1.5px solid var(--ink);border-radius:10px}
.game-layout.is-fullscreen .current-guide{grid-area:guide;margin:0;padding:0}
.game-layout.is-fullscreen .fullscreen-fit{grid-area:board;align-self:stretch;justify-self:stretch;display:grid;place-items:center;container-type:size;min-width:0;min-height:0}
.game-layout.is-fullscreen #river{width:min(100cqw,calc(100cqh * 600 / 520));height:auto;max-height:none;margin:0;border:1.5px solid var(--ink);border-radius:14px}
/* Pause and Retry keep their places in every state (dimmed while they can't be used), so the main button never jumps or resizes. */
.game-layout.is-fullscreen .action-bar{grid-area:actions;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:none;padding:0}
.game-layout.is-fullscreen .action-bar>button,.game-layout.is-fullscreen .action-bar #primary,.game-layout.is-fullscreen .action-bar #pause,.game-layout.is-fullscreen .action-bar #retry{grid-column:auto;grid-row:auto;min-height:48px;padding-inline:12px}
.game-layout.is-fullscreen .dispatch-status{grid-area:status;padding:0}
/* Two lines are always reserved, so a shorter message never moves the river or the buttons. */
.game-layout.is-fullscreen .dispatch-status #status{margin:0;font-size:.95rem;line-height:1.4;min-height:2.8em}
.game-layout.is-fullscreen .result{grid-area:board;z-index:1;align-self:end;justify-self:center;width:min(88%,340px);margin-bottom:calc(4% + 10px);padding:14px 16px;border:1.5px solid var(--ink);border-radius:14px;box-shadow:4px 5px 0 #d8dfcb;animation:result-in .4s cubic-bezier(.3,1.5,.5,1)}
.game-layout.is-fullscreen .result p{margin:0}
@keyframes result-in{0%{transform:scale(.9);opacity:0}100%{transform:none;opacity:1}}
/* The stamp keeps one width whatever it says ("Post delivered" is widest), so the heading never rewraps when a trip ends. */
.stamp{min-width:7.25em}
@container drift-fs (max-width:21em){.game-layout.is-fullscreen .stamp{display:none}}
/* Too narrow for three buttons in a row (small phones, or enlarged text): the main button gets its own row. */
@container drift-fs (max-width:19.5em){.game-layout.is-fullscreen .action-bar{grid-template-columns:1fr 1fr}.game-layout.is-fullscreen .action-bar #primary{grid-column:1/-1}}
/* Held sideways: the river on the left at full height, the heading top right and the buttons bottom right, where thumbs rest.
   The river column is only as wide as the river, and the pair is centred, so there is no empty strip beside the river. */
@media(orientation:landscape){
.game-layout.is-fullscreen{--fs-gap:clamp(14px,2.5vw,24px);column-gap:0;grid-template-columns:minmax(0,1fr) minmax(0,calc((100dvh - var(--fs-t) - var(--fs-b)) * 600 / 520 + var(--fs-gap))) clamp(15em,28vw,20em) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:". board head ." ". board guide ." ". board . ." ". board status ." ". board actions ."}
.game-layout.is-fullscreen .fullscreen-fit,.game-layout.is-fullscreen .result{margin-right:var(--fs-gap)}
/* The river can be narrower than its column here, so the delivered card sits in the middle of the water rather than at the column's foot. */
.game-layout.is-fullscreen .result{align-self:center;margin-bottom:0}
.game-layout.is-fullscreen .action-bar{grid-template-columns:1fr 1fr}
.game-layout.is-fullscreen .action-bar #primary{grid-column:1/-1}
}
@media(orientation:landscape) and (max-height:520px){.game-layout.is-fullscreen .stamp,.game-layout.is-fullscreen .result{display:none}.game-layout.is-fullscreen{gap:6px}.game-layout.is-fullscreen .course-heading h2{font-size:1.2rem}.game-layout.is-fullscreen .action-bar>button{min-height:44px;padding:8px}}
@media(prefers-reduced-motion:reduce){.game-layout.is-fullscreen .result{animation:none}}
.fullscreen-tip{position:absolute;z-index:2;top:calc(max(10px,env(safe-area-inset-top)) + 92px);left:50%;transform:translateX(-50%);width:min(92%,420px);display:flex;align-items:center;gap:8px;padding:10px 8px 10px 14px;border-radius:12px;background:var(--ink);color:#fffdf5;box-shadow:0 8px 24px #173d4240}
.fullscreen-tip p{margin:0;font-size:.875rem;line-height:1.4}
.fullscreen-tip button{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit}
.try-another{margin:10px 0 0;font-size:14px;text-align:center}.try-another a{color:var(--muted)}

/* Reaches: the route list groups courses under a small heading; numbering runs through the whole river. */
.daily{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}.daily p{font-size:.95rem;margin-bottom:8px}.daily .muted{font-size:.875rem}.daily button{width:100%;margin-top:8px}.result #daily-share{margin-top:10px}#daily-share-status,#daily-share-fallback{margin:8px 0 0;overflow-wrap:anywhere}
.reach h3{font-size:.95rem;font-weight:650;color:var(--muted);margin:0 0 8px;letter-spacing:.02em}.reach+.reach{margin-top:18px}
/* Enlarged text: a tab label may not push the tab row past the page edge; it wraps inside its half instead. */
.drift-tabs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.drift-tabs [role=tab]{min-width:0;overflow-wrap:anywhere;padding-inline:6px}

/* Player feel: marks on the result card, the sound toggle, and on phones a trip bar that stays under the river without the page jumping. */
.result-marks{margin:0 0 12px;font-size:.95rem;color:var(--muted)}
.sound-toggle{margin-top:14px;min-height:44px;padding:9px 14px;font-weight:650;background:#e3efe9}
@media(max-width:650px){.promise,.play-instruction{display:none}.intro{margin:14px 0 6px}.action-bar{position:relative;background:#fffdf5;padding-bottom:calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}}

/* Game-first masthead: Drift Dispatch's own mark and name lead and link to the game's start; Dayplay Games is a small publisher line at the trailing edge. */
.masthead{padding-block:max(14px,env(safe-area-inset-top)) 14px;padding-inline:max(0px,calc(env(safe-area-inset-left) - 14px)) max(0px,calc(env(safe-area-inset-right) - 14px));flex-wrap:wrap;gap:6px 20px;margin-bottom:18px}
.game-brand{min-width:0}
.game-title{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:normal;font-size:clamp(1.55rem,3.2vw,2.4rem);letter-spacing:-.035em;line-height:1.1;overflow-wrap:normal}
.game-title a{display:inline-flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;color:var(--ink)}
.game-title span{color:inherit}.game-title .dot{color:var(--red)}
.game-mark{flex:none;width:48px;height:48px;border-radius:12px}
.tagline{margin:2px 0 0 60px;font-size:1rem;color:var(--muted)}
.publisher{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:auto;font-size:.875rem;font-weight:600;color:var(--muted);text-decoration:none;max-width:100%}.publisher{flex-wrap:wrap;row-gap:0}.publisher span:last-child,.game-title a>span{min-width:0;overflow-wrap:break-word}.game-brand{max-width:100%}
@media(hover:hover){.publisher:hover{color:var(--ink);text-decoration:underline}}
.publisher img{flex:none;width:20px;height:20px;border-radius:4px}
@media(max-width:650px){.masthead{padding-block:max(8px,env(safe-area-inset-top)) 6px;margin-bottom:10px;gap:0 12px}.game-title{font-size:1.35rem}.game-title a{gap:8px;min-height:44px}.game-mark{width:34px;height:34px;border-radius:9px}.tagline{display:none}.publisher{gap:5px}}
/* Small phones: the heading keeps the stamp beside the course name (as in full screen) instead of giving it a row of its own, and the icon-only full-screen button stays a 44px target. */
@media(max-width:380px){.course-heading{gap:12px}.course-heading>div{flex:1 1 130px}.course-heading .stamp{font-size:.75rem;padding:5px 7px;min-width:7em}.action-bar .fullscreen-toggle{min-width:44px}}
@media(max-width:340px){.masthead{column-gap:8px}.game-title{font-size:1.15rem}.game-title a{gap:6px}.game-mark{width:30px;height:30px;border-radius:8px}.publisher{gap:4px;font-weight:500}.publisher img{width:16px;height:16px}}
/* Short screens (a phone held sideways): less chrome above the river. */
@media(max-height:500px){.tagline,.play-instruction{display:none}.masthead{padding-block:6px;margin-bottom:8px}.game-title{font-size:1.35rem}.game-mark{width:34px;height:34px;border-radius:9px}.drift-tabs{margin-bottom:8px}.drift-tabs [role=tab]{min-height:44px}}
/* Full screen shows the game's own name and mark, nothing else from the page. */
.fs-name{display:none}
.game-layout.is-fullscreen .fs-name{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-family:Georgia,"Times New Roman",serif;font-size:1rem;line-height:1.2;letter-spacing:-.01em}
.fs-name img{flex:none;width:20px;height:20px;border-radius:5px}
/* Phones: Launch is on screen at first load under a river that keeps its full width, with the game's name still at the top.
   The trip bar stays in the page right under the river, so it never covers the boat. What gives is the chrome above the river:
   the course note moves below the trip bar (after the status line), and the heading, tabs and masthead are tighter. */
@media(max-width:650px){
.game-layout:not(.is-fullscreen) .river-panel{display:flex;flex-direction:column}
.game-layout:not(.is-fullscreen) .course-note{order:1;margin:0;padding:0 16px 12px}
main{padding-top:4px}
.masthead{margin-bottom:8px}
.drift-tabs [role=tab]{min-height:44px}
.course-heading{padding:12px 16px 8px}
.course-heading .eyebrow{margin-bottom:4px;letter-spacing:.01em}
.game-layout:not(.is-fullscreen) .current-guide{margin-bottom:6px}
.game-layout:not(.is-fullscreen) .action-bar{padding-top:10px}
}
/* Phones up to the largest: the smaller stamp that 380px screens use, so a course name like "Ferry crossing" keeps one line. */
@media(max-width:440px){.course-heading{gap:12px}.course-heading .stamp{font-size:.75rem;padding:5px 7px;min-width:7em}}
/* The narrowest phones: the publisher line stays beside the game's name, not on a row of its own ("by" is still read out), and the
   course name and count get the heading's full width, as in full screen there: the stamp steps aside (the status line and the trip
   button already say the same), so a long course name keeps one line and the river stays where it was. */
@media(max-width:340px){
.game-layout:not(.is-fullscreen) .course-heading .stamp{display:none}
.masthead{flex-wrap:nowrap;column-gap:8px}
.publisher>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
.eyebrow .count{white-space:nowrap}

/* First-visit tutorial (lib/game-tutorial.mjs) in Drift's colours; the look and layout are shared. */
:root{--dpt-bg:#fffdf6;--dpt-ink:var(--ink);--dpt-muted:var(--muted);--dpt-line:#c9d6cb;--dpt-tint:#c4e6de;--dpt-accent:var(--ink);--dpt-accent-ink:#fff}
.tutorial-row{margin:0 0 14px}
details.help>.tutorial-row{margin:12px 0}