/* Freight. The table is a harbour chart seen from above: rival quays on the north shore, the water
   (crate yard, open sea, the Freeport) across the middle, your quay, books and orders on the south shore.
   Everything here is a CSS stand-in that an art slot can replace later (art.js, ART.md). */
*{box-sizing:border-box}
:root{--bg:#0c161b;--sea:#0f252d;--sea-2:#133039;--land:#1a2824;--land-2:#22322c;--wood:#17262b;--wood-2:#1d2f35;--line:#3a4d53;--line-soft:#ffffff14;--ink:#ebe7d8;--muted:#a8b9bc;--gold:#e6b772;--rust:#d98562;--cyan:#8bdbf0;--serif:Georgia,"Iowan Old Style","Times New Roman",serif;--mono:ui-monospace,"Cascadia Mono",Consolas,monospace;--seat:#e6b772}
body.fr-page{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,sans-serif;color-scheme:dark;background-image:radial-gradient(ellipse at 15% 0,#24383c80,transparent 55%)}
[hidden]{display:none!important}
a{color:var(--gold)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
button{font:600 13px/1.3 system-ui,sans-serif;cursor:pointer;padding:9px 13px;min-height:40px;background:#2a3f48;color:#f3f0e8;border:1px solid #6c8089;border-radius:6px;transition:background .15s}
button:hover:not(:disabled){background:#38535e}
button.primary{background:var(--gold);color:#17242a;border-color:var(--gold)}
button.primary:hover:not(:disabled){background:#f6c88f}
button.ghost,button.quiet{background:transparent;border-color:#4d6168}
button:disabled{opacity:.42;cursor:not-allowed}
button.fr-mini{min-height:30px;padding:4px 10px;font-size:12px}
button.fr-mini.wide{width:100%;margin-top:6px}
input,select{font:inherit;padding:8px 10px;background:#0e1c22;color:#f0eee5;border:1px solid #647982;border-radius:5px;min-height:40px}
.fr-eyebrow,.fr-fine,.fr-note,.fr-top-tag,.fr-connection{font:11.5px/1.55 var(--mono);color:var(--muted)}
.fr-eyebrow{letter-spacing:.12em;text-transform:lowercase}
.fr-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.fr-place{font:italic 600 17px/1.2 var(--serif);color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fr-place .fr-note{font-style:normal;font-weight:400}
.fr-empty{font:11.5px/1.4 var(--mono);color:#8fa3a7}
.fr-badge{display:inline-block;font:600 12px var(--mono);color:#17242a;background:var(--gold);border-radius:4px;padding:3px 8px}
.fr-chip{font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid #55696f;border-radius:99px;padding:3px 6px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.fr-chip.you{color:#17242a;background:var(--seat);border-color:var(--seat)}
.fr-chip.warn{color:#ffd9c7;border-color:var(--rust)}
.fr-error{margin:10px 3vw;padding:12px 14px;border:1px solid #dc947b;background:#492d28;color:#ffe4d6;border-radius:6px}
.fr-connection{margin:8px 3vw}.fr-connection:empty{display:none}

/* Entry page */
.fr-top{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 3vw;border-bottom:1px solid #ffffff13}
.fr-top a{color:var(--ink);text-decoration:none;font-weight:600}.fr-top a span{color:var(--muted);font-weight:400}
#entry{max-width:1180px;margin:auto;padding:28px 3vw 40px}
.fr-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:26px}
.fr-hero h1{font:900 clamp(52px,8vw,96px)/.95 system-ui,sans-serif;letter-spacing:-.06em;margin:10px 0 14px}
.fr-hero h1 span{color:var(--gold)}
.fr-hero-copy{font:italic 18px/1.5 var(--serif);color:#d7d6c8;max-width:34em}
.fr-hero-note{font:12px/1.6 var(--mono);color:var(--gold);margin:12px 0 14px}
.fr-hero-art:empty{display:none}.fr-hero-art img{width:100%;border-radius:12px;display:block}
.fr-hero:has(.fr-hero-art:empty){grid-template-columns:minmax(0,1fr)}
.fr-setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.fr-entry-card,.fr-lobby,#player-name{background:linear-gradient(140deg,#1f3138,#16262c);border:1px solid #415860;border-radius:10px;padding:18px}
.fr-entry-card h2,.fr-lobby h2{font:italic 600 21px/1.2 var(--serif);margin-bottom:6px}
.fr-entry-card>p{color:var(--muted);font-size:13.5px;margin-bottom:12px}
.fr-field{display:block;font-size:12px;color:#b9c7ca;margin-bottom:10px}
.fr-field input,.fr-field select{display:block;width:100%;margin-top:4px}
.fr-houses{display:grid;gap:8px}
.fr-house-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.fr-house-words{display:grid;gap:4px}.fr-house-words select{width:100%}
.fr-lobby{max-width:560px;margin:0 0 18px}.fr-lobby #roster{margin:8px 0 12px}
.fr-foot{font:11.5px/1.6 var(--mono);color:var(--muted);margin-top:28px;border-top:1px solid #ffffff12;padding-top:14px}
.at-table .fr-top,.at-table #entry,.at-table .fr-connection{display:none}
body.at-table{overflow:hidden}
.at-table .fr-error{position:fixed;z-index:30;top:52px;left:50%;transform:translateX(-50%);margin:0;max-width:min(560px,calc(100vw - 24px));box-shadow:0 10px 30px #0008}

/* The table */
.fr-match{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,400px);grid-template-rows:auto auto minmax(min-content,1fr) auto;overflow-x:hidden;overflow-y:auto;
 background:repeating-radial-gradient(ellipse at 74% 52%,transparent 0 46px,#ffffff07 46px 47px),linear-gradient(90deg,#ffffff05 1px,transparent 1px) 0 0/120px 120px,linear-gradient(#ffffff05 1px,transparent 1px) 0 0/120px 120px,linear-gradient(#0f2730,#0d2028)}
.has-table-art .fr-match{background:linear-gradient(#0b151a80,#0b151a80),var(--fr-table-art) center/cover}
.has-table-art .fr-north{background:#0d181d8c}.has-table-art .fr-match::before{background:#0d181d8c}
.has-table-art .fr-yard{background:#0c1b21f0}.has-table-art .fr-lot{background:#0e1c21d9}
.has-table-art .fr-freeport{background:#16241fd9;box-shadow:none}
.has-table-art .fr-sea .fr-place,.has-table-art .fr-chart-note,.has-table-art .fr-empty{text-shadow:0 1px 3px #000,0 0 8px #000}
.fr-skin{display:inline-flex;align-items:center;gap:6px;font:11.5px var(--mono);color:var(--muted)}
.fr-bar .fr-skin select{min-height:32px;padding:3px 6px;font-size:12.5px;max-width:132px}
.fr-entry-side{display:grid;gap:14px}
.fr-table{display:contents}
.fr-bar{grid-column:1/-1;grid-row:1;position:sticky;top:0;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 12px;background:#0a1318f5;border-bottom:1px solid var(--line)}
.fr-bar-title{display:flex;align-items:baseline;gap:12px;min-width:0;flex-wrap:wrap}
.fr-bar-home{font:900 19px/1 system-ui,sans-serif;letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.fr-bar-home::after{content:".";color:var(--gold)}
.fr-bar-turn,.fr-bar-net{font:11.5px var(--mono);color:var(--muted);white-space:nowrap}
.fr-bar-now{font:italic 600 16px/1.2 var(--serif)}
.my-move .fr-bar-now{color:var(--gold)}
.fr-bar-actions{display:flex;gap:6px;flex:none}
.fr-bar-actions button{min-height:32px;padding:4px 11px;font-size:12.5px}

/* Shores: land along the top and the bottom, with a pencilled coastline */
.fr-north{grid-column:1/-1;grid-row:2;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;padding:10px 12px 0;align-items:stretch;
 background:linear-gradient(var(--land-2),var(--land));border-bottom:2px dashed #b9b08a55}
.fr-match::before{content:"";grid-column:1/-1;grid-row:4;background:linear-gradient(var(--land),var(--land-2));border-top:2px dashed #b9b08a55}
.fr-south{grid-column:1;grid-row:4;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;padding:0 0 10px 12px;align-items:start;z-index:1}
.fr-orders{grid-column:2;grid-row:4;margin:10px 12px 10px 10px;z-index:1;align-self:start}

/* A quay */
.fr-quay{position:relative;min-width:0;background:repeating-linear-gradient(90deg,transparent 0 23px,#00000022 23px 24px),linear-gradient(var(--wood-2),var(--wood));border:1px solid var(--line);border-top:3px solid var(--seat);border-radius:8px 8px 0 0;padding:8px 10px 0;display:flex;flex-direction:column}
.fr-quay.is-turn{box-shadow:0 0 0 2px var(--gold),0 0 26px #e6b77233}
.fr-quay-head{display:flex;align-items:center;gap:9px;min-width:0;padding-bottom:6px}
.fr-quay-words{min-width:0;flex:1}
.fr-quay h3{font:600 15px/1.25 system-ui,sans-serif;overflow-wrap:anywhere}
.fr-quay-line{font:11.5px/1.35 var(--mono);color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.fr-quay-line.says{-webkit-line-clamp:2}
.fr-quay-line.says{color:#f1d9ae;font-style:italic}
.fr-flag{flex:none;font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#17242a;background:var(--gold);padding:5px 7px;border-radius:3px 3px 3px 0}
.fr-seal{flex:none;position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--seat);background:radial-gradient(circle at 35% 30%,#2c4047,#14232a);box-shadow:0 0 0 2px #0c161b,0 0 0 3px #ffffff1c;overflow:hidden}
.fr-seal b{font:italic 700 19px/1 var(--serif);color:var(--seat)}
.fr-seal.small{width:22px;height:22px;border-width:1.5px;box-shadow:none}.fr-seal.small b{font-size:12px}
.fr-seal-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.fr-seal.has-art b{display:none}
.fr-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:42px;padding:3px 0;border-top:1px dashed var(--line-soft)}
.fr-row-label{font:11px/1.3 var(--mono);color:var(--muted)}
/* Four or five companies: the quays are narrow, so a row's button sits under its label and the stock keeps the width */
.fr-north:is([data-count="3"],[data-count="4"]) .fr-row{grid-template-columns:96px minmax(0,1fr)}
.fr-north:is([data-count="3"],[data-count="4"]) .fr-row .fr-stock{grid-column:2;grid-row:1/3}
.fr-north:is([data-count="3"],[data-count="4"]) .fr-row button{grid-column:1;grid-row:2;justify-self:start;min-height:26px;padding:2px 9px}
.fr-row-label b{color:var(--ink)}
.fr-plots{display:flex;gap:3px;margin-top:3px}
.fr-plot{position:relative;display:grid;place-items:center;width:21px;height:16px;border:1px dashed #5e7278;border-radius:2px;font:700 8.5px/1 var(--mono);overflow:hidden}
.fr-plot.depot{width:15px}
.fr-plot.built{border:1px solid #0008;box-shadow:inset 0 1px #ffffff3d}
.fr-plot.depot.built{background:#8a6c48}
.fr-row-label{position:relative}.fr-row-art{width:22px;height:22px;margin:-6px 3px -6px 0;vertical-align:-5px;object-fit:contain;filter:drop-shadow(0 1px 1px #000a)}
.fr-stock{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:flex-start;min-width:0}
.fr-priced{display:inline-grid;justify-items:center;gap:1px}
.fr-tag{font:700 11.5px/1.1 var(--mono);color:var(--gold)}
.fr-berth{order:9;margin-top:auto!important;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:48px;margin:4px -10px 0;padding:5px 10px;background:linear-gradient(#0f252dcc,#0f252d);border-top:1px solid #6fa3b03d}
.fr-berth-label{font:italic 12px var(--serif);color:#8fb4bd}
.fr-berth:not(:has(.fr-ship)){min-height:32px}
/* Your own quay faces the water above it, so its berth is on top */
.fr-south .fr-quay{border-radius:0 0 8px 8px;border-top:1px solid var(--line);border-bottom:3px solid var(--seat);padding:0 10px 6px}
.fr-south .fr-berth{order:-1;margin:0 -10px 6px!important;border-top:0;border-bottom:1px solid #6fa3b03d;background:linear-gradient(#0f252d,#0f252dcc)}

/* Crates. Colour plus two stencilled letters, so no crate depends on colour alone. */
.fr-crate{position:relative;display:inline-grid;place-items:center;flex:none;width:27px;height:22px;border-radius:3px;border:1px solid #0009;box-shadow:inset 0 1px #ffffff40,inset 0 -2px #00000030;overflow:hidden;vertical-align:middle}
.fr-crate i{font:700 9.5px/1 var(--mono);font-style:normal;letter-spacing:.02em}
/* A picture is shown only once it has loaded (.has-art); until then the stand-in stays */
:not(.has-art)>img.fr-art{display:none}
.fr-crate-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fr-crate.has-art{background:none!important;border:0;box-shadow:none;border-radius:0;width:28px;height:28px;overflow:visible;filter:drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px #0009)}
.fr-crate.has-art i{position:absolute;right:-3px;bottom:-3px;padding:1px 2px;border-radius:2px;background:#0b1418f2;color:#ebe7d8;font-size:8px;line-height:1}
[data-c="0"]{background:#354149;color:#fff}[data-c="1"]{background:#f1eee0;color:#273337}[data-c="2"]{background:#946649;color:#fff}[data-c="3"]{background:#c9ab76;color:#252a29}[data-c="4"]{background:#df893f;color:#202727}

/* Freighters: drawn where they are */
.fr-ship{display:inline-grid;justify-items:start;gap:2px;flex:none}
.fr-hull{position:relative;display:flex;align-items:center;gap:2px;height:32px;padding:0 24px 0 4px;background:linear-gradient(#34474e,#243339);box-shadow:inset 0 0 0 2px var(--seat);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);border-radius:5px 0 0 5px}
.fr-bays{display:flex;gap:2px}
.fr-hull-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 0 1.5px var(--seat)) drop-shadow(0 0 1.5px var(--seat)) drop-shadow(0 3px 3px #0008)}
.fr-hull.has-art{display:block;width:188px;height:auto;aspect-ratio:var(--ship-ratio,3.2);padding:0;background:none;box-shadow:none;clip-path:none;border-radius:0}
.fr-hull.has-art .fr-bays{position:absolute;left:var(--bay-l,27%);top:var(--bay-t,30%);right:var(--bay-r,24%);bottom:var(--bay-b,30%);display:grid;grid-template-columns:repeat(5,1fr);gap:3%;align-items:center}
.fr-hull.has-art .fr-bay{width:auto;height:100%;border:0}
.fr-hull.has-art .fr-bay .fr-crate{width:100%;height:100%}.fr-hull.has-art .fr-bay .fr-crate i{display:none}
.fr-hull.has-art .fr-pennant{position:absolute;left:-4px;top:-5px;z-index:1;width:18px;height:18px;border-radius:50%;font-size:11px;box-shadow:0 0 0 1.5px #0b1418}
.fr-pennant{display:grid;place-items:center;width:20px;height:22px;margin-right:2px;background:var(--seat);color:#17242a;font:italic 700 13px/1 var(--serif);border-radius:2px}
.fr-bay{display:grid;place-items:center;width:27px;height:22px;border:1px dashed #7d9197;border-radius:2px}
.fr-bay .fr-crate{width:25px;height:20px}
.fr-ship-name{font:11px/1.2 var(--mono);color:#cdd9d6;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-chart-note{font:10.5px/1.4 var(--mono);color:#7f989d;align-self:end}
.fr-ships{display:flex;flex-wrap:wrap;gap:12px 18px;align-content:center;align-items:center}

/* The water */
.fr-water{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr);gap:14px;padding:12px;min-height:230px;align-items:stretch}
.fr-yard{align-self:center;display:grid;gap:8px;padding:10px 12px;background:#0c1b21d9;border:3px double #8c8566;border-radius:4px;max-width:170px}
.fr-supply{display:grid;gap:5px}
.fr-supply-item{display:flex;align-items:center;gap:8px;font:700 15px/1 var(--mono)}
.fr-supply-item.out b{color:var(--rust)}
.fr-sea{display:grid;grid-template-rows:auto 1fr auto;gap:8px;min-width:0;padding:4px 4px 4px 8px}
.fr-freeport{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:8px 12px;min-width:0;padding:12px 16px;background:radial-gradient(ellipse at 30% 20%,#2c3f36,#1e2d27);border:2px dashed #b9b08a66;border-radius:34px 20px 30px 24px;box-shadow:0 0 0 6px #17313a66,0 0 0 13px #17313a33;align-content:start}
.fr-freeport-head{grid-column:1/-1;display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}
.fr-freeport-art:empty{display:none}.fr-freeport-art img{width:58px;height:58px;margin:-8px 0;object-fit:contain;display:block;filter:drop-shadow(0 2px 3px #0009)}
.fr-tender{grid-column:1;grid-row:2/4;align-self:start;display:grid;gap:6px;padding:10px 12px;background:#101f25e6;border:1px solid #57696c;border-radius:6px}
.fr-tender.live{border-color:var(--gold);box-shadow:0 0 22px #e6b7722e}
.fr-tender h3{font:italic 600 16px/1.25 var(--serif)}
.fr-tender p{font-size:13px;line-height:1.4}.fr-tender p.fr-note{font-size:11.5px}
.fr-tender .fr-badge{justify-self:start}
.fr-tender-cargo{display:flex;gap:4px;flex-wrap:wrap}
.fr-bids{list-style:none;margin:0;padding:0;display:grid;gap:2px;font:12.5px var(--mono)}
.fr-bids li{display:flex;justify-content:space-between;gap:10px}.fr-bids li.top b{color:var(--gold)}
/* Freighters lying at the Freeport are small and unnamed: the pennant letter and seat colour say whose they are */
.fr-island-ships:empty{display:none}.fr-island-ships{zoom:.66;gap:6px 14px}.fr-island-ships .fr-ship-name{display:none}
.fr-lots{min-width:0;grid-column:2;grid-row:2/4;display:grid;gap:4px;align-content:start}
.fr-lot{display:flex;gap:8px;align-items:center;min-height:30px;padding:3px 8px;background:#0e1c2199;border-left:3px solid var(--seat);border-radius:3px}
.fr-lot.is-you{background:#1a2a2ecc}
.fr-lot-name{flex:1 1 0;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-lot-count{flex:none;order:3;min-width:2ch;text-align:right;font:700 13px var(--mono)}
.fr-tally{flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px 7px}
.fr-tally-item{display:inline-flex;align-items:center;gap:3px;font:700 12px var(--mono)}
.fr-tally .fr-crate.has-art{width:24px;height:24px}
.fr-stock:has(.has-art){gap:2px 6px}.fr-priced:has(.has-art){gap:0}
.fr-hull.has-art{margin-top:3px}
.fr-tally .fr-crate{width:22px;height:18px}.fr-tally .fr-crate i{font-size:8.5px}

/* Your books and orders */
.fr-books,.fr-orders{background:linear-gradient(#1c2925,#17231f);border:1px solid #4a5a52;border-radius:8px;padding:10px 12px;display:grid;gap:6px;align-content:start;min-width:0}
.fr-books{margin-top:10px}
.fr-capital{display:flex;align-items:baseline;gap:10px;font:12px var(--mono);color:var(--muted)}
.fr-capital b{font:700 28px/1 var(--mono);color:var(--gold)}
.fr-credit,.fr-books-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:11.5px var(--mono);color:var(--muted)}
.fr-credit span,.fr-books-foot span{flex:1 1 150px}
.fr-books-label{font:italic 12.5px var(--serif);color:#c9cdbd}
.fr-values{display:flex;flex-wrap:wrap;gap:4px 12px}
.fr-value{display:inline-flex;align-items:center;gap:5px;font:700 13.5px var(--mono)}
.fr-purse{margin-left:auto;font:700 15px var(--mono);font-style:normal;color:var(--gold)}
.fr-order-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fr-order-grid button{min-height:40px;padding:6px 6px;font-size:12.5px}
.fr-order-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* The slip */
.fr-sheet{position:absolute;left:204px;bottom:calc(var(--south-h,220px) + 12px);z-index:12;width:min(420px,calc(100% - 216px));max-height:min(470px,calc(100vh - var(--south-h,220px) - 70px));overflow:auto;background:#1b2824;border:1px solid #6d7c6c;border-top:4px solid var(--gold);border-radius:6px;box-shadow:0 18px 50px #000a}
.fr-sheet.answer{border-color:var(--gold)}
.fr-sheet-head{position:sticky;top:0;display:flex;align-items:center;gap:6px;padding:9px 12px;background:#1b2824;border-bottom:1px dashed #6d7c6c}
.fr-sheet-head h2{flex:1;font:italic 600 17px/1.25 var(--serif)}
.fr-sheet-body{padding:10px 12px 12px;display:grid;gap:8px}
.fr-sheet.min .fr-sheet-body{display:none}.fr-sheet.min .fr-sheet-head{border-bottom:0}
.fr-sheet form{display:grid;gap:8px}
.fr-slip-row{display:flex;align-items:center;gap:8px;min-height:40px;padding:2px 0;border-bottom:1px dashed var(--line-soft)}
.fr-slip-row label,.fr-choice label{display:flex;align-items:center;gap:8px;flex:1;min-height:38px;cursor:pointer}
.fr-slip-row>span:not(.fr-crate){flex:1}
.fr-slip-row select{min-height:36px;padding:4px 8px}
.fr-slip-row input,.fr-choice input{width:20px;height:20px;min-height:0;accent-color:var(--gold)}
.fr-choice{border:1px solid var(--line);border-radius:6px;margin:0;padding:6px 10px}.fr-choice legend{font:11.5px var(--mono);color:var(--muted);padding:0 4px}
.fr-total{font:600 13px var(--mono)}.fr-total.bad{color:#ffb59a}
.fr-bid{display:grid;gap:4px;font-size:13px}.fr-bid input{font:700 22px var(--mono);width:9ch}
.fr-tabs{display:flex;flex-wrap:wrap;gap:6px}.fr-tabs button.on{background:var(--gold);color:#17242a;border-color:var(--gold)}
.fr-sheet .fr-buttons{margin-top:2px}
.fr-sheet .fr-buttons button{display:inline-flex;align-items:center;gap:6px}

/* Log drawer */
.fr-side{position:fixed;z-index:14;top:45px;right:0;bottom:0;width:min(360px,100vw);overflow:auto;background:#0f1b20f7;border-left:1px solid var(--line);padding:12px 14px;box-shadow:-18px 0 40px #0008}
.fr-side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.fr-side-head h2{font:italic 600 18px var(--serif)}
.fr-log{margin:0 0 12px;padding-left:0;list-style:none;display:grid;gap:6px;font:12.5px/1.45 var(--mono);color:#cfd9d6}
.fr-log li{padding-bottom:6px;border-bottom:1px dashed var(--line-soft)}.fr-log li.says{color:#f1d9ae;font-style:italic}

/* Rules and results */
.fr-rules{max-width:720px;background:#162329;color:var(--ink);border:1px solid var(--gold);border-radius:8px;padding:22px}
.fr-rules::backdrop{background:#000b}
.fr-rules-head{display:flex;justify-content:space-between;align-items:center}
.fr-rules h2{font:italic 600 24px var(--serif);margin:6px 0 10px}.fr-rules h3{font-size:15px;margin:14px 0 6px}.fr-rules p{margin:0 0 10px}
#results{position:fixed;z-index:9;top:52px;left:50%;transform:translateX(-50%)}
#results .results-dialog table{min-width:680px}
#results .results-dialog th:first-child,#results .results-dialog td:first-child{min-width:140px;overflow-wrap:break-word}

/* Fewer columns as the window narrows */
@media(max-width:1100px){
 .fr-match{grid-template-columns:minmax(0,1fr) minmax(280px,340px)}
 .fr-south{grid-template-columns:minmax(0,1fr)}
 .fr-books{margin-top:0}
}
@media(max-width:900px){.fr-hero,.fr-setup{grid-template-columns:minmax(0,1fr)}}
@media(max-height:760px) and (min-width:761px){
 .fr-row{min-height:40px;padding:2px 0}.fr-berth{min-height:42px;padding:4px 10px}.fr-water{padding:8px 12px}.fr-seal{width:34px;height:34px}
}

/* Phone: the chart scrolls under a fixed bar, and your orders stay at the bottom */
@media(max-width:760px){
 .fr-match{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
 .fr-match::before{display:none}
 .fr-bar{grid-column:1;position:static;padding:5px 8px;gap:6px;align-items:flex-start}
 .fr-bar-title{gap:2px 8px;flex:1 1 0}.fr-bar-turn{max-width:100%;overflow:hidden;text-overflow:ellipsis}.fr-bar-home{font-size:16px}.fr-bar-now{flex-basis:100%;font-size:15px}.fr-bar-net{display:none}
 .fr-bar-actions{gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:62%}.fr-bar-actions>*{flex:none}.fr-bar-actions button{padding:4px 8px;min-height:34px;font-size:12px}
 .fr-bar .fr-skin span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.fr-bar .fr-skin select{min-height:34px;max-width:96px;font-size:12px;padding:2px 4px}
 .fr-table{display:block;grid-column:1;grid-row:2;overflow-y:auto;overscroll-behavior:contain}
 .fr-north{grid-auto-flow:row;grid-auto-columns:auto;gap:8px;padding:8px 8px 0;align-items:stretch;border-bottom:0;background:var(--land)}
 .fr-north .fr-quay{border-radius:8px;padding-bottom:4px}
 .fr-north .fr-berth:not(:has(.fr-ship)){display:none}
 .fr-row{min-height:40px}
 .fr-water{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 8px}
 .fr-yard{max-width:none;align-self:stretch}.fr-supply{grid-template-columns:repeat(5,auto);justify-content:space-between}.fr-supply-item{gap:5px;font-size:14px}
 .fr-sea{padding:0 2px;min-height:86px}
 .fr-freeport{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;padding:12px;border-radius:22px 16px 20px 18px}
 .fr-tender,.fr-lots{grid-column:1;grid-row:auto}
 .fr-south{display:grid;grid-template-columns:minmax(0,1fr);padding:0 8px 12px;gap:8px;background:var(--land);border-top:2px dashed #b9b08a55}
 .fr-south .fr-quay{border-radius:0 0 8px 8px}
 .fr-books{margin-top:0}
 .fr-orders{grid-column:1;grid-row:3;margin:0;border-radius:0;border-width:1px 0 0;padding:7px 8px calc(8px + env(safe-area-inset-bottom));background:#101c21;gap:5px}
 .my-move .fr-orders{border-top:2px solid var(--gold)}
 .fr-orders .fr-place{font-size:14px}
 .fr-order-grid{gap:5px}.fr-order-grid button{min-height:38px;font-size:12px;padding:4px}
 .has-sheet .fr-orders{display:none}
 .fr-sheet{position:static;grid-column:1;grid-row:3;width:auto;max-height:66vh;border-radius:10px 10px 0 0;border-width:4px 0 0;box-shadow:0 -14px 40px #000a}
 .fr-side{top:0;width:100vw}
 button.fr-mini{min-height:36px}
 .fr-row{grid-template-columns:92px minmax(0,1fr) auto}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}