/* polish: section backdrops + dividers, ranking podium, big footer, RO cursor, BGM button, 3D tilt, page transitions.
   Loaded after motion.css; behaviour in polish.js. Remove its <link>/<script> in inc/bootstrap.php to turn it off. */

/* ---------- page transitions (browsers with cross-document view transitions; others just load normally) ---------- */
@view-transition { navigation: auto; }
.top { view-transition-name: site-top; }
::view-transition-old(root) { animation: pg-out .22s ease both; }
::view-transition-new(root) { animation: pg-in .32s ease both; }
@keyframes pg-out { to { opacity: 0; } }
@keyframes pg-in { from { opacity: 0; translate: 0 10px; } }

/* ---------- section backdrops: soft glows that alternate sides, faint game art behind the .alt bands ---------- */
main > section:not(.hx):not(.page-head) { position: relative; isolation: isolate; }
main > section:not(.hx):not(.page-head)::before { content: ''; position: absolute; inset: -90px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 320px at 8% 30%, rgba(139, 92, 246, .16), transparent 70%), radial-gradient(420px 260px at 96% 80%, rgba(242, 194, 91, .07), transparent 70%); }
main > section:not(.hx):not(.page-head):nth-of-type(even)::before {
  background: radial-gradient(520px 320px at 94% 25%, rgba(168, 85, 247, .15), transparent 70%), radial-gradient(420px 260px at 4% 85%, rgba(56, 189, 248, .06), transparent 70%); }
/* the art fades out before its corners, where the Gravity watermark / copyright line sit */
main > section.alt::before { inset: 0; background:
  linear-gradient(rgba(14, 9, 32, .9), rgba(14, 9, 32, .84) 50%, rgba(14, 9, 32, .92)),
  var(--sec-art, url(/assets/img/art-2.jpg)) center 22% / cover no-repeat !important; filter: saturate(1.2);
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 52%, transparent 78%), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 18%, #000 52%, transparent 78%), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect; }
main > section.alt { background: rgba(14, 9, 32, .62); }
main > section.alt:nth-of-type(4n+1) { --sec-art: url(/assets/img/art-3.jpg); }
main > section.alt:nth-of-type(4n+3) { --sec-art: url(/assets/img/art-1.jpg); }

/* gold divider with a glowing diamond on top of every .alt band */
main > section.alt { border-top: 0; }
main > section.alt::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242, 194, 91, .55) 30%, rgba(242, 194, 91, .55) 70%, transparent); }
main > section.alt > .wrap::before { content: ''; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; margin-left: -6px; rotate: 45deg;
  background: linear-gradient(135deg, #fff3c4, #c9982f); box-shadow: 0 0 12px rgba(242, 194, 91, .8), 0 0 0 4px rgba(14, 9, 32, 1); }
main > section.alt > .wrap { position: static; }

/* gold gradient on big section titles */
.section-head h2, .page-head h1 { background: linear-gradient(180deg, #fff 30%, #f6dda0 75%, #e0b155); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- ranking podium ---------- */
.podium-s { padding: 34px 0 6px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; max-width: 860px; margin: 0 auto; }
.pod { text-align: center; min-width: 0; }
.pod-fig { position: relative; height: 200px; display: grid; place-items: end center; }
.pod-fig::before { content: ''; position: absolute; left: 50%; bottom: -6px; width: 150px; height: 36px; margin-left: -75px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--pc, rgba(242, 194, 91, .55)), transparent); filter: blur(2px); }
.pod-fig img { position: relative; max-height: 190px; max-width: 100%; image-rendering: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); animation: pod-bob 3.2s ease-in-out infinite; }
.p2 .pod-fig img { animation-delay: -1s; } .p3 .pod-fig img { animation-delay: -2s; }
@keyframes pod-bob { 50% { translate: 0 -6px; } }
.pod-crown { position: absolute; left: 50%; top: -6px; width: 46px; margin-left: -23px; filter: drop-shadow(0 0 10px rgba(242, 194, 91, .8)); animation: pod-bob 3.2s ease-in-out infinite; z-index: 1; }
.pod-base { position: relative; margin-top: 8px; padding: 16px 12px 18px; border-radius: 14px 14px 6px 6px; border: 1px solid var(--pb, rgba(242, 194, 91, .5));
  background: linear-gradient(180deg, var(--pt, rgba(242, 194, 91, .22)), rgba(24, 15, 52, .9) 70%); box-shadow: 0 0 26px var(--pg, rgba(242, 194, 91, .18)); }
.pod-base b { display: block; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-base small { display: block; color: var(--muted); font-size: 13px; }
.pod-lv { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--pc2, var(--gold)); }
.pod-lv i { font-style: normal; font-weight: 500; color: var(--muted); font-size: 13px; }
.pod-n { position: absolute; left: 50%; top: -17px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; display: grid; place-items: center;
  font: 800 16px 'Cinzel', serif; color: #1a1030; background: var(--pn, linear-gradient(135deg, #fff3c4, #e0a93a)); box-shadow: 0 0 0 3px #120b28, 0 0 14px var(--pc, rgba(242, 194, 91, .6)); }
.p1 .pod-base { padding-bottom: 46px; }
.p2 { --pc: rgba(203, 213, 225, .5); --pb: rgba(203, 213, 225, .45); --pt: rgba(203, 213, 225, .16); --pg: rgba(203, 213, 225, .1); --pn: linear-gradient(135deg, #fff, #94a3b8); --pc2: #e2e8f0; }
.p3 { --pc: rgba(234, 138, 76, .5); --pb: rgba(234, 138, 76, .45); --pt: rgba(234, 138, 76, .16); --pg: rgba(234, 138, 76, .1); --pn: linear-gradient(135deg, #ffd3b0, #c56a2f); --pc2: #f5b083; }
.p2 .pod-base { padding-bottom: 28px; }
.p1 .pod-fig { height: 230px; } .p1 .pod-fig img { max-height: 220px; }
@media (max-width: 560px) {
  .podium { gap: 8px; }
  .pod-fig { height: 130px; } .p1 .pod-fig { height: 150px; }
  .pod-fig img { max-height: 124px; } .p1 .pod-fig img { max-height: 144px; }
  .pod-base { padding: 14px 6px 12px; } .p1 .pod-base { padding-bottom: 30px; } .p2 .pod-base { padding-bottom: 20px; }
  .pod-base b { font-size: 14px; } .pod-base small, .pod-lv i { font-size: 11px; } .pod-lv { font-size: 13px; }
}

/* ---------- big footer ---------- */
.foot.foot2 { position: relative; padding: 0 16px; background: linear-gradient(180deg, rgba(14, 9, 32, .96), #07040f); border-top: 0; margin-top: 30px; }
.foot-orn { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 194, 91, .6), transparent); }
.foot-orn i { position: absolute; left: 50%; top: -7px; width: 13px; height: 13px; margin-left: -7px; rotate: 45deg; background: linear-gradient(135deg, #fff3c4, #c9982f); box-shadow: 0 0 14px rgba(242, 194, 91, .8), 0 0 0 4px #0e0920; }
.foot-grid { max-width: 1120px; margin: 0 auto; padding: 54px 0 30px; display: grid; gap: 28px; grid-template-columns: 1.5fr repeat(3, 1fr); }
.foot-brand .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.foot-brand .brand-t b { font: 800 24px 'Cinzel', serif; color: var(--gold); display: block; letter-spacing: .04em; }
.foot-brand .brand-t small { font: 600 11px 'Cinzel', serif; letter-spacing: .24em; color: #cfc4f3; text-transform: uppercase; }
.foot-brand p { margin: 14px 0; font-size: 14px; max-width: 340px; }
.foot-st { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.foot-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.foot-cta .btn { padding: 9px 16px; font-size: 14px; }
.foot-cta .btn svg { width: 16px; height: 16px; }
.foot-col { display: flex; flex-direction: column; gap: 2px; }
.foot-col h4 { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font: 700 14px 'Cinzel', 'Prompt', serif; letter-spacing: .12em; color: var(--gold); }
.foot-col h4 svg { width: 16px; height: 16px; }
.foot-col a { color: #b9aee0; font-size: 14px; padding: 4px 0; text-decoration: none; transition: color .15s, translate .15s; }
.foot-col a:hover { color: #fff; translate: 4px 0; }
.foot-bot { max-width: 1120px; margin: 0 auto; padding: 18px 0 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; font-size: 12.5px; color: #8a7fb5; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 22px 14px; padding-top: 44px; } .foot-bot { padding-bottom: 96px; } }

/* ---------- RO cursor (mouse only) ---------- */
@media (pointer: fine) {
  html { cursor: url(/assets/cursor/arrow.png) 1 1, auto; }
  a, button, label, summary, select, [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], .btn {
    cursor: url(/assets/cursor/hand.png) 3 3, pointer; }
}

/* ---------- BGM button ---------- */
.bgm { position: fixed; right: 18px; bottom: 76px; z-index: 20; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(167, 139, 250, .55);
  display: grid; place-items: center; color: #d8c8ff; background: rgba(18, 11, 40, .82); backdrop-filter: blur(8px); box-shadow: 0 0 16px rgba(139, 92, 246, .35); padding: 0; }
.bgm svg { width: 20px; height: 20px; }
.bgm::after { content: ''; position: absolute; width: 26px; height: 2px; background: #f87171; rotate: -45deg; border-radius: 2px; box-shadow: 0 0 0 2px rgba(18, 11, 40, .9); }
.bgm-eq { display: none; position: absolute; bottom: 9px; gap: 2px; align-items: flex-end; height: 10px; }
.bgm-eq i { width: 3px; background: var(--gold); border-radius: 1px; animation: bgm-eq .9s ease-in-out infinite alternate; }
.bgm-eq i:nth-child(2) { animation-delay: -.3s; } .bgm-eq i:nth-child(3) { animation-delay: -.6s; } .bgm-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes bgm-eq { from { height: 2px; } to { height: 10px; } }
.bgm.wait { color: var(--gold); border-color: rgba(242, 194, 91, .6); animation: bgm-wait 1.6s ease-in-out infinite; }
.bgm.wait::after { display: none; }
@keyframes bgm-wait { 50% { box-shadow: 0 0 0 7px rgba(242, 194, 91, .14), 0 0 26px rgba(242, 194, 91, .55); } }
.bgm.on { color: var(--gold); border-color: rgba(242, 194, 91, .6); box-shadow: 0 0 0 3px rgba(242, 194, 91, .15), 0 0 22px rgba(242, 194, 91, .35); }
.bgm.on::after { display: none; }
.bgm.on svg { translate: 0 -4px; width: 17px; height: 17px; }
.bgm.on .bgm-eq { display: flex; }
.bgm-tip { position: fixed; right: 76px; bottom: 84px; z-index: 20; padding: 7px 12px; border-radius: 10px; font-size: 13px; color: #f2edff; background: rgba(18, 11, 40, .92);
  border: 1px solid var(--line); pointer-events: none; opacity: 0; translate: 6px 0; transition: opacity .3s, translate .3s; white-space: nowrap; }
.bgm-tip.show { opacity: 1; translate: 0 0; }
@media (max-width: 760px) { .bgm { width: 44px; height: 44px; right: 14px; bottom: 74px; } .bgm-tip { right: 66px; bottom: 82px; } }

/* ---------- 3D tilt + shine (polish.js adds .tilt and the <i class="shine">) ---------- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt .shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 2;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 236, 179, .16), transparent 60%); }
.tilt:hover .shine { opacity: 1; }
.tilt:hover { border-color: rgba(242, 194, 91, .55) !important; }
.mvp.tilt { position: relative; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .pod-fig img, .pod-crown, .bgm-eq i { animation: none; }
}