*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    min-height: 100%;
    font-size: 62.5%;
}

body {
    font-family: sans-serif;
    background-image:url(colorful.jpg);
    padding: 0;
    min-height: 100%;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 1.6rem;
}

a {
    text-decoration: none;
}


/* Header */

.headerImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    width: 80%;
    box-shadow: 3px 3px 10px #615700e0;
}

.headerTitle {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: linear-gradient( -225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
    /* Change the colors above depending on the event*/
    box-shadow: 3px 3px 10px #6fc9d9;
    text-align: center;
    font-size: 4.4rem;
    color: #f7f5f5;
    text-shadow: 0px 2px 2px #092fb8;
    padding: 0.3rem;
    border-radius: 3rem;
    font-weight: 800;
    width: 100%;
    background-size: 200% 100%;
    animation: rankAnimation 12s ease-in-out infinite;
}

.image {
    width: 100%;
    height: 0;
    background-image: url('image1.png'); 
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: calc((420 / 1200) * 100%);
  }

.image2 {
    width: 100%;
    height: 0;
    background-image: url('image2.png'); 
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: calc((420 / 1200) * 100%);
  }

.image3 {
    width: 100%;
    height: 0;
    background-image: url('image3.png'); 
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: calc((420 / 1200) * 100%);
  }

/* Fonts */

.kuroi {
    font-family: sans-serif;
    margin: 0 1rem;
    font-size: 3rem;
    color: #000000;
    font-weight: 600;
    text-align: center;
}

.infotab {
    margin: 1rem 0;
    font-size: 3rem;
    border: 1px solid #dedede;
    background: linear-gradient( -72deg, #dedede, #ffffff 16%, #dedede 21%, #ffffff 24%, #454545 27%, #dedede 36%, #ffffff 45%, #ffffff 60%, #dedede 72%, #ffffff 80%, #dedede 84%, #a1a1a1);
    text-align: center;
    color: #000000;
    text-shadow: 1px 1px 3px #ffffff;
    box-shadow: 2px 2px 0.5em rgba(255, 255, 255, 0.55), inset 1px 1px 0 rgba(255, 255, 255, 0.9), inset -1px -1px 0 rgba(0, 0, 0, 0.34);
    font-weight: 600;
}

.higlight1 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 0 auto;
    text-align: center;
    text-shadow: 1px 1px 0px #ffd90073;
    font-size: 4rem;
    background: linear-gradient( -72deg, #5a4a00, 16%, #5a4a00 21%, 24%, #452100 27%, #5a4a00 60%, #5a4a00 80%, #ffde45 84%, #452100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bolder;
    background-size: 500% 100%;
    animation: rankAnimation 6s ease-in-out infinite;
}

.higlight2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 0 auto;
    text-align: center;
    text-shadow: 1px 1px 0px #ffd90073;
    font-size: 4rem;
    background: linear-gradient( -72deg, #452100, 16%, #452100 21%, 24%, #452100 27%, #452100 60%, #452100 80%, #452100 84%, #452100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    animation: rankAnimation 6s ease-in-out infinite;
}

.higlight3 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 0 auto;
    text-align: center;
    font-size: 4rem;
    background: linear-gradient( -72deg, #313131, #313131 16%, #a1a1a1 21%, #313131 24%, #a1a1a1 27%, #a1a1a1 36%, #313131 45%, #313131 60%, #313131 72%, #a1a1a1 80%, #313131 84%, #a1a1a1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    margin-top: 2rem;
    animation: rankAnimation 6s ease-in-out infinite;
}

.higlight4 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 0 auto;
    text-align: center;
    font-size: 4rem;
    background: linear-gradient( -72deg, #11005a, 16%, #0078b8 21%, 24%, #11005a 27%, #0078b8 60%, #11005a 80%, #0078b8 84%, #0078b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    margin-top: 2rem;
    animation: rankAnimation 6s ease-in-out infinite;
}

.higlightBig {
    font-size: 5rem;
    font-weight: bolder;
}

.justify {
    text-align: justify;
}

.chuui {
    text-align: center;
    background: transparent;
    color: #ff0808;
    font-size: 3rem;
    font-weight: 900;
    padding-bottom: 2rem;
    margin-bottom: 0;
    animation-name: chuui;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes chuui {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

.chuuiText {
    font-size: 3rem;
    color: #690000;
    text-align: justify;
    margin: auto 1rem;
}

.purastaff {
    text-align: center;
    margin-right: 5rem;
    font-size: 2rem;
    color: #000000;
    font-weight: bold;
}


/* Points */

.rank {
    margin: 0.5rem;
    font-size: 3.8rem;
    color: #000;
    font-weight: 600;
    padding: 0.2rem 0rem;
    border-radius: 2rem;
    position: relative;
}

.point {
    color: #000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-content: flex-end;
    position: absolute;
    right: 1rem;
    top: 0;
    align-self: flex-end;
}

span.user {
    font-weight: 900;
    color: #000000;
    text-shadow: 1px 1px 3px #ffffff;
    margin-left: 4rem;
}

.gold {
    text-shadow: 1px 1px 2px #dedede;
    box-shadow: 2px 2px 0.5em #7a37228c, inset 1px 1px 0 #ffde45, inset -1px -1px 0 #00000080;
    border: 1px solid #b39200;
    background: linear-gradient( -72deg, #ffde45, #f3e08d 16%, #ffde45 21%, #ffffff 24%, #452100 27%, #ffde45 36%, #f3e08d 45%, #ffffff 60%, #ffde45 72%, #ffffff 80%, #ffde45 84%, #452100);
    background-size: 500% 100%;
    animation: rankAnimation 24s ease-in-out infinite;
    margin: 0.5rem 0;
}

.silver {
    text-shadow: 1px 1px 2px #dedede;
    box-shadow: 2px 2px 0.5em #7a37228c, inset 1px 1px 0 #dedeff, inset -1px -1px 0 #00000080;
    border: 1px solid #a0a0a0;
    background: linear-gradient( -72deg, #dedeff, #ffffff 16%, #dedeff 21%, #ffffff 24%, #555564 27%, #dedeff 36%, #ffffff 45%, #ffffff 60%, #dedeff 72%, #ffffff 80%, #dedeff 84%, #555564);
    background-size: 500% 100%;
    animation: rankAnimation 24s ease-in-out infinite;
    margin: 0.5rem 0;
}

.bronze {
    text-shadow: 1px 1px 2px #dedede;
    box-shadow: 2px 2px 0.5em #7a37228c, inset 1px 1px 0 #ca7345, inset -1px -1px 0 #00000080;
    border: 1px solid #dea173;
    background: linear-gradient( -72deg, #ca7345, #ca7345 21%, #ffdeca 24%, #ca7345 27%, #dfa687 36%, #ffdeca 45%, #ffdeca 60%, #dfa687 72%, #ffdeca 80%, #ca7345 84%, #ca7345);
    background-size: 500% 100%;
    animation: rankAnimation 24s ease-in-out infinite;
    margin: 0.5rem 0;
}

.normal {
    color: #000000;
    text-shadow: 1px 1px 0 #ffffff;
    background-image: url("ranking");
    box-shadow: 2px 0px 4px #d1e2eb, inset 1px 1px 0 #ffffff, inset -1px -1px 0 #ffffff;
    border: 1px solid #d3f1ff;
    background: linear-gradient( -72deg, #fff, #fff 21%, #d1e2eb 24%, #fff 27%, #fff 36%, #d1e2eb 45%, #fff 60%, #d1e2eb 72%, #fff 80%, #fff 84%, #fff);
    background-size: 500% 100%;
    animation: rankAnimation 48s ease-in-out infinite;
    border: 1px solid #cccccc;
    margin: auto 1.5rem;
}

.rankfirst {
    border-radius: 5rem 2rem 5rem;
    background-size: 1200% 1200%;
    animation: rankAnimation 18s ease-in-out infinite;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

@keyframes rankAnimation {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

.tabcontent {
    display: none;
}

.arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.arrowimg {
    width: 20%;
}


/* Responsive */

/* Responsive (fixed) */
@media (max-width: 768px) {
  .headerImage { width: 80%; }
  .headerTitle { font-size: 3rem; }
  .kuroi { font-size: 2rem; }
  .infotab { font-size: 2.6rem; }
  .chuuiText { font-size: 2rem; }
  .chuui { font-size: 2.6rem; }
  .higlight1, .higlight2, .higlight3 { font-size: 2.4rem; }
  .higlight4 { font-size: 3rem; }
  .rank { font-size: 2rem; }
  .point { font-size: 2rem; }
  .fixed-header .b-back-button img { height: 30px; }
  .fixed-header .logo-center img { height: 40px; }
}

@media (min-width: 769px) {
  .points { margin: 0 auto; width: 50%; }
}

/* =========================================================
   Cosmic Luxury Theme (space + glow + metallic)
   ========================================================= */

:root{
  --bg-deep-1:#040414;
  --bg-deep-2:#0b0f2a;
  --bg-nebula-1:#1b1f4a;
  --accent-cyan:#7df9ff;
  --accent-violet:#9d7bff;
  --accent-gold:#ffd86f;
  --text-soft:#e9ecff;
}

body{
  color: var(--text-soft);
  background:
    radial-gradient(circle at 20% 10%, rgba(125,249,255,0.10) 0%, rgba(125,249,255,0.00) 45%),
    radial-gradient(circle at 80% 0%, rgba(157,123,255,0.14) 0%, rgba(157,123,255,0.00) 55%),
    radial-gradient(circle at 60% 80%, rgba(255,216,111,0.08) 0%, rgba(255,216,111,0.00) 55%),
    linear-gradient(180deg, var(--bg-nebula-1) 0%, var(--bg-deep-1) 55%, #000 100%);
  background-attachment: fixed;
}

/* starfield overlay (no image needed) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.9) 60%, transparent 61%),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.7) 60%, transparent 61%),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.6) 60%, transparent 61%),
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.8) 60%, transparent 61%),
    radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,0.7) 60%, transparent 61%),
    radial-gradient(2px 2px at 15% 60%, rgba(125,249,255,0.35) 60%, transparent 61%),
    radial-gradient(2px 2px at 85% 40%, rgba(157,123,255,0.35) 60%, transparent 61%);
  opacity: 0.75;
  filter: drop-shadow(0 0 6px rgba(125,249,255,0.12));
  animation: starDrift 40s linear infinite;
}
@keyframes starDrift{
  0%{ transform: translateY(0px); }
  100%{ transform: translateY(-40px); }
}

/* Fixed header */
.fixed-header{
  background: linear-gradient(90deg, var(--bg-deep-2), var(--bg-nebula-1));
  border-bottom: 1px solid rgba(125,249,255,0.35);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 18px rgba(125,249,255,0.18);
  backdrop-filter: blur(6px);
}

/* Titles / tabs */
.headerTitle{
  background: linear-gradient(120deg, var(--accent-cyan), var(--accent-violet), var(--accent-gold));
  box-shadow: 0 0 24px rgba(125,249,255,0.22), 0 0 22px rgba(157,123,255,0.16);
  text-shadow:
    0 0 10px rgba(125,249,255,0.65),
    0 0 18px rgba(157,123,255,0.40),
    0px 2px 2px rgba(0,0,0,0.35);
}

.infotab{
  border: 1px solid rgba(125,249,255,0.45);
  color: #ffffff;
  text-shadow: 0 0 8px rgba(125,249,255,0.25);
  background: linear-gradient(90deg, rgba(125,249,255,0.18), rgba(157,123,255,0.32));
  box-shadow: 0 0 18px rgba(125,249,255,0.18);
}

.kuroi{
  color: var(--text-soft);
}

/* Highlight text becomes cosmic gold */
.higlight1{
  text-shadow: 0 0 10px rgba(255,216,111,0.25);
  background: linear-gradient(90deg, var(--accent-gold), #fff3b0, var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ranking cards: metallic + glass */
.rankfirst{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(125,249,255,0.18);
  box-shadow: 0 0 22px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
}

.rank{
  color: #ffffff;
  text-shadow: 0 0 10px rgba(125,249,255,0.12);
}

.point{
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0,0,0,0.45);
}

/* podium styles */
.gold{
  border: 1px solid rgba(255,216,111,0.75);
  background: linear-gradient(135deg, #ffd86f, #fff3b0 35%, #bfa24a 100%);
  box-shadow:
    0 0 18px rgba(255,216,111,0.45),
    inset 0 0 10px rgba(255,255,255,0.55);
}

.silver{
  border: 1px solid rgba(210,220,255,0.75);
  background: linear-gradient(135deg, #dedeff, #ffffff 40%, #7d87a8 100%);
  box-shadow:
    0 0 18px rgba(210,220,255,0.35),
    inset 0 0 10px rgba(255,255,255,0.50);
}

.bronze{
  border: 1px solid rgba(255,196,166,0.75);
  background: linear-gradient(135deg, #ca7345, #ffdeca 45%, #7a3e24 100%);
  box-shadow:
    0 0 18px rgba(255,196,166,0.30),
    inset 0 0 10px rgba(255,255,255,0.45);
}

.normal{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(125,249,255,0.25);
  box-shadow:
    0 0 14px rgba(125,249,255,0.12),
    inset 0 0 12px rgba(255,255,255,0.12);
  backdrop-filter: blur(7px);
  text-shadow: none;
  margin: 0.5rem 0;
}

/* attention text */
.chuuiText{
  color: #ffd2d2;
}
.chuui{
  color: #ff5b5b;
  text-shadow: 0 0 10px rgba(255,91,91,0.25);
}

/* =========================================================
   Cosmic Luxury (V2) — extra glow + more stars
   Additive overrides (safe to append)
   ========================================================= */

/* Slightly darker + more contrast for neon glow */
:root{
  --cosmic-bg-1:#060314;
  --cosmic-bg-2:#0b0f2a;
  --cosmic-bg-3:#1a0b3d;
  --neon-cyan: 125,249,255;
  --neon-violet: 157,123,255;
  --neon-gold: 255,216,111;
}

/* Stronger cosmic background and fixed parallax feel */
body{
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(157,123,255,.28), transparent 55%),
    radial-gradient(900px 700px at 80% 10%, rgba(125,249,255,.22), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(255,216,111,.12), transparent 60%),
    radial-gradient(circle at top, #1b1f4a 0%, #050510 55%),
    linear-gradient(180deg, var(--cosmic-bg-3) 0%, var(--cosmic-bg-1) 60%, #02010a 100%);
  background-attachment: fixed;
  color:#eef0ff;
}

/* STARFIELD: multiple layers + twinkle */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

/* Base star dust: lots of tiny stars */
body::before{
  opacity:.95;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 1.2px) 0 0/70px 70px,
    radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.2px) 30px 40px/95px 95px,
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.2px) 10px 20px/55px 55px,
    radial-gradient(circle, rgba(125,249,255,.35) 1px, transparent 1.2px) 20px 10px/110px 110px,
    radial-gradient(circle, rgba(157,123,255,.30) 1px, transparent 1.2px) 60px 30px/130px 130px;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.35));
  animation: starDrift 80s linear infinite, twinkle 6s ease-in-out infinite;
}

/* Bigger stars + soft nebula haze */
body::after{
  opacity:.75;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 1.6px, transparent 2.2px) 0 0/220px 220px,
    radial-gradient(circle, rgba(255,255,255,.75) 1.4px, transparent 2.0px) 110px 60px/260px 260px,
    radial-gradient(circle at 30% 25%, rgba(125,249,255,.16), transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(157,123,255,.18), transparent 60%),
    radial-gradient(circle at 50% 75%, rgba(255,216,111,.10), transparent 60%);
  filter: blur(.2px);
  animation: starDrift 140s linear infinite reverse, twinkle2 9s ease-in-out infinite;
}

@keyframes starDrift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-120px,-180px,0); }
}
@keyframes twinkle{
  0%,100%{ opacity:.85; }
  50%{ opacity:1; }
}
@keyframes twinkle2{
  0%,100%{ opacity:.55; }
  50%{ opacity:.85; }
}

/* Make key blocks feel like glowing glass */
.rankfirst,
.rank,
.infotab,
.headerTitle{
  isolation:isolate;
}

/* Header title: stronger neon + subtle bloom */
.headerTitle{
  background: linear-gradient(120deg,
    rgba(var(--neon-cyan),1),
    rgba(var(--neon-violet),1),
    rgba(var(--neon-gold),1)
  ) !important;
  background-size: 220% 120% !important;
  text-shadow:
    0 0 8px rgba(var(--neon-cyan),.75),
    0 0 16px rgba(var(--neon-violet),.60),
    0 0 28px rgba(var(--neon-gold),.35),
    0 2px 2px rgba(0,0,0,.55) !important;
  box-shadow:
    0 0 12px rgba(var(--neon-cyan),.35),
    0 0 26px rgba(var(--neon-violet),.30),
    0 0 40px rgba(var(--neon-gold),.18) !important;
  border: 1px solid rgba(255,255,255,.18);
}

/* Section tabs: sci-fi panel + more glow */
.infotab{
  color:#fff !important;
  border: 1px solid rgba(var(--neon-cyan),.55) !important;
  background:
    linear-gradient(90deg,
      rgba(var(--neon-cyan),.18),
      rgba(var(--neon-violet),.28),
      rgba(var(--neon-cyan),.14)
    ) !important;
  box-shadow:
    0 0 14px rgba(var(--neon-cyan),.35),
    0 0 30px rgba(var(--neon-violet),.22),
    inset 0 0 12px rgba(255,255,255,.10) !important;
  text-shadow: 0 0 10px rgba(var(--neon-cyan),.35) !important;
}

/* Glass cards */
.rankfirst{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 0 18px rgba(var(--neon-cyan),.18),
    0 0 42px rgba(var(--neon-violet),.14),
    inset 0 0 18px rgba(255,255,255,.08) !important;
  backdrop-filter: blur(8px);
}

/* Stronger glow for top ranks */
.gold, .silver, .bronze{
  position:relative;
  overflow:hidden;
}
.gold{
  box-shadow:
    0 0 18px rgba(var(--neon-gold),.65),
    0 0 42px rgba(var(--neon-gold),.22),
    inset 0 0 14px rgba(255,255,255,.38) !important;
}
.silver{
  box-shadow:
    0 0 16px rgba(220,220,255,.55),
    0 0 40px rgba(var(--neon-cyan),.16),
    inset 0 0 14px rgba(255,255,255,.34) !important;
}
.bronze{
  box-shadow:
    0 0 16px rgba(202,115,69,.55),
    0 0 40px rgba(var(--neon-violet),.14),
    inset 0 0 14px rgba(255,255,255,.22) !important;
}

/* Add a moving sheen */
.gold::after, .silver::after, .bronze::after, .normal::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:180%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  filter: blur(1px);
  animation: sheen 5.5s ease-in-out infinite;
  opacity:.65;
}
.normal{
  position:relative;
  overflow:hidden;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(var(--neon-cyan),.25) !important;
  box-shadow:
    0 0 10px rgba(var(--neon-cyan),.16),
    inset 0 0 10px rgba(255,255,255,.10) !important;
  backdrop-filter: blur(7px);
}
@keyframes sheen{
  0%{ transform: translateX(0) rotate(20deg); opacity:.0; }
  15%{ opacity:.55; }
  35%{ opacity:.12; }
  100%{ transform: translateX(340%) rotate(20deg); opacity:0; }
}

/* Make highlight text glow more */
.higlight1, .higlight2, .higlight3, .higlight4{
  text-shadow:
    0 0 10px rgba(var(--neon-gold),.18),
    0 0 14px rgba(var(--neon-cyan),.22) !important;
}

/* Fixed header: deeper space + neon edge */
.fixed-header{
  background: linear-gradient(90deg, #050510, #0b0f2a, #12083a) !important;
  border-bottom: 1px solid rgba(var(--neon-cyan),.35) !important;
  box-shadow: 0 0 20px rgba(var(--neon-cyan),.25) !important;
}

/* Keep text readable */
.kuroi, .chuuiText, .purastaff{
  color:#eef0ff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.chuui{
  text-shadow: 0 0 12px rgba(255,30,30,.35);
}

/* Reduce glare on small screens */
@media (max-width:768px){
  .headerTitle{
    text-shadow:
      0 0 6px rgba(var(--neon-cyan),.55),
      0 0 12px rgba(var(--neon-violet),.45),
      0 0 18px rgba(var(--neon-gold),.25) !important;
  }
}

.rank.gold,
.rank.silver,
.rank.bronze {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.85),   /* 文字下の影 */
    0 0 6px rgba(0,0,0,0.45),    /* 輪郭補助 */
    0 0 10px rgba(255,255,255,0.35); /* 既存の輝きと馴染ませる */
}

/* =========================================================
   Cosmic Luxury (V3) — background performance upgrade
   (1) Parallax star movement (2) Richer twinkle (3) Shooting star
   ========================================================= */

/* (1) Star parallax: far layer slow, near layer faster */
body::before{
  animation:
    starMoveSlow 120s linear infinite,
    twinkle 6s ease-in-out infinite !important;
}

body::after{
  animation:
    starMoveFast 60s linear infinite,
    twinkle2 9s ease-in-out infinite !important;
}

/* Use translate for drift to keep it lightweight */
@keyframes starMoveSlow{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-200px, 300px, 0); }
}
@keyframes starMoveFast{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-400px, 600px, 0); }
}

/* (2) Twinkle feels more "alive" */
@keyframes twinkle{
  0%,100%{ opacity: 0.60; }
  50%    { opacity: 1.00; }
}
@keyframes twinkle2{
  0%,100%{ opacity: 0.40; }
  50%    { opacity: 0.85; }
}

/* (3) Shooting star layer (separate pseudo element so it doesn't conflict) */
html::before{
  content:"";
  position: fixed;
  /* big canvas so the streak can start off-screen */
  inset: -40%;
  pointer-events: none;
  z-index: -1;

  /* A thin, bright streak with soft tail */
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 46%,
      rgba(255,255,255,0.95) 50%,
      rgba(255,255,255,0) 54%,
      rgba(255,255,255,0) 100%);
  background-size: 260px 2px;
  background-repeat: no-repeat;

  filter: drop-shadow(0 0 8px rgba(255,255,255,.55))
          drop-shadow(0 0 16px rgba(125,249,255,.25));
  opacity: 0;

  animation: shootingStar 14s linear infinite;
}

/* Mostly hidden, appears briefly, then disappears */
@keyframes shootingStar{
  0%   { opacity: 0; transform: translate3d(-35%, -25%, 0); }
  6%   { opacity: 0; }
  10%  { opacity: 1; }
  18%  { opacity: 0; transform: translate3d(35%, 30%, 0); }
  100% { opacity: 0; transform: translate3d(35%, 30%, 0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before, body::after, html::before{ animation: none !important; }
}

/* =========================================================
   Cosmic Luxury (V4) — Aurora & Nebula layer + Shooting star polish
   ========================================================= */

/* Aurora / Nebula glow layer */
html::after{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -2;

  background:
    radial-gradient(circle at 20% 30%, rgba(125,249,255,.18), transparent 55%),
    radial-gradient(circle at 70% 25%, rgba(157,123,255,.22), transparent 60%),
    radial-gradient(circle at 50% 70%, rgba(255,216,111,.14), transparent 60%),
    linear-gradient(120deg,
      rgba(125,249,255,.10),
      rgba(157,123,255,.12),
      rgba(125,249,255,.10)
    );

  filter: blur(40px);
  opacity: .9;
  animation: auroraFlow 40s ease-in-out infinite;
}

@keyframes auroraFlow{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-6%, 4%, 0) scale(1.05); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* Enhance shooting star brightness slightly */
html::before{
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.75))
    drop-shadow(0 0 24px rgba(125,249,255,.45)) !important;
}

/* Reduce aurora on small screens for readability */
@media (max-width:768px){
  html::after{
    opacity: .6;
    filter: blur(32px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html::after{ animation: none !important; }
}

/* =========================================================
   FIX: Shooting star visibility
   - html::before was behind body background in some browsers.
   - Put it at z-index:0 and lift page content above it.
   ========================================================= */

body{
  position: relative;
}
body > *{
  position: relative;
  z-index: 1;
}

/* Put shooting star above backgrounds but below content */
html::before{
  z-index: 0 !important;
  mix-blend-mode: screen;
  animation: shootingStar 9s linear infinite !important;
}

/* More noticeable pass */
@keyframes shootingStar{
  0%   { opacity: 0; transform: translate3d(-45%, -35%, 0); }
  55%  { opacity: 0; }
  60%  { opacity: 1; }
  75%  { opacity: 0; transform: translate3d(45%, 35%, 0); }
  100% { opacity: 0; transform: translate3d(45%, 35%, 0); }
}

/* =========================================================
   BONUS: #1 Aura Boost — circular energy behind 1st place only
   Applies to the first .rank.gold in each ranking list.
   ========================================================= */

.rank.gold{
  position: relative;
  overflow: hidden;
}

/* Circular energy ring + glow (behind content) */
.rank.gold:first-child::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:-1;
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.22) 0%,
      rgba(255,216,111,.28) 22%,
      rgba(125,249,255,.16) 40%,
      rgba(157,123,255,.12) 55%,
      rgba(0,0,0,0) 72%),
    conic-gradient(from 0deg,
      rgba(125,249,255,.0),
      rgba(125,249,255,.35),
      rgba(157,123,255,.15),
      rgba(255,216,111,.40),
      rgba(125,249,255,.0)
    );
  filter: blur(1px);
  opacity: .95;

  animation: auraPulse 2.8s ease-in-out infinite, auraSpin 10s linear infinite;
}

/* Soft bloom to sell the "energy" */
.rank.gold:first-child::after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-1;
  border-radius: 999px;
  background: radial-gradient(circle,
    rgba(255,216,111,.22) 0%,
    rgba(125,249,255,.12) 40%,
    rgba(157,123,255,.10) 58%,
    rgba(0,0,0,0) 72%);
  filter: blur(10px);
  opacity:.75;
  animation: auraPulse 2.8s ease-in-out infinite;
}

@keyframes auraPulse{
  0%,100%{ transform: scale(0.98); opacity: .65; }
  50%    { transform: scale(1.04); opacity: 1.00; }
}
@keyframes auraSpin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

/* If the list order changes, you can target the first place explicitly by adding a class, e.g. .firstPlaceAura */

/* =========================================================
   OPTION: Stop star "flow" and switch to twinkle-only
   ========================================================= */

/* Stars stop drifting; only blink/twinkle */
body::before{
  animation: twinkle 6s ease-in-out infinite !important;
  transform: none !important;
}
body::after{
  animation: twinkle2 9s ease-in-out infinite !important;
  transform: none !important;
}

/* A slightly more organic blink (still subtle) */
@keyframes twinkle{
  0%,100%{ opacity: 0.55; }
  20%    { opacity: 0.80; }
  45%    { opacity: 0.62; }
  70%    { opacity: 1.00; }
  85%    { opacity: 0.68; }
}
@keyframes twinkle2{
  0%,100%{ opacity: 0.35; }
  25%    { opacity: 0.55; }
  50%    { opacity: 0.42; }
  78%    { opacity: 0.85; }
  92%    { opacity: 0.50; }
}

/* =========================================================
   BOOST: Extra-visible star twinkle (high contrast)
   ========================================================= */

/* Far stars: very clear blinking */
body::before{
  animation: twinkleStrong 3.5s ease-in-out infinite !important;
}

/* Near stars: slower but deeper pulse */
body::after{
  animation: twinkleStrongSlow 6s ease-in-out infinite !important;
}

/* Strong twinkle keyframes */
@keyframes twinkleStrong{
  0%   { opacity: 0.15; }
  20%  { opacity: 0.35; }
  40%  { opacity: 0.90; }
  55%  { opacity: 0.25; }
  70%  { opacity: 1.00; }
  85%  { opacity: 0.30; }
  100% { opacity: 0.15; }
}

@keyframes twinkleStrongSlow{
  0%   { opacity: 0.10; }
  30%  { opacity: 0.40; }
  50%  { opacity: 1.00; }
  70%  { opacity: 0.35; }
  100% { opacity: 0.10; }
}

/* =========================================================
   FINAL ADD: Shooting Star (works with twinkle-only stars)
   ========================================================= */

/* Shooting star layer */
html::before{
  content:"";
  position: fixed;
  inset: -40%;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,0.95) 50%,
      rgba(255,255,255,0) 55%,
      rgba(255,255,255,0) 100%);
  background-size: 320px 2px;
  background-repeat: no-repeat;

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.9))
    drop-shadow(0 0 22px rgba(125,249,255,.6))
    drop-shadow(0 0 36px rgba(157,123,255,.35));

  opacity: 0;
  animation: shootingStarFinal 10s linear infinite;
}

/* Ensure content stays above shooting star */
body{
  position: relative;
}
body > *{
  position: relative;
  z-index: 1;
}

@keyframes shootingStarFinal{
  0%   { opacity: 0; transform: translate3d(-45%, -30%, 0); }
  55%  { opacity: 0; }
  60%  { opacity: 1; }
  75%  { opacity: 0; transform: translate3d(45%, 35%, 0); }
  100% { opacity: 0; transform: translate3d(45%, 35%, 0); }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  html::before{ animation: none !important; }
}

/* =========================================================
   FIX v4_6: Shooting star is hard to see / not moving
   - Use background-position animation (more reliable than moving the whole layer)
   - Thicker streak + longer visible window
   - Ensure this override wins (placed at end + !important)
   ========================================================= */

/* Keep content above */
body{ position: relative; }
body > *{ position: relative; z-index: 1; }

/* Rebuild shooting star */
html::before{
  content:"" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mix-blend-mode: screen;

  /* Two-layer streak: bright core + soft tail */
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.0) 35%,
      rgba(255,255,255,0.95) 50%,
      rgba(255,255,255,0.0) 65%,
      rgba(255,255,255,0) 100%) ,
    linear-gradient(90deg,
      rgba(125,249,255,0) 0%,
      rgba(125,249,255,0.0) 40%,
      rgba(125,249,255,0.55) 50%,
      rgba(125,249,255,0.0) 60%,
      rgba(125,249,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 520px 3px, 760px 7px;

  /* start offscreen */
  background-position: -60vw 15vh, -70vw 15vh;

  filter:
    drop-shadow(0 0 14px rgba(255,255,255,.95))
    drop-shadow(0 0 30px rgba(125,249,255,.70))
    drop-shadow(0 0 46px rgba(157,123,255,.35));
  opacity: 0;

  /* Rotate the whole layer so the streak travels diagonally */
  transform: rotate(18deg);
  transform-origin: 50% 50%;

  animation: shootingStarPos 7.5s linear infinite !important;
}

@keyframes shootingStarPos{
  /* hidden for a while */
  0%   { opacity: 0; background-position: -60vw 15vh, -70vw 15vh; }
  50%  { opacity: 0; }
  /* show and traverse */
  55%  { opacity: 1; }
  78%  { opacity: 0; background-position: 160vw 85vh, 170vw 85vh; }
  100% { opacity: 0; background-position: 160vw 85vh, 170vw 85vh; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html::before{ animation: none !important; opacity: 0 !important; }
}


/* =========================================================
   FINAL FIX: Shooting Star Position (single source of truth)
   ========================================================= */

/* Shooting star (top area, clearly visible) */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;

  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,0.95) 50%,
      rgba(255,255,255,0) 65%,
      rgba(255,255,255,0) 100%),
    linear-gradient(90deg,
      rgba(125,249,255,0) 0%,
      rgba(125,249,255,0) 40%,
      rgba(125,249,255,0.6) 50%,
      rgba(125,249,255,0) 60%,
      rgba(125,249,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 520px 3px, 820px 8px;

  filter:
    drop-shadow(0 0 16px rgba(255,255,255,.95))
    drop-shadow(0 0 34px rgba(125,249,255,.75))
    drop-shadow(0 0 54px rgba(157,123,255,.45));

  opacity: 0;
  transform: rotate(22deg);
  transform-origin: 50% 50%;

  animation: shootingStarFinalPos 7s linear infinite;
}

/* keep content above */
body{ position: relative; }
body > *{ position: relative; z-index: 1; }

/* reduced motion support */
@media (prefers-reduced-motion: reduce){
  html::before{ animation: none !important; opacity: 0 !important; }
}

@keyframes shootingStarFinalPos{
  0%   { opacity: 0; background-position: -60vw 1.5vh, -70vw 2.5vh; }
  45%  { opacity: 0; }
  52%  { opacity: 1; }
  80%  { opacity: 0; background-position: 160vw 14vh, 170vw 14vh; }
  100% { opacity: 0; background-position: 160vw 14vh, 170vw 14vh; }
}

/* =========================================================
   TUNE: Shooting star MUCH higher (decisive override)
   - Moves the whole layer up with translateY to avoid "rotation makes it look lower"
   - Uses unique keyframes name so nothing else can override it accidentally
   ========================================================= */

html::before{
  /* lift the entire layer upward */
  transform: translateY(-18vh) rotate(22deg) !important;

  /* also lift the path itself */
  animation: shootingStarUltraHigh 7s linear infinite !important;
}

@keyframes shootingStarUltraHigh{
  0%   { opacity: 0; background-position: -60vw 0vh,  -70vw 0vh; }
  45%  { opacity: 0; }
  52%  { opacity: 1; }
  80%  { opacity: 0; background-position: 160vw 10vh, 170vw 10vh; }
  100% { opacity: 0; background-position: 160vw 10vh, 170vw 10vh; }
}