/* The public site in the strategic map's look (templates/site/_layout_modern):
   the same brass plates (brass.svg), etched panels (panel.svg), green jewels
   and Verdana as jeu/map/map.css, over a night sky. The pages' markup is the
   old one (<font>, tables, <blockquote>...): it is restyled here, as
   jeu/css/embed.css does in the map's drawer. */

:root {
  --bg: #07080d;
  --brass: #d9b25e;
  --brass-dim: rgba(217, 178, 94, 0.28);
  --jewel: #8fe6bf;
  --jewel-dark: #2f8a64;
  --text: #d8d8d8;
  --muted: #9b9686;
  --line: rgba(255, 255, 255, 0.08);
  --tip: #5fb4ff;
  --danger: #ff4b3a;
  --font: Verdana, Geneva, Tahoma, sans-serif;
  --chamfer: 10px;
  --plate: linear-gradient(90deg, rgba(20, 14, 4, 0.38), rgba(20, 14, 4, 0) 45%, rgba(255, 228, 160, 0.12)), url(/jeu/map/art/brass.svg);
  --plate-bevel: inset 0 1px 0 rgba(255, 238, 190, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.55), inset 1px 0 0 rgba(255, 238, 190, 0.18), inset -1px 0 0 rgba(0, 0, 0, 0.4);
  --panel: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 65%), url(/jeu/map/art/panel.svg);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body.sx {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font: 12px/1.6 var(--font);
  /* Nebulae over the stars, as the map's galaxies glow */
  background:
    radial-gradient(ellipse 70% 50% at 12% -5%, rgba(98, 70, 160, 0.30), transparent 70%),
    radial-gradient(ellipse 55% 45% at 95% 25%, rgba(30, 120, 130, 0.20), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(160, 110, 50, 0.16), transparent 70%),
    url(/images/app/stars.svg),
    var(--bg);
  background-attachment: fixed;
}
img { max-width: 100%; height: auto; }
::selection { background: rgba(217, 178, 94, 0.4); }
a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 2px; }
a:hover { color: var(--brass); text-decoration-color: currentColor; }

/* --- Jewel, chips, buttons (as on the map) --------------------------------- */

.jewel {
  flex: none;
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6fff3 0, var(--jewel) 30%, var(--jewel-dark) 75%, #10352a 100%);
  box-shadow: 0 0 0 2px #2a2418, 0 0 0 3px #6d5a33, 0 0 8px rgba(143, 230, 191, 0.55);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #4a4a44 0, #2f2f2b 55%, #222220 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 0 rgba(255, 220, 150, 0.1);
  color: var(--text);
  font: bold 11px var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.chip:hover, .sx-menu[open] > .chip { background: linear-gradient(180deg, #b39553 0, #7a6131 55%, #4b3b1c 100%); color: #fff; text-shadow: 1px 1px 0 #000; }

/* The brass call to action (sign up, play) */
.sx-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 18px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #f0d48c 0, #c79f4f 50%, #8a6d36 100%);
  box-shadow: inset 0 1px 0 rgba(255, 238, 190, 0.6), 0 2px 8px rgba(0, 0, 0, 0.6);
  color: #1a1408;
  font: bold 12px var(--font);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sx-cta:hover { color: #1a1408; filter: brightness(1.12); }
.sx-cta.wide { display: flex; width: 100%; }
.sx-cta.big { height: 38px; padding: 0 24px; font-size: 13px; }
.sx-link { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
.sx-link:hover { color: var(--brass); }

/* --- Top bar: a brass plate ------------------------------------------------- */

.sx-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 6px 18px 6px 10px;
  background: var(--plate);
  border-bottom: 1px solid #000;
  box-shadow: var(--plate-bevel), 0 6px 24px rgba(0, 0, 0, 0.7);
}
.sx-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.sx-brand img { width: 54px; height: 54px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)); }
.sx-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.sx-brand b { font: bold italic 17px var(--font); letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 1px 1px 0 #000, 0 0 8px rgba(0, 0, 0, 0.6); }
.sx-brand small { color: #f3e3b8; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.sx-brand:hover { color: #fff; }
.sx-nav { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sx-account { display: flex; align-items: center; gap: 8px; }

/* Menus: a chip opening an etched panel below it */
.sx-menu { position: relative; }
.sx-menu > summary { list-style: none; }
.sx-menu > summary::-webkit-details-marker { display: none; }
.sx-menu > summary::after { content: '▾'; font-size: 9px; opacity: 0.8; }
.sx-flyout {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--panel) #141311;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(160, 132, 80, 0.55), 0 12px 30px rgba(0, 0, 0, 0.75);
}
.sx-flyout a { padding: 6px 10px; color: var(--text); text-decoration: none; }
.sx-flyout a:hover { background: rgba(0, 0, 0, 0.4); color: var(--jewel); }

/* --- Page --------------------------------------------------------------------- */

.sx-shell {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 16px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
}
.sx-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sx-main > br { display: none; } /* the old pages spaced their panels with <br> */
.sx-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }

/* A window, as on the map: etched panel, brass header with its jewel, brass foot */
.sx-window {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel) #141311;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(160, 132, 80, 0.55), 0 12px 40px rgba(0, 0, 0, 0.6);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.sx-window::after { content: ''; display: block; height: 10px; background: var(--plate) 0 -40px; box-shadow: var(--plate-bevel); }
.sx-window > header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 14px;
  background: var(--plate) 0 -20px;
  border-bottom: 1px solid #000;
  box-shadow: var(--plate-bevel);
}
.sx-window > header h2 {
  margin: 0;
  color: #fff;
  font: bold 12px/1.2 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000, 0 0 4px #000;
}
/* break-word, not anywhere: table headers keep their words whole */
.sx-body { padding: 16px 20px 18px; min-width: 0; overflow-wrap: break-word; }
.sx-body blockquote > br:first-child { display: none; }
.sx-side .sx-body { padding: 14px 14px 16px; }

.sx-flash { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-left: 3px solid var(--jewel); background: rgba(0, 0, 0, 0.55); color: #fff; }

/* --- Side windows ------------------------------------------------------------ */

.sx-login { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sx-login label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 11px; }
.sx-login button { margin-top: 4px; }
.sx-login .sx-check span { display: flex; align-items: center; gap: 6px; }
.sx-hint { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.sx-player { margin: 0 0 12px; }
.sx-logout { margin: 10px 0 0; text-align: center; }
.sx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.sx-stats dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.sx-stats dd { margin: 2px 0 0; color: #fff; font-size: 15px; font-weight: bold; }
.sx-more { font-size: 11px; }
.sx-partners { text-align: center; color: var(--muted); }
.sx-partners b { font-weight: normal; }

/* --- Home --------------------------------------------------------------------- */

.sx-hero { display: flex; align-items: center; gap: 28px; padding: 26px 28px; }
.sx-hero > img { flex: none; width: 150px; height: 150px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.8)); }
.sx-hero h1 {
  margin: 0 0 4px;
  font: bold italic clamp(22px, 4vw, 32px)/1.1 var(--font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff6d8 0, #e9c97c 45%, #a7843f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #000);
}
.sx-hero .sx-edition { margin: 0 0 10px; color: #f3e3b8; font: bold italic 15px var(--font); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
/* Brass keycaps */
.sx-edition kbd {
  display: inline-block;
  margin: 0 2px;
  padding: 1px 7px 2px;
  border: 1px solid #5c4520;
  border-radius: 4px;
  background: linear-gradient(180deg, #f6e3a8 0, #c9a35a 55%, #8e6c30 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 #3d2d12, 0 3px 6px rgba(0, 0, 0, 0.6);
  color: #2b1f0b;
  font: bold 12px/1.4 var(--font);
  text-transform: none;
  font-style: normal;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.sx-hero .sx-tagline { margin: 0 0 14px; color: var(--jewel); font-size: 13px; text-shadow: 0 0 10px rgba(143, 230, 191, 0.35); }
.sx-hero p { margin: 0 0 12px; font-size: 13px; line-height: 1.7; }
.sx-hero .sx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sx-hero .sx-nostalgia { margin: 14px 0 0; color: var(--muted); font-size: 11px; }
.sx-hero .sx-nostalgia a { color: #b9b3a2; }

/* The game's screenshots, framed in brass: a strip snapping picture by picture */
.sx-shots { position: relative; margin: 0 0 18px; padding: 6px; border: 1px solid #000; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px #8c7445, 0 8px 26px rgba(0, 0, 0, 0.7); }
.sx-shots-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sx-shots-track::-webkit-scrollbar { display: none; }
.sx-shots-track:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.sx-shot { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.sx-shot img { display: block; width: 100%; height: auto; }
.sx-shot figcaption { padding: 8px 40px 2px; color: var(--muted); font-size: 11px; text-align: center; }
.sx-shots-nav {
  position: absolute; top: calc(50% - 32px); width: 34px; height: 46px; border: 1px solid #000; cursor: pointer;
  color: #1a1408; font: bold 16px var(--font);
  background: linear-gradient(180deg, #f0d48c 0, #c79f4f 50%, #8a6d36 100%);
  box-shadow: inset 0 1px 0 rgba(255, 238, 190, 0.6), 0 2px 8px rgba(0, 0, 0, 0.7);
}
.sx-shots-nav:hover { filter: brightness(1.12); }
.sx-shots-nav.prev { left: 12px; }
.sx-shots-nav.next { right: 12px; }
.sx-shots-dots { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px 0 2px; }
.sx-shots-play { width: 22px; height: 18px; margin-right: 4px; padding: 0; border: 1px solid #000; border-radius: 3px; cursor: pointer; color: var(--brass); font-size: 8px; line-height: 1; background: #1d170d; box-shadow: inset 0 0 0 1px #6d5a33; }
.sx-shots-play:hover { color: #fff; }
.sx-shots-dots a { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; background: #3a3020; box-shadow: inset 0 0 0 1px #6d5a33; }
.sx-shots-dots a[aria-current] { background: var(--jewel); box-shadow: 0 0 8px rgba(143, 230, 191, 0.6); }

.sx-pace .sx-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 0; }
.sx-pace dt { margin-bottom: 4px; color: var(--jewel); font-weight: bold; font-size: 13px; }
.sx-pace dd { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

.sx-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.sx-feature { padding: 14px 16px; border: 1px solid #000; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px #4d3f22; }
.sx-feature h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: #fff !important; }
.sx-feature p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

.sx-news-item + .sx-news-item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sx-news-item time { display: block; margin-bottom: 4px; color: var(--brass); font-size: 10px; font-weight: bold; letter-spacing: 0.08em; text-transform: uppercase; }

/* The interface choice, logged in */
.sx-choice { display: flex; align-items: center; gap: 22px; padding: 4px 0; }
.sx-choice > a { flex: none; }
.sx-choice > a img { display: block; width: 96px; height: 96px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8)); }
.sx-choice h3 { margin: 0 0 6px !important; color: var(--jewel) !important; font-size: 16px !important; text-transform: none !important; letter-spacing: 0 !important; }
.sx-choice p { margin: 0 0 12px; }
.sx-classic { margin: 16px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

/* --- The pages' old markup, restyled ------------------------------------------- */

.sx-body h1, .sx-body h2, .sx-body h3, .sx-body h4 { color: var(--brass); text-shadow: 1px 1px 0 #000; line-height: 1.3; }
.sx-body h2 { margin: 22px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.sx-body h3 { margin: 20px 0 8px; font-size: 13px; }
.sx-body > blockquote > :first-child, .sx-body > :first-child { margin-top: 0; }
.sx-body blockquote { margin: 0; }
.sx-body p { margin: 0 0 12px; }
.sx-body hr { height: 0; margin: 18px 0; border: 0; border-top: 1px solid var(--brass-dim); }
.sx-body u { text-decoration: none; }
.sx-body font[size="1"] { font-size: 11px; }
.sx-body font[size="2"] { font-size: 12px; }
.sx-body font[size="5"], .sx-body font[size="4"] { display: block; margin: 0 0 10px; color: var(--brass); font-size: 16px; font-weight: bold; text-shadow: 1px 1px 0 #000; }
/* The FAQ's questions and the rules' headings, in gray once */
.sx-body font[color="#AAAAAA" i] { color: var(--brass); font-weight: bold; }
/* Advice and the team's names, in blue once */
.sx-body font[color="#0099FF" i] { color: #9fd0ff; }
.sx-body font[color="#FFFFFF" i] { color: inherit; }
.sx-body center > img, .sx-body p > img { display: block; margin: 8px auto 14px; border: 1px solid #000; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }

/* Tables: data grids */
.sx-body table { border-collapse: collapse; margin: 6px 0; max-width: 100%; }
.sx-body td, .sx-body th { padding: 6px 10px; border: 0; vertical-align: middle; text-align: left; }
.sx-body tr + tr > td { border-top: 1px solid var(--line); }
.sx-body table.sx-grid tr:first-child > td, .sx-body th { color: var(--muted); font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(0, 0, 0, 0.3); }
.sx-scroll { overflow-x: auto; }

/* Forms */
.sx input:not([type]), .sx input[type=text], .sx input[type=email], .sx input[type=password], .sx input[type=number], .sx input[type=search], .sx select, .sx textarea {
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid #5a4a2c;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
  color: #eee;
  font: 12px var(--font);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.sx input:focus, .sx select:focus, .sx textarea:focus { outline: 1px solid var(--brass); border-color: var(--brass); }
.sx-body input[type=submit], .sx-body input[type=button], .sx-body button:not(.sx-cta):not(.sx-link) {
  min-height: 28px;
  padding: 4px 16px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #5d5d55 0, #3a3a35 50%, #2a2a26 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: var(--text);
  font: bold 11px var(--font);
  cursor: pointer;
}
.sx-body input[type=submit]:hover, .sx-body input[type=button]:hover, .sx-body button:not(.sx-cta):not(.sx-link):hover {
  background: linear-gradient(180deg, #b39553 0, #7a6131 55%, #4b3b1c 100%);
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
/* The sign-up's submit: the call to action */
.sx-body form input[type=submit].sx-cta, .sx-body .sx-signup input[type=submit] {
  height: 36px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #f0d48c 0, #c79f4f 50%, #8a6d36 100%);
  color: #1a1408;
  text-shadow: none;
}
iframe { width: 100%; border: 0; border-top: 1px solid var(--brass-dim); background: rgba(0, 0, 0, 0.3); }

.sx-intro { color: var(--muted); font-style: italic; }

/* Races, news: tabs */
.sx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.sx-tabs a { text-decoration: none; }
.sx-tabs a.current { background: linear-gradient(180deg, #b39553 0, #7a6131 55%, #4b3b1c 100%); color: #fff; text-shadow: 1px 1px 0 #000; }

/* --- Footer ----------------------------------------------------------------------- */

.sx-foot { margin-top: 18px; padding: 18px 16px 24px; text-align: center; color: var(--muted); font-size: 11px; border-top: 1px solid rgba(217, 178, 94, 0.15); background: rgba(0, 0, 0, 0.35); }
.sx-foot p { margin: 2px 0; }
.sx-foot a { color: var(--muted); }
.sx-foot a:hover { color: var(--brass); }

/* --- Ship details (the iframe of the ship list) ------------------------------------ */

body.sx-frame { margin: 0; padding: 14px 18px; background: transparent; color: var(--text); font: 12px/1.6 var(--font); }
body.sx-frame h3 { margin: 0 0 10px; color: var(--brass); }
body.sx-frame img { display: block; margin: 0 auto 10px; }

/* --- Small screens ----------------------------------------------------------------- */

@media (max-width: 900px) {
  .sx-shell { grid-template-columns: minmax(0, 1fr); }
  .sx-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 700px) {
  .sx-top { flex-wrap: wrap; gap: 8px 10px; padding: 6px 12px; }
  .sx-brand img { width: 44px; height: 44px; }
  .sx-brand b { font-size: 14px; }
  .sx-account { margin-left: auto; }
  .sx-nav { order: 3; flex-basis: 100%; justify-content: center; padding-bottom: 4px; }
  /* The menus on a row of their own, opening below the bar, full width */
  .sx-menu { position: static; }
  .sx-flyout { left: 12px; right: 12px; top: 100%; margin-top: 2px; }
  .sx-shell { padding: 16px 12px 8px; gap: 16px; }
  .sx-body { padding: 14px 14px 16px; }
  .sx-hero { flex-direction: column; text-align: center; padding: 22px 16px; gap: 14px; }
  .sx-hero > img { width: 110px; height: 110px; }
  .sx-hero .sx-actions { justify-content: center; }
  .sx-choice { flex-direction: column; text-align: center; }
  .sx-shots-nav { top: calc(50% - 26px); width: 24px; height: 34px; font-size: 12px; }
  .sx-shots-nav.prev { left: 8px; }
  .sx-shots-nav.next { right: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sx-window { animation: sx-in 0.35s ease-out both; }
  @keyframes sx-in { from { opacity: 0; transform: translateY(6px); } }
}