/* Farclaim. Copyright (C) 2026 Michael Slater. SPDX-License-Identifier: GPL-2.0-or-later */
/* The Exo 2 typeface is by The Exo 2 Project Authors, under the SIL Open Font License (exo2-LICENSE.txt). */
@font-face { font-family: "Exo 2"; font-weight: 400; font-display: swap; src: url(exo2-400.woff2) format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 500; font-display: swap; src: url(exo2-500.woff2) format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 600; font-display: swap; src: url(exo2-600.woff2) format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 700; font-display: swap; src: url(exo2-700.woff2) format("woff2"); }
:root { --bg: #04060c; --panel: #0b101d; --card: #121a2d; --card2: #18223a; --line: #243150; --line2: #34456e; --text: #e2e9f7; --dim: #8b98b4;
  --accent: #5fe0a0; --accent2: #2f9d70; --warn: #ffd666; --bad: #ff7b7b;
  --metal: #c9d2e3; --fuel: #ffb46b; --crystal: #8fd0ff;
  --font: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14.5px/1.45 var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 2px; text-decoration-color: rgba(95,224,160,.45); } a:hover { text-decoration-color: var(--accent); }
h1, h2, h3 { margin: 0 0 8px; font-weight: 600; }
h2 { font-size: 21px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: .01em; }
h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin-top: 20px; display: flex; align-items: center; gap: 10px; }
h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
h3.bad { color: var(--bad); }
p { margin: 0 0 10px; }
ol { padding-left: 20px; margin: 0 0 10px; } li { margin-bottom: 6px; }
.dim { color: var(--dim); font-size: 12.5px; } .bad { color: var(--bad); } .good { color: var(--accent); }
.grow { flex: 1; min-width: 0; }
button { font: inherit; font-weight: 500; color: var(--text); background: linear-gradient(#27324f, #1d2640); border: 1px solid var(--line2); border-radius: 7px; padding: 5px 12px; cursor: pointer; margin: 2px 4px 2px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: background .12s, border-color .12s, transform .05s; }
button:hover { background: linear-gradient(#324062, #252f4e); border-color: #4a5e92; } button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: linear-gradient(#2b9468, #1c6747); border-color: #3fb383; color: #f2fff8; } button.primary:hover { background: linear-gradient(#33a876, #207551); }
button.danger { background: linear-gradient(#7a2c3f, #55202d); border-color: #a5445b; } button.danger:hover { background: linear-gradient(#8d3449, #632536); }
button.small { padding: 1px 8px; font-size: 12px; font-weight: 400; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input, select { font: inherit; color: var(--text); background: #070b15; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; }
input:focus, select:focus { border-color: var(--accent2); outline: none; }
input[type=number] { width: 68px; margin-right: 4px; }
svg.ico { flex: none; vertical-align: -4px; } svg.shipart { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
canvas.planetart { flex: none; display: block; }
* { scrollbar-width: thin; scrollbar-color: #2a3757 transparent; }

#login { height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; position: relative; }
#login canvas.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; }
#login .box { position: relative; width: 100%; max-width: 400px; background: rgba(11,16,29,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line2); border-radius: 14px; padding: 28px; box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
#login h1 { font-size: 34px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f1fff8; display: flex; align-items: center; gap: 12px; text-shadow: 0 0 24px rgba(95,224,160,.45); }
#login label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--dim); } #login label input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 15px; }
#login .tabs { display: flex; margin: 16px 0; } #login .tabs button { flex: 1; margin: 0; border-radius: 0; }
#login .tabs button:first-child { border-radius: 7px 0 0 7px; } #login .tabs button:last-child { border-radius: 0 7px 7px 0; }
#login .tabs button.on { background: linear-gradient(#2b9468, #1c6747); border-color: #3fb383; }
#login form:not(.stack) button { width: 100%; padding: 10px; margin: 4px 0 14px; font-size: 15px; font-weight: 600; letter-spacing: .04em; }

#game { display: none; height: 100%; flex-direction: column; } #game.show { display: flex; }
#bar { display: flex; align-items: center; gap: 2px; padding: 6px 12px; background: linear-gradient(#111829, #0b101d); border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; flex: none;
  box-shadow: 0 2px 14px rgba(0,0,0,.5); position: relative; z-index: 3; }
#bar .brand { color: #f1fff8; font-weight: 700; font-size: 16px; letter-spacing: .16em; text-transform: uppercase; margin-right: 12px; display: inline-flex; align-items: center; gap: 8px; text-shadow: 0 0 16px rgba(95,224,160,.5); }
#bar .who { margin-right: 12px; color: var(--dim); padding-left: 12px; border-left: 1px solid var(--line); }
#bar button { background: none; border-color: transparent; box-shadow: none; margin: 0; display: inline-flex; align-items: center; gap: 5px; color: #c3cde2; padding: 5px 9px; }
#bar button svg { opacity: .75; }
#bar button:hover { background: #18213a; border-color: var(--line); color: var(--text); }
#bar button.on { background: linear-gradient(#1d2f3d, #16283a); border-color: #2c6b62; color: #fff; } #bar button.on svg { color: var(--accent); opacity: 1; }
#bar .badge { background: var(--bad); color: #2a0508; border-radius: 9px; font-size: 11px; padding: 0 6px; font-weight: 700; box-shadow: 0 0 8px rgba(255,123,123,.6); }
#bar .shield { color: var(--accent); margin-right: 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
#main { flex: 1; display: flex; min-height: 0; }
#mapwrap { flex: 1; position: relative; min-width: 0; }
#map { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; }
#zoom button { width: 34px; height: 34px; padding: 0; margin: 0 0 5px; font-size: 18px; background: rgba(18,26,45,.8); backdrop-filter: blur(6px); }
#mini { position: absolute; left: 12px; bottom: 12px; width: 150px; height: 150px; border: 1px solid var(--line2); border-radius: 10px; background: #04060c; cursor: crosshair; touch-action: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.6); opacity: .92; }
#panel { width: 430px; flex: none; background: linear-gradient(180deg, #0d1322, #090d18); border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,.45); position: relative; z-index: 2; }
@media (max-width: 820px) {
  #main { flex-direction: column; }
  #panel { width: auto; height: 52%; border-left: 0; border-top: 1px solid var(--line); }
  #mini { display: none; }
}

.card { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.card.click { cursor: pointer; transition: border-color .12s, transform .08s; } .card.click:hover { border-color: #4a5e92; transform: translateX(2px); }
.card.planet { display: flex; align-items: center; gap: 12px; }
.card.threat { border-color: #873447; background: linear-gradient(180deg, #2c1620, #1c1220); }
.card.report pre { font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; margin: 6px 0 2px; color: #c4cde0; }
.card.report.unread { border-left: 3px solid var(--accent); } .card.report.battle.unread { border-left-color: var(--bad); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; box-shadow: 0 0 8px currentColor; }
.tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); border: 1px solid #2c6b62; border-radius: 4px; padding: 0 5px; margin-left: 8px; vertical-align: 1px; }
.hero { position: relative; margin: -16px -16px 10px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero canvas.banner { display: block; }
.hero h2 { position: absolute; left: 16px; top: 10px; margin: 0; font-size: 22px; text-shadow: 0 2px 10px #000, 0 0 2px #000; }
.hero.colony { display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: radial-gradient(ellipse at 12% 50%, rgba(80,110,200,.22), transparent 60%), linear-gradient(120deg, #0f172c, #070a14); }
.hero.colony h2 { position: static; text-shadow: none; margin-bottom: 4px; } .hero.colony p { margin-bottom: 6px; }
.back { margin-bottom: 20px; font-size: 13px; }
.r0 { color: var(--metal); } .r1 { color: var(--fuel); } .r2 { color: var(--crystal); }
.rich { display: flex; flex-wrap: wrap; gap: 4px 12px; } .cost span { margin-right: 10px; } .cost { white-space: nowrap; } .cost .short { text-decoration: underline wavy var(--bad); }
.rich > span { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.r0::before, .r1::before, .r2::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; background: currentColor; flex: none;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.r0 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3h6l3 6H0z'/%3E%3C/svg%3E"); }
.r1 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0c2 3 4 5 4 7.5a4 4 0 0 1-8 0C2 5 4 3 6 0z'/%3E%3C/svg%3E"); }
.r2 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l4 4-4 8-4-8z'/%3E%3C/svg%3E"); }
label.r0::before, label.r1::before, label.r2::before, .stock > div::before { content: none; }
i.meter { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.09); overflow: hidden; } i.meter > i { display: block; height: 100%; background: currentColor; border-radius: 2px; transition: width .6s; }
i.meter > i.full { background: var(--bad); }
.rich i.meter { display: inline-block; width: 30px; margin-left: 6px; }
.stock { display: flex; gap: 8px; margin-bottom: 6px; }
.stock > div { flex: 1; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; }
.stock .dim:first-child { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 600; }
.stock .big { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.stock i.meter { margin-top: 6px; }
.queue { background: repeating-linear-gradient(135deg, #111a2e, #111a2e 10px, #141e35 10px, #141e35 20px); border: 1px solid #34456e; border-left: 3px solid var(--warn); border-radius: 8px; padding: 7px 11px; margin-bottom: 8px; }
.queue > div { padding: 2px 0; } .until { color: var(--warn); font-variant-numeric: tabular-nums; font-weight: 500; }
table { width: 100%; border-collapse: collapse; } td, th { padding: 7px 6px 7px 0; border-bottom: 1px solid #18213a; vertical-align: top; text-align: left; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tr.me td { color: var(--accent); }
td.pic { width: 36px; color: #9fb4e0; padding-top: 9px; } td.pic svg.shipart { margin: 2px 4px 0 0; }
tr.locked td.pic, tr.locked b { opacity: .45; }
.lv { display: inline-block; min-width: 24px; text-align: center; padding: 0 6px; border-radius: 6px; background: #1a2b3a; border: 1px solid #2c6b62; color: var(--accent); font-weight: 600; }
.lv.none { background: none; border-color: var(--line); color: var(--dim); }
.lineup { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 8px; align-items: flex-end; }
.lineup .unit { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--dim); line-height: 1.25; }
.lineup .unit b { color: var(--text); font-size: 12.5px; } .lineup .unit i { font-style: normal; }
.cargo, .split { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .cargo label, .split label { display: flex; flex-direction: column; font-size: 12.5px; }
.opts label { display: block; padding: 5px 0; cursor: pointer; }
.pickhint { color: var(--warn); }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #1d2742; border: 1px solid var(--line2); padding: 10px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; z-index: 9; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
#toast.show { opacity: 1; } #toast.bad { border-color: var(--bad); }
#offline { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); background: #5a2330; padding: 5px 14px; border-radius: 6px; display: none; z-index: 9; } #offline.show { display: block; }
#panel .stock { position: sticky; top: -16px; z-index: 2; background: #0c1220; padding: 8px 0 6px; margin-top: -8px; }
#notice { display: none; background: #3a3214; color: var(--warn); padding: 4px 12px; font-size: 13px; border-bottom: 1px solid #5c5020; flex: none; } #notice.show { display: block; }
#bar .adminlink { margin-right: 10px; font-size: 13px; }
/* teams, the account page and messages */
textarea { font: inherit; color: var(--text); background: #070b15; border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; resize: vertical; width: 100%; }
textarea:focus { border-color: var(--accent2); outline: none; }
.tag.bad { color: var(--bad); border-color: #873447; } .tag.warn { color: var(--warn); border-color: #5c5020; }
.tag.rank-leader { color: var(--warn); border-color: #6b5a1c; } .tag.rank-officer { color: #9fc4ff; border-color: #2f4a80; }
.tag.rank-governor, .tag.rank-admiral { color: var(--accent); } .tag.rank-member { color: var(--dim); border-color: var(--line); }
td .tag { margin-left: 0; }
button.small.danger { padding: 1px 8px; }
details { margin: 8px 0; } summary { cursor: pointer; }
.card.here { border-color: #2c6b62; }
.invite { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line2); }
form.stack { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; } form.stack button { margin: 0; }
.log > div { padding: 3px 0; border-bottom: 1px solid #18213a; font-size: 13px; }
#login .box.wide { max-width: 560px; } #login .box.wide h2 { font-size: 18px; }
.chat .rooms { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.chat .rooms button { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 3px 9px; }
.chat .rooms button.on { background: linear-gradient(#1d2f3d, #16283a); border-color: #2c6b62; color: #fff; }
.chat .badge, #bar .badge { background: var(--bad); color: #2a0508; border-radius: 9px; font-size: 11px; padding: 0 6px; font-weight: 700; }
.chat .msgs { height: 300px; overflow-y: auto; background: #070b15; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.chat .msg { margin-bottom: 8px; max-width: 92%; } .chat .msg .text { background: var(--card2); border: 1px solid var(--line); border-radius: 4px 10px 10px 10px; padding: 5px 9px; white-space: pre-wrap; overflow-wrap: anywhere; display: inline-block; }
.chat .msg.mine { margin-left: auto; text-align: right; } .chat .msg.mine .text { background: #17352c; border-color: #2c6b62; border-radius: 10px 4px 10px 10px; text-align: left; }
.chat .msg a { color: var(--bad); text-decoration: none; }
.chat .day, .chat .note { text-align: center; color: var(--dim); font-size: 11.5px; margin: 6px 0; } .chat .day { text-transform: uppercase; letter-spacing: .1em; }
.chat .send { display: flex; gap: 6px; align-items: flex-end; } .chat .send button { margin: 0; }
@media (max-width: 820px) { .chat .msgs { height: 180px; } }
/* ship designs */
.needs .tag { margin: 0 4px 2px 0; display: inline-block; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.designer { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 8px; } .slots label { display: flex; flex-direction: column; font-size: 12px; color: var(--dim); } .slots select { width: 100%; }
table.stats td { padding: 3px 8px 3px 0; border: 0; } table.stats { margin-bottom: 8px; }
.designer select { max-width: 100%; } .designer .grow { min-width: 0; }
/* prize worlds, goods and trade */
.tag.prize { color: var(--warn); border-color: #6b5a1c; box-shadow: 0 0 8px rgba(255,214,102,.25); }
.card.planet.prize { border-color: #6b5a1c; background: linear-gradient(180deg, #2a2616, #1a1a16); }
.gold { color: var(--warn); } i.meter.gold { color: var(--warn); margin: 4px 0; }
.goods { display: flex; gap: 12px; align-items: center; color: #9fb4e0; } .goods .grow { color: var(--text); }
table.trade td { vertical-align: middle; } table.trade input { width: 74px; } table.trade button { padding: 2px 9px; }
#bar .credits { color: var(--warn); margin-right: 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
#panel table:not(.trade):not(.stats) td:nth-child(2) { min-width: 150px; }
.card.dock input { width: 80px; } .card.dock button { padding: 3px 10px; } .cargo label.gold { color: var(--warn); }