:root {
  --espresso:#0d0907;
  --walnut2:#3c2418;
  --plum:#1a1222;
  --slate:#101419;

  --gold:#ffd27a;
  --ember:#ff8a3d;
  --mint:#61f6a7;
  --cyan:#68dcff;

  --text:#fff3df;
  --muted:#bda78d;

  --glow-border: rgba(255,210,122,.22);
  --glow-gold: rgba(255,138,61,.18);
  --glow-mint: rgba(97,246,167,.10);
}

* {
  box-sizing: border-box;
}
body{
  min-height:100vh;
  color:var(--text);
  font-family:Inter, system-ui, sans-serif;

  background:
    radial-gradient(circle at 12% 10%, rgba(255,138,61,.28), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(97,246,167,.22), transparent 30%),
    radial-gradient(circle at 68% 86%, rgba(104,220,255,.16), transparent 34%),
    linear-gradient(
      135deg,
      var(--walnut2),
      var(--espresso),
      var(--plum),
      var(--slate)
    );

  background-size:180% 180%;

  animation:bgRoll 12s ease-in-out infinite alternate;

  overflow-x:hidden;

  position:relative;
}

@keyframes bgRoll{
  0%{
    background-position:0% 20%;
  }

  50%{
    background-position:100% 80%;
  }

  100%{
    background-position:20% 100%;
  }
}

body::before{
  content:"";

  position:fixed;
  inset:0;

  pointer-events:none;

  opacity:.34;

  background:

    radial-gradient(
      circle at center,
      rgba(255,225,170,.24) 0 2.4px,
      transparent 2.4px 100%
    ),

    radial-gradient(
      circle at center,
      rgba(255,150,90,.12) 0 1.2px,
      transparent 1.2px 100%
    ),

    radial-gradient(
      circle at center,
      rgba(97,246,167,.06) 0 .8px,
      transparent .8px 100%
    ),

    repeating-linear-gradient(
      180deg,
      rgba(255,240,210,.018) 0px,
      rgba(255,240,210,.018) 1px,
      transparent 1px,
      transparent 14px
    );

  background-size:
    56px 56px,
    28px 28px,
    20px 20px,
    100% 100%;

  background-position:
    0 0,
    28px 28px,
    14px 14px,
    center;

  mix-blend-mode:screen;

  filter:
    blur(.2px)
    saturate(115%);

  animation:
    emberFloat 18s linear infinite;
}

body::after{
  content:"";

  position:fixed;
  inset:-10%;

  pointer-events:none;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,138,61,.12), transparent 28rem),
    radial-gradient(circle at 80% 20%, rgba(97,246,167,.08), transparent 30rem),
    radial-gradient(circle at 50% 80%, rgba(255,210,122,.10), transparent 28rem);

  filter:blur(38px);

  opacity:.62;

  animation:fogShift 16s ease-in-out infinite alternate;
}

@keyframes emberFloat{
  0%{
    transform:translateY(0);
  }

  100%{
    transform:translateY(-140px);
  }
}

@keyframes fogShift{
  0%{
    transform:scale(1) translateX(0);
  }

  100%{
    transform:scale(1.08) translateX(-40px);
  }
}

/* reusable header */

.logo,
.title-text {
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -.07em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fffdf4 0%, #fff3df 38%, #d59d61 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 16px rgba(255,138,61,.55),
    0 0 34px rgba(255,210,122,.20);
}

.logo {
  font-size: clamp(2rem, 5vw, 4rem);
}

.title-text {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.tm {
  font-size: .35em;
  vertical-align: super;
}

.glow-text {
  color: var(--text);
  text-shadow:
    0 0 14px rgba(255,138,61,.65),
    0 0 28px rgba(255,210,122,.18);
}

.regular-text,
.game-desc,
.subtext {
  color: rgba(255,243,223,.74);
  line-height: 1.45;
}


.tagline {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .02em;

  text-shadow:
    0 0 10px rgba(255,138,61,.10);
}


.brand-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn,
.icon-btn,
.smile {
  cursor: pointer;
  text-decoration: none;
  font-weight: 950;

  color: #fff4e7;

  background: transparent;

  border-radius: 999px;

  border: 1px solid rgba(255,170,110,.42);

  text-shadow:
    0 0 10px rgba(255,110,60,.95),
    0 0 22px rgba(255,138,61,.55),
    0 0 42px rgba(255,80,40,.22);

  box-shadow:
    0 0 8px rgba(255,255,220,.08),
    0 0 18px rgba(255,210,122,.28),
    0 0 34px rgba(255,138,61,.22),
    0 0 58px rgba(255,80,40,.10),
    inset 0 0 12px rgba(255,220,140,.04);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    filter .18s ease;
}

.btn:hover,
.icon-btn:hover,
.smile:hover {
  border-color: rgba(255,210,140,.62);

  text-shadow:
    0 0 8px rgba(255,255,245,.92),
    0 0 18px rgba(255,225,150,.88),
    0 0 36px rgba(255,160,80,.66),
    0 0 56px rgba(255,80,40,.34);

  box-shadow:
    0 0 12px rgba(255,255,220,.12),
    0 0 22px rgba(255,220,140,.36),
    0 0 42px rgba(255,138,61,.30),
    0 0 72px rgba(255,80,40,.14),
    inset 0 0 14px rgba(255,220,140,.05);

  transform: translateY(-1px);
  filter: brightness(1.04);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0 18px;
}

.icon-btn,
.smile {
  width: 52px;
  height: 52px;

  display: inline-grid;
  place-items: center;

  flex: 0 0 auto;

  padding: 0;

  font-size: 1.55rem;
  line-height: 1;

  font-weight: 900;

  letter-spacing: -.04em;

  border-radius: 14px;
}

.btn-secondary {
  color: rgba(255,243,223,.58);

  border-color: rgba(255,170,110,.16);

  text-shadow:
    0 0 8px rgba(255,110,60,.22);

  box-shadow:
    0 0 8px rgba(255,200,120,.06),
    0 0 18px rgba(255,90,40,.04),
    inset 0 0 8px rgba(255,220,140,.02);
}

/* reusable glow container */

.glow-container {
  position: relative;
  border-radius: 34px;
  background: transparent;
}

.glow-container::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 32px;
  border: 1px solid var(--glow-border);
  box-shadow:
    0 0 26px rgba(255,138,61,.14),
    inset 0 0 28px rgba(97,246,167,.05);
  pointer-events: none;
}

/* reusable footer */

.site-footer {
  margin-top: 36px;
  color: rgba(255,243,223,.55);
  text-align: center;
  position: relative;
  z-index: 1;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 12px 0;
}

.footer-links a {
  color: var(--gold);
  text-decoration: none;
}

@media (max-width: 800px) {
  .brand-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .brand-actions {
    justify-content: center;
  }
}

/* Tags */

.mini-tag {
  padding: 6px 10px;

  border-radius: 10px;

  font-size: .78rem;
  font-weight: 850;

  color: var(--gold);

  background: rgba(13,9,7,.16);

  border: 1px solid rgba(255,210,122,.18);

  text-shadow:
    0 0 10px rgba(255,138,61,.22);

  box-shadow:
    0 0 10px rgba(255,138,61,.08),
    inset 0 0 8px rgba(255,210,122,.03);
}

.mini-tag--nobility {
  color: var(--gold);

  border-color: rgba(255,210,122,.28);

  text-shadow:
    0 0 12px rgba(255,138,61,.34);

  box-shadow:
    0 0 14px rgba(255,138,61,.12),
    inset 0 0 10px rgba(255,210,122,.04);
}


/* modals */

.modal,
.feedback-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.74);
  z-index: 9999;
}

.modal.is-open,
.feedback-modal.is-open {
  display: flex;
}

.modal-card,
.feedback-box {
  width: min(92vw, 560px);
  position: relative;
  padding: 26px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(255,138,61,.18), transparent 16rem),
    radial-gradient(circle at bottom right, rgba(97,246,167,.12), transparent 18rem),
    rgba(13,9,7,.94);
  border: 1px solid rgba(255,210,122,.25);
  box-shadow:
    0 0 40px rgba(255,138,61,.18),
    0 0 70px rgba(97,246,167,.10);
}

.modal-card h2,
.feedback-box h2 {
  margin: 0 0 12px;

  color: var(--text);

  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 950;

  letter-spacing: -.03em;

  text-shadow:
    0 0 5px rgba(255,138,61,.24),
    0 0 12px rgba(255,210,122,.04);
}

.modal-card p,
.feedback-box p {
  margin: 0 0 12px;

  color: rgba(255,243,223,.74);

  line-height: 1.5;
}

.modal-card strong,
.feedback-box strong {
  color: var(--gold);

  text-shadow:
    0 0 6px rgba(255,138,61,.18),
    0 0 12px rgba(255,210,122,.04);
}

.modal-card a,
.feedback-box a {
  color: var(--gold);

  text-decoration: none;

  text-shadow:
    0 0 6px rgba(255,138,61,.18),
    0 0 12px rgba(255,210,122,.04);
}

.modal-close,
.feedback-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.feedback-reactions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.feedback-reactions label {
  padding: 12px 8px;
  text-align: center;
  border-radius: 18px;
  background: rgba(60,36,24,.32);
  border: 1px solid rgba(255,210,122,.18);
  cursor: pointer;
}

.feedback-reactions input {
  display: none;
}

.feedback-reactions label:has(input:checked) {
  background: rgba(255,138,61,.18);
  border-color: rgba(255,138,61,.7);
}

.feedback-reaction__emoji {
  display: block;
  font-size: 1.6rem;
}

.feedback-textarea {
  width: 100%;
  min-height: 130px;
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  color: var(--text);
  background: rgba(60,36,24,.32);
  border: 1px solid rgba(255,210,122,.18);
  resize: vertical;
  box-sizing: border-box;
}

@media (max-width: 800px) {
  .games {
    grid-template-columns: 1fr;
  }

  .feedback-reactions {
    grid-template-columns: repeat(2, 1fr);
  }
}

.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  padding: 18px 0 28px;
  text-align: center;
}

.logo {
  font-weight: 950;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: .95;
  letter-spacing: -.07em;
  text-transform: uppercase;

  background: linear-gradient(180deg, #fffdf4 0%, #fff3df 38%, #d59d61 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 16px rgba(255,138,61,.55),
    0 0 34px rgba(255,210,122,.20);
}

.tagline {
  color: var(--muted);
  font-size: clamp(.95rem, 1.5vw, 1.08rem);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.3;
  text-shadow: 0 0 10px rgba(255,138,61,.10);
}

.brand-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.logo {
  font-weight: 950;
  font-size: clamp(2rem, 5vw, 4rem);

  letter-spacing: -.07em;
  text-transform: uppercase;

  background: linear-gradient(
    180deg,
    #fffdf4 0%,
    #fff3df 38%,
    #d59d61 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 16px rgba(255,138,61,.55),
    0 0 34px rgba(255,210,122,.20);
}

.logo-icon {
  width: 64px;
  height: 64px;

  object-fit: contain;

  filter:
    drop-shadow(0 0 10px rgba(255,138,61,.24))
    drop-shadow(0 0 18px rgba(255,210,122,.12));
}

.brand-actions {
  display: flex;
  align-items: center;
  gap: 10px;

  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .brand-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .logo-wrap {
    align-items: flex-start;
  }

  .logo-icon {
    width: 54px;
    height: 54px;
  }

  .tagline {
    font-size: .92rem;
  }
}

.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;

  padding: 18px 0 28px;

  text-align: center;
}

.brand-top {
  width: 100%;

  display: flex;
  justify-content: center;
}

.logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  text-decoration: none;
}

.logo {
  font-weight: 950;

  font-size: clamp(2.8rem, 7vw, 5.4rem);

  line-height: .95;

  letter-spacing: -.07em;
  text-transform: uppercase;

  background:
    linear-gradient(
      180deg,
      #fffdf4 0%,
      #fff3df 38%,
      #d59d61 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 16px rgba(255,138,61,.55),
    0 0 34px rgba(255,210,122,.20);
}

.tm {
  font-size: .35em;
  vertical-align: super;
}

.tagline {
  width: min(100%, 780px);

  color: var(--muted);

  font-size: clamp(.95rem, 1.5vw, 1.08rem);

  font-weight: 800;

  letter-spacing: .04em;

  line-height: 1.3;

  text-align: center;

  text-shadow:
    0 0 10px rgba(255,138,61,.10);
}

.logo-icon {
  width: clamp(64px, 8vw, 92px);
  height: clamp(64px, 8vw, 92px);

  flex: 0 0 auto;

  object-fit: contain;

  opacity: .72;

  filter:
    grayscale(.35)
    sepia(.55)
    brightness(1.08)
    contrast(.92)

    drop-shadow(0 0 10px rgba(255,138,61,.18))
    drop-shadow(0 0 18px rgba(255,210,122,.10));
}

.brand-actions {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 8px;
}

@media (max-width: 700px) {
  .logo-wrap {
    gap: 12px;
  }

  .logo {
    font-size: clamp(2.2rem, 10vw, 4rem);
  }

  .tagline {
    width: 100%;
    font-size: .92rem;
  }

  .brand-actions {
    width: 100%;
  }
}

.header-gif {
  width: 58px;
  height: 58px;

  object-fit: contain;

  opacity: .72;

  pointer-events: none;
  user-select: none;

  border-radius: 12px;

  border: 1px solid rgba(255,120,70,.42);

  box-shadow:
    0 0 12px rgba(255,110,60,.34),
    0 0 24px rgba(255,90,40,.18),
    inset 0 0 12px rgba(255,120,60,.04);

  filter:
    grayscale(.18)
    sepia(.28)
    brightness(1.04)
    contrast(.96);
}