@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Sora:wght@600;700;800&display=swap');

:root{
  --blue: #5468e0;
  --blue-dark: #3d4fc4;
  --orange: #f2ad4e;
  --green: #8ed14f;
  --slot: #e8e8ee;
  --slot-shadow: #c9c9d6;
  --badge: #23262f;
  --ink: #1c2030;
  --teal: #0f3d3e;
  --gold-bright: #f3dd93;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  min-height:100%;
  font-family:'Sora', sans-serif;
}

body{
  padding:110px 5vw 60px;
 
   background: linear-gradient(135deg, rgb(40, 255, 162), rgb(57, 232, 84), rgb(47, 167, 7));
    background-attachment: fixed;
  animation: drift 20s ease-in-out infinite;
}

@keyframes drift{
  0%, 100%{ background-position:0 0, 0 0, 0% 50%; }
  50%{ background-position:0 0, 0 0, 100% 50%; }
}

header{
  position:fixed;
  top:0; left:0; width:100%;
  padding:16px 28px;
  z-index:10;
  background:linear-gradient(180deg, rgba(10,10,30,0.75), rgba(10,10,30,0));
}
header img{ height:44px; }

.back-space{
  position:fixed;
  top:20px;
  right:auto;
  z-index:11;
  padding-top: 35px;
}
.back-space a{
  display:inline-block;
  padding:9px 20px;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:0.9rem;
  color:var(--gold-bright);
  text-decoration:none;
  letter-spacing:0.02em;

  background:linear-gradient(160deg, #163f40, #082627);
  border:1px solid rgba(212,175,55,0.55);
  border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.back-space a:hover{
  background:linear-gradient(160deg, #1c4f50, #0d3334);
  border-color:#d4af37;
  transform:translateY(-1px);
}
.back-space a:active{
  transform:translateY(0);
}

/* ============ OUTER LAYOUT: character | pill/panel column ============ */

body > div{
  display:grid;
  grid-template-columns: 220px 200px 1fr;
  grid-template-rows: auto auto auto;
  column-gap:22px;
  row-gap:18px;
  align-items:start;
  max-width:1200px;
  margin:0 auto;
}

/* character card */
body > div > *:nth-child(1){
  grid-column:1;
  grid-row:1 / 4;
  align-self:auto;
  background:linear-gradient(160deg, #0f3d3e, #082627);
  border-radius:14px;
  padding:18px 14px;
  text-align:center;
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,0.4),
    0 14px 34px rgba(0,0,0,0.4);
}
body > div > *:nth-child(1) h1{
  font-family:'Cinzel', serif;
  color:var(--gold-bright);
  font-size:1.4rem;
  margin:2px 0 14px;
}
body > div > *:nth-child(1) img{
  width:100%;
  border-radius:10px;
  display:block;
}

/* pills */
body > div > *:nth-child(2), body > div > *:nth-child(4), body > div > *:nth-child(6){
  grid-column:2;
  border-radius:999px;
  padding:16px 10px;
  text-align:center;
  box-shadow:0 8px 18px rgba(0,0,0,0.28);
}
body > div > *:nth-child(2) h2, body > div > *:nth-child(4) h2, body > div > *:nth-child(6) h2{
  margin:0;
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:1.35rem;
  color:#1c2030;
}
body > div > *:nth-child(2){ grid-row:1; background:linear-gradient(180deg, #7788ee, var(--blue)); }
body > div > *:nth-child(4){ grid-row:2; background:linear-gradient(180deg, #ffcb84, var(--orange)); }
body > div > *:nth-child(6){ grid-row:3; background:linear-gradient(180deg, #b3ec7c, var(--green)); }

/* empty weapon/team placeholders: reserve no visible space */
body > div > *:nth-child(5), body > div > *:nth-child(7){
  grid-column:3;
  min-height:0;
}
body > div > *:nth-child(5){ grid-row:2; }
body > div > *:nth-child(7){ grid-row:3; }

/* ============ MATERIALS PANEL ============ */

body > div > *:nth-child(3){
  grid-column:3;
  grid-row:1;
  background:linear-gradient(160deg, #34ffc5, rgb(76, 155, 40));
  border-radius:18px;
  padding:26px 30px 30px;
  box-shadow:0 16px 36px rgba(0,0,0,0.35);

  display:grid;
  grid-template-columns: 84px repeat(4, 84px) 84px;
  column-gap:14px;
  row-gap:14px;
  justify-content:start;
}

body > div > *:nth-child(3) h2{
  grid-column:1 / 7;
  margin:0 0 4px;
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:1.6rem;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,0.3);
}
body > div > *:nth-child(3) > h2:nth-child(1){ grid-row:1; }
body > div > *:nth-child(3) > h2:nth-child(12){ grid-row:4; margin-top:6px; }

/* ascension: exp-books (2) + mat5 (11) are the two tall slots */
body > div > *:nth-child(3) > *:nth-child(2){ grid-column:1; grid-row:2 / 4; }
body > div > *:nth-child(3) > *:nth-child(3){ grid-column:2; grid-row:2; }
body > div > *:nth-child(3) > *:nth-child(4){ grid-column:3; grid-row:2; }
body > div > *:nth-child(3) > *:nth-child(5){ grid-column:4; grid-row:2; }
body > div > *:nth-child(3) > *:nth-child(6){ grid-column:5; grid-row:2; }
body > div > *:nth-child(3) > *:nth-child(7){ grid-column:2; grid-row:3; }
body > div > *:nth-child(3) > *:nth-child(8){ grid-column:3; grid-row:3; }
body > div > *:nth-child(3) > *:nth-child(9){ grid-column:4; grid-row:3; }
body > div > *:nth-child(3) > *:nth-child(10){ grid-column:5; grid-row:3; }
body > div > *:nth-child(3) > *:nth-child(11){ grid-column:6; grid-row:2 / 4; }

/* talent: crown (20) sits above boss1 (19) in the last column */
body > div > *:nth-child(3) > *:nth-child(13){ grid-column:2; grid-row:5; }
body > div > *:nth-child(3) > *:nth-child(14){ grid-column:3; grid-row:5; }
body > div > *:nth-child(3) > *:nth-child(15){ grid-column:4; grid-row:5; }
body > div > *:nth-child(3) > *:nth-child(16){ grid-column:2; grid-row:6; }
body > div > *:nth-child(3) > *:nth-child(17){ grid-column:3; grid-row:6; }
body > div > *:nth-child(3) > *:nth-child(18){ grid-column:4; grid-row:6; }
body > div > *:nth-child(3) > *:nth-child(20){ grid-column:5; grid-row:5; }
body > div > *:nth-child(3) > *:nth-child(19){ grid-column:5; grid-row:6; }

/* generic circular material slot */
body > div > *:nth-child(3) > div{
  position:relative;
  width:84px; height:84px;
  background:linear-gradient(160deg, var(--slot), var(--slot-shadow));
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
body > div > *:nth-child(3) > div img{
  width:64%;
  height:64%;
  object-fit:contain;
}
body > div > *:nth-child(3) > div p{
  position:absolute;
  right:-4px;
  bottom:-4px;
  margin:0;
  padding:2px 7px;
  font-size:0.72rem;
  font-weight:700;
  color:#fff;
  background:var(--badge);
  border-radius:999px;
  box-shadow:0 2px 4px rgba(0,0,0,0.4);
}

/* the four special (non-circular) slots: exp-books, mat5, crown, boss1 */
body > div > *:nth-child(3) > *:nth-child(2),
body > div > *:nth-child(3) > *:nth-child(11),
body > div > *:nth-child(3) > *:nth-child(19),
body > div > *:nth-child(3) > *:nth-child(20){
  border-radius:14px;
  width:auto;
  height:auto;
}
body > div > *:nth-child(3) > *:nth-child(19) img,
body > div > *:nth-child(3) > *:nth-child(20) img{
  width:60%;
  height:60%;
}

/* ============ WEAPON PANEL ============
   Assumes the "Main Container Weapons" div you pasted takes the place of
   the old empty Weapon placeholder — i.e. it IS nth-child(5) of the outer
   layout, with its 5 weapon rows as direct div children. If it actually
   ends up nested one level deeper (placeholder > that div), every
   selector below just needs one more " > div" inserted after
   ":nth-child(5)" and it'll line up the same way.
   ============================================================ */
 
body > div > *:nth-child(5){
  background:linear-gradient(160deg, #ffb65e, var(--orange-dark));
  border-radius:18px;
  padding:30px 28px 26px;
  box-shadow:0 16px 36px rgba(0,0,0,0.35);
 
  display:flex;
  flex-direction:column;
  gap:36px;
}
 
/* each weapon row */
body > div > *:nth-child(5) > div{
  position:relative;
  display:flex;
  align-items:center;
}
 
/* rows 1-3: image on the left, ribbon opening to the right */
body > div > *:nth-child(5) > div:nth-child(1),
body > div > *:nth-child(5) > div:nth-child(2),
body > div > *:nth-child(5) > div:nth-child(3){
  flex-direction:row;
}
 
/* rows 4-5: mirrored — image on the right, ribbon opening to the left */
body > div > *:nth-child(5) > div:nth-child(4),
body > div > *:nth-child(5) > div:nth-child(5){
  flex-direction:row-reverse;
}
 
/* image + name column: first inner div of each row */
body > div > *:nth-child(5) > div > div:first-child{
  flex:0 0 auto;
  width:118px;
  display:flex;
  flex-direction:column;
  z-index:2;
}
body > div > *:nth-child(5) > div > div:first-child img{
  width:100%;
  height:112px;
  object-fit:cover;
  border-radius:50px 50px 0 0;
  background:linear-gradient(160deg, #a06fe0, #6f3fc9);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.25);
}
body > div > *:nth-child(5) > div > div:first-child h2{
  margin:0;
  padding:10px 6px 16px;
  background:#f4ede0;
  color:var(--ink);
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:0.78rem;
  text-align:center;
  line-height:1.15;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
}
 
/* stat ribbon: second inner div of each row */
body > div > *:nth-child(5) > div > div:nth-child(2){
  flex:1;
  min-width:0;
  padding:16px 26px;
  background:linear-gradient(100deg, #e9e9ee 0%, #b9bcc9 45%, #9296a6 100%);
  box-shadow:0 8px 18px rgba(0,0,0,0.3);
  color:var(--ink);
}
 
/* rows 1-3: ribbon rounds off to the right, fuses against the capsule's left edge */
body > div > *:nth-child(5) > div:nth-child(1) > div:nth-child(2),
body > div > *:nth-child(5) > div:nth-child(2) > div:nth-child(2),
body > div > *:nth-child(5) > div:nth-child(3) > div:nth-child(2){
  margin-left:-16px;
  padding-left:34px;
  border-radius:0 40px 40px 0;
}
 
/* rows 4-5: ribbon rounds off to the left, fuses against the capsule's right edge */
body > div > *:nth-child(5) > div:nth-child(4) > div:nth-child(2),
body > div > *:nth-child(5) > div:nth-child(5) > div:nth-child(2){
  margin-right:-16px;
  padding-right:34px;
  border-radius:40px 0 0 40px;
  text-align:right;
}
 
body > div > *:nth-child(5) h3{
  display:inline-block;
  margin:0 14px 6px 0;
  font-size:0.92rem;
  font-weight:800;
}
body > div > *:nth-child(5) p{
  margin:4px 0 0;
  font-size:0.86rem;
  font-weight:600;
  line-height:1.35;
}
 
/* numbered star badges on rows 1-3, sitting on the ribbon's outer (right) end */
body > div > *:nth-child(5) > div:nth-child(1)::after,
body > div > *:nth-child(5) > div:nth-child(2)::after,
body > div > *:nth-child(5) > div:nth-child(3)::after{
  position:absolute;
  top:-14px;
  right:14px;
  width:40px;
  height:40px;
  z-index:3;
  background:#ffd23f;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  color:var(--ink);
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:0.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
body > div > *:nth-child(5) > div:nth-child(1)::after{ content:"1"; }
body > div > *:nth-child(5) > div:nth-child(2)::after{ content:"2"; }
body > div > *:nth-child(5) > div:nth-child(3)::after{ content:"3"; }
 
/* small plain star badges on rows 4-5, on the ribbon's outer (left) end, no number */
body > div > *:nth-child(5) > div:nth-child(4)::after,
body > div > *:nth-child(5) > div:nth-child(5)::after{
  content:"";
  position:absolute;
  top:-10px;
  left:14px;
  width:26px;
  height:26px;
  z-index:3;
  background:#8a4fe0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
 
/* weapon 5's third div: the Aino-chibi flourish, bottom-left of that row */
body > div > *:nth-child(5) > div:nth-child(5) > div:nth-child(3){
  position:absolute;
  left:-6px;
  bottom:-26px;
  z-index:4;
}
body > div > *:nth-child(5) > div:nth-child(5) > div:nth-child(3) img{
  width:76px;
  height:auto;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.4));
}

/* ============================================================
   RESPONSIVE: tablets and phones
   Strategy: outer 3-column grid collapses to a single stacked
   column (character card, then each pill immediately followed
   by its panel, in source order). The materials panel keeps its
   own internal grid but shrinks slot size in two steps, and gets
   a horizontal-scroll safety net on very narrow screens so
   nothing is ever cropped or overlapping.
   ============================================================ */

@media (max-width: 860px){
  body{
    padding:96px 5vw 50px;
  }

  header{
    padding:12px 18px;
  }
  header img{ height:34px; }

  .back-space{
    top:14px;
    right:14px;
  }
  .back-space a{
    padding:7px 14px;
    font-size:0.8rem;
  }

  /* stack: character card, then each pill+panel pair in source order */
  body > div{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap:16px;
    max-width:520px;
  }
  body > div > *:nth-child(1),
  body > div > *:nth-child(2),
  body > div > *:nth-child(3),
  body > div > *:nth-child(4),
  body > div > *:nth-child(5),
  body > div > *:nth-child(6),
  body > div > *:nth-child(7){
    grid-column:1;
    grid-row:auto;
  }

  body > div > *:nth-child(1){
    max-width:280px;
    margin:0 auto;
  }

  /* shrink material slots so 6 columns fit a phone-width panel */
  body > div > *:nth-child(3){
    grid-template-columns: 56px repeat(4, 56px) 56px;
    column-gap:8px;
    row-gap:10px;
    padding:20px 16px 22px;
    overflow-x:auto;
  }
  body > div > *:nth-child(3) h2{
    font-size:1.25rem;
  }
  body > div > *:nth-child(3) > div{
    width:56px; height:56px;
  }
  body > div > *:nth-child(3) > div p{
    font-size:0.62rem;
    padding:1px 5px;
  }
}

@media (max-width: 420px){
  /* very narrow phones: let the panel scroll horizontally rather
     than shrinking icons past legibility */
  body > div > *:nth-child(3){
    grid-template-columns: 52px repeat(4, 52px) 52px;
    width:100%;
  }
  body > div > *:nth-child(3) > div{
    width:52px; height:52px;
    flex-shrink:0;
  }
}