/* Addie's Drive-Thru Empire — the website in the game's "Sunny Diner" look
   (UITheme: royal-blue star sheet, navy frame, cyan/blue awning, cream cards,
   warm-brown text, Lilita One display + Baloo 2 body). Shared by index.html
   and leaderboard.html. */

:root {
  --sheet: #1c57b8;
  --navy: #14407f;
  --navy-deep: #0b2447;
  --cyan: #54e0f5;
  --awning: #2b7ae0;
  --tab-on: #7ed0ff;
  --cream: #fff6e3;
  --tan: #e8c98f;
  --tan-deep: #d2a65c;
  --lip: #3d3342;
  --text: #3d2b1f;
  --dim: #7a6552;
  --light: #cfe6ff;
  --gold: #ffc93c;
  --orange: #d9601a;
  --green: #4cc93f;
  --green-deep: #2e8f25;
  --display: "Lilita One", "Arial Black", sans-serif;
  --body: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font: 500 17px/1.35 var(--body);
  background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff' fill-opacity='.09'%3E%3Cpath d='M20 8l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M86 64l2 5 5 .7-3.6 3.5.8 5-4.2-2.2-4.2 2.2.8-5L78 69.7l5-.7z'/%3E%3C/g%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

/* --- Header: the name on navy, then the awning --- */

.brand {
  background: var(--navy);
  padding: 20px 16px 10px;
  text-align: center;
}
.brand h1 {
  margin: 0;
  color: #fff;
  font: 400 clamp(32px, 7vw, 56px)/1.05 var(--display);
  letter-spacing: .3px;
  text-shadow: 0 4px 0 var(--navy-deep), 2px 2px 0 var(--navy-deep), -2px 2px 0 var(--navy-deep),
    2px -2px 0 var(--navy-deep), -2px -2px 0 var(--navy-deep);
}
.brand h1 span { color: var(--gold); }
.brand p { margin: 6px 0 0; color: var(--light); font-weight: 700; font-size: clamp(15px, 2.4vw, 19px); }
.brand a { color: inherit; text-decoration: none; }

.awning {
  height: 64px;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 34px, var(--awning) 34px 68px);
  -webkit-mask: radial-gradient(18px at 17px 100%, #0000 98%, #000) 0 0 / 34px 100%;
  mask: radial-gradient(18px at 17px 100%, #0000 98%, #000) 0 0 / 34px 100%;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 16px 16px 40px; }
.narrow { max-width: 620px; }

/* --- Hero, store badges --- */

.hero { display: block; border-radius: 20px; overflow: hidden; border: 6px solid var(--navy); box-shadow: 0 6px 0 var(--navy-deep); }
/* On phones the portrait splash art, cropped to the logo and Addie; the wide art from 700 px up. */
.hero img { width: 100%; height: auto; max-height: 72vh; object-fit: cover; object-position: top; }
@media (min-width: 700px) { .hero img { max-height: none; } }

.badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 6px; }
.badge {
  min-width: 140px;
  padding: 8px 18px;
  border-radius: 16px;
  background: var(--cream);
  box-shadow: 0 5px 0 var(--tan-deep);
  text-align: center;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.badge small { display: block; margin-top: -3px; color: var(--dim); font-weight: 500; font-size: 13px; }

/* --- Section pills and cream cards --- */

.pill {
  display: table;
  margin: 28px auto 14px;
  padding: 4px 22px;
  border-radius: 99px;
  background: var(--navy);
  color: #fff;
  font: 400 22px var(--display);
  letter-spacing: .3px;
  box-shadow: 0 4px 0 var(--navy-deep);
}

.card {
  background: var(--cream);
  border: 3px solid var(--tan);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--lip);
  padding: 14px;
}
.card h3 { margin: 0 0 2px; color: var(--orange); font: 400 24px var(--display); }
.card p { margin: 0; }

/* Every section's screenshots: one row of four on a laptop, 2 x 2 on a phone. */
.media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
@media (min-width: 700px) { .media { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.media figure { margin: 0; }
.media img {
  width: 100%;
  aspect-ratio: 9 / 15;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  border: 3px solid var(--navy);
  background: #2a4f8f;
}
.media figcaption { margin-top: 4px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.1; }
.media figcaption small { display: block; color: var(--dim); font-weight: 500; font-size: 13px; }

.host { display: flex; gap: 12px; align-items: center; }
.host img {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--navy);
  background: #8fd3ff;
  object-fit: cover;
  object-position: top;
}

.towns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
@media (min-width: 760px) { .towns { grid-template-columns: repeat(3, 1fr); } }
.towns figure { margin: 0; }
.towns img { width: 100%; border-radius: 12px; border: 3px solid var(--navy); }
.towns figcaption { margin-top: 2px; text-align: center; font-weight: 700; font-size: 15px; }

/* --- The big green button, footer --- */

.cta {
  display: block;
  max-width: 520px;
  margin: 28px auto 8px;
  padding: 12px;
  border-radius: 20px;
  background: var(--green);
  box-shadow: 0 6px 0 var(--green-deep);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font: 400 26px var(--display);
  text-shadow: 0 2px 0 var(--green-deep);
}
.cta:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--green-deep); }

footer { padding: 10px 16px 24px; text-align: center; color: var(--light); font-size: 14px; }

/* --- Leaderboard --- */

.season {
  display: table;
  margin: 0 auto 14px;
  padding: 2px 16px;
  border-radius: 99px;
  background: var(--cream);
  box-shadow: 0 3px 0 var(--tan-deep);
  color: var(--orange);
  font-weight: 700;
}
.season:empty { display: none; }

.track { display: flex; gap: 4px; margin: 0 0 10px; padding: 4px; border-radius: 99px; background: var(--navy); }
.track[hidden] { display: none; }
.track button {
  flex: 1;
  padding: 6px 0;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--light);
  font: 400 17px var(--display);
  letter-spacing: .3px;
  cursor: pointer;
}
.track button.on { background: var(--tab-on); color: var(--navy); }

/* The podium, as in the app: sky and hill, three cream pedestals (first in the
   middle and tallest), each player's character on top, a hex medal below. */
.stage {
  position: relative;
  margin: 14px 0;
  padding: 40px 10px 12px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(#8fd0ff 0 55%, #7cc66a 55% 100%);
}
.stage::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 48%;
  height: 100px;
  border-radius: 50%;
  background: #6dba5a;
}
.podium { position: relative; display: flex; align-items: flex-end; gap: 4px; }
.podium > div { flex: 1; min-width: 0; text-align: center; }
.podium .who { position: relative; z-index: 1; height: 84px; margin-bottom: -14px; display: flex; justify-content: center; align-items: flex-end; }
.podium .who::after {  /* the character's shadow on the slab */
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 46px;
  height: 10px;
  margin-left: -23px;
  border-radius: 50%;
  background: rgba(90, 60, 20, .28);
  z-index: -1;
}
.podium .who img { height: 92px; width: auto; }
/* A crew's badge stands on its pedestal in a framed tile, as in the app. */
.podium .tile {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  padding: 4px;
  border: 4px solid #c9d7e6;
  border-radius: 14px;
  background: #f4f8fc;
  box-shadow: 0 4px 0 rgba(20, 40, 80, .25);
}
.podium .tile img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.2); }
.podium .tile.t1 { border-color: #f2b416; }
.podium .tile.t2 { border-color: #b9c4d0; }
.podium .tile.t3 { border-color: #d2803a; }
/* Each pedestal is a small box seen from slightly above and to the left:
   a gold slab (its top face over a thicker front edge), the cream box with
   its darker right-hand face, a gold plinth at the foot. */
.ped { position: relative; }
.slab { position: relative; height: 26px; margin: 0 -5px; }
.slab::before {
  content: "";
  position: absolute;
  inset: 0 0 12px 0;
  background: #ffe68a;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}
.slab::after {
  content: "";
  position: absolute;
  inset: 14px 0 0 0;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(#ffcf4d, #f3b134);
  box-shadow: inset -8px 0 0 rgba(180, 100, 10, .25), 0 3px 0 rgba(120, 70, 10, .25);
}
.box {
  position: relative;
  padding: 8px 12px 10px 6px;
  background: linear-gradient(90deg, #f8e8c8 0 calc(100% - 10px), #e6cc9f calc(100% - 10px));
  box-shadow: inset 1px 0 0 #ecd3a6;
}
.box .inset {
  height: 100%;
  padding: 8px 2px 10px;
  border: 2px solid #efd8ad;
  border-radius: 10px;
  background: linear-gradient(#fbefd6, #f6e2bd);
}
.plinth {
  height: 14px;
  margin: 0 -3px;
  border-radius: 3px;
  background: linear-gradient(#f6bd45, #e39a22);
  box-shadow: inset -8px 0 0 rgba(160, 80, 0, .25);
}
.ped .name {
  font: 400 15px var(--display);
  color: #fff;
  letter-spacing: .2px;
  text-shadow: 0 2px 0 #6a4a2e, 1px 1px 0 #6a4a2e, -1px 1px 0 #6a4a2e, 1px -1px 0 #6a4a2e, -1px -1px 0 #6a4a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.first .ped .name { color: var(--gold); }
.ped .val { display: inline-block; margin: 4px 0 8px; padding: 1px 10px; border-radius: 99px; background: #6a4a2e; color: #fff; font: 400 14px var(--display); }
.ped svg { display: block; margin: 0 auto; }
.first .box { height: 158px; }
.second .box { height: 140px; }
.third .box { height: 132px; }

.rows .row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 5px 0 var(--lip);
}
.rows .rank { width: 22px; flex: none; text-align: center; font: 400 24px var(--display); color: var(--text); }
.rows .pic {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 4px solid #c9d7e6;
  border-radius: 10px;
  background: #8fc4ee;
}
.rows .pic img { width: 100%; height: 100%; object-fit: cover; }
.rows .pic.crest { background: #f4f8fc; padding: 3px; }
.rows .pic.crest img { object-fit: contain; transform: scale(1.35); }
.rows .r1 { border-color: #f2b416; }
.rows .r2 { border-color: #b9c4d0; }
.rows .r3 { border-color: #d2803a; }
.rows .name { min-width: 0; font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .name.top { color: #e08a00; }
.rows .name small { display: block; margin-top: -4px; color: var(--dim); font-weight: 500; font-size: 13px; }
.rows .score { margin-left: auto; flex: none; text-align: right; color: var(--navy); font: 400 20px/1 var(--display); }
.rows .score small { display: block; font: 700 12px var(--body); }

.note {
  padding: 26px 16px;
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 5px 0 var(--lip);
  text-align: center;
  color: var(--dim);
  font-weight: 700;
}