* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f5f5f7;
  color: #1d1d1f;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Safety net: nothing should ever be wider than the viewport, but a flex
     row that forgets to wrap (the topbar once did) pushes the whole page
     into horizontal scroll on mobile otherwise. */
  overflow-x: hidden;
}

header {
  background: #1d1d1f;
  color: white;
  padding: 2rem;
  text-align: center;
  position: relative;
}

.backLink {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  color: #a1a1a6;
  text-decoration: none;
  font-size: 0.85rem;
}

.backLink:hover {
  color: white;
}

.reportLink {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  max-width: 40vw;
  text-align: right;
  color: #a1a1a6;
  text-decoration: none;
  font-size: 0.85rem;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

.reportLink:hover {
  color: white;
}

.langSwitcher {
  position: absolute;
  top: 1.15rem;
  right: 6.5rem;
}

.langSwitcherBtn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2c2c2e;
  border: 1px solid #48484a;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.langSwitcherBtn:hover {
  border-color: #6e6e73;
}

.langSwitcherBtn svg,
.langSwitcherList li svg {
  width: 100%;
  height: 100%;
  display: block;
}

.langSwitcherList:not([hidden]) {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: #2c2c2e;
  border: 1px solid #48484a;
  border-radius: 6px;
  z-index: 20;
}

.langSwitcherList li {
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
}

.langSwitcherList li:hover,
.langSwitcherList li.active {
  border-color: #6e6e73;
}

@media (max-width: 600px) {
  /* backLink and reportLink already claim the header's top-left/top-right
     corners on mobile — rather than fight them for the same cramped
     corner, the switcher drops out of absolute positioning entirely and
     sits centered on its own line above the rest of the header content. */
  .langSwitcher {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    justify-content: center;
    margin: 0 auto 0.5rem;
    width: fit-content;
  }
}

/* :not([hidden]) so this rule never fights the hidden attribute's own
   display:none — same class of bug the countBadge rule above already
   guards against (a plain .reportPanel { display: flex } would win over
   the browser's built-in [hidden] rule and stay visible regardless, which
   is exactly what made the panel un-closable). */
.reportPanel:not([hidden]) {
  position: fixed;
  top: 4.5rem;
  right: 1.25rem;
  width: 320px;
  max-width: calc(100vw - 2rem);
  max-height: 75vh;
  overflow-y: auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  padding: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.reportPanel.reportDropActive {
  outline: 2px dashed #0071e3;
  outline-offset: -2px;
  background: #f0f7ff;
}

.reportPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reportPanelHeader h3 {
  margin: 0;
  font-size: 1rem;
}

.reportCloseBtn {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: #6e6e73;
  padding: 0;
  margin: 0;
}

.reportCloseBtn:hover {
  color: #1d1d1f;
}

.reportField {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: #6e6e73;
}

.reportField select,
.reportField textarea {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem;
  border: 1px solid #d2d2d7;
  border-radius: 6px;
  color: #1d1d1f;
}

.reportField textarea {
  resize: vertical;
}

/* The native <input type="file"> button/label text ("Choose File" /
   "No file chosen") is rendered by the browser using the browser/OS
   locale, not the page's own language setting — so it can't be made to
   follow the app's i18n system. Instead the native input is visually
   hidden and a fully app-controlled button + filename text drive it. */
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reportScreenshotPicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.reportScreenshotFileName {
  font-size: 0.85rem;
  color: #6e6e73;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same :not([hidden]) fix as gameArea/reportPanel above. */
.reportScreenshotPreview:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reportScreenshotPreview img {
  max-width: 100px;
  max-height: 70px;
  border-radius: 6px;
  border: 1px solid #d2d2d7;
  object-fit: cover;
}

#reportSubmitBtn {
  margin-top: 0.2rem;
}

/* Below this width the small top-right card would either clip off-screen
   or cover too much of the game to see what you're reporting — so it
   pins to the top of the screen (right under the Report button) capped
   at half the viewport height instead, leaving the lower half of the
   screen visible behind it so you can still look at whatever you're
   reporting while writing. */
@media (max-width: 640px) {
  /* :not([hidden]) to match the base rule's specificity — a plain
     .reportPanel here (0,1,0) loses the cascade to
     .reportPanel:not([hidden]) above (0,2,0) regardless of the media
     query, so mobile visitors were silently getting the desktop
     top:4.5rem/75vh layout instead of this override. */
  .reportPanel:not([hidden]) {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 50vh;
    border-radius: 0 0 16px 16px;
  }
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
}

#authSection {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 360px;
}

/* :not([hidden]) — same bug as countBadge/versionOverlay elsewhere in this
   file: a plain #gameArea { display: flex } beats the browser's built-in
   [hidden] rule regardless of specificity (author styles always win over
   the user-agent stylesheet), so the topbar and tab nav were rendering
   even while logged out, above the "Log in" card. */
#gameArea:not([hidden]) {
  width: 100%;
  /* Wide enough that the Stocks table (12+ columns, including a sparkline
     and multiple action buttons) fits without triggering .tableScroll's
     horizontal scrollbar on a typical desktop viewport — it was clipping
     well before running out of real screen width at the old 1100px cap. */
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tableScroll {
  overflow-x: auto;
}

.topbar {
  background: white;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* Fallback for browsers that don't support flexbox gap (some embedded/TV
   browsers ship a Chromium old enough to lack it) -- gap silently does
   nothing there, leaving every stat flush against the next with no space
   between them. @supports scopes this to only where it's actually needed,
   so modern browsers (where gap already works) don't get spacing twice. */
@supports not (gap: 1rem) {
  .topbar > * + * {
    margin-left: 1.5rem;
  }
}

.stat {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}

.stat .label {
  font-size: 0.7rem;
  color: #6e6e73;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.topbar button {
  margin-left: auto;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tabBtn {
  background: white;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 0;
}

.tabBtn:hover {
  background: #f0f0f2;
}

.tabBtn.active {
  background: #0071e3;
  color: white;
  border-color: #0071e3;
}

/* :not([hidden]) so this rule never fights the hidden attribute's own
   display:none — a plain .countBadge { display: inline-block } would win
   over the browser's built-in [hidden] rule and show the badge regardless
   (same class of bug the versionOverlay rule below already guards against;
   this one just showed up as the Inventory badge staying visible at 0). */
.countBadge:not([hidden]) {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #d70015;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
}

.tabBtn.active .countBadge {
  background: rgba(255, 255, 255, 0.3);
}

/* Inventory's count is just informational (how full your inventory is),
   not a warning like Flip Market's outbid count — so it uses the site's
   blue accent (the same blue the tab itself turns when active) instead of
   the shared badge's red. */
#inventoryCountBadge:not([hidden]) {
  background: #0071e3;
}

.tabPanel {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.tabPanel h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
}

.inlineForm {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.inlineForm input {
  padding: 0.5rem;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  font-size: 0.95rem;
  width: 10rem;
}

.inlineForm button {
  margin-top: 0;
}

.tabPanel h2 {
  margin-top: 0;
}

.tabPanel h2.tabTitleRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.refreshTimer {
  margin-left: 0.75rem;
  font-size: 0.85rem;
  font-weight: normal;
  color: #6e6e73;
}

.refreshTimer strong {
  color: #1d1d1f;
}

.stocksSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: normal;
  color: #6e6e73;
}

.stocksSummary strong {
  color: #1d1d1f;
}

/* Higher specificity than the plain .gain/.loss rules (element+class vs
   just class) so Total P/L actually colors instead of the default above
   always winning. */
.stocksSummary strong.gain {
  color: #1a9e5c;
}

.stocksSummary strong.loss {
  color: #d70015;
}

.stocksSummary button {
  margin-top: 0;
}

#closeAllStocksBtn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.subTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

.subTabBtn {
  background: transparent;
  color: #6e6e73;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 0;
}

.subTabBtn:hover {
  background: #f5f5f7;
}

.subTabBtn.active {
  background: #1d1d1f;
  color: white;
}

.subTabPanel p {
  color: #3a3a3c;
  line-height: 1.5;
}

.patchEntry {
  padding: 0.75rem 0;
  border-bottom: 1px solid #eee;
}

.patchEntry:last-child {
  border-bottom: none;
}

.patchEntry h4 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.patchEntry ul {
  margin: 0;
  padding-left: 1.2rem;
  color: #3a3a3c;
  font-size: 0.9rem;
}

.hint {
  color: #6e6e73;
  font-size: 0.85rem;
}

.dataTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.dataTable th, .dataTable td {
  text-align: left;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.dataTable th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.dataTable th[data-sort]:hover {
  color: #0071e3;
}

.sortArrow {
  font-size: 0.7rem;
}

.trendToggleBtn {
  margin: 0 0 0 0.3rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: normal;
  border-radius: 5px;
  background: #f0f0f2;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
}

.trendToggleBtn:hover {
  background: #e5e5ea;
}

.keepToggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: normal;
  margin-left: 0.3rem;
  cursor: pointer;
  white-space: nowrap;
}

.keepToggle input {
  margin: 0;
}

.dataTable input[type="number"] {
  width: 4.5rem;
  padding: 0.3rem;
  border: 1px solid #d2d2d7;
  border-radius: 6px;
}

.dataTable button {
  margin: 0 0.15rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
}

.leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leaderboard li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #eee;
}

.leaderboard li:last-child {
  border-bottom: none;
}

.stale {
  color: #d70015;
  font-size: 0.8rem;
}

.gain {
  color: #1a9e5c;
}

.loss {
  color: #d70015;
}

.sparkline {
  vertical-align: middle;
  margin-right: 0.4rem;
}

.trend {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
}

.trend.bullish {
  color: #1a9e5c;
  background: rgba(26, 158, 92, 0.12);
}

.trend.bearish {
  color: #d70015;
  background: rgba(215, 0, 21, 0.1);
}

.trend.flat {
  color: #6e6e73;
  background: rgba(110, 110, 115, 0.1);
}

.error {
  color: #d70015;
  font-size: 0.85rem;
  text-align: center;
}

button {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: #0071e3;
  color: white;
  cursor: pointer;
}

button:hover {
  background: #0077ed;
}

button.secondary {
  background: transparent;
  color: #6e6e73;
  border: 1px solid #d2d2d7;
}

button.secondary:hover {
  background: #f5f5f7;
}

button:disabled {
  background: transparent;
  color: #a1a1a6;
  border: 1px solid #d2d2d7;
  cursor: not-allowed;
}

button.danger {
  background: #d70015;
  color: white;
  border: none;
}

button.danger:hover {
  background: #b40012;
}

footer {
  text-align: center;
  padding: 1rem;
  color: #6e6e73;
  font-size: 0.85rem;
}

/* :not([hidden]) so this rule never fights the hidden attribute's own
   display:none — a plain .versionOverlay { display: flex } would win over
   the browser's built-in [hidden] rule and show the overlay regardless of
   the hidden property, which is exactly what was happening. */
.versionOverlay:not([hidden]) {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.versionCard {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.versionCard h2 {
  margin-top: 0;
}