/* Homepage: one gold-framed clan window. The clan crest and welcome sit on top, and the tools are
   menu options inside it, the way an in-game menu lists its choices. */

.hero { width: 100%; max-width: 900px; justify-self: center; animation: window-in .7s var(--ease-spring) .1s backwards; }
.hero .banner {
  font-size: clamp(30px, 8vw, 48px); padding: 8px 40px 12px;
  animation: banner-drop .75s cubic-bezier(.5, 0, .75, 0) .25s backwards, banner-land .45s var(--ease-out) 1s;
}
.banner .ch { display: inline-block; white-space: pre; animation: hop .5s var(--ease-spring) backwards; animation-delay: calc(1.05s + var(--i) * 45ms); }
.banner .tag { color: var(--pink-hi); }
.hero .window-in { padding: 52px 18px 18px; gap: 20px; }

.welcome { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.crest {
  width: 96px; height: 96px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(var(--pink-hi) 0 45%, var(--pink) 45% 100%); border: 4px solid #c2349a;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .16), inset 0 4px 0 rgba(255, 255, 255, .5), 0 4px 0 rgba(0, 0, 0, .25);
  animation: pop .6s var(--ease-spring) .5s backwards;
}
/* icons animate the shapes inside the SVG (.ic), never the box around them: a moving box is drawn at
   whole pixels and steps on regular desktop screens, while moving vector shapes stay smooth */
.art { display: grid; place-items: center; }
.ic { transform-box: fill-box; transform-origin: 50% 50%; }
.crest svg { width: 68px; height: 68px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
/* the crest's idle bob and squish. The constant 0.08deg tilt is invisible but matters: browsers (Firefox
   at 100% scaling especially) snap movement that is perfectly straight up and down to whole pixels, so a
   4px bob steps. Anything tilted more than about 0.014deg is drawn at fractional positions and flows. */
.crest .art { rotate: .08deg; will-change: transform; animation: idle-bob 3.6s ease-in-out 1.6s infinite, idle-squish 3.6s ease-in-out 1.6s infinite; }
/* the cat squishes when tapped (home.js). While it's being played with, the automatic squish stays off;
   its timeline keeps running underneath, so it comes back in step with the bob */
.crest { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.crest.touched .art { scale: 1 !important; }
.crest svg { transform-origin: 50% 85%; }
.welcome-copy { display: grid; gap: 6px; min-width: 0; animation: rise .6s var(--ease-out) .6s backwards; }
.welcome-copy h2 { font-size: clamp(22px, 4vw, 28px); color: var(--navy); }
.welcome-copy p { font-size: clamp(15px, 2vw, 17px); font-weight: 600; max-width: 52ch; }

/* ---------- tool options ---------- */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .options { grid-template-columns: minmax(0, 1fr); } }
.opt {
  --rx: 0deg; --ry: 0deg; --lift: 0px; --mx: 50%; --my: 0%;
  --slot-hi: var(--banner-hi); --slot: var(--banner); --slot-dk: var(--banner-dk);
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; gap: 8px 14px;
  padding: 14px; border-radius: 12px; min-width: 0; isolation: isolate;
  background: var(--cyan); box-shadow: inset 0 -4px 0 var(--cyan-dk), inset 0 2px 0 rgba(255, 255, 255, .55), 0 3px 0 rgba(0, 0, 0, .12);
  transform: perspective(800px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .45s var(--ease-spring), box-shadow .3s;
  animation: opt-in .6s var(--ease-spring) backwards; animation-delay: calc(1.1s + var(--i) * 90ms);
}
.opt.tilting { transition: transform .08s linear, box-shadow .3s; }
.opt:not(.soon):hover, .opt:not(.soon):focus-within {
  --lift: -5px;
  box-shadow: inset 0 -4px 0 var(--cyan-dk), inset 0 2px 0 rgba(255, 255, 255, .55), 0 0 0 3px var(--gold), 0 10px 18px rgba(22, 58, 87, .3);
}
.opt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255, 255, 255, .7), transparent 65%);
  opacity: 0; transition: opacity .3s;
}
.opt:not(.soon):hover::before { opacity: 1; }
.opt .sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.opt .sheen::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-18deg);
}
.opt:not(.soon):hover .sheen::after { animation: sweep .8s var(--ease-out); }

.opt .slot {
  grid-row: 1 / 3; align-self: start; width: 70px; height: 70px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(var(--slot-hi) 0 45%, var(--slot) 45% 100%); border: 3px solid var(--slot-dk);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 0 rgba(0, 0, 0, .25);
}
.opt .slot svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.opt:not(.soon):hover .slot .ic { animation: ic-bob 1.1s ease-in-out infinite; }
.opt-head { display: grid; gap: 5px; min-width: 0; align-content: start; }
.opt h3 { font-size: 23px; color: var(--ink); }
.opt .state { justify-self: start; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 1px 9px 2px; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--white); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.state.live { background: var(--green-dk); }
.state.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-hi); animation: blink 2s ease-in-out infinite; }
.state.external { background: var(--navy); }
.state.soon { background: #5b6b7a; }
.opt p { grid-column: 2; font-size: 14.5px; color: var(--ink); min-width: 0; }
.opt .go-row { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 2px; }
.opt .go-row .btn svg { width: 15px; height: 15px; }
/* the whole tile is clickable through its main link */
.opt .main::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.opt .main:focus-visible { outline: none; }
.opt .main:focus-visible::after { outline: 3px solid var(--orange); outline-offset: 3px; }

.opt[data-tool="tracker"] { --slot-hi: var(--pink-hi); --slot: var(--pink); --slot-dk: #c2349a; }
.opt[data-tool="sets"] { --slot-hi: var(--banner-hi); --slot: var(--banner); --slot-dk: var(--banner-dk); }
.opt[data-tool="puzzle"] { --slot-hi: var(--orange-hi); --slot: var(--orange); --slot-dk: var(--orange-dk); }
.opt.soon { background: #c7dde6; box-shadow: inset 0 -4px 0 #9fbccb, inset 0 2px 0 rgba(255, 255, 255, .5); }
.opt.soon .slot { --slot-hi: #c9d1d8; --slot: #9aa7b2; --slot-dk: #5b6b7a; position: relative; }
.opt.soon .slot .art { opacity: .55; }
.opt.soon .slot .padlock { position: absolute; right: -9px; bottom: -9px; width: 30px; height: 30px; display: grid; }
.opt.soon .slot .padlock .ic { transform-origin: 50% 20%; animation: ic-jiggle 3.2s ease-in-out 2s infinite; }
.opt.soon .slot .padlock svg { width: 100%; height: 100%; }
.opt.soon h3, .opt.soon p { color: #3d5466; }

@media (max-width: 460px) {
  .hero .window-in { padding: 46px 12px 12px; }
  .window { padding: 8px; border-width: 4px; }
  .welcome { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .welcome-copy p { justify-self: center; }
  .crest { width: 82px; height: 82px; }
  .crest svg { width: 58px; height: 58px; }
  .opt { grid-template-columns: auto 1fr; }
  .opt .slot { width: 60px; height: 60px; grid-row: 1; }
  .opt .slot svg { width: 42px; height: 42px; }
  .opt p, .opt .go-row { grid-column: 1 / -1; }
}

/* ---------- motion ---------- */
@keyframes window-in { from { opacity: 0; scale: .86; translate: 0 30px; } }
@keyframes banner-drop { from { translate: 0 -260px; opacity: 0; } 60% { opacity: 1; } }
@keyframes banner-land { 0% { scale: 1.18 .78; } 45% { scale: .94 1.08; } 100% { scale: 1 1; } }
@keyframes hop { from { translate: 0 18px; scale: .4; opacity: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes pop { from { opacity: 0; scale: .3; rotate: -12deg; } }
@keyframes opt-in { from { opacity: 0; scale: .8; translate: 0 24px; } }
@keyframes sweep { to { left: 130%; } }
@keyframes idle-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes idle-squish { 0%, 92%, 100% { scale: 1; } 95% { scale: 1 .9; } }
/* distances are in the icons' own 48-unit grid: 3 units is about 4px on screen */
@keyframes ic-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-3.5px) rotate(-6deg); } 60% { transform: translateY(-1.5px) rotate(5deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ic-jiggle { 0%, 86%, 100% { transform: rotate(0deg); } 89% { transform: rotate(-12deg); } 92% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .opt { transition: none; transform: none; }
}

/* ---------- live Clan Contest panel (desktop only) ---------- */
.home-row { display: grid; justify-items: center; gap: 28px; }
.contest { display: none; }
@media (min-width: 1100px) {
  .page:has(.contest:not([hidden])) { max-width: 1280px; }
  .home-row:has(.contest:not([hidden])) { grid-template-columns: 300px minmax(0, 1fr); align-items: start; justify-items: stretch; }
  .home-row:has(.contest:not([hidden])) .hero { justify-self: center; }
  .contest:not([hidden]) { display: block; animation: contest-in .7s var(--ease-spring) backwards; animation-delay: var(--delay, 0s); }
}
.contest .banner { font-size: 24px; padding: 6px 24px 8px; overflow: hidden; text-overflow: ellipsis; }
.contest .window-in { padding: 38px 12px 12px; gap: 10px; }
.contest-when { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); font-size: 14px; }
.contest-when .live {
  border-radius: 999px; padding: 1px 9px 2px; font-family: var(--font-display); font-size: 13px; letter-spacing: .08em;
  color: var(--white); background: var(--green-dk); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); animation: live-pulse 2.4s ease-in-out infinite;
}
.contest-measure { justify-self: start; }
.contest-measure .pill { font-size: 12px; }
.standings { list-style: none; margin: 0; padding: 6px; display: grid; gap: 4px; border-radius: 8px; background: var(--cyan); box-shadow: inset 0 -3px 0 var(--cyan-dk); }
.standings li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; background: var(--cream);
  animation: row-in .45s var(--ease-out) backwards; animation-delay: calc(var(--delay, 0s) + .25s + var(--i) * 45ms);
}
.standings li:nth-child(even) { background: var(--cream-dk); }
.standings .pos { font-family: var(--font-display); font-size: 17px; color: var(--navy); text-align: center; }
.standings li:nth-child(1) .pos { color: #d9a400; }
.standings li:nth-child(2) .pos { color: #8d9aa8; }
.standings li:nth-child(3) .pos { color: #b36a2a; }
.standings .who { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings .val { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.standings .val.xp { color: var(--xp); }
.standings .val.gem { color: var(--gem); }
.standings li:nth-child(-n+3) { box-shadow: inset 3px 0 0 var(--gold); }
.contest-foot { font-size: 12px; font-weight: 600; color: #4d6a80; }
.contest .btn { justify-self: stretch; }

@keyframes contest-in { from { opacity: 0; translate: -40px 0; scale: .94; } }
@keyframes row-in { from { opacity: 0; translate: -10px 0; } }
@keyframes live-pulse { 0%, 100% { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 0 rgba(87, 200, 28, .5); } 50% { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 5px rgba(87, 200, 28, 0); } }