/* The Little Line. The game is laid out on a 1024 x 768 design (an iPad mini in landscape);
   --u is the size of one design point on this screen, set from script. */
:root {
  --u: 1px;
  --ink: #3b332d; --paper: #efe6d2; --paper-hi: #f7f0de; --sky: #e9ecdf; --page: #dfe3d4;
  --rack: #7d6049; --rack-dk: #5f4635; --glow: #fff1b0; --green: #86a876; --sign: #6f9a6c;
  --tk-go: #bcd4a9; --tk-stop: #efc1b2; --tk-act: #ecd9a6; --tk-pts: #b9cde0; --tk-loop: #b07a52; --tk-brown: #d9c3a0;
  --font-display: "Delius", "Comic Sans MS", system-ui, sans-serif;
  --font-body: "Andika", "Trebuchet MS", system-ui, sans-serif;
  --t: calc(64 * var(--u));
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--ink); overscroll-behavior: none; }
body { font-family: var(--font-body); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; }
#app { position: absolute; left: 50%; top: 50%; width: calc(1024 * var(--u)); height: calc(768 * var(--u)); transform: translate(-50%, -50%); overflow: hidden; background: var(--paper); border-radius: calc(10 * var(--u)); box-shadow: 0 0 0 1px rgba(60,50,40,.12); }
.screen { position: absolute; inset: 0; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

/* ---------- round buttons ---------- */
.round {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; position: relative;
  width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; background: var(--paper-hi); color: var(--ink);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(110,80,45,.35), 0 calc(7 * var(--u)) calc(9 * var(--u)) calc(-3 * var(--u)) rgba(40,25,10,.4);
  transition: transform .2s, opacity .3s; -webkit-tap-highlight-color: transparent;
}
.round svg { width: 54%; height: 54%; pointer-events: none; filter: url(#rough); }
.round:active { transform: translateY(calc(3 * var(--u))); }
.round:focus-visible, .tile:focus-visible { outline: calc(3 * var(--u)) solid var(--ink); outline-offset: calc(3 * var(--u)); }
.round.small { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
.round.go { width: calc(92 * var(--u)); height: calc(92 * var(--u)); box-shadow: 0 0 0 calc(6 * var(--u)) var(--green), 0 calc(6 * var(--u)) 0 calc(6 * var(--u)) rgba(60,85,50,.35), 0 calc(12 * var(--u)) calc(16 * var(--u)) calc(-2 * var(--u)) rgba(40,25,10,.4); }
.round.go svg { width: 60%; height: 60%; }
.round.nudge { animation: nudge 1.6s ease-in-out 2; }
@keyframes nudge { 30% { transform: rotate(-14deg) scale(1.08); } 60% { transform: rotate(6deg); } }
.round.close { position: absolute; top: calc(14 * var(--u)); right: calc(14 * var(--u)); font: 400 calc(30 * var(--u))/1 var(--font-display); }

/* ---------- the map ---------- */
#mapScreen { background:
  radial-gradient(ellipse at 15% -10%, rgba(255,255,255,.65), transparent 50%),
  linear-gradient(#e3ece6, #f2ecdc 46%, #ece2cc); }
.map-head { position: absolute; left: calc(32 * var(--u)); right: calc(28 * var(--u)); top: calc(22 * var(--u)); height: calc(120 * var(--u)); display: flex; align-items: center; gap: calc(20 * var(--u)); }
.title h1 { margin: 0; font: 400 calc(40 * var(--u))/1.05 var(--font-display); }
.title p { margin: calc(6 * var(--u)) 0 0; font-size: calc(16 * var(--u)); color: #66604f; }
.my-train { width: calc(380 * var(--u)); height: calc(100 * var(--u)); margin-left: auto; }
.head-buttons { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.hold-ring { position: absolute; inset: calc(-5 * var(--u)); border-radius: 50%; border: calc(4 * var(--u)) solid var(--green); clip-path: inset(0 100% 0 0); }
.hold.holding .hold-ring { animation: hold 1.2s linear forwards; }
@keyframes hold { to { clip-path: inset(0 0 0 0); } }
.lines { position: absolute; left: calc(28 * var(--u)); right: calc(28 * var(--u)); top: calc(160 * var(--u)); bottom: calc(22 * var(--u)); display: grid; grid-template-rows: repeat(4, 1fr); gap: calc(8 * var(--u)); }
.line-row { position: relative; display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; align-items: center; gap: calc(14 * var(--u)); }
.line-board { display: grid; justify-items: center; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255,250,238,.55); box-shadow: inset 0 0 0 1px rgba(60,50,40,.1); }
.line-board .tickets { display: flex; gap: calc(6 * var(--u)); }
.line-board .tickets .tile { --t: calc(46 * var(--u)); cursor: default; }
.line-board { min-width: 0; }
.line-board span { font-size: calc(13 * var(--u)); line-height: 1.2; color: #66604f; text-align: center; overflow-wrap: anywhere; }
.line-stops { position: relative; display: flex; justify-content: space-around; align-items: center; height: 100%; }
.line-stops::before { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: calc(14 * var(--u)); border-radius: calc(3 * var(--u)); background: #e6c99a repeating-linear-gradient(90deg, transparent 0 calc(108 * var(--u)), rgba(59,51,45,.55) calc(108 * var(--u)) calc(110 * var(--u))); box-shadow: inset 0 0 0 1px rgba(59,51,45,.5), 0 calc(4 * var(--u)) 0 rgba(75,69,102,.15); }
.stop { all: unset; box-sizing: border-box; position: relative; z-index: 1; cursor: pointer; display: grid; justify-items: center; gap: calc(4 * var(--u)); width: calc(150 * var(--u)); }
.stop .sign { position: relative; display: grid; place-items: center; width: calc(92 * var(--u)); height: calc(66 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--sign); color: #f7f2e6; box-shadow: 0 calc(4 * var(--u)) 0 rgba(40,60,40,.35), inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.2); }
.stop .sign svg { width: calc(52 * var(--u)); height: calc(52 * var(--u)); filter: url(#rough); }
.stop .name { font-size: calc(13 * var(--u)); color: #5c5647; background: rgba(247,240,222,.85); padding: calc(1 * var(--u)) calc(7 * var(--u)); border-radius: 99px; }
.stop .stamp { position: absolute; top: calc(-10 * var(--u)); right: calc(18 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); color: #e8b947; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.stop.locked { cursor: default; }
.stop.locked .sign { background: #b9b4a6; color: #8c877a; box-shadow: 0 calc(4 * var(--u)) 0 rgba(40,40,40,.15); }
.stop.next .sign { animation: beckon 2.4s ease-in-out infinite; }
@keyframes beckon { 50% { transform: translateY(calc(-5 * var(--u))); box-shadow: 0 calc(9 * var(--u)) 0 rgba(40,60,40,.25), 0 0 0 calc(5 * var(--u)) var(--glow); } }
.stop:focus-visible .sign { outline: calc(3 * var(--u)) solid var(--ink); outline-offset: calc(3 * var(--u)); }

/* ---------- a level ---------- */
.stage { position: absolute; left: 0; top: 0; width: calc(1024 * var(--u)); height: calc(563.2 * var(--u)); overflow: hidden; background: var(--sky); }
#scene { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.diagram-host { position: absolute; top: calc(10 * var(--u)); left: 50%; transform: translateX(-50%); height: calc(76 * var(--u)); max-width: calc(760 * var(--u)); }
.diagram { display: block; height: 100%; width: auto; max-width: calc(760 * var(--u)); cursor: pointer; filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(30,30,20,.28)); }
.d-board { fill: #34433a; stroke: #6f5a46; stroke-width: 3; }
.d-inner { fill: #2c3a31; stroke: rgba(247,240,222,.25); stroke-width: .8; }
.d-screw { fill: #c9b27a; }
.d-view { fill: rgba(247,240,222,.08); stroke: rgba(247,240,222,.35); stroke-width: .8; stroke-dasharray: 3 2; }
.d-line { fill: none; stroke: #f1e9d4; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.d-leg.d-set { stroke: #ffcf5c; }
.d-leg.d-unset { opacity: .3; }
.d-tick { stroke: rgba(241,233,212,.65); stroke-width: 1.2; }
.d-buffer { stroke: #e3755f; stroke-width: 2.6; stroke-linecap: round; }
.d-shed { fill: #a35f4e; }
.d-cross { stroke: #f1e9d4; stroke-width: 1.6; stroke-linecap: round; }
.d-tunnel { fill: rgba(20,24,20,.55); stroke: rgba(241,233,212,.6); stroke-width: 1; }
.d-sign { fill: var(--sign); stroke: rgba(241,233,212,.7); stroke-width: .7; }
.d-sign-ico { color: #f7f2e6; }
.d-person { fill: #ffb36b; transition: opacity .4s; }
.d-engine { fill: #ffd76a; stroke: #fff6cf; stroke-width: 1.2; filter: drop-shadow(0 0 3px #ffd76a); }
.corner { position: absolute; }
.corner.tl { left: calc(14 * var(--u)); top: calc(14 * var(--u)); }
.corner.bl { left: calc(20 * var(--u)); bottom: calc(20 * var(--u)); }
.corner.br { right: calc(24 * var(--u)); bottom: calc(22 * var(--u)); }
.running .go { opacity: .45; pointer-events: none; }
.toast { position: absolute; right: calc(18 * var(--u)); top: calc(14 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: 99px; background: rgba(250,245,232,.95); font-size: calc(15 * var(--u)); box-shadow: 0 calc(3 * var(--u)) 0 rgba(90,70,40,.18); opacity: 0; transform: translateY(calc(-6 * var(--u))); transition: opacity .4s, transform .4s; pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.loading { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: calc(16 * var(--u)); background: var(--sky); font: 400 calc(20 * var(--u))/1.2 var(--font-display); transition: opacity .5s; }
.loading.done { opacity: 0; pointer-events: none; }
.loading .puffs { display: flex; gap: calc(10 * var(--u)); }
.loading .puffs i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: #fbf8f0; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(59,51,45,.35); animation: rise 1.4s ease-in-out infinite; }
.loading .puffs i:nth-child(2) { animation-delay: .2s; } .loading .puffs i:nth-child(3) { animation-delay: .4s; }
@keyframes rise { 50% { transform: translateY(calc(-12 * var(--u))) scale(1.15); } }

/* ---------- the ticket rack ---------- */
.panel { position: absolute; left: 0; right: 0; top: calc(563.2 * var(--u)); bottom: 0; display: grid; align-content: center; justify-items: center; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)); background-color: var(--paper);
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.5), transparent 55%), repeating-linear-gradient(0deg, rgba(90,70,40,.025) 0 1px, transparent 1px 3px); }
.deckle { position: absolute; left: 0; right: 0; top: calc(-11 * var(--u)); width: 100%; height: calc(12 * var(--u)); fill: var(--paper); pointer-events: none; }
.rack-row { display: grid; grid-template-columns: calc(56 * var(--u)) auto calc(56 * var(--u)); align-items: center; gap: calc(10 * var(--u)); }
.rack { position: relative; display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(9 * var(--u)) calc(11 * var(--u)); border-radius: calc(10 * var(--u)); background-color: var(--rack);
  background-image: repeating-linear-gradient(93deg, rgba(255,255,255,.07) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(12 * var(--u))), repeating-linear-gradient(88deg, rgba(0,0,0,.08) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(25 * var(--u)));
  box-shadow: inset 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(30,15,5,.5), 0 calc(2 * var(--u)) 0 rgba(255,255,255,.55); }
.rack.removing { box-shadow: inset 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(30,15,5,.5), 0 0 0 calc(3 * var(--u)) rgba(201,98,79,.5); }
.rack.rattle { animation: rattle .45s; }
.slot { width: var(--t); height: var(--t); border-radius: calc(5 * var(--u)); background: var(--rack-dk); box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.35); }
.drop-bar { position: absolute; width: calc(6 * var(--u)); margin-left: calc(-3 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--glow); box-shadow: 0 0 calc(10 * var(--u)) var(--glow); pointer-events: none; z-index: 2; }
.palette { display: flex; justify-content: center; align-items: center; gap: calc(9 * var(--u)); min-height: var(--t); }
.palette .gap { width: calc(14 * var(--u)); }
.tile {
  all: unset; box-sizing: border-box; touch-action: none; cursor: pointer; display: grid; place-items: center; position: relative; color: var(--ink);
  width: var(--t); height: var(--t); border-radius: calc(5 * var(--u)); background-color: var(--c, var(--tk-go));
  background-image: radial-gradient(circle at 28% 18%, rgba(255,255,255,.4), transparent 58%), repeating-linear-gradient(0deg, rgba(60,40,20,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(60,40,20,.02) 0 1px, transparent 1px 4px);
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(70,50,30,.3), 0 calc(6 * var(--u)) calc(8 * var(--u)) calc(-3 * var(--u)) rgba(40,25,10,.5);
  transition: transform .25s cubic-bezier(.2,.8,.3,1.3), box-shadow .25s, filter .3s; -webkit-tap-highlight-color: transparent;
}
.tile::before { content: ""; position: absolute; inset: calc(4 * var(--u)); border: calc(1.2 * var(--u)) solid rgba(59,51,45,.45); border-radius: calc(2.5 * var(--u)); pointer-events: none; }
.tile svg { width: 62%; height: 62%; margin-top: calc(-6 * var(--u)); pointer-events: none; filter: url(#rough); }
.tile .sn { position: absolute; left: 0; right: 0; bottom: calc(6 * var(--u)); text-align: center; font: 700 calc(7.5 * var(--u))/1 var(--font-body); letter-spacing: .12em; color: rgba(59,51,45,.5); }
.tile.tk-go { --c: var(--tk-go); } .tile.tk-stop { --c: var(--tk-stop); } .tile.tk-act { --c: var(--tk-act); } .tile.tk-pts { --c: var(--tk-pts); }
.tile.tk-loop { --c: var(--tk-loop); color: #f7efdc; } .tile.tk-loop::before { border-color: rgba(255,240,215,.45); }
.tile:active { transform: translateY(calc(2 * var(--u))); }
.tile.active { transform: translateY(calc(-11 * var(--u))) rotate(-2deg) scale(1.07); box-shadow: 0 0 0 calc(5 * var(--u)) var(--glow), 0 calc(11 * var(--u)) calc(15 * var(--u)) calc(-2 * var(--u)) rgba(40,25,10,.55); }
.tile.done { filter: saturate(.7); }
.tile.done::after { content: ""; position: absolute; top: calc(8 * var(--u)); right: calc(8 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: var(--rack-dk); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); animation: punch .18s ease-out; }
@keyframes punch { from { transform: scale(1.6); opacity: 0; } }
.tile.pop, .wallet.pop { animation: pop .3s cubic-bezier(.2,.8,.3,1.4); }
@keyframes pop { from { transform: translateY(calc(-15 * var(--u))) rotate(4deg); opacity: 0; } }
.tile.lifted, .wallet.lifted { opacity: .35; }
.tile.rattle { animation: rattle .45s; }
@keyframes rattle { 25% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
.tile.parcel { --c: var(--tk-brown); background-image: linear-gradient(90deg, transparent 46%, #9c7447 46% 54%, transparent 54%), linear-gradient(transparent 46%, #9c7447 46% 54%, transparent 54%), repeating-linear-gradient(35deg, rgba(120,85,45,.08) 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(9 * var(--u))); animation: shiver 3.2s ease-in-out infinite; }
.tile.parcel::before { display: none; }
.tile.parcel svg { opacity: .18; margin-top: 0; }
.tile.parcel .bow { position: absolute; top: calc(-9 * var(--u)); left: 50%; width: calc(28 * var(--u)); height: calc(15 * var(--u)); transform: translateX(-50%);
  background: radial-gradient(circle at 25% 60%, transparent calc(4 * var(--u)), #9c7447 calc(4 * var(--u)) calc(7 * var(--u)), transparent calc(7 * var(--u))), radial-gradient(circle at 75% 60%, transparent calc(4 * var(--u)), #9c7447 calc(4 * var(--u)) calc(7 * var(--u)), transparent calc(7 * var(--u))); }
.tile.parcel.opening { animation: open .4s ease-in forwards; }
@keyframes shiver { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-5deg); } 90% { transform: rotate(4deg); } 94% { transform: rotate(-2deg); } }
@keyframes open { to { transform: scale(1.3) rotate(8deg); opacity: 0; } }
.ghost { position: fixed !important; left: 0; top: 0; z-index: 50; pointer-events: none; transition: none; margin: 0 !important; box-shadow: 0 calc(16 * var(--u)) calc(22 * var(--u)) calc(-4 * var(--u)) rgba(30,20,10,.55); }
.ghost.away { transition: transform .3s ease-in, opacity .3s ease-in; opacity: 0; }

.wallet { display: flex; align-items: center; gap: calc(7 * var(--u)); margin: calc(-3.5 * var(--u)); padding: calc(3.5 * var(--u)); border-radius: calc(8 * var(--u)); background-color: #a5704b;
  background-image: repeating-linear-gradient(35deg, rgba(255,235,205,.06) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(7 * var(--u)));
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255,238,210,.22), 0 calc(3 * var(--u)) 0 rgba(30,15,5,.45); transition: box-shadow .25s; }
.wallet-in { display: flex; gap: calc(7 * var(--u)); }
.wallet-in .slot { background: rgba(50,25,10,.45); }
.slot.empty-in { background: transparent; box-shadow: inset 0 0 0 calc(1.6 * var(--u)) rgba(255,238,210,.4); }
.slot.empty-in.target { background: rgba(255,241,176,.35); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--glow); }
.wallet-tab { all: unset; box-sizing: border-box; cursor: pointer; touch-action: none; width: var(--t); height: var(--t); display: grid; place-items: center; align-content: center; gap: calc(2 * var(--u)); color: #f7efdc; }
.wallet-tab svg { width: 44%; height: auto; filter: url(#rough); pointer-events: none; }
.wallet-tab .num { font: 400 calc(20 * var(--u))/1 var(--font-display); pointer-events: none; }
.pips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(2.5 * var(--u)); max-width: 82%; pointer-events: none; }
.pips i { display: block; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.2 * var(--u)) #f7efdc; }
.pips i.on { background: var(--glow); box-shadow: none; }
.wallet-tab:focus-visible { outline: calc(3 * var(--u)) solid var(--glow); outline-offset: calc(-3 * var(--u)); border-radius: calc(6 * var(--u)); }
.wallet.active, .wallet.target { box-shadow: 0 0 0 calc(4 * var(--u)) var(--glow), 0 calc(3 * var(--u)) 0 rgba(30,15,5,.45); }

/* ---------- overlays ---------- */
.overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(40,40,30,.32); }
.card { position: relative; display: grid; justify-items: center; gap: calc(12 * var(--u)); padding: calc(26 * var(--u)) calc(34 * var(--u)) calc(28 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--paper-hi); box-shadow: 0 calc(5 * var(--u)) 0 rgba(110,85,50,.2), 0 calc(18 * var(--u)) calc(36 * var(--u)) calc(-10 * var(--u)) rgba(40,25,10,.5); }
.card h2 { margin: 0; font: 400 calc(30 * var(--u))/1.1 var(--font-display); }
.win .card { animation: rise-in .5s cubic-bezier(.2,.8,.3,1.2); }
@keyframes rise-in { from { transform: translateY(calc(30 * var(--u))) scale(.94); opacity: 0; } }
.win-star { width: calc(84 * var(--u)); height: calc(84 * var(--u)); color: #e8b947; filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(120,80,20,.3)); }
.prize { display: grid; justify-items: center; gap: calc(4 * var(--u)); }
.prize canvas { width: calc(340 * var(--u)); height: calc(180 * var(--u)); }
.prize p { margin: 0; font: 400 calc(20 * var(--u))/1.2 var(--font-display); }
.win-buttons { display: flex; align-items: center; gap: calc(26 * var(--u)); margin-top: calc(6 * var(--u)); }
.book { width: calc(720 * var(--u)); }
.book-count { margin: 0; font-size: calc(16 * var(--u)); color: #66604f; }
.book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(14 * var(--u)); width: 100%; }
.spot-card { display: grid; justify-items: center; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: #efe7d3; box-shadow: inset 0 0 0 1px rgba(60,50,40,.12); }
.spot-card canvas { width: calc(300 * var(--u)); height: calc(90 * var(--u)); }
.spot-card span { font-size: calc(15 * var(--u)); color: #5c5647; }
.parent { width: calc(640 * var(--u)); justify-items: stretch; text-align: left; -webkit-user-select: text; user-select: text; }
.parent h2 { text-align: center; }
.ctl { display: grid; gap: calc(6 * var(--u)); }
.ctl > span { font-size: calc(12 * var(--u)); letter-spacing: .07em; text-transform: uppercase; color: #6d6656; }
.seg { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.seg button { font-size: calc(16 * var(--u)); color: var(--ink); background: #f0e8d4; border: 1px solid #d6cbb2; padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); }
.seg button.confirm { background: #c9624f; color: #fff; border-color: #c9624f; }
.seg .swatch { width: calc(34 * var(--u)); height: calc(34 * var(--u)); padding: 0; border: calc(2 * var(--u)) solid #f7f0de; box-shadow: 0 0 0 1px #d6cbb2; }
.seg .swatch[aria-pressed="true"] { background-color: inherit; box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink); }
.note { margin: calc(4 * var(--u)) 0 0; font-size: calc(14 * var(--u)); line-height: 1.45; color: #6d6656; }

.turn { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; align-content: center; gap: 16px; background: var(--paper); color: var(--ink); font: 400 22px/1.3 var(--font-display); text-align: center; }
.turn svg { width: 120px; height: 120px; animation: turn 2.4s ease-in-out infinite; }
@keyframes turn { 40%, 70% { transform: rotate(-90deg); } }
@media (orientation: portrait) { .turn { display: grid; } }
@media (prefers-reduced-motion: reduce) {
  .stop.next .sign, .tile.parcel, .round.nudge, .loading .puffs i, .turn svg { animation: none; }
}