/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
  font-family: 'YeezyTStar';
  src:
    url('/fonts/yeezy_tstar-bold-webfont.woff') format('woff'),
    url('/fonts/yeezy_tstar-bold-webfont.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: "IBMPlexMonoMedium";
  src: 
    url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-display: swap;
}
body {
  background-color: #fff4f1;
  color: #29151e;
  font-family: 'IBMPlexMonoMedium', sans-serif;
}
body {
  text-align: center;
}
h1 {
  font-family: 'YeezyTStar', sans-serif;
  color: #29151e;
  font-size: 4rem;
  margin-bottom: 10px;
}
.xbox-hub{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin:20px 0;
}

/* The interactive tile */
.xbox-tile{
  width: 170px;                 /* controls overall size */
  border-radius:14px;
  padding:10px;
  display:inline-block;
  text-decoration:none;

  background: rgba(255,255,255,0.06);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);

  /* 3D setup */
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease;
  position: relative;
  overflow: hidden;
}

/* image sizing */
.xbox-tile img{
  width: 100%;
  height: auto;
  display:block;
  transform: translateZ(18px);  /* makes it feel layered */
}

/* subtle highlight overlay */
.xbox-tile .glare{
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,0.25),
    rgba(255,255,255,0) 45%);
  transform: translateZ(30px);
  opacity: 0;
  transition: opacity 160ms ease;
}

.xbox-tile:hover{
  background: rgba(255,255,255,0.10);
  box-shadow: 0 22px 50px rgba(0,0,0,0.55);
}

.xbox-tile:hover .glare{
  opacity: 1;
}
.xbox-tile{
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
  transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease, opacity 200ms ease;
}

.xbox-tile.selected{
  background: rgba(255,255,255,0.14);
  box-shadow: 0 22px 50px rgba(0,0,0,0.55);
}

/* glare already in your setup; keep it */
.xbox-tile .glare{
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,0.25),
    rgba(255,255,255,0) 45%);
  transform: translateZ(30px);
  opacity: 0;
  transition: opacity 160ms ease;
}
.xbox-tile:hover .glare{ opacity: 1; }

/* iOS motion permission button */
.motion-btn{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  color: white;
  cursor: pointer;
  display: none; /* JS will show if needed */
}
/* ===== Responsive H1 sizing (mobile + tablet) ===== */

/* Tablets & small laptops */
@media (max-width: 900px) {
  h1 {
    font-size: 3rem;
    line-height: 1.15;
  }
}

/* Phones */
@media (max-width: 600px) {
  h1 {
    font-size: 2.2rem;
    line-height: 1.2;
  }
}
/* ===== Xbox carousel ===== */
.xbox-carousel{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.xbox-viewport{
  width: min(92vw, 720px); /* carousel width */
  overflow: hidden;
  border-radius: 16px;
}

.xbox-track{
  display: flex;
  gap: 18px;
  align-items: center;
  transform: translateX(0px);
  will-change: transform;
}

.xbox-arrow{
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  color: white;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.xbox-arrow:active{
  transform: scale(0.96);
}

/* Keep your existing .xbox-tile styles, but make sure it has a fixed-ish size */
.xbox-tile{
  width: 170px;        /* IMPORTANT: consistent step size */
  display: inline-block;
}
.xbox-tile img{
  width: 100%;
  height: auto;
  display: block;
}
a {
  color: #888;              /* grey */
  text-decoration: none;   /* remove underline */
}


/* Make the page fill the screen */
body.contact {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* Contact page layout */
.contact-wrapper {
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

/* ONLY for contact page */
body.contact {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* Main centered block */
.contact-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;              /* controls vertical spacing */
  padding: 20px;
}

/* Tighten default spacing */
.contact-wrapper h1 {
  margin: 0 0 10px;
}

.contact-info p {
  margin: 6px 0;
}

/* Back link spacing */
.back {
  margin-top: 12px;
}

/* Footer closer, subtle */
footer {
  margin-top: 24px;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* =========================
   INFOBOX (Name, Nicknames, Likes, Dislikes)
   ========================= */

/* overall card */
.infobox {
  max-width: 720px;
  margin: 18px auto;
  border-top: 1px solid rgba(0,0,0,0.15);
}

/* clickable header (H2) */
.infobox__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 10px 8px;
}

/* remove default marker */
.infobox__summary::-webkit-details-marker {
  display: none;
}

/* left arrow */
.infobox__summary::before {
  content: "▸";
  transition: transform 160ms ease;
  line-height: 1;
  opacity: 0.85;
}

.infobox[open] .infobox__summary::before {
  transform: rotate(90deg);
}

.infobox__h2 {
  margin: 0;
}

/* body wrapper */
.infobox__content {
  border-top: 1px solid rgba(0,0,0,0.15);
}

/* rows = label/value columns */
.infobox__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.infobox__label {
  font-weight: 700;
  opacity: 0.85;
  text-align: left;
}

.infobox__value {
  text-align: left;
}

/* reset lists (no bullets) */
.infobox__value ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* each list item = icon + text */
.infobox__value li {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 8px;
  align-items: start;
  margin: 4px 0;
}

/* tick for normal items */
.infobox__value li::before {
  content: "✓";
  opacity: 0.7;
  line-height: 1.2;
}

/* ---------- expandable list item (Music etc) ---------- */
/* if a list item contains <details>, don't show a tick */
.infobox__value li:has(details)::before {
  content: "";
}

/* details spans full width inside the list item */
.infobox__value li details {
  grid-column: 1 / -1;
  margin: 0;
}

/* make the expandable summary line up with tick layout */
.subbox__summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 8px;
  align-items: start;
}

/* remove browser arrow */
.subbox__summary::-webkit-details-marker {
  display: none;
}

/* left arrow for expandable item */
.subbox__summary::before {
  content: "▸";
  transition: transform 160ms ease;
  line-height: 1.2;
  opacity: 0.85;
}

.subbox[open] .subbox__summary::before {
  transform: rotate(90deg);
}

/* subgenre list indent */
.subbox ul {
  margin: 6px 0 6px 24px;
  padding: 0;
}

/* mobile: tighten columns */
@media (max-width: 600px) {
  .infobox__row {
    grid-template-columns: 140px 1fr;
  }
}

/* subgenre text = smaller + lighter */
.subbox ul li {
  font-size: 0.9em;   /* slightly smaller than main items */
  opacity: 0.75;      /* lighter / secondary */
}

.infobox {
  border-top: none;
}

.infobox__content {
    border-bottom: none
}

/* reduce space under the infobox header */
.infobox__summary {
  margin-bottom: 4px;
}

/* reduce space above the paragraph below */
p {
  margin-top: 4px;
}