/* Parchment instruments for a painted, brass-and-timber universe. */
#universeLabels { position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.u-label { position:absolute; left:0; top:0; pointer-events:none; border:0; background:none; font:800 13px 'Nunito',sans-serif; text-align:center; color:#fff2cf; cursor:pointer; padding:4px 7px; filter:drop-shadow(0 2px 2px #1b1723); white-space:nowrap; }
.u-label b,.u-label small { display:block; }
.u-label b { font-size:15px; }
.u-label small { font-size:12px; color:#f5d99d; }
.u-body { padding:9px 12px; border-radius:12px; background:#201d2cdb; border:1px solid #cbb17580; box-shadow:0 3px 12px #0005; min-width:100px; }
.u-body b { font-family:'Lilita One',cursive; font-size:20px; font-weight:400; }
.u-body.locked { opacity:.7; }
.u-region { background:#3b2920b8; border:1px solid #e8c79180; border-radius:6px; padding:5px 9px; }
.u-number { color:#fff3d6; font-size:12px; min-width:25px; text-shadow:0 1px 3px #382118; }
.u-dome { display:block; margin:auto; width:32px; height:25px; background:linear-gradient(#b5dae6b0,#f3d89ed0); border:2px solid #63482e; border-radius:22px 22px 5px 5px; font:24px/24px 'Lilita One',cursive; color:#b16435; }
.u-settler b { border-radius:5px; border:1px solid #67422c; padding:2px 5px; margin-top:1px; color:#3e281b; background:#ffe8af; font-size:12px; }
#universeHeader { position:fixed; top:max(18px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:12; color:#f7e6c1; text-align:center; }
#universeHeader>div { background:#292333df; border:1px solid #c7a365; border-radius:12px; padding:12px 24px; min-width:255px; box-shadow:0 5px 25px #0003; }
#universeHeader b { display:block; font:28px/1.1 'Lilita One',cursive; }
#universeHeader small { display:block; color:#e3c794; font-size:12px; margin-top:4px; }
#uBack { border:1px solid #c7a36580; border-radius:20px; background:#292333; color:#f7d68d; font:800 12px 'Nunito',sans-serif; cursor:pointer; padding:7px 14px; min-height:36px; }
body.offworld { background:radial-gradient(ellipse at 30% 35%,#353044,#181b2a 65%,#111723); }
.offworld #gameboard,.offworld #hud,.offworld #event,.offworld #eventlog,.offworld #worldInfo,.offworld #evdock,.offworld #call,.offworld #sampleBadge { display:none!important; }
.offworld #logo { opacity:.75; }
#universeAtlas { z-index:25; max-height:calc(100dvh - 160px); overflow:auto; padding:26px 20px; width:min(460px,calc(100vw - 24px)); }
#universeAtlas .pw-ribbon { font-size:21px; margin-top:10px; }
.u-intro { font-size:14px; line-height:1.5; color:#775d3b; margin:14px 0; }
.u-worlds { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 16px; }
.u-worlds button { font:25px/1.3 'Nunito',sans-serif; color:#4c321c; background:#f2dfb5; border:2px solid #bb9860; border-radius:10px; padding:12px 4px; cursor:pointer; }
.u-worlds button.on { background:#ffecaf; border-color:#9a622e; box-shadow:inset 0 0 0 2px #fff4ca; }
.u-worlds b { display:block; font:18px 'Lilita One',cursive; }
.u-worlds small { display:block; font:800 12px 'Nunito',sans-serif; }
.u-soon { font-size:13px; line-height:1.5; color:#7b6749; margin:20px 0; }
.u-soon small { font-size:12px; }
.u-regions h3 { font:22px 'Lilita One',cursive; margin:22px 0 8px; }
.u-regions section { display:flex; flex-direction:column; }
.u-regions button { background:none; color:#523b27; border:0; border-bottom:1px solid #c8ae7c70; padding:12px 2px; text-align:left; cursor:pointer; font:800 14px 'Nunito',sans-serif; min-height:48px; }
.u-regions button small { display:block; margin-top:2px; color:#88704e; font-size:12px; }
#plotCard { z-index:24; width:min(430px,calc(100vw - 24px)); padding:25px 22px; }
#plotCard h2 { font:29px/1.1 'Lilita One',cursive; margin:8px 20px 6px 0; color:#583921; }
.u-code { color:#8e7045; letter-spacing:2px; font:700 12px monospace; }
.u-coords { color:#88704e; font-size:12px; margin:6px 0 14px; }
.u-state { color:#65472c; font-weight:900; font-size:16px; }
#uPlotComment { display:block; padding:14px; border:1px dashed #b59560; border-radius:8px; background:#f3e6c8; color:#633f25; overflow-wrap:anywhere; font:800 14px 'Nunito',sans-serif; }
.u-fine { font-size:12px; color:#8e7651; line-height:1.5; }
#plotCard .actions { gap:6px; flex-wrap:wrap; }
#plotCard .pw-btn { font-size:12px; min-height:42px; padding:9px 12px; }
#uRegionCard { position:fixed; left:50%; transform:translateX(-50%); bottom:145px; z-index:9; padding:12px 30px 12px 16px; max-width:calc(100vw - 28px); width:max-content; color:#684722; }
#uRegionCard b,#uRegionCard small { display:block; }
#uRegionCard b { font-size:13px; } #uRegionCard small { font-size:12px; margin-top:4px; }
#uRegionClose { position:absolute; right:5px; top:5px; border:0; background:transparent; font-size:18px; color:inherit; cursor:pointer; }

#uNotice { position:fixed; top:185px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 24px); z-index:40; background:#fff0cc; border-radius:8px; box-shadow:0 2px 12px #0004; color:#5a3e27; display:flex; font-size:13px; }
#uNotice:has(#uStatus[hidden]) { display:none; } #uStatus { padding:12px; } #uDismissStatus { border:0; color:inherit; background:none; font-size:22px; padding:8px; }
.u-label:focus-visible,#uBack:focus-visible,.u-worlds button:focus-visible,.u-regions button:focus-visible { outline:3px solid #ffd56d; outline-offset:3px; }
@media(max-width:700px) {
  .universe-enabled #dock { gap:5px; } .universe-enabled #dock .pw-btn { min-width:45px; padding-left:8px; padding-right:8px; } .universe-enabled #dock .pw-btn small { font-size:12px; }
  #universeHeader { top:max(42px,env(safe-area-inset-top)); } #universeHeader>div { min-width:230px; padding:10px 16px; } #universeHeader b { font-size:25px; }
  .offworld #logo { top:12px; left:14px; transform:scale(.75); transform-origin:top left; }
  .offworld #search { top:165px; }
  #universeAtlas,#plotCard { left:12px; right:12px; bottom:104px; transform:none; width:auto; max-height:calc(100dvh - 160px); }
  #uRegionCard { bottom:160px; }
}
@media(prefers-reduced-motion:reduce) { .u-label { transition:none; } }
.offworld #credit { display:none; }
#universeHeader small { font:800 12px/1.5 'Nunito',sans-serif; white-space:nowrap; }
@media(max-width:700px) {
 .u-body { min-width:110px; max-width:140px; padding:7px 8px; }
 .u-body b { font-size:17px; }.u-body small { font-size:12px; }
 #universeHeader>div { box-sizing:content-box; }
}
#uCredit { position:fixed; z-index:8; right:12px; bottom:100px; color:#f7d68d; background:#292333; padding:3px 6px; border-radius:4px; font:700 12px 'Nunito',sans-serif; text-decoration:none; }
@media(min-width:701px) { #uCredit { bottom:12px; } }
#plotCard { overflow-y:auto; overscroll-behavior:contain; }
.u-state { overflow-wrap:anywhere; }
#universeAtlas:focus,#plotCard:focus { outline:none; }
#uRegionClose { width:32px; height:32px; line-height:1; }
#universeConnections { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
#universeConnections line { stroke:#d4b885; stroke-width:.8; opacity:.35; }
@media(min-width:701px) {
 #universeAtlas { left:24px; top:96px; max-height:calc(100dvh - 220px); }
 #plotCard { right:24px; top:108px; max-height:calc(100dvh - 220px); }
}
@media(max-width:700px) { #universeAtlas,#plotCard { top:auto; } }
@media(max-width:360px) {
 .universe-enabled #dock { gap:3px; padding-left:6px; padding-right:6px; }
 .universe-enabled #dock .pw-btn { min-width:42px; padding-left:6px; padding-right:6px; }
 .universe-enabled #dock .pw-btn small { font-size:12px; }
}
@media(max-height:500px) and (orientation:landscape) {
 #universeHeader { left:72px; top:8px; transform:none; }
 #universeHeader:not([hidden]) { display:flex; align-items:center; }
 #universeHeader>div { min-width:200px; padding:7px 12px; }
 #universeHeader b { font-size:22px; }
 #universeHeader small { font-size:12px; }
 .offworld #logo { left:12px; top:10px; transform:scale(.75); transform-origin:top left; }
 .offworld #logo span { display:none; }
 .offworld #search { left:auto; right:12px; top:10px; width:300px; }

 #universeAtlas,#plotCard { top:82px; bottom:104px; max-height:calc(100dvh - 186px); width:380px; }
 #universeAtlas { left:12px; right:auto; }
 #plotCard { left:auto; right:12px; }
 .u-body { min-width:100px; max-width:140px; padding:4px 6px; }
 .u-body b { font-size:15px; }.u-body small { font-size:12px; }
 body.system-view #uCredit { top:72px; bottom:auto; }
}
@media(max-height:500px) and (orientation:landscape) and (max-width:700px) {
 #universeHeader:not([hidden]) { display:block; }
 #universeHeader>div { padding:4px 8px; }
 #universeHeader b { font-size:20px; }
 #universeHeader small { line-height:1.2; }
 #uBack { min-height:32px; padding:4px 10px; }
 .offworld #search { width:calc(100vw - 322px); }

}
.u-settler b { max-width:160px; overflow:hidden; text-overflow:ellipsis; }

/* Country crests share Pin World's parchment, ink and gold. */
.u-country { background:var(--pw-parch); color:var(--pw-ink); border:2px solid var(--pw-ink); border-radius:9px; padding:5px 9px; box-shadow:0 3px 0 var(--pw-gold-dark); filter:none; }
.u-country b { font:400 15px/1.2 var(--pw-game); }
.u-country small { font:800 12px/1.3 var(--pw-body); color:var(--pw-ink-soft); }

/* The same five actions in every world; the atlas floats above the bar. */
.universe-enabled #dock { z-index:20; }
.offworld #dock { display:flex; }
#worldsBtn { position:fixed; right:16px; bottom:calc(max(22px,env(safe-area-inset-bottom)) + 122px); z-index:21; width:64px; height:64px; padding:4px; border-radius:50%; flex-direction:column; gap:1px; }
#worldsBtn span { font-size:25px; line-height:1; }
#worldsBtn small { font:400 12px var(--pw-game); }
#worldsBtn[hidden],body.daily-on #worldsBtn { display:none; }
#worldsBtn[aria-busy="true"] { outline:2px solid var(--pw-gold); }
#worldsBtn:focus-visible,#uCopy:focus-visible,#uInstagram:focus-visible,#uRaceCard summary:focus-visible { outline:3px solid var(--pw-blue-dark); outline-offset:2px; }
#universeMenu { z-index:24; left:24px; top:96px; width:min(430px,calc(100vw - 48px)); max-height:calc(100dvh - 220px); overflow:auto; }
#uMenuRows button { display:block; width:100%; }
#uMenuClose { min-width:44px; min-height:44px; }
#uMission { display:inline-block; max-width:100%; box-sizing:border-box; margin-top:6px; padding:3px 7px; border:1px solid #c7a36580; border-radius:8px; color:#ffe680; background:#19172380; font:800 12px/1.3 var(--pw-body); font-variant-numeric:tabular-nums; }
#uMission #uMissionTitle,#uMission #uMissionNext { font:inherit; overflow-wrap:anywhere; }
#uMissionTitle[hidden] { display:none; }
#uRaceCard { position:fixed; z-index:10; bottom:100px; left:16px; width:310px; box-sizing:border-box; padding:0 12px 10px; border:2px solid var(--pw-ink); border-radius:16px; background:var(--pw-parch); color:var(--pw-ink); box-shadow:var(--pw-lift-sm); font:800 12px/1.35 var(--pw-body); }
#uMission[hidden],#uRaceCard[hidden] { display:none; }
#uRaceCard summary { min-height:44px; display:flex; justify-content:space-between; align-items:center; gap:8px; cursor:pointer; }
#uRaceCard summary::after { content:'⌃'; } #uRaceCard[open] summary::after { content:'⌄'; }
#uRaceCard summary b { font:400 18px var(--pw-game); } #uRaceTime { font-variant-numeric:tabular-nums; }
#uRaceCard p { margin:0 0 7px; color:var(--pw-ink-soft); }
#uRaceTop { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#uRaceTop li { min-width:0; padding:5px; border-radius:6px; background:var(--pw-parch-2); }
#uRaceTop span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #uRaceTop b { font:400 17px var(--pw-game); }
#uRaceTop li:nth-child(n+4) { display:none; }
#uRaceCard[open] #uRaceTop { display:block; max-height:180px; overflow:auto; overscroll-behavior:contain; }
#uRaceCard[open] #uRaceTop li { display:flex; justify-content:space-between; gap:12px; margin-bottom:4px; }
#uRaceStatus { display:block; font-size:12px; color:var(--pw-ink-soft); margin-top:7px; }
#uBack { min-height:44px; }
.u-label { box-sizing:border-box; min-height:44px; min-width:44px; }
.u-country { max-width:240px; min-height:48px; }
.u-country b { overflow:hidden; text-overflow:ellipsis; }
.u-country-name { margin:4px 44px 10px 0; font:900 14px var(--pw-body); color:var(--pw-ink); }
#plotCard .pw-btn { min-height:48px; font-size:16px; line-height:1.2; }
#plotCard .actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
#uPlotHow,#uPlotVerify,#uCopyStatus,.u-fine,.u-coords,.u-code { color:var(--pw-ink-soft); font-size:12px; }
#uCopyStatus:empty { display:none; }
#uPlotVerify { font-weight:900; }
#uPlotComment { user-select:text; -webkit-user-select:text; }
#uRegionClose,#uDismissStatus,#uAtlasClose,#uPlotClose { min-width:44px; min-height:44px; }
body:has(#plotCard:not([hidden])) #uRaceCard { display:none; }
body:has(#uRaceCard[open]) #uCredit { display:none; }
@media(max-width:700px) {
  .universe-enabled #dock { gap:2px; padding-left:6px; padding-right:6px; }
  .universe-enabled #dock .pw-btn { flex:1; min-width:44px; min-height:48px; padding-left:1px; padding-right:1px; }
  .universe-enabled #dock .pw-btn small { font-size:12px; letter-spacing:0; }
  .universe-enabled .sheet { z-index:24; }
  #universeHeader { top:max(12px,env(safe-area-inset-top)); left:64px; right:12px; transform:none; display:flex; align-items:center; gap:6px; }
  #universeHeader[hidden] { display:none; }
  #universeHeader>div { order:-1; flex:1; min-width:0; padding:7px 9px; text-align:left; }
  #universeHeader b { font-size:25px; } #universeHeader small { white-space:normal; line-height:1.25; }
  #uBack { width:92px; flex:none; padding:6px; }
  .offworld #search { top:max(124px,calc(env(safe-area-inset-top) + 112px)); }
  #uRaceCard { left:12px; right:12px; width:auto; bottom:calc(max(10px,env(safe-area-inset-bottom)) + 78px); }
  #worldsBtn { right:12px; bottom:calc(max(10px,env(safe-area-inset-bottom)) + 88px); }
  #uRaceCard { right:88px; }
  .universe-enabled #evdock { max-width:calc(100vw - 100px); }
  .universe-enabled #evdock:not(.closed) { right:88px; }
  #uCredit { right:88px; bottom:calc(max(10px,env(safe-area-inset-bottom)) + 142px); padding:1px 5px; }
  #plotCard,#universeAtlas,#universeMenu { left:12px; right:12px; top:auto; bottom:calc(max(10px,env(safe-area-inset-bottom)) + 78px); width:auto; max-height:calc(100dvh - 246px - env(safe-area-inset-bottom)); padding:18px 16px; border-radius:22px; border-bottom:3px solid var(--pw-ink); }
  #plotCard h2 { font-size:25px; } #plotCard .u-state { font-size:14px; margin:8px 0; }
  #plotCard .u-coords { margin-bottom:8px; }
  #uShare { min-height:44px; }
  #uRegionCard { bottom:calc(max(10px,env(safe-area-inset-bottom)) + 254px); }

  #uNotice { top:auto; bottom:calc(max(10px,env(safe-area-inset-bottom)) + 80px); }
}
@media(max-height:500px) and (orientation:landscape) {
  #uMission { margin-top:3px; padding:1px 5px; }
  #uRaceCard { display:none; }
  #plotCard,#universeAtlas,#universeMenu { top:82px; bottom:90px; max-height:calc(100dvh - 172px); width:min(380px,calc(100vw - 24px)); }
  .offworld #search { top:10px; }
  #uCredit { display:none; }
}
/* Let wrapped counts/status grow the title instead of overlapping search. */
@media(max-width:760px) and (max-height:500px) and (orientation:landscape) {
  .offworld #universeHeader { right:calc(max(12px,env(safe-area-inset-right)) + 62px); }
  .offworld #search { right:calc(max(12px,env(safe-area-inset-right)) + 62px); width:calc(100vw - 384px); }
}
@media(max-width:700px) and (orientation:portrait) {
  .offworld #worldTop { position:fixed; z-index:12; top:max(12px,env(safe-area-inset-top)); left:64px; right:calc(max(12px,env(safe-area-inset-right)) + 62px); display:flex; flex-direction:column; gap:14px; }
  .offworld #universeHeader { position:static; transform:none; }
  .offworld #search { position:relative; inset:auto; width:auto; }
}
@media(prefers-reduced-motion:reduce) {
  .universe-enabled *, .universe-enabled *::before, .universe-enabled *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* QA fixes. Solar-system labels wrap inside the width the layout reserves for them. */
.u-body { max-width:190px; box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; }
.u-body b { white-space:nowrap; }
.u-body small { line-height:1.25; }
#uInstagram[hidden] { display:none; }
@media(max-width:700px) {
  .u-body { width:144px; max-width:144px; min-width:0; }
  /* The title sits left of the 44 px close button, never under it. */
  #universeAtlas .pw-ribbon { margin-right:48px; font-size:17px; line-height:1.15; white-space:normal; padding-left:14px; padding-right:14px; }
  /* Keep the Worlds button (64 px, right) reachable while a plot card is open. */
  #plotCard { right:calc(12px + 64px + 12px); }
}