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

.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, which would otherwise leave the panel stuck visible. */
.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;
}

/* .secondary elsewhere in this file carries a margin-left meant for the
   logout button sitting next to clickMe — not appropriate here, where the
   report panel's own flex gap already handles spacing. */
#reportScreenshotChooseBtn,
#reportScreenshotRemove {
  margin-left: 0;
}

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

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

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

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

#authForm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#authForm input {
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
}

#authForm button {
  margin-top: 0.25rem;
}

.switchMode {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

.switchMode a {
  color: #0071e3;
}

.error {
  margin: 0.75rem 0 0;
  color: #d70015;
  font-size: 0.85rem;
}

button.secondary {
  background: transparent;
  color: #6e6e73;
  border: 1px solid #d2d2d7;
  margin-left: 0.5rem;
}

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

#leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

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

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

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

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