* {
  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;
}

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

.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) {
  /* reportLink already claims the header's top-right corner on mobile —
     rather than fight it 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;
  }
}

.authStatus {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: #a1a1a6;
}

.authStatus a {
  color: #a1a1a6;
}

.authStatus a:hover {
  color: white;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem;
}

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, 260px);
  justify-content: center;
  align-content: start;
  gap: 1.25rem;
  width: 100%;
  max-width: 900px;
}

.game-card {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  min-height: 33vh;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 1.75rem 1.25rem 1.25rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  background: #fafafa;
}

.game-info h2 {
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
  color: #0071e3;
}

.game-info p {
  margin: 0;
  color: #6e6e73;
  font-size: 0.9rem;
}

.mini-leaderboard {
  list-style: none;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid #eee;
  width: 100%;
  font-size: 1.1rem;
  font-weight: 500;
  color: #1d1d1f;
}

.mini-leaderboard li {
  padding: 0.45rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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;
}

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

.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 is rendered by the
   browser using the browser/OS locale, not the page's own language
   setting — so the native input is visually hidden and a fully
   app-controlled button + filename text drive it instead. */
.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;
}

.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;
}

@media (max-width: 640px) {
  .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;
  }
}