/* The two worlds, side by side, on the front door.

Galactic Dominion is the empire you build on your own; the Plaza is the world
other people are already standing in. Both are live frames rather than
screenshots, because a picture of a game proves nothing and the whole point of
this page is that the place is running right now.

Each pane keeps its own header, so the two controls that matter are always in
view: Expand, which fills the window without leaving the page, and the pane's
real front door. Galactic Dominion used to run full-bleed across the viewport
and size itself from its own content; inside a pane it needs a fixed well
instead, which is why so much of this sheet is undoing that. */

.palaceWorlds{
  /* The well is measured off the window rather than given a share of it, so
  the two worlds finish at the fold instead of being cut in half by it. The
  300px is everything above and below them that is not galaxy: the top bar,
  the game dock, this block's own margin, one pane header, and a little air
  under the rounded corner. */
  --palace-pane-h:clamp(430px,calc(100svh - 300px),900px);
  /* This block is the reason the page exists, so it starts where the dock
  ends rather than a full section below it. */
  margin-top:14px;
  /* And it takes back most of the shell's side padding, which at this width
  is 44px of empty page either side of two running games. 18px is enough to
  keep the rounded corners off the edge of the window. */
  margin-inline:calc(18px - clamp(16px,3vw,44px));
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
.palaceWorlds .section{margin-top:0}

.palacePane{
  margin:0;
  min-width:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:18px;
  background:#0a0f1a;
  overflow:hidden;
  scroll-margin-top:24px;
}

/* The header names the world and carries its two doors; every pixel it takes
is a pixel of the world it is naming, so it is kept to one line of each. */
.palacePaneHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0));
}
.palacePaneKicker{
  display:block;
  font-size:9px;font-weight:900;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
}
.palacePaneHead h2{
  margin:3px 0 0;
  font-size:clamp(18px,1.55vw,24px);
  letter-spacing:-.04em;
  line-height:1.02;
}
.palacePaneActions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.palacePaneActions button,
.palacePaneActions a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:#dde4f0;
  font:900 11.5px/1 inherit;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.palacePaneActions a{
  border-color:rgba(255,202,99,.5);
  background:rgba(255,202,99,.1);
  color:#ffe6b4;
}
.palacePaneActions button:hover,.palacePaneActions button:focus-visible,
.palacePaneActions a:hover,.palacePaneActions a:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.1);
}
.palacePaneActions a:hover,.palacePaneActions a:focus-visible{
  border-color:var(--gold);
  background:rgba(255,202,99,.18);
}

/* The frame wells. Both panes hold the same shape so the two headers line up
and neither world looks like the junior partner. */
.palaceWorlds #codex-empires .ce-universe,
.palaceWorlds .palacePlazaView{
  position:relative;
  flex:0 0 auto;
  width:100%;
  height:var(--palace-pane-h);
  margin:0;
  background:#050914;
  overflow:hidden;
}
.palaceWorlds #codex-empires #ce-galaxy-frame,
.palaceWorlds #palace-plaza-frame{
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  border:0;
}

/* The command console floats over the galaxy. In a half-width pane it has to
stay inside the well rather than run past the bottom of the page. */
.palaceWorlds #codex-empires .ce-console{
  top:14px;
  right:14px;
  bottom:14px;
  width:min(430px,calc(100% - 28px));
  height:auto;
  max-height:none;
}
.palaceWorlds #ce-command-status{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:12;
  padding:7px 15px;
  background:rgba(5,9,20,.86);
}

/* Expand fills the window in place. This is a CSS overlay rather than the
Fullscreen API on purpose: the pane keeps its own header, so Collapse and the
world's real front door stay one click away instead of disappearing behind a
browser gesture, and every browser behaves the same way. */
body.palaceExpanded{overflow:hidden}
.palacePane.isExpanded{
  position:fixed;
  inset:0;
  z-index:80;
  margin:0;
  border:0;
  border-radius:0;
  background:#050914;
}
/* Both wells are sized through an id above, so the expanded state has to
carry one too or the pane grows and the frame inside it does not. */
.palaceWorlds #codex-empires.isExpanded .ce-universe,
.palaceWorlds #palace-plaza.isExpanded .palacePlazaView{
  flex:1 1 auto;
  height:auto;
  min-height:0;
}

/* The Plaza door in the top bar. The page it opens is the house's other half,
so it reads as a doorway rather than as one more link in the row. */
.navplaza{
  /* Two flex items, so the wording carries its own gap: the whitespace between
  "Enter the" and "Plaza" in the markup is not laid out here. */
  display:inline-flex;align-items:center;gap:.32em;
  padding:9px 13px;
  border:1px solid rgba(255,202,99,.45);
  border-radius:11px;
  background:rgba(255,202,99,.08);
  color:#ffe6b4;
  font-weight:900;
  white-space:nowrap;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.navplaza:hover,.navplaza:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,202,99,.85);
  background:rgba(255,202,99,.15);
  color:#fff3d8;
}

/* The Codex door. It sat between two bordered doors as bare gold text, which
read as a caption rather than as somewhere you can go. Same pill as its
neighbours, one shade quieter, because the Plaza and the Shop are where the
row wants you first. It still disappears below 1119px, where the row is full. */
.navcodex{
  display:inline-flex;align-items:center;
  padding:9px 12px;
  border:1px solid rgba(255,202,99,.32);
  border-radius:11px;
  background:rgba(255,202,99,.06);
  color:#ffe6b4;
  white-space:nowrap;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.navcodex:hover,.navcodex:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,202,99,.8);
  background:rgba(255,202,99,.14);
  color:#fff3d8;
}
/* social-front.css already retires this door where the row runs out of room,
but it says so with `display:none` on the same selector in an earlier sheet,
which the rule above would otherwise outrank and put back. Restated here so
giving the Codex a box cannot smuggle it into a bar that cannot hold it. */
@media(max-width:1119px){.navcodex{display:none}}

/* The Shop door. Same shape as the Plaza's chip in its own top bar, so the two
houses read as one, and it carries the balance because the number is the reason
to press it. On a phone the wording goes and the bag stays: the bar is tight,
but this is the only door on the page that leads anywhere money happens. */
.navshop{
  display:inline-flex;align-items:center;gap:.4em;
  padding:9px 12px;
  border:1px solid rgba(255,202,99,.4);
  border-radius:11px;
  background:rgba(255,202,99,.07);
  color:#ffe6b4;
  font-weight:900;
  white-space:nowrap;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.navshop:hover,.navshop:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,202,99,.85);
  background:rgba(255,202,99,.14);
  color:#fff3d8;
}
.navshopIcon{font-size:15px;line-height:1}

@media(max-width:1080px){
  /* Narrow enough that the row needs the wording back, wide enough that the
  door itself still fits. The Shop keeps its number here; it is the reason to
  press it. */
  .navplazaLong{display:none}
  .nav{gap:10px}
}
@media(max-width:980px){
  /* The tightest band on the page: the name is still spelled out, the passport
  chip is at its widest, and five doors are asking for the same row. The Shop
  drops to its bag and the name gives back the rest, rather than any door
  disappearing. */
  .navshopGold{display:none}
  .navshop{gap:0;padding:8px 10px}
  .brandName,
  .brand>span:not(.brandLockup):not(.brandCopy){font-size:15px}
  .brandCopy>span:first-child{font-size:15px}
}
@media(max-width:767px){
  /* Below this the spelled-out name and five doors cannot share a row at any
  size that keeps them all legible, so the mark carries the brand on its own,
  which is what the phone layout has always done. */
  .topbar .brandLockup{display:none}
}
@media(max-width:980px){
  .palaceWorlds{grid-template-columns:1fr;margin-inline:0;--palace-pane-h:clamp(400px,58svh,620px)}
}
@media(max-width:620px){
  /* Four doors and only a few pixels of slack at 360px. The row is tightened
  rather than any of them dropped, because the Shop is the only one that leads
  where money happens and the others were already here. */
  .nav{gap:4px}
  .navshop{padding:7px 8px;gap:0}
  .navshopGold{display:none}
  .palaceWorlds{margin-top:18px;gap:12px;--palace-pane-h:clamp(360px,54svh,520px)}
  .palacePaneHead{padding:9px 13px;gap:10px}
  .palacePaneActions button,.palacePaneActions a{padding:8px 10px;font-size:11px}
  .palaceWorlds #codex-empires .ce-console{top:10px;right:10px;bottom:10px;width:calc(100% - 20px)}
  /* The phone top bar is already full: the passport chip, the Social Commons
  icon, and Browse Games leave about four pixels of slack at 360px before this
  door is even considered. So the phone reaches the Plaza through its pane
  below, which is stacked full width with its own entrance, rather than
  through a fifth pill that would only fit by shrinking somebody else's. */
  .navplaza{display:none}
}
@media(max-width:400px){
  /* At 320px four doors genuinely do not fit, and they fit here before the Shop
  was one of them. Rather than drop a door or let the whole page scroll
  sideways, the bar itself scrolls: every door stays reachable and the page
  stays put. Above 360px nothing scrolls, because nothing has to. */
  .nav{min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
  .nav::-webkit-scrollbar{display:none}
  .nav>*{flex:0 0 auto}
  /* Quick Play came back to the front door in two columns, which is right down
  to about 360px and is 20px too wide below that. One column here. */
  .quickGrid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .palacePaneActions button,.palacePaneActions a,.navplaza,.navcodex{transition:none}
}