:root{
  --bg:#08070b;
  --panel:#100d13;
  --panel2:#17111a;
  --line:rgba(255,255,255,.11);
  --line2:rgba(237,106,174,.28);

  --text:#fff7fc;
  --muted:#9e929f;

  --pink:#ef71b1;
  --pink2:#b84c84;
  --purple:#9464b4;
  --gold:#e6b85c;

  --max:1560px;
}


*{
  box-sizing:border-box;
}


html{
  background:var(--bg);
}


body{
  margin:0;

  min-height:100vh;

  overflow-x:hidden;

  color:var(--text);

  background:
    radial-gradient(
      circle at 88% 7%,
      rgba(124,69,147,.22),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 28%,
      rgba(232,72,148,.10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #08070b,
      #120b14 65%,
      #0a0810
    );

  font-family:
    Inter,
    "Yu Gothic",
    system-ui,
    sans-serif;
}


.hud-grid{
  position:fixed;

  inset:0;

  z-index:-1;

  pointer-events:none;

  opacity:.17;

  background-image:
    linear-gradient(
      rgba(255,255,255,.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    64px 64px;
}


.top-header{
  width:min(
    var(--max),
    calc(100% - 36px)
  );

  min-height:112px;

  margin:auto;

  display:grid;

  grid-template-columns:
    260px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:28px;

  border-bottom:
    1px solid
    var(--line2);
}


.brand{
  width:220px;
}


.brand img{
  width:100%;
  height:auto;

  display:block;
}


.system-title small{
  display:block;

  color:#e3a5c7;

  font-family:Georgia,serif;

  font-size:14px;

  letter-spacing:.17em;
}


.system-title strong{
  display:block;

  margin-top:4px;

  font-family:Georgia,serif;

  font-size:
    clamp(
      1.5rem,
      2vw,
      2.2rem
    );

  letter-spacing:.07em;
}


.system-title span{
  display:block;

  margin-top:6px;

  color:#aaa0ab;

  font-size:9px;

  letter-spacing:.18em;
}


.header-side{
  display:flex;

  align-items:center;

  gap:10px;
}


.header-side a,
.preview-chip{
  min-height:38px;

  padding:0 14px;

  display:flex;

  align-items:center;

  border:
    1px solid
    var(--line);

  color:#d8ccd7;

  text-decoration:none;

  font-size:9px;

  font-weight:900;

  letter-spacing:.12em;
}


.preview-chip{
  color:#ffd083;

  border-color:
    rgba(255,207,115,.35);
}


.hud-tabs{
  min-height:52px;

  display:flex;

  border-bottom:
    1px solid
    var(--line2);

  background:
    rgba(4,4,7,.58);
}


.hud-tabs button{
  min-width:190px;

  padding:0 28px;

  border:0;

  border-right:
    1px solid
    var(--line);

  color:#a99daa;

  background:transparent;

  font-family:Georgia,serif;

  letter-spacing:.11em;

  cursor:pointer;
}


.hud-tabs button.is-active{
  color:#fff;

  background:
    linear-gradient(
      110deg,
      rgba(237,102,172,.75),
      rgba(151,73,137,.38)
    );

  box-shadow:
    inset 0 -2px
    var(--pink);
}


main{
  width:min(
    var(--max),
    calc(100% - 36px)
  );

  margin:auto;

  padding:
    25px 0
    80px;
}


.summary-strip{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  margin-bottom:18px;

  border:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.018);
}


.summary-strip article{
  min-height:110px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:22px;

  border-right:
    1px solid
    var(--line);
}


.summary-strip article:last-child{
  border-right:0;
}


.summary-strip article > span{
  color:#ffacd3;

  font-size:34px;
}


.summary-strip small{
  display:block;

  color:#b7a9b6;

  font-family:Georgia,serif;

  font-size:11px;

  letter-spacing:.12em;
}


.summary-strip strong{
  display:block;

  margin-top:5px;

  font-family:Georgia,serif;

  font-size:30px;
}


.dashboard{
  display:grid;

  grid-template-columns:
    minmax(480px,.92fr)
    minmax(600px,1.08fr);

  gap:10px;
}


.supporter-panel,
.profile-panel{
  min-height:690px;

  border:
    1px solid
    var(--line2);

  border-radius:11px;

  overflow:hidden;

  background:
    linear-gradient(
      150deg,
      rgba(21,15,24,.96),
      rgba(8,8,12,.97)
    );
}


.supporter-panel > header{
  min-height:88px;

  padding:20px;

  border-bottom:
    1px solid
    var(--line);
}


.supporter-panel header small,
.profile-kicker{
  color:#e1c3d6;

  font-family:Georgia,serif;

  font-size:11px;

  letter-spacing:.15em;
}


.supporter-panel h1{
  margin:
    7px 0 0;

  font-size:20px;
}


.rank-filter{
  padding:14px;

  display:flex;

  flex-wrap:wrap;

  gap:7px;

  border-bottom:
    1px solid
    var(--line);
}


.rank-filter button{
  min-height:34px;

  padding:0 12px;

  color:#b9aeba;

  border:
    1px solid
    #554253;

  border-radius:5px;

  background:
    rgba(255,255,255,.025);

  font-size:9px;

  letter-spacing:.06em;

  cursor:pointer;
}


.rank-filter button.is-active{
  color:#fff;

  border-color:#f08abb;

  background:
    linear-gradient(
      110deg,
      #df6da5,
      #a84c87
    );
}


.search-box{
  margin:
    12px 14px;

  min-height:42px;

  display:flex;

  align-items:center;

  border:
    1px solid
    var(--line);

  background:#0a090d;
}


.search-box input{
  width:100%;

  min-width:0;

  padding:0 13px;

  color:#fff;

  border:0;

  outline:0;

  background:transparent;
}


.search-box span{
  padding-right:13px;

  color:#e397bd;
}


.list-head,
.supporter-row{
  display:grid;

  grid-template-columns:
    46px
    52px
    minmax(110px,1fr)
    120px
    70px
    130px;

  align-items:center;

  gap:7px;
}


.list-head{
  padding:
    8px 14px;

  color:#7c747f;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  font-size:8px;

  letter-spacing:.1em;
}


.supporter-row{
  width:100%;

  min-height:63px;

  padding:
    7px 14px;

  color:#eee5ed;

  border:0;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);

  background:
    transparent;

  text-align:left;

  cursor:pointer;
}


.supporter-row:hover,
.supporter-row.is-active{
  background:
    linear-gradient(
      90deg,
      rgba(226,80,154,.25),
      rgba(88,43,86,.10)
    );

  box-shadow:
    inset 3px 0
    var(--pink);
}


.row-rank{
  font-family:Georgia,serif;

  color:#f6d78d;

  font-size:16px;

  text-align:center;
}


.avatar{
  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  overflow:hidden;

  border:
    2px solid
    rgba(239,113,177,.48);

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #6e3d6c,
      #241624
    );

  font-weight:900;
}


.avatar img{
  width:100%;
  height:100%;

  object-fit:cover;
}


.row-name{
  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;

  font-weight:800;
}


.row-badge{
  display:flex;

  align-items:center;

  gap:7px;

  font-family:Georgia,serif;

  font-size:10px;
}


.mini-emblem{
  width:28px;
  height:28px;

  display:grid;

  place-items:center;

  clip-path:
    polygon(
      50% 0,
      92% 22%,
      92% 76%,
      50% 100%,
      8% 76%,
      8% 22%
    );

  font-size:9px;

  font-weight:900;
}


.rank-bronze{
  background:
    linear-gradient(
      145deg,
      #773d32,
      #c97957
    );
}


.rank-silver{
  background:
    linear-gradient(
      145deg,
      #68707f,
      #d5d8df
    );

  color:#24262b;
}


.rank-gold{
  background:
    linear-gradient(
      145deg,
      #825519,
      #f0c961
    );

  color:#241807;
}


.rank-platinum{
  background:
    linear-gradient(
      145deg,
      #787c93,
      #d8cafa,
      #8b60a0
    );
}


.rank-diamond{
  background:
    linear-gradient(
      145deg,
      #4c4de6,
      #b755d9,
      #f278b2
    );

  box-shadow:
    0 0 18px
    rgba(174,81,223,.45);
}


.rank-special{
  background:
    linear-gradient(
      145deg,
      #db4c98,
      #7942a5,
      #f4a8cb
    );
}


.row-streak{
  color:#d8cad4;

  font-size:11px;
}


.row-progress{
  display:flex;

  align-items:center;

  gap:8px;

  font-size:10px;
}


.tiny-track{
  height:8px;

  flex:1;

  border-radius:10px;

  overflow:hidden;

  background:#30263a;
}


.tiny-track i{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #e762aa,
      #f7a4d0
    );
}


.profile-panel{
  padding:19px;
}


.profile-empty{
  min-height:640px;

  display:grid;

  place-items:center;

  color:#756c77;
}


.profile-head{
  display:grid;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;

  gap:18px;

  align-items:center;

  padding:
    10px 8px 22px;

  border-bottom:
    1px solid
    var(--line);
}


.profile-avatar{
  position:relative;

  width:116px;
  height:116px;

  padding:7px;

  border-radius:50%;

  background:
    conic-gradient(
      #ee77b2,
      #9458b1,
      #f6b6d8,
      #ee77b2
    );

  box-shadow:
    0 0 30px
    rgba(230,83,159,.20);
}


.profile-avatar > div{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  overflow:hidden;

  border-radius:50%;

  background:#211522;

  font-size:35px;

  font-weight:900;
}


.profile-avatar img{
  width:100%;
  height:100%;

  object-fit:cover;
}


.profile-name h2{
  margin:
    4px 0 3px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.7rem
    );
}


.profile-name p{
  margin:0;

  color:#a995a4;
}


.profile-id{
  align-self:start;

  color:#a095a1;

  font-size:9px;

  letter-spacing:.12em;
}


.dog-tag{
  position:relative;

  margin-top:20px;

  min-height:230px;

  padding:
    31px 38px;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items:center;

  gap:20px;

  overflow:hidden;

  border-radius:
    75px 28px 28px 75px;

  color:#16151a;

  background:
    linear-gradient(
      130deg,
      #6d6d75,
      #dad7da 36%,
      #8c8990 67%,
      #d8d5d7
    );

  box-shadow:
    inset 0 0 0 2px
    rgba(255,255,255,.22),
    inset 0 0 30px
    rgba(0,0,0,.25),
    0 22px 60px
    rgba(0,0,0,.32);
}


.dog-tag::before{
  content:"";

  position:absolute;

  left:19px;
  top:50%;

  width:24px;
  height:24px;

  transform:
    translateY(-50%);

  border:
    5px solid #55565b;

  border-radius:50%;

  background:#121116;
}


.dog-tag.theme-black{
  color:#eee;

  background:
    linear-gradient(
      130deg,
      #15151a,
      #424047 45%,
      #151419
    );
}


.dog-tag.theme-gold{
  background:
    linear-gradient(
      130deg,
      #8c6126,
      #efd081 45%,
      #99712d
    );
}


.dog-tag.theme-platinum{
  background:
    linear-gradient(
      130deg,
      #828a9a,
      #efeefa,
      #9789aa
    );
}


.dog-tag.theme-diamond{
  background:
    linear-gradient(
      130deg,
      #7d7790,
      #e5e0e8 38%,
      #9f91b2 68%,
      #eeeaf1
    );
}


.dog-tag.theme-yukinon{
  background:
    linear-gradient(
      130deg,
      #71466a,
      #f3c1dc 40%,
      #b173ae 70%,
      #f6d2e5
    );
}


.tag-left{
  padding-left:18px;
}


.tag-label{
  font-family:Georgia,serif;

  font-size:13px;

  letter-spacing:.12em;
}


.tag-name{
  margin:
    18px 0 13px;

  font-family:
    Impact,
    sans-serif;

  font-size:
    clamp(
      2rem,
      4vw,
      3.3rem
    );

  letter-spacing:.02em;
}


.tag-id{
  font-family:
    ui-monospace,
    monospace;

  font-weight:900;

  letter-spacing:.08em;
}


.tag-sign{
  margin-top:10px;

  color:#c7337d;

  font-family:
    "Segoe Script",
    cursive;

  font-size:19px;
}


.tag-right{
  padding-left:22px;

  border-left:
    1px solid
    rgba(0,0,0,.27);
}


.tag-rank-line{
  display:flex;

  align-items:center;

  gap:15px;
}


.big-emblem{
  width:86px;
  height:86px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  clip-path:
    polygon(
      50% 0,
      90% 20%,
      100% 58%,
      70% 92%,
      50% 100%,
      30% 92%,
      0 58%,
      10% 20%
    );

  color:white;

  font-family:Georgia,serif;

  font-size:26px;

  font-weight:900;

  text-shadow:
    0 2px 5px
    rgba(0,0,0,.4);
}


.tag-stat small{
  display:block;

  font-size:10px;

  letter-spacing:.12em;
}


.tag-stat strong{
  display:block;

  margin:
    3px 0 12px;

  font-family:
    Impact,
    sans-serif;

  font-size:21px;

  letter-spacing:.04em;
}


.status-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr 1.1fr;

  margin-top:16px;

  border:
    1px solid
    var(--line);
}


.status-cell{
  min-height:190px;

  padding:18px;

  border-right:
    1px solid
    var(--line);
}


.status-cell:last-child{
  border-right:0;
}


.status-cell > small,
.detail-section > header small{
  color:#d8c7d4;

  font-family:Georgia,serif;

  font-size:10px;

  letter-spacing:.12em;
}


.badge-feature{
  min-height:130px;

  display:flex;

  align-items:center;

  gap:15px;
}


.badge-feature .big-emblem{
  width:92px;
  height:92px;
}


.badge-feature strong{
  font-family:Georgia,serif;

  font-size:17px;
}


.next-badge{
  opacity:.50;
}


.main-progress{
  margin-top:25px;
}


.progress-percent{
  text-align:right;

  font-family:Georgia,serif;

  font-size:20px;
}


.progress-track{
  height:18px;

  margin:
    7px 0 13px;

  overflow:hidden;

  border:
    1px solid
    #744268;

  border-radius:20px;

  background:#211723;
}


.progress-track i{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #e963ab,
      #f4a1d0,
      #d678df
    );

  box-shadow:
    0 0 18px
    rgba(235,91,174,.55);
}


.progress-current{
  color:#d8bfce;

  font-family:Georgia,serif;

  font-size:17px;
}


.progress-remain{
  margin-top:14px;

  color:#cda7be;
}


.progress-remain strong{
  color:#ff86c0;

  font-size:24px;
}


.detail-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:12px;

  margin-top:12px;
}


.detail-section{
  padding:17px;

  border:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.015);
}


.history-list{
  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:9px;

  margin-top:17px;
}


.history-item{
  display:flex;

  align-items:center;

  gap:8px;

  color:#aaa1aa;

  font-size:9px;
}


.history-item .mini-emblem{
  width:38px;
  height:38px;
}


.title-list{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:9px;

  margin-top:17px;
}


.special-title{
  min-height:70px;

  padding:10px;

  display:flex;

  align-items:center;

  gap:10px;

  border:
    1px solid
    #63465c;

  background:
    linear-gradient(
      130deg,
      rgba(221,71,148,.18),
      rgba(91,45,89,.15)
    );
}


.special-title i{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  color:#f6c3df;

  font-style:normal;

  font-size:20px;
}


.special-title small{
  display:block;

  color:#b69cac;

  font-size:8px;
}


.special-title strong{
  display:block;

  margin-top:3px;

  font-size:10px;
}


.profile-note{
  margin:
    14px 4px 0;

  color:#aa9baa;

  font-family:Georgia,serif;

  line-height:1.8;
}


footer{
  width:min(
    var(--max),
    calc(100% - 36px)
  );

  margin:auto;

  padding:
    25px 0 40px;

  display:flex;

  justify-content:space-between;

  color:#665d68;

  border-top:
    1px solid
    var(--line);

  font-size:9px;

  letter-spacing:.13em;
}


@media(max-width:1150px){

  .dashboard{
    grid-template-columns:
      1fr;
  }


  .supporter-panel,
  .profile-panel{
    min-height:auto;
  }

}


@media(max-width:760px){

  .top-header{
    min-height:82px;

    grid-template-columns:
      145px 1fr auto;

    gap:10px;
  }


  .brand{
    width:140px;
  }


  .system-title small,
  .system-title span{
    display:none;
  }


  .system-title strong{
    font-size:13px;
  }


  .preview-chip{
    display:none !important;
  }


  .header-side a{
    padding:0 8px;

    font-size:7px;
  }


  .hud-tabs{
    overflow-x:auto;
  }


  .hud-tabs button{
    min-width:120px;

    padding:0 15px;

    font-size:9px;
  }


  main{
    width:
      calc(100% - 20px);
  }


  .summary-strip{
    grid-template-columns:
      1fr;
  }


  .summary-strip article{
    min-height:77px;

    justify-content:flex-start;

    padding-left:28px;

    border-right:0;

    border-bottom:
      1px solid
      var(--line);
  }


  .summary-strip article:last-child{
    border-bottom:0;
  }


  .list-head{
    display:none;
  }


  .supporter-row{
    grid-template-columns:
      34px 44px
      minmax(0,1fr)
      86px;

    min-height:67px;
  }


  .supporter-row
  .row-streak,
  .supporter-row
  .row-progress{
    display:none;
  }


  .profile-panel{
    padding:11px;
  }


  .profile-head{
    grid-template-columns:
      80px 1fr;
  }


  .profile-avatar{
    width:78px;
    height:78px;
  }


  .profile-id{
    grid-column:1/-1;
  }


  .dog-tag{
    min-height:0;

    padding:
      28px 22px 24px
      42px;

    grid-template-columns:
      1fr;

    border-radius:
      46px 20px 20px 46px;
  }


  .tag-left{
    padding-left:5px;
  }


  .tag-right{
    padding:
      16px 0 0;

    border-left:0;

    border-top:
      1px solid
      rgba(0,0,0,.25);
  }


  .status-grid{
    grid-template-columns:
      1fr;
  }


  .status-cell{
    min-height:0;

    border-right:0;

    border-bottom:
      1px solid
      var(--line);
  }


  .detail-grid{
    grid-template-columns:
      1fr;
  }


  .title-list{
    grid-template-columns:
      1fr 1fr;
  }

}


@media(max-width:430px){

  .system-title{
    display:none;
  }


  .top-header{
    grid-template-columns:
      1fr auto;
  }


  .row-badge{
    font-size:8px;
  }


  .title-list{
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   YUKINON PALMU VISUAL POLISH V2.5
   FINAL SUPPORTER STATUS DESIGN
   ========================================================= */


/* ---------------------------------------------------------
   RANK COLORS
   --------------------------------------------------------- */

:root{
  --rank-bronze:#cb7a58;
  --rank-silver:#d8dce5;
  --rank-gold:#f2ca66;
  --rank-platinum:#d9d2ed;
  --rank-diamond:#ca74f3;
  --rank-special:#ff78ba;
}


/* ---------------------------------------------------------
   PROFILE HUD
   --------------------------------------------------------- */

.profile-panel{
  position:relative;
  isolation:isolate;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 24px 70px rgba(0,0,0,.30);
}


.profile-panel::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  z-index:-1;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244,104,181,.035),
      transparent
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 5px,
      rgba(255,255,255,.009) 6px
    );
}


/* RANK HUD GLOW */

.profile-panel:has(.rank-bronze){
  border-color:
    rgba(203,122,88,.35);
}

.profile-panel:has(.rank-silver){
  border-color:
    rgba(216,220,229,.35);
}

.profile-panel:has(.rank-gold){
  border-color:
    rgba(242,202,102,.42);
}

.profile-panel:has(.rank-platinum){
  border-color:
    rgba(217,210,237,.40);
}

.profile-panel:has(.rank-diamond){
  border-color:
    rgba(202,116,243,.55);

  box-shadow:
    inset 0 0 40px
      rgba(132,65,181,.07),
    0 0 40px
      rgba(177,73,216,.10),
    0 24px 70px
      rgba(0,0,0,.34);
}

.profile-panel:has(.rank-special){
  border-color:
    rgba(255,120,186,.62);

  box-shadow:
    inset 0 0 55px
      rgba(236,79,162,.09),
    0 0 45px
      rgba(236,79,162,.13),
    0 24px 70px
      rgba(0,0,0,.34);
}


/* ---------------------------------------------------------
   PROFILE ICON ORNAMENT
   --------------------------------------------------------- */

.profile-avatar{
  isolation:isolate;
}


.profile-avatar::before{
  content:"";

  position:absolute;

  inset:-9px;

  z-index:-1;

  border-radius:50%;

  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,154,207,.95) 0deg 4deg,
      transparent 4deg 18deg
    );

  opacity:.65;

  animation:
    yukinon-ring-spin
    20s linear infinite;
}


.profile-avatar::after{
  content:"✦";

  position:absolute;

  right:-8px;
  bottom:2px;

  width:31px;
  height:31px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.55);

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #ef6aaf,
      #74489b
    );

  box-shadow:
    0 0 18px
    rgba(236,87,169,.55);

  font-size:13px;
}


/* ---------------------------------------------------------
   RANK EMBLEMS
   --------------------------------------------------------- */

.big-emblem,
.mini-emblem{
  position:relative;

  border:
    1px solid
    rgba(255,255,255,.30);

  background-size:
    180% 180%;

  filter:
    drop-shadow(
      0 4px 4px
      rgba(0,0,0,.45)
    );

  text-shadow:
    0 1px 2px
      rgba(0,0,0,.60);

  transition:
    transform .25s ease,
    filter .25s ease;

  animation:
    yukinon-emblem-entry
    .5s cubic-bezier(.2,.8,.2,1)
    both;
}


.big-emblem:hover{
  transform:
    translateY(-2px)
    scale(1.04);
}


/* BRONZE */

.rank-bronze{
  color:#fff4ed;

  background:
    linear-gradient(
      145deg,
      #3a2019 0%,
      #a9563b 24%,
      #dc8b64 48%,
      #6d3025 73%,
      #d6805c 100%
    );
}


/* SILVER */

.rank-silver{
  color:#20222a;

  background:
    linear-gradient(
      145deg,
      #4f5661 0%,
      #ebedf1 27%,
      #9299a4 48%,
      #fafbff 67%,
      #6a707a 100%
    );
}


/* GOLD */

.rank-gold{
  color:#271900;

  background:
    linear-gradient(
      145deg,
      #5d3b08 0%,
      #f2c45d 22%,
      #fff0a1 42%,
      #b27311 67%,
      #ffe47c 100%
    );

  filter:
    drop-shadow(
      0 0 8px
      rgba(238,190,72,.28)
    );
}


/* PLATINUM */

.rank-platinum{
  color:#282330;

  background:
    linear-gradient(
      145deg,
      #656979 0%,
      #f5f3ff 23%,
      #a996c1 48%,
      #e7ddf8 70%,
      #777183 100%
    );

  filter:
    drop-shadow(
      0 0 9px
      rgba(209,190,238,.30)
    );
}


/* DIAMOND */

.rank-diamond{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #3c3bbd 0%,
      #8362ed 22%,
      #e16fd8 49%,
      #63c8ff 72%,
      #bc66e7 100%
    );

  filter:
    drop-shadow(
      0 0 9px
      rgba(154,96,244,.65)
    )
    drop-shadow(
      0 0 20px
      rgba(218,87,221,.25)
    );

  animation:
    yukinon-emblem-entry .5s ease both,
    yukinon-diamond-pulse 3s ease-in-out infinite;
}


/* SPECIAL */

.rank-special{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #89245f 0%,
      #ef4ca2 25%,
      #ff99cc 44%,
      #8a4cc9 72%,
      #e34f9d 100%
    );

  filter:
    drop-shadow(
      0 0 10px
      rgba(255,101,183,.70)
    )
    drop-shadow(
      0 0 26px
      rgba(182,76,202,.35)
    );

  animation:
    yukinon-emblem-entry .5s ease both,
    yukinon-special-pulse 2.6s ease-in-out infinite;
}


/* ---------------------------------------------------------
   SUPPORTER LIST SELECTED RANK
   --------------------------------------------------------- */

.supporter-row.is-active{
  position:relative;
}


.supporter-row.is-active::after{
  content:"";

  position:absolute;

  right:0;
  top:8px;
  bottom:8px;

  width:2px;

  background:
    var(--pink);

  box-shadow:
    0 0 12px
    var(--pink);
}


.supporter-row.is-active:has(.rank-gold){
  background:
    linear-gradient(
      90deg,
      rgba(198,143,35,.22),
      rgba(76,47,12,.04)
    );
}


.supporter-row.is-active:has(.rank-platinum){
  background:
    linear-gradient(
      90deg,
      rgba(175,154,207,.22),
      rgba(66,53,75,.04)
    );
}


.supporter-row.is-active:has(.rank-diamond){
  background:
    linear-gradient(
      90deg,
      rgba(132,71,210,.28),
      rgba(220,72,174,.07)
    );
}


.supporter-row.is-active:has(.rank-special){
  background:
    linear-gradient(
      90deg,
      rgba(235,64,150,.30),
      rgba(139,63,177,.08)
    );
}


/* ---------------------------------------------------------
   DOG TAG - BRUSHED METAL
   --------------------------------------------------------- */

.dog-tag{
  isolation:isolate;

  border:
    1px solid
    rgba(255,255,255,.38);

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.55),
    inset 0 -3px 8px
      rgba(0,0,0,.30),
    inset 18px 0 28px
      rgba(0,0,0,.08),
    0 18px 46px
      rgba(0,0,0,.40);

  transform:
    translateZ(0);
}


/* metallic grain */

.dog-tag::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  border-radius:inherit;

  opacity:.22;

  mix-blend-mode:overlay;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.28) 0px,
      rgba(255,255,255,.28) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(
      112deg,
      transparent 0 35%,
      rgba(255,255,255,.50) 45%,
      transparent 54%
    );
}


.dog-tag > *{
  position:relative;
  z-index:2;
}


/* reinforced tag hole */

.dog-tag::before{
  z-index:4;

  width:26px;
  height:26px;

  border:
    5px solid
    rgba(56,56,62,.72);

  background:
    radial-gradient(
      circle,
      #050507 0 38%,
      #55535b 40% 52%,
      #aaa7ad 54% 65%,
      #3d3c41 67%
    );

  box-shadow:
    inset 0 0 4px
      rgba(0,0,0,.8),
    0 1px 2px
      rgba(255,255,255,.35);
}


/* DOG TAG STEEL */

.dog-tag:not(
  .theme-black,
  .theme-gold,
  .theme-platinum,
  .theme-diamond,
  .theme-yukinon
){
  background:
    linear-gradient(
      125deg,
      #4e4e55 0%,
      #d8d6db 21%,
      #8a8990 42%,
      #f1eef1 61%,
      #68676d 84%,
      #c3c1c7 100%
    );
}


/* BLACK */

.dog-tag.theme-black{
  color:#f3edf2;

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

  background:
    linear-gradient(
      125deg,
      #07070a 0%,
      #36343b 25%,
      #121116 49%,
      #4c4850 68%,
      #09090c 100%
    );
}


.dog-tag.theme-black
.tag-right{
  border-color:
    rgba(255,255,255,.18);
}


/* GOLD */

.dog-tag.theme-gold{
  color:#281800;

  border-color:
    rgba(255,229,156,.60);

  background:
    linear-gradient(
      125deg,
      #70450b 0%,
      #eabf57 20%,
      #fff0a3 38%,
      #aa6b12 61%,
      #f0ce6b 81%,
      #6d450f 100%
    );

  box-shadow:
    inset 0 1px
      rgba(255,248,209,.80),
    inset 0 -4px 12px
      rgba(90,52,4,.35),
    0 18px 55px
      rgba(105,70,9,.30);
}


/* PLATINUM */

.dog-tag.theme-platinum{
  color:#24202b;

  border-color:
    rgba(235,227,255,.70);

  background:
    linear-gradient(
      125deg,
      #737785 0%,
      #f6f3ff 24%,
      #afa5bd 43%,
      #f0eafa 65%,
      #7e7589 85%,
      #ded8e8 100%
    );
}


/* DIAMOND */

.dog-tag.theme-diamond{
  color:#21182c;

  border-color:
    rgba(220,172,255,.75);

  background:
    linear-gradient(
      125deg,
      #626477 0%,
      #f3edf9 18%,
      #c7b3dc 38%,
      #f8eaf8 55%,
      #8b72a5 77%,
      #e2d4ef 100%
    );

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.85),
    0 0 26px
      rgba(158,92,222,.20),
    0 20px 60px
      rgba(0,0,0,.38);
}


/* YUKINON */

.dog-tag.theme-yukinon{
  color:#2b1322;

  border-color:
    rgba(255,171,216,.75);

  background:
    linear-gradient(
      125deg,
      #744164 0%,
      #f4c3dc 20%,
      #ffe8f4 40%,
      #b16ca0 61%,
      #f5b8da 81%,
      #764368 100%
    );

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.85),
    0 0 28px
      rgba(237,85,166,.24),
    0 20px 60px
      rgba(0,0,0,.36);
}


/* ---------------------------------------------------------
   DOG TAG TYPOGRAPHY
   --------------------------------------------------------- */

.tag-label{
  font-weight:900;

  text-shadow:
    0 1px
    rgba(255,255,255,.40);
}


.tag-name{
  text-transform:uppercase;

  letter-spacing:.045em;

  text-shadow:
    0 1px 0
      rgba(255,255,255,.45),
    0 2px 3px
      rgba(0,0,0,.22);
}


.tag-id{
  opacity:.85;

  letter-spacing:.12em;
}


.tag-sign{
  transform:
    rotate(-4deg);

  text-shadow:
    0 1px 8px
      rgba(222,65,143,.22);
}


/* ---------------------------------------------------------
   STATUS PANELS
   --------------------------------------------------------- */

.status-cell{
  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      transparent
    );
}


.status-cell::after{
  content:"";

  position:absolute;

  left:18px;
  right:18px;
  bottom:0;

  height:1px;

  opacity:.25;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--pink),
      transparent
    );
}


.progress-track{
  position:relative;

  box-shadow:
    inset 0 2px 5px
    rgba(0,0,0,.55);
}


.progress-track::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 18px,
      rgba(255,255,255,.15) 19px,
      transparent 20px
    );
}


.progress-track i{
  position:relative;

  overflow:hidden;
}


.progress-track i::after{
  content:"";

  position:absolute;

  inset:0;

  transform:
    translateX(-120%);

  background:
    linear-gradient(
      100deg,
      transparent 20%,
      rgba(255,255,255,.75) 50%,
      transparent 80%
    );

  animation:
    yukinon-progress-scan
    3.2s ease-in-out infinite;
}


/* ---------------------------------------------------------
   BADGE HISTORY
   --------------------------------------------------------- */

.history-list{
  gap:12px;
}


.history-item{
  position:relative;

  min-width:74px;

  padding:
    10px 8px;

  flex-direction:column;

  justify-content:center;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    );

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


.history-item:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(238,116,180,.30);

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.25);
}


/* latest acquired badge */

.history-item:last-child{
  border-color:
    rgba(236,104,176,.46);

  box-shadow:
    inset 0 0 18px
      rgba(225,83,164,.08),
    0 0 18px
      rgba(225,83,164,.10);
}


.history-item:last-child::before{
  content:"CURRENT";

  position:absolute;

  top:-7px;
  right:4px;

  padding:
    2px 5px;

  color:#fff;

  border:
    1px solid
    rgba(255,255,255,.25);

  border-radius:3px;

  background:
    linear-gradient(
      90deg,
      #d94d97,
      #8850aa
    );

  font-size:6px;

  font-weight:900;

  letter-spacing:.08em;
}


/* ---------------------------------------------------------
   SPECIAL TITLES
   --------------------------------------------------------- */

.special-title{
  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(226,105,174,.34);

  border-radius:7px;

  background:
    linear-gradient(
      120deg,
      rgba(79,38,72,.56),
      rgba(169,58,128,.18),
      rgba(65,40,78,.50)
    );

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.055);

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


.special-title::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:3px;

  background:
    linear-gradient(
      180deg,
      #ffa1cf,
      #9c5ac5
    );

  box-shadow:
    0 0 12px
    rgba(236,95,177,.52);
}


.special-title::after{
  content:"";

  position:absolute;

  width:85px;
  height:85px;

  right:-42px;
  top:-42px;

  transform:
    rotate(45deg);

  border:
    1px solid
    rgba(255,255,255,.10);
}


.special-title:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(255,139,202,.56);

  box-shadow:
    0 10px 28px
      rgba(0,0,0,.24),
    0 0 18px
      rgba(224,75,158,.10);
}


.special-title i{
  position:relative;

  z-index:2;

  text-shadow:
    0 0 14px
    rgba(255,145,207,.70);
}


/* ---------------------------------------------------------
   HEADER / HUD DETAIL
   --------------------------------------------------------- */

.system-title{
  position:relative;
}


.system-title::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-14px;

  width:110px;
  height:2px;

  background:
    linear-gradient(
      90deg,
      var(--pink),
      transparent
    );

  box-shadow:
    0 0 10px
    rgba(239,113,177,.30);
}


.hud-tabs button{
  position:relative;

  transition:
    color .2s ease,
    background .2s ease;
}


.hud-tabs button::after{
  content:"";

  position:absolute;

  left:50%;
  right:50%;
  bottom:0;

  height:2px;

  background:
    #ff87c1;

  transition:
    left .25s ease,
    right .25s ease;
}


.hud-tabs button:hover::after,
.hud-tabs button.is-active::after{
  left:18%;
  right:18%;
}


/* ---------------------------------------------------------
   MOBILE FINAL POLISH
   --------------------------------------------------------- */

@media(max-width:760px){

  .profile-head{
    padding:
      10px 4px 18px;
  }


  .profile-avatar::before{
    inset:-6px;
  }


  .profile-avatar::after{
    width:23px;
    height:23px;

    right:-4px;

    font-size:9px;
  }


  .dog-tag{
    overflow:hidden;

    box-shadow:
      inset 0 1px
        rgba(255,255,255,.55),
      inset 0 -3px 8px
        rgba(0,0,0,.28),
      0 14px 34px
        rgba(0,0,0,.35);
  }


  .tag-name{
    font-size:
      clamp(
        1.65rem,
        10vw,
        2.55rem
      );

    overflow-wrap:anywhere;
  }


  .tag-rank-line{
    align-items:flex-start;
  }


  .big-emblem{
    width:72px;
    height:72px;

    font-size:21px;
  }


  .history-list{
    display:grid;

    grid-template-columns:
      repeat(3,1fr);
  }


  .history-item{
    min-width:0;
  }


  .history-item .mini-emblem{
    width:35px;
    height:35px;
  }


  .special-title{
    min-height:64px;
  }

}


@media(max-width:420px){

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


  .dog-tag{
    padding:
      26px 18px
      22px 39px;
  }


  .tag-id{
    font-size:10px;
  }

}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes yukinon-ring-spin{

  to{
    transform:
      rotate(360deg);
  }

}


@keyframes yukinon-emblem-entry{

  from{
    opacity:0;

    transform:
      scale(.78)
      translateY(6px);
  }

  to{
    opacity:1;

    transform:
      scale(1)
      translateY(0);
  }

}


@keyframes yukinon-diamond-pulse{

  0%,
  100%{
    filter:
      drop-shadow(
        0 0 8px
        rgba(154,96,244,.55)
      )
      drop-shadow(
        0 0 16px
        rgba(218,87,221,.18)
      );
  }

  50%{
    filter:
      drop-shadow(
        0 0 13px
        rgba(154,96,244,.90)
      )
      drop-shadow(
        0 0 28px
        rgba(218,87,221,.42)
      );
  }

}


@keyframes yukinon-special-pulse{

  0%,
  100%{
    filter:
      drop-shadow(
        0 0 8px
        rgba(255,101,183,.55)
      );
  }

  50%{
    filter:
      drop-shadow(
        0 0 15px
        rgba(255,101,183,.95)
      )
      drop-shadow(
        0 0 28px
        rgba(182,76,202,.40)
      );
  }

}


@keyframes yukinon-progress-scan{

  0%,
  45%{
    transform:
      translateX(-120%);
  }

  72%,
  100%{
    transform:
      translateX(160%);
  }

}


@media(
  prefers-reduced-motion:reduce
){

  .profile-avatar::before,
  .big-emblem,
  .mini-emblem,
  .rank-diamond,
  .rank-special,
  .progress-track i::after{
    animation:none !important;
  }


  *{
    scroll-behavior:auto !important;
  }

}



/* =========================================================
   YUKINON PALMU EFFECTS CSS V2.6
   ========================================================= */


/* ---------------------------------------------------------
   PROFILE SWITCH
   --------------------------------------------------------- */

.profile-panel.profile-switch-enter
.profile-head{
  animation:
    yukinon-profile-head-in
    .52s
    cubic-bezier(.18,.82,.28,1)
    both;
}


.profile-panel.profile-switch-enter
.dog-tag{
  animation:
    yukinon-dogtag-in
    .62s
    cubic-bezier(.16,.84,.24,1)
    .04s
    both;
}


.profile-panel.profile-switch-enter
.status-grid{
  animation:
    yukinon-status-in
    .54s
    ease
    .12s
    both;
}


.profile-panel.profile-switch-enter
.detail-grid{
  animation:
    yukinon-status-in
    .54s
    ease
    .19s
    both;
}


.profile-panel.profile-switch-enter
.profile-note{
  animation:
    yukinon-status-in
    .5s
    ease
    .25s
    both;
}


/* ---------------------------------------------------------
   BADGE UNLOCKED OVERLAY
   --------------------------------------------------------- */

.badge-unlock-overlay{
  position:fixed;

  inset:0;

  z-index:99999;

  display:grid;

  place-items:center;

  padding:
    max(
      20px,
      env(safe-area-inset-top)
    )
    max(
      20px,
      env(safe-area-inset-right)
    )
    max(
      20px,
      env(safe-area-inset-bottom)
    )
    max(
      20px,
      env(safe-area-inset-left)
    );

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  overflow:hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(111,43,110,.26),
      rgba(4,3,7,.91) 62%
    );

  backdrop-filter:
    blur(5px);

  transition:
    opacity .28s ease,
    visibility .28s ease;
}


.badge-unlock-overlay::before{
  content:"";

  position:absolute;

  inset:-30%;

  opacity:.17;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 5px,
      rgba(255,255,255,.10) 6px
    );

  transform:
    perspective(700px)
    rotateX(64deg)
    translateY(10%);

  animation:
    yukinon-unlock-grid
    7s linear infinite;
}


.badge-unlock-overlay::after{
  content:"";

  position:absolute;

  width:
    min(
      900px,
      90vw
    );

  height:
    min(
      900px,
      90vw
    );

  border:
    1px solid
    rgba(238,98,177,.15);

  border-radius:50%;

  box-shadow:
    0 0 0 50px
      rgba(227,87,168,.02),
    0 0 0 130px
      rgba(227,87,168,.015);

  animation:
    yukinon-unlock-ring
    11s linear infinite;
}


.badge-unlock-overlay.is-visible{
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}


.badge-unlock-overlay.is-leaving{
  opacity:0;

  visibility:visible;

  pointer-events:none;
}


/* frame */

.badge-unlock-frame{
  position:relative;

  z-index:5;

  width:
    min(
      620px,
      92vw
    );

  min-height:480px;

  padding:
    54px 46px
    43px;

  overflow:hidden;

  text-align:center;

  border:
    1px solid
    rgba(255,132,197,.42);

  border-radius:10px;

  background:
    linear-gradient(
      155deg,
      rgba(22,14,26,.96),
      rgba(7,6,10,.97)
    );

  box-shadow:
    inset 0 0 70px
      rgba(210,68,158,.07),
    0 0 0 1px
      rgba(255,255,255,.025),
    0 0 55px
      rgba(208,76,162,.19),
    0 36px 100px
      rgba(0,0,0,.65);

  transform:
    scale(.82)
    translateY(20px);

  opacity:0;
}


.badge-unlock-overlay.is-visible
.badge-unlock-frame{
  animation:
    yukinon-unlock-frame
    .64s
    cubic-bezier(.16,.85,.22,1)
    forwards;
}


/* HUD corners */

.badge-unlock-frame::before,
.badge-unlock-frame::after{
  content:"";

  position:absolute;

  width:65px;
  height:65px;

  pointer-events:none;
}


.badge-unlock-frame::before{
  top:13px;
  left:13px;

  border-top:
    2px solid
    #ef75b4;

  border-left:
    2px solid
    #ef75b4;
}


.badge-unlock-frame::after{
  right:13px;
  bottom:13px;

  border-right:
    2px solid
    #8c5ec0;

  border-bottom:
    2px solid
    #8c5ec0;
}


/* scanner */

.badge-unlock-scan{
  position:absolute;

  left:0;
  right:0;

  top:-35%;

  height:32%;

  pointer-events:none;

  opacity:.40;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(244,109,184,.22),
      rgba(255,255,255,.20),
      transparent
    );
}


.badge-unlock-overlay.is-visible
.badge-unlock-scan{
  animation:
    yukinon-unlock-scan
    1.35s
    ease-out
    .18s
    both;
}


/* text */

.badge-unlock-kicker{
  color:#c99bb8;

  font-family:
    Georgia,
    serif;

  font-size:10px;

  font-weight:700;

  letter-spacing:.28em;
}


.badge-unlock-heading{
  margin-top:9px;

  color:#fff;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      2rem,
      6vw,
      4.2rem
    );

  font-weight:900;

  letter-spacing:.09em;

  text-shadow:
    0 0 15px
      rgba(255,118,188,.30),
    0 0 40px
      rgba(197,84,211,.20);
}


.badge-unlock-heading::after{
  content:"";

  width:130px;
  height:2px;

  margin:
    17px auto
    0;

  display:block;

  background:
    linear-gradient(
      90deg,
      transparent,
      #f276b8,
      #ae72dd,
      transparent
    );

  box-shadow:
    0 0 10px
    rgba(244,107,182,.6);
}


/* emblem */

.badge-unlock-emblem-wrap{
  position:relative;

  width:190px;
  height:190px;

  margin:
    25px auto
    22px;

  display:grid;

  place-items:center;
}


.badge-unlock-emblem-wrap::before,
.badge-unlock-emblem-wrap::after{
  content:"";

  position:absolute;

  inset:5px;

  border:
    1px solid
    rgba(238,122,189,.28);

  transform:
    rotate(45deg);
}


.badge-unlock-emblem-wrap::after{
  inset:23px;

  border-color:
    rgba(161,108,220,.25);

  transform:
    rotate(22.5deg);
}


.badge-unlock-overlay.is-visible
.badge-unlock-emblem-wrap::before{
  animation:
    yukinon-unlock-rotate
    7s linear infinite;
}


.badge-unlock-overlay.is-visible
.badge-unlock-emblem-wrap::after{
  animation:
    yukinon-unlock-rotate-reverse
    5s linear infinite;
}


.badge-unlock-emblem{
  position:relative;

  z-index:3;

  width:132px;
  height:132px;

  display:grid;

  place-items:center;

  clip-path:
    polygon(
      50% 0,
      90% 18%,
      100% 55%,
      75% 88%,
      50% 100%,
      25% 88%,
      0 55%,
      10% 18%
    );

  border:
    1px solid
    rgba(255,255,255,.45);

  color:#fff;

  font-family:
    Georgia,
    serif;

  font-size:39px;

  font-weight:900;

  text-shadow:
    0 2px 5px
      rgba(0,0,0,.60);

  filter:
    drop-shadow(
      0 0 18px
      rgba(232,91,177,.45)
    );
}


.badge-unlock-overlay.is-visible
.badge-unlock-emblem{
  animation:
    yukinon-unlock-emblem
    .8s
    cubic-bezier(.13,.9,.25,1)
    .15s
    both;
}


/* badge title */

.badge-unlock-badge{
  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      1.2rem,
      4vw,
      2rem
    );

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;
}


.badge-unlock-supporter{
  margin-top:9px;

  color:#e7bdd4;

  font-size:14px;

  font-weight:800;

  letter-spacing:.04em;
}


.badge-unlock-line{
  width:
    min(
      330px,
      80%
    );

  height:1px;

  margin:
    25px auto
    17px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,133,199,.65),
      transparent
    );
}


.badge-unlock-hint{
  color:#746979;

  font-size:8px;

  font-weight:800;

  letter-spacing:.20em;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:600px){

  .badge-unlock-frame{
    min-height:420px;

    padding:
      43px 20px
      32px;
  }


  .badge-unlock-emblem-wrap{
    width:150px;
    height:150px;

    margin-top:20px;
  }


  .badge-unlock-emblem{
    width:105px;
    height:105px;

    font-size:30px;
  }


  .badge-unlock-heading{
    letter-spacing:.045em;
  }


  .badge-unlock-supporter{
    font-size:12px;
  }

}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes yukinon-profile-head-in{

  from{
    opacity:0;

    transform:
      translateX(-18px);
  }

  to{
    opacity:1;

    transform:
      translateX(0);
  }

}


@keyframes yukinon-dogtag-in{

  from{
    opacity:0;

    transform:
      translateX(24px)
      rotateY(-6deg)
      scale(.975);
  }

  to{
    opacity:1;

    transform:
      translateX(0)
      rotateY(0)
      scale(1);
  }

}


@keyframes yukinon-status-in{

  from{
    opacity:0;

    transform:
      translateY(14px);
  }

  to{
    opacity:1;

    transform:
      translateY(0);
  }

}


@keyframes yukinon-unlock-frame{

  0%{
    opacity:0;

    transform:
      scale(.82)
      translateY(24px);
  }

  55%{
    opacity:1;

    transform:
      scale(1.025)
      translateY(-3px);
  }

  100%{
    opacity:1;

    transform:
      scale(1)
      translateY(0);
  }

}


@keyframes yukinon-unlock-emblem{

  0%{
    opacity:0;

    transform:
      scale(.25)
      rotate(-18deg);

    filter:
      brightness(3)
      blur(3px);
  }

  58%{
    opacity:1;

    transform:
      scale(1.14)
      rotate(3deg);

    filter:
      brightness(1.7)
      blur(0);
  }

  100%{
    transform:
      scale(1)
      rotate(0);

    filter:
      brightness(1);
  }

}


@keyframes yukinon-unlock-scan{

  from{
    top:-35%;
  }

  to{
    top:120%;
  }

}


@keyframes yukinon-unlock-grid{

  from{
    transform:
      perspective(700px)
      rotateX(64deg)
      translateY(0);
  }

  to{
    transform:
      perspective(700px)
      rotateX(64deg)
      translateY(80px);
  }

}


@keyframes yukinon-unlock-ring{

  to{
    transform:
      rotate(360deg);
  }

}


@keyframes yukinon-unlock-rotate{

  to{
    transform:
      rotate(405deg);
  }

}


@keyframes yukinon-unlock-rotate-reverse{

  to{
    transform:
      rotate(-337.5deg);
  }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media(
  prefers-reduced-motion:reduce
){

  .profile-panel.profile-switch-enter
  .profile-head,

  .profile-panel.profile-switch-enter
  .dog-tag,

  .profile-panel.profile-switch-enter
  .status-grid,

  .profile-panel.profile-switch-enter
  .detail-grid,

  .badge-unlock-overlay::before,

  .badge-unlock-overlay::after,

  .badge-unlock-frame,

  .badge-unlock-scan,

  .badge-unlock-emblem,

  .badge-unlock-emblem-wrap::before,

  .badge-unlock-emblem-wrap::after{
    animation:none !important;
  }

}



/* =========================================================
   YUKINON PALMU UI REBUILD V3.0

   Visual target:
   PALMU SUPPORTER BADGE SYSTEM
   Dark Pink / Purple / Metallic Game HUD
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

:root{
  --v3-bg:#08060b;
  --v3-panel:#0b0910;
  --v3-panel2:#120c16;

  --v3-line:
    rgba(255,114,190,.34);

  --v3-soft-line:
    rgba(255,255,255,.10);

  --v3-pink:#ff78bd;
  --v3-pink2:#e950a1;
  --v3-purple:#9f57c6;
  --v3-gold:#f0c261;

  --max:1536px;
}


body.palmu-v3{
  min-height:100vh;

  color:#fff7fc;

  background:
    radial-gradient(
      ellipse at 16% 14%,
      rgba(171,42,117,.18),
      transparent 29%
    ),
    radial-gradient(
      ellipse at 86% 30%,
      rgba(119,52,135,.24),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 48% 45%,
      rgba(72,31,83,.15),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #100916 0,
      #08070c 42%,
      #07060a 100%
    );

  background-attachment:fixed;
}


body.palmu-v3::before{
  content:"";

  position:fixed;
  inset:0;

  z-index:-2;

  pointer-events:none;

  opacity:.24;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 4px,
      rgba(255,255,255,.012) 5px
    ),
    radial-gradient(
      circle at 8% 77%,
      rgba(236,78,160,.22),
      transparent 12%
    ),
    radial-gradient(
      circle at 96% 62%,
      rgba(216,83,166,.18),
      transparent 15%
    );
}


body.palmu-v3::after{
  content:"";

  position:fixed;
  inset:0;

  z-index:-1;

  pointer-events:none;

  box-shadow:
    inset 0 0 160px
    rgba(0,0,0,.72);
}


/* =========================================================
   HERO HEADER
   ========================================================= */

.palmu-v3 .top-header{
  position:relative;

  width:100%;
  max-width:none;

  min-height:116px;

  margin:0;

  padding:
    0
    max(
      32px,
      calc(
        (100vw - var(--max))
        / 2
        + 30px
      )
    );

  display:grid;

  grid-template-columns:
    255px
    minmax(330px,420px)
    1fr
    auto;

  gap:25px;

  overflow:hidden;

  border-bottom:
    1px solid
    rgba(255,101,181,.58);

  background:
    radial-gradient(
      ellipse at 72% 38%,
      rgba(237,113,177,.23),
      transparent 27%
    ),
    radial-gradient(
      ellipse at 51% 130%,
      rgba(203,71,159,.31),
      transparent 42%
    ),
    linear-gradient(
      90deg,
      #100914 0%,
      #251326 43%,
      #3a1c36 72%,
      #140b16 100%
    );

  box-shadow:
    inset 0 -20px 38px
      rgba(0,0,0,.38);
}


.palmu-v3 .top-header::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.47;

  background:
    linear-gradient(
      120deg,
      transparent 0 42%,
      rgba(255,140,203,.06) 43%,
      transparent 44% 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 94px
    );
}


.palmu-v3 .brand{
  position:relative;

  z-index:2;

  width:248px;
}


.palmu-v3 .brand img{
  filter:
    drop-shadow(
      0 0 13px
      rgba(255,104,192,.46)
    );
}


.palmu-v3 .system-title{
  position:relative;

  z-index:2;
}


.palmu-v3 .system-title small{
  color:#ff9dcf;

  font-size:15px;

  letter-spacing:.16em;
}


.palmu-v3 .system-title strong{
  margin-top:1px;

  font-size:
    clamp(
      1.9rem,
      2.35vw,
      2.65rem
    );

  line-height:1;

  letter-spacing:.035em;

  text-shadow:
    0 0 20px
    rgba(255,111,190,.16);
}


.palmu-v3 .system-title span{
  margin-top:8px;

  color:#d5c2d1;

  font-size:9px;

  letter-spacing:.18em;
}


.palmu-v3 .system-title::after{
  display:none;
}


.palmu-v3 .header-side{
  position:relative;

  z-index:4;

  align-self:start;

  margin-top:15px;
}


.palmu-v3 .header-side a{
  display:none;
}


.palmu-v3 .preview-chip{
  background:
    rgba(10,8,13,.62);

  backdrop-filter:
    blur(6px);
}


.v3-header-message{
  position:absolute;

  z-index:3;

  top:15px;
  right:
    max(
      34px,
      calc(
        (100vw - var(--max))
        / 2
        + 26px
      )
    );

  width:190px;

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  color:#ffb4dc;

  font-family:
    "Segoe Script",
    cursive;

  font-size:15px;

  line-height:1.35;

  transform:
    rotate(-5deg);

  text-shadow:
    0 0 14px
    rgba(255,103,184,.38);
}


.v3-header-message strong{
  font-weight:400;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.palmu-v3 .hud-tabs{
  position:relative;

  width:100%;

  min-height:50px;

  padding:
    0
    max(
      22px,
      calc(
        (100vw - var(--max))
        / 2
        + 25px
      )
    );

  align-items:stretch;

  border-top:
    1px solid
    rgba(255,102,181,.12);

  border-bottom:
    1px solid
    rgba(255,95,177,.44);

  background:
    rgba(7,6,11,.91);

  backdrop-filter:
    blur(12px);
}


.palmu-v3 .hud-tabs button{
  position:relative;

  min-width:180px;

  padding:
    0 34px;

  border:0;

  border-right:
    1px solid
    rgba(255,255,255,.05);

  clip-path:
    polygon(
      12% 0,
      100% 0,
      88% 100%,
      0 100%
    );

  color:#b8a8b7;

  background:
    rgba(255,255,255,.008);

  font-size:11px;
}


.palmu-v3
.hud-tabs button.is-active{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      rgba(255,126,194,.88),
      rgba(156,56,128,.71)
    );

  box-shadow:
    inset 0 0 20px
      rgba(255,255,255,.10),
    0 0 20px
      rgba(234,75,160,.17);
}


.palmu-v3
.hud-tabs button::after{
  bottom:1px;
}


.v3-nav-brand{
  margin-left:auto;

  display:flex;

  align-items:center;

  gap:10px;

  color:#a99ca8;

  font-size:8px;

  letter-spacing:.14em;
}


.v3-nav-brand b{
  width:28px;
  height:28px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,164,213,.35);

  border-radius:5px;

  color:#ff8fc8;

  background:
    rgba(255,255,255,.045);

  font-size:15px;
}


/* =========================================================
   MAIN / SUMMARY
   ========================================================= */

.palmu-v3 main{
  width:
    min(
      var(--max),
      calc(100% - 36px)
    );

  margin:auto;

  padding:
    0 0
    28px;
}


.palmu-v3 .summary-strip{
  min-height:98px;

  margin:0;

  border:0;

  border-bottom:
    1px solid
    rgba(255,105,183,.17);

  background:
    linear-gradient(
      90deg,
      rgba(66,20,56,.31),
      rgba(19,11,24,.52),
      rgba(72,26,69,.29)
    );
}


.palmu-v3
.summary-strip article{
  min-height:98px;

  border-right:0;

  gap:22px;
}


.palmu-v3
.summary-strip article > span{
  min-width:52px;

  color:#ff9ed1;

  font-size:39px;

  text-align:center;

  text-shadow:
    0 0 20px
    rgba(250,102,190,.48);
}


.palmu-v3
.summary-strip small{
  color:#d8b9cd;

  font-size:11px;

  letter-spacing:.12em;
}


.palmu-v3
.summary-strip strong{
  margin-top:1px;

  color:#fff;

  font-size:31px;

  letter-spacing:.04em;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.palmu-v3 .dashboard{
  margin-top:0;

  display:grid;

  grid-template-columns:
    minmax(500px,.94fr)
    minmax(630px,1.06fr);

  gap:9px;
}


.palmu-v3
.supporter-panel,
.palmu-v3
.profile-panel{
  min-height:735px;

  border:
    1px solid
    rgba(255,111,190,.42);

  border-radius:10px;

  background:
    linear-gradient(
      155deg,
      rgba(18,12,21,.965),
      rgba(7,7,12,.98)
    );

  box-shadow:
    inset 0 0 0 1px
      rgba(255,255,255,.018),
    0 17px 45px
      rgba(0,0,0,.25);
}


/* =========================================================
   SUPPORTERS LIST
   ========================================================= */

.palmu-v3
.supporter-panel > header{
  min-height:54px;

  padding:
    15px 17px 12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.10);
}


.palmu-v3
.supporter-panel header small{
  color:#f2d9e8;

  font-size:15px;

  letter-spacing:.10em;
}


.palmu-v3
.supporter-panel h1{
  display:none;
}


.palmu-v3 .rank-filter{
  margin:
    8px 14px 0;

  padding:
    10px 8px;

  gap:8px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:6px;

  background:
    rgba(255,255,255,.014);
}


.palmu-v3
.rank-filter button{
  min-height:34px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(173,132,167,.43);

  border-radius:5px;

  color:#cfc1cc;

  font-family:
    Georgia,
    serif;

  font-size:9px;
}


.palmu-v3
.rank-filter button.is-active{
  border-color:
    rgba(255,148,207,.80);

  background:
    linear-gradient(
      135deg,
      #f17ab8,
      #b74f91
    );

  box-shadow:
    0 0 14px
    rgba(238,91,173,.25);
}


.palmu-v3 .search-box{
  width:55%;

  min-height:34px;

  margin:
    10px 15px 11px
    auto;

  border:
    1px solid
    rgba(171,133,173,.32);

  border-radius:5px;

  background:
    rgba(4,4,8,.75);
}


.palmu-v3 .list-head,
.palmu-v3 .supporter-row{
  grid-template-columns:
    42px
    46px
    minmax(105px,1fr)
    130px
    72px
    145px;

  gap:7px;
}


.palmu-v3 .list-head{
  min-height:35px;

  padding:
    8px 13px;

  color:#9b8999;

  border-top:
    1px solid
    rgba(255,255,255,.06);

  border-bottom:
    1px solid
    rgba(255,255,255,.09);

  background:
    rgba(255,255,255,.01);
}


.palmu-v3 .supporter-row{
  min-height:51px;

  padding:
    5px 13px;

  transition:
    background .18s ease,
    box-shadow .18s ease;
}


.palmu-v3
.supporter-row:hover{
  background:
    rgba(211,66,150,.08);
}


.palmu-v3
.supporter-row.is-active{
  background:
    linear-gradient(
      90deg,
      rgba(224,49,146,.50),
      rgba(100,31,89,.23)
    );

  box-shadow:
    inset 3px 0
      #ff58ae,
    inset 0 0 28px
      rgba(225,75,158,.08);
}


.palmu-v3
.supporter-row.is-active::after{
  display:none;
}


.palmu-v3 .avatar{
  width:36px;
  height:36px;

  border:
    1px solid
    rgba(255,184,220,.65);

  box-shadow:
    0 0 9px
    rgba(255,92,177,.12);
}


.palmu-v3 .row-rank{
  color:#fff;

  font-size:13px;
}


.palmu-v3
.supporter-row.is-active
.row-rank{
  color:#ffe89c;

  font-weight:900;
}


.palmu-v3 .row-name{
  font-size:11px;
}


.palmu-v3 .row-badge{
  font-size:9px;
}


.palmu-v3 .mini-emblem{
  width:30px;
  height:30px;

  border:
    1px solid
    rgba(255,255,255,.30);

  box-shadow:
    inset 0 0 8px
      rgba(255,255,255,.10),
    0 0 10px
      rgba(197,77,184,.18);
}


.palmu-v3 .tiny-track{
  height:10px;

  border:
    1px solid
    rgba(194,135,194,.35);

  background:#282033;
}


.palmu-v3 .tiny-track i{
  background:
    linear-gradient(
      90deg,
      #ee65ae,
      #ff9bd0
    );

  box-shadow:
    0 0 9px
    rgba(244,93,184,.40);
}


/* =========================================================
   PROFILE PANEL
   ========================================================= */

.palmu-v3 .profile-panel{
  position:relative;

  padding:
    0 14px 13px;
}


.palmu-v3 .profile-head{
  position:relative;

  min-height:158px;

  padding:
    58px 12px
    15px;

  grid-template-columns:
    108px
    minmax(0,1fr)
    auto;

  gap:18px;

  border-bottom:0;
}


.palmu-v3 .profile-kicker{
  position:absolute;

  left:3px;
  right:3px;
  top:13px;

  padding-bottom:10px;

  color:#f4ddea;

  border-bottom:
    1px solid
    rgba(255,255,255,.10);

  font-size:15px;

  letter-spacing:.11em;
}


.palmu-v3 .profile-kicker::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-1px;

  width:36px;
  height:1px;

  background:#ff72bb;

  box-shadow:
    0 0 9px
    rgba(255,102,182,.55);
}


.palmu-v3 .profile-id{
  position:absolute;

  top:17px;
  right:8px;

  z-index:3;

  color:#d1c1cc;

  font-size:8px;
}


.palmu-v3 .profile-avatar{
  width:108px;
  height:108px;

  padding:5px;

  border:
    1px solid
    rgba(255,180,218,.78);

  background:
    conic-gradient(
      #f579bb,
      #8854af,
      #ffbadc,
      #e45da3,
      #f579bb
    );

  box-shadow:
    0 0 19px
      rgba(237,87,169,.26),
    inset 0 0 12px
      rgba(255,255,255,.20);
}


.palmu-v3
.profile-avatar::before{
  inset:-8px;

  opacity:.55;
}


.palmu-v3
.profile-avatar::after{
  content:"♡";

  right:-5px;
  bottom:2px;

  width:28px;
  height:28px;

  font-size:15px;
}


.palmu-v3 .profile-name{
  padding-right:31%;
}


.palmu-v3 .profile-name h2{
  margin:
    3px 0 2px;

  font-size:
    clamp(
      1.7rem,
      2.2vw,
      2.45rem
    );

  letter-spacing:.03em;
}


.palmu-v3 .profile-name p{
  color:#c0aeb9;

  font-size:11px;
}


.palmu-v3 .profile-note{
  position:absolute;

  z-index:3;

  top:79px;
  right:22px;

  width:29%;

  margin:0;

  color:#dbc3d2;

  font-size:11px;

  line-height:1.65;

  text-align:left;

  opacity:.88;
}


/* =========================================================
   DOG TAG
   ========================================================= */

.palmu-v3 .dog-tag{
  width:
    calc(100% - 74px);

  min-height:230px;

  margin:
    -3px 8px
    5px auto;

  padding:
    29px 35px
    27px 42px;

  grid-template-columns:
    1.05fr .95fr;

  border-radius:
    72px 26px 26px 72px;

  transform:
    rotate(-2deg);

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.65),
    inset 0 -5px 14px
      rgba(0,0,0,.30),
    0 19px 40px
      rgba(0,0,0,.45),
    0 0 0 1px
      rgba(255,255,255,.15);
}


.palmu-v3 .dog-tag::after{
  opacity:.30;
}


.palmu-v3 .dog-tag::before{
  left:18px;

  width:27px;
  height:27px;
}


.palmu-v3 .tag-label{
  font-size:11px;
}


.palmu-v3 .tag-name{
  margin:
    13px 0 8px;

  font-size:
    clamp(
      2rem,
      3.1vw,
      3rem
    );
}


.palmu-v3 .tag-sign{
  color:#d93a89;

  font-size:19px;
}


.palmu-v3 .tag-stat strong{
  font-size:19px;
}


/* =========================================================
   CURRENT / NEXT / PROGRESS
   ========================================================= */

.palmu-v3 .status-grid{
  margin-top:5px;

  grid-template-columns:
    1.15fr
    .9fr
    1fr;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:7px;

  overflow:hidden;
}


.palmu-v3 .status-cell{
  min-height:180px;

  padding:
    14px 15px;
}


.palmu-v3
.status-cell > small{
  display:block;

  padding-bottom:7px;

  color:#f1d9e7;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  font-size:10px;
}


.palmu-v3 .badge-feature{
  min-height:125px;
}


.palmu-v3
.badge-feature .big-emblem{
  width:96px;
  height:96px;

  filter:
    drop-shadow(
      0 0 13px
      rgba(206,90,224,.50)
    );
}


.palmu-v3 .progress-track{
  height:19px;

  border:
    1px solid
    rgba(226,88,183,.60);

  background:
    #24172b;
}


.palmu-v3
.progress-percent{
  color:#fff;

  font-size:16px;
}


.palmu-v3
.progress-current{
  padding-bottom:8px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  font-size:17px;
}


/* =========================================================
   HISTORY / SPECIAL TITLE
   ========================================================= */

.palmu-v3 .detail-grid{
  margin-top:8px;

  gap:8px;
}


.palmu-v3 .detail-section{
  min-height:120px;

  padding:
    13px 15px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:6px;

  background:
    rgba(255,255,255,.012);
}


.palmu-v3
.detail-section > header small{
  color:#f0d9e7;

  font-size:10px;
}


.palmu-v3 .history-list{
  flex-wrap:nowrap;

  gap:7px;

  margin-top:12px;
}


.palmu-v3 .history-item{
  min-width:0;

  flex:1;

  padding:
    7px 5px;

  gap:5px;

  border:0;

  background:transparent;
}


.palmu-v3
.history-item .mini-emblem{
  width:38px;
  height:38px;
}


.palmu-v3
.history-item:last-child{
  border:0;

  background:transparent;
}


.palmu-v3
.history-item:last-child::before{
  display:none;
}


.palmu-v3 .title-list{
  grid-template-columns:
    repeat(2,1fr);

  gap:7px;

  margin-top:11px;
}


.palmu-v3 .special-title{
  min-height:62px;

  padding:7px;

  border:
    1px solid
    rgba(235,96,179,.35);

  border-radius:6px;

  background:
    linear-gradient(
      135deg,
      rgba(198,52,137,.23),
      rgba(88,37,91,.24)
    );
}


.palmu-v3
.special-title::before{
  width:2px;
}


.palmu-v3
.special-title strong{
  font-size:9px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.palmu-v3 footer{
  width:
    min(
      var(--max),
      calc(100% - 36px)
    );

  padding:
    18px 0 28px;

  border-top:
    1px solid
    rgba(255,105,182,.15);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1180px){

  .palmu-v3 .dashboard{
    grid-template-columns:
      1fr;
  }


  .palmu-v3
  .supporter-panel,
  .palmu-v3
  .profile-panel{
    min-height:auto;
  }


  .palmu-v3
  .profile-note{
    width:30%;
  }

}


/* =========================================================
   MOBILE / iPHONE
   ========================================================= */

@media(max-width:760px){

  .palmu-v3 .top-header{
    min-height:88px;

    padding:
      0 12px;

    grid-template-columns:
      150px 1fr;

    gap:10px;
  }


  .palmu-v3 .brand{
    width:145px;
  }


  .palmu-v3
  .system-title small,
  .palmu-v3
  .system-title span{
    display:none;
  }


  .palmu-v3
  .system-title strong{
    font-size:13px;
  }


  .v3-header-message,
  .palmu-v3 .header-side{
    display:none;
  }


  .palmu-v3 .hud-tabs{
    padding:0;

    overflow-x:auto;
  }


  .palmu-v3
  .hud-tabs button{
    min-width:120px;

    padding:
      0 20px;

    clip-path:none;

    font-size:9px;
  }


  .v3-nav-brand{
    display:none;
  }


  .palmu-v3 main{
    width:
      calc(100% - 14px);
  }


  .palmu-v3 .summary-strip{
    grid-template-columns:
      repeat(3,1fr);

    min-height:78px;
  }


  .palmu-v3
  .summary-strip article{
    min-height:78px;

    padding:
      8px 4px;

    justify-content:center;

    gap:7px;

    border-right:
      1px solid
      rgba(255,255,255,.06);

    border-bottom:0;
  }


  .palmu-v3
  .summary-strip article > span{
    min-width:auto;

    font-size:20px;
  }


  .palmu-v3
  .summary-strip small{
    font-size:6px;
  }


  .palmu-v3
  .summary-strip strong{
    font-size:18px;
  }


  .palmu-v3 .dashboard{
    display:flex;

    flex-direction:column;

    gap:8px;
  }


  .palmu-v3 .profile-panel{
    order:1;
  }


  .palmu-v3 .supporter-panel{
    order:2;
  }


  .palmu-v3 .profile-head{
    min-height:135px;

    padding:
      55px 8px 12px;

    grid-template-columns:
      82px 1fr;
  }


  .palmu-v3
  .profile-avatar{
    width:80px;
    height:80px;
  }


  .palmu-v3
  .profile-name{
    padding-right:0;
  }


  .palmu-v3
  .profile-name h2{
    font-size:1.55rem;
  }


  .palmu-v3 .profile-note{
    position:static;

    width:auto;

    margin:
      10px 4px 0;

    font-size:10px;
  }


  .palmu-v3 .dog-tag{
    width:100%;

    margin:
      9px 0 3px;

    padding:
      26px 18px
      22px 43px;

    grid-template-columns:
      1fr;

    transform:none;

    border-radius:
      47px 18px 18px 47px;
  }


  .palmu-v3 .tag-right{
    padding:
      15px 0 0;

    border-left:0;

    border-top:
      1px solid
      rgba(0,0,0,.24);
  }


  .palmu-v3 .status-grid{
    grid-template-columns:
      1fr;
  }


  .palmu-v3 .status-cell{
    min-height:0;

    border-right:0;
  }


  .palmu-v3 .detail-grid{
    grid-template-columns:
      1fr;
  }


  .palmu-v3
  .supporter-panel > header{
    min-height:48px;
  }


  .palmu-v3 .rank-filter{
    overflow-x:auto;

    flex-wrap:nowrap;
  }


  .palmu-v3
  .rank-filter button{
    flex:0 0 auto;
  }


  .palmu-v3 .search-box{
    width:
      calc(100% - 28px);

    margin:
      9px 14px;
  }


  .palmu-v3 .supporter-row{
    grid-template-columns:
      32px
      42px
      minmax(0,1fr)
      90px;
  }


  .palmu-v3 .history-list{
    overflow-x:auto;
  }


  .palmu-v3 .history-item{
    min-width:75px;
  }

}


@media(max-width:430px){

  .palmu-v3
  .summary-strip article{
    gap:4px;
  }


  .palmu-v3
  .summary-strip article > span{
    font-size:16px;
  }


  .palmu-v3
  .summary-strip strong{
    font-size:16px;
  }


  .palmu-v3
  .title-list{
    grid-template-columns:
      1fr 1fr;
  }

}



/* =========================================================
   YUKINON PALMU V3.1 RESPONSIVE FIX

   - empty history/title note fix
   - compact mobile dog tag
   - 2-column mobile badge status
   - iPhone 393px header fix
   ========================================================= */


/* ---------------------------------------------------------
   PROFILE NOTE / EMPTY NOTE SEPARATION
   --------------------------------------------------------- */

/*
 * 本物のプロフィールメッセージだけ
 * 右上の引用エリアとして扱う。
 */

.palmu-v3
.profile-panel > p.profile-note{
  position:absolute;

  z-index:3;

  top:79px;
  right:22px;

  width:29%;

  margin:0;

  color:#dbc3d2;

  font-size:11px;

  line-height:1.65;

  text-align:left;

  opacity:.88;
}


/*
 * BADGE HISTORY / SPECIAL TITLE の
 * 「ありません」表示は通常フローへ戻す。
 */

.palmu-v3
.detail-section .profile-note{
  position:static !important;

  display:block;

  width:auto !important;

  margin:
    20px 0 8px !important;

  color:#81737e;

  font-size:10px;

  line-height:1.6;

  text-align:left;

  opacity:1;
}


/* ---------------------------------------------------------
   PROFILE HEADER
   --------------------------------------------------------- */

.palmu-v3 .profile-head{
  overflow:visible;
}


/* note が存在しない場合でも
   PROFILE NAME の領域を不自然に狭くしすぎない */

.palmu-v3
.profile-name{
  min-width:0;
}


/* ---------------------------------------------------------
   MOBILE 390 - 760
   --------------------------------------------------------- */

@media(
  min-width:390px
)
and
(
  max-width:760px
){

  /*
   * DOG TAGをスマホでも2カラム化。
   * 縦長になりすぎる問題を解消。
   */

  .palmu-v3 .dog-tag{
    min-height:205px;

    padding:
      24px 17px
      21px 42px;

    display:grid;

    grid-template-columns:
      minmax(0,1.15fr)
      minmax(118px,.85fr);

    align-items:center;

    gap:12px;
  }


  .palmu-v3 .tag-left{
    min-width:0;

    padding-left:0;
  }


  .palmu-v3 .tag-name{
    margin:
      10px 0 8px;

    font-size:
      clamp(
        1.45rem,
        6.7vw,
        1.9rem
      );

    line-height:.98;

    overflow-wrap:anywhere;
  }


  .palmu-v3 .tag-label{
    font-size:8px;
  }


  .palmu-v3 .tag-id{
    font-size:9px;
  }


  .palmu-v3 .tag-sign{
    margin-top:7px;

    font-size:15px;
  }


  .palmu-v3 .tag-right{
    min-width:0;

    padding:
      0 0 0 12px;

    border-top:0;

    border-left:
      1px solid
      rgba(0,0,0,.24);
  }


  .palmu-v3
  .tag-rank-line{
    gap:7px;

    align-items:center;
  }


  .palmu-v3
  .tag-rank-line
  .big-emblem{
    width:58px;
    height:58px;

    font-size:17px;
  }


  .palmu-v3
  .tag-stat small{
    font-size:7px;
  }


  .palmu-v3
  .tag-stat strong{
    margin:
      2px 0 7px;

    font-size:12px;

    line-height:1.05;
  }


  /*
   * CURRENT / NEXT を横並び。
   * PROGRESSだけ下段全幅。
   */

  .palmu-v3 .status-grid{
    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .palmu-v3
  .status-cell{
    min-width:0;

    min-height:150px;

    border-right:
      1px solid
      rgba(255,255,255,.09);

    border-bottom:
      1px solid
      rgba(255,255,255,.09);
  }


  .palmu-v3
  .status-cell:nth-child(2){
    border-right:0;
  }


  .palmu-v3
  .status-cell:nth-child(3){
    grid-column:
      1 / -1;

    min-height:128px;

    border-right:0;
  }


  .palmu-v3
  .badge-feature{
    min-height:105px;

    gap:8px;
  }


  .palmu-v3
  .badge-feature
  .big-emblem{
    width:67px;
    height:67px;

    flex:
      0 0 67px;

    font-size:19px;
  }


  .palmu-v3
  .badge-feature strong{
    font-size:12px;

    line-height:1.2;
  }


  .palmu-v3
  .main-progress{
    margin-top:14px;
  }


  /*
   * HISTORY / SPECIAL TITLEも
   * 440px前後なら横並び可能。
   */

  .palmu-v3 .detail-grid{
    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .palmu-v3
  .detail-section{
    min-width:0;
  }


  .palmu-v3
  .title-list{
    grid-template-columns:
      1fr;
  }


  .palmu-v3
  .history-list{
    gap:4px;
  }


  .palmu-v3
  .history-item{
    min-width:58px;
  }


  .palmu-v3
  .history-item
  .mini-emblem{
    width:32px;
    height:32px;
  }

}


/* ---------------------------------------------------------
   MOBILE PROFILE MESSAGE
   --------------------------------------------------------- */

@media(max-width:760px){

  .palmu-v3
  .profile-panel > p.profile-note{
    position:static;

    width:auto;

    margin:
      10px 4px 3px;

    padding:
      10px 12px;

    border-left:
      2px solid
      rgba(247,112,184,.50);

    color:#c9b5c2;

    background:
      rgba(255,255,255,.018);

    font-size:10px;
  }

}


/* ---------------------------------------------------------
   iPhone 393 / 402 / small width fix
   --------------------------------------------------------- */

@media(max-width:430px){

  /*
   * V2時代の
   * .system-title { display:none }
   * をV3で明示的に上書き。
   */

  .palmu-v3 .system-title{
    display:block;
  }


  .palmu-v3 .top-header{
    grid-template-columns:
      132px
      minmax(0,1fr);

    gap:8px;
  }


  .palmu-v3 .brand{
    width:128px;
  }


  .palmu-v3
  .system-title strong{
    display:block;

    font-size:11px;

    line-height:1.15;
  }


  .palmu-v3
  .system-title small,
  .palmu-v3
  .system-title span{
    display:none;
  }


  .palmu-v3
  .summary-strip small{
    font-size:6.5px;

    letter-spacing:.05em;
  }


  .palmu-v3
  .summary-strip strong{
    font-size:16px;
  }


  .palmu-v3
  .status-cell{
    padding:
      12px 10px;
  }


  .palmu-v3
  .badge-feature
  .big-emblem{
    width:58px;
    height:58px;

    flex:
      0 0 58px;
  }


  .palmu-v3
  .badge-feature strong{
    font-size:10px;
  }

}



/* =========================================================
   YUKINON PALMU REFERENCE DETAIL CSS V3.2
   ========================================================= */


/* ---------------------------------------------------------
   BACKGROUND ORNAMENT
   --------------------------------------------------------- */

.palmu-v3 .hud-grid{
  opacity:.22;
}


.palmu-v3 .hud-grid::before{
  content:"✿";

  position:fixed;

  left:2.2%;
  bottom:6%;

  color:
    rgba(232,82,164,.22);

  font-size:54px;

  text-shadow:
    92px -610px
      rgba(232,82,164,.08),
    310px -470px
      rgba(210,91,180,.07),
    910px -540px
      rgba(228,101,181,.08),
    1320px -220px
      rgba(233,88,164,.09),
    1490px -630px
      rgba(230,101,188,.08);

  transform:
    rotate(-16deg);

  pointer-events:none;
}


/* ---------------------------------------------------------
   SUPPORTER PANEL HEADER / SORT
   --------------------------------------------------------- */

.palmu-v3
.supporter-panel > header{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:16px;
}


.v32-sort{
  display:flex;

  align-items:center;

  gap:8px;
}


.v32-sort > span{
  color:#756775;

  font-size:7px;

  letter-spacing:.13em;
}


.v32-sort select{
  min-width:155px;

  height:30px;

  padding:
    0 28px
    0 10px;

  color:#d8c8d3;

  border:
    1px solid
    rgba(177,131,170,.32);

  border-radius:5px;

  outline:0;

  background:
    #0d0a10;

  font-size:9px;

  cursor:pointer;
}


/* ---------------------------------------------------------
   TOP SUPPORTER
   --------------------------------------------------------- */

.row-crown{
  margin-right:3px;

  color:#ffe384;

  font-size:11px;

  text-shadow:
    0 0 10px
    rgba(255,210,89,.42);
}


.palmu-v3
.supporter-row.is-top-supporter{
  border-bottom-color:
    rgba(255,198,101,.12);
}


/* ---------------------------------------------------------
   ORNATE RANK EMBLEM
   --------------------------------------------------------- */

.palmu-v3
.big-emblem,
.palmu-v3
.mini-emblem,
.badge-unlock-emblem{
  clip-path:
    polygon(
      50% 0%,
      61% 12%,
      78% 7%,
      83% 23%,
      100% 34%,
      90% 50%,
      100% 66%,
      83% 77%,
      78% 93%,
      61% 88%,
      50% 100%,
      39% 88%,
      22% 93%,
      17% 77%,
      0% 66%,
      10% 50%,
      0% 34%,
      17% 23%,
      22% 7%,
      39% 12%
    );

  box-shadow:
    inset 0 0 0 2px
      rgba(255,255,255,.16);

  outline:
    1px solid
    rgba(255,255,255,.18);

  outline-offset:-7px;
}


.palmu-v3
.rank-diamond{
  background:
    radial-gradient(
      circle at 38% 27%,
      #fff 0 3%,
      transparent 4%
    ),
    linear-gradient(
      135deg,
      #3728a9,
      #8f55ff 24%,
      #e764d8 52%,
      #5dcaff 75%,
      #7846c7
    );
}


.palmu-v3
.rank-special{
  background:
    radial-gradient(
      circle at 35% 25%,
      #fff 0 3%,
      transparent 4%
    ),
    linear-gradient(
      135deg,
      #9b245f,
      #f44da8 28%,
      #ff9bd4 48%,
      #8a4bd0 76%,
      #dc4597
    );
}


/* ---------------------------------------------------------
   PROFILE QUOTE / TOP BADGE
   --------------------------------------------------------- */

.profile-top-supporter{
  position:absolute;

  top:44px;
  right:8px;

  padding:
    5px 9px;

  color:#ffd879;

  border:
    1px solid
    rgba(240,190,78,.55);

  border-radius:5px;

  background:
    linear-gradient(
      135deg,
      rgba(93,60,11,.78),
      rgba(31,19,8,.72)
    );

  font-family:
    Georgia,
    serif;

  font-size:8px;

  font-weight:900;

  letter-spacing:.07em;

  box-shadow:
    0 0 13px
    rgba(239,183,72,.09);
}


.profile-quote{
  position:absolute;

  right:17px;
  top:82px;

  width:30%;

  margin:0;

  color:#d9c2d2;

  font-family:
    Georgia,
    "Yu Mincho",
    serif;

  font-size:11px;

  font-style:normal;

  line-height:1.65;

  opacity:.90;
}


.profile-quote b{
  color:#d47bb2;

  font-size:22px;

  font-weight:400;

  line-height:0;
}


/* ---------------------------------------------------------
   DOG TAG CHAIN
   --------------------------------------------------------- */

.dog-chain{
  position:absolute !important;

  z-index:5 !important;

  left:-47px;
  top:73px;

  width:92px;
  height:17px;

  border-radius:999px;

  background:
    radial-gradient(
      circle,
      #d0ccd1 0 3px,
      #4d4950 4px,
      transparent 5px
    )
    0 50%
    /
    13px 13px
    repeat-x;

  filter:
    drop-shadow(
      0 2px 2px
      rgba(0,0,0,.60)
    );

  transform:
    rotate(-54deg);

  transform-origin:right center;
}


/* ---------------------------------------------------------
   DOG TAG RIBBON
   --------------------------------------------------------- */

.dog-ribbon{
  position:absolute !important;

  z-index:6 !important;

  left:-14px;
  top:111px;

  width:48px;
  height:29px;

  border-radius:
    50% 50%
    45% 45%;

  background:
    radial-gradient(
      circle at center,
      #f7a3ce 0 12%,
      #b94285 13% 26%,
      #e76aab 27% 55%,
      #7e285f 56%
    );

  box-shadow:
    0 3px 9px
    rgba(0,0,0,.42);
}


.dog-ribbon::before,
.dog-ribbon::after{
  content:"";

  position:absolute;

  top:18px;

  width:31px;
  height:47px;

  background:
    linear-gradient(
      135deg,
      #ed7ab8,
      #922b70
    );

  clip-path:
    polygon(
      0 0,
      100% 12%,
      72% 100%,
      48% 68%,
      22% 100%
    );
}


.dog-ribbon::before{
  left:-6px;

  transform:
    rotate(18deg);
}


.dog-ribbon::after{
  right:-6px;

  transform:
    rotate(-18deg)
    scaleX(-1);
}


.dog-ribbon span{
  position:absolute;

  inset:7px;

  z-index:3;

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #ffd1e7,
      #c94b90
    );
}


/* ---------------------------------------------------------
   PAGINATION
   --------------------------------------------------------- */

.v32-pagination{
  min-height:58px;

  padding:
    12px 15px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  border-top:
    1px solid
    rgba(255,255,255,.06);
}


.v32-pagination[hidden]{
  display:none;
}


.v32-pagination button{
  min-width:30px;
  height:30px;

  padding:
    0 8px;

  color:#bbaeba;

  border:
    1px solid
    rgba(165,126,164,.25);

  border-radius:5px;

  background:
    rgba(255,255,255,.02);

  font-family:
    Georgia,
    serif;

  font-size:9px;

  cursor:pointer;
}


.v32-pagination
button.is-active{
  color:#fff;

  border-color:
    rgba(255,154,210,.70);

  background:
    linear-gradient(
      135deg,
      #ef79b7,
      #bd4d91
    );

  box-shadow:
    0 0 12px
    rgba(235,81,164,.25);
}


.v32-pagination
button:disabled{
  opacity:.25;

  cursor:default;
}


.v32-pagination span{
  color:#756875;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px){

  .v32-sort{
    display:none;
  }


  .profile-top-supporter{
    top:41px;
    right:7px;

    font-size:6px;
  }


  .profile-quote{
    position:static;

    width:auto;

    margin:
      5px 5px
      10px;

    padding:
      9px 11px;

    border-left:
      2px solid
      rgba(240,101,179,.45);

    background:
      rgba(255,255,255,.018);

    font-size:9px;
  }


  .dog-chain{
    left:-31px;
    top:68px;

    width:62px;

    transform:
      rotate(-58deg);
  }


  .dog-ribbon{
    left:-8px;
    top:104px;

    transform:
      scale(.74);

    transform-origin:
      top left;
  }


  .v32-pagination{
    overflow-x:auto;

    justify-content:flex-start;
  }

}



/* =========================================================
   YUKINON PALMU HERO VISUAL V3.3
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP HERO
   --------------------------------------------------------- */

.palmu-v3 .top-header{
  position:relative;

  isolation:isolate;

  min-height:118px;

  background:
    linear-gradient(
      90deg,
      rgba(7,4,10,.82) 0%,
      rgba(9,5,11,.69) 18%,
      rgba(13,6,15,.38) 38%,
      rgba(11,5,14,.08) 58%,
      rgba(7,4,10,.20) 78%,
      rgba(6,3,8,.38) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8,3,11,.04) 0%,
      rgba(7,3,9,.04) 60%,
      rgba(7,3,10,.66) 100%
    ),
    url(
      "/assets/images/palmu/palmu-header-v334.png?v=3.3.4"
    );

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-size:
    cover,
    cover,
    cover;

  background-position:
    center,
    center,
    center 42%;

  box-shadow:
    inset 0 -23px 35px
      rgba(0,0,0,.32),
    inset 0 1px
      rgba(255,255,255,.025),
    0 1px 0
      rgba(255,91,178,.36);
}


/*
 * 旧V3.0の抽象背景を弱くして、
 * 専用イラストを主役にする。
 */

.palmu-v3 .top-header::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:-1;

  pointer-events:none;

  opacity:1;

  background:
    linear-gradient(
      90deg,
      rgba(11,5,13,.44) 0%,
      rgba(11,5,13,.16) 27%,
      transparent 48%,
      transparent 76%,
      rgba(8,4,10,.13) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.015) 0 1px,
      transparent 1px 115px
    );
}


/*
 * 画像内に
 * Thank you for always supporting...
 * が描かれているため、
 * DOM側の重複テキストは隠す。
 */

.palmu-v3
.v3-header-message{
  display:none;
}


/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

.palmu-v3 .brand{
  z-index:4;
}


.palmu-v3 .brand img{
  filter:
    drop-shadow(
      0 0 4px
      rgba(255,255,255,.30)
    )
    drop-shadow(
      0 0 15px
      rgba(255,86,182,.48)
    )
    drop-shadow(
      0 5px 16px
      rgba(0,0,0,.42)
    );
}


/* ---------------------------------------------------------
   SYSTEM TITLE
   --------------------------------------------------------- */

.palmu-v3 .system-title{
  z-index:4;

  text-shadow:
    0 2px 10px
    rgba(0,0,0,.78);
}


.palmu-v3
.system-title small{
  color:#ffafd7;

  text-shadow:
    0 0 11px
    rgba(245,97,181,.36);
}


.palmu-v3
.system-title strong{
  color:#fffafd;

  text-shadow:
    0 2px 4px
      rgba(0,0,0,.85),
    0 0 18px
      rgba(255,110,191,.17);
}


.palmu-v3
.system-title span{
  color:#ded0d9;

  text-shadow:
    0 1px 5px
    rgba(0,0,0,.88);
}


/* ---------------------------------------------------------
   PRIVATE PREVIEW
   --------------------------------------------------------- */

.palmu-v3 .header-side{
  z-index:5;
}


.palmu-v3 .preview-chip{
  color:#ffe09b;

  border-color:
    rgba(255,199,93,.45);

  background:
    rgba(15,8,14,.72);

  box-shadow:
    inset 0 0 13px
      rgba(255,203,104,.03),
    0 4px 15px
      rgba(0,0,0,.30);

  backdrop-filter:
    blur(5px);
}


/* ---------------------------------------------------------
   HERO BOTTOM GLOW
   --------------------------------------------------------- */

.palmu-v3 .top-header::after{
  content:"";

  position:absolute;

  z-index:3;

  left:0;
  right:0;
  bottom:-1px;

  height:2px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,90,180,.72) 20%,
      rgba(255,141,207,.98) 48%,
      rgba(183,76,209,.78) 71%,
      transparent 100%
    );

  box-shadow:
    0 0 11px
    rgba(255,89,182,.54);
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media(min-width:1500px){

  .palmu-v3 .top-header{
    background-position:
      center,
      center,
      center 40%;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(
  min-width:761px
)
and
(
  max-width:1180px
){

  .palmu-v3 .top-header{
    background-position:
      center,
      center,
      58% 42%;
  }

}


/* =========================================================
   MOBILE HERO
   ========================================================= */

@media(max-width:760px){

  .palmu-v3 .top-header{
    min-height:88px;

    background:
      linear-gradient(
        90deg,
        rgba(7,4,10,.80) 0%,
        rgba(7,4,10,.68) 37%,
        rgba(8,4,11,.20) 66%,
        rgba(7,4,9,.31) 100%
      ),
      linear-gradient(
        180deg,
        transparent,
        rgba(5,3,7,.46)
      ),
      url(
        "/assets/images/palmu/palmu-header-v334.png?v=3.3.4"
      );

    background-size:
      cover,
      cover,
      auto 147px;

    background-repeat:
      no-repeat;

    background-position:
      center,
      center,
      64% 42%;
  }


  .palmu-v3
  .top-header::before{
    background:
      linear-gradient(
        90deg,
        rgba(7,4,9,.43),
        rgba(7,4,9,.10) 62%,
        transparent
      );
  }


  .palmu-v3
  .brand img{
    filter:
      drop-shadow(
        0 0 9px
        rgba(255,84,183,.45)
      );
  }

}


/* =========================================================
   SMALL iPHONE
   ========================================================= */

@media(max-width:430px){

  .palmu-v3 .top-header{
    background-size:
      cover,
      cover,
      auto 132px;

    background-position:
      center,
      center,
      64% 43%;
  }


  .palmu-v3
  .system-title strong{
    text-shadow:
      0 2px 5px
      rgba(0,0,0,.95);
  }

}



/* =========================================================
   YUKINON PALMU FINAL HERO TUNE V3.3.1

   Target:
   original PALMU SUPPORTER BADGE SYSTEM concept
   ========================================================= */


/* =========================================================
   DESKTOP HERO
   ========================================================= */

.palmu-v3 .top-header{
  position:relative;

  isolation:isolate;

  min-height:116px;

  padding-top:0;
  padding-bottom:0;

  overflow:hidden;

  /*
   * ベースは暗いピンクブラック。
   * 元画像そのものは疑似要素で重ねる。
   */
  background:
    radial-gradient(
      ellipse at 71% 41%,
      rgba(232,72,158,.22),
      transparent 32%
    ),
    linear-gradient(
      90deg,
      #100713 0%,
      #211023 40%,
      #32162e 70%,
      #120914 100%
    );

  border-bottom:
    1px solid
    rgba(255,95,178,.68);

  box-shadow:
    inset 0 -20px 32px
      rgba(0,0,0,.35),
    0 1px 0
      rgba(255,117,193,.18);
}


/* ---------------------------------------------------------
   LAYER 1
   背景全体に低コントラストで敷く
   --------------------------------------------------------- */

.palmu-v3 .top-header::before{
  content:"";

  position:absolute;

  z-index:0;

  inset:-16px;

  pointer-events:none;

  opacity:.34;

  background-image:
    linear-gradient(
      90deg,
      rgba(8,4,10,.64) 0%,
      rgba(8,4,10,.34) 27%,
      rgba(8,4,10,.04) 55%,
      rgba(8,4,10,.12) 100%
    ),
    url(
      "/assets/images/palmu/palmu-header-v334.png?v=3.3.4"
    );

  background-repeat:
    no-repeat,
    no-repeat;

  background-size:
    cover,
    cover;

  background-position:
    center,
    center 43%;

  filter:
    saturate(.92)
    contrast(.94)
    blur(1.5px);

  transform:
    scale(1.025);
}


/* ---------------------------------------------------------
   LAYER 2
   キャラクターを適正サイズで右側に配置
   --------------------------------------------------------- */

.palmu-v3 .top-header::after{
  content:"";

  position:absolute;

  z-index:1;

  inset:0;

  pointer-events:none;

  /*
   * 3:1画像をcoverしないことが重要。
   * 高さ基準で縮小して配置する。
   */
  background-image:
    url(
      "/assets/images/palmu/palmu-header-v334.png?v=3.3.4"
    );

  background-repeat:
    no-repeat;

  background-size:
    auto 218px;

  background-position:
    right 185px center;

  opacity:.93;

  filter:
    saturate(1.05)
    contrast(1.02);

  /*
   * 左側をフェードさせ、
   * ロゴ・タイトルとの境界を自然にする。
   */
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 42%,
      rgba(0,0,0,.16) 48%,
      #000 59%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 42%,
      rgba(0,0,0,.16) 48%,
      #000 59%,
      #000 100%
    );
}


/* =========================================================
   HEADER CONTENT
   ========================================================= */

.palmu-v3 .brand,
.palmu-v3 .system-title,
.palmu-v3 .header-side{
  position:relative;

  z-index:5;
}


/* Logo */

.palmu-v3 .brand{
  width:245px;
}


.palmu-v3 .brand img{
  width:100%;

  filter:
    drop-shadow(
      0 0 4px
      rgba(255,255,255,.20)
    )
    drop-shadow(
      0 0 14px
      rgba(255,90,187,.52)
    )
    drop-shadow(
      0 4px 10px
      rgba(0,0,0,.75)
    );
}


/* PALMU SUPPORTER */

.palmu-v3
.system-title small{
  color:#ffacd4;

  font-size:14px;

  letter-spacing:.17em;

  text-shadow:
    0 1px 4px
      rgba(0,0,0,.90),
    0 0 10px
      rgba(255,112,192,.32);
}


/* BADGE SYSTEM */

.palmu-v3
.system-title strong{
  margin-top:1px;

  font-size:
    clamp(
      1.9rem,
      2.15vw,
      2.45rem
    );

  line-height:1;

  letter-spacing:.045em;

  text-shadow:
    0 2px 4px
      rgba(0,0,0,.90),
    0 0 20px
      rgba(255,126,199,.12);
}


/* YUKINON OFFICIAL SUPPORTERS */

.palmu-v3
.system-title span{
  margin-top:8px;

  color:#d1bfcc;

  font-size:8px;

  letter-spacing:.20em;

  text-shadow:
    0 2px 4px
    rgba(0,0,0,.95);
}


/* ---------------------------------------------------------
   PREVIEW CHIP
   --------------------------------------------------------- */

.palmu-v3 .header-side{
  align-self:start;

  margin-top:13px;
}


.palmu-v3 .preview-chip{
  min-height:34px;

  padding:
    0 13px;

  color:#ffe18e;

  border:
    1px solid
    rgba(226,179,78,.42);

  background:
    rgba(10,5,10,.76);

  box-shadow:
    inset 0 0 12px
      rgba(222,181,85,.04),
    0 4px 12px
      rgba(0,0,0,.35);

  backdrop-filter:
    blur(5px);

  font-size:8px;
}


/*
 * 生成画像側にThank youメッセージがあるため
 * HTML側の重複メッセージは非表示。
 */

.palmu-v3
.v3-header-message{
  display:none !important;
}


/* =========================================================
   NAV JOIN
   ========================================================= */

.palmu-v3 .hud-tabs{
  box-shadow:
    0 -1px 0
      rgba(255,100,183,.12),
    inset 0 1px 0
      rgba(255,255,255,.015);
}


/* =========================================================
   VERY WIDE DESKTOP
   ========================================================= */

@media(min-width:1700px){

  .palmu-v3 .top-header::after{
    background-size:
      auto 225px;

    background-position:
      right 210px center;
  }

}


/* =========================================================
   NORMAL DESKTOP
   ========================================================= */

@media(
  min-width:1181px
)
and
(
  max-width:1699px
){

  .palmu-v3 .top-header::after{
    background-size:
      auto 210px;

    background-position:
      right 110px center;
  }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media(
  min-width:761px
)
and
(
  max-width:1180px
){

  .palmu-v3 .top-header{
    min-height:106px;
  }


  .palmu-v3 .top-header::after{
    background-size:
      auto 178px;

    background-position:
      right 10px center;

    opacity:.75;
  }


  .palmu-v3 .brand{
    width:195px;
  }


  .palmu-v3
  .system-title strong{
    font-size:1.65rem;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  .palmu-v3 .top-header{
    min-height:86px;

    background:
      radial-gradient(
        ellipse at 84% 40%,
        rgba(225,72,160,.19),
        transparent 40%
      ),
      linear-gradient(
        90deg,
        #100812,
        #271126 70%,
        #100812
      );
  }


  /*
   * Mobileでは背景レイヤーだけ薄く残す。
   */

  .palmu-v3 .top-header::before{
    inset:0;

    opacity:.30;

    background-image:
      linear-gradient(
        90deg,
        rgba(8,4,10,.64),
        rgba(8,4,10,.18)
      ),
      url(
        "/assets/images/palmu/palmu-header-v334.png?v=3.3.4"
      );

    background-size:
      cover,
      auto 150px;

    background-position:
      center,
      63% center;

    filter:none;

    transform:none;
  }


  /*
   * PC用の前景レイヤーは
   * 小画面では消して情報量を抑える。
   */

  .palmu-v3 .top-header::after{
    display:none;
  }


  .palmu-v3 .brand{
    width:143px;
  }


  .palmu-v3
  .system-title strong{
    font-size:12px;

    line-height:1.1;
  }

}


/* =========================================================
   SMALL iPHONE
   ========================================================= */

@media(max-width:430px){

  .palmu-v3 .top-header{
    min-height:82px;
  }


  .palmu-v3 .brand{
    width:127px;
  }


  .palmu-v3
  .system-title strong{
    font-size:10.5px;
  }


  .palmu-v3 .top-header::before{
    background-size:
      cover,
      auto 138px;

    background-position:
      center,
      65% center;
  }

}



/* =========================================================
   YUKINON PALMU HERO BALANCE V3.3.2

   - remove duplicated giant background character
   - keep one controlled hero artwork layer
   - match original concept proportions
   ========================================================= */


/* ---------------------------------------------------------
   HEADER BASE
   --------------------------------------------------------- */

.palmu-v3 .top-header{
  min-height:118px;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 66% 45%,
      rgba(228,72,158,.20),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 42% 115%,
      rgba(167,58,143,.18),
      transparent 40%
    ),
    linear-gradient(
      90deg,
      #100812 0%,
      #1c0d1e 34%,
      #2a1228 66%,
      #100812 100%
    );
}


/* ---------------------------------------------------------
   BACKGROUND LAYER

   ここには画像を置かない。
   これで巨大な目・顔の二重表示を解消。
   --------------------------------------------------------- */

.palmu-v3 .top-header::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  pointer-events:none;

  opacity:1;

  background:
    radial-gradient(
      circle at 52% 62%,
      rgba(255,85,184,.16),
      transparent 16%
    ),
    linear-gradient(
      90deg,
      rgba(4,2,7,.42) 0%,
      rgba(5,2,8,.22) 29%,
      rgba(8,4,11,.02) 56%,
      rgba(8,4,11,.08) 82%,
      rgba(5,2,8,.20) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.014) 0 1px,
      transparent 1px 112px
    );

  filter:none;

  transform:none;
}


/* ---------------------------------------------------------
   HERO ART

   元画像はこの1層だけ。
   PCでは右側約40〜45%に見せる。
   --------------------------------------------------------- */

.palmu-v3 .top-header::after{
  content:"";

  position:absolute;

  z-index:1;

  inset:0;

  display:block;

  pointer-events:none;

  background-image:
    url(
      "/assets/images/palmu/palmu-header-v334.png?v=3.3.4"
    );

  background-repeat:
    no-repeat;

  /*
   * coverを使わない。
   * 高さ300px相当まで縮小して
   * 顔の大きさを制御する。
   */
  background-size:
    auto 300px;

  background-position:
    right 82px 55%;

  opacity:.94;

  filter:
    saturate(1.06)
    contrast(1.03)
    brightness(.96);

  /*
   * 左側を自然に消して
   * ロゴとBADGE SYSTEMを読みやすくする。
   */
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 34%,
      rgba(0,0,0,.05) 41%,
      rgba(0,0,0,.45) 52%,
      #000 63%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 34%,
      rgba(0,0,0,.05) 41%,
      rgba(0,0,0,.45) 52%,
      #000 63%,
      #000 100%
    );
}


/* ---------------------------------------------------------
   HEADER CONTENT
   --------------------------------------------------------- */

.palmu-v3 .brand,
.palmu-v3 .system-title,
.palmu-v3 .header-side{
  position:relative;

  z-index:5;
}


.palmu-v3 .brand{
  width:235px;
}


.palmu-v3 .system-title{
  align-self:center;
}


.palmu-v3
.system-title small{
  font-size:13px;
}


.palmu-v3
.system-title strong{
  font-size:
    clamp(
      1.8rem,
      2.05vw,
      2.35rem
    );
}


.palmu-v3
.system-title span{
  font-size:8px;
}


/* ---------------------------------------------------------
   PRIVATE PREVIEW
   --------------------------------------------------------- */

.palmu-v3 .header-side{
  margin-top:12px;
}


/* ---------------------------------------------------------
   VERY WIDE
   --------------------------------------------------------- */

@media(min-width:1800px){

  .palmu-v3 .top-header::after{
    background-size:
      auto 315px;

    background-position:
      right 120px 55%;
  }

}


/* ---------------------------------------------------------
   DESKTOP 1181 - 1799
   --------------------------------------------------------- */

@media(
  min-width:1181px
)
and
(
  max-width:1799px
){

  .palmu-v3 .top-header::after{
    background-size:
      auto 285px;

    background-position:
      right 48px 55%;
  }

}


/* ---------------------------------------------------------
   SMALL DESKTOP / TABLET
   --------------------------------------------------------- */

@media(
  min-width:761px
)
and
(
  max-width:1180px
){

  .palmu-v3 .top-header{
    min-height:104px;
  }


  .palmu-v3 .top-header::after{
    background-size:
      auto 235px;

    background-position:
      right -25px 55%;

    opacity:.82;
  }


  .palmu-v3 .brand{
    width:190px;
  }

}


/* ---------------------------------------------------------
   MOBILE

   モバイルではヘッダーが細いので
   キャラを主張させすぎず背景として使用。
   --------------------------------------------------------- */

@media(max-width:760px){

  .palmu-v3 .top-header{
    min-height:86px;
  }


  .palmu-v3 .top-header::before{
    background:
      linear-gradient(
        90deg,
        rgba(8,4,10,.62) 0%,
        rgba(8,4,10,.31) 50%,
        rgba(8,4,10,.12) 100%
      );
  }


  .palmu-v3 .top-header::after{
    display:block;

    background-size:
      auto 176px;

    background-position:
      right -67px 54%;

    opacity:.48;

    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 38%,
        #000 70%
      );

    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 38%,
        #000 70%
      );
  }

}


/* ---------------------------------------------------------
   SMALL iPHONE
   --------------------------------------------------------- */

@media(max-width:430px){

  .palmu-v3 .top-header{
    min-height:82px;
  }


  .palmu-v3 .top-header::after{
    background-size:
      auto 158px;

    background-position:
      right -72px 54%;

    opacity:.43;
  }

}



/* =========================================================
   YUKINON PALMU REAL HERO CSS V3.3.3

   Real <img> hero layer.
   No longer depends on ::after.
   ========================================================= */


/* ---------------------------------------------------------
   HEADER BASE
   --------------------------------------------------------- */

.palmu-v3 .top-header{
  position:relative;

  isolation:isolate;

  min-height:118px;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 56% 54%,
      rgba(228,72,158,.18),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 79% 24%,
      rgba(125,56,145,.17),
      transparent 31%
    ),
    linear-gradient(
      90deg,
      #0f0712 0%,
      #1b0d1d 34%,
      #281126 67%,
      #100812 100%
    );
}


/*
 * 旧V3.3/V3.3.1/V3.3.2の
 * ::afterヒーローを完全停止。
 */

.palmu-v3
.top-header::after{
  content:none !important;

  display:none !important;

  width:auto !important;
  height:auto !important;

  background:none !important;

  box-shadow:none !important;
}


/*
 * ::beforeは薄いHUD背景だけにする。
 */

.palmu-v3
.top-header::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  opacity:1;

  pointer-events:none;

  transform:none;

  filter:none;

  background:
    radial-gradient(
      circle at 51% 62%,
      rgba(255,87,184,.13),
      transparent 15%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.012) 0 1px,
      transparent 1px 112px
    );
}


/* =========================================================
   REAL HERO ART
   ========================================================= */

.v333-hero-art{
  position:absolute;

  inset:0;

  z-index:1;

  overflow:hidden;

  pointer-events:none;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.02) 20%,
      rgba(0,0,0,.34) 36%,
      #000 51%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.02) 20%,
      rgba(0,0,0,.34) 36%,
      #000 51%,
      #000 100%
    );
}


.v333-hero-art img{
  position:absolute;

  /*
   * 元画像 2172x724。
   *
   * 幅を明示的に制御することで
   * coverによる巨大化を防ぐ。
   */
  width:
    clamp(
      780px,
      58vw,
      1040px
    );

  max-width:none;

  height:auto;

  right:
    clamp(
      18px,
      3vw,
      70px
    );

  /*
   * 元画像の顔中心が上寄りなので
   * 通常の-50%ではなく-41%。
   */
  top:50%;

  transform:
    translateY(-41%);

  opacity:.96;

  filter:
    saturate(1.07)
    contrast(1.03)
    brightness(.97);

  user-select:none;
}


/* ---------------------------------------------------------
   CONTENT ABOVE HERO
   --------------------------------------------------------- */

.palmu-v3 .brand,
.palmu-v3 .system-title,
.palmu-v3 .header-side{
  position:relative;

  z-index:5;
}


/* ---------------------------------------------------------
   LEFT READABILITY
   --------------------------------------------------------- */

.palmu-v3 .top-header{
  box-shadow:
    inset 420px 0 110px
      -140px
      rgba(4,2,6,.39),

    inset 0 -22px 30px
      rgba(0,0,0,.22),

    0 1px 0
      rgba(255,91,178,.35);
}


/* logo */

.palmu-v3 .brand{
  width:235px;
}


.palmu-v3 .brand img{
  width:100%;

  filter:
    drop-shadow(
      0 0 4px
      rgba(255,255,255,.20)
    )
    drop-shadow(
      0 0 14px
      rgba(255,91,187,.50)
    )
    drop-shadow(
      0 4px 10px
      rgba(0,0,0,.72)
    );
}


/* text */

.palmu-v3 .system-title{
  text-shadow:
    0 2px 8px
    rgba(0,0,0,.90);
}


.palmu-v3
.system-title small{
  color:#ffacd5;
}


.palmu-v3
.system-title strong{
  color:#fffafd;
}


.palmu-v3
.system-title span{
  color:#dacbd5;
}


/* HTML側の旧重複メッセージ */

.palmu-v3
.v3-header-message{
  display:none !important;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media(min-width:1800px){

  .v333-hero-art img{
    width:1040px;

    right:70px;

    transform:
      translateY(-41%);
  }

}


/* =========================================================
   NORMAL DESKTOP
   ========================================================= */

@media(
  min-width:1181px
)
and
(
  max-width:1799px
){

  .v333-hero-art img{
    width:
      clamp(
        790px,
        57vw,
        950px
      );

    right:28px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(
  min-width:761px
)
and
(
  max-width:1180px
){

  .palmu-v3 .top-header{
    min-height:104px;
  }


  .v333-hero-art{
    opacity:.82;
  }


  .v333-hero-art img{
    width:690px;

    right:-105px;

    transform:
      translateY(-41%);
  }


  .palmu-v3 .brand{
    width:190px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  .palmu-v3 .top-header{
    min-height:86px;
  }


  .v333-hero-art{
    opacity:.48;

    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 39%,
        rgba(0,0,0,.60) 65%,
        #000 100%
      );

    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 39%,
        rgba(0,0,0,.60) 65%,
        #000 100%
      );
  }


  .v333-hero-art img{
    width:520px;

    right:-185px;

    top:50%;

    transform:
      translateY(-40%);
  }

}


/* =========================================================
   SMALL iPHONE
   ========================================================= */

@media(max-width:430px){

  .palmu-v3 .top-header{
    min-height:82px;
  }


  .v333-hero-art img{
    width:475px;

    right:-185px;

    transform:
      translateY(-40%);
  }

}



/* =========================================================
   YUKINON PALMU HERO ALIGNMENT V3.3.4
   ========================================================= */


/*
 * V3.3.3のREAL IMG方式を維持。
 * 新しい2172x724ビジュアル用の微調整。
 */

@media(min-width:1800px){

  .v333-hero-art img{
    width:990px;

    right:48px;

    top:50%;

    transform:
      translateY(-43%);
  }

}


@media(
  min-width:1400px
)
and
(
  max-width:1799px
){

  .v333-hero-art img{
    width:
      clamp(
        820px,
        54vw,
        930px
      );

    right:28px;

    top:50%;

    transform:
      translateY(-43%);
  }

}


@media(
  min-width:1181px
)
and
(
  max-width:1399px
){

  .v333-hero-art img{
    width:790px;

    right:-15px;

    transform:
      translateY(-43%);
  }

}


/*
 * 左から中央にかけては
 * ロゴとタイトルを読みやすくしつつ、
 * 中央のネオン猫が少し見えるよう調整。
 */

.v333-hero-art{
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 19%,
      rgba(0,0,0,.08) 27%,
      rgba(0,0,0,.50) 42%,
      #000 55%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 19%,
      rgba(0,0,0,.08) 27%,
      rgba(0,0,0,.50) 42%,
      #000 55%,
      #000 100%
    );
}


/* Tablet */

@media(
  min-width:761px
)
and
(
  max-width:1180px
){

  .v333-hero-art img{
    width:660px;

    right:-95px;

    transform:
      translateY(-42%);
  }

}


/* iPhone / mobile */

@media(max-width:760px){

  .v333-hero-art img{
    width:500px;

    right:-175px;

    transform:
      translateY(-41%);
  }

}


@media(max-width:430px){

  .v333-hero-art img{
    width:455px;

    right:-174px;

    transform:
      translateY(-41%);
  }

}



/* =========================================================
   YUKINON PALMU FULL PAGE SCENE V3.4

   Full scene background
   +
   glass HUD interface
   ========================================================= */


/* =========================================================
   ROOT / PAGE SCENE
   ========================================================= */

html{
  min-height:100%;

  background:
    #08050b;
}


body.palmu-v3{
  position:relative;

  min-height:100vh;

  isolation:isolate;

  background:
    transparent !important;
}


/*
 * MAIN SCENE
 *
 * 画面全体に固定。
 * HUDをスクロールしても背景世界は継続する。
 */

body.palmu-v3::before{
  content:"";

  position:fixed;

  z-index:-3;

  inset:0;

  pointer-events:none;

  opacity:1;

  background-image:
    url(
      "/assets/images/palmu/palmu-bg-v34-desktop.png?v=3.4.0"
    );

  background-repeat:
    no-repeat;

  background-position:
    center top;

  background-size:
    cover;

  filter:
    saturate(.88)
    brightness(.70)
    contrast(1.03);

  transform:
    scale(1.012);
}


/*
 * DARK HUD READABILITY LAYER
 */

body.palmu-v3::after{
  content:"";

  position:fixed;

  z-index:-2;

  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at 50% 17%,
      rgba(92,27,78,.10),
      transparent 42%
    ),

    linear-gradient(
      180deg,
      rgba(5,3,8,.22) 0%,
      rgba(5,3,8,.30) 24%,
      rgba(4,3,7,.42) 62%,
      rgba(3,2,5,.58) 100%
    ),

    linear-gradient(
      90deg,
      rgba(3,2,5,.24),
      transparent 22%,
      transparent 78%,
      rgba(3,2,5,.25)
    );

  box-shadow:
    inset 0 0 180px
    rgba(0,0,0,.40);
}


/* =========================================================
   TOP HEADER
   ========================================================= */

.palmu-v3 .top-header{
  position:relative;

  background:
    linear-gradient(
      90deg,
      rgba(10,5,13,.80) 0%,
      rgba(13,6,16,.57) 27%,
      rgba(12,6,15,.20) 55%,
      rgba(7,4,10,.27) 100%
    ) !important;

  backdrop-filter:
    blur(1px);

  -webkit-backdrop-filter:
    blur(1px);
}


/*
 * V3.3.3のキャラクターは
 * 上部オーバーレイとして残す。
 */

.v333-hero-art{
  z-index:1;

  opacity:.90;
}


/*
 * 文字の左側だけ暗くして
 * 背景の世界を完全には消さない。
 */

.palmu-v3
.top-header::before{
  background:
    linear-gradient(
      90deg,
      rgba(7,3,10,.48) 0%,
      rgba(7,3,10,.27) 29%,
      rgba(7,3,10,.05) 57%,
      transparent 100%
    ) !important;
}


/* =========================================================
   NAV
   ========================================================= */

.palmu-v3 .hud-tabs{
  background:
    rgba(7,5,10,.82) !important;

  border-top:
    1px solid
    rgba(255,116,190,.12);

  border-bottom:
    1px solid
    rgba(255,93,178,.52);

  backdrop-filter:
    blur(12px)
    saturate(1.08);

  -webkit-backdrop-filter:
    blur(12px)
    saturate(1.08);

  box-shadow:
    0 6px 22px
    rgba(0,0,0,.16);
}


/* =========================================================
   MAIN
   ========================================================= */

.palmu-v3 main{
  position:relative;

  background:
    transparent;
}


/* =========================================================
   SUMMARY / STATS
   ========================================================= */

.palmu-v3 .summary-strip{
  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(74,22,64,.28),
      rgba(9,7,12,.31),
      rgba(72,24,67,.25)
    ) !important;

  border-bottom:
    1px solid
    rgba(255,118,191,.19);

  backdrop-filter:
    blur(4px)
    saturate(1.1);

  -webkit-backdrop-filter:
    blur(4px)
    saturate(1.1);

  box-shadow:
    inset 0 0 50px
    rgba(212,65,152,.025);
}


.palmu-v3
.summary-strip::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,112,190,.025),
      transparent
    );
}


/* =========================================================
   MAIN HUD PANELS
   ========================================================= */

.palmu-v3
.supporter-panel,

.palmu-v3
.profile-panel{
  border:
    1px solid
    rgba(255,123,194,.38);

  background:
    linear-gradient(
      150deg,
      rgba(13,9,17,.89),
      rgba(6,6,10,.78)
    ) !important;

  backdrop-filter:
    blur(9px)
    saturate(1.13);

  -webkit-backdrop-filter:
    blur(9px)
    saturate(1.13);

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.028),

    inset 0 0 38px
      rgba(208,59,151,.025),

    0 20px 60px
      rgba(0,0,0,.31),

    0 0 20px
      rgba(205,62,151,.025);
}


/*
 * 大きな空き領域にも背景を透かす。
 */

.palmu-v3
.supporter-list{
  background:
    linear-gradient(
      180deg,
      rgba(4,3,7,.08),
      rgba(4,3,7,.22)
    );
}


/* =========================================================
   SUPPORTER PANEL INNER HUD
   ========================================================= */

.palmu-v3 .rank-filter{
  background:
    rgba(11,8,14,.56) !important;

  backdrop-filter:
    blur(5px);
}


.palmu-v3 .search-box{
  background:
    rgba(5,4,8,.58) !important;

  backdrop-filter:
    blur(6px);
}


.palmu-v3 .list-head{
  background:
    rgba(5,4,8,.37) !important;
}


.palmu-v3 .supporter-row{
  background:
    rgba(4,3,7,.10);
}


.palmu-v3
.supporter-row:hover{
  background:
    linear-gradient(
      90deg,
      rgba(204,58,146,.14),
      rgba(89,36,91,.06)
    );
}


.palmu-v3
.supporter-row.is-active{
  background:
    linear-gradient(
      90deg,
      rgba(218,54,149,.55),
      rgba(93,30,85,.36)
    ) !important;

  backdrop-filter:
    blur(3px);
}


/* =========================================================
   PROFILE
   ========================================================= */

.palmu-v3 .profile-head{
  background:
    linear-gradient(
      90deg,
      rgba(8,6,11,.20),
      transparent
    );
}


/* =========================================================
   DOG TAG AREA
   ========================================================= */

/*
 * DOG TAGそのものは金属感を維持。
 * 周囲だけ背景との一体感を追加。
 */

.palmu-v3 .dog-tag{
  box-shadow:
    inset 0 1px
      rgba(255,255,255,.65),

    inset 0 -5px 14px
      rgba(0,0,0,.30),

    0 22px 52px
      rgba(0,0,0,.43),

    0 0 24px
      rgba(232,75,169,.08),

    0 0 0 1px
      rgba(255,255,255,.15);
}


/* =========================================================
   STATUS
   ========================================================= */

.palmu-v3 .status-grid{
  background:
    rgba(7,5,10,.54) !important;

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);
}


.palmu-v3 .status-cell{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.021),
      rgba(4,3,7,.10)
    ) !important;
}


/* =========================================================
   HISTORY / TITLE
   ========================================================= */

.palmu-v3 .detail-section{
  background:
    linear-gradient(
      145deg,
      rgba(13,9,16,.60),
      rgba(5,4,8,.43)
    ) !important;

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);
}


.palmu-v3 .special-title{
  backdrop-filter:
    blur(4px);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.v32-pagination{
  background:
    rgba(5,4,8,.18);
}


/* =========================================================
   FOOTER
   ========================================================= */

.palmu-v3 footer{
  background:
    transparent;

  text-shadow:
    0 2px 5px
    rgba(0,0,0,.8);
}


/* =========================================================
   BACKGROUND ATMOSPHERE
   ========================================================= */

.palmu-v3 .hud-grid{
  position:fixed;

  z-index:-1;

  inset:0;

  opacity:.26;

  pointer-events:none;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 5px,
      rgba(255,255,255,.009) 6px
    );
}


/*
 * V3.2の巨大疑似桜文字は
 * 実背景に桜が入ったため停止。
 */

.palmu-v3
.hud-grid::before{
  content:none !important;
}


/* =========================================================
   DESKTOP SCENE TUNING
   ========================================================= */

@media(min-width:1400px){

  body.palmu-v3::before{
    background-position:
      center 12%;
  }

}


/* =========================================================
   MOBILE / iPHONE
   ========================================================= */

@media(max-width:760px){

  body.palmu-v3::before{
    background-image:
      url(
        "/assets/images/palmu/palmu-bg-v34-mobile.png?v=3.4.0"
      );

    background-position:
      center top;

    background-size:
      cover;

    filter:
      saturate(.84)
      brightness(.59)
      contrast(1.02);

    transform:none;
  }


  body.palmu-v3::after{
    background:
      linear-gradient(
        180deg,
        rgba(4,3,7,.22),
        rgba(4,3,7,.42) 45%,
        rgba(3,2,5,.54)
      ),

      linear-gradient(
        90deg,
        rgba(3,2,5,.17),
        transparent,
        rgba(3,2,5,.17)
      );

    box-shadow:
      inset 0 0 70px
      rgba(0,0,0,.27);
  }


  .palmu-v3
  .supporter-panel,

  .palmu-v3
  .profile-panel{
    background:
      linear-gradient(
        155deg,
        rgba(11,8,14,.90),
        rgba(5,4,8,.82)
      ) !important;

    backdrop-filter:
      blur(8px);

    -webkit-backdrop-filter:
      blur(8px);
  }


  .palmu-v3 .summary-strip{
    background:
      rgba(24,10,25,.53)
      !important;
  }


  .palmu-v3 .status-grid{
    background:
      rgba(8,6,11,.63)
      !important;
  }

}


/* =========================================================
   REDUCED TRANSPARENCY FALLBACK
   ========================================================= */

@supports not (
  backdrop-filter:
    blur(1px)
){

  .palmu-v3
  .supporter-panel,

  .palmu-v3
  .profile-panel{
    background:
      rgba(9,7,12,.95)
      !important;
  }


  .palmu-v3
  .status-grid,

  .palmu-v3
  .detail-section{
    background:
      rgba(8,6,11,.92)
      !important;
  }

}



/* =========================================================
   YUKINON PALMU HUD GLASS FINISH V3.5
   ========================================================= */


/* =========================================================
   GLOBAL SCENE TUNING
   ========================================================= */

body.palmu-v3::before{
  filter:
    saturate(.94)
    brightness(.74)
    contrast(1.05);

  transform:
    scale(1.006);
}


body.palmu-v3::after{
  background:
    radial-gradient(
      ellipse at 50% 20%,
      rgba(116,32,96,.06),
      transparent 43%
    ),

    linear-gradient(
      180deg,
      rgba(3,2,5,.12) 0%,
      rgba(3,2,5,.21) 28%,
      rgba(3,2,5,.31) 64%,
      rgba(3,2,5,.46) 100%
    ),

    linear-gradient(
      90deg,
      rgba(2,1,4,.18),
      transparent 20%,
      transparent 80%,
      rgba(2,1,4,.18)
    );

  box-shadow:
    inset 0 0 140px
    rgba(0,0,0,.30);
}


/* =========================================================
   HEADER
   ========================================================= */

.palmu-v3 .top-header{
  background:
    linear-gradient(
      90deg,
      rgba(8,4,11,.73) 0%,
      rgba(10,5,13,.50) 26%,
      rgba(10,5,13,.15) 53%,
      rgba(7,4,10,.13) 100%
    ) !important;

  box-shadow:
    inset 0 -16px 28px
      rgba(0,0,0,.20),

    0 1px 0
      rgba(255,104,187,.38);
}


/* logo / titleの背後を自然に暗くする */

.palmu-v3
.top-header::before{
  background:
    linear-gradient(
      90deg,
      rgba(5,2,7,.50) 0%,
      rgba(5,2,7,.26) 28%,
      rgba(5,2,7,.04) 49%,
      transparent 70%
    ) !important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.palmu-v3 .hud-tabs{
  background:
    rgba(6,4,9,.73)
    !important;

  backdrop-filter:
    blur(13px)
    saturate(1.15);

  -webkit-backdrop-filter:
    blur(13px)
    saturate(1.15);

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.022),

    0 7px 24px
      rgba(0,0,0,.14);
}


.palmu-v3
.hud-tabs button.is-active{
  background:
    linear-gradient(
      135deg,
      rgba(255,127,195,.91),
      rgba(173,58,137,.82)
    );

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.22),

    0 0 20px
      rgba(239,78,167,.25);
}


/* =========================================================
   SUMMARY HUD
   ========================================================= */

.palmu-v3 .summary-strip{
  background:
    linear-gradient(
      90deg,
      rgba(83,22,67,.24),
      rgba(13,7,16,.23) 35%,
      rgba(13,7,16,.23) 65%,
      rgba(77,24,72,.22)
    ) !important;

  backdrop-filter:
    blur(7px)
    saturate(1.16);

  -webkit-backdrop-filter:
    blur(7px)
    saturate(1.16);

  border-top:
    1px solid
    rgba(255,123,196,.08);

  border-bottom:
    1px solid
    rgba(255,115,191,.22);
}


.palmu-v3
.summary-strip article{
  position:relative;
}


.palmu-v3
.summary-strip article::after{
  content:"";

  position:absolute;

  right:0;
  top:24%;
  bottom:24%;

  width:1px;

  background:
    linear-gradient(
      transparent,
      rgba(255,143,205,.19),
      transparent
    );
}


.palmu-v3
.summary-strip article:last-child::after{
  display:none;
}


/* =========================================================
   PRIMARY PANELS
   ========================================================= */

.palmu-v3
.supporter-panel,

.palmu-v3
.profile-panel{
  position:relative;

  background:
    linear-gradient(
      145deg,
      rgba(15,10,18,.79) 0%,
      rgba(8,6,11,.70) 55%,
      rgba(5,4,8,.75) 100%
    ) !important;

  border:
    1px solid
    rgba(255,129,199,.38);

  backdrop-filter:
    blur(11px)
    saturate(1.08);

  -webkit-backdrop-filter:
    blur(11px)
    saturate(1.08);

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.035),

    inset 0 0 38px
      rgba(216,67,157,.022),

    0 18px 45px
      rgba(0,0,0,.27),

    0 0 24px
      rgba(218,65,158,.035);
}


/*
 * パネル上端にゲームHUDらしい
 * ピンクの細いハイライト
 */

.palmu-v3
.supporter-panel::before,

.palmu-v3
.profile-panel::before{
  content:"";

  position:absolute;

  z-index:3;

  left:14px;
  right:14px;
  top:-1px;

  height:1px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,124,196,.57),
      transparent
    );

  opacity:.55;
}


/* =========================================================
   SUPPORTERS LIST
   ========================================================= */

.palmu-v3
.supporter-panel > header{
  background:
    linear-gradient(
      90deg,
      rgba(20,11,22,.33),
      transparent
    );
}


.palmu-v3 .rank-filter{
  background:
    linear-gradient(
      145deg,
      rgba(12,8,15,.45),
      rgba(6,5,9,.30)
    ) !important;

  border-color:
    rgba(255,255,255,.08);
}


.palmu-v3 .search-box{
  background:
    rgba(5,4,8,.48)
    !important;

  border-color:
    rgba(190,139,181,.30);
}


.palmu-v3 .list-head{
  background:
    rgba(5,4,8,.28)
    !important;
}


.palmu-v3 .supporter-list{
  background:
    linear-gradient(
      180deg,
      rgba(7,5,10,.07),
      rgba(5,4,8,.14)
    ) !important;
}


.palmu-v3 .supporter-row{
  background:
    rgba(4,3,7,.035);
}


.palmu-v3
.supporter-row.is-active{
  background:
    linear-gradient(
      90deg,
      rgba(218,50,149,.57),
      rgba(108,34,94,.34),
      rgba(58,22,59,.15)
    ) !important;

  box-shadow:
    inset 3px 0
      #ff66b4,

    inset 0 0 30px
      rgba(234,74,163,.08),

    0 0 16px
      rgba(222,58,154,.045);
}


/* =========================================================
   PROFILE TOP
   ========================================================= */

.palmu-v3 .profile-head{
  background:
    linear-gradient(
      90deg,
      rgba(10,6,13,.27),
      rgba(10,6,13,.06) 56%,
      transparent
    );
}


.palmu-v3 .profile-kicker{
  text-shadow:
    0 0 13px
    rgba(255,113,188,.10);
}


/* =========================================================
   DOG TAG AREA
   ========================================================= */

.palmu-v3 .dog-tag{
  box-shadow:
    inset 0 1px
      rgba(255,255,255,.72),

    inset 0 -4px 12px
      rgba(0,0,0,.28),

    0 21px 44px
      rgba(0,0,0,.40),

    0 0 25px
      rgba(228,73,166,.09),

    0 0 0 1px
      rgba(255,255,255,.14);
}


/* =========================================================
   STATUS PANELS
   ========================================================= */

.palmu-v3 .status-grid{
  background:
    rgba(8,6,11,.43)
    !important;

  border-color:
    rgba(255,255,255,.11);

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);
}


.palmu-v3 .status-cell{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.018),
      rgba(6,4,9,.085)
    ) !important;
}


.palmu-v3
.status-cell > small{
  position:relative;

  padding-bottom:7px;
}


.palmu-v3
.status-cell > small::after{
  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:34px;
  height:1px;

  background:
    #ef72b4;

  box-shadow:
    0 0 9px
    rgba(239,114,180,.45);
}


/* =========================================================
   DETAIL PANELS
   ========================================================= */

.palmu-v3 .detail-section{
  background:
    linear-gradient(
      145deg,
      rgba(13,9,16,.47),
      rgba(6,4,9,.35)
    ) !important;

  border-color:
    rgba(255,255,255,.095);

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);
}


.palmu-v3
.detail-section > header{
  position:relative;

  padding-bottom:7px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}


.palmu-v3
.detail-section > header::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-1px;

  width:35px;
  height:1px;

  background:
    #ed70b3;

  box-shadow:
    0 0 8px
    rgba(237,112,179,.43);
}


/* =========================================================
   SPECIAL TITLES
   ========================================================= */

.palmu-v3 .special-title{
  background:
    linear-gradient(
      135deg,
      rgba(196,49,135,.25),
      rgba(75,31,79,.23)
    ) !important;

  border-color:
    rgba(235,106,180,.31);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

body.palmu-v3{
  scrollbar-width:
    thin;

  scrollbar-color:
    #a8447f
    #09070b;
}


body.palmu-v3::-webkit-scrollbar{
  width:8px;
}


body.palmu-v3::-webkit-scrollbar-track{
  background:
    rgba(5,4,8,.82);
}


body.palmu-v3::-webkit-scrollbar-thumb{
  border:
    2px solid
    rgba(5,4,8,.82);

  border-radius:10px;

  background:
    linear-gradient(
      #de5aa0,
      #80406f
    );
}


/* =========================================================
   FOOTER
   ========================================================= */

.palmu-v3 footer{
  border-top:
    1px solid
    rgba(255,110,187,.13);

  color:
    rgba(215,195,208,.52);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(7,5,10,.17),
      transparent
    );
}


/* =========================================================
   MOBILE GLASS TUNING
   ========================================================= */

@media(max-width:760px){

  body.palmu-v3::before{
    filter:
      saturate(.92)
      brightness(.65)
      contrast(1.02);
  }


  body.palmu-v3::after{
    background:
      linear-gradient(
        180deg,
        rgba(3,2,5,.15),
        rgba(3,2,5,.28) 43%,
        rgba(3,2,5,.40)
      );
  }


  .palmu-v3
  .supporter-panel,

  .palmu-v3
  .profile-panel{
    background:
      linear-gradient(
        155deg,
        rgba(12,8,15,.83),
        rgba(5,4,8,.74)
      ) !important;

    backdrop-filter:
      blur(9px);

    -webkit-backdrop-filter:
      blur(9px);
  }


  .palmu-v3
  .summary-strip{
    background:
      rgba(31,11,29,.40)
      !important;
  }


  .palmu-v3
  .status-grid{
    background:
      rgba(7,5,10,.52)
      !important;
  }


  .palmu-v3
  .detail-section{
    background:
      rgba(8,6,11,.54)
      !important;
  }

}



/* =========================================================
   YUKINON PALMU RANK EMBLEM SYSTEM V3.6
   ========================================================= */


/* =========================================================
   RANK COLOR TOKENS
   ========================================================= */

.rank-bronze{
  --crest-a:#54251d;
  --crest-b:#b96042;
  --crest-c:#efad7f;
  --crest-edge:#ffcfad;
  --crest-glow:rgba(205,103,70,.42);
  --crest-text:#fff4eb;
}


.rank-silver{
  --crest-a:#454a54;
  --crest-b:#aeb5c2;
  --crest-c:#f5f7fb;
  --crest-edge:#ffffff;
  --crest-glow:rgba(201,211,228,.38);
  --crest-text:#ffffff;
}


.rank-gold{
  --crest-a:#5b3507;
  --crest-b:#d6921d;
  --crest-c:#ffe88d;
  --crest-edge:#fff1ad;
  --crest-glow:rgba(244,193,65,.48);
  --crest-text:#fff8d6;
}


.rank-platinum{
  --crest-a:#574d68;
  --crest-b:#a88dc4;
  --crest-c:#eee7fa;
  --crest-edge:#fffaff;
  --crest-glow:rgba(211,190,240,.42);
  --crest-text:#ffffff;
}


.rank-diamond{
  --crest-a:#3130a4;
  --crest-b:#8054eb;
  --crest-c:#f278d8;
  --crest-edge:#a9ecff;
  --crest-glow:rgba(178,91,247,.68);
  --crest-text:#ffffff;
}


.rank-special{
  --crest-a:#7b225d;
  --crest-b:#db4095;
  --crest-c:#ff9ed1;
  --crest-edge:#ffd0e9;
  --crest-glow:rgba(255,83,173,.72);
  --crest-text:#ffffff;
}


/* =========================================================
   MAIN CREST SHAPE
   ========================================================= */

.palmu-v3
.big-emblem,

.palmu-v3
.mini-emblem{
  position:relative;

  isolation:isolate;

  display:grid;

  place-items:center;

  overflow:visible;

  border:0 !important;

  color:
    var(
      --crest-text,
      #fff
    ) !important;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255,255,255,.75) 0 2%,
      transparent 3%
    ),

    radial-gradient(
      circle at 50% 50%,
      var(--crest-c) 0 19%,
      var(--crest-b) 20% 38%,
      var(--crest-a) 68%
    ),

    conic-gradient(
      from 22deg,
      var(--crest-edge),
      var(--crest-b),
      var(--crest-c),
      var(--crest-a),
      var(--crest-edge),
      var(--crest-b),
      var(--crest-c),
      var(--crest-a),
      var(--crest-edge)
    ) !important;

  clip-path:
    polygon(
      50% 0%,
      60% 11%,
      73% 6%,
      80% 19%,
      94% 24%,
      89% 38%,
      100% 50%,
      89% 62%,
      94% 76%,
      80% 81%,
      73% 94%,
      60% 89%,
      50% 100%,
      40% 89%,
      27% 94%,
      20% 81%,
      6% 76%,
      11% 62%,
      0% 50%,
      11% 38%,
      6% 24%,
      20% 19%,
      27% 6%,
      40% 11%
    ) !important;

  outline:0 !important;

  text-shadow:
    0 1px 2px
      rgba(0,0,0,.76),

    0 0 8px
      rgba(255,255,255,.20);

  box-shadow:none !important;

  filter:
    drop-shadow(
      0 4px 4px
      rgba(0,0,0,.48)
    )
    drop-shadow(
      0 0 8px
      var(--crest-glow)
    );

  transition:
    transform .25s ease,
    filter .25s ease;

  animation:
    palmu-crest-entry
    .48s
    cubic-bezier(.2,.8,.2,1)
    both;
}


/* inner jewel frame */

.palmu-v3
.big-emblem::before,

.palmu-v3
.mini-emblem::before{
  content:"";

  position:absolute;

  z-index:-1;

  inset:21%;

  transform:
    rotate(45deg);

  border:
    1px solid
    rgba(255,255,255,.80);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 0 8px
      rgba(255,255,255,.20),

    0 0 8px
      var(--crest-glow);
}


/* decorative frame */

.palmu-v3
.big-emblem::after,

.palmu-v3
.mini-emblem::after{
  content:"";

  position:absolute;

  z-index:2;

  inset:8%;

  pointer-events:none;

  clip-path:
    polygon(
      50% 0,
      88% 17%,
      100% 50%,
      88% 83%,
      50% 100%,
      12% 83%,
      0 50%,
      12% 17%
    );

  border:
    1px solid
    rgba(255,255,255,.48);

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.20),
      transparent 30%,
      transparent 67%,
      rgba(255,255,255,.11)
    );

  opacity:.74;
}


/* =========================================================
   SIZES
   ========================================================= */

.palmu-v3
.mini-emblem{
  width:31px !important;
  height:31px !important;

  flex:
    0 0 31px;

  font-family:
    Georgia,
    serif;

  font-size:9px !important;

  font-weight:900;
}


.palmu-v3
.big-emblem{
  width:94px !important;
  height:94px !important;

  flex:
    0 0 94px;

  font-family:
    Georgia,
    serif;

  font-size:25px !important;

  font-weight:900;
}


/*
 * DOG TAGだけ少し小さめ。
 */

.palmu-v3
.tag-rank-line
.big-emblem{
  width:82px !important;
  height:82px !important;

  flex:
    0 0 82px;

  font-size:23px !important;
}


/*
 * HISTORY
 */

.palmu-v3
.history-item
.mini-emblem{
  width:38px !important;
  height:38px !important;

  flex:
    0 0 38px;

  font-size:10px !important;
}


/* =========================================================
   RANK-SPECIFIC GLOW
   ========================================================= */

.palmu-v3
.big-emblem.rank-bronze,
.palmu-v3
.mini-emblem.rank-bronze{
  filter:
    drop-shadow(
      0 4px 4px
      rgba(0,0,0,.48)
    )
    drop-shadow(
      0 0 8px
      rgba(205,103,70,.38)
    );
}


.palmu-v3
.big-emblem.rank-gold,
.palmu-v3
.mini-emblem.rank-gold{
  filter:
    drop-shadow(
      0 4px 4px
      rgba(0,0,0,.48)
    )
    drop-shadow(
      0 0 11px
      rgba(245,192,61,.43)
    );
}


.palmu-v3
.big-emblem.rank-diamond,
.palmu-v3
.mini-emblem.rank-diamond{
  filter:
    drop-shadow(
      0 4px 4px
      rgba(0,0,0,.48)
    )
    drop-shadow(
      0 0 12px
      rgba(178,91,247,.67)
    )
    drop-shadow(
      0 0 23px
      rgba(89,187,255,.17)
    );
}


.palmu-v3
.big-emblem.rank-special,
.palmu-v3
.mini-emblem.rank-special{
  filter:
    drop-shadow(
      0 4px 4px
      rgba(0,0,0,.48)
    )
    drop-shadow(
      0 0 13px
      rgba(255,83,173,.72)
    )
    drop-shadow(
      0 0 26px
      rgba(174,77,207,.24)
    );

  animation:
    palmu-crest-entry
      .48s
      ease
      both,

    palmu-special-crest-pulse
      3.2s
      ease-in-out
      infinite;
}


/* =========================================================
   CURRENT BADGE
   ========================================================= */

.palmu-v3
.badge-feature:not(.next-badge)
.big-emblem{
  transform:
    scale(1.02);

  filter:
    drop-shadow(
      0 5px 5px
      rgba(0,0,0,.45)
    )
    drop-shadow(
      0 0 14px
      var(--crest-glow)
    );
}


/* =========================================================
   NEXT BADGE / MAX RANK
   ========================================================= */

.palmu-v3
.next-badge
.big-emblem{
  --crest-a:#242129;
  --crest-b:#57505d;
  --crest-c:#928894;
  --crest-edge:#b8b0bb;
  --crest-glow:rgba(180,170,185,.16);

  opacity:.58;

  filter:
    grayscale(.72)
    brightness(.72)
    drop-shadow(
      0 3px 4px
      rgba(0,0,0,.42)
    );
}


/* =========================================================
   FILTER BUTTON MINI CRESTS
   ========================================================= */

.palmu-v3
.rank-filter
button[data-rank]:not(
  [data-rank="all"]
)::before{
  display:inline-block;

  margin-right:6px;

  font-size:10px;

  line-height:1;

  vertical-align:-1px;

  text-shadow:
    0 0 8px
    currentColor;
}


.palmu-v3
.rank-filter
button[data-rank="bronze"]::before{
  content:"◆";
  color:#d47f5c;
}


.palmu-v3
.rank-filter
button[data-rank="silver"]::before{
  content:"✦";
  color:#dfe3ed;
}


.palmu-v3
.rank-filter
button[data-rank="gold"]::before{
  content:"✥";
  color:#f1cb67;
}


.palmu-v3
.rank-filter
button[data-rank="platinum"]::before{
  content:"✧";
  color:#d9caf0;
}


.palmu-v3
.rank-filter
button[data-rank="diamond"]::before{
  content:"◈";
  color:#b977f2;
}


.palmu-v3
.rank-filter
button[data-rank="special"]::before{
  content:"✿";
  color:#ff7fc1;
}


/* =========================================================
   ROW BADGE
   ========================================================= */

.palmu-v3
.row-badge{
  gap:8px;
}


.palmu-v3
.row-badge
.mini-emblem{
  margin-right:1px;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes palmu-crest-entry{

  from{
    opacity:0;

    transform:
      scale(.74)
      rotate(-8deg);

    filter:
      blur(2px)
      drop-shadow(
        0 0 0
        transparent
      );
  }

  to{
    opacity:1;

    transform:
      scale(1)
      rotate(0);

  }

}


@keyframes palmu-special-crest-pulse{

  0%,
  100%{
    filter:
      drop-shadow(
        0 4px 4px
        rgba(0,0,0,.48)
      )
      drop-shadow(
        0 0 10px
        rgba(255,83,173,.56)
      )
      drop-shadow(
        0 0 19px
        rgba(174,77,207,.18)
      );
  }

  50%{
    filter:
      drop-shadow(
        0 4px 4px
        rgba(0,0,0,.48)
      )
      drop-shadow(
        0 0 16px
        rgba(255,113,196,.86)
      )
      drop-shadow(
        0 0 31px
        rgba(189,91,221,.34)
      );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  .palmu-v3
  .big-emblem{
    width:67px !important;
    height:67px !important;

    flex:
      0 0 67px;

    font-size:19px !important;
  }


  .palmu-v3
  .tag-rank-line
  .big-emblem{
    width:58px !important;
    height:58px !important;

    flex:
      0 0 58px;

    font-size:17px !important;
  }


  .palmu-v3
  .mini-emblem{
    width:27px !important;
    height:27px !important;

    flex:
      0 0 27px;

    font-size:8px !important;
  }


  .palmu-v3
  .history-item
  .mini-emblem{
    width:31px !important;
    height:31px !important;

    flex:
      0 0 31px;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(
  prefers-reduced-motion:reduce
){

  .palmu-v3
  .big-emblem,

  .palmu-v3
  .mini-emblem{
    animation:none !important;

    transition:none !important;
  }

}



/* =========================================================
   YUKINON PALMU RANK IDENTITY & MOBILE FINAL V3.7
   ========================================================= */


/* =========================================================
   1. RANK IDENTITY
   ========================================================= */


/*
 * BRONZE
 * forged / shield
 */

.palmu-v3
.rank-bronze{
  clip-path:
    polygon(
      50% 0,
      87% 16%,
      94% 54%,
      71% 88%,
      50% 100%,
      29% 88%,
      6% 54%,
      13% 16%
    ) !important;

  background:
    radial-gradient(
      circle at 35% 27%,
      #ffd6b9 0 2%,
      transparent 3%
    ),
    linear-gradient(
      145deg,
      #3d1d17,
      #985039 27%,
      #e39a6c 49%,
      #713426 70%,
      #b66547
    ) !important;
}


/*
 * SILVER
 * mechanical / hex
 */

.palmu-v3
.rank-silver{
  clip-path:
    polygon(
      25% 5%,
      75% 5%,
      98% 50%,
      75% 95%,
      25% 95%,
      2% 50%
    ) !important;

  background:
    linear-gradient(
      120deg,
      #444b56 0%,
      #f6f8fb 24%,
      #9099a7 45%,
      #ffffff 62%,
      #606875 82%,
      #dce2e9 100%
    ) !important;
}


/*
 * GOLD
 * royal / sun crest
 */

.palmu-v3
.rank-gold{
  clip-path:
    polygon(
      50% 0%,
      59% 15%,
      75% 7%,
      78% 24%,
      96% 25%,
      87% 41%,
      100% 50%,
      87% 59%,
      96% 75%,
      78% 76%,
      75% 93%,
      59% 85%,
      50% 100%,
      41% 85%,
      25% 93%,
      22% 76%,
      4% 75%,
      13% 59%,
      0% 50%,
      13% 41%,
      4% 25%,
      22% 24%,
      25% 7%,
      41% 15%
    ) !important;

  background:
    radial-gradient(
      circle,
      #fff2a5 0 15%,
      #e4a624 35%,
      #75430c 72%
    ) !important;
}


/*
 * PLATINUM
 * aristocratic jewel
 */

.palmu-v3
.rank-platinum{
  clip-path:
    polygon(
      50% 0,
      79% 10%,
      100% 37%,
      91% 73%,
      62% 100%,
      38% 100%,
      9% 73%,
      0 37%,
      21% 10%
    ) !important;

  background:
    linear-gradient(
      135deg,
      #625c70,
      #f7f3ff 24%,
      #c2afd7 43%,
      #ffffff 58%,
      #8d789f 79%,
      #e7dcf1
    ) !important;
}


/*
 * DIAMOND
 * sharp faceted jewel
 */

.palmu-v3
.rank-diamond{
  clip-path:
    polygon(
      50% 0,
      89% 21%,
      100% 50%,
      77% 88%,
      50% 100%,
      23% 88%,
      0 50%,
      11% 21%
    ) !important;

  background:
    linear-gradient(
      135deg,
      #2531a3 0%,
      #7253ed 20%,
      #e26cdb 43%,
      #7cddff 61%,
      #7b4cc9 80%,
      #f49bda 100%
    ) !important;
}


/*
 * SPECIAL
 * Yukinon floral jewel
 */

.palmu-v3
.rank-special{
  clip-path:
    polygon(
      50% 0%,
      58% 12%,
      70% 5%,
      76% 18%,
      91% 15%,
      90% 31%,
      100% 40%,
      91% 50%,
      100% 60%,
      90% 69%,
      91% 85%,
      76% 82%,
      70% 95%,
      58% 88%,
      50% 100%,
      42% 88%,
      30% 95%,
      24% 82%,
      9% 85%,
      10% 69%,
      0% 60%,
      9% 50%,
      0% 40%,
      10% 31%,
      9% 15%,
      24% 18%,
      30% 5%,
      42% 12%
    ) !important;
}


/* =========================================================
   CURRENT PROFILE RANK BORDER
   ========================================================= */

.palmu-v3
.profile-panel[data-current-rank="bronze"]{
  border-color:
    rgba(208,119,81,.45);
}


.palmu-v3
.profile-panel[data-current-rank="silver"]{
  border-color:
    rgba(218,225,236,.42);
}


.palmu-v3
.profile-panel[data-current-rank="gold"]{
  border-color:
    rgba(246,194,74,.55);

  box-shadow:
    inset 0 0 42px
      rgba(218,151,29,.045),
    0 0 30px
      rgba(229,167,46,.07),
    0 20px 55px
      rgba(0,0,0,.30);
}


.palmu-v3
.profile-panel[data-current-rank="platinum"]{
  border-color:
    rgba(225,210,245,.52);

  box-shadow:
    inset 0 0 42px
      rgba(183,153,214,.05),
    0 0 30px
      rgba(205,178,234,.07),
    0 20px 55px
      rgba(0,0,0,.30);
}


.palmu-v3
.profile-panel[data-current-rank="diamond"]{
  border-color:
    rgba(174,111,246,.68);

  box-shadow:
    inset 0 0 48px
      rgba(119,72,211,.065),
    0 0 34px
      rgba(178,88,234,.11),
    0 20px 55px
      rgba(0,0,0,.32);
}


.palmu-v3
.profile-panel[data-current-rank="special"]{
  border-color:
    rgba(255,111,190,.73);

  box-shadow:
    inset 0 0 56px
      rgba(231,68,156,.075),
    0 0 38px
      rgba(236,76,167,.13),
    0 20px 55px
      rgba(0,0,0,.32);
}


/* =========================================================
   2. BADGE HISTORY TIMELINE
   ========================================================= */

.palmu-v3
.history-list{
  display:flex;

  flex-wrap:nowrap;

  align-items:stretch;

  gap:18px;

  overflow-x:auto;

  overflow-y:visible;

  padding:
    8px 4px
    10px;

  scroll-snap-type:
    x proximity;

  scrollbar-width:
    thin;
}


.palmu-v3
.history-item{
  position:relative;

  min-width:82px;

  flex:
    0 0 82px;

  padding:
    11px 7px
    9px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:7px;

  scroll-snap-align:start;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:9px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(5,4,8,.20)
    );

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.025);
}


/* connector */

.palmu-v3
.history-item:not(:last-child)::after{
  content:"›";

  position:absolute;

  z-index:5;

  right:-15px;
  top:50%;

  width:13px;

  transform:
    translateY(-50%);

  color:
    rgba(255,145,205,.64);

  font-family:
    Georgia,
    serif;

  font-size:18px;

  text-align:center;

  text-shadow:
    0 0 10px
    rgba(239,92,178,.40);
}


.palmu-v3
.history-item > span:last-child{
  position:relative;

  color:#d7c7d2;

  font-size:8px;

  font-weight:800;

  letter-spacing:.07em;
}


.palmu-v3
.history-item > span:last-child::before{
  content:"ACQUIRED";

  display:block;

  margin-bottom:3px;

  color:#756975;

  font-size:5px;

  letter-spacing:.12em;
}


/* current badge */

.palmu-v3
.history-item:last-child{
  transform:
    translateY(-2px);

  border-color:
    rgba(255,121,190,.59);

  background:
    linear-gradient(
      145deg,
      rgba(211,58,144,.18),
      rgba(94,42,100,.13)
    );

  box-shadow:
    inset 0 0 18px
      rgba(226,73,160,.08),

    0 0 18px
      rgba(226,73,160,.11);
}


.palmu-v3
.history-item:last-child::before{
  content:"CURRENT";

  position:absolute;

  z-index:8;

  top:-8px;
  right:4px;

  padding:
    2px 5px;

  color:#fff;

  border:
    1px solid
    rgba(255,185,221,.40);

  border-radius:3px;

  background:
    linear-gradient(
      90deg,
      #e4539f,
      #8553ad
    );

  box-shadow:
    0 0 9px
    rgba(232,79,164,.25);

  font-size:5px;

  font-weight:900;

  letter-spacing:.08em;
}


/* history rank tint */

.palmu-v3
.history-item[data-history-rank="bronze"]{
  border-color:
    rgba(199,112,75,.30);
}


.palmu-v3
.history-item[data-history-rank="silver"]{
  border-color:
    rgba(207,216,230,.28);
}


.palmu-v3
.history-item[data-history-rank="gold"]{
  border-color:
    rgba(237,190,67,.36);
}


.palmu-v3
.history-item[data-history-rank="platinum"]{
  border-color:
    rgba(213,194,235,.34);
}


.palmu-v3
.history-item[data-history-rank="diamond"]{
  border-color:
    rgba(176,103,242,.42);
}


.palmu-v3
.history-item[data-history-rank="special"]{
  border-color:
    rgba(255,103,180,.50);
}


/* =========================================================
   3. SPECIAL TITLE CARD SYSTEM
   ========================================================= */

.palmu-v3
.title-list{
  gap:8px;
}


.palmu-v3
.special-title{
  position:relative;

  min-height:72px;

  padding:
    10px 11px;

  overflow:hidden;

  border-radius:8px;

  isolation:isolate;
}


.palmu-v3
.special-title i{
  width:34px;
  height:34px;

  flex:
    0 0 34px;

  display:grid;

  place-items:center;

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

  border-radius:7px;

  background:
    rgba(255,255,255,.045);

  font-size:19px;
}


.palmu-v3
.special-title strong{
  font-size:10px;

  letter-spacing:.035em;
}


/*
 * TOP SUPPORTER
 */

.palmu-v3
.special-title[
  data-title-key="top-supporter"
]{
  border-color:
    rgba(255,204,91,.55);

  background:
    linear-gradient(
      135deg,
      rgba(107,71,12,.70),
      rgba(47,29,9,.61),
      rgba(143,91,19,.43)
    ) !important;

  box-shadow:
    inset 0 0 17px
      rgba(255,215,110,.05),
    0 0 14px
      rgba(224,174,60,.08);
}


.palmu-v3
.special-title[
  data-title-key="top-supporter"
] i{
  color:#ffe184;

  text-shadow:
    0 0 14px
    rgba(255,210,81,.56);
}


/*
 * LONG STREAK
 */

.palmu-v3
.special-title[
  data-title-key="long-streak"
]{
  border-color:
    rgba(243,186,68,.45);

  background:
    linear-gradient(
      135deg,
      rgba(93,58,7,.62),
      rgba(57,31,9,.53),
      rgba(120,74,14,.38)
    ) !important;
}


/*
 * EARLY SUPPORTER
 */

.palmu-v3
.special-title[
  data-title-key="early-supporter"
]{
  border-color:
    rgba(135,180,244,.46);

  background:
    linear-gradient(
      135deg,
      rgba(45,68,119,.60),
      rgba(30,39,76,.55),
      rgba(83,67,130,.37)
    ) !important;
}


.palmu-v3
.special-title[
  data-title-key="early-supporter"
] i{
  color:#b9d8ff;
}


/*
 * YUKINON LOVE
 */

.palmu-v3
.special-title[
  data-title-key="yukinon-love"
]{
  border-color:
    rgba(255,106,188,.55);

  background:
    linear-gradient(
      135deg,
      rgba(126,31,95,.69),
      rgba(74,30,89,.56),
      rgba(171,48,126,.42)
    ) !important;
}


.palmu-v3
.special-title[
  data-title-key="yukinon-love"
] i{
  color:#ff9bce;

  text-shadow:
    0 0 15px
    rgba(255,105,187,.70);
}


/*
 * ANNIVERSARY
 */

.palmu-v3
.special-title[
  data-title-key="anniversary"
]{
  border-color:
    rgba(217,162,247,.52);

  background:
    linear-gradient(
      135deg,
      rgba(91,53,126,.66),
      rgba(59,35,92,.57),
      rgba(149,65,153,.40)
    ) !important;
}


/*
 * SPECIAL MEMBER
 */

.palmu-v3
.special-title[
  data-title-key="special-member"
]{
  border-color:
    rgba(255,118,193,.62);

  background:
    linear-gradient(
      135deg,
      rgba(178,44,125,.69),
      rgba(74,31,92,.63),
      rgba(111,61,158,.47)
    ) !important;

  box-shadow:
    inset 0 0 20px
      rgba(255,104,188,.06),

    0 0 15px
      rgba(221,71,158,.09);
}


/* =========================================================
   4. DOG TAG RANK MATERIAL ACCENTS
   ========================================================= */


/*
 * CMS側で選択したtheme-*は維持する。
 * その上へ「現在ランク」の素材加工だけ追加。
 */


/* BRONZE - oxidized forged metal */

.palmu-v3
.profile-panel[
  data-current-rank="bronze"
]
.dog-tag{
  border-color:
    rgba(212,133,96,.53);

  box-shadow:
    inset 0 1px
      rgba(255,232,214,.36),

    inset 0 -5px 13px
      rgba(90,38,22,.20),

    0 20px 48px
      rgba(0,0,0,.40),

    0 0 18px
      rgba(181,87,55,.08);
}


.palmu-v3
.profile-panel[
  data-current-rank="bronze"
]
.dog-tag::after{
  opacity:.25;

  background:
    repeating-linear-gradient(
      8deg,
      rgba(101,50,33,.19) 0 1px,
      transparent 1px 5px
    ),

    linear-gradient(
      112deg,
      transparent 34%,
      rgba(255,205,172,.35) 45%,
      transparent 55%
    );
}


/* SILVER - fine brushed steel */

.palmu-v3
.profile-panel[
  data-current-rank="silver"
]
.dog-tag::after{
  opacity:.28;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.25) 0 1px,
      transparent 1px 2px
    ),

    linear-gradient(
      110deg,
      transparent 35%,
      rgba(255,255,255,.58) 47%,
      transparent 55%
    );
}


/* GOLD - satin engraved metal */

.palmu-v3
.profile-panel[
  data-current-rank="gold"
]
.dog-tag{
  border-color:
    rgba(250,215,130,.68);

  box-shadow:
    inset 0 1px
      rgba(255,245,193,.62),

    inset 0 -5px 13px
      rgba(120,75,10,.18),

    0 20px 48px
      rgba(0,0,0,.38),

    0 0 22px
      rgba(231,179,59,.13);
}


.palmu-v3
.profile-panel[
  data-current-rank="gold"
]
.dog-tag::after{
  opacity:.30;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,233,151,.23) 0 1px,
      transparent 1px 5px
    ),

    linear-gradient(
      107deg,
      transparent 33%,
      rgba(255,249,210,.65) 46%,
      transparent 57%
    );
}


/* PLATINUM - pearlescent cold metal */

.palmu-v3
.profile-panel[
  data-current-rank="platinum"
]
.dog-tag{
  border-color:
    rgba(233,220,251,.70);

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.80),

    0 20px 50px
      rgba(0,0,0,.39),

    0 0 24px
      rgba(203,172,234,.13);
}


.palmu-v3
.profile-panel[
  data-current-rank="platinum"
]
.dog-tag::after{
  opacity:.28;

  background:
    linear-gradient(
      117deg,
      transparent 24%,
      rgba(220,202,246,.25) 35%,
      rgba(255,255,255,.65) 47%,
      rgba(192,219,255,.20) 55%,
      transparent 68%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.17) 0 1px,
      transparent 1px 3px
    );
}


/* DIAMOND - crystalline facets */

.palmu-v3
.profile-panel[
  data-current-rank="diamond"
]
.dog-tag{
  border-color:
    rgba(208,171,255,.75);

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.84),

    0 20px 52px
      rgba(0,0,0,.41),

    0 0 29px
      rgba(154,91,229,.18);
}


.palmu-v3
.profile-panel[
  data-current-rank="diamond"
]
.dog-tag::after{
  opacity:.32;

  background:
    linear-gradient(
      132deg,
      transparent 0 32%,
      rgba(176,120,255,.22) 33% 42%,
      transparent 43% 56%,
      rgba(112,209,255,.20) 57% 66%,
      transparent 67%
    ),

    linear-gradient(
      45deg,
      transparent 0 48%,
      rgba(255,255,255,.38) 49% 50%,
      transparent 51%
    );
}


/* SPECIAL - Yukinon aurora */

.palmu-v3
.profile-panel[
  data-current-rank="special"
]
.dog-tag{
  border-color:
    rgba(255,149,210,.78);

  box-shadow:
    inset 0 1px
      rgba(255,255,255,.80),

    0 20px 52px
      rgba(0,0,0,.40),

    0 0 31px
      rgba(238,76,165,.20);
}


.palmu-v3
.profile-panel[
  data-current-rank="special"
]
.dog-tag::after{
  opacity:.34;

  background:
    linear-gradient(
      115deg,
      transparent 15%,
      rgba(255,94,182,.18) 31%,
      rgba(255,255,255,.55) 45%,
      rgba(153,87,222,.19) 59%,
      transparent 77%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.16) 0 1px,
      transparent 1px 3px
    );

  background-size:
    180% 100%,
    auto;

  animation:
    palmu-tag-aurora
    5.8s ease-in-out
    infinite;
}


.palmu-v3
.profile-panel[
  data-current-rank="special"
]
.tag-sign{
  color:#e73891;

  text-shadow:
    0 0 10px
    rgba(239,63,153,.26);
}


@keyframes palmu-tag-aurora{

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

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

}


/* =========================================================
   5. iPHONE FINAL SPACING
   ========================================================= */

@media(max-width:760px){

  body.palmu-v3{
    padding-bottom:
      env(
        safe-area-inset-bottom
      );
  }


  .palmu-v3 main{
    width:
      calc(
        100% - 10px
      ) !important;
  }


  .palmu-v3 .dashboard{
    gap:6px;
  }


  /*
   * 4 tabsを画面幅に収める。
   */

  .palmu-v3 .hud-tabs{
    overflow:hidden;
  }


  .palmu-v3
  .hud-tabs button{
    min-width:0 !important;

    flex:
      1 1 25%;

    padding:
      0 4px !important;

    font-size:7px !important;

    letter-spacing:.04em;
  }


  /*
   * Summary compact
   */

  .palmu-v3
  .summary-strip article{
    padding:
      7px 3px;

    gap:5px;
  }


  /*
   * Profile
   */

  .palmu-v3
  .profile-panel{
    padding:
      7px !important;

    border-radius:9px;
  }


  .palmu-v3
  .profile-head{
    min-height:122px;

    padding:
      50px 4px
      8px !important;

    gap:9px;
  }


  .palmu-v3
  .profile-avatar{
    width:72px !important;
    height:72px !important;
  }


  .palmu-v3
  .profile-name h2{
    margin:
      1px 0 2px;

    font-size:
      clamp(
        1.24rem,
        6vw,
        1.48rem
      );
  }


  .palmu-v3
  .profile-name p{
    font-size:8px;
  }


  /*
   * DOG TAG
   */

  .palmu-v3
  .dog-tag{
    min-height:178px;

    margin:
      6px 0 3px;

    padding:
      20px 12px
      17px 37px;

    gap:8px;

    border-radius:
      38px 15px
      15px 38px;
  }


  .palmu-v3
  .tag-name{
    margin:
      8px 0 6px;

    font-size:
      clamp(
        1.28rem,
        6vw,
        1.68rem
      ) !important;
  }


  .palmu-v3
  .tag-id{
    font-size:8px;
  }


  .palmu-v3
  .tag-sign{
    margin-top:5px;

    font-size:13px;
  }


  .palmu-v3
  .tag-right{
    padding-left:8px;
  }


  .palmu-v3
  .tag-stat strong{
    margin:
      1px 0 5px;

    font-size:10px;
  }


  /*
   * STATUS
   */

  .palmu-v3
  .status-grid{
    margin-top:5px;

    border-radius:6px;
  }


  .palmu-v3
  .status-cell{
    padding:
      10px 8px !important;

    min-height:132px;
  }


  .palmu-v3
  .status-cell:nth-child(3){
    min-height:108px;
  }


  .palmu-v3
  .badge-feature{
    min-height:92px;
  }


  .palmu-v3
  .main-progress{
    margin-top:10px;
  }


  .palmu-v3
  .progress-track{
    height:12px;
  }


  .palmu-v3
  .progress-current{
    font-size:13px;
  }


  .palmu-v3
  .progress-remain{
    margin-top:8px;

    font-size:10px;
  }


  .palmu-v3
  .progress-remain strong{
    font-size:18px;
  }


  /*
   * DETAILS
   */

  .palmu-v3
  .detail-grid{
    gap:6px;

    margin-top:6px;
  }


  .palmu-v3
  .detail-section{
    min-height:92px;

    padding:
      10px 8px;
  }


  /*
   * Historyを縦に増やさず横スクロール。
   */

  .palmu-v3
  .history-list{
    display:flex !important;

    grid-template-columns:none !important;

    gap:15px;

    margin-top:9px;

    padding:
      7px 2px;
  }


  .palmu-v3
  .history-item{
    min-width:69px;

    flex:
      0 0 69px;

    padding:
      8px 5px;
  }


  /*
   * Special titles
   */

  .palmu-v3
  .title-list{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:5px;

    margin-top:9px;
  }


  .palmu-v3
  .special-title{
    min-height:55px;

    padding:
      6px;

    gap:6px;
  }


  .palmu-v3
  .special-title i{
    width:27px;
    height:27px;

    flex:
      0 0 27px;

    font-size:15px;
  }


  .palmu-v3
  .special-title small{
    font-size:5px;
  }


  .palmu-v3
  .special-title strong{
    font-size:7px;
  }


  /*
   * Supporters panel
   */

  .palmu-v3
  .supporter-panel > header{
    min-height:44px;

    padding:
      10px 9px;
  }


  .palmu-v3
  .rank-filter{
    margin:
      6px 7px 0;

    padding:
      7px 5px;
  }


  .palmu-v3
  .search-box{
    width:
      calc(
        100% - 14px
      );

    margin:
      7px;
  }


  .palmu-v3
  footer{
    width:
      calc(
        100% - 12px
      );

    padding:
      14px 0
      calc(
        16px
        +
        env(
          safe-area-inset-bottom
        )
      );
  }

}


/* iPhone 16 / 16 Pro class */

@media(max-width:430px){

  .palmu-v3 main{
    width:
      calc(
        100% - 8px
      ) !important;
  }


  .palmu-v3
  .profile-panel{
    padding:
      6px !important;
  }


  .palmu-v3
  .profile-avatar{
    width:68px !important;
    height:68px !important;
  }


  .palmu-v3
  .dog-tag{
    padding:
      18px 10px
      16px 35px;
  }


  .palmu-v3
  .status-cell{
    padding:
      9px 7px !important;
  }


  .palmu-v3
  .detail-section{
    padding:
      9px 7px;
  }

}


/* very small phones */

@media(max-width:374px){

  .palmu-v3
  .title-list{
    grid-template-columns:
      1fr !important;
  }


  .palmu-v3
  .dog-tag{
    grid-template-columns:
      1fr !important;
  }


  .palmu-v3
  .tag-right{
    padding:
      9px 0 0;

    border-left:0;

    border-top:
      1px solid
      rgba(0,0,0,.22);
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(
  prefers-reduced-motion:reduce
){

  .palmu-v3
  .profile-panel[
    data-current-rank="special"
  ]
  .dog-tag::after{
    animation:none !important;
  }

}



/* =========================================================
   YUKINON PALMU MOBILE HEADER CLEANUP V3.7.1
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

/*
 * PCではタイトルを維持。
 * ロゴとの間隔だけ少し自然にする。
 */

@media(min-width:761px){

  .palmu-v3 .system-title{
    transform:
      translateX(6px);
  }


  .palmu-v3
  .system-title strong{
    font-size:
      clamp(
        1.75rem,
        2vw,
        2.3rem
      );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  /*
   * モバイルでは
   * PALMU SUPPORTER / BADGE SYSTEM
   * を非表示。
   */

  .palmu-v3
  .system-title{
    display:none !important;
  }


  /*
   * ロゴ単体のヘッダーへ変更。
   */

  .palmu-v3 .top-header{
    min-height:82px;

    display:grid;

    grid-template-columns:
      1fr;

    align-items:center;

    padding:
      0 12px;

    gap:0;
  }


  .palmu-v3 .brand{
    position:relative;

    z-index:8;

    width:
      clamp(
        145px,
        42vw,
        175px
      ) !important;

    justify-self:start;

    align-self:center;
  }


  /*
   * ロゴ後ろを少し暗くして
   * 背景から浮かせる。
   */

  .palmu-v3
  .top-header::before{
    background:
      linear-gradient(
        90deg,
        rgba(5,2,7,.68) 0%,
        rgba(5,2,7,.39) 31%,
        rgba(5,2,7,.10) 55%,
        transparent 75%
      ) !important;
  }


  /*
   * キャラクター・背景側を
   * 少し右へ寄せてロゴと分離。
   */

  .palmu-v3
  .v333-hero-art{
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 31%,
        rgba(0,0,0,.36) 52%,
        #000 70%
      );

    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 31%,
        rgba(0,0,0,.36) 52%,
        #000 70%
      );
  }


  .palmu-v3
  .v333-hero-art img{
    right:-170px;
  }


  /*
   * PRIVATE PREVIEWは
   * モバイルでは場所を使うため非表示。
   * プレビュー制御そのものには影響しない。
   */

  .palmu-v3
  .header-side{
    display:none !important;
  }

}


/* =========================================================
   iPHONE 16 / 16 PRO
   ========================================================= */

@media(max-width:430px){

  .palmu-v3 .top-header{
    min-height:78px;

    padding:
      0 10px;
  }


  .palmu-v3 .brand{
    width:
      142px !important;
  }


  .palmu-v3
  .v333-hero-art img{
    right:-178px;
  }

}



/* =========================================================
   YUKINON PALMU VISUAL QA MODE CSS V3.8
   ========================================================= */

.palmu-visual-qa-badge{
  position:fixed;

  z-index:99990;

  right:
    calc(
      12px
      +
      env(
        safe-area-inset-right
      )
    );

  bottom:
    calc(
      12px
      +
      env(
        safe-area-inset-bottom
      )
    );

  padding:
    7px 10px;

  color:#ffe4a0;

  border:
    1px solid
    rgba(255,209,101,.55);

  border-radius:5px;

  background:
    rgba(24,12,20,.88);

  box-shadow:
    0 4px 18px
      rgba(0,0,0,.40),

    0 0 14px
      rgba(255,97,183,.12);

  backdrop-filter:
    blur(8px);

  font-size:8px;

  font-weight:900;

  letter-spacing:.09em;

  pointer-events:none;
}


body.palmu-visual-test
.supporter-panel{
  box-shadow:
    inset 0 0 0 1px
      rgba(255,210,95,.025),

    0 20px 55px
      rgba(0,0,0,.30);
}


@media(max-width:760px){

  .palmu-visual-qa-badge{
    right:6px;
    bottom:6px;

    padding:
      4px 6px;

    font-size:5px;
  }

}



/* =========================================================
   YUKINON PALMU MOBILE FIX PACK V3.8.1
   ========================================================= */


/* =========================================================
   TAB FOCUS
   ========================================================= */

.palmu-tab-focus{
  animation:
    palmu-tab-focus-v381
    1.25s
    ease-out;
}


@keyframes palmu-tab-focus-v381{

  0%{
    box-shadow:
      0 0 0
      rgba(255,101,184,0);
  }

  28%{
    box-shadow:
      0 0 0 1px
        rgba(255,132,198,.65),

      0 0 28px
        rgba(239,82,169,.22);
  }

  100%{
    box-shadow:
      0 0 0
      rgba(255,101,184,0);
  }

}


/* =========================================================
   MOBILE DOG TAG HOLE FIX
   ========================================================= */

@media(max-width:760px){

  .palmu-v3
  .dog-tag::before{
    left:3px !important;

    top:56% !important;

    width:17px !important;
    height:17px !important;

    border-width:
      4px !important;

    transform:
      translateY(-50%)
      !important;
  }


  /*
   * 名前を穴からさらに離す
   */

  .palmu-v3
  .dog-tag .tag-left{
    padding-left:
      3px !important;
  }


  .palmu-v3
  .tag-name{
    position:relative;

    z-index:5;

    padding-left:0;

    margin-left:0;

    line-height:.98;
  }

}


/* iPhone 16 / Pro */

@media(max-width:430px){

  .palmu-v3
  .dog-tag::before{
    left:2px !important;

    width:15px !important;
    height:15px !important;

    border-width:
      4px !important;
  }

}


/* =========================================================
   PROFILE QUOTE MOBILE FIX
   ========================================================= */

@media(max-width:760px){

  /*
   * 「ずっと応援してるよ♡」を
   * profile-headの全幅へ。
   *
   * Grid内の細い列へ押し込まれるのを防止。
   */

  .palmu-v3
  .profile-quote{
    position:static !important;

    grid-column:
      1 / -1 !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-width:0;

    margin:
      7px 0 2px
      !important;

    padding:
      8px 10px
      !important;

    display:block;

    color:#ceb6c7;

    border-left:
      2px solid
      rgba(244,105,183,.48);

    background:
      linear-gradient(
        90deg,
        rgba(215,62,151,.09),
        rgba(255,255,255,.012)
      );

    font-family:
      Georgia,
      "Yu Mincho",
      "Hiragino Mincho ProN",
      serif;

    font-size:
      9px !important;

    line-height:
      1.65 !important;

    letter-spacing:
      .02em;

    text-align:left;

    writing-mode:
      horizontal-tb !important;

    text-orientation:
      mixed !important;

    white-space:
      normal !important;

    word-break:
      normal !important;

    overflow-wrap:
      anywhere;
  }


  .palmu-v3
  .profile-quote b{
    display:inline;

    font-size:15px;

    line-height:1;

    vertical-align:
      -.1em;
  }

}


/* =========================================================
   PAGINATION MOBILE TAP TARGET
   ========================================================= */

@media(max-width:760px){

  .palmu-v3
  .v32-pagination{
    min-height:48px;

    padding:
      8px 7px;

    gap:5px;

    scroll-padding:
      7px;
  }


  .palmu-v3
  .v32-pagination button{
    min-width:34px;

    height:34px;

    flex:
      0 0 34px;

    font-size:10px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(
  prefers-reduced-motion:reduce
){

  .palmu-tab-focus{
    animation:none;
  }

}



/* =========================================================
   YUKINON PALMU PUBLIC V4.0
   PALMU OFFICIAL MODEL
   ========================================================= */


/* ---------------------------------------------------------
   HUD TAB DISPLAY
   Keep original text internally for V3.8.1 navigation.
   --------------------------------------------------------- */

.hud-tabs button:nth-of-type(3),
.hud-tabs button:nth-of-type(4){
  font-size:0;
}


.hud-tabs button:nth-of-type(3)::before{
  content:"BADGE GUIDE";

  font-size:10px;

  letter-spacing:.11em;
}


.hud-tabs button:nth-of-type(4)::before{
  content:"TITLES";

  font-size:10px;

  letter-spacing:.11em;
}


/* ---------------------------------------------------------
   OFFICIAL GRADE FILTER
   --------------------------------------------------------- */

.v4-grade-filter{
  gap:6px;
}


.v4-grade-filter button{
  min-width:52px;

  padding:
    0 9px;

  font-family:
    Georgia,
    serif;

  font-weight:800;
}


/* ---------------------------------------------------------
   LIST
   --------------------------------------------------------- */

.v4-badge-number{
  color:#f0b7d5;

  font-family:
    Georgia,
    serif;

  font-size:11px;

  font-weight:900;

  letter-spacing:.04em;
}


.v4-badge-number
.tiny-track{
  display:none;
}


/* ---------------------------------------------------------
   GRADE EMBLEMS
   Existing V3 rank colors are retained purely as
   YUKINON visual themes.
   --------------------------------------------------------- */

.v4-grade-emblem{
  font-size:9px;

  letter-spacing:-.04em;
}


.big-emblem.v4-grade-emblem{
  font-size:18px;
}


/* ---------------------------------------------------------
   BADGE NUMBER
   --------------------------------------------------------- */

.v4-number-feature{
  min-height:130px;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  justify-content:center;

  gap:8px;
}


.v4-number-feature span{
  color:#aa96a6;

  font-size:9px;

  letter-spacing:.14em;
}


.v4-number-feature strong{
  color:#fff;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      2rem,
      4vw,
      3.15rem
    );

  text-shadow:
    0 0 20px
    rgba(238,98,174,.28);
}


/* ---------------------------------------------------------
   MONTHLY HISTORY
   --------------------------------------------------------- */

.v4-history-section{
  grid-column:
    1 / -1;
}


.v4-history-section
.history-list{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(115px,1fr)
    );
}


.v4-history-section
.history-item{
  min-width:0;

  min-height:88px;

  align-items:center;

  justify-content:flex-start;
}


.v4-history-text{
  display:flex;

  flex-direction:column;

  gap:4px;

  text-align:center;
}


.v4-history-text strong{
  color:#f5ddeb;

  font-size:10px;
}


.v4-history-text small{
  color:#b89eae;

  font-size:8px;

  line-height:1.5;
}


/*
 * V3では最後の履歴をCURRENT表示していたため、
 * V4ではcurrentMonth一致時だけ表示する。
 */

.v4-history-section
.history-item:last-child:not(.is-current)::before{
  display:none;
}


/* ---------------------------------------------------------
   TITLES
   --------------------------------------------------------- */

.palmu-official-title{
  border-color:
    rgba(146,164,255,.30);

  background:
    linear-gradient(
      120deg,
      rgba(48,52,101,.44),
      rgba(127,75,159,.21),
      rgba(56,39,78,.44)
    );
}


.palmu-official-title::before{
  background:
    linear-gradient(
      180deg,
      #9ea8ff,
      #d574ce
    );
}


/* ---------------------------------------------------------
   OFFICIAL DISCLAIMER
   --------------------------------------------------------- */

.v4-official-notice{
  width:min(
    var(--max),
    calc(100% - 36px)
  );

  margin:
    0 auto
    24px;

  padding:
    18px 20px;

  border:
    1px solid
    rgba(238,111,180,.20);

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      rgba(75,33,68,.28),
      rgba(29,20,35,.50)
    );

  color:#aa96a5;

  font-size:10px;

  line-height:1.8;
}


.v4-official-notice strong{
  display:block;

  margin-bottom:5px;

  color:#f3c3dc;

  font-family:
    Georgia,
    serif;

  letter-spacing:.12em;
}


.v4-official-notice p{
  margin:
    0 0
    7px;
}


.v4-official-notice a{
  color:#f48abb;

  font-weight:800;

  text-decoration:none;
}


.v4-official-notice a:hover{
  text-decoration:underline;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px){

  .hud-tabs
  button:nth-of-type(3)::before,
  .hud-tabs
  button:nth-of-type(4)::before{
    font-size:9px;
  }


  .v4-grade-filter{
    overflow-x:auto;

    flex-wrap:nowrap;

    scrollbar-width:thin;
  }


  .v4-grade-filter button{
    flex:
      0 0 auto;
  }


  .v4-number-feature{
    min-height:90px;
  }


  .v4-history-section
  .history-list{
    grid-template-columns:
      repeat(2,1fr);
  }


  .v4-official-notice{
    width:
      calc(100% - 20px);
  }

}


@media(max-width:430px){

  .v4-history-section
  .history-list{
    grid-template-columns:
      1fr;
  }

}



/* =========================================================
   YUKINON PALMU PUBLIC FINAL DESIGN CSS V4.1
   ========================================================= */


/* SUPPORTERS LIST */

.v41-row-badge{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}


.v41-rank-stack{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:118px;
}


.v41-rank-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:
    5px 8px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:7px;

  background:
    rgba(255,255,255,.025);
}


.v41-rank-line small{
  color:#ad98a7;

  font-size:8px;

  font-weight:800;

  letter-spacing:.12em;
}


.v41-rank-line strong{
  color:#ffe0ef;

  font-family:
    Georgia,
    serif;

  font-size:10px;

  letter-spacing:.05em;

  text-shadow:
    0 0 12px
    rgba(237,101,173,.22);
}


/* PALMU -> YUKINON -> DOG TAG */

.v41-identity-bridge{
  margin:
    0 0 18px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  gap:12px;

  align-items:center;
}


.v41-bridge-card{
  min-height:94px;

  padding:
    15px 12px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:7px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:12px;

  background:
    linear-gradient(
      145deg,
      rgba(76,34,70,.34),
      rgba(25,19,31,.54)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.018),
    0 12px 32px
    rgba(0,0,0,.16);
}


.v41-bridge-card small{
  color:#bba2b2;

  font-size:9px;

  font-weight:800;

  letter-spacing:.14em;
}


.v41-bridge-card strong{
  color:#fff;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      1rem,
      2vw,
      1.35rem
    );

  letter-spacing:.05em;

  text-align:center;

  text-shadow:
    0 0 20px
    rgba(242,104,178,.34);
}


.v41-bridge-arrow{
  color:#ef75b4;

  font-size:23px;

  font-weight:900;

  text-shadow:
    0 0 18px
    rgba(239,117,180,.38);
}


/* FOUR STATUS CARDS */

.v41-status-grid{
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
}


.v41-rank-feature{
  min-height:130px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:flex-start;

  gap:8px;
}


.v41-rank-feature span{
  color:#aa96a6;

  font-size:9px;

  font-weight:700;

  letter-spacing:.14em;
}


.v41-rank-feature strong{
  max-width:100%;

  color:#fff;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      1.35rem,
      2.5vw,
      2.2rem
    );

  line-height:1.05;

  overflow-wrap:anywhere;

  text-shadow:
    0 0 20px
    rgba(238,98,174,.30);
}


/* TABLET */

@media(max-width:1050px){

  .v41-status-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


/* MOBILE */

@media(max-width:760px){

  .v41-identity-bridge{
    grid-template-columns:
      1fr;

    gap:8px;
  }


  .v41-bridge-arrow{
    transform:
      rotate(90deg);

    text-align:center;
  }


  .v41-bridge-card{
    min-height:78px;
  }

}


@media(max-width:560px){

  .v41-status-grid{
    grid-template-columns:
      1fr;
  }


  .v41-row-badge{
    gap:7px;
  }


  .v41-rank-stack{
    min-width:0;
    width:100%;
  }


  .v41-rank-line{
    padding:
      5px 6px;

    gap:6px;
  }


  .v41-rank-line small{
    font-size:7px;
  }


  .v41-rank-line strong{
    font-size:9px;
  }

}


/* =========================================================
   YUKINON PALMU PUBLIC MOBILE FIX V4.2.3
   - emblem star clipping
   - supporter list PALMU / YUKINON mobile layout
   ========================================================= */


/* ---------------------------------------------------------
   EMBLEM STAR FIT
   エンブレム本体は変更せず文字だけ収める
   --------------------------------------------------------- */

.v4-grade-emblem{
  overflow:hidden;
}


.v4-grade-stars{
  display:block;

  position:relative;

  z-index:3;

  width:auto;

  max-width:100%;

  white-space:nowrap;

  line-height:1;

  text-align:center;

  transform-origin:center center;
}


/* ★1 ～ ★3 */

.v4-stars-1 .v4-grade-stars,
.v4-stars-2 .v4-grade-stars,
.v4-stars-3 .v4-grade-stars{
  letter-spacing:-.04em;
}


/* ★★★★ */

.v4-stars-4 .v4-grade-stars{
  font-size:.78em;

  letter-spacing:-.11em;
}


/* ★★★★★ */

.v4-stars-5 .v4-grade-stars{
  font-size:.64em;

  letter-spacing:-.16em;

  transform:
    scaleX(.96);
}


/* ---------------------------------------------------------
   SUPPORTERS LIST
   基本状態
   --------------------------------------------------------- */

.v41-row-badge{
  min-width:0;
}


.v41-row-badge > *{
  min-width:0;
}


/* =========================================================
   MOBILE SUPPORTERS LIST
   ========================================================= */

@media(max-width:560px){

  /*
   * 1段目
   * RANK | ICON | NAME | NUMBER
   *
   * 2段目
   *        PALMU / YUKINON
   */

  .supporter-list
  .supporter-row{
    display:grid !important;

    grid-template-columns:
      30px
      36px
      minmax(0,1fr)
      max-content !important;

    grid-template-areas:
      "rank avatar name number"
      ".    badge  badge badge" !important;

    column-gap:
      7px !important;

    row-gap:
      7px !important;

    align-items:
      center !important;

    min-height:
      82px !important;

    padding:
      9px 10px !important;

    overflow:
      hidden;
  }


  .supporter-list
  .supporter-row
  .row-rank{
    grid-area:rank;

    min-width:0;

    align-self:center;
  }


  .supporter-list
  .supporter-row
  .avatar{
    grid-area:avatar;

    width:34px;
    height:34px;

    min-width:34px;
  }


  .supporter-list
  .supporter-row
  .row-name{
    grid-area:name;

    min-width:0;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;
  }


  /* NUMBER = ★5.8 */

  .supporter-list
  .supporter-row
  .v4-badge-number{
    grid-area:number;

    justify-self:end;

    align-self:center;

    width:auto !important;

    min-width:max-content;

    max-width:none;

    padding:0;

    white-space:nowrap;

    text-align:right;

    font-size:10px;
  }


  /* PALMU / YUKINON */

  .supporter-list
  .supporter-row
  .v41-row-badge{
    grid-area:badge;

    width:100% !important;

    max-width:100% !important;

    min-width:0 !important;

    margin:0 !important;

    display:grid !important;

    grid-template-columns:
      28px
      minmax(0,1fr) !important;

    gap:
      8px !important;

    align-items:center !important;

    overflow:visible !important;
  }


  /* 一覧の小型エンブレム */

  .supporter-list
  .v41-row-badge
  > .mini-emblem{
    width:28px !important;
    height:28px !important;

    min-width:28px !important;

    margin:0 !important;

    justify-self:start;
  }


  /*
   * PALMU / YUKINON本体には
   * 残りの横幅をすべて与える
   */

  .supporter-list
  .v41-row-badge
  > :not(.mini-emblem){
    width:100% !important;

    max-width:100% !important;

    min-width:0 !important;

    overflow:visible !important;
  }


  /*
   * モバイル一覧ではSTREAKを省略。
   * 詳細プロフィールには引き続き表示される。
   */

  .supporter-list
  .supporter-row
  .row-streak{
    display:none !important;
  }


  /* ★★★★★の一覧エンブレム */

  .supporter-list
  .mini-emblem.v4-stars-5
  .v4-grade-stars{
    font-size:.59em;

    letter-spacing:-.18em;
  }

}


/* ---------------------------------------------------------
   iPhone 430px以下
   --------------------------------------------------------- */

@media(max-width:430px){

  .supporter-list
  .supporter-row{
    grid-template-columns:
      27px
      34px
      minmax(0,1fr)
      max-content !important;

    column-gap:
      6px !important;

    padding:
      9px 8px !important;
  }


  .supporter-list
  .supporter-row
  .v41-row-badge{
    grid-template-columns:
      26px
      minmax(0,1fr) !important;

    gap:
      7px !important;
  }


  .supporter-list
  .v41-row-badge
  > .mini-emblem{
    width:26px !important;
    height:26px !important;

    min-width:26px !important;
  }

}



/* =========================================================
   YUKINON PALMU SUPPORTER LIST COLUMN FIX V4.2.4
   PALMU / YUKINON と STREAK の重なり修正
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP / LANDSCAPE
   PALMU/YUKINON列を広げてSTREAKを独立させる
   --------------------------------------------------------- */

.supporter-panel .list-head,
.supporter-panel .supporter-row{
  grid-template-columns:
    34px
    42px
    minmax(74px,1fr)
    minmax(190px,1.75fr)
    minmax(50px,.42fr)
    minmax(62px,.48fr)
    !important;

  column-gap:
    8px !important;
}


/* PALMU / YUKINON */

.supporter-panel
.v41-row-badge{
  min-width:
    0 !important;

  max-width:
    100% !important;

  gap:
    6px !important;

  overflow:
    hidden !important;

  box-sizing:
    border-box;
}


/* エンブレムは縮ませない */

.supporter-panel
.v41-row-badge
> .mini-emblem{
  flex:
    0 0 28px !important;

  width:
    28px !important;

  min-width:
    28px !important;
}


/* PALMU / YUKINON文字側だけ縮小可能にする */

.supporter-panel
.v41-row-badge
> :not(.mini-emblem){
  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow:
    hidden;
}


/* STREAK専用領域 */

.supporter-panel
.row-streak{
  min-width:
    0 !important;

  width:
    100%;

  display:block;

  position:relative;

  z-index:2;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  text-align:
    center;
}


/* NUMBER専用領域 */

.supporter-panel
.v4-badge-number{
  min-width:
    0 !important;

  width:
    100%;

  justify-content:
    flex-end;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-align:
    right;
}


/* ---------------------------------------------------------
   1050px以下
   横向きiPhone / タブレット
   --------------------------------------------------------- */

@media(max-width:1050px){

  .supporter-panel .list-head,
  .supporter-panel .supporter-row{
    grid-template-columns:
      32px
      40px
      minmax(70px,1fr)
      minmax(180px,1.8fr)
      48px
      60px
      !important;

    column-gap:
      7px !important;
  }


  .supporter-panel
  .v41-row-badge{
    font-size:
      9px;
  }

}


/* =========================================================
   PORTRAIT MOBILE
   STREAKも消さずに2段構成
   ========================================================= */

@media(max-width:560px){

  .supporter-panel
  .list-head{
    display:
      none !important;
  }


  .supporter-list
  .supporter-row{
    display:
      grid !important;

    grid-template-columns:
      27px
      34px
      minmax(0,1fr)
      max-content
      max-content
      !important;

    grid-template-areas:
      "rank avatar name streak number"
      ". badge badge badge badge"
      !important;

    column-gap:
      6px !important;

    row-gap:
      7px !important;

    min-height:
      84px !important;

    padding:
      9px 8px !important;
  }


  .supporter-list
  .row-rank{
    grid-area:
      rank;
  }


  .supporter-list
  .avatar{
    grid-area:
      avatar;
  }


  .supporter-list
  .row-name{
    grid-area:
      name;

    min-width:
      0;
  }


  /* STREAKを復活させて独立 */

  .supporter-list
  .row-streak{
    grid-area:
      streak;

    display:
      block !important;

    width:
      auto;

    min-width:
      28px !important;

    max-width:
      52px;

    font-size:
      8px;

    text-align:
      right;
  }


  /* NUMBER */

  .supporter-list
  .v4-badge-number{
    grid-area:
      number;

    display:
      block !important;

    width:
      auto;

    min-width:
      max-content !important;

    font-size:
      9px;

    text-align:
      right;
  }


  /* PALMU / YUKINONは完全に2段目へ */

  .supporter-list
  .v41-row-badge{
    grid-area:
      badge;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    overflow:
      hidden !important;
  }

}



/* =========================================================
   YUKINON PALMU FINAL RESPONSIVE POLISH V4.2.5
   SUPPORTERS LIST 最終位置調整
   ========================================================= */


/* ---------------------------------------------------------
   ROW VERTICAL ALIGNMENT
   --------------------------------------------------------- */

.supporter-panel
.supporter-row{
  align-items:
    center !important;
}


.supporter-panel
.row-rank,

.supporter-panel
.avatar,

.supporter-panel
.row-name,

.supporter-panel
.v41-row-badge,

.supporter-panel
.row-streak,

.supporter-panel
.v4-badge-number{
  align-self:
    center;
}


/* 名前 */

.supporter-panel
.row-name{
  min-width:
    0;

  max-width:
    100%;

  line-height:
    1.25;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


/* ---------------------------------------------------------
   PALMU / YUKINON
   --------------------------------------------------------- */

.supporter-panel
.v41-row-badge{
  display:
    flex;

  align-items:
    center;

  min-width:
    0 !important;

  line-height:
    1.15;
}


/* エンブレム右側の情報領域 */

.supporter-panel
.v41-row-badge
> :not(.mini-emblem){
  min-width:
    0 !important;

  max-width:
    100% !important;

  line-height:
    1.15;
}


/* ---------------------------------------------------------
   STREAK
   --------------------------------------------------------- */

.supporter-panel
.row-streak{
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  height:
    100%;

  padding:
    0 4px;

  line-height:
    1.2;

  box-sizing:
    border-box;
}


/* ---------------------------------------------------------
   NUMBER
   --------------------------------------------------------- */

.supporter-panel
.v4-badge-number{
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  height:
    100%;

  padding:
    0 2px;

  line-height:
    1.2;

  box-sizing:
    border-box;
}


/* ---------------------------------------------------------
   SELECTED SUPPORTER
   --------------------------------------------------------- */

.supporter-panel
.supporter-row.is-active{
  position:
    relative;

  overflow:
    hidden;
}


.supporter-panel
.supporter-row.is-active::after{
  top:
    7px;

  bottom:
    7px;
}


/* =========================================================
   LANDSCAPE / TABLET
   ========================================================= */

@media(max-width:1050px){

  .supporter-panel
  .supporter-row{
    min-height:
      66px;
  }


  .supporter-panel
  .row-name{
    font-size:
      10px;
  }


  .supporter-panel
  .row-streak{
    padding:
      0 3px;

    font-size:
      8px;
  }


  .supporter-panel
  .v4-badge-number{
    font-size:
      9px;
  }

}


/* =========================================================
   PORTRAIT MOBILE
   ========================================================= */

@media(max-width:560px){

  .supporter-list
  .supporter-row{
    align-items:
      center !important;

    row-gap:
      8px !important;
  }


  /* 名前が長くても右側を押さない */

  .supporter-list
  .row-name{
    width:
      100%;

    min-width:
      0;

    font-size:
      10px;

    overflow:
      hidden;

    white-space:
      nowrap;

    text-overflow:
      ellipsis;
  }


  /* STREAK */

  .supporter-list
  .row-streak{
    height:
      auto;

    min-height:
      20px;

    padding:
      0 2px;

    display:
      flex !important;

    align-items:
      center;

    justify-content:
      flex-end;

    line-height:
      1;

    white-space:
      nowrap;
  }


  /* NUMBER */

  .supporter-list
  .v4-badge-number{
    height:
      auto;

    min-height:
      20px;

    padding:
      0;

    display:
      flex !important;

    align-items:
      center;

    justify-content:
      flex-end;

    line-height:
      1;

    white-space:
      nowrap;
  }


  /* PALMU / YUKINON 2段目 */

  .supporter-list
  .v41-row-badge{
    align-self:
      center;

    min-height:
      30px;

    padding:
      1px 0;

    overflow:
      hidden !important;
  }


  .supporter-list
  .v41-row-badge
  > :not(.mini-emblem){
    min-width:
      0 !important;

    line-height:
      1.15;
  }

}


/* =========================================================
   SMALL iPHONE
   ========================================================= */

@media(max-width:430px){

  .supporter-list
  .supporter-row{
    min-height:
      86px !important;
  }


  .supporter-list
  .row-name{
    font-size:
      9px;
  }


  .supporter-list
  .row-streak{
    font-size:
      7px;
  }


  .supporter-list
  .v4-badge-number{
    font-size:
      8px;
  }

}



/* =========================================================
   YUKINON PALMU SPECIAL FORCES NAV V1.0
   ========================================================= */

.hud-tabs
.special-forces-nav{
  min-width:150px;

  min-height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  flex:0 0 auto;

  padding:
    0 18px;

  color:#f3cadd;

  border:0;

  border-bottom:
    2px solid
    rgba(239,80,158,.70);

  background:
    linear-gradient(
      180deg,
      rgba(220,59,143,.13),
      transparent
    );

  text-decoration:none;

  font-family:Georgia,serif;

  font-size:9px;

  font-weight:900;

  letter-spacing:.08em;

  white-space:nowrap;

  text-shadow:
    0 0 16px
    rgba(238,73,159,.38);
}


.hud-tabs
.special-forces-nav:hover{
  color:#fff;

  background:
    linear-gradient(
      180deg,
      rgba(236,74,159,.21),
      transparent
    );
}


@media(max-width:760px){

  .hud-tabs
  .special-forces-nav{
    min-width:140px;

    padding:
      0 14px;
  }

}



/* =========================================================
   YUKINON PALMU SPECIAL FORCES TAB MATCH V4.3.1
   SPECIAL FORCESを通常HUDタブと同じ表示へ統一
   ========================================================= */

.hud-tabs
.special-forces-nav{
  position:relative;

  min-width:190px;
  min-height:auto;

  padding:
    0 28px;

  display:flex;

  align-items:center;
  justify-content:center;

  flex:
    0 0 auto;

  border:0;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    0;

  color:
    #a99daa;

  background:
    transparent;

  box-shadow:
    none;

  text-shadow:
    none;

  font-family:
    Georgia,
    serif;

  font-size:
    inherit;

  font-weight:
    inherit;

  letter-spacing:
    .11em;

  white-space:
    nowrap;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    color .2s ease,
    background .2s ease;
}


/* 通常タブと同じ下部ラインアニメーション */

.hud-tabs
.special-forces-nav::after{
  content:"";

  position:absolute;

  left:50%;
  right:50%;
  bottom:0;

  height:2px;

  background:
    #ff87c1;

  transition:
    left .25s ease,
    right .25s ease;
}


.hud-tabs
.special-forces-nav:hover{
  color:#fff;

  background:
    rgba(
      255,
      255,
      255,
      .025
    );
}


.hud-tabs
.special-forces-nav:hover::after{
  left:18%;
  right:18%;
}


/* ---------------------------------------------------------
   MOBILE
   通常buttonと同じ120pxへ統一
   --------------------------------------------------------- */

@media(max-width:760px){

  .hud-tabs
  .special-forces-nav{
    min-width:
      120px;

    padding:
      0 15px;

    font-size:
      9px;
  }

}



/* =========================================================
   YUKINON PALMU SPECIAL FORCES FONT MATCH V4.3.2
   ========================================================= */

.hud-tabs
.special-forces-nav{
  font-size:
    13.3333px !important;

  line-height:
    normal !important;
}


/* 通常メニューと同じモバイルサイズ */

@media(max-width:760px){

  .hud-tabs
  .special-forces-nav{
    font-size:
      9px !important;
  }

}




/* =========================================================
   YUKINON PALMU DOG TAG DUAL FACE V4.4
   ========================================================= */

.dog-tag-flip-shell{
  position:relative;

  min-height:230px;
  margin-top:20px;

  perspective:1400px;

  cursor:pointer;
  outline:none;
}


.dog-tag-flip-shell::after{
  content:"CLICK / TAP TO FLIP  ↻";

  position:absolute;

  z-index:9;

  right:18px;
  bottom:11px;

  color:
    rgba(
      20,
      17,
      22,
      .58
    );

  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;

  pointer-events:none;
}


.dog-tag-flip-shell:focus-visible{
  outline:
    2px solid
    rgba(
      245,
      117,
      185,
      .78
    );

  outline-offset:5px;
}


.dog-tag-flip-shell
> .dog-tag{
  width:100%;
  margin-top:0;

  box-sizing:border-box;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transform-style:
    preserve-3d;

  transition:
    transform
    .62s
    cubic-bezier(
      .2,
      .72,
      .2,
      1
    );
}


.dog-tag-front{
  position:relative;

  z-index:2;

  transform:
    rotateY(0deg);
}


.dog-tag-back{
  position:absolute;

  z-index:1;

  inset:0;

  width:100%;
  height:100%;
  min-height:100%;

  display:flex !important;

  align-items:center;
  justify-content:center;

  padding:
    31px
    42px
    31px
    58px;

  transform:
    rotateY(180deg);

  overflow:auto;
}


.dog-tag-flip-shell.is-flipped
.dog-tag-front{
  transform:
    rotateY(-180deg);
}


.dog-tag-flip-shell.is-flipped
.dog-tag-back{
  z-index:3;

  transform:
    rotateY(0deg);
}


.dog-tag-back-content{
  position:relative;

  z-index:4;

  width:
    min(
      100%,
      620px
    );

  margin:auto;

  text-align:center;
}


.dog-tag-back-label{
  display:block;

  margin-bottom:18px;

  font-family:
    Georgia,
    serif;

  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;

  opacity:.70;
}


.dog-tag-back-comment{
  margin:0;

  font-family:
    Georgia,
    "Yu Mincho",
    serif;

  font-size:
    clamp(
      15px,
      2.1vw,
      22px
    );

  font-weight:700;
  line-height:1.8;

  overflow-wrap:anywhere;
}


.dog-tag-back-comment::before{
  content:"“";

  margin-right:.18em;
}


.dog-tag-back-comment::after{
  content:"”";

  margin-left:.18em;
}


.dog-tag-back-sign{
  display:block;

  margin-top:22px;

  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;

  opacity:.55;
}


.v43-history-note{
  display:block;

  margin-top:4px;

  color:
    rgba(
      220,
      190,
      208,
      .72
    );

  font-size:8px;
  line-height:1.55;
}


@media(max-width:760px){

  .dog-tag-flip-shell{
    min-height:260px;
  }


  .dog-tag-back{
    padding:
      28px
      22px
      26px
      42px;
  }


  .dog-tag-back-comment{
    font-size:
      clamp(
        14px,
        4vw,
        18px
      );
  }

}


@media(prefers-reduced-motion:reduce){

  .dog-tag-flip-shell
  > .dog-tag{
    transition:none;
  }

}



/* =========================================================
   YUKINON PALMU DOG TAG ORIGINAL LOOK FLIP V4.8

   Preserve the original V1.6 DOG TAG design exactly.

   This block changes ONLY:
   - 3D perspective
   - Y rotation
   - front/back visibility

   It does NOT change:
   - width
   - height
   - padding
   - grid
   - flex
   - typography
   - internal layout
   ========================================================= */


/* ---------------------------------------------------------
   CAMERA ONLY
   --------------------------------------------------------- */

.dog-tag-flip-shell{

  perspective:
    1400px;

  -webkit-perspective:
    1400px;

  perspective-origin:
    center center;

  -webkit-perspective-origin:
    center center;

}


/* ---------------------------------------------------------
   FRONT

   Keep every original layout property.
   Only add 3D behavior.
   --------------------------------------------------------- */

.dog-tag-flip-shell
> .dog-tag-front{

  backface-visibility:
    hidden !important;

  -webkit-backface-visibility:
    hidden !important;

  transform:
    rotateY(0deg);

  -webkit-transform:
    rotateY(0deg);

  transform-origin:
    center center;

  -webkit-transform-origin:
    center center;

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transition:
    transform
      .72s
      cubic-bezier(
        .30,
        .05,
        .18,
        1
      ),

    opacity
      .01s
      linear
      .35s;

}


/* ---------------------------------------------------------
   BACK

   Its ORIGINAL DOG TAG layout stays untouched.
   It is merely invisible before tapping.
   --------------------------------------------------------- */

.dog-tag-flip-shell
> .dog-tag-back{

  backface-visibility:
    hidden !important;

  -webkit-backface-visibility:
    hidden !important;

  transform:
    rotateY(180deg);

  -webkit-transform:
    rotateY(180deg);

  transform-origin:
    center center;

  -webkit-transform-origin:
    center center;

  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;

  transition:
    transform
      .72s
      cubic-bezier(
        .30,
        .05,
        .18,
        1
      ),

    opacity
      .01s
      linear
      .35s;

}


/* ---------------------------------------------------------
   TAP / CLICK:
   FRONT -> BACK
   --------------------------------------------------------- */

.dog-tag-flip-shell.is-flipped
> .dog-tag-front{

  transform:
    rotateY(-180deg);

  -webkit-transform:
    rotateY(-180deg);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

}


.dog-tag-flip-shell.is-flipped
> .dog-tag-back{

  transform:
    rotateY(0deg);

  -webkit-transform:
    rotateY(0deg);

  opacity:
    1 !important;

  visibility:
    visible !important;

  pointer-events:
    auto !important;

}


/* ---------------------------------------------------------
   iPHONE SAFETY

   No layout modifications here either.
   --------------------------------------------------------- */

@media(max-width:760px){

  .dog-tag-flip-shell{

    perspective:
      1000px;

    -webkit-perspective:
      1000px;

  }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media(
  prefers-reduced-motion:
  reduce
){

  .dog-tag-flip-shell
  > .dog-tag-front,

  .dog-tag-flip-shell
  > .dog-tag-back{

    transition-duration:
      .01ms !important;

  }

}



/* =========================================================
   YUKINON PALMU DOG TAG NATURAL SIZE FIX V4.8.3

   FRONT determines the real DOG TAG size.
   BACK simply overlays that same rectangle.

   No JS height calculation.
   No fixed height.
   No growth loop.
   ========================================================= */

@media(max-width:760px){

  /* -------------------------------------------------------
     SHELL

     Natural height comes only from FRONT.
     ------------------------------------------------------- */

  .dog-tag-flip-shell{

    position:relative !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;

    overflow:visible !important;
  }


  /* -------------------------------------------------------
     FRONT

     This is the ONLY face participating
     in normal document flow.

     Therefore its original size becomes
     the permanent DOG TAG size.
     ------------------------------------------------------- */

  .dog-tag-flip-shell
  > .dog-tag-front{

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    inset:auto !important;

    width:100% !important;

    height:auto !important;

    max-width:100% !important;

    margin:0 !important;

    box-sizing:border-box !important;

    overflow:visible;
  }


  /* -------------------------------------------------------
     BACK

     It occupies exactly the rectangle produced by FRONT.
     It cannot change shell height.
     ------------------------------------------------------- */

  .dog-tag-flip-shell
  > .dog-tag-back{

    position:absolute !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:100% !important;
    max-height:100% !important;

    margin:0 !important;

    box-sizing:border-box !important;

    overflow:auto !important;

    -webkit-overflow-scrolling:
      touch;
  }


  /* -------------------------------------------------------
     SAME OUTER GEOMETRY
     ------------------------------------------------------- */

  .dog-tag-flip-shell
  > .dog-tag-front,

  .dog-tag-flip-shell
  > .dog-tag-back{

    transform-origin:
      center center !important;

    -webkit-transform-origin:
      center center !important;
  }

}



/* =========================================================
   YUKINON PALMU DOG TAG SAFE PREMIUM V5.0.1

   SAFE COSMETIC-ONLY FINISH

   This block DOES NOT change:
   - position
   - display
   - width / height
   - margin / padding
   - grid / flex
   - front/back flip geometry
   ========================================================= */


/* ---------------------------------------------------------
   PREMIUM SILVER BODY
   --------------------------------------------------------- */

.dog-tag-front,
.dog-tag-back{

  background:

    linear-gradient(
      112deg,

      rgba(255,255,255,.42)
      0%,

      rgba(255,255,255,.08)
      16%,

      transparent
      31%,

      rgba(255,255,255,.17)
      47%,

      rgba(117,91,132,.06)
      62%,

      rgba(255,255,255,.18)
      78%,

      transparent
      100%
    ),

    repeating-linear-gradient(
      -10deg,

      rgba(255,255,255,.025)
      0px,

      rgba(255,255,255,.025)
      1px,

      rgba(65,45,73,.018)
      2px,

      transparent
      4px,

      transparent
      10px
    ),

    linear-gradient(
      138deg,

      #faf6fc
      0%,

      #eee5f3
      14%,

      #d4c5dd
      33%,

      #bfaecb
      51%,

      #d9cae2
      69%,

      #f7f0fa
      100%
    )
    !important;


  border-color:
    rgba(
      255,
      235,
      249,
      .50
    )
    !important;


  box-shadow:

    0 18px 42px
    rgba(
      0,
      0,
      0,
      .27
    ),

    0 4px 10px
    rgba(
      0,
      0,
      0,
      .16
    ),

    inset 0 2px 1px
    rgba(
      255,
      255,
      255,
      .66
    ),

    inset 0 -2px 2px
    rgba(
      73,
      50,
      82,
      .17
    ),

    inset 0 0 0 1px
    rgba(
      255,
      255,
      255,
      .18
    )
    !important;
}


/* ---------------------------------------------------------
   DIAMOND / YUKINON TONE
   --------------------------------------------------------- */

.dog-tag-front.theme-diamond,
.dog-tag-back.theme-diamond,
.dog-tag-front.theme-yukinon,
.dog-tag-back.theme-yukinon{

  background:

    linear-gradient(
      112deg,

      rgba(255,255,255,.48)
      0%,

      transparent
      29%,

      rgba(255,214,246,.13)
      48%,

      transparent
      67%,

      rgba(255,255,255,.19)
      84%,

      transparent
      100%
    ),

    repeating-linear-gradient(
      -10deg,

      rgba(255,255,255,.025)
      0px,

      rgba(255,255,255,.025)
      1px,

      transparent
      2px,

      transparent
      9px
    ),

    linear-gradient(
      138deg,

      #fff8fd
      0%,

      #f0e4f4
      16%,

      #d8c3df
      36%,

      #c1aaca
      54%,

      #decbe5
      72%,

      #fbf3fd
      100%
    )
    !important;
}


/* ---------------------------------------------------------
   GOLD
   --------------------------------------------------------- */

.dog-tag-front.theme-gold,
.dog-tag-back.theme-gold{

  background:

    linear-gradient(
      112deg,

      rgba(255,255,255,.43),
      transparent 31%,

      rgba(255,243,190,.15)
      50%,

      transparent 72%
    ),

    repeating-linear-gradient(
      -10deg,

      rgba(255,255,255,.025)
      0px,

      rgba(255,255,255,.025)
      1px,

      transparent
      2px,

      transparent
      10px
    ),

    linear-gradient(
      138deg,

      #fff9e8
      0%,

      #eee0b4
      20%,

      #cbb77a
      47%,

      #e6d398
      71%,

      #fff7df
      100%
    )
    !important;
}


/* ---------------------------------------------------------
   BLACK
   --------------------------------------------------------- */

.dog-tag-front.theme-black,
.dog-tag-back.theme-black{

  background:

    linear-gradient(
      112deg,

      rgba(255,255,255,.12),
      transparent 33%,

      rgba(255,255,255,.04)
      52%,

      transparent 75%
    ),

    repeating-linear-gradient(
      -10deg,

      rgba(255,255,255,.014)
      0px,

      rgba(255,255,255,.014)
      1px,

      transparent
      2px,

      transparent
      10px
    ),

    linear-gradient(
      138deg,

      #3a333e
      0%,

      #252028
      32%,

      #171419
      57%,

      #302933
      80%,

      #464049
      100%
    )
    !important;
}


/* ---------------------------------------------------------
   TYPOGRAPHY / ENGRAVED EFFECT

   Color / shadow ONLY.
   --------------------------------------------------------- */

.dog-tag-front
.tag-label{

  color:
    rgba(
      45,
      31,
      53,
      .76
    )
    !important;

  text-shadow:
    0 1px 0
    rgba(
      255,
      255,
      255,
      .50
    );
}


.dog-tag-front
.tag-name{

  color:
    #261a2d
    !important;

  text-shadow:

    0 1px 0
    rgba(
      255,
      255,
      255,
      .48
    ),

    0 2px 2px
    rgba(
      42,
      28,
      48,
      .08
    );
}


.dog-tag-front
.tag-id{

  color:
    rgba(
      47,
      32,
      55,
      .76
    )
    !important;

  text-shadow:
    0 1px 0
    rgba(
      255,
      255,
      255,
      .40
    );
}


.dog-tag-front
.tag-sign{

  color:
    #f06db8
    !important;

  text-shadow:

    0 0 9px
    rgba(
      240,
      109,
      184,
      .27
    ),

    0 1px 0
    rgba(
      255,
      255,
      255,
      .34
    );
}


/* ---------------------------------------------------------
   STATS
   --------------------------------------------------------- */

.dog-tag-front
.tag-stat small{

  color:
    rgba(
      63,
      43,
      72,
      .63
    )
    !important;

  text-shadow:
    0 1px 0
    rgba(
      255,
      255,
      255,
      .38
    );
}


.dog-tag-front
.tag-stat strong{

  color:
    #281b30
    !important;

  text-shadow:
    0 1px 0
    rgba(
      255,
      255,
      255,
      .35
    );
}


/* ---------------------------------------------------------
   EMBLEM DEPTH

   Filter only affects the icon visual,
   not its dimensions.
   --------------------------------------------------------- */

.dog-tag-front
.tag-rank-line
.rank-emblem,

.dog-tag-front
.tag-rank-line
img{

  filter:

    drop-shadow(
      0 7px 12px
      rgba(
        67,
        40,
        79,
        .25
      )
    )

    drop-shadow(
      0 0 11px
      rgba(
        236,
        111,
        191,
        .12
      )
    );
}


/* ---------------------------------------------------------
   BACK COMMENT
   --------------------------------------------------------- */

.dog-tag-back
.dog-tag-back-label{

  color:
    rgba(
      60,
      41,
      68,
      .66
    )
    !important;

  text-shadow:
    0 1px 0
    rgba(
      255,
      255,
      255,
      .38
    );
}


.dog-tag-back
.dog-tag-back-comment{

  color:
    #2c1f34
    !important;

  text-shadow:
    0 1px 0
    rgba(
      255,
      255,
      255,
      .32
    );
}


.dog-tag-back
.dog-tag-back-sign{

  color:
    rgba(
      66,
      45,
      75,
      .54
    )
    !important;
}


/* ---------------------------------------------------------
   FLIP HINT
   --------------------------------------------------------- */

.dog-tag-flip-shell::after{

  color:
    rgba(
      48,
      31,
      56,
      .48
    )
    !important;
}


/* ---------------------------------------------------------
   MOBILE

   No size/layout modifications.
   --------------------------------------------------------- */

@media(max-width:760px){

  .dog-tag-front,
  .dog-tag-back{

    box-shadow:

      0 13px 29px
      rgba(
        0,
        0,
        0,
        .25
      ),

      inset 0 2px 1px
      rgba(
        255,
        255,
        255,
        .59
      ),

      inset 0 -2px 2px
      rgba(
        73,
        50,
        82,
        .15
      )
      !important;
  }

}


/* =========================================================
   YUKINON PALMU DOG TAG CHAIN RIBBON RESTORE V5.0.2

   Chain and ribbon use the original DOG TAG styling again.

   No position overrides.
   No transforms.
   No size changes.
   No flip changes.

   Premium V5.0.1 metal body remains enabled.
   ========================================================= */




/* =========================================================
   YUKINON PALMU DOG TAG CHAIN / RIBBON ANCHOR V5.0.3

   PC ONLY

   Align the decorative chain and ribbon
   with the DOG TAG metal hole.

   Does NOT change:
   - DOG TAG dimensions
   - flip behavior
   - mobile layout
   - internal content
   - original transforms
   ========================================================= */

@media(min-width:761px){

  /*
   * Tuning values.
   *
   * Using CSS individual `translate`
   * preserves any original `transform`
   * used by the decoration.
   */

  .dog-tag-front,
  .dog-tag-back{

    --dog-chain-anchor-x:
      4px;

    --dog-chain-anchor-y:
      50px;

    --dog-ribbon-anchor-x:
      10px;

    --dog-ribbon-anchor-y:
      32px;
  }


  /* -------------------------------------------------------
     BALL CHAIN

     Move the bead line down toward the hole.
     ------------------------------------------------------- */

  .dog-tag-front
  > .dog-chain,

  .dog-tag-back
  > .dog-chain{

    translate:
      var(--dog-chain-anchor-x)
      var(--dog-chain-anchor-y)
      !important;
  }


  /* -------------------------------------------------------
     RIBBON

     Move the ribbon knot onto the hole.
     ------------------------------------------------------- */

  .dog-tag-front
  > .dog-ribbon,

  .dog-tag-back
  > .dog-ribbon{

    translate:
      var(--dog-ribbon-anchor-x)
      var(--dog-ribbon-anchor-y)
      !important;
  }

}





/* =========================================================
   YUKINON PALMU CONTINUITY EMBLEM DESIGN V5.1.0

   1 - 2 months
     STANDARD

   3 - 5 months
     3M

   6+ months
     6M

   DOG TAG layout / flip / chain / ribbon are untouched.
   ========================================================= */


.v4-grade-emblem.v44-continuity{

  position:
    relative;
}


/* =========================================================
   3 MONTHS
   ========================================================= */

.v4-grade-emblem.v44-continuity-3m{

  outline:
    2px solid
    rgba(
      242,
      117,
      182,
      .82
    );

  outline-offset:
    2px;

  filter:

    drop-shadow(
      0 0 6px
      rgba(
        239,
        101,
        177,
        .28
      )
    );
}


/* =========================================================
   6 MONTHS
   ========================================================= */

.v4-grade-emblem.v44-continuity-6m{

  outline:
    3px double
    rgba(
      248,
      207,
      106,
      .96
    );

  outline-offset:
    3px;

  filter:

    drop-shadow(
      0 0 7px
      rgba(
        247,
        204,
        98,
        .35
      )
    )

    drop-shadow(
      0 0 12px
      rgba(
        234,
        101,
        170,
        .20
      )
    );
}


/* =========================================================
   3M / 6M PLATE
   ========================================================= */

.v44-continuity-mark{

  position:
    absolute;

  z-index:
    8;

  right:
    -5px;

  bottom:
    -4px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    25px;

  height:
    18px;

  padding:
    0 5px;

  box-sizing:
    border-box;

  border-radius:
    999px;

  white-space:
    nowrap;

  pointer-events:
    none;

  font-family:
    Arial,
    sans-serif;

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    .06em;
}


/* 3M */

.v44-continuity-mark-3m{

  color:
    #fff;

  border:
    1px solid
    rgba(
      255,
      226,
      243,
      .92
    );

  background:
    linear-gradient(
      135deg,
      #f3a2cd 0%,
      #df69ad 50%,
      #b84787 100%
    );

  box-shadow:

    0 3px 8px
    rgba(
      81,
      32,
      67,
      .26
    ),

    0 0 7px
    rgba(
      237,
      100,
      176,
      .32
    );
}


/* 6M */

.v44-continuity-mark-6m{

  color:
    #3e3021;

  border:
    1px solid
    rgba(
      255,
      247,
      199,
      .98
    );

  background:
    linear-gradient(
      135deg,
      #fff1ad 0%,
      #e7b94f 42%,
      #f3da82 67%,
      #dc75a7 100%
    );

  box-shadow:

    0 3px 9px
    rgba(
      106,
      75,
      28,
      .30
    ),

    0 0 9px
    rgba(
      245,
      203,
      91,
      .35
    );
}


/* =========================================================
   LARGE EMBLEM
   ========================================================= */

.big-emblem
.v44-continuity-mark{

  right:
    -3px;

  bottom:
    -2px;

  min-width:
    35px;

  height:
    22px;

  padding:
    0 7px;

  font-size:
    10px;
}


/* =========================================================
   DOG TAG
   Keep badge inside existing emblem footprint.
   ========================================================= */

.dog-tag
.big-emblem
.v44-continuity-mark{

  right:
    1px;

  bottom:
    1px;

  min-width:
    30px;

  height:
    19px;

  padding:
    0 5px;

  font-size:
    8px;
}


/* =========================================================
   HISTORY
   ========================================================= */

.history-item
.mini-emblem
.v44-continuity-mark{

  right:
    -4px;

  bottom:
    -3px;

  min-width:
    23px;

  height:
    17px;

  padding:
    0 4px;

  font-size:
    7px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  .v44-continuity-mark{

    right:
      -3px;

    bottom:
      -2px;
  }


  .big-emblem
  .v44-continuity-mark{

    min-width:
      30px;

    height:
      19px;

    font-size:
      8px;
  }


  .history-item
  .mini-emblem
  .v44-continuity-mark{

    min-width:
      21px;

    height:
      16px;

    font-size:
      7px;
  }

}





/* =========================================================
   YUKINON PALMU CONTINUITY EMBLEM EXTENDED DESIGN V5.2.0

   9M
   12M
   18M
   24M

   Existing 3M / 6M styles remain unchanged.
   DOG TAG layout / flip / ribbon / chain are untouched.
   ========================================================= */


/* =========================================================
   9 MONTHS
   ROSE GOLD
   ========================================================= */

.v4-grade-emblem.v44-continuity-9m{

  outline:
    3px solid
    rgba(
      224,
      148,
      154,
      .94
    );

  outline-offset:
    3px;

  filter:

    drop-shadow(
      0 0 8px
      rgba(
        220,
        120,
        143,
        .40
      )
    )

    drop-shadow(
      0 0 14px
      rgba(
        241,
        170,
        189,
        .20
      )
    );
}


.v44-continuity-mark-9m{

  color:
    #fffaf8;

  border:
    1px solid
    rgba(
      255,
      225,
      220,
      .95
    );

  background:
    linear-gradient(
      135deg,
      #f2b2b1 0%,
      #d98791 42%,
      #b75e78 72%,
      #8e4866 100%
    );

  box-shadow:

    0 3px 10px
    rgba(
      91,
      44,
      58,
      .31
    ),

    0 0 10px
    rgba(
      228,
      131,
      150,
      .34
    );
}


/* =========================================================
   12 MONTHS
   PLATINUM GOLD
   ========================================================= */

.v4-grade-emblem.v44-continuity-12m{

  outline:
    4px double
    rgba(
      236,
      228,
      196,
      .98
    );

  outline-offset:
    3px;

  filter:

    drop-shadow(
      0 0 9px
      rgba(
        255,
        236,
        165,
        .42
      )
    )

    drop-shadow(
      0 0 15px
      rgba(
        255,
        255,
        255,
        .22
      )
    );
}


.v44-continuity-mark-12m{

  color:
    #463d2d;

  border:
    1px solid
    rgba(
      255,
      252,
      220,
      .98
    );

  background:
    linear-gradient(
      135deg,
      #fffce6 0%,
      #dfd6ad 28%,
      #f2c96d 58%,
      #dca95a 78%,
      #f2d8c7 100%
    );

  box-shadow:

    0 3px 11px
    rgba(
      92,
      74,
      41,
      .30
    ),

    0 0 11px
    rgba(
      255,
      225,
      129,
      .39
    );
}


/* =========================================================
   18 MONTHS
   RUBY MAGENTA
   ========================================================= */

.v4-grade-emblem.v44-continuity-18m{

  outline:
    4px double
    rgba(
      224,
      77,
      139,
      .98
    );

  outline-offset:
    4px;

  filter:

    drop-shadow(
      0 0 10px
      rgba(
        227,
        63,
        137,
        .46
      )
    )

    drop-shadow(
      0 0 18px
      rgba(
        140,
        58,
        157,
        .27
      )
    );
}


.v44-continuity-mark-18m{

  color:
    #fff;

  border:
    1px solid
    rgba(
      255,
      207,
      232,
      .98
    );

  background:
    linear-gradient(
      135deg,
      #ff8fc8 0%,
      #dc3b88 38%,
      #a72f7f 67%,
      #713675 100%
    );

  box-shadow:

    0 3px 12px
    rgba(
      85,
      26,
      69,
      .36
    ),

    0 0 13px
    rgba(
      232,
      58,
      142,
      .43
    );
}


/* =========================================================
   24 MONTHS
   DIAMOND / PREMIUM
   ========================================================= */

.v4-grade-emblem.v44-continuity-24m{

  outline:
    4px double
    rgba(
      225,
      248,
      255,
      .98
    );

  outline-offset:
    4px;

  filter:

    drop-shadow(
      0 0 10px
      rgba(
        180,
        237,
        255,
        .50
      )
    )

    drop-shadow(
      0 0 18px
      rgba(
        255,
        217,
        130,
        .30
      )
    )

    drop-shadow(
      0 0 24px
      rgba(
        240,
        124,
        190,
        .18
      )
    );
}


.v44-continuity-mark-24m{

  color:
    #29343d;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      1
    );

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #dff8ff 20%,
      #b9e8f5 42%,
      #f7e7a8 68%,
      #f2b5d8 100%
    );

  box-shadow:

    0 3px 13px
    rgba(
      68,
      87,
      102,
      .33
    ),

    0 0 13px
    rgba(
      196,
      239,
      255,
      .50
    ),

    0 0 20px
    rgba(
      255,
      219,
      132,
      .28
    );
}


/* =========================================================
   Long labels
   12M / 18M / 24M
   ========================================================= */

.v44-continuity-mark-12m,
.v44-continuity-mark-18m,
.v44-continuity-mark-24m{

  min-width:
    31px;

  padding-left:
    6px;

  padding-right:
    6px;
}


.big-emblem
.v44-continuity-mark-12m,
.big-emblem
.v44-continuity-mark-18m,
.big-emblem
.v44-continuity-mark-24m{

  min-width:
    40px;
}


.dog-tag
.big-emblem
.v44-continuity-mark-12m,
.dog-tag
.big-emblem
.v44-continuity-mark-18m,
.dog-tag
.big-emblem
.v44-continuity-mark-24m{

  min-width:
    34px;

  font-size:
    8px;
}


.history-item
.mini-emblem
.v44-continuity-mark-12m,
.history-item
.mini-emblem
.v44-continuity-mark-18m,
.history-item
.mini-emblem
.v44-continuity-mark-24m{

  min-width:
    27px;

  font-size:
    7px;
}





/* =========================================================
   YUKINON PALMU MONTHLY HISTORY COMPACT DESIGN V5.3.0

   Consecutive monthly history is displayed as one range.
   Does not alter DOG TAG layout or emblem dimensions.
   ========================================================= */


.v45-history-group
.v4-history-text strong{

  display:
    block;
}


/*
 * Small summary chip:
 *
 * 3か月
 * 6か月
 * 12か月
 * 24か月
 */

.v45-history-month-count{

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin-left:
    7px;

  padding:
    2px 7px;

  border:
    1px solid
    rgba(
      222,
      105,
      165,
      .22
    );

  border-radius:
    999px;

  background:
    rgba(
      246,
      226,
      238,
      .70
    );

  color:
    #9e537d;

  font-size:
    .72em;

  font-weight:
    800;

  line-height:
    1.35;

  letter-spacing:
    .02em;

  white-space:
    nowrap;
}


/*
 * Unknown-date manual history keeps its existing character.
 */

.v45-history-unknown
.v45-history-month-count{

  display:
    none;
}


@media(max-width:760px){

  .v45-history-month-count{

    margin-left:
      5px;

    padding:
      2px 6px;
  }

}





/* =========================================================
   YUKINON PALMU HISTORY EMBLEM MARK DESIGN V5.3.1

   The continuity mark must NOT be a child of mini-emblem.
   Grade emblems use clipped geometric shapes, which clipped
   the 3M / 6M / 9M / 12M / 18M / 24M label.

   This wrapper keeps the grade emblem unchanged and places
   the continuity mark outside its clip-path.
   ========================================================= */


.v451-history-emblem-wrap{

  position:
    relative;

  display:
    inline-grid;

  place-items:
    center;

  width:
    max-content;

  max-width:
    100%;

  margin-inline:
    auto;

  overflow:
    visible;

  isolation:
    isolate;
}


/*
 * Keep the original grade emblem exactly as before.
 */

.v451-history-emblem-wrap
>
.mini-emblem{

  position:
    relative;

  z-index:
    1;

  margin:
    0;
}


/*
 * Continuity emblem badge.
 *
 * Important:
 * It is now a SIBLING of mini-emblem rather than a child,
 * therefore it cannot be clipped by the grade emblem shape.
 */

.v451-history-emblem-wrap
>
.v44-continuity-mark{

  position:
    absolute !important;

  top:
    auto !important;

  left:
    auto !important;

  right:
    -18px !important;

  bottom:
    -5px !important;

  z-index:
    20 !important;

  transform:
    none !important;

  clip-path:
    none !important;

  overflow:
    visible !important;

  white-space:
    nowrap !important;

  pointer-events:
    none;
}


/*
 * HISTORY-specific size.
 * Does not affect profile / DOG TAG emblems.
 */

.history-item
.v451-history-emblem-wrap
>
.v44-continuity-mark{

  min-width:
    27px;

  padding:
    2px 5px;

  font-size:
    7px;

  line-height:
    1.15;

  text-align:
    center;
}


/*
 * Longer labels.
 */

.history-item
.v451-history-emblem-wrap
>
.v44-continuity-mark-12m,

.history-item
.v451-history-emblem-wrap
>
.v44-continuity-mark-18m,

.history-item
.v451-history-emblem-wrap
>
.v44-continuity-mark-24m{

  min-width:
    31px;

  right:
    -22px !important;
}


/*
 * Mobile keeps the mark slightly closer to the emblem.
 */

@media(max-width:760px){

  .history-item
  .v451-history-emblem-wrap
  >
  .v44-continuity-mark{

    right:
      -14px !important;

    bottom:
      -4px !important;
  }


  .history-item
  .v451-history-emblem-wrap
  >
  .v44-continuity-mark-12m,

  .history-item
  .v451-history-emblem-wrap
  >
  .v44-continuity-mark-18m,

  .history-item
  .v451-history-emblem-wrap
  >
  .v44-continuity-mark-24m{

    right:
      -18px !important;
  }

}


/* =========================================================
   YUKINON PALMU OPERATION ARCHIVE NAV V1.0.0
   ========================================================= */

.hud-tabs .history-nav{
  min-height:100%;
  min-width:max-content;

  padding:0 16px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#92848e;

  border-right:
    1px solid rgba(255,255,255,.06);

  font-family:
    Georgia,
    serif;

  font-size:8px;
  font-weight:900;
  letter-spacing:.07em;

  text-decoration:none;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.hud-tabs .history-nav:hover{
  color:#fff;

  border-color:
    rgba(240,84,162,.26);

  background:
    linear-gradient(
      180deg,
      rgba(240,84,162,.08),
      rgba(240,84,162,.015)
    );
}


@media (max-width:720px){

  .hud-tabs .history-nav{
    min-height:42px;
    padding:0 13px;
  }

}

/* YUKINON PALMU BADGE SYSTEM RESPONSIVE CONSOLIDATION V5.4.0 */

/* =========================================================
   TABLET BASE
   <= 1180px
   ========================================================= */

@media (max-width:1180px){

  html,
  body.palmu-v3{
    max-width:100%;
    overflow-x:hidden !important;
  }


  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .palmu-v3 .top-header{
    width:calc(100% - 24px) !important;

    min-width:0;
    min-height:94px;

    grid-template-columns:
      180px
      minmax(0,1fr)
      auto;

    gap:16px;

    padding:
      0 8px;
  }


  .palmu-v3 .brand{
    width:170px !important;
    max-width:100%;
  }


  .palmu-v3 .system-title{
    min-width:0;

    transform:none !important;
  }


  .palmu-v3
  .system-title small{
    font-size:10px;

    letter-spacing:.13em;
  }


  .palmu-v3
  .system-title strong{
    font-size:
      clamp(
        1.30rem,
        2.7vw,
        1.85rem
      ) !important;

    letter-spacing:.055em;

    white-space:normal;
  }


  .palmu-v3
  .system-title span{
    font-size:7px;

    letter-spacing:.13em;
  }


  .palmu-v3
  .v3-header-message{
    display:none !important;
  }


  /* -------------------------------------------------------
     HUD NAVIGATION

     HISTORY / SPECIAL FORCESを含む
     全タブを横スクロール可能にする。
     ------------------------------------------------------- */

  .palmu-v3 .hud-tabs{
    width:100%;

    min-width:0;
    min-height:48px;

    display:flex !important;

    flex-wrap:nowrap !important;

    justify-content:flex-start !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    overscroll-behavior-x:contain;
  }


  .palmu-v3
  .hud-tabs::-webkit-scrollbar{
    display:none;
  }


  .palmu-v3
  .hud-tabs button,

  .palmu-v3
  .hud-tabs
  .history-nav,

  .palmu-v3
  .hud-tabs
  .special-forces-nav{

    flex:
      0 0 auto !important;

    min-width:124px !important;

    min-height:48px !important;
    height:48px;

    padding:
      0 16px !important;

    font-size:9px !important;

    line-height:1.15 !important;

    white-space:nowrap;

    box-sizing:border-box;
  }


  .palmu-v3
  .v3-nav-brand{
    display:none !important;
  }


  /* -------------------------------------------------------
     MAIN
     ------------------------------------------------------- */

  .palmu-v3 main{
    width:
      calc(
        100% - 24px
      ) !important;

    min-width:0;
    max-width:100%;

    padding-bottom:48px;
  }


  /* -------------------------------------------------------
     SUMMARY
     ------------------------------------------------------- */

  .palmu-v3
  .summary-strip{
    width:100%;

    min-width:0;

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;
  }


  .palmu-v3
  .summary-strip article{
    min-width:0;

    min-height:82px;

    padding:
      8px 10px;
  }


  .palmu-v3
  .summary-strip article
  > div{
    min-width:0;
  }


  .palmu-v3
  .summary-strip small{
    white-space:normal;

    overflow-wrap:anywhere;
  }


  /* -------------------------------------------------------
     DASHBOARD
     ------------------------------------------------------- */

  .palmu-v3 .dashboard{
    width:100%;

    min-width:0;

    grid-template-columns:
      minmax(0,1fr)
      !important;

    gap:
      12px !important;
  }


  .palmu-v3
  .supporter-panel,

  .palmu-v3
  .profile-panel{

    width:100%;

    min-width:0;
    max-width:100%;

    min-height:0 !important;
  }


  .palmu-v3
  .profile-empty{
    min-height:220px;
  }


  /* -------------------------------------------------------
     TABLET SUPPORTERS LIST
     ------------------------------------------------------- */

  .palmu-v3
  .supporter-panel
  .list-head,

  .palmu-v3
  .supporter-panel
  .supporter-row{

    grid-template-columns:
      32px
      40px
      minmax(76px,1fr)
      minmax(170px,1.7fr)
      minmax(46px,.42fr)
      minmax(56px,.48fr)
      !important;

    column-gap:
      7px !important;
  }


  .palmu-v3
  .supporter-panel
  .supporter-row{
    min-width:0;
  }


  .palmu-v3
  .supporter-panel
  .row-name,

  .palmu-v3
  .supporter-panel
  .v41-row-badge,

  .palmu-v3
  .supporter-panel
  .row-streak,

  .palmu-v3
  .supporter-panel
  .v4-badge-number{

    min-width:
      0 !important;
  }


  .palmu-v3
  .v4-official-notice,

  .palmu-v3 footer{
    max-width:100%;
  }

}


/* =========================================================
   COMPACT TABLET
   / LARGE PHONE LANDSCAPE
   <= 900px
   ========================================================= */

@media (max-width:900px){

  .palmu-v3 .top-header{
    width:
      calc(
        100% - 16px
      ) !important;

    min-height:84px;

    grid-template-columns:
      160px
      minmax(0,1fr);

    gap:12px;

    padding:
      0 6px;
  }


  .palmu-v3 .brand{
    width:
      152px !important;
  }


  .palmu-v3
  .header-side{
    display:none !important;
  }


  .palmu-v3
  .system-title strong{
    font-size:
      clamp(
        1.05rem,
        3vw,
        1.45rem
      ) !important;
  }


  .palmu-v3
  .system-title small{
    font-size:8px;
  }


  .palmu-v3
  .system-title span{
    display:none;
  }


  .palmu-v3 main{
    width:
      calc(
        100% - 16px
      ) !important;
  }


  .palmu-v3
  .summary-strip article{
    min-height:74px;

    gap:8px;
  }


  .palmu-v3
  .summary-strip
  article > span{
    min-width:auto;

    font-size:20px;
  }


  .palmu-v3
  .summary-strip small{
    font-size:6px;
  }


  .palmu-v3
  .summary-strip strong{
    font-size:18px;
  }

}


/* =========================================================
   PHONE
   <= 760px
   ========================================================= */

@media (max-width:760px){

  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .palmu-v3 .top-header{
    width:
      calc(
        100% - 12px
      ) !important;

    min-height:
      78px !important;

    grid-template-columns:
      minmax(0,1fr)
      !important;

    gap:
      0 !important;

    padding:
      0 8px !important;
  }


  .palmu-v3 .brand{
    width:
      clamp(
        136px,
        40vw,
        156px
      ) !important;

    justify-self:start;
  }


  .palmu-v3
  .system-title,

  .palmu-v3
  .header-side,

  .palmu-v3
  .v3-header-message{

    display:none !important;
  }


  /* -------------------------------------------------------
     NAVIGATION
     ------------------------------------------------------- */

  .palmu-v3
  .hud-tabs{
    min-height:44px;
  }


  .palmu-v3
  .hud-tabs button,

  .palmu-v3
  .hud-tabs
  .history-nav,

  .palmu-v3
  .hud-tabs
  .special-forces-nav{

    min-width:
      104px !important;

    min-height:
      44px !important;

    height:44px;

    padding:
      0 12px !important;

    font-size:
      8px !important;

    letter-spacing:
      .05em !important;
  }


  /* -------------------------------------------------------
     MAIN
     ------------------------------------------------------- */

  .palmu-v3 main{
    width:
      calc(
        100% - 12px
      ) !important;

    padding:
      0 0 30px
      !important;
  }


  /* -------------------------------------------------------
     SUMMARY
     ------------------------------------------------------- */

  .palmu-v3
  .summary-strip{

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

    min-height:70px;

    margin-bottom:8px;
  }


  .palmu-v3
  .summary-strip article{

    min-height:
      70px !important;

    padding:
      7px 4px !important;

    gap:
      4px !important;

    justify-content:
      center !important;

    border-right:
      1px solid
      rgba(
        255,
        255,
        255,
        .06
      ) !important;

    border-bottom:
      0 !important;
  }


  .palmu-v3
  .summary-strip
  article:last-child{

    border-right:
      0 !important;
  }


  .palmu-v3
  .summary-strip
  article > span{

    font-size:
      17px !important;
  }


  .palmu-v3
  .summary-strip small{

    font-size:
      5.5px !important;

    line-height:1.25;

    letter-spacing:.05em;
  }


  .palmu-v3
  .summary-strip strong{

    font-size:
      16px !important;
  }


  /* -------------------------------------------------------
     DASHBOARD

     SUPPORTERS LIST
       ↓
     PROFILE
     ------------------------------------------------------- */

  .palmu-v3 .dashboard{

    display:
      flex !important;

    flex-direction:
      column !important;

    gap:
      8px !important;
  }


  .palmu-v3
  .supporter-panel{

    order:
      1 !important;
  }


  .palmu-v3
  .profile-panel{

    order:
      2 !important;

    padding:
      8px !important;
  }


  /* -------------------------------------------------------
     SUPPORTER PANEL HEADER
     ------------------------------------------------------- */

  .palmu-v3
  .supporter-panel > header{

    min-height:
      50px !important;

    padding:
      11px 10px !important;

    gap:8px;
  }


  .palmu-v3
  .supporter-panel
  header small{

    font-size:11px;
  }


  .palmu-v3
  .v32-sort{

    display:
      none !important;
  }


  /* -------------------------------------------------------
     RANK FILTER
     ------------------------------------------------------- */

  .palmu-v3
  .rank-filter{

    margin:
      6px 7px 0
      !important;

    padding:
      6px 5px
      !important;

    gap:
      5px !important;

    flex-wrap:
      nowrap !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scrollbar-width:none;

    -webkit-overflow-scrolling:
      touch;
  }


  .palmu-v3
  .rank-filter::-webkit-scrollbar{

    display:none;
  }


  .palmu-v3
  .rank-filter button{

    flex:
      0 0 auto !important;

    min-height:
      30px !important;

    padding:
      0 10px !important;

    font-size:
      8px !important;
  }


  /* -------------------------------------------------------
     SEARCH
     ------------------------------------------------------- */

  .palmu-v3
  .search-box{

    width:
      calc(
        100% - 14px
      ) !important;

    min-height:36px;

    margin:
      7px !important;
  }


  .palmu-v3
  .list-head{

    display:
      none !important;
  }


  /* -------------------------------------------------------
     MOBILE SUPPORTERS ROW

     RANK | ICON | NAME | STREAK | NUMBER
            PALMU / YUKINON
     ------------------------------------------------------- */

  .palmu-v3
  .supporter-list
  .supporter-row{

    display:
      grid !important;

    grid-template-columns:
      28px
      36px
      minmax(0,1fr)
      max-content
      max-content
      !important;

    grid-template-areas:
      "rank avatar name streak number"
      ". badge badge badge badge"
      !important;

    column-gap:
      6px !important;

    row-gap:
      7px !important;

    align-items:
      center !important;

    min-width:
      0 !important;

    min-height:
      82px !important;

    padding:
      9px 8px !important;

    overflow:hidden;
  }


  .palmu-v3
  .supporter-list
  .row-rank{

    grid-area:rank;
  }


  .palmu-v3
  .supporter-list
  .avatar{

    grid-area:avatar;

    width:34px;
    height:34px;

    min-width:34px;
  }


  .palmu-v3
  .supporter-list
  .row-name{

    grid-area:name;

    width:100%;

    min-width:0;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:10px;
  }


  .palmu-v3
  .supporter-list
  .row-streak{

    grid-area:streak;

    display:
      flex !important;

    width:
      auto !important;

    min-width:
      28px !important;

    max-width:52px;

    height:
      auto !important;

    min-height:20px;

    padding:
      0 2px !important;

    align-items:center;

    justify-content:flex-end;

    overflow:hidden;

    white-space:nowrap;

    font-size:8px;

    line-height:1;
  }


  .palmu-v3
  .supporter-list
  .v4-badge-number{

    grid-area:number;

    display:
      flex !important;

    width:
      auto !important;

    min-width:
      max-content !important;

    height:
      auto !important;

    min-height:20px;

    padding:
      0 !important;

    align-items:center;

    justify-content:flex-end;

    white-space:nowrap;

    font-size:9px;

    line-height:1;
  }


  .palmu-v3
  .supporter-list
  .v41-row-badge{

    grid-area:badge;

    display:
      grid !important;

    grid-template-columns:
      28px
      minmax(0,1fr)
      !important;

    gap:
      7px !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    min-height:30px;

    margin:
      0 !important;

    padding:
      1px 0;

    align-items:
      center !important;

    overflow:
      hidden !important;
  }


  .palmu-v3
  .supporter-list
  .v41-row-badge
  > .mini-emblem{

    width:
      28px !important;

    height:
      28px !important;

    min-width:
      28px !important;

    margin:
      0 !important;
  }


  .palmu-v3
  .supporter-list
  .v41-row-badge
  > :not(.mini-emblem){

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    overflow:
      hidden !important;
  }


  /* -------------------------------------------------------
     PAGINATION
     ------------------------------------------------------- */

  .palmu-v3
  .v32-pagination{

    min-height:48px;

    padding:
      8px 7px;

    gap:5px;

    flex-wrap:wrap;
  }


  .palmu-v3
  .v32-pagination button{

    min-width:28px;

    height:28px;

    padding:
      0 7px;
  }


  /* -------------------------------------------------------
     PROFILE
     ------------------------------------------------------- */

  .palmu-v3
  .profile-empty{

    min-height:150px;
  }


  .palmu-v3
  .status-grid,

  .palmu-v3
  .detail-grid{

    min-width:0;
  }


  .palmu-v3
  .detail-section,

  .palmu-v3
  .status-cell{

    min-width:0;
  }


  /* DOG TAG layout is intentionally untouched. */


  .palmu-v3
  .history-list{

    max-width:100%;

    overflow-x:
      auto !important;

    overflow-y:hidden;

    -webkit-overflow-scrolling:
      touch;
  }


  .palmu-v3
  .title-list{

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  .palmu-v3 footer{

    width:
      calc(
        100% - 12px
      ) !important;

    gap:8px;

    flex-wrap:wrap;
  }

}


/* =========================================================
   SMALL PHONE
   <= 430px
   ========================================================= */

@media (max-width:430px){

  .palmu-v3 .top-header{

    width:
      calc(
        100% - 8px
      ) !important;

    min-height:
      74px !important;

    padding:
      0 6px !important;
  }


  .palmu-v3 .brand{

    width:
      138px !important;
  }


  .palmu-v3 main{

    width:
      calc(
        100% - 8px
      ) !important;
  }


  .palmu-v3
  .hud-tabs button,

  .palmu-v3
  .hud-tabs
  .history-nav,

  .palmu-v3
  .hud-tabs
  .special-forces-nav{

    min-width:
      96px !important;

    padding:
      0 10px !important;

    font-size:
      7.5px !important;
  }


  .palmu-v3
  .supporter-list
  .supporter-row{

    grid-template-columns:
      26px
      34px
      minmax(0,1fr)
      max-content
      max-content
      !important;

    column-gap:
      5px !important;

    min-height:
      84px !important;

    padding:
      8px 7px !important;
  }


  .palmu-v3
  .supporter-list
  .row-name{

    font-size:9px;
  }


  .palmu-v3
  .supporter-list
  .row-streak{

    min-width:
      25px !important;

    font-size:7px;
  }


  .palmu-v3
  .supporter-list
  .v4-badge-number{

    font-size:8px;
  }


  .palmu-v3
  .supporter-list
  .v41-row-badge{

    grid-template-columns:
      26px
      minmax(0,1fr)
      !important;

    gap:
      6px !important;
  }


  .palmu-v3
  .supporter-list
  .v41-row-badge
  > .mini-emblem{

    width:
      26px !important;

    height:
      26px !important;

    min-width:
      26px !important;
  }


  .palmu-v3
  .title-list{

    grid-template-columns:
      1fr !important;
  }

}


/* =========================================================
   PHONE LANDSCAPE
   ========================================================= */

@media
  (max-width:960px)
  and
  (orientation:landscape)
{

  .palmu-v3 .top-header{

    min-height:
      66px !important;
  }


  .palmu-v3 .brand{

    width:
      140px !important;
  }


  .palmu-v3
  .system-title small,

  .palmu-v3
  .system-title span{

    display:
      none !important;
  }


  .palmu-v3
  .system-title strong{

    font-size:
      12px !important;
  }


  .palmu-v3
  .hud-tabs,

  .palmu-v3
  .hud-tabs button,

  .palmu-v3
  .hud-tabs
  .history-nav,

  .palmu-v3
  .hud-tabs
  .special-forces-nav{

    min-height:
      40px !important;

    height:40px;
  }


  .palmu-v3
  .hud-tabs button,

  .palmu-v3
  .hud-tabs
  .history-nav,

  .palmu-v3
  .hud-tabs
  .special-forces-nav{

    min-width:
      108px !important;

    padding:
      0 12px !important;

    font-size:
      8px !important;
  }


  .palmu-v3 main{

    width:
      calc(
        100% - 12px
      ) !important;
  }


  .palmu-v3
  .summary-strip article{

    min-height:
      60px !important;

    padding:
      5px 7px !important;
  }


  .palmu-v3 .dashboard{

    grid-template-columns:
      minmax(0,1fr)
      !important;
  }

}


/* =========================================================
   YUKINON PALMU BADGE BRONZE DOG TAG TEXT CONTRAST FIX V5.4.1
   ========================================================= */

/*
 * BRONZE のドッグタグ文字だけ視認性を改善。
 * レイアウト・サイズ・配置は変更しない。
 */

.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-front{
  color:
    #fff4ec;
}


/* ---------------------------------------------------------
   FRONT
   --------------------------------------------------------- */

.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-front
.tag-label,

.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-front
.tag-id,

.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-front
.tag-stat
small{
  color:
    rgba(
      255,
      239,
      227,
      .92
    )
    !important;

  text-shadow:
    0 1px 0
    rgba(
      76,
      34,
      18,
      .66
    ),

    0 0 10px
    rgba(
      255,
      223,
      195,
      .10
    );
}


.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-front
.tag-name,

.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-front
.tag-sign,

.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-front
.tag-stat
strong{
  color:
    #fff8f4
    !important;

  text-shadow:
    0 1px 0
    rgba(
      86,
      38,
      20,
      .76
    ),

    0 2px 10px
    rgba(
      0,
      0,
      0,
      .20
    );
}


.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-front
.tag-right{
  border-color:
    rgba(
      255,
      232,
      214,
      .18
    );

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(0,0,0,.05)
    );
}


/* ---------------------------------------------------------
   BACK
   --------------------------------------------------------- */

.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-back
.dog-tag-back-label,

.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-back
.dog-tag-back-sign{
  color:
    rgba(
      255,
      241,
      231,
      .82
    )
    !important;

  text-shadow:
    0 1px 0
    rgba(
      80,
      36,
      19,
      .60
    );
}


.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-back
.dog-tag-back-comment{
  color:
    #fff8f3
    !important;

  text-shadow:
    0 1px 0
    rgba(
      92,
      42,
      22,
      .72
    ),

    0 2px 12px
    rgba(
      0,
      0,
      0,
      .18
    );
}


/* =========================================================
   YUKINON PALMU BRONZE DOG TAG FLIP HINT CONTRAST FIX V5.4.2
   ========================================================= */

/*
 * BRONZE only.
 *
 * Improve visibility of:
 *
 *   CLICK / TAP TO FLIP  ↻
 *
 * No layout, sizing or flip-behavior changes.
 */

.palmu-v3
.profile-panel[data-current-rank="bronze"]
.dog-tag-flip-shell::after{

  color:
    rgba(
      255,
      235,
      223,
      .82
    )
    !important;

  text-shadow:

    0 1px 2px
    rgba(
      0,
      0,
      0,
      .78
    ),

    0 0 9px
    rgba(
      203,
      112,
      78,
      .28
    )
    !important;

}


/*
 * Slightly stronger visibility on small screens,
 * where the hint is physically smaller.
 */

@media (max-width:760px){

  .palmu-v3
  .profile-panel[data-current-rank="bronze"]
  .dog-tag-flip-shell::after{

    color:
      rgba(
        255,
        241,
        231,
        .92
      )
      !important;

    text-shadow:

      0 1px 2px
      rgba(
        0,
        0,
        0,
        .86
      ),

      0 0 8px
      rgba(
        211,
        121,
        84,
        .32
      )
      !important;

  }

}



/* Badge readability — 5.4.3 */
.palmu-v3 .badge-empty-result {
  padding: 28px 16px;
  color: #e9dbe6;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 760px) {
  .palmu-v3 .hud-tabs button,
  .palmu-v3 .hud-tabs a { font-size: 11px !important; }
  .palmu-v3 .supporter-panel > header { flex-wrap: wrap; }
  .palmu-v3 .v32-sort {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
  }
  .palmu-v3 .v32-sort select {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    font-size: 16px !important;
  }
  .palmu-v3 .rank-filter { flex-wrap: wrap !important; }
  .palmu-v3 .rank-filter button {
    min-height: 44px !important;
    font-size: 12px !important;
    flex: 1 0 48px !important;
  }
  .palmu-v3 .search-box { min-height: 48px; }
  .palmu-v3 .search-box input {
    min-height: 44px;
    font-size: 16px !important;
    min-width: 0;
  }
  .palmu-v3 .supporter-list .supporter-row {
    grid-template-columns: 26px 36px minmax(0,1fr) auto !important;
    grid-template-areas: "rank avatar name name" ". . streak number" ". badge badge badge" !important;
  }
  .palmu-v3 .supporter-list .row-name {
    font-size: 14px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.6;
  }
  .palmu-v3 .supporter-list .row-streak,
  .palmu-v3 .supporter-list .v4-badge-number { font-size: 12px !important; }
  .palmu-v3 .v41-rank-line strong { font-size: 12px !important; }
  .palmu-v3 .v41-rank-line small { font-size: 10px !important; }
  .palmu-v3 [data-page] { min-width: 44px; min-height: 44px; }
}

/* Title cards: preserve readable labels on narrow screens. */
.palmu-v3 .special-title > div { min-width: 0; }
.palmu-v3 .special-title strong {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .palmu-v3 .v4-detail-grid > .detail-section {
    grid-column: 1 / -1 !important;
  }
  .palmu-v3 .v4-detail-grid .title-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .palmu-v3 .special-title strong {
    font-size: 12px !important;
    line-height: 1.5;
  }
}