@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;
}

/* ============================================================
   ELEMENT THEMES
   ============================================================ */

/* PYRO */
body[data-element="pyro"] {
  --bg-grad: linear-gradient(135deg, #ff3f5f, #c2365e, #8b0a2a);
  --mat-grad: linear-gradient(160deg, #6577ee, #ff348c, #781f20);
  --weapon-grad: linear-gradient(135deg, #ffb65e, #ff348c, #781f20);
  --team-grad: linear-gradient(160deg, #9be06a, #ff348c, #781f20);
}

/* CRYO */
body[data-element="cryo"] {
  --bg-grad: linear-gradient(135deg, #bcdbf1, #71d3f4, #0cb8b8); 
  --mat-grad: linear-gradient(160deg, #6577ee, #71d3f4, #1f72ad);
  --weapon-grad: linear-gradient(135deg, #ffb65e, #71d3f4, #1f72ad);
  --team-grad: linear-gradient(160deg, #9be06a, #71d3f4, #1f72ad);
}

/* HYDRO */
body[data-element="hydro"] {
  --bg-grad: linear-gradient(135deg, #4120ad, #124da0, #0f3168);
  --mat-grad: linear-gradient(160deg, #6577ee, #3333c9, #1e1e8c);
  --weapon-grad: linear-gradient(135deg, #ffb65e, #3333c9, #1e1e8c);
  --team-grad: linear-gradient(160deg, #9be06a, #3333c9, #1e1e8c);
}

/* GEO */
body[data-element="geo"] {
  --bg-grad: linear-gradient(135deg, #ffee35, #aa7d1c, #664d07);
  --mat-grad: linear-gradient(160deg, #6577ee, #dfe22c, #a5820e);
  --weapon-grad: linear-gradient(135deg, #ffb65e, #dfe22c, #a5820e);
  --team-grad: linear-gradient(160deg, #9be06a, #dfe22c, #a5820e);
}

/* DENDRO */
body[data-element="dendro"] {
  --bg-grad: linear-gradient(135deg, #28ffa2, #39e854, #2fa707);
  --mat-grad: linear-gradient(160deg, #6577ee, #23ff98, #5cb831);
  --weapon-grad: linear-gradient(135deg, #ffb65e, #23ff98, #5cb831);
  --team-grad: linear-gradient(160deg, #9be06a, #23ff98, #5cb831);
}

/* ELECTRO */
body[data-element="electro"] {
  --bg-grad: linear-gradient(135deg, #e93fff, #7c36c2, #4a0896);
  --mat-grad: linear-gradient(160deg, #6577ee, #833fc8, #4e1f78);
  --weapon-grad: linear-gradient(135deg, #ffb65e, #833fc8, #4e1f78);
  --team-grad: linear-gradient(160deg, #9be06a, #833fc8, #4e1f78);
}

/* ANEMO */
body[data-element="anemo"] {
  --bg-grad: linear-gradient(135deg, #2faeca, #22d1a0, #15b0a3);
  --mat-grad: linear-gradient(160deg, #6577ee, #23ffe2, #31b890);
  --weapon-grad: linear-gradient(135deg, #ffb65e, #23ffe2, #31b890);
  --team-grad: linear-gradient(160deg, #9be06a, #23ffe2, #31b890);
}

/* ============================================================
   COMMON BASE STYLES (SAME FOR ALL CHARACTERS)
   ============================================================ */

*{ box-sizing:border-box; }

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

body{
  padding:110px 5vw 60px;

  /* Uses dynamic theme variable */
  background: var(--bg-grad, linear-gradient(135deg, #1c2030, #0f3d3e)); 
  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 / BACK BUTTON */
.site-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));
}
.site-header img{ height:44px; }

.role-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  vertical-align: middle;
}

.role {
  width: auto;
  max-width: 50px;
  height: auto;
  display: block;
  filter: drop-shadow(1px 1px 1px #ffffff);
}

.back-space{
  position:fixed;
  top:20px;
  right:auto;
  z-index:11;
  padding-top: 35px;
}
.back-space a{
  display:inline-block;
  padding:13px 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 */
.char-page{
  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 */
.char-card{
  grid-column:1;
  grid-row:1 / 4;
  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);
}
.char-card h1{
  font-family:'Cinzel', serif;
  color:var(--gold-bright);
  font-size:1.4rem;
  margin:2px 0 14px;
}
.char-card img{
  width:100%;
  border-radius:10px;
  display:block;
}
.char-role-info{
  color:#f0db52;
  font-weight:bold;
  line-height:2.2;
}

.roles-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.role-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.role {
  width: auto;
  max-width: 32px;
  height: auto;
  display: block;
  filter: drop-shadow(1px 1px 1px #ffffff);
}

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

/* Panel Column Placements */
.panel-materials{ grid-column:3; grid-row:1; }
.panel-weapon{ grid-column:3; grid-row:2; min-height:0; }
.panel-team{ grid-column:3; grid-row:3; min-height:0; }

/* MATERIALS PANEL */
.panel-materials{
  background: var(--mat-grad);
  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;
}

.mat-title{
  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);
}
.mat-title--materials{ grid-row:1; }
.mat-title--talent{ grid-row:5; margin-top:6px; }

/* Ascension Row Placements */
.slot-exp{ grid-column:1; grid-row:2 / 4; }
.slot-a1{ grid-column:2; grid-row:2; }
.slot-a2{ grid-column:3; grid-row:2; }
.slot-a3{ grid-column:4; grid-row:2; }
.slot-a4{ grid-column:5; grid-row:2; }
.slot-b1{ grid-column:2; grid-row:3; }
.slot-b2{ grid-column:3; grid-row:3; }
.slot-b3{ grid-column:4; grid-row:3; }
.slot-b4{ grid-column:5; grid-row:3; }
.slot-end{ grid-column:6; grid-row:2 / 4; }

.toggle-row{
  grid-column: 1 / 2;
  grid-row: 6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}
.toggle-row p{
  margin:0;
  font-size:0.55rem;
  font-weight:700;
  line-height:1.15;
  color:#fff;
}

.switch{
  position:relative;
  display:inline-block;
  width:34px;
  height:18px;
  flex-shrink:0;
}
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute;
  inset:0;
  cursor:pointer;
  background-color:#fff;
  border-radius:999px;
  transition: background-color 0.3s ease;
}
.slider::before{
  content:"";
  position:absolute;
  height:14px; width:14px;
  left:2px; bottom:2px;
  background-color:#132330;
  border-radius:50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.switch input:checked + .slider{ background-color:#111; }
.switch input:checked + .slider::before{
  transform:translateX(16px);
  background-color:#fff;
}

/* Talent Row Placements */
.slot-t1{ grid-column:2; grid-row:6; }
.slot-t2{ grid-column:3; grid-row:6; }
.slot-t3{ grid-column:4; grid-row:6; }
.slot-c1{ grid-column:2; grid-row:7; }
.slot-c2{ grid-column:3; grid-row:7; }
.slot-c3{ grid-column:4; grid-row:7; }
.slot-crown{ grid-column:5; grid-row:6; }
.slot-boss{ grid-column:5; grid-row:7; }

.mat-slot{
  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;
}
.mat-slot img{ width:64%; height:64%; object-fit:contain; }
.count-badge{
  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);
}

.mat-slot--tall{ border-radius:14px; width:auto; height:auto; }
.mat-slot--square{ border-radius:14px; width:auto; height:auto; }
.mat-slot--square img{ width:60%; height:60%; }

/* WEAPON PANEL */
.panel-weapon{
  background: var(--weapon-grad);
  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;
}

.weapon-row{
  position:relative;
  display:flex;
  align-items:center;
  flex-direction:row;
}
.weapon-row--reverse{ flex-direction:row-reverse; }

.weapon-figure{
  flex:0 0 auto;
  width:118px;
  display:flex;
  flex-direction:column;
  z-index:2;
}
.weapon-figure img{
  width:100%;
  height:112px;
  object-fit:cover;
  border-radius:50px 50px 0 0;
  background:linear-gradient(160deg, #e0cf6f, #c9c03f);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.25);
}
.weapon-figure2 img{ background:linear-gradient(160deg, #a06fe0, #6f3fc9); }
.weapon-figure3 img{ background:linear-gradient(160deg, #466dda, #0e39d1); }

.weapon-figure 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%);
}

.weapon-stats{
  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);
}
.weapon-stats--right{
  margin-left:-16px;
  padding-left:34px;
  border-radius:0 40px 40px 0;
}
.weapon-stats--left{
  margin-right:-16px;
  padding-right:34px;
  border-radius:40px 0 0 40px;
  text-align:right;
}
.weapon-stats h3{
  display:inline-block;
  margin:0 14px 6px 0;
  font-size:0.92rem;
  font-weight:800;
}
.weapon-stats p{
  margin:4px 0 0;
  font-size:0.86rem;
  font-weight:600;
  line-height:1.35;
}

/* TEAM PANEL */


.panel-team{
  position:relative;
  background: var(--team-grad);
  border-radius:18px;
  padding:44px 26px 30px;
  margin-top:5px;
  box-shadow:0 16px 36px rgba(0,0,0,0.35);

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:20px;
  row-gap:40px;
}

.team-panel-icon{
  position:absolute;
  top:0; right:0;
  transform: translateX(-50%);
  width:70px; height:70px;
  object-fit:contain;
  z-index:2;
}

.team{
  flex:1 1 100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:14px;
}

.team-title{
  margin:0;
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:1.1rem;
  color: white;
  text-align:center;
  text-shadow:0 2px 6px rgba(0,0,0,0.35);
}

.team-shelf{
  --grid-width:300px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  width:min(100%, var(--grid-width));
  margin-inline:auto;
}

.team-icon{
  --weapon-size:34%;
  --badge-size:26%;
  --badge-edge:3%;
  --badge-gap:2%;

  position:relative;
  isolation:isolate;
  aspect-ratio:1 / 1;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(160deg, #b3ec7c, var(--green));
  box-shadow:0 8px 18px rgba(0,0,0,0.3);
  transition:transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, filter 0.35s ease;
}
.team-icon:active{ transform:scale(0.98); }

.team-bg, .team-char, .team-weapon, .team-artifact{
  position:absolute;
  display:block;
}

.team-bg{ inset:0; width:100%; height:100%; object-fit:cover; }
.team-char{
  inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center bottom;
  transform-origin:center bottom;
  transition:transform 0.5s cubic-bezier(.2,.8,.2,1);
}

.team-weapon, .team-artifact{
  z-index:2;
  aspect-ratio:1 / 1;
  object-fit:contain;
  border-radius:50%;
  background: linear-gradient(135deg, #b5f9ff, #5398a9, #646464);
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
.team-weapon{
  top:var(--badge-edge);
  right:var(--badge-edge);
  width:var(--weapon-size);
  padding:0%;
}
.team-artifact{
  top:calc(var(--badge-edge) + var(--weapon-size) + var(--badge-gap));
  right:calc(var(--badge-edge) + (var(--weapon-size) - var(--badge-size)) / 2);
  width:var(--badge-size);
  padding:1%;
}

@media (hover:hover) and (pointer:fine){
  .team-icon:hover{
    z-index:3;
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 0 0 2px rgba(255,255,255,0.6), 0 18px 34px rgba(0,0,0,0.45);
  }
  .team-icon:hover .team-char{ transform:scale(1.08); }
  .team-icon:hover .team-weapon, .team-icon:hover .team-artifact{ transform:scale(1.08); }
  .team-icon .team-weapon:hover, .team-icon .team-artifact:hover{
    transform:scale(1.15);
    box-shadow:0 6px 14px rgba(0,0,0,0.4);
  }
  .team-shelf:has(.team-icon:hover) .team-icon:not(:hover){
    filter:brightness(0.78) saturate(0.85);
  }
}

@media (min-width:861px) and (max-width:1179px){
  .panel-team{ padding-top:56px; }
  .team-panel-icon{ width:48px; height:48px; }
}

@media (min-width:1180px){
  .panel-team{ padding-top:64px; }
  .team-panel-icon{ width:56px; height:56px; }
  .team{ flex:0 1 calc(50% - 10px); }
}

/* RESPONSIVE */
@media (max-width: 860px){
  body{ padding:96px 5vw 50px; }
  .site-header{ padding:12px 18px; }
  .site-header img{ height:34px; }
  .back-space{ top:14px; left:14px; }
  .back-space a{ padding:7px 14px; font-size:0.8rem; }

  .char-page{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap:16px;
    max-width:520px;
  }
  .char-card, .pill, .panel-materials, .panel-weapon, .panel-team{
    grid-column:1; grid-row:auto;
  }
  .char-card{ max-width:280px; margin:0 auto; }

  .panel-materials{
    grid-template-columns: 56px repeat(4, 56px) 56px;
    column-gap:8px; row-gap:10px;
    padding:20px 16px 22px;
    overflow-x:auto;
  }
  .mat-title{ font-size:1.25rem; }
  .mat-slot{ width:56px; height:56px; }
  .count-badge{ font-size:0.62rem; padding:1px 5px; }

  .panel-weapon{ padding:22px 16px 20px; gap:26px; }
  .weapon-figure{ width:82px; }
  .weapon-figure img{ height:78px; border-radius:34px 34px 0 0; }
  .weapon-figure h2{ font-size:0.64rem; padding:7px 4px 11px; }
  .weapon-stats{ padding:11px 14px; }
  .weapon-stats--right{ padding-left:22px; }
  .weapon-stats--left{ padding-right:22px; }
  .weapon-stats h3{ font-size:0.76rem; margin:0 8px 4px 0; }
  .weapon-stats p{ font-size:0.74rem; }

  .panel-team{ padding:56px 16px 22px; row-gap:30px; }
  .team{ gap:12px; }
  .team-panel-icon{ width:48px; height:48px; }
  .team-shelf{ --grid-width:280px; gap:8px; }
  .team-icon{ border-radius:14px; }
  .team-title{ font-size:0.95rem; }
}

@media (max-width: 420px){
  .panel-materials{ grid-template-columns: 52px repeat(4, 52px) 52px; width:100%; }
  .mat-slot{ width:52px; height:52px; flex-shrink:0; }
  .weapon-row{ overflow-x:auto; }
}

/* ============================================================
   SWIPE PORTRAIT
   ============================================================ */

.char-card{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;       /* vertical scrolling stays native */
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.char-card.is-swiping{ cursor:grabbing; }
.char-card:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
}
.char-card img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}

.card-inner{
  transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .32s ease;
  will-change:transform;
}
.card-inner.is-dragging{ transition:none; }

.swipe-hint{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(243,221,147,.4);
  background:rgba(8,38,39,.6);
  color:var(--gold-bright);
  font-family:'Sora', sans-serif;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity .25s ease, background .2s ease, transform .2s ease;
  z-index:2;
}
.char-card:hover .swipe-hint,
.char-card:focus .swipe-hint,
.char-card:focus-within .swipe-hint{ opacity:.9; }
.swipe-hint:hover{ background:rgba(22,63,64,.95); }
.swipe-hint:active{ transform:translateY(-50%) scale(.94); }
.swipe-hint:disabled{ opacity:0 !important; pointer-events:none; }
.swipe-hint--prev{ left:6px; }
.swipe-hint--next{ right:6px; }
.swipe-hint:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:2px;
  opacity:1;
}

/* Touch devices have no hover, so keep the hint visible */
@media (hover: none){
  .swipe-hint{ opacity:.6; }
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Page-wide swipe transition (View Transitions API) */
@keyframes swipe-out-left{ to{ transform:translateX(-9%); opacity:0; } }
@keyframes swipe-in-right{ from{ transform:translateX(9%); opacity:0; } }
@keyframes swipe-out-right{ to{ transform:translateX(9%); opacity:0; } }
@keyframes swipe-in-left{ from{ transform:translateX(-9%); opacity:0; } }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.34s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
html[data-swipe-dir="next"]::view-transition-old(root){ animation-name:swipe-out-left; }
html[data-swipe-dir="next"]::view-transition-new(root){ animation-name:swipe-in-right; }
html[data-swipe-dir="prev"]::view-transition-old(root){ animation-name:swipe-out-right; }
html[data-swipe-dir="prev"]::view-transition-new(root){ animation-name:swipe-in-left; }

@media (prefers-reduced-motion: reduce){
  .card-inner{ transition:none; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration:.01ms; }
}