/* Haul: the games' blue visual system; the valley in soft land colours, each seat in its own colour. */
:root{
  --bg:#f5f8fc;--ink:#243247;--muted:#7286a0;--soft:#6e83a0;--line:#dce5f0;--card:#fff;--field:#fff;--field-line:#c5d6ee;
  --accent:#2563eb;--accent-soft:#e9f1fc;--warn:#a44237;--good:#16a34a;--hot:#ea580c;
  --land:#eef1e1;--land-line:#dfe3cc;--river:#a9cbe8;--river-hi:#cfe3f4;--pine:#6f9a5b;--field-c:#e8d690;--hill:#b9d3a0;--works:#a3acb9;--well:#8f8273;
  --road:#cdbf9f;--lane:#fbf8ef;--badge:#fffdf7;--badge-line:#b7a983;--town:#fff;--town-name:#2f3b4c;--halo:#fff;
  --grain:#d4a017;--timber:#3f7d2a;--machinery:#64748b;--fuel:#dc2626;--livestock:#9a3412;
}
:root[data-theme=dark]{
  --bg:#0f151c;--ink:#dfe4ec;--muted:#7b8a9e;--soft:#7c8ca1;--line:#232e3c;--card:#151d27;--field:#0f151c;--field-line:#2b3644;
  --accent:#5d8bf0;--accent-soft:#101a28;--warn:#e08a80;--good:#22c55e;--hot:#fb923c;
  --land:#1a231d;--land-line:#243026;--river:#1f3b57;--river-hi:#2a4d70;--pine:#3e6a36;--field-c:#5a5128;--hill:#2f4a2e;--works:#4b5563;--well:#6b5f52;
  --road:#4a4436;--lane:#6d6450;--badge:#232a22;--badge-line:#6d6450;--town:#1c2633;--town-name:#dfe4ec;--halo:#1a231d;
  --grain:#eab308;--timber:#65a30d;--machinery:#94a3b8;--fuel:#f87171;--livestock:#f59e0b;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:'Manrope',Arial,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
main{max-width:1136px;margin:auto;padding:0 48px}
header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.brand{font-size:25px;font-weight:800;letter-spacing:-1.2px}
.brand a{color:inherit;text-decoration:none}
.brand span{font-size:17px;color:var(--muted);font-weight:500;letter-spacing:0}
.top-actions{display:flex;align-items:center;gap:14px}
.edition,.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px}
.edition{color:var(--muted)}
.intro{margin:44px 0 30px}
.eyebrow{color:#647b98;display:flex;align-items:center;gap:8px}
:root[data-theme=dark] .eyebrow{color:#8796a9}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
h1{font-size:70px;line-height:1;margin:15px 0;letter-spacing:-4px}
h1 span{color:var(--accent)}
.intro p{font-size:15px;color:var(--muted);margin:0;line-height:1.7}
.mobile{display:none}
.layout{display:grid;grid-template-columns:minmax(300px,600px) minmax(240px,1fr);gap:64px}
.layout>*{min-width:0}
/* In a game the play area takes the whole width; the server notes move below it. */
.in-game main{max-width:1440px}
.in-game .layout{grid-template-columns:1fr;gap:40px}
.in-game aside{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid var(--line);padding-top:30px}
.in-game .intro{margin:20px 0 16px}
.in-game h1{font-size:40px;letter-spacing:-2.5px;margin:8px 0}
.in-game .intro p{display:none}

/* Cards before the game: lobby, invitation, closed. */
.play>.card{max-width:540px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
.card h2{font-size:24px;letter-spacing:-.8px;line-height:1.25;margin:10px 0 8px}
.card p{font-size:13px;color:var(--soft);line-height:1.7;margin:0 0 6px}
.card p.center{text-align:center;font-weight:700;margin:0}
.card hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.card label{display:block;font-size:11px;font-weight:700;margin:14px 0 8px}
.card input{width:100%;border:1px solid var(--field-line);border-radius:7px;padding:12px 13px;background:var(--field);color:var(--ink)}
.small{font-size:12px}
.card .small{margin-top:10px}
.card a:not(.primary){color:var(--accent)}
.warn{color:var(--warn)!important}
.primary{display:block;border:0;background:#2563eb;color:#fff;padding:14px 18px;width:100%;border-radius:8px;margin-top:16px;font-size:14px;font-weight:800;text-align:center;text-decoration:none}
.primary:hover:not(:disabled){background:#1d4fd8}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#e9eef5}
.seg button{border:0;background:none;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--muted)}
.seg button[aria-checked=true]{background:#fff;color:#243247;box-shadow:0 1px 3px rgba(20,30,50,.12)}
:root[data-theme=dark] .seg{background:#0f151c}
:root[data-theme=dark] .seg button[aria-checked=true]{background:#2a3442;color:#dfe4ec;box-shadow:none}
.link-btn{border:0;background:none;color:var(--accent);font-size:12px;font-weight:700;padding:4px 0}
.label{display:block;font-size:11px;font-weight:700;margin:16px 0 8px}

/* The game: the valley on the left, the panels beside it (below it on a phone). */
.game{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,1fr);grid-template-areas:'bar bar' 'map side';gap:16px 28px;align-items:start}
.turnbar{grid-area:bar;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 18px;min-height:58px}
.who{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.4px}
.who .sw{width:14px;height:14px;border-radius:50%;flex:none}
.who.mine{color:var(--accent)}
.who.mine .sw{animation:beat 1.2s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.5)}}
.clock{font-size:14px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.clock.low{color:var(--hot)}
.me-stats{margin-left:auto;display:flex;gap:14px;font-size:13px;font-weight:700;color:var(--soft)}
.me-stats b{color:var(--ink)}
.map-col{grid-area:map;min-width:0;position:sticky;top:10px}
.map-box{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--land)}
.map{display:block;width:100%;aspect-ratio:1000/740;touch-action:none;user-select:none;-webkit-user-select:none}
.map-under{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:8px}
.zoom{display:flex;gap:6px;flex:none}
.zoom button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;font-weight:700;line-height:1;box-shadow:0 2px 6px rgba(20,30,50,.12)}
.map-info{min-height:22px;margin:8px 2px 0;font-size:14px;font-weight:600;color:var(--soft)}
.map-info b{color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;font-weight:700;color:var(--soft);margin:6px 2px 0}
.side{grid-area:side;display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.panel h3{margin:8px 0 10px;font-size:18px;letter-spacing:-.4px}
.panel p{font-size:13px;line-height:1.6;color:var(--soft);margin:6px 0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.panel-head .small{color:var(--muted);font-weight:700}

/* The valley. */
.map .land{fill:var(--land)}
.map .zone{opacity:.13}
.map .z-grain{fill:var(--grain)}.map .z-timber{fill:var(--timber)}.map .z-machinery{fill:var(--machinery)}.map .z-fuel{fill:var(--fuel)}.map .z-livestock{fill:var(--livestock)}
.map .river{fill:none;stroke:var(--river);stroke-width:18;stroke-linecap:round}
.map .river-hi{fill:none;stroke:var(--river-hi);stroke-width:6;stroke-linecap:round;stroke-dasharray:30 40}
.map .pine{fill:var(--pine)}
.map .field rect{fill:var(--field-c)}
.map .field path{stroke:var(--land);stroke-width:1.5;opacity:.6}
.map .hill{fill:var(--hill)}
.map .works{fill:var(--works)}
.map .well{fill:none;stroke:var(--well);stroke-width:2.5;stroke-linecap:round}
.map .road .hit{stroke:transparent;stroke-width:34;cursor:pointer}
.map .road .band{stroke:var(--road);stroke-width:11;stroke-linecap:round;transition:stroke .3s}
.map .road .lane{stroke:var(--lane);stroke-width:2;stroke-dasharray:8 9;stroke-linecap:round}
.map .road.can .band{stroke:var(--good);stroke-width:10;opacity:.7}
.map .road.built .band{stroke:var(--own);stroke-width:14;opacity:1}
.map .road.built .lane{stroke:#fff;opacity:.7;stroke-dasharray:3 10}
.map .road.lit .band{stroke-width:20;animation:lit 1.4s ease-in-out 3}
@keyframes lit{50%{stroke-width:26}}
.map .road.pick .band{stroke:var(--hot);stroke-width:16;opacity:1}
.map .road.pick.built .band{stroke:var(--own)}
.map .badge{cursor:pointer}
.map .badge rect{fill:var(--badge);stroke:var(--badge-line);stroke-width:1.5}
.map .badge .len{font-size:15px;font-weight:800;fill:var(--ink);text-anchor:middle;font-family:'Manrope',Arial,sans-serif}
.map .badge .ico{font-size:13px;text-anchor:middle}
.map .badge.built rect{stroke:var(--own);stroke-width:3}
.map .badge.can rect{stroke:var(--good);stroke-width:3}
.map .badge.pick rect{stroke:var(--hot);stroke-width:3.5}
.map .town{cursor:pointer}
.map .town .halo{fill:var(--halo);opacity:.55}
.map .town .spot{fill:var(--town);stroke-width:4}
.map .c-grain .spot{stroke:var(--grain)}.map .c-timber .spot{stroke:var(--timber)}.map .c-machinery .spot{stroke:var(--machinery)}.map .c-fuel .spot{stroke:var(--fuel)}.map .c-livestock .spot{stroke:var(--livestock)}
.map .xroads .spot{fill:var(--ink);stroke:var(--town);stroke-width:3}
.map .town .ico{font-size:19px;text-anchor:middle}
.map .town .name{font-size:16px;font-weight:800;fill:var(--town-name);paint-order:stroke;stroke:var(--halo);stroke-width:4.5px;stroke-linejoin:round;font-family:'Manrope',Arial,sans-serif;letter-spacing:-.2px}
.map .town .depot{display:none}
.map .town.has-depot .depot{display:inline}
.map .depot path{fill:var(--own);stroke:var(--town);stroke-width:2}
.map .depot text{font-size:10px;font-weight:800;fill:#fff;text-anchor:middle;font-family:'Manrope',Arial,sans-serif}
.map .town.mark .halo{fill:none;stroke:var(--accent);stroke-width:4;stroke-dasharray:6 5;opacity:1}
.map .town.pick .halo{fill:none;stroke:var(--hot);stroke-width:5;opacity:1}

/* Cards: a cargo, its icon and its colour. */
.cardrow{display:flex;flex-wrap:wrap;gap:8px}
.cargo{--c:var(--muted);position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;height:84px;border-radius:10px;border:2px solid var(--line);border-top:8px solid var(--c);background:var(--card);color:var(--ink);padding:4px 2px;font-size:9px;font-weight:800;letter-spacing:0;text-transform:uppercase}
.cargo .i{font-size:26px;line-height:1}
.cargo.empty{border-style:dashed;border-top-width:2px;color:var(--muted);opacity:.6}
.cargo.grain{--c:var(--grain)}.cargo.timber{--c:var(--timber)}.cargo.machinery{--c:var(--machinery)}.cargo.fuel{--c:var(--fuel)}.cargo.livestock{--c:var(--livestock)}
button.cargo:hover:not(:disabled){border-color:var(--c)}
button.cargo[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent);transform:translateY(-3px)}
button.cargo.drop[aria-pressed=true]{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn);opacity:.6;transform:none}
.cargo .n{position:absolute;top:-10px;right:-8px;min-width:22px;height:22px;border-radius:11px;background:var(--ink);color:var(--card);font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.cargo.flatbed{--c:var(--accent);border-style:solid}
.pile{display:flex;gap:16px;margin-top:12px;font-size:13px;font-weight:700;color:var(--soft)}
.pile b{color:var(--ink)}

/* What a player can do. */
.act{border:2px solid var(--line)}
.act.turn{border-color:var(--accent);box-shadow:0 6px 22px rgba(37,99,235,.14)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border-radius:12px;background:#e9eef5;margin-bottom:12px}
:root[data-theme=dark] .tabs{background:#0f151c}
.tabs button{flex:1;border:0;background:none;border-radius:9px;padding:9px 6px;font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(20,30,50,.12)}
.go{display:block;width:100%;border:0;border-radius:10px;background:#2563eb;color:#fff;padding:14px;font-size:16px;font-weight:800;margin-top:12px}
.go:hover:not(:disabled){background:#1d4fd8}
.go.alt{background:var(--accent-soft);color:var(--accent);border:1px solid var(--line)}
.or{display:flex;align-items:center;gap:10px;margin:14px 0 2px;font-size:11px;font-weight:800;color:var(--muted);letter-spacing:1px}
.or::before,.or::after{content:'';flex:1;border-top:1px solid var(--line)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.list button,.list .row{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700}
.list button:hover:not(:disabled){border-color:var(--accent)}
.list button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.list .pts{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.list .sub{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.list .tick{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--field-line);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
.list [aria-pressed=true] .tick,.list .tick.done{background:var(--good);border-color:var(--good)}
.list .tick.fail{background:var(--warn);border-color:var(--warn)}
.pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pay button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:800}
.pay button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.why{font-size:13px;font-weight:600;color:var(--warn);margin:8px 0 0}
.wait{font-size:15px;font-weight:700;margin:0}
.sent{font-size:13px;font-weight:700;color:var(--muted);margin:10px 0 0}

/* Players. */
.scores{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.scores th{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--muted);text-align:right;padding:0 6px 6px}
.scores th:first-child{text-align:left}
.scores td{padding:8px 6px;border-top:1px solid var(--line);text-align:right;font-weight:700}
.scores td:first-child{text-align:left}
.scores tr.now td{background:var(--accent-soft)}
.scores tr.now td:first-child{box-shadow:inset 4px 0 0 var(--accent)}
.pl{display:flex;align-items:center;gap:8px;min-width:0}
.pl .sw{width:12px;height:12px;border-radius:50%;flex:none}
.pl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--field-line);flex:none}
.dot.on{background:#22c55e}
.tag{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.people li{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px;font-weight:700;flex-wrap:wrap}
.people li.none{color:var(--muted);font-weight:600;font-size:13px}
.people select{margin-left:auto;border:1px solid var(--field-line);border-radius:7px;padding:5px 6px;background:var(--field);color:var(--ink);font-size:12px;max-width:100%}
.kick{margin-left:auto;border:0;background:none;color:#9fb0c6;font-size:14px;padding:6px 8px;border-radius:6px}
.kick:hover{color:var(--warn)}
.log{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.log li{display:flex;gap:8px;align-items:baseline;color:var(--soft)}
.log li b{color:var(--ink)}
.log .sw{width:9px;height:9px;border-radius:50%;flex:none;transform:translateY(1px)}

/* The table's start, and the end of a game. */
.big-invite{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center}
.big-invite .qr{width:200px;height:200px}
.start-row{margin-top:14px}
.timer-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;font-size:13px;font-weight:700}
.final{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;margin-top:6px}
.final th,.final td{padding:7px 6px;text-align:right;border-top:1px solid var(--line)}
.final th:first-child,.final td:first-child{text-align:left;font-weight:700;color:var(--soft)}
.final thead th{border-top:0;vertical-align:bottom}
.final tr.total td{font-size:16px;font-weight:800;color:var(--ink)}
.end-contracts{display:grid;gap:10px;margin-top:14px;font-size:12px}
.end-contracts .who-c{font-weight:800;margin-bottom:2px;display:flex;gap:6px;align-items:center}
.end-contracts span.c{display:inline-block;margin:2px 8px 2px 0;color:var(--soft)}
.end-contracts span.c.ok{color:var(--good)}
.end-contracts span.c.no{color:var(--warn)}
.audit{margin-top:14px;font-size:13px;font-weight:700;padding:10px 12px;border-radius:10px;background:var(--accent-soft)}
.audit.bad{background:#fdecea;color:#a44237}
:root[data-theme=dark] .audit.bad{background:#2a1714;color:#e08a80}
.winner{font-size:22px;font-weight:800;letter-spacing:-.5px;margin:6px 0 4px}

.invite{display:flex;gap:18px;align-items:flex-start;margin-top:10px}
.invite p{font-size:13px;color:var(--soft);line-height:1.6;margin:0 0 10px}
.qr{flex:none;width:130px;height:130px;background:#fff;border-radius:8px;padding:4px}
.qr svg{display:block;width:100%;height:100%}
.invite-body{flex:1;min-width:0}
.link-row{display:flex;gap:6px;margin-bottom:10px}
.link-row input{flex:1;min-width:0;font-size:12px;padding:10px;border:1px solid var(--field-line);border-radius:7px;background:var(--field);color:var(--ink)}
.link-row button{flex:none;border:0;border-radius:7px;background:#2563eb;color:#fff;font-size:12px;font-weight:700;padding:0 14px}

.banner{position:fixed;left:50%;top:14px;transform:translate(-50%,-8px);max-width:min(92vw,520px);background:#243247;color:#fff;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:700;text-align:center;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:50}
.banner.show{opacity:1;transform:translate(-50%,0)}
.banner.win{background:#16a34a}
.banner.no{background:#b45309}
:root[data-theme=dark] .banner{background:#dfe4ec;color:#0f151c}

.under{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0 15px;font-size:11px;color:var(--soft)}
.under button{border:0;background:none;color:var(--accent);font-size:11px;padding:0;white-space:nowrap}
.folds{display:flex;gap:16px;margin-left:auto}
.instructions{font-size:13px;line-height:1.8;background:var(--accent-soft);padding:18px;border-radius:8px}
.instructions ul,.instructions ol{margin:0;padding-left:18px}
.instructions ol li+li{margin-top:6px}
.instructions+.instructions{margin-top:10px}
.instructions a{color:var(--accent)}

.how h2{font-size:24px;letter-spacing:-1px;margin:15px 0 12px}
.how ol{margin:0 0 12px;padding-left:20px;font-size:14px;line-height:1.7;color:#4a5f7d}
:root[data-theme=dark] .how ol{color:#a9b5c4}
.how p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 14px}
.downloads{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:8px}
.downloads a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:12px;font-weight:700;text-decoration:none}
.downloads a:hover{border-color:#6692f1}
.note{border-top:1px solid var(--line);padding:26px 0}
.in-game .note{border-top:0;padding-top:0}
.note>span{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#8199b5}
.note p{font-size:18px;line-height:1.5;letter-spacing:-.4px;color:#637f9e;margin:15px 0}
:root[data-theme=dark] .note p{color:#8295a9}
.cta-link{font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;line-height:1.6}
.cta-link:hover{text-decoration:underline}
.note p.also{font-size:14px;letter-spacing:0;margin:22px 0 8px}
.end-map{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.privacy{font-size:10px;color:#7f93ad;line-height:1.7;max-width:260px}
footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:22px 0;margin-top:40px;color:#7f93ad;font-size:10px}
footer a{color:inherit}

/* The table on a big screen: a bigger valley and bigger names. */
@media(min-width:1500px){.table-view .who{font-size:26px}}
@media(max-width:1000px){
  .game{grid-template-columns:1fr;grid-template-areas:'bar' 'map' 'side'}
  .map-col{position:static}
}
@media(max-width:720px){main{padding:0 16px;max-width:560px}
  .in-game main{max-width:560px}
  header{height:65px}
  .edition{font-size:8px;letter-spacing:1px}
  .intro{margin:28px 0 20px}
  h1,.in-game h1{font-size:40px;letter-spacing:-2.5px}
  .mobile{display:inline}
  .intro p{font-size:13px}
  .layout,.in-game .layout{grid-template-columns:1fr;gap:34px}
  .in-game aside{grid-template-columns:1fr}
  .in-game .intro{display:none}
  .play>.card{padding:20px}
  .card h2{font-size:20px}
  /* On a phone whose turn it is stays in sight while the rest scrolls under it. */
  .turnbar{position:sticky;top:0;z-index:5;border-radius:0 0 14px 14px;margin:0 -16px;padding:10px 16px;border-width:0 0 1px;box-shadow:0 4px 12px rgba(20,30,50,.08);min-height:0}
  .who{font-size:17px}
  .me-stats{gap:10px;font-size:12px}
  .map-box{margin:0 -16px;border-radius:0;border-width:1px 0}
  .game{gap:12px}
  .panel{padding:14px}
  .cargo{width:58px;height:78px}
  .big-invite{grid-template-columns:1fr;justify-items:center}
  .invite{flex-direction:column;align-items:center}
  .invite-body{width:100%}
  .note p{font-size:16px}
  .privacy{max-width:none}
  footer{margin-top:24px;font-size:9px}
}
@media(max-width:520px){.edition{display:none}}
/* Before a game the table shows the invitation first, and bigger. */
.table-view.lobby #invite-panel{order:-1}
.big-invite-panel .qr{width:190px;height:190px}
/* The market on the table's screen is read from across the room. */
.table-view #market-panel .cargo{width:88px;height:112px;font-size:11px}
.table-view #market-panel .cargo .i{font-size:38px}
#join-error:empty{display:none}