:root {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  color: #fff8e7;
  background: var(--slate-950);
  font-synthesis: none;
  --cyan: #19b7d4;
}
* {
  box-sizing: border-box;
}
/* Phone browsers: no rubber-band bounce at the page edges, no double-tap or
   pinch zoom (buttons keep their own touch-action; the board uses none). */
html,
body {
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
}
/* No long-press "Save image" sheet, text selection or ghost image drags on
   the game UI. Anything that should be copyable opts back in. */
#app {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#app img,
#app svg {
  -webkit-user-drag: none;
}
body {
  margin: 0;
  min-height: var(--app-height, 100svh);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at 51% 48%,
    #295454 0,
    #192f39 42%,
    var(--slate-950) 80%
  );
  overflow-x: hidden;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: radial-gradient(#b5e5cc 1px, transparent 1px);
  background-size: 23px 23px;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.65);
  opacity: 0.55;
}
button:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
  z-index: 4;
}
button:active:not(:disabled) {
  transform: translateY(2px);
}
svg {
  flex-shrink: 0;
  vertical-align: middle;
  overflow: visible;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
button {
  border: 0;
}
button,
a {
  touch-action: manipulation;
}
.eyebrow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.2px;
  color: #839f9f;
}
.game-shell {
  isolation: isolate;
  position: relative;
  width: 420px;
  height: min(850px, calc(100svh - 40px));
  min-height: 640px;
  border: 5px solid var(--ink);
  border-radius: 27px;
  overflow: hidden;
  background: var(--cyan);
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px #4a6260,
    0 28px 90px #061016aa;
  margin: 20px 0;
}
.resource-bar {
  height: 55px;
  padding: 8px 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--slate-800);
  box-shadow: 0 3px var(--slate-900);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
.profile {
  display: flex;
  gap: 3px;
  align-items: center;
  background: var(--slate-900);
  border: 2px solid var(--slate-950);
  border-radius: 7px;
  height: 36px;
  padding: 0 5px 0 0;
  width: 93px;
}
.profile svg {
  background: #d587cf;
  border: 1px solid #edd788;
  border-radius: 5px;
}
.profile span {
  text-align: left;
  font-size: 10px;
  width: 100%;
}
.profile small {
  display: block;
  font-size: 13px;
  line-height: 1;
  position: relative;
}
.profile .player-xp-track {
  display: block;
  background: var(--slate-950);
  overflow: hidden;
  height: 6px;
  border-radius: 4px;
  margin-top: 4px;
  width: 90%;
}
.profile .player-xp-track b {
  display: block;
  height: 100%;
  background: #a9d658;
  border-radius: inherit;
}

.resource {
  display: flex;
  align-items: center;
  gap: 1px;
  border: 2px solid var(--slate-950);
  border-radius: 20px;
  height: 24px;
  background: var(--slate-900);
  padding: 0 2px 0 0;
  flex: 1;
  position: relative;
  min-width: 0;
}
.resource svg {
  margin-left: -3px;
}
.resource > span {
  font-size: 10px;
  font-weight: 900;
  flex: 1;
  white-space: nowrap;
}
.resource small {
  font-size: 10px;
  color: var(--slate-200);
}
.resource b {
  font-size: 12px;
  background: #97d440;
  border: 1px solid #d9f6a0;
  color: #273d2a;
  line-height: 13px;
  border-radius: 4px;
  width: 13px;
}
.screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #71d2db transparent;
  background-color: #19b7d4;
  /* Glyph patterns come from SCREEN_PATTERNS in ui-glyphs.js, set by app.js. */
  background-image: var(--pattern-home, none);
  animation: glyph-drift 28s linear infinite;
}
/* One full tile per loop, so the pattern drifts down-right without a seam. */
@keyframes glyph-drift { to { background-position: 132px 140px; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }
/* Notification badge: plain red disc with a white ring. */
.dot {
  --dot-size: 17px;
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  border: 2px solid white;
  background: var(--red);
  box-shadow: 0 0 0 1.5px #5c1a2c, 0 2px 0 1.5px #5c1a2c;
  right: -4px;
  top: -5px;
  z-index: 2;
  pointer-events: none;
}
:root {
  --button-label-size: 17px;
  --button-label-compact-size: 14px;
}

.bottom-nav {
  display: flex;
  background: var(--slate-900);
  min-height: 86px;
  flex-shrink: 0;
  border-top: 4px solid var(--slate-900);
  position: relative;
  z-index: 3;
  padding: 0 0 4px;
  gap: 3px;
}
.bottom-nav button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 78px;
  padding: 8px 2px;
  /* Raised slate: a light band on top, slate body, a darker lip at the bottom. */
  background: linear-gradient(
    color-mix(in srgb, var(--slate) 75%, white) 0 7%,
    var(--slate) 7% 94%,
    color-mix(in srgb, var(--slate) 80%, black) 94%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  gap: 0;
  overflow: visible;
}
.bottom-nav button > svg {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px var(--slate-900));
}
.bottom-nav span { display: none; }
.bottom-nav button.active {
  flex-grow: 1.85;
  /* The two-tone split (yellow top over yellow) between a pale highlight band and a darker lip. */
  background: linear-gradient(
    color-mix(in srgb, var(--yellow-top) 50%, white) 0 6%,
    var(--yellow-top) 6% 57%,
    var(--yellow) 57% 93%,
    color-mix(in srgb, var(--yellow) 70%, black) 93%
  );
  padding: 0 3px 9px;
  justify-content: flex-end;
}
.bottom-nav button.active svg {
  width: 68px;
  height: 68px;
  margin-top: -17px;
  margin-bottom: 0;
}
.bottom-nav button.active span {
  display: block;
  color: #fffdf1;
  font-size: 16px;
  line-height: 20px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 2.5px var(--slate-950);
  paint-order: stroke fill;
  text-shadow: none;
}
.bottom-nav .dot { --dot-size: 20px; top: 4px; right: 6px; }
@media (max-width:360px) {
  .bottom-nav button > svg { width:42px; height:42px; }
  .bottom-nav button.active svg { width:62px; height:62px; }
  .bottom-nav button.active span {font-size:14px;}
}
.section-heading {
  text-align: center;
  padding: 23px 10px 18px;
}
.section-heading > span {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #aef0ed;
  font-weight: 900;
}
.section-heading h2 {
  font-size: 26px;
  margin-top: 6px;
  color: #fff4d4;
  text-shadow: 2px 3px #237c95;
  letter-spacing: -0.8px;
}
.evolution,
.pets {
  padding: 0 13px 24px;
}
.item-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 66px;
  height: 69px;
  background: radial-gradient(at 25% 20%, #e498f2, #b655d1);
  border: 2px solid #442c67;
  box-shadow:
    inset 0 0 0 2px #efc5f055,
    0 2px 0 #347c96;
  border-radius: 9px;
  padding: 3px;
}
.item-tile > span {
  font-size: 10px;
  font-weight: bold;
  background: #6c3b9288;
  width: 100%;
  border-radius: 3px;
  text-align: center;
  position: absolute;
  bottom: 3px;
}
.item-tile i {
  position: absolute;
  right: 1px;
  top: -4px;
  color: #c6fb64;
  text-shadow: 1px 1px #365231;
  font-style: normal;
  font-size: 19px;
}
.panel-hint {
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  color: #d2f1ed;
  margin: 15px 0;
}
.tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.7px;
  font-weight: 900;
  background: #f4d768;
  color: #55472e;
  padding: 4px 7px;
  border-radius: 4px;
}
.ribbon {
  font-size: 13px;
  letter-spacing: 0.6px;
  background: #ffd238;
  border: 2px solid #aa8a29;
  border-radius: 3px;
  box-shadow:
    inset 0 2px #fff19b,
    0 2px #29738d;
  padding: 7px;
  text-align: center;
  margin: 20px 0 13px;
  color: #fffce6;
  text-shadow: 1px 1px #9c7834;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: #080f17c9;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep dialogs (and their close button, which pokes above the frame) clear of
     the status bar / notch; the modal is capped to what's left and its body scrolls. */
  padding: calc(env(safe-area-inset-top) + 28px) max(13px, env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + 18px) max(13px, env(safe-area-inset-left));
  backdrop-filter: blur(2px);
}
.modal {
  position: relative;
  width: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 7px 0 #10172299,
    0 12px 30px #0006;
  border: 3px solid var(--slate-900);
  border-radius: 13px;
  background: var(--slate-300);
  animation: pop 0.17s ease-out;
}
.modal-title {
  margin: 0;
  flex-shrink: 0;
  background: var(--yellow);
  border-radius: 9px 9px 0 0;
  text-align: center;
  padding: 13px 30px 11px;
  text-transform: uppercase;
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 0.7px;
  font-size: 22px;
  border-bottom: 3px solid var(--slate-800);
  box-shadow: inset 0 4px var(--yellow-top);
}
/* Dialog title bars: a palette fill with its top shade as a band along the top edge. */
.modal-title.purple {
  background: var(--purple);
  box-shadow: inset 0 4px var(--purple-top);
}
.close-modal {
  position: absolute;
  right: -10px;
  top: -12px;
  width: 32px;
  height: 32px;
  font-size: 26px;
}
.modal-body {
  padding: 20px 16px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  text-align: center;
  scrollbar-width: thin;
}
.modal-body > h3 {
  font-size: 17px;
  color: #fff3cf;
  text-shadow: 1px 1px var(--slate);
  margin: 10px 0;
}
.modal-body > p {
  font-size: 11px;
  line-height: 1.6;
  margin: 13px 0;
  color: #eef2e8;
}
.modal-body > .btn {
  margin: 8px 4px 3px;
  min-width: 140px;
}
/* Pill switch built like a push button: 2px ink frame, solid fill, 3px drop. Gray when off,
   green when on; the knob is a cream disc with an ink frame that slides right when on. */
.toggle {
  display: block;
  flex: none;
  width: 56px;
  height: 32px;
  background: #87939c;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 var(--button-depth) var(--button-drop);
  position: relative;
  transition:
    background 0.15s,
    transform 0.12s;
}
.toggle:after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  height: 24px;
  width: 24px;
  box-sizing: border-box;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 50%;
  transition: left 0.15s;
}
.toggle.on {
  background: var(--green);
}
.toggle.on:after {
  left: 26px;
}
/* The switch dips like a pressed button while its row is held. */
:active > .toggle {
  transform: translateY(2px);
  box-shadow: 0 1px var(--button-drop);
}
@media (prefers-reduced-motion: reduce) {
  .toggle, .toggle:after {transition: none}
}
.info-block {
  background: var(--slate-500);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  text-align: left;
  margin: 17px 0;
  padding: 14px;
  font-size: 11px;
  line-height: 1.6;
}
.info-block > b {
  font-size: 10px;
  color: #dce8d3;
}
.info-block p {
  font-size: 11px;
  margin: 7px 0;
  color: #e0e8df;
}
.info-block h3 {
  font-size: 16px;
}
.reward-art {
  background: radial-gradient(#ece18766, transparent 67%);
  padding: 5px;
  display: grid;
  place-items: center;
}
#toast {
  position: fixed;
  bottom: calc(32px - var(--app-bottom-gap, 0px));
  left: 50%;
  transform: translate(-50%, 15px);
  z-index: 100;
  background: #1b293aee;
  border: 1px solid #789995;
  color: #fff2d3;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 4px 20px #0004;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s,
    transform 0.18s;
  width: max-content;
  max-width: 90vw;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes pop {
  from {
    transform: scale(0.93);
    opacity: 0.4;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (max-width: 480px) {
  body {
    display: block;
    background: var(--slate-900);
  }
  .game-shell {
    width: 100%;
    height: var(--app-height, 100svh);
    min-height: 560px;
    max-height: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
  }
  .resource-bar {
    padding-top: max(8px, env(safe-area-inset-top));
    height: calc(55px + env(safe-area-inset-top));
  }
  /* The tabs themselves reach under the home indicator, so no empty strip sits below them.
     Only the indicator's own sliver is kept clear, not the whole 34pt safe area, so the
     tabs aren't a full tab-height taller on phones than in the browser. */
  .bottom-nav {
    --nav-inset: max(0px, env(safe-area-inset-bottom) - 20px);
    padding-bottom: max(0px, 4px - env(safe-area-inset-bottom));
  }
  .bottom-nav button {
    min-height: calc(78px + var(--nav-inset));
    padding-bottom: calc(8px + var(--nav-inset));
  }
  .bottom-nav button.active {
    padding-bottom: calc(9px + var(--nav-inset));
  }
  .modal-backdrop {
    position: fixed;
    bottom: auto;
    height: var(--app-height, 100%);
  }
  #toast {
    bottom: calc(80px - var(--app-bottom-gap, 0px));
  }
}
@media (max-height: 720px) {
  .game-shell {
    min-height: 560px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
.painted-sprite {
  filter: drop-shadow(0 2px 1px #14242b33);
}
.painted-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  vertical-align: middle;
}
.painted-stars svg {
  flex-shrink: 0;
}
.unearned-star {
  filter: grayscale(1);
  opacity: 0.45;
}

/* Tabs: the one tab style (Album, Rewards). Unselected tabs are slate; the selected tab is light gray.
   Mark it with aria-pressed="true" (filters) or aria-current (screens). */
.tabs {
  display: flex;
  gap: 5px;
}
.tabs button {
  flex: 1;
  border: 2px solid var(--tab-edge);
  border-radius: 8px;
  padding: 9px 2px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  color: white;
  background: var(--slate);
  box-shadow: 0 3px var(--tab-drop);
}
.tabs button[aria-pressed="true"],
.tabs button[aria-current] {
  background: var(--gray);
  color: var(--ink);
}
.rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
}
.rank-table td,
.rank-table th {
  padding: 8px;
  border-bottom: 1px solid #ffffff30;
  text-align: left;
}
.rank-table svg {
  vertical-align: middle;
}

@font-face {
  font-family: "Lilita One";
  src: url("/public/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family: "Lilita One", Arial, sans-serif;
}
h1,
h2,
h3,
h4,
button,
.ribbon,
.tag,
.resource-bar {
  font-family: "Lilita One", Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}
h1,
h2,
h3,
.ribbon,
.modal-title,
.section-heading h2 {
  font-family: "Lilita One", Arial, sans-serif;
  font-weight: 400;
  color: white;
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: none;
}
:root {
  /* Palette: the game's main colors, each in three shades. Pick the shade by the job:
     - main (--yellow): solid controls and bars — buttons, dialog title bars, badges, dots.
     - top (--yellow-top): light accents — top bands on bars, meter fills, names on dark panels.
     - soft (--yellow-soft, main + 45% white): large surfaces — card backgrounds and art panels.
     Plus cream, the slate scale and gray for quieter controls, and ink for outlines. */
  --yellow: #ffb80b;
  --yellow-top: #ffdf12;
  --green: #70c700;
  --green-top: #aff100;
  --blue: #03abd8;
  --blue-top: #32dcfa;
  --purple: #bd2cd0;
  --purple-top: #e84cee;
  --red: #db4655;
  --red-top: #f5707c;
  --pink: #e0409c;
  --pink-top: #f472c6;
  --yellow-soft: color-mix(in srgb, var(--yellow) 55%, white);
  --green-soft: color-mix(in srgb, var(--green) 55%, white);
  --blue-soft: color-mix(in srgb, var(--blue) 55%, white);
  --purple-soft: color-mix(in srgb, var(--purple) 55%, white);
  --red-soft: color-mix(in srgb, var(--red) 55%, white);
  --pink-soft: color-mix(in srgb, var(--pink) 55%, white);
  --cream: #fff6df;
  --slate: #496376;
  --gray: #b2bdc8;
  --gray-top: #d9e0e6;
  /* Card types: each owns one palette color. Card surfaces and art use the soft tint;
     card title bars use the main shade. */
  --type-unit: var(--yellow);
  --type-unit-soft: var(--yellow-soft);
  --type-passive: var(--blue);
  --type-passive-soft: var(--blue-soft);
  --type-evo: var(--purple);
  --type-evo-soft: var(--purple-soft);
  --type-enemy-soft: var(--green-soft);
  --type-friend-soft: var(--red-soft);
  /* Equipment grades (Common, Good, Great, Epic, Legendary, Super, Unique): a fill,
     a lighter top shade for highlights and names, and a dark edge. */
  --grade-0: var(--gray);
  --grade-0-top: var(--gray-top);
  --grade-0-edge: #697782;
  --grade-1: var(--green);
  --grade-1-top: var(--green-top);
  --grade-1-edge: #39792c;
  --grade-2: var(--blue);
  --grade-2-top: var(--blue-top);
  --grade-2-edge: #176db0;
  --grade-3: var(--purple);
  --grade-3-top: var(--purple-top);
  --grade-3-edge: #84209b;
  --grade-4: var(--yellow);
  --grade-4-top: var(--yellow-top);
  --grade-4-edge: #b67914;
  --grade-5: #262d3a;
  --grade-5-top: var(--cream);
  --grade-5-edge: #080c12;
  --grade-6: var(--red);
  --grade-6-top: var(--red-top);
  --grade-6-edge: #921f34;
  /* Ink outlines every control and its lettering. */
  --ink: #161b24;
  /* Slate scale for panels, tracks, dividers and outlines, darkest to lightest.
     Pick the nearest step instead of a new navy or blue-gray. */
  --slate-950: #172031;
  --slate-900: #263244;
  --slate-800: #344559;
  --slate-700: #41586d;
  --slate-500: #5d7388;
  --slate-300: #8b9fb1;
  --slate-200: #adc0c8;
  /* Buttons: ink frame, 10-12px corners, a 3px drop that shrinks to 1px when pressed. */
  --button-radius: 12px;
  --button-drop: #26323dcc;
  --button-depth: 3px;
  /* Cream controls (info "?", training jump arrow, arrow buttons). */
  --disc-fill: var(--cream);
  --disc-glyph: var(--slate-900);
  /* Slate controls (tabs, lobby chips). */
  --tab-fill: var(--slate);
  --tab-edge: var(--slate-900);
  --tab-drop: var(--slate-900);
  /* Meters fill with a top shade and a main-shade lip; these two are also reused by the difficulty chip. */
  --health-fill: var(--red-top);
  --xp-flash: var(--blue-top);
}
/* Push buttons: a 2px ink frame, a solid palette fill, a 3px drop and white lettering with a
   3px ink outline. Colors: yellow (default action), green (claim/confirm), blue (secondary),
   purple (special), danger (red, destructive), gray (neutral), cream (quiet secondary). Sizes: .btn-small, default, .btn-large. */
.btn {
  --button-font: var(--button-label-size);
  --button-height: 48px;
  /* Lettering outline scales with the size: 2px small, 3px default, 3.5px large. */
  --button-stroke: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  min-height: var(--button-height);
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--button-radius);
  font-family: "Lilita One", Arial, sans-serif;
  font-size: var(--button-font);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: normal;
  color: white;
  -webkit-text-stroke: var(--button-stroke) var(--ink);
  paint-order: stroke fill;
  text-shadow: none;
  box-shadow: 0 var(--button-depth) var(--button-drop);
  touch-action: manipulation;
  transition:
    transform 0.12s,
    filter 0.12s;
}
.btn.btn-small {
  --button-font: var(--button-label-compact-size);
  --button-height: 44px;
  --button-stroke: 2px;
}
.btn.btn-large {
  --button-font: 21px;
  --button-height: 56px;
  --button-stroke: 3.5px;
}
.btn.yellow {
  background: var(--yellow);
}
.btn.green {
  background: var(--green);
}
.btn.blue {
  background: var(--blue);
}
.btn.purple {
  background: var(--purple);
}
.btn.danger {
  background: var(--red);
}
.btn.gray {
  background: #87939c;
}
/* Cream: a quiet secondary action. Ink lettering, like the other cream controls. */
.btn.cream {
  background: var(--cream);
  color: var(--ink);
  -webkit-text-stroke: 0;
}
.btn:hover:not(:disabled) {
  filter: brightness(1.07);
}
.btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px var(--button-drop);
}
.btn:disabled {
  opacity: 1;
  filter: none;
  background: #87939c;
  color: #d8dfe4;
  -webkit-text-stroke: 1.5px #4d5964;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
/* Info "?" buttons: a small cream disc with an ink frame and a small drop.
   Each screen places it with its own class (.crate-info, .friends-info-button, ...). */
.info-button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--disc-fill);
  color: var(--disc-glyph);
  line-height: 0;
  box-shadow: 0 var(--button-depth) var(--button-drop);
}
.info-button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px var(--button-drop);
}
/* Text buttons: outlined lettering with no frame, for full-screen overlays.
   Each screen places it with its own class (.training-guide-dismiss, .reveal-skip, ...). */
.text-button {
  padding: 10px 24px;
  background: none;
  color: white;
  font-size: 20px;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.text-button:focus-visible {
  outline: 2px solid white;
  border-radius: 8px;
}
/* Arrow buttons: square cream pager controls (stash carousel, Album pages). The chevron is .75em of the font. */
.arrow-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--disc-fill);
  color: var(--disc-glyph);
  font-size: 30px;
  box-shadow: 0 var(--button-depth) var(--button-drop);
}
.arrow-button:disabled {
  opacity: 0.45;
}
.arrow-chevron {
  width: 0.75em;
  height: 0.75em;
}
/* Round buttons: the arrow-button treatment on a disc (2px ink frame, 3px drop that
   shrinks when pressed). Cream for pagers and pause, soft purple for close, green top for speed. */
.round,
.close-modal {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  line-height: 1;
  box-shadow: 0 var(--button-depth) var(--button-drop);
}
.round:active:not(:disabled),
.close-modal:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px var(--button-drop);
}
.round {
  width: 38px;
  height: 38px;
  background: var(--cream);
  color: var(--disc-glyph);
}
.close-modal {
  background: var(--purple-soft);
  color: var(--ink);
}
/* Two-tone split (.btn-split): the color's top shade on the upper half, its main shade below.
   Reserved for reward moments: the lobby start button and the Shop's buy and claim buttons. */
.btn-split.yellow:not(:disabled) {
  background: linear-gradient(var(--yellow-top) 0 50%, var(--yellow) 50% 100%);
}
.btn-split.green:not(:disabled) {
  background: linear-gradient(var(--green-top) 0 50%, var(--green) 50% 100%);
}
.btn-split.blue:not(:disabled) {
  background: linear-gradient(var(--blue-top) 0 50%, var(--blue) 50% 100%);
}
.btn-split.purple:not(:disabled) {
  background: linear-gradient(var(--purple-top) 0 50%, var(--purple) 50% 100%);
}
.btn-split.danger:not(:disabled) {
  background: linear-gradient(var(--red-top) 0 50%, var(--red) 50% 100%);
}
/* Every grade-N (tiles, portraits) and rarity-N (badges) element gets its grade's colors. */
.grade-0,
.rarity-0 {
  --rarity: var(--grade-0);
  --rarity-top: var(--grade-0-top);
  --rarity-edge: var(--grade-0-edge);
}
.grade-1,
.rarity-1 {
  --rarity: var(--grade-1);
  --rarity-top: var(--grade-1-top);
  --rarity-edge: var(--grade-1-edge);
}
.grade-2,
.rarity-2 {
  --rarity: var(--grade-2);
  --rarity-top: var(--grade-2-top);
  --rarity-edge: var(--grade-2-edge);
}
.grade-3,
.rarity-3 {
  --rarity: var(--grade-3);
  --rarity-top: var(--grade-3-top);
  --rarity-edge: var(--grade-3-edge);
}
.grade-4,
.rarity-4 {
  --rarity: var(--grade-4);
  --rarity-top: var(--grade-4-top);
  --rarity-edge: var(--grade-4-edge);
}
.grade-5,
.rarity-5 {
  --rarity: var(--grade-5);
  --rarity-top: var(--grade-5-top);
  --rarity-edge: var(--grade-5-edge);
}
.grade-6,
.rarity-6 {
  --rarity: var(--grade-6);
  --rarity-top: var(--grade-6-top);
  --rarity-edge: var(--grade-6-edge);
}
/* Equipment tiles look like push buttons: a solid grade fill, a 2px ink frame and a 3px drop. */
.item-tile[class*="grade-"] {
  background: var(--rarity);
  border: 2px solid var(--ink);
  border-radius: var(--button-radius);
  box-shadow: 0 var(--button-depth) var(--button-drop);
}
button.item-tile[class*="grade-"]:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px var(--button-drop);
}
.item-tile[class*="grade-"] > span {
  background: var(--rarity-edge);
}
.card-type {
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  width: 23px;
  height: 25px;
  padding: 3px;
  background: var(--ink);
  border-radius: 0 10px 0 7px;
  z-index: 2;
}
.card-type svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Preserve the reference phone aspect on short desktop windows. */
@media (min-width: 481px) {
  .game-shell {
    width: min(420px, calc((100svh - 40px) * 0.46));
    min-width: 280px;
  }
}
.hardcore-star {
  filter: none;
}

/* Card ranks stay on one line even in the six-column pause inventory. */
.card-rank {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
  line-height: 1;
  font-size: 16px;
  color: #fff4be;
  text-shadow: 0 1px 1px var(--slate-900);
}
.card-rank > b { font-size: inherit; line-height: 1; }
.card-rank > .icon { flex-shrink: 0; }

.bottom-nav { grid-template-columns: repeat(4,1fr); }

/* Keep the familiar key silhouette, with the Epic equipment purple. */
.epic-key { display: inline-flex; }
/* Shared gold pile (Starter Pack, Inn guide): one white outline around the whole heap. */
.coin-pile {filter:drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0)}
.coin-pile i {position:absolute;display:block;aspect-ratio:1}
.coin-pile .painted-sprite {width:100%;height:100%;filter:drop-shadow(0 2px #6b4b0d)}

@keyframes equipment-dane-idle {
  0%,100% {transform:translateY(0)}
  50% {transform:translateY(-4px)}
}
/* Defeat tip: a callout card with a bulb, a headline, and highlighted key words. */
.defeat-tip {display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding:11px 13px 12px;border:2px solid var(--slate-950);border-radius:14px;background:var(--slate-900);box-shadow:inset 0 3px #3d4f6b,0 3px #14213080;text-align:left;color:#e8f1f7}
.tip-bulb {flex:none;width:28px;height:34px;margin-top:1px}
.defeat-tip-title {display:block;font-size:15px;color:#ffca27;-webkit-text-stroke:2px var(--slate-950);paint-order:stroke fill;text-transform:uppercase}
.defeat-tip p {margin:4px 0 0;font-size:12.5px;line-height:1.35}
.defeat-tip .tip-key {color:#85ef28;font-weight:inherit}
/* Several tips, or an enemy's specials, as a list with yellow dots. */
.tip-list {margin:4px 0 0;padding:0;list-style:none;font-size:12.5px;line-height:1.35}
.tip-list li {position:relative;padding-left:14px}
.tip-list li + li {margin-top:5px}
.tip-list li::before {content:"";position:absolute;left:2px;top:.5em;width:6px;height:6px;border-radius:50%;background:#ffca27}
.resource > span {font-size:13px}
.resource small {font-size:10px}
@media(max-width:360px){.resource > span{font-size:11px}.resource small{font-size:10px}}

/* Unlocked difficulty stars retain their color while waiting to be earned. */
.challenge-star.unearned-star,.hardcore-star.unearned-star {filter:none;opacity:.4}

/* Painted state icons carry their own outline, shadow and transparent bounds. */
.tip-bulb{display:grid;place-items:center}.tip-bulb svg{width:28px;height:34px}

/* Drawn replacements for text symbols (see ui-glyphs.js); they size and color like text. */
:where(.ui-glyph) {display:inline-block;vertical-align:-.14em;flex-shrink:0;overflow:visible}
:where(.ui-glyph:not([width])) {width:1em;height:1em}
.close-modal .ui-glyph {width:.62em;height:.62em}
.round .round-chevron {width:24px;height:24px}
svg.ui-glyph.info-glyph {display:block;width:86%;height:86%}