/* UO Unbroken website (Nov 14 2026). Silver and Ember: black-plum iron, tarnished silver, one amber spark (the gem in our logo).
   Layout: full-bleed rainy hero -> 3 steps -> teaser -> news -> Discord band -> footer. Big readable type: many players are older. */
@font-face { font-family: "Cinzel"; src: url("img/Cinzel.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #110d13;
  --bg-2: #18131b;
  --panel: #1e1822;
  --line: #3a3141;
  --text: #ece7ef;
  --dim: #aaa1b0;
  --silver: #d4d8de;
  --silver-2: #8f97a3;
  --ember: #e3a63c;
  --ember-hot: #f6c66a;
  --ok: #57d27a;
  --down: #e0645a;
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --body: "Segoe UI", Candara, "Helvetica Neue", Arial, sans-serif;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.6 var(--body); }
img { max-width: 100%; display: block; }
a { color: var(--ember); }
a:hover { color: var(--ember-hot); }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; background: #0d0a0fe8; backdrop-filter: blur(8px); border-bottom: 1px solid #ffffff12; }
.top .wrap { display: flex; align-items: center; gap: 22px; min-height: 62px; flex-wrap: wrap; padding-block: 6px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--silver); font-family: var(--display); font-weight: 800; letter-spacing: .08em; font-size: 19px; margin-right: auto; }
.brand img { width: 34px; height: auto; }
.menu { display: flex; gap: 4px 20px; flex-wrap: wrap; align-items: center; }
.menu a { display: inline-flex; align-items: center; color: var(--dim); text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: .02em; padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--text); border-bottom-color: var(--ember); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: #0b0a10 url("media/rain-dock-1600.jpg") center / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 42%, #0b081066 0%, #0b0810d9 62%, #0b0810 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; z-index: -1; background: linear-gradient(#110d1300, var(--bg)); }
#rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
#flash { position: absolute; inset: 0; z-index: -1; background: #dfe8ff; opacity: 0; pointer-events: none; }
.hero .wrap { padding-block: 56px 70px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.mark { width: min(230px, 50vw); filter: drop-shadow(0 10px 30px #000c); }
.wordmark { width: min(460px, 80vw); margin-top: -6px; filter: drop-shadow(0 6px 20px #000c); }
.kicker { font-family: var(--display); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--silver); font-size: clamp(14px, 1.8vw, 17px); margin: 4px 0 0; text-shadow: 0 2px 10px #000; }
.lead { max-width: 60ch; color: #e2dce6; margin: 0; font-size: clamp(17px, 2vw, 20px); text-shadow: 0 2px 12px #000; text-wrap: balance; }
h1.lead { font-weight: 400; }
.lead-big { display: block; font-family: var(--display); font-weight: 700; color: var(--ember-hot); font-size: clamp(24px, 3.6vw, 40px); line-height: 1.15; letter-spacing: .02em; margin-bottom: 10px; text-shadow: 0 3px 18px #000; }
.why { padding-bottom: 20px; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pillar { padding: 26px 24px; border-radius: 14px; background: linear-gradient(160deg, #241c29, #17121a); border: 1px solid var(--line); border-top: 2px solid var(--ember); }
.pillar h3 { font-family: var(--display); font-weight: 700; letter-spacing: .04em; color: var(--silver); font-size: 21px; margin: 0 0 8px; }
.pillar p { margin: 0; color: var(--dim); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }
.cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; letter-spacing: .08em; text-decoration: none; border-radius: 10px; padding: 16px 30px; font-size: 20px; cursor: pointer; border: 0; }
.btn svg { width: 22px; height: 22px; }
.fine { color: var(--dim); font-size: 15px; margin: 0; text-shadow: 0 1px 6px #000; }
.status { display: inline-flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; background: #0c0a0ecc; border: 1px solid #ffffff1a; border-radius: 999px; padding: 7px 18px; font-size: 15px; color: var(--dim); }
.light { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--silver-2); margin-right: 7px; vertical-align: 1px; }
.light.up { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.light.down { background: var(--down); box-shadow: 0 0 10px var(--down); }
.status b { color: var(--text); font-weight: 600; }

/* ---------- sections ---------- */
section { padding-block: 64px; }
.sec-title { font-family: var(--display); font-weight: 800; letter-spacing: .05em; font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 8px; text-align: center; color: var(--silver); text-wrap: balance; }
.sec-sub { text-align: center; color: var(--dim); margin: 0 auto 34px; max-width: 58ch; }
.need { max-width: 760px; margin: -12px auto 28px; text-align: center; background: #ffffff08; border: 1px dashed #ffffff26; border-radius: 12px; padding: 12px 18px; color: #d9d2de; font-size: 16.5px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; position: relative; }
.step::before { counter-increment: s; content: counter(s); font-family: var(--display); font-weight: 800; font-size: 22px; color: #f6c66a; background: radial-gradient(circle at 50% 30%, #2c2532, #0a070c); border: 1.5px solid #c4c8ce; box-shadow: 0 0 0 3px #0b080d, 0 0 0 4px #c4c8ce40; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; }
.step h3 { margin: 0 0 6px; font-size: 20px; }
.step p { margin: 0; color: var(--dim); }
.warn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; margin-top: 30px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.warn h3 { margin: 0 0 8px; font-size: 20px; }
.warn p { margin: 0 0 8px; color: var(--dim); }
.smart { background: #0c62b4; color: #fff; border-radius: 6px; padding: 22px 22px 16px; font-family: "Segoe UI", Arial, sans-serif; box-shadow: 0 14px 40px #000a; }
.smart .big { font-size: 22px; font-weight: 300; margin: 0 0 10px; }
.smart .small { font-size: 13px; margin: 0 0 8px; opacity: .92; }
.smart .link { font-size: 13px; text-decoration: underline; color: #fff; display: inline-block; outline: 2px dashed #ffd66b; outline-offset: 3px; }
.smart .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.smart .row span { border: 1px solid #ffffffaa; padding: 5px 16px; font-size: 13px; }
.smart .row .run { outline: 2px dashed #ffd66b; outline-offset: 3px; }
.tag { display: inline-block; background: #ffd66b; color: #2a1d00; font-weight: 700; font-size: 12px; border-radius: 4px; padding: 0 6px; margin-left: 6px; text-decoration: none; }

.systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; scroll-margin-top: 80px; }
.sys { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.sys h3 { margin: 0 0 4px; font-size: 17px; color: var(--silver); }
.sys p { margin: 0; color: var(--dim); font-size: 15.5px; }
.sys .yes { color: var(--ok); font-weight: 700; }
.sys .soon { color: var(--ember); font-weight: 700; }
@media (max-width: 820px) { .systems { grid-template-columns: 1fr; } }
.teaser { background: linear-gradient(#0000, #0a080c 30%, #0a080c 70%, #0000); }
.video { max-width: 900px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 70px #000b; background: #000; aspect-ratio: 16 / 9; }
.video video { width: 100%; height: 100%; display: block; }

.news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.post { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; min-width: 0; }
.post time { color: var(--ember); font-family: var(--display); font-weight: 700; letter-spacing: .06em; font-size: 15px; }
.post h3 { font-size: 17px; margin: 14px 0 4px; color: var(--silver); letter-spacing: .02em; }
.post p { margin: 0 0 8px; color: #d7d0db; }
.post b { color: var(--text); }
.more { text-align: center; margin-top: 26px; }

.band { background: radial-gradient(ellipse at 50% 120%, #3a2a4a 0%, #18131b 70%); border-block: 1px solid var(--line); text-align: center; }
.band .wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---------- simple pages ---------- */
.page-head { padding-block: 56px 10px; text-align: center; background: radial-gradient(ellipse at 50% -20%, #2c2133 0%, var(--bg) 70%); }
.page-head h1 { font-family: var(--display); font-weight: 800; letter-spacing: .05em; font-size: clamp(30px, 4.6vw, 46px); margin: 0 0 8px; color: var(--silver); }
.page-head p { color: var(--dim); margin: 0 auto; max-width: 60ch; }
.prose { max-width: 760px; margin: 0 auto; padding-block: 30px 70px; }
.prose h2 { font-family: var(--display); color: var(--silver); letter-spacing: .04em; font-size: 24px; margin: 40px 0 10px; }
.prose li { margin-bottom: 8px; }
.prose p, .prose li { color: #ddd6e1; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 22px 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.card h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 700; letter-spacing: .04em; font-size: 19px; color: var(--silver); }
.card p { margin: 0; color: var(--dim); }
.draft { background: #3a2a10; border: 1px solid #8a6420; color: #ffd98c; border-radius: 10px; padding: 10px 14px; font-size: 15px; margin: 14px auto 0; max-width: 760px; }
.check { background: #ffd66b; color: #2a1d00; font-weight: 700; font-size: 12px; border-radius: 4px; padding: 0 5px; }

/* ---------- footer ---------- */
footer { border-top: 1px solid #ffffff12; background: #0b090d; padding-block: 34px 40px; color: var(--dim); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer nav { display: flex; gap: 4px 22px; flex-wrap: wrap; }
footer nav a { padding: 8px 0; display: inline-flex; align-items: center; }
footer a { color: var(--dim); }
footer a:hover { color: var(--text); }
footer .legal { flex-basis: 100%; font-size: 13.5px; color: #7f7786; }

@media (max-width: 820px) {
  .steps, .news, .warn { grid-template-columns: 1fr; }
  .menu { gap: 4px 16px; }
  .top .wrap { gap: 10px; }
  .hero .wrap { padding-block: 40px 56px; }
}
@media (max-width: 640px) {
  .top { position: relative; }
  .top .wrap { gap: 2px; padding-block: 8px; }
  .top .wrap { min-height: 0; padding-block: 10px 6px; }
  .brand { min-height: 38px; }
  /* phone: logo left + Play Free right on row 1, the 4 links in one even row under them */
  .menu { width: 100%; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0; border-top: 1px solid #ffffff10; padding-top: 4px; }
  .menu a { font-size: 14.5px; display: inline-flex; align-items: center; padding: 11px 0; white-space: nowrap; }
  .brand { font-size: 17px; }
  .brand img { width: 30px; }
  .menu .ico { margin-right: .3em; }
  .menu .play-mini { position: absolute; top: 10px; right: max(18px, env(safe-area-inset-right, 0px)); }
  .btn { padding: 14px 22px; font-size: 18px; }
}
@media (max-width: 400px) { .menu .ico { display: none; } .menu a { font-size: 14px; } .brand { font-size: 16px; letter-spacing: .05em; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #rain, #flash { display: none; } .btn-play:hover, .btn-ghost:hover, .menu .play-mini:hover { transform: none; } .gem { animation: none; } }

/* small brand icons: Discord next to every Discord link, PayPal on the donate button */
.ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; margin-right: .38em; }
.menu a .ico, footer nav a .ico { color: var(--ember); opacity: .85; }
.menu a:hover .ico, footer nav a:hover .ico, .menu a[aria-current="page"] .ico { opacity: 1; }
.btn .ico { width: 24px; height: 24px; margin: 0; }

/* early access warning under the server lights (live is open before launch) */
.early { margin: 14px auto 0; max-width: 46ch; font-size: 15px; color: #f3dcae; background: #2a1d0bcc; border: 1px solid #e0a43a66; border-radius: 10px; padding: 8px 14px; text-align: center; }
.early b { color: var(--ember); }

@media (min-width: 821px) and (max-width: 1060px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Black steel buttons (Nov 14, jimmy picked "A"): made from our logo.
   Silver edge, black inside, pointed sides like the logo, silver letters, and the logo's amber gem.
   Layers: the link itself = thin dark rim, ::before = silver bevel, ::after = black inside with an amber glow at the bottom. ---------- */
@property --glow { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
.btn-play, .btn-ghost, .menu .play-mini {
  --tip: 20px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; box-shadow: none; text-decoration: none; white-space: nowrap; background: #050407;
  clip-path: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
  transition: transform .2s ease, --glow .35s ease;
}
.btn-play::before, .btn-ghost::before, .menu .play-mini::before,
.btn-play::after, .btn-ghost::after, .menu .play-mini::after { content: ""; position: absolute; clip-path: inherit; pointer-events: none; }
.btn-play::before, .btn-ghost::before, .menu .play-mini::before { inset: 1px; z-index: -2;
  background: linear-gradient(180deg, #ffffff 0%, #dde0e5 22%, #8d939c 50%, #5b6169 56%, #adb2b9 80%, #eceef1 100%); transition: filter .25s; }
.btn-play::after, .btn-ghost::after, .menu .play-mini::after { inset: 3px; z-index: -1;
  background: linear-gradient(180deg, #ffffff1c 0, #ffffff00 2px),
    radial-gradient(130% 115% at 50% 135%, color-mix(in srgb, #f2b443 var(--glow), transparent) 0%, transparent 66%),
    linear-gradient(180deg, #2c2532 0%, #17121b 48%, #0a070c 100%); }
.btn-play:hover, .btn-ghost:hover, .menu .play-mini:hover, .btn-play:focus-visible, .btn-ghost:focus-visible, .menu .play-mini:focus-visible { --glow: 95%; transform: translateY(-2px); }
.btn-play:hover::before, .btn-ghost:hover::before, .menu .play-mini:hover::before { filter: brightness(1.15); }
.btn-play:active, .btn-ghost:active, .menu .play-mini:active { --glow: 85%; transform: translateY(0); }
.btn-play:focus-visible, .btn-ghost:focus-visible, .menu .play-mini:focus-visible { outline: none; }
.btn-play:focus-visible::before, .btn-ghost:focus-visible::before, .menu .play-mini:focus-visible::before { background: linear-gradient(180deg, #ffe6a0, #e3a63c 50%, #9a5a10); }

/* silver letters, like the Unbroken wordmark */
.chrome { background: linear-gradient(180deg, #ffffff 0%, #f0f2f4 35%, #a8aeb6 56%, #d8dce1 78%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 6px #0009); }

/* the amber gem from the logo: 4 cut faces, silver setting, slow soft glow */
.gem { display: inline-block; flex: none; width: 12px; height: 12px; transform: rotate(45deg);
  background: conic-gradient(#ffe9a8 0 25%, #f4b445 0 50%, #a65c10 0 75%, #d98d28 0);
  box-shadow: 0 0 0 1.5px #0b080d, 0 0 0 3px #cfd3d8, 0 0 0 4px #0b080d, 0 0 12px 2px #f2b44388;
  animation: gem-glow 3.2s ease-in-out infinite; }
@keyframes gem-glow { 50% { box-shadow: 0 0 0 1.5px #0b080d, 0 0 0 3px #cfd3d8, 0 0 0 4px #0b080d, 0 0 18px 4px #f6c66acc; } }

.btn-play { --tip: 22px; height: 62px; min-width: 272px; padding: 0 50px; gap: 15px; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .16em; }
.btn-ghost { --tip: 18px; --glow: 0%; height: 52px; min-width: 272px; padding: 0 40px; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .14em; }
.btn-ghost svg { width: 12px; height: 12px; fill: #f6c66a; filter: drop-shadow(0 0 5px #f2b44366); }
.btn-ghost:hover { --glow: 60%; }
.cta { gap: 18px 26px; align-items: center; filter: drop-shadow(0 12px 22px #000b); }
.menu .play-mini { --tip: 13px; height: 38px; padding: 0 24px; gap: 10px; border-bottom: 0; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .12em; }
.menu .play-mini .gem { width: 8px; height: 8px; box-shadow: 0 0 0 1px #0b080d, 0 0 0 2.5px #cfd3d8, 0 0 0 3.5px #0b080d, 0 0 9px 1px #f2b44388; animation: none; }
@media (max-width: 640px) {
  .btn-play { height: 58px; padding: 0 42px; font-size: 18px; }
  .btn-ghost { height: 50px; }
  .menu .play-mini { height: 36px; padding: 0 20px; position: absolute; top: 11px; right: max(18px, env(safe-area-inset-right, 0px)); }
}
.btn-play:hover .chrome, .btn-ghost:hover .chrome, .menu .play-mini:hover .chrome { filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 10px #f6c66a70); }
/* download arrow on the Play Free buttons (amber, like the logo's gem) */
.btn-play .dl, .menu .play-mini .dl { flex: none; width: 22px; height: 22px; color: #f6c66a; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 6px #f2b44388); transition: transform .2s; }
.menu .play-mini .dl { width: 16px; height: 16px; }
.btn-play:hover .dl, .menu .play-mini:hover .dl { transform: translateY(2px); color: #ffe2a0; }
/* Discord + PayPal buttons use the same black steel look (no more blue) */
.btn-discord, .btn-paypal { height: 58px; min-width: 272px; padding: 0 44px; gap: 13px; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .1em; }
.btn-discord svg.ico, .btn-paypal svg.ico { width: 22px; height: 22px; margin: 0; fill: currentColor; color: #f6c66a; filter: drop-shadow(0 0 5px #f2b44366); }