/* ============================================================
   Crouton arcade — shared game chrome
   Safe to load on every game: every rule is namespaced with .gu-
   ============================================================ */
html.gu {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}
html.gu body {
  touch-action: manipulation;
  overscroll-behavior: none;
}
html.gu.gu-touch * {
  -webkit-touch-callout: none;
}

/* ---------- tournament / cup standings panel ---------- */
.gu-cup {
  width: 100%;
  max-width: 560px;
  background: linear-gradient(180deg, rgba(20, 30, 51, .95), rgba(6, 10, 20, .96));
  border: 1px solid rgba(255, 215, 94, .35);
  border-radius: .9rem;
  padding: .65rem .8rem .7rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  text-align: left;
}
.gu-cup[hidden] { display: none; }
.gu-cup-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}
.gu-cup-kicker {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: #ffd75e;
  white-space: nowrap;
}
.gu-cup-title {
  flex: 1;
  min-width: 0;
  font-size: .8rem;
  font-weight: 900;
  color: #eef4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gu-cup-refresh {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(120, 200, 255, .35);
  background: rgba(40, 216, 255, .08);
  color: #cfeaff;
  font-weight: 900;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
.gu-cup-refresh:active { transform: scale(.94); }
.gu-cup-meta {
  font-size: .66rem;
  color: #9fc6ff;
  margin-bottom: .4rem;
  line-height: 1.45;
}
.gu-cup-meta b { color: #ffd75e; }
.gu-cup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  max-height: 156px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.gu-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .22rem .35rem;
  border-radius: .45rem;
  font-size: .7rem;
  color: #cfe3ff;
  min-height: 30px;
}
.gu-row.me {
  background: rgba(255, 215, 94, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 94, .35);
  color: #fff;
}
.gu-rank {
  flex: none;
  width: 18px;
  text-align: center;
  font-weight: 900;
  color: #ffd75e;
  font-variant-numeric: tabular-nums;
}
.gu-av {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  background: #1e293b;
  display: grid;
  place-items: center;
  font-size: .62rem;
  font-weight: 900;
  color: #93c5fd;
  border: 1px solid rgba(255, 255, 255, .2);
}
.gu-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gu-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
}
.gu-score {
  flex: none;
  font-weight: 900;
  color: #ffd75e;
  font-variant-numeric: tabular-nums;
}
.gu-empty {
  font-size: .68rem;
  color: #9fc6ff;
  padding: .3rem 0;
}
.gu-cup-link {
  display: block;
  margin-top: .4rem;
  font-size: .62rem;
  font-weight: 800;
  color: #7dd3fc;
  text-decoration: none;
}
.gu-cup-link:hover { text-decoration: underline; }

/* ---------- mobile screens with cup panels ---------- */
@media (max-width: 760px), (max-height: 620px) {
  .gu-cup {
    max-width: 96vw;
    padding: .5rem .6rem .55rem;
    border-radius: .7rem;
  }
  .gu-cup-list { max-height: 24dvh; }
  .gu-row { min-height: 27px; font-size: .66rem; }
  .gu-cup-title { font-size: .72rem; }
  .gu-cup-meta { font-size: .6rem; }
}
@media (max-width: 760px) {
  .gu-cup-meta .gu-hide-m { display: none; }
  .gu-cup { position: relative; }
}

/* screens must be scrollable when the cup panel is tall */
@media (max-height: 760px) {
  .screen.gu-with-cup {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- shared mobile touch targets ---------- */
@media (pointer: coarse) {
  .gu-cup-refresh { width: 34px; height: 34px; font-size: .95rem; }
}