/* Simple placeholder styles — real design comes later */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #f4f4f5; color: #18181b; }
a { color: inherit; }

nav { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: #fff; border-bottom: 1px solid #e4e4e7; }
nav .links { display: flex; gap: 12px; }
nav .links a { text-decoration: none; padding: 6px 10px; border-radius: 6px; }
nav .links a.active { background: #e4e4e7; }
nav .user { margin-left: auto; display: flex; align-items: center; gap: 10px; }

main { max-width: 800px; margin: 24px auto; padding: 0 16px; }
.card { background: #fff; border: 1px solid #e4e4e7; border-radius: 8px; padding: 20px; }

button { font: inherit; padding: 8px 14px; border: 1px solid #d4d4d8; border-radius: 6px; background: #18181b; color: #fff; cursor: pointer; }
button.secondary { background: #fff; color: #18181b; }
button:disabled { opacity: .4; cursor: not-allowed; }
input { font: inherit; width: 100%; padding: 8px 10px; border: 1px solid #d4d4d8; border-radius: 6px; }
label { display: block; margin: 12px 0 4px; font-size: 14px; }

.error { color: #b91c1c; min-height: 1.2em; font-size: 14px; }
.success { color: #15803d; }

/* Login */
.login-box { max-width: 360px; margin: 60px auto; }
.tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.avatars button { padding: 3px; background: #fff; color: inherit; line-height: 0; }
.avatars button .avatar { width: 100%; height: auto; aspect-ratio: 1; }
.avatars button.selected { outline: 3px solid #ca8a04; border-color: #ca8a04; }

/* Ranking */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid #e4e4e7; }
tr.me { background: #fef9c3; }
.avatar { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; vertical-align: middle; }
.rank-title { font-size: 13px; color: #71717a; }

/* Ranking pyramid (top 5): a triangle cut into 5 horizontal slices, one person per slice.
   Slice i spans from width i/5 (top edge) to (i+1)/5 (bottom edge) of the base, so together they form
   one triangle; the top slice ends in a point. Side padding keeps text inside each slice. */
.pyramid { max-width: 760px; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 3px; }
.pyramid .crown { text-align: center; line-height: 1.3; margin-bottom: 4px; }
.pyramid .crown .name { font-weight: 700; }
.pyramid .level { height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-size: 14px; line-height: 1.3; }
.pyramid .level-1 { clip-path: polygon(50% 0, 50% 0, 60% 100%, 40% 100%); background: #f5b82e;
  justify-content: flex-end; padding-bottom: 6px; }
.pyramid .level-2 { clip-path: polygon(40% 0, 60% 0, 70% 100%, 30% 100%); background: #f7cb5f; padding: 0 35%; }
.pyramid .level-3 { clip-path: polygon(30% 0, 70% 0, 80% 100%, 20% 100%); background: #e9d59b; padding: 0 25%; }
.pyramid .level-4 { clip-path: polygon(20% 0, 80% 0, 90% 100%, 10% 100%); background: #ddcaa0; padding: 0 15%; }
.pyramid .level-5 { clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); background: #cfbd96; padding: 0 5%; }
.pyramid .level .avatar { width: 34px; height: 34px; margin-bottom: 2px; }
.pyramid .level-1 .avatar { width: 30px; height: 30px; }
.pyramid .level .name { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pyramid .level .rank-title, .pyramid .crown .rank-title { color: #3f3f46; }
.pyramid .vacant { color: #52525b; font-style: italic; }
@media (max-width: 480px) { .pyramid .level { font-size: 12px; height: 76px; } .pyramid .level .avatar { width: 28px; height: 28px; } }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

/* Store */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.prize h3 { margin: 0 0 6px; }
.prize p { margin: 4px 0; font-size: 14px; }

/* Language selector */
.lang-select { font: inherit; padding: 6px 8px; border: 1px solid #d4d4d8; border-radius: 6px; background: #fff; }
.login-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }