/* ExtremePlay web - /vote page: the list of vote sites and the rewards tooltip. */


.vote { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .vote { grid-template-columns: minmax(0, 1fr); } }

.sites { display: grid; gap: 10px; margin-top: 24px; }
.site { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px;
  background: rgba(0, 0, 0, 0.62); border: 2px solid #808080; }
.site .slotbox { width: 52px; height: 52px; display: grid; place-items: center; background: var(--slot); border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 var(--gui-hi); }
.site .slotbox canvas { width: 34px; height: 34px; }
.site .name { font-family: var(--f-pixel); font-size: 23px; color: var(--mc-white); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.site .every { font-family: var(--f-pixel); font-size: 18px; color: var(--mc-gray); }
.sites .toast { transform: none; }
.sites .toast p:last-child { margin-top: 12px; }

.rewards { max-width: none; }
.rewards .gap { height: 10px; }
.how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; margin-top: 24px; }
@media (max-width: 760px) { .how { grid-template-columns: minmax(0, 1fr); } }