@font-face {
  font-family: 'Liberation Sans';
  src: url('../assets/fonts/LiberationSans.ttf') format('truetype');
}
:root { --bg: #ffffff; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
html, body { background: #e8e8e8; }
#stage { position: fixed; top: 0; bottom: 0; left: 0; width: 100%; overflow: hidden; background: #ffffff; box-shadow: 0 0 24px rgba(0,0,0,0.15); }
.go { position: absolute; box-sizing: border-box; pointer-events: none; }
.go.raycast { pointer-events: auto; }
.slider-input, .dropdown-select { pointer-events: auto; }
.go.inactive { display: none !important; }
.canvas { overflow: hidden; }
.text { display: flex; line-height: 1.15; overflow: visible; }
.text > .tmp { display: block; max-width: 100%; }
.selectable { cursor: pointer; }
.selectable.disabled { cursor: default; }
.scrollrect { pointer-events: auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.slider-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.dropdown-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; font-size: 16px; }

/* ---------- Wide screens: original browser-game layout (left / middle / right columns), artifacts below ---------- */
#stage.wide [data-name="Draggable Area"] { width: 100% !important; height: auto !important; padding-left: 4px; }
#stage.wide [data-name="Columns"] {
  flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important;
  width: 940px !important; height: auto !important; gap: 0 12px !important;
}
#stage.wide [data-name="Column 1"], #stage.wide [data-name="Column 2"] { width: 290px !important; }
#stage.wide [data-name="Column 3"] { width: 320px !important; }
#stage.wide [data-name="Column 4"] { flex: 0 0 100% !important; width: 100% !important; margin-top: 12px; }
/* artifacts: one horizontal row per category instead of the iOS 5-per-row grid */
#stage.wide [data-name="ArtifactsInGame"] {
  position: relative !important; left: 0 !important; top: 0 !important; transform: none !important;
  width: 922px !important; height: auto !important; padding-bottom: 30px;
}
#stage.wide [data-name="ArtifactsInGame"] > [data-name="Panel"] {
  position: relative !important; inset: auto !important; width: 100% !important; height: auto !important;
}
#stage.wide [data-name="ArtifactsInGame"] [data-name="ActiveContainer"],
#stage.wide [data-name="ArtifactsInGame"] [data-name^="InactiveContainer"] {
  position: relative !important; inset: auto !important; transform: none !important;
  grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: 48px !important;
  justify-content: start !important; width: 100% !important; height: 56px !important;
  overflow-x: auto; overflow-y: hidden;
}
#stage.wide [data-name="ArtifactsInGame"] > [data-name="BUTTON (1)"] {
  top: auto !important; bottom: 6px !important; left: 8px !important; transform: none !important;
}
#stage.wide [data-name="ArtifactsInGame"] > [data-name="BUTTON (2)"] {
  left: auto !important; right: 8px !important; top: 6px !important; transform: none !important;
}
/* prestige map overlay (designed as a 300-unit portrait panel): span the full width on wide screens */
#stage.wide [data-name="PrestigeOverlay"] { left: 0 !important; width: 100% !important; transform: translate(0, -50%) !important; overflow: hidden; }
#stage.wide [data-name="PrestigeOverlay"] > [data-name="bg"],
#stage.wide [data-name="PrestigeOverlay"] > [data-name="topline"] { left: 0 !important; width: 100% !important; transform: translate(0, -50%) !important; }
#stage.wide [data-name="PrestigeOverlay"] > [data-name="PrestigeMap"] { margin-left: calc(150px - 50%); }

/* section headings: the rule (a row of underscores, as in the iOS app) sits a few px below the heading text and ends
   at the column edge, like the original web game's heading border */
[data-name="UNDERLINE"] { margin-top: 5px; overflow: hidden; }

/* Button states like the original web game: hover = lighter border, pressed = inverted dark gradient */
.btn-sprite.sel-hover.has-outline { box-shadow: 0 0 0 1px #898989 !important; }
.btn-sprite.sel-pressed {
  border-color: transparent !important; border-image: none !important; filter: none !important;
  background: linear-gradient(#595959, #d9d9d9) !important;
}
.btn-sprite.sel-pressed .text { color: #444444 !important; }
/* project cards (plain boxes), like the original's .projectButton */
.btn-plain.sel-hover.has-outline { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) !important; }
.btn-plain.sel-pressed { background-color: #d1d1d1 !important; }
.btn-sprite { border-radius: 2px; }