/* Kitchen Kizuna — per-screen layout. Base design unit: 1rem = 1/67.5 of a 1080p screen height. */

/* ================= FX ================= */
.fx-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.fx-petals i { position: absolute; top: -6%; background: center/contain no-repeat; animation: petal-fall linear infinite, petal-sway ease-in-out infinite alternate; }
.fx-petals.soft i { opacity: .5 !important; }
@keyframes petal-fall { to { top: 106%; transform: rotate(540deg); } }
@keyframes petal-sway { from { margin-left: calc(var(--drift) * -.5); } to { margin-left: calc(var(--drift) * .5); } }
.fx-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.fx-confetti i { position: absolute; animation: confetti-fly cubic-bezier(.2,.7,.4,1) both; }
@keyframes confetti-fly {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  35% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) * .4)); }
  100% { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + var(--fall))) rotate(var(--rot)); opacity: 0; }
}
.fx-speedlines { position: absolute; inset: -10%; pointer-events: none; background: center/100% 100% no-repeat; animation: speed-jitter .12s steps(2) infinite; }
@keyframes speed-jitter { 50% { transform: rotate(1.2deg) scale(1.02); } }
body.reduced-flash .fx-speedlines { animation: none; }
.fx-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fx-sparkles i { position: absolute; width: calc(var(--s) * 1.6rem); height: calc(var(--s) * 1.6rem); animation: twinkle 2.4s ease-in-out infinite;
  background: radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 20%, #fff 22% 28%, transparent 30% 45%, #fff 47% 53%, transparent 55% 70%, #fff 72% 78%, transparent 80%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
@keyframes twinkle { 0%,100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ================= BOOT ================= */
.boot { background: radial-gradient(ellipse at 50% 40%, #4b2a5c, #2b1b33 70%); display: grid; place-items: center; }
.boot-center { width: min(56rem, 86vw); display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.boot-logo { width: 36rem; max-width: 80vw; filter: drop-shadow(0 .8rem 1.2rem rgba(0,0,0,.4)); animation: float 3s ease-in-out infinite; }
.boot-bar { position: relative; width: 100%; height: 1.6rem; border-radius: 99px; background: rgba(255,255,255,.12); border: .2rem solid rgba(255,255,255,.85); }
.boot-fill { position: absolute; inset: .2rem auto .2rem .2rem; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow)); transition: width .25s ease-out; max-width: calc(100% - .4rem); }
.boot-ball { position: absolute; top: 50%; left: 0; width: 3rem; height: 3rem; transform: translate(-50%, -50%); transition: left .25s ease-out, transform .25s ease-out;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='%23ffd23f' stroke='%232b1b33' stroke-width='4'/%3E%3Cg fill='%232b1b33' opacity='.85'%3E%3Ccircle cx='24' cy='20' r='4'/%3E%3Ccircle cx='40' cy='20' r='4'/%3E%3Ccircle cx='32' cy='33' r='4'/%3E%3Ccircle cx='20' cy='42' r='4'/%3E%3Ccircle cx='44' cy='42' r='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.boot-row { width: 100%; display: flex; justify-content: space-between; color: #fff; font-size: 1.15rem; }
.boot-tip { margin: 0; color: rgba(255,255,255,.75); font-size: 1.1rem; text-align: center; font-weight: 700; }

/* ================= TITLE ================= */
.title { background-size: cover; animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns { from { background-position: 50% 100%; background-size: 108% auto; } to { background-position: 46% 100%; background-size: 116% auto; } }
@media (max-aspect-ratio: 16/9) { .title { animation: none; background-size: cover; } }
.title-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 18%, rgba(255,240,200,.55), transparent 70%), linear-gradient(180deg, transparent 70%, rgba(43,27,51,.45)); }
.title-logo-wrap { position: absolute; left: 50%; top: 3.5%; width: 44rem; max-width: 70vw; transform: translateX(-50%); z-index: 5; }
.title-logo-drop { animation: logo-drop 1s var(--ease-pop) .15s both; transform-origin: 50% 90%; }
.title-logo-wrap .sheen { width: 100%; animation: logo-bob 4s ease-in-out 1.4s infinite; filter: drop-shadow(0 1rem 1.4rem rgba(80,20,60,.45)); }
.title-logo { width: 100%; }
.title { background: #f3a46b; animation: none; }
.title-layer { position: absolute; inset: -3%; pointer-events: none; }
.title-layer.bg { background: url('../assets/ui/title/keyart-bg.jpg') center bottom/cover no-repeat, url('../assets/ui/title/keyart.jpg') center bottom/cover; animation: kenburns-bg 34s ease-in-out infinite alternate; }
.title-layer.fg { background: url('../assets/ui/title/keyart-fg.webp') center bottom/cover no-repeat; animation: fg-breathe 6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes kenburns-bg { from { transform: scale(1.02); } to { transform: scale(1.09) translateX(-1%); } }
@keyframes fg-breathe { 50% { transform: scale(1.012) translateY(-.3%); } }
.title-layer .fx-petals { z-index: 0; }
@keyframes logo-drop { from { transform: translateY(-60vh) rotate(-8deg) scale(.6); } 70% { transform: translateY(1rem) rotate(2deg) scale(1.03); } }
@keyframes logo-bob { 50% { transform: translateY(-.6rem) rotate(-.8deg); } }
.title-tagline { width: max-content; margin: .2rem auto 0; padding: .2rem 1.4rem .3rem; background: rgba(43,27,51,.72); border-radius: 99px; text-align: center; transform: rotate(-2deg); color: #fff; font-size: 1.6rem; white-space: nowrap;
  text-shadow: 0 .15rem 0 #b03a6a, 0 0 1rem rgba(255,80,140,.8); animation: pop-in .6s var(--ease-pop) 1s both; }
.title-press { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: .3rem; animation: pop-in .6s var(--ease-pop) 1.3s both; }
.title-press span { font-size: 3.4rem; color: #fff; padding: .3rem 2.4rem .1rem; background: var(--pink); border: .3rem solid var(--ink); border-radius: 99px; box-shadow: var(--shadow-lg); letter-spacing: .12em;
  text-shadow: .2rem .2rem 0 var(--ink); animation: press-pulse 1.4s ease-in-out infinite; }
.title-press small { color: #fff; font-size: 1.05rem; text-shadow: 0 .1rem .3rem rgba(0,0,0,.6); }
@keyframes press-pulse { 50% { transform: scale(1.06); box-shadow: .8rem .8rem 0 var(--ink), 0 0 2.4rem rgba(255,79,135,.8); } }
.title.is-starting .title-press span { animation: press-go .5s ease-out both; }
@keyframes press-go { 30% { transform: scale(1.25); background: var(--yellow); color: var(--ink); } 100% { transform: scale(.9); opacity: 0; } }
.title-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: 2.8rem; overflow: hidden; background: rgba(43,27,51,.85); border-top: .22rem solid var(--yellow); display: flex; align-items: center; }
.title-ticker-track { display: flex; gap: 3rem; white-space: nowrap; animation: ticker 40s linear infinite; color: #fff; font-size: 1.1rem; padding-left: 2rem; }
@keyframes ticker { to { transform: translateX(-50%); } }
.title-foot { position: absolute; right: 1.4rem; bottom: 3.4rem; z-index: 6; display: flex; gap: 1.4rem; color: rgba(255,255,255,.8); font-size: .9rem; text-shadow: 0 .1rem .2rem rgba(0,0,0,.6); }
.title-attract { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.attract-card { position: absolute; top: 46%; left: 100%; width: 13rem; padding: .5rem .5rem .8rem; background: var(--paper); border: .2rem solid var(--ink); box-shadow: var(--shadow); text-align: center; animation: attract-slide 6s linear both; }
.attract-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border: .16rem solid var(--ink); display: block; background: var(--c); }
.attract-card b { display: block; font-family: var(--f-title); font-size: 1.5rem; margin-top: .3rem; }
.attract-card small { display: block; color: var(--pink); font-size: .9rem; }
@keyframes attract-slide { from { left: 100%; transform: rotate(4deg); } to { left: -16rem; transform: rotate(-4deg); } }
.title.attract-on .title-press { opacity: .85; }

/* ================= HEADER / COMMON ================= */
.scr-head { position: absolute; left: 1.4rem; top: 1rem; right: 1.4rem; display: flex; gap: 1.6rem; align-items: flex-start; z-index: 6; pointer-events: none; }
.scr-head > * { pointer-events: auto; }
.scr-logo { padding: .45rem 1.1rem .35rem; animation: drop-in .5s var(--ease-pop) both; }
.scr-logo img { height: 5.8rem; display: block; }
.scr-title { padding: .7rem 2.4rem 1.1rem; animation: drop-in .5s var(--ease-pop) .06s both; display: flex; flex-direction: column; }
.scr-title h1 { margin: 0; font-size: 3.6rem; }
.scr-title-jp { font-size: 1.05rem; color: var(--pink); margin-top: .4rem; }
.back-btn { position: absolute; z-index: 8; left: 1.6rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.3rem .5rem 1rem; cursor: pointer;
  background: var(--paper); border: .2rem solid var(--ink); border-radius: 99px; box-shadow: var(--shadow-sm); font-weight: 900; font-size: 1.1rem; text-transform: uppercase; transition: transform .15s var(--ease-pop); }
.back-btn:hover, .back-btn.is-focus { transform: translateX(-.3rem) rotate(-2deg); background: var(--pink-3); }
.deco-notes { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.deco-notes .note { animation: pop-in .5s var(--ease-pop) both; animation-delay: calc(var(--i) * 80ms + 300ms); }
.deco-stickers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* ================= PROFILE CARD ================= */
.profile-card { position: absolute; right: 2rem; top: 1.6rem; z-index: 6; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1.2rem; width: 38rem; animation: drop-in .55s var(--ease-pop) .1s both; }
.pc-avatar { width: 5.6rem; height: 5.6rem; border: .2rem solid var(--ink); border-radius: .5rem; overflow: hidden; background: var(--pink-3); box-shadow: var(--shadow-sm); transform: rotate(-3deg); }
.pc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-name { font-size: 1.45rem; font-weight: 900; display: flex; align-items: center; gap: .5rem; }
.pc-flag { font-size: 1.3rem; }
.pc-title { font-family: var(--f-hand); color: var(--pink); font-size: 1.1rem; margin: -.1rem 0 .3rem; }
.pc-level { display: flex; align-items: center; gap: .7rem; }
.pc-lv { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--yellow); border: .2rem solid var(--ink); line-height: .9; box-shadow: var(--shadow-sm); }
.pc-lv small { font-size: .7rem; } .pc-lv b { font-size: 1.35rem; }
.pc-xp { flex: 1; } .pc-xp small { font-size: .85rem; color: var(--ink-soft); }
.pc-side { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.pc-fp, .pc-ki { display: flex; align-items: center; gap: .4rem; background: #fff; border: .16rem solid var(--ink); border-radius: 99px; padding: .15rem .8rem .15rem .2rem; font-size: 1.2rem; }
.pc-fp img, .pc-ki img { width: 2.2rem; height: 2.2rem; object-fit: contain; }
.pc-ki span { display: flex; gap: .3rem; align-items: baseline; } .pc-ki small { font-size: .75rem; color: var(--ink-soft); }

/* ================= MAIN MENU ================= */
.menu .menu-logo { position: absolute; left: 3rem; top: .8rem; width: 23rem; z-index: 5; filter: drop-shadow(.3rem .5rem .4rem rgba(60,20,30,.35)); animation: drop-in .6s var(--ease-pop) both; transform: rotate(-3deg); }
.menu-list { position: absolute; left: 4.6rem; top: 15.6rem; bottom: 5rem; width: 41rem; display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; z-index: 5; }
.menu-item {
  position: relative; display: grid; grid-template-columns: 5.4rem 1fr auto; align-items: center; gap: 1.1rem; text-align: left; cursor: pointer;
  padding: .3rem 1.6rem .3rem .7rem; min-height: 0; flex: 1; max-height: 6.2rem; transform: rotate(var(--rot));
  background: var(--paper) var(--paper-tex); background-size: 30rem; border: .22rem solid var(--ink); border-radius: .3rem; box-shadow: var(--shadow);
  transition: transform .22s var(--ease-pop), box-shadow .2s, background-color .2s;
}
.menu-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .9rem; background: var(--c); border-right: .2rem solid var(--ink); }
.menu-item.is-focus { transform: rotate(0deg) translateX(1.6rem) scale(1.04); box-shadow: .7rem .7rem 0 var(--ink); background-color: #fff; }
.menu-item.is-focus::before { width: 1.4rem; }
.menu-item.is-press { transform: translateX(1.9rem) scale(.98); box-shadow: .1rem .1rem 0 var(--ink); }
.menu-icon { width: 4.8rem; height: 4.8rem; display: grid; place-items: center; margin-left: .6rem; transition: transform .3s var(--ease-pop); }
.menu-icon img { max-width: 100%; max-height: 100%; filter: drop-shadow(.12rem .18rem 0 rgba(43,27,51,.35)); }
.menu-item.is-focus .menu-icon { transform: scale(1.18) rotate(-8deg); animation: wobble 1.2s ease-in-out .3s infinite; }
.menu-text b { display: block; font-size: 2rem; line-height: 1.05; }
.menu-text small { display: block; font-size: 1rem; color: var(--c); margin-top: .1rem; filter: brightness(.85); }
.menu-arrow { font-size: 1.4rem; color: var(--c); opacity: 0; transform: translateX(-.8rem); transition: .2s var(--ease-pop); }
.menu-item.is-focus .menu-arrow { opacity: 1; transform: none; animation: blink .8s steps(2) infinite; }
.menu-item .cursor-hand { left: -3.6rem; }

.menu-feature { position: absolute; left: 51rem; right: 4rem; top: 15.5rem; bottom: 6.8rem; z-index: 4; padding: 2.2rem 2.6rem 2rem; display: flex; flex-direction: column; border-top: 1.2rem solid var(--c, var(--pink)); animation: slide-r .5s var(--ease-out) .1s both; }
.menu-feature-title { margin: 0; font-size: 3.6rem; color: var(--ink); }
.menu-feature-jp { color: var(--c); font-size: 1.3rem; margin-top: .2rem; filter: brightness(.85); }
.menu-feature-desc { font-size: 1.35rem; line-height: 1.45; margin: 1rem 0 1.2rem; max-width: 52rem; color: var(--ink-2); font-weight: 700; }
.menu-feature-slot { flex: 1; min-height: 0; display: flex; }
.menu-feature-body { flex: 1; display: flex; flex-direction: column; gap: 1rem; min-height: 0; animation: pop-in .35s var(--ease-out) both; }
.feat-art { flex: 1; min-height: 8rem; border: .22rem solid var(--ink); border-radius: .3rem; background: center/cover; box-shadow: var(--shadow-sm); }
.feat-chips, .feat-settings { display: flex; gap: .7rem; flex-wrap: wrap; }
.feat-settings .tag { font-size: 1.2rem; padding: .6rem 1.2rem; }
.feat-cups { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; flex: 1; align-items: center; }
.feat-cup { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; animation: pop-in .45s var(--ease-pop) both; animation-delay: calc(var(--i) * 60ms); }
.feat-cup img { width: 100%; max-width: 10rem; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(.2rem .3rem 0 rgba(43,27,51,.3)); }
.feat-cup b { font-size: 1.1rem; }
.feat-cup.locked img { filter: grayscale(1) brightness(.55) contrast(.9); }
.feat-lock { position: absolute; top: 28%; font-size: 2.2rem; }
.feat-medals { display: flex; gap: .3rem; }
.medal-dot { width: 1rem; height: 1rem; border-radius: 50%; border: .14rem solid var(--ink); background: #e5dccf; }
.medal-dot.gold { background: radial-gradient(circle at 35% 30%, #fff6c4, #f0b429 60%, #b07a10); }
.medal-dot.silver { background: radial-gradient(circle at 35% 30%, #fff, #c5cbd8 60%, #7d8496); }
.medal-dot.bronze { background: radial-gradient(circle at 35% 30%, #ffe1c4, #d0874a 60%, #8a4f1f); }
.feat-line { font-size: 1.2rem; }
.feat-progress { display: flex; flex-direction: column; gap: .5rem; font-size: 1.2rem; }
.feat-ki { display: flex; gap: 2rem; align-items: center; }
.feat-badge { width: 11rem; height: 11rem; object-fit: contain; animation: float 3s ease-in-out infinite; }
.feat-ki small { display: block; font-size: 1rem; color: var(--ink-soft); letter-spacing: .1em; }
.feat-ki b { display: block; font-size: 4.6rem; line-height: 1; color: var(--navy); font-weight: 900; }
.feat-aura { margin-top: .5rem; font-size: 1.1rem; color: var(--ink-2); }
.feat-badges { display: flex; gap: .6rem; margin-top: auto; }
.feat-badges img { width: 5rem; height: 5rem; object-fit: contain; }
.feat-capsule { display: flex; gap: 2rem; align-items: center; flex: 1; min-height: 0; }
.feat-capsule > img { height: 100%; max-height: 22rem; object-fit: contain; animation: float 3.2s ease-in-out infinite; }
.feat-capsule > div { display: flex; flex-direction: column; gap: .6rem; font-size: 1.3rem; align-items: flex-start; }
.feat-capsule b { font-size: 2rem; }
.feat-fp { display: flex; align-items: center; gap: .4rem; } .feat-fp img { width: 2.4rem; }
.menu .profile-card { top: 1.4rem; }
.menu .menu-feature { top: 13.5rem; }

/* ================= MODAL ================= */
.modal-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(43,27,51,.55); backdrop-filter: blur(3px); animation: fade-in .2s both; }
.modal-wrap.closing { animation: fade-out .2s both; }
@keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } }
.modal-card { min-width: 34rem; max-width: min(64rem, 92vw); max-height: 88vh; overflow: auto; padding: 2.2rem 2.6rem 2rem; animation: pop-in .4s var(--ease-pop) both; }
.modal-title { margin: 0 0 1rem; font-size: 2.6rem; }
.modal-body { font-size: 1.3rem; line-height: 1.45; }
.modal-body p { margin: 0 0 .8rem; }
.modal-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.6rem; flex-wrap: wrap; }

/* ================= CONTROLS: seg / toggle / slider ================= */
.seg { display: inline-flex; border: .2rem solid var(--ink); border-radius: .7rem; overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
.seg-opt { border: 0; background: transparent; padding: .55rem 1.2rem; font-weight: 900; font-size: 1.1rem; cursor: pointer; border-right: .16rem solid var(--ink); text-transform: uppercase; transition: background .15s; }
.seg-opt:last-child { border-right: 0; }
.seg-opt.on { background: var(--pink); color: #fff; }
.seg-opt.is-focus { box-shadow: inset 0 0 0 .25rem var(--yellow); }
.seg-opt.on.is-focus { box-shadow: inset 0 0 0 .25rem var(--yellow); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .7rem 1rem; border-radius: .6rem; border: .16rem solid transparent; background: transparent; cursor: pointer; text-align: left; }
.toggle.is-focus { background: rgba(255,143,179,.18); border-color: var(--ink); }
.toggle-text b { display: block; font-size: 1.2rem; } .toggle-text small { display: block; font-size: .95rem; color: var(--ink-soft); font-weight: 700; }
.toggle-knob { position: relative; flex: none; width: 4.4rem; height: 2.3rem; border-radius: 99px; background: #d8cfc4; border: .2rem solid var(--ink); transition: background .2s; }
.toggle-knob i { position: absolute; top: .15rem; left: .2rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; border: .16rem solid var(--ink); transition: left .25s var(--ease-pop); }
.toggle.on .toggle-knob { background: var(--green); } .toggle.on .toggle-knob i { left: 2.2rem; }
.slider { display: grid; grid-template-columns: 12rem 1fr 4.5rem; gap: 1rem; align-items: center; padding: .7rem 1rem; border-radius: .6rem; border: .16rem solid transparent; cursor: pointer; --v: .5; }
.slider.is-focus { background: rgba(255,143,179,.18); border-color: var(--ink); }
.slider-label { font-size: 1.2rem; font-weight: 900; }
.slider-track { position: relative; height: 1.2rem; border-radius: 99px; background: #d8cfc4; border: .18rem solid var(--ink); }
.slider-track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 99px; background: linear-gradient(90deg, var(--pink-2), var(--pink)); }
.slider-thumb { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 2.2rem; height: 2.2rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--yellow); border: .2rem solid var(--ink); box-shadow: var(--shadow-sm); }
.slider b { text-align: right; font-size: 1.15rem; }

.feat-hero { position: relative; flex: 1.3; min-height: 9rem; border: .22rem solid var(--ink); border-radius: .3rem; background: center 35%/cover; box-shadow: var(--shadow-sm); overflow: hidden; }
.feat-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(43,27,51,.55)); }
.feat-hero .feat-hero-cap { position: absolute; left: 1rem; bottom: .7rem; z-index: 1; color: #fff; font-family: var(--f-hand); font-size: 1.3rem; text-shadow: 0 .1rem .3rem rgba(0,0,0,.6); }
.feat-cups { flex: 1; }
.feat-cup img { max-width: 7.5rem; }

/* ================= CHARACTER SELECT (mockup-2) ================= */
[data-screen=select] ~ .hints { display: none; }
.select { --cc: #ff8fb3; }
.sel-head { position: absolute; left: 4.6rem; top: .3rem; z-index: 6; display: flex; align-items: flex-start; gap: 1.6rem; }
.sel-logo { position: relative; padding: .2rem .4rem; animation: drop-in .5s var(--ease-pop) both; }
.sel-logo img { height: 8.4rem; max-width: 31rem; object-fit: contain; display: block; filter: drop-shadow(.2rem .4rem .3rem rgba(60,20,30,.35)); transform: rotate(-2deg); }
.sel-title { position: relative; margin-top: .9rem; padding: .5rem 2.4rem 1.1rem 2rem; transform: rotate(-.8deg); animation: drop-in .5s var(--ease-pop) .08s both; }
.sel-title h1 { margin: 0; font-size: 4rem; letter-spacing: .01em; white-space: nowrap; }
.sel-title-brush { position: absolute; left: 1.8rem; right: 3rem; bottom: .55rem; height: .7rem; border-radius: 99px; background: linear-gradient(90deg, var(--pink), #ff8fb3 85%, transparent); transform: rotate(-.6deg); }
.sel-sub { position: absolute; right: -1rem; bottom: -1.3rem; padding: .15rem .8rem; background: var(--ink); color: #fff; font-size: .95rem; border-radius: .3rem; transform: rotate(2deg); white-space: nowrap; }

.sel-grid { position: absolute; left: 7rem; top: 10.4rem; width: 54.6rem; height: 45.6rem; z-index: 4;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: .9rem; }
.sel-card { position: relative; display: flex; flex-direction: column; padding: .42rem .42rem 0; cursor: pointer; text-align: left; min-height: 0;
  background: #fffaf0 var(--paper-tex); background-size: 20rem; border: .2rem solid var(--ink); border-radius: .25rem; box-shadow: .3rem .35rem 0 rgba(43,27,51,.85);
  transform: rotate(var(--rot)); transition: transform .18s var(--ease-pop), box-shadow .18s, outline-color .15s;
  animation: pop-in .45s var(--ease-pop) both; animation-delay: calc(var(--i) * 22ms + 80ms); outline: .34rem solid transparent; outline-offset: .1rem; }
.sel-card-img { position: relative; flex: 1; min-height: 0; border: .15rem solid var(--ink); overflow: hidden; background: var(--cc); }
.sel-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; transition: transform .35s var(--ease-out); }
.sel-card-label { display: flex; align-items: baseline; gap: .45rem; padding: .3rem .1rem .35rem; white-space: nowrap; overflow: hidden; }
.sel-card-label span { font-size: .85rem; font-weight: 900; color: var(--ink-2); }
.sel-card-label b { font-family: var(--f-title); font-weight: 400; font-size: 1.28rem; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
.sel-card:hover, .sel-card.cursor { transform: rotate(0) translateY(-.35rem) scale(1.05); z-index: 3; box-shadow: .45rem .55rem 0 var(--ink); }
.sel-card:hover .sel-card-img img, .sel-card.cursor .sel-card-img img { transform: scale(1.08); }
.sel-card.cursor { outline-color: var(--pc); box-shadow: .45rem .55rem 0 var(--ink), 0 0 1.6rem .3rem color-mix(in srgb, var(--pc), transparent 35%); animation: card-glow 1s ease-in-out infinite; }
@keyframes card-glow { 50% { outline-offset: .3rem; } }
.sel-card.picked { background-color: #fff; }
.sel-card.picked .sel-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--cc), transparent 40%)); }
.sel-card.locked .sel-card-img img { filter: brightness(.7) saturate(.75); }
.sel-card.locked .sel-card-label b { color: var(--ink-soft); }
.sel-lock { position: absolute; inset: .42rem .42rem auto .42rem; bottom: 2.4rem; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; padding: .4rem; pointer-events: none; }
.sel-lock small { position: absolute; left: .4rem; top: .4rem; right: .4rem; color: #fff; font-size: .78rem; line-height: 1.15; text-shadow: 0 .1rem .2rem #000; opacity: 0; transition: opacity .2s; }
.sel-card.locked:hover .sel-lock small, .sel-card.locked.cursor .sel-lock small { opacity: 1; }
.lock-ico { width: 2.8rem; height: 2.8rem; border-radius: .55rem; background: rgba(28,22,34,.88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' fill='white'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3Ccircle cx='12' cy='16' r='1.6' fill='%231c1622' stroke='none'/%3E%3C/svg%3E") center/62% no-repeat; box-shadow: 0 .15rem .3rem rgba(0,0,0,.4); }
.sel-new { position: absolute; top: -.6rem; left: -.6rem; padding: .1rem .5rem; background: var(--yellow); border: .16rem solid var(--ink); border-radius: .3rem; font-family: var(--f-manga); font-size: 1.1rem; transform: rotate(-10deg); animation: wobble 1s ease-in-out infinite; }
.sel-tags { position: absolute; top: -.75rem; right: -.5rem; display: flex; gap: .2rem; z-index: 4; }
.sel-tag { padding: .05rem .5rem .1rem; border-radius: .35rem; background: var(--pc); color: #fff; border: .16rem solid var(--ink); font-family: var(--f-manga); font-size: 1.15rem; letter-spacing: .04em; box-shadow: .12rem .15rem 0 var(--ink); }
.sel-tag.live { animation: tag-bob .7s ease-in-out infinite alternate; }
@keyframes tag-bob { to { transform: translateY(-.25rem) rotate(4deg); } }
.sel-tag.done { background: color-mix(in srgb, var(--pc), #fff 15%); }
.sel-random { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; background: repeating-linear-gradient(45deg, #ffd23f 0 1rem, #ffbf1f 1rem 2rem); }
.sel-random span { font-family: var(--f-manga); font-size: 5rem; line-height: 1; color: #fff; -webkit-text-stroke: .18rem var(--ink); paint-order: stroke fill; }
.sel-random small { font-weight: 900; font-size: .9rem; }
.sel-setup { grid-column: 4 / span 2; grid-row: 4; display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding: 1rem 1.2rem; transform: rotate(.6deg); animation: pop-in .45s var(--ease-pop) .5s both; }
.sel-setup-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.sel-setup-row > b { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.sel-fmt { display: inline-flex; border: .18rem solid var(--ink); border-radius: .6rem; overflow: hidden; background: #fff; }
.sel-fmt .seg-opt { font-size: .9rem; padding: .35rem .7rem; }
.sel-setup-btns { gap: .6rem; }
.sel-setup-btns .btn { font-size: .95rem; padding: .35rem .8rem; min-height: 2.4rem; }
.go-pulse { animation: press-pulse 1.1s ease-in-out infinite; }

.sel-right { position: absolute; left: 63.4rem; right: 2.2rem; top: 9.2rem; bottom: 11.4rem; z-index: 4; display: flex; flex-direction: column; gap: 1rem; }
.sc-photo { position: relative; flex: 1.38; min-height: 0; border: .55rem solid #fffdf7; outline: .2rem solid var(--ink); box-shadow: .5rem .6rem 0 rgba(43,27,51,.85); transform: rotate(.5deg); animation: slide-r .5s var(--ease-out) both; }
.sc-bg { position: absolute; inset: 0; overflow: hidden; background: url('../assets/ui/bg/festival.jpg') center/cover, linear-gradient(180deg, #9fd5ff, #ffd1e4 70%, #ffe9c9); }
.sc-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 62% 55%, color-mix(in srgb, var(--cc), transparent 55%), transparent 70%); mix-blend-mode: soft-light; }
.sc-art { position: absolute; left: 16%; right: 10%; top: -24%; bottom: 0; z-index: 3; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.sc-art-inner { height: 100%; width: 100%; display: flex; justify-content: center; align-items: flex-end; animation: sc-in .45s var(--ease-pop) both; }
@keyframes sc-in { from { opacity: 0; transform: translateX(3rem) scale(.94); } }
.sc-full { height: 100%; max-width: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(.3rem .4rem 0 rgba(43,27,51,.25)); animation: float 3.6s ease-in-out .5s infinite; transform-origin: 50% 100%; }
.sc-art-inner.locked .sc-full, .sc-art-inner.locked .sc-polaroid { filter: brightness(.25) contrast(1.2) drop-shadow(0 0 .6rem rgba(255,255,255,.6)); }
.sc-polaroid { height: 84%; aspect-ratio: .9; margin-bottom: 6%; padding: .6rem .6rem 2.4rem; background: #fff; border: .2rem solid var(--ink); box-shadow: var(--shadow); transform: rotate(3deg); animation: float 3.6s ease-in-out infinite; }
.sc-polaroid img { width: 100%; height: 100%; object-fit: cover; border: .15rem solid var(--ink); display: block; }
.sc-random { font-family: var(--f-manga); font-size: 16rem; color: #fff; -webkit-text-stroke: .4rem var(--ink); paint-order: stroke fill; align-self: center; animation: wobble 1s ease-in-out infinite; }
.sc-kanji { position: absolute; right: 1.2rem; top: 1rem; z-index: 4; width: 8.6rem; padding: .7rem .6rem .8rem; text-align: center; transform: rotate(3deg); box-shadow: .25rem .35rem .4rem rgba(0,0,0,.25); border: 0; }
.sc-kanji b { display: block; font-size: 4.6rem; line-height: 1.05; color: #c4223d; font-weight: 400; }
.sc-kanji small { display: block; font-size: .85rem; line-height: 1.2; color: var(--ink-2); margin-top: .2rem; }
.sc-quote { position: absolute; left: 1.2rem; bottom: 1.4rem; z-index: 4; max-width: 12rem; padding: .8rem 1rem; font-family: var(--f-jp); font-size: 1.3rem; line-height: 1.3; white-space: pre-line; color: var(--ink); transform: rotate(-4deg); border: 0; box-shadow: .25rem .35rem .4rem rgba(0,0,0,.25); }
.sc-bond { position: absolute; left: 1rem; top: 1rem; z-index: 4; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.sc-chip { padding: .15rem .7rem; background: rgba(255,255,255,.92); border: .15rem solid var(--ink); border-radius: 99px; font-size: .95rem; box-shadow: .12rem .15rem 0 var(--ink); }
.sc-chip.rival { background: #ffe1e4; } .sc-chip.lock { background: var(--ink); color: #fff; }

.sc-info { position: relative; flex: 1; min-height: 0; padding: .7rem 1.2rem 1rem; display: flex; flex-direction: column; gap: .5rem; transform: rotate(-.4deg); animation: slide-r .5s var(--ease-out) .08s both; }
.sc-sakura { position: absolute; left: -1.2rem; top: -.4rem; width: 4.6rem; height: 4.6rem; background: url('../assets/ui/stickers/sakura.png') center/contain no-repeat; z-index: 2; transform: rotate(-12deg); }
.sc-name-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-left: 2.6rem; min-height: 5rem; }
.sc-name { margin: 0; font-size: 5.4rem; line-height: .95; white-space: nowrap; }
.sc-class { font-size: 1.8rem; flex: none; }
.sc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; }
.sc-stats-wrap { padding: .6rem .9rem; box-shadow: none; border-width: .16rem; background-color: #fffdf6; display: flex; }
.sc-stats { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.stat-row { display: grid; grid-template-columns: 1.9rem 6.6rem 1fr 3.2rem; align-items: center; gap: .55rem; animation: slide-l .35s var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
.stat-ico { width: 1.7rem; height: 1.7rem; color: var(--ink); }
.stat-ico svg { width: 100%; height: 100%; }
.stat-name { font-size: 1rem; font-weight: 900; letter-spacing: .03em; }
.stat-val { font-size: 1.05rem; text-align: right; }
.sc-stats .statbar { height: 1.05rem; background: #b9b0a6; }
.sc-special { position: relative; padding: .6rem .9rem .7rem; display: grid; grid-template-columns: 1fr 42%; grid-template-rows: auto auto 1fr; column-gap: .6rem; box-shadow: .25rem .3rem 0 var(--ink); border-width: .16rem; overflow: hidden; }
.sc-sp-label { grid-column: 1; display: inline-block; justify-self: start; padding: .1rem .6rem; background: var(--pink); color: #fff; font-size: .8rem; font-weight: 900; border-radius: .25rem; letter-spacing: .08em; }
.sc-sp-name { grid-column: 1; font-family: var(--f-manga); font-weight: 400; font-size: 2.15rem; line-height: 1; color: #d6204f; margin-top: .25rem; -webkit-text-stroke: .05rem var(--ink); }
.sc-sp-desc { grid-column: 1; margin: .3rem 0 0; font-size: .95rem; line-height: 1.3; color: var(--ink-2); }
.sc-sp-art { grid-column: 2; grid-row: 1 / span 3; border: .16rem solid var(--ink); border-radius: .3rem; overflow: hidden; background: var(--cc); transform: rotate(2deg); }
.sc-sp-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }

.pslots { position: absolute; left: 6.4rem; right: 2.2rem; bottom: 1rem; height: 9rem; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.pslot { position: relative; display: flex; align-items: center; gap: .9rem; padding: .6rem 1rem .6rem .8rem; transform: rotate(var(--rot)); background-color: color-mix(in srgb, var(--pc) 16%, #fffaf0); background-image: radial-gradient(color-mix(in srgb, var(--pc) 22%, transparent) .18rem, transparent .2rem), var(--paper-tex); background-size: 1.4rem 1.4rem, 30rem; transition: transform .2s var(--ease-pop), opacity .2s; animation: pop-in .45s var(--ease-pop) both; }
.pslot.inactive { opacity: .45; filter: grayscale(.6); }
.pslot.is-active { box-shadow: .5rem .55rem 0 var(--ink), 0 0 0 .2rem var(--pc); }
.ps-badge { flex: none; display: grid; place-items: center; font-family: 'Dela Gothic One', var(--f-manga); font-size: 4.6rem; line-height: 1; color: var(--pc); transform: rotate(-6deg); letter-spacing: -.02em;
  text-shadow: .14rem .14rem 0 #fff, -.14rem .14rem 0 #fff, .14rem -.14rem 0 #fff, -.14rem -.14rem 0 #fff, 0 .2rem 0 #fff, .2rem 0 0 #fff, 0 -.2rem 0 #fff, -.2rem 0 0 #fff, .35rem .4rem 0 var(--ink); -webkit-text-stroke: .1rem var(--ink); paint-order: stroke fill; }
.ps-face { flex: none; width: 4.8rem; height: 4.8rem; border-radius: 50%; overflow: hidden; border: .2rem solid var(--ink); background: var(--pc); }
.ps-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ps-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .2rem; }
.ps-name { font-family: var(--f-title); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; line-height: 1; }
.ps-ready { padding: .1rem .8rem; background: var(--pc); color: #fff; border: .16rem solid var(--ink); border-radius: .4rem; font-size: 1.35rem; letter-spacing: .06em; transform: rotate(-3deg); animation: stamp .35s var(--ease-pop) both; }
@keyframes stamp { from { transform: scale(2) rotate(-12deg); opacity: 0; } }
.ps-picking { font-size: 1rem; color: var(--ink-soft); animation: blink 1.2s ease-in-out infinite; }
.ps-pad { width: 4.4rem; display: block; } .ps-pad svg { width: 100%; display: block; }
.ps-press { font-size: .95rem; font-weight: 900; letter-spacing: .06em; padding: .15rem .6rem; background: #fff; border: .14rem solid var(--ink-soft); border-radius: .3rem; animation: blink 1.6s ease-in-out infinite; }
.ps-team { position: absolute; right: .7rem; top: .4rem; font-size: 1.2rem; }
.ps-team.team0 { color: var(--team0); } .ps-team.team1 { color: var(--team1); }
.ps-dev { position: absolute; right: .8rem; bottom: .5rem; font-size: 1.3rem; }
.ps-cpu { display: flex; gap: .25rem; flex-wrap: wrap; max-width: 7.4rem; justify-content: flex-end; }
.ps-mini { min-width: 2.1rem; height: 2.1rem; padding: 0 .4rem; border: .15rem solid var(--ink); border-radius: .4rem; background: #fff; font-weight: 900; font-size: .85rem; cursor: pointer; box-shadow: .1rem .12rem 0 var(--ink); }
.ps-mini:hover, .ps-mini.is-focus { background: var(--yellow); transform: translateY(-.1rem); }
.ps-mini.swap { position: absolute; right: .6rem; bottom: .4rem; }
.pslot .btn.small { margin-left: auto; }

.sel-banner { position: absolute; left: 50%; top: 42%; z-index: 20; transform: translate(-50%, -50%) scale(.6) rotate(-4deg); opacity: 0; pointer-events: none;
  padding: .4rem 2.4rem; background: var(--yellow); border: .3rem solid var(--ink); box-shadow: var(--shadow-lg); font-family: var(--f-manga); font-size: 3.6rem; letter-spacing: .05em; white-space: nowrap; }
.sel-banner.show { animation: banner-pop 1.6s var(--ease-pop) both; }
@keyframes banner-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-10deg); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); } 25% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1) rotate(-3deg); } }
.select.is-go .sel-grid, .select.is-go .sel-right { transition: transform .35s ease-in, opacity .35s; opacity: .4; }
.select .deco-notes .note { font-size: 1.15rem; }

.wide-logo { display: block; }
.wide-logo.stacked { height: 8.4rem; }
.pslot.inactive { opacity: .5; }

/* ================= COURT SELECT ================= */
.court .scr-head, .rules .scr-head { left: 4.4rem; }
.ct-preview { position: absolute; left: 5rem; top: 12.6rem; width: 70rem; bottom: 5.2rem; z-index: 4; display: flex; flex-direction: column; gap: 1.2rem; }
.ct-postcard { position: relative; flex: 1; min-height: 0; padding: .7rem; background: #fffdf7; border: .2rem solid var(--ink); box-shadow: var(--shadow-lg); transform: rotate(-.6deg); }
.ct-pv-img { position: relative; width: 100%; height: 100%; overflow: hidden; border: .16rem solid var(--ink); }
.ct-pv-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease-out, filter .3s; }
.ct-preview.swap .ct-pv-img img { animation: pv-in .5s var(--ease-out) both; }
@keyframes pv-in { from { opacity: 0; transform: scale(1.08); } }
.ct-pv-img:hover img { transform: scale(1.05); }
.ct-pv-img.night img { filter: brightness(.55) saturate(1.3) hue-rotate(200deg) contrast(1.1); }
.ct-pv-img.locked img { filter: grayscale(.85) brightness(.55); }
.ct-stamp { position: absolute; right: 1.8rem; top: 1.6rem; width: 7rem; height: 8rem; display: grid; place-items: center; align-content: center; background: #fff; border: .2rem dashed var(--red); outline: .35rem solid #fff; transform: rotate(6deg); color: var(--red); }
.ct-stamp span { font-family: var(--f-jp); font-size: 3.4rem; line-height: 1; } .ct-stamp small { font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.ct-pv-info { padding: 1rem 1.6rem 1.2rem; }
.ct-pv-head { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.ct-pv-name { margin: 0; font-size: 3.2rem; }
.ct-pv-jp { color: var(--pink); font-size: 1.3rem; }
.ct-pv-mood { margin: .3rem 0 .8rem; font-size: 1.2rem; color: var(--ink-2); }
.ct-pv-row { display: flex; gap: 1.2rem; align-items: stretch; }
.ct-gimmick { flex: 1; padding: .6rem 1rem; display: flex; flex-direction: column; gap: .15rem; box-shadow: var(--shadow-sm); border-width: .16rem; font-size: 1.05rem; }
.ct-gimmick b { font-family: var(--f-manga); font-weight: 400; font-size: 1.7rem; color: #d6204f; letter-spacing: .03em; }
.ct-g-label { font-size: .75rem; font-weight: 900; letter-spacing: .1em; color: var(--ink-soft); }
.ct-pv-side { display: flex; flex-direction: column; gap: .6rem; justify-content: center; align-items: flex-end; }
.tag.dark { background: var(--ink); color: #fff; }
.ct-daynight { display: inline-flex; border: .2rem solid var(--ink); border-radius: .7rem; overflow: hidden; background: #fff; }
.ct-daynight .seg-opt[disabled] { opacity: .5; cursor: not-allowed; }
.ct-list { position: absolute; right: 3rem; top: 2.2rem; bottom: 5.2rem; width: 38rem; z-index: 4; display: flex; flex-direction: column; gap: .7rem; }
.ct-ticket { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; align-items: center; padding: .4rem 1.2rem .4rem .4rem; cursor: pointer; text-align: left;
  background: #fffaf0 var(--paper-tex); background-size: 24rem; border: .2rem solid var(--ink); border-radius: .3rem; box-shadow: var(--shadow-sm); transform: rotate(var(--rot));
  transition: transform .2s var(--ease-pop), box-shadow .2s; animation: slide-r .45s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms + 80ms);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent .8rem, #000 .85rem) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .8rem, #000 .85rem) right/51% 100% no-repeat; }
.ct-ticket.is-focus { transform: translateX(-1.4rem) scale(1.03); box-shadow: .5rem .5rem 0 var(--ink); background-color: #fff; outline: .3rem solid var(--pink); outline-offset: -.5rem; }
.ct-thumb { height: 100%; min-height: 0; border: .15rem solid var(--ink); overflow: hidden; border-radius: .2rem; }
.ct-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-ticket.locked .ct-thumb img { filter: grayscale(.9) brightness(.5); }
.ct-ticket.locked .ct-tk-text b { color: var(--ink-soft); }
.ct-tk-text { display: flex; flex-direction: column; min-width: 0; }
.ct-tk-text b { font-family: var(--f-title); font-weight: 400; font-size: 1.45rem; line-height: 1.05; text-transform: uppercase; }
.ct-tk-text small { font-size: .9rem; color: var(--pink); }
.ct-tk-text .ct-hint { color: var(--ink-2); } .ct-tk-text .ct-music { color: var(--ink-soft); }
.ct-num { position: absolute; right: 1.2rem; top: .3rem; font-family: var(--f-manga); font-size: 1.4rem; color: var(--ink-soft); }

/* ================= RULES ================= */
.vs-strip { position: absolute; left: 50%; top: 1.4rem; transform: translateX(-28%) rotate(1deg); z-index: 5; display: flex; align-items: center; gap: 1.4rem; padding: .7rem 1.6rem; border-color: var(--ink); animation: drop-in .5s var(--ease-pop) .1s both; }
.vs-team { display: flex; gap: .7rem; align-items: center; }
.vs-shape { font-style: normal; font-size: 1.6rem; } .t0 .vs-shape { color: var(--team0); } .t1 .vs-shape { color: var(--team1); }
.vs-face { position: relative; width: 6.6rem; text-align: center; animation: pop-in .4s var(--ease-pop) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
.vs-face img { width: 6.6rem; height: 6.6rem; object-fit: cover; object-position: 50% 20%; border-radius: .4rem; border: .2rem solid #fff; background: var(--cc); display: block; }
.vs-face b { display: block; color: #fff; font-family: var(--f-title); font-weight: 400; font-size: 1.1rem; margin-top: .2rem; }
.vs-tag { position: absolute; top: -.5rem; left: -.4rem; padding: 0 .4rem; border-radius: .3rem; background: var(--yellow); border: .14rem solid var(--ink); color: var(--ink); font-size: .8rem; font-weight: 900; }
.vs-mid { text-align: center; color: #fff; } .vs-mid b { display: block; font-size: 4rem; line-height: 1; color: var(--yellow); -webkit-text-stroke: .12rem var(--ink); text-shadow: .3rem .3rem 0 var(--pink); }
.vs-mid small { font-size: .85rem; opacity: .8; }
.preset-row { position: absolute; left: 5rem; right: 5rem; top: 14rem; height: 12rem; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.preset { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: 1.2rem 1.6rem; cursor: pointer; text-align: left; border-radius: .3rem;
  background: #fffaf0 var(--paper-tex); background-size: 26rem; border: .22rem solid var(--ink); box-shadow: var(--shadow); transform: rotate(var(--rot)); transition: transform .2s var(--ease-pop), box-shadow .2s; border-top: 1.1rem solid var(--c); }
.preset b { font-size: 2.6rem; color: var(--ink); }
.preset small { font-size: 1.05rem; color: var(--ink-2); font-weight: 700; line-height: 1.3; }
.preset-jp { font-size: 1rem; color: var(--c); filter: brightness(.85); }
.preset-check { position: absolute; right: 1rem; top: 1rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; border: .2rem solid var(--ink); font-size: 1.4rem; transform: scale(0) rotate(-40deg); transition: transform .3s var(--ease-pop); }
.preset.on { background-color: #fff; box-shadow: .6rem .6rem 0 var(--ink), 0 0 0 .3rem var(--c); }
.preset.on .preset-check { transform: none; }
.preset.is-focus { transform: rotate(0) translateY(-.4rem); }
.rl-panel { position: absolute; left: 5rem; right: 5rem; top: 28.4rem; bottom: 6.4rem; z-index: 4; padding: 1.4rem 2rem; }
.rl-cols { display: grid; grid-template-columns: 1.05fr 1fr 1.1fr; gap: 2.4rem; height: 100%; }
.rl-col { display: flex; flex-direction: column; gap: .3rem; min-height: 0; }
.rl-h { margin: 0 0 .4rem; font-family: var(--f-title); font-weight: 400; font-size: 1.8rem; display: flex; align-items: center; gap: 1rem; }
.rl-h .stamp { font-size: 1rem; padding: .1rem .5rem; }
.rl-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; }
.rl-label { font-size: 1.15rem; font-weight: 900; }
.rl-row .seg-opt { font-size: 1rem; padding: .45rem .9rem; }
.rl-assists { margin-top: auto; border-top: .16rem dashed var(--ink-soft); padding-top: .4rem; }
.rl-assists .toggle { padding: .4rem .6rem; }
.rl-col .toggle { padding: .45rem .7rem; }
.items-box { display: flex; flex-direction: column; gap: .6rem; transition: opacity .2s; }
.items-box.disabled { opacity: .35; pointer-events: none; }
.items-box .rl-label { margin-bottom: .2rem; }
.item-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.item-tog { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem; border: .16rem solid var(--ink); border-radius: .5rem; background: #fff; cursor: pointer; transition: transform .15s var(--ease-pop); }
.item-tog img { width: 3.6rem; height: 3.6rem; object-fit: contain; }
.item-tog small { font-size: .68rem; font-weight: 900; text-align: center; line-height: 1.1; }
.item-tog.off { opacity: .4; filter: grayscale(1); background: #eee; }
.item-tog.is-focus, .item-tog:hover { transform: translateY(-.2rem) rotate(-2deg); box-shadow: .2rem .25rem 0 var(--ink); }
.rl-foot { position: absolute; right: 5rem; bottom: 1.2rem; z-index: 6; }
/* settings-audit: the VS strip sits right of the title instead of under its edge; the festival ribbon gets its own
   spot under the title (it covered the strip's court name); toggles line up with the label column and the right
   edge of the segments above them; item names readable at 720p */
.rules .vs-strip { left: auto; right: 7rem; transform: rotate(1deg); }
.rules .fest-ribbon { left: 19rem; top: 10.3rem; transform: rotate(-1.5deg); z-index: 7; }
.rl-panel .toggle { width: calc(100% + 1.4rem); margin-inline: -.7rem; padding-inline: .7rem; }
.rl-assists .toggle { padding-block: .4rem; }
.rl-col .toggle-text small { color: var(--ink-2); }
.item-tog small { font-size: .8rem; }
.items-box .rl-label, .rl-cam .rl-label { font-size: 1.15rem; }
.start-btn { font-size: 1.9rem; padding: .7rem 2.6rem; animation: press-pulse 1.4s ease-in-out infinite; }

/* ================= VS SPLASH / MATCH ================= */
.vsx { background: #1b1430; }
.vsx-bg { position: absolute; inset: 0; } .vsx-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.55) saturate(1.2); transform: scale(1.05); }
.vsx-side { position: absolute; top: 0; bottom: 0; width: 58%; overflow: hidden; }
.vsx-side.s0 { left: 0; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); background: linear-gradient(135deg, rgba(255,140,60,.85), rgba(255,79,135,.75)); animation: vsx-l .55s cubic-bezier(.16,1,.3,1) both; }
.vsx-side.s1 { right: 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(225deg, rgba(91,92,240,.85), rgba(43,27,80,.85)); animation: vsx-r .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes vsx-l { from { transform: translateX(-100%); } } @keyframes vsx-r { from { transform: translateX(100%); } }
.vsx-chars { position: absolute; bottom: 0; top: 8%; display: flex; align-items: flex-end; }
.vsx-side.s0 .vsx-chars { left: 4%; right: 26%; } .vsx-side.s1 .vsx-chars { right: 4%; left: 26%; flex-direction: row-reverse; }
.vsx-char { flex: 1; height: 92%; display: flex; justify-content: center; align-items: flex-end; animation: pop-in .5s var(--ease-pop) both; animation-delay: calc(var(--i) * 120ms + 250ms); }
.vsx-char img { max-height: 100%; max-width: 135%; object-fit: contain; filter: drop-shadow(.5rem .5rem 0 rgba(43,27,51,.55)); }
.vsx-names { position: absolute; top: 6%; display: flex; flex-direction: column; gap: .2rem; }
.vsx-side.s0 .vsx-names { left: 4%; } .vsx-side.s1 .vsx-names { right: 4%; align-items: flex-end; }
.vsx-names b { color: #fff; font-size: 3.4rem; -webkit-text-stroke: .1rem var(--ink); paint-order: stroke fill; text-shadow: .3rem .3rem 0 var(--ink); animation: slide-l .45s var(--ease-out) .35s both; }
.vsx-side.s1 .vsx-names b { animation-name: slide-r; }
.vsx-slash { position: absolute; left: 50%; top: -10%; bottom: -10%; width: 1.2rem; background: #fff; transform: translateX(-50%) rotate(12deg); box-shadow: 0 0 2rem #fff; }
.vsx-vs { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); font-size: 14rem; color: var(--yellow); -webkit-text-stroke: .35rem var(--ink); paint-order: stroke fill; text-shadow: .7rem .7rem 0 var(--pink), 1.1rem 1.1rem 0 var(--ink); animation: vs-slam .5s cubic-bezier(.34,1.56,.64,1) .45s both; }
@keyframes vs-slam { from { transform: translate(-50%, -50%) scale(4) rotate(20deg); opacity: 0; } }
.vsx-info { position: absolute; left: 50%; bottom: 4.5rem; transform: translateX(-50%) rotate(-1deg); min-width: 34rem; padding: 1rem 2rem 1.1rem; text-align: center; animation: pop-in .5s var(--ease-pop) .6s both; }
.vsx-info b { display: block; font-family: var(--f-title); font-weight: 400; font-size: 2rem; }
.vsx-info small { display: block; font-size: 1.1rem; color: var(--ink-2); }
.vsx-load { margin: .7rem 0 .3rem; height: .9rem; border: .16rem solid var(--ink); border-radius: 99px; background: #e9dfd0; overflow: hidden; }
.vsx-load i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--yellow)); transition: width .15s; }
.vsx-status { font-size: 1rem; color: var(--ink-soft); }
.vsx.launched { opacity: 0; transition: opacity .5s .2s; pointer-events: none; }
.stub { position: absolute; inset: 0; }
.stub-stage, .stub-bg { position: absolute; inset: 0; } .stub-bg img { width: 100%; height: 100%; object-fit: cover; }
.stub-hud { position: absolute; inset: 0; }
.stub-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1deg); width: 40rem; padding: 1.4rem 1.8rem; z-index: 30; text-align: center; opacity: .95; }
.stub-panel b { font-size: 2.2rem; } .stub-panel p { font-size: 1.1rem; color: var(--ink-2); margin: .6rem 0 1rem; }
.stub-btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* ================= PAUSE ================= */
.pause-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(27,20,48,.6); backdrop-filter: blur(4px) saturate(.8); animation: fade-in .2s both; }
.pause-wrap.closing { animation: fade-out .2s both; }
.pause-lines { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 3rem, rgba(255,255,255,.04) 3rem 3.4rem); pointer-events: none; }
/* settings-audit: one card size for every tab (no jump on switch); only the body scrolls, so the tape never makes a
   stray scrollbar; tabs share one baseline on the ink rule, flanked by LB/RB (Q/E) glyphs */
.pause-card { display: flex; flex-direction: column; width: min(78rem, 94vw); height: min(55.5rem, 92vh); padding: 1.3rem 2rem 1.2rem; overflow: visible; animation: pop-in .35s var(--ease-pop) both; }
.pause-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; flex: none; }
.pause-head b { font-size: 4.6rem; line-height: 1; color: var(--pink); -webkit-text-stroke: .1rem var(--ink); paint-order: stroke fill; text-shadow: .25rem .25rem 0 var(--ink); transform: rotate(-3deg); }
.pause-head > span { font-size: 1.4rem; color: var(--ink-2); }
.pause-tabbar { flex: none; display: flex; align-items: flex-end; gap: .45rem; margin-top: .7rem; padding-left: .2rem; border-bottom: .2rem solid var(--ink); }
.pause-tabs { display: flex; align-items: flex-end; gap: .45rem; }
.pause-tab { display: inline-flex; align-items: center; height: 3rem; padding: 0 1.3rem; margin-bottom: -.2rem; border: .18rem solid var(--ink); border-bottom: 0; border-radius: .6rem .6rem 0 0; background: #e8d6b6; color: var(--ink-2); font-weight: 900; font-size: 1.1rem; line-height: 1; white-space: nowrap; cursor: pointer; transition: height .15s var(--ease-pop), background-color .15s; }
.pause-tab.on { height: 3.4rem; color: var(--ink); background: var(--paper) var(--paper-tex); background-size: 32rem; box-shadow: inset 0 .35rem 0 var(--pink); }
.pause-tab.is-focus { background: var(--yellow); color: var(--ink); }
.pause-tab-key { align-self: center; margin-bottom: .35rem; cursor: pointer; filter: drop-shadow(0 .12rem .1rem rgba(43,27,51,.3)); }
.pause-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem .6rem .6rem .2rem; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--pink-2) transparent; }
.pause-main { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.8rem; align-items: start; }
.pause-actions { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; gap: .9rem; padding: .3rem .4rem 0 0; }
.pause-actions .btn { justify-content: flex-start; min-height: 4.6rem; font-size: 1.5rem; padding-inline: 1.5rem; }
.pause-info { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1.2rem; border: .16rem dashed rgba(43,27,51,.25); border-radius: .8rem; background: rgba(255,255,255,.4); }
.pause-teams { display: flex; flex-direction: column; gap: .8rem; }
.pause-team { display: flex; align-items: center; gap: .9rem; } .pause-team > i { font-style: normal; font-size: 1.6rem; width: 1.8rem; text-align: center; }
.pause-team.t0 > i { color: var(--team0); } .pause-team.t1 > i { color: var(--team1); }
.pause-faces { display: flex; gap: .8rem; }
.pause-face { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 6.4rem; }
.pause-face img { width: 6.4rem; height: 6.4rem; object-fit: cover; object-position: 50% 20%; border: .2rem solid var(--ink); border-radius: .6rem; background: #fff; box-shadow: var(--shadow-sm); }
.pause-face b { font-size: 1.05rem; }
.pause-face em { position: absolute; top: -.5rem; left: -.4rem; padding: 0 .4rem; border: .14rem solid var(--ink); border-radius: .3rem; background: var(--yellow); font-style: normal; font-size: .85rem; font-weight: 900; }
.pause-face em.cpu { background: #d9d0ff; }
.pause-rules { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .8rem; border-top: .14rem dashed rgba(43,27,51,.2); }
.pause-rules .tag { font-size: .9rem; } .pause-rules .tag.on { background: #e7f6dd; } .pause-rules .tag.off { color: var(--ink-2); background: #efe7da; }
.pause-court { font-size: 1rem; font-weight: 900; color: var(--ink-2); }
.pause-ctl { padding-top: .8rem; border-top: .14rem dashed rgba(43,27,51,.2); }
.pause-ctl h4 { margin: 0 0 .5rem; font-family: var(--f-title); font-weight: 400; font-size: 1.3rem; }
.pause-ctl .mv-controls { margin: 0; }
.pause-note { display: block; margin-top: .8rem; font-size: .95rem; color: var(--ink-2); }
.ctl-table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.ctl-table th { text-align: left; padding: .4rem .5rem; border-bottom: .16rem solid var(--ink); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.ctl-table td { padding: .35rem .5rem; border-bottom: .1rem dashed rgba(43,27,51,.2); }
.ctl-table .kbd { min-width: 2.4rem; }
.kbd.padk { background: var(--ink); color: #fff; }

/* ================= RESULTS (mockup-3 vibe) ================= */
.results { background: #2b1b33; }
.rs-split { position: absolute; inset: 0; }
.rs-panel { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.rs-panel.win { left: 0; width: 64%; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); animation: vsx-l .6s var(--ease-out) both; }
.rs-panel.lose { right: 0; width: 50%; clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); animation: vsx-r .6s var(--ease-out) .1s both; }
.rs-panel-bg { position: absolute; inset: 0; } .rs-panel-bg img { width: 100%; height: 100%; object-fit: cover; }
.rs-panel.win .rs-panel-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,200,120,.45), rgba(255,110,150,.35)); }
.rs-panel.lose .rs-panel-bg img { filter: grayscale(.4) brightness(.55) hue-rotate(210deg) saturate(1.4); }
.rs-panel.lose .rs-panel-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(60,40,140,.55), rgba(30,20,70,.7)); }
.rs-divider { position: absolute; left: 50%; top: -10%; bottom: -10%; width: .9rem; background: #fff; transform: translateX(-1.6rem) rotate(13deg); box-shadow: 0 0 0 .25rem var(--ink); z-index: 2; }
.rs-chars { position: absolute; bottom: 0; top: 14%; display: flex; align-items: flex-end; gap: 0; z-index: 2; }
.rs-panel.win .rs-chars { left: 3%; right: 26%; } .rs-panel.lose .rs-chars { left: 30%; right: 2%; }
.rs-char { position: relative; flex: 1; height: 100%; display: flex; justify-content: center; align-items: flex-end; animation: pop-in .6s var(--ease-pop) both; animation-delay: calc(var(--i) * 140ms + 350ms); }
.rs-char .rs-art { max-height: 100%; max-width: 140%; object-fit: contain; filter: drop-shadow(.5rem .6rem 0 rgba(43,27,51,.5)); }
.rs-panel.win .rs-char .rs-art { animation: rs-hop .9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.rs-panel.win .rs-char:nth-child(2) .rs-art { animation-delay: .3s; }
@keyframes rs-hop { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-1.4rem) rotate(1.5deg); } }
.rs-panel.lose .rs-char .rs-art { filter: grayscale(.5) brightness(.7) drop-shadow(.5rem .6rem 0 rgba(0,0,0,.5)); transform: translateY(10%) rotate(-4deg); }
.rs-tears { position: absolute; left: 50%; top: 22%; width: 30%; height: 50%; transform: translateX(-50%); background: repeating-linear-gradient(90deg, transparent 0 .6rem, rgba(140,210,255,.75) .6rem 1.2rem); mask: linear-gradient(transparent, #000 10%, #000 80%, transparent); -webkit-mask: linear-gradient(transparent, #000 10%, #000 80%, transparent); animation: tears .4s linear infinite; opacity: .8; }
@keyframes tears { to { background-position: 0 2rem; } }
.rs-rain { position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(100deg, transparent 0 2.4rem, rgba(200,220,255,.18) 2.4rem 2.55rem); animation: rain .35s linear infinite; }
@keyframes rain { to { background-position: -1rem 4rem; } }
.rs-cloud { position: absolute; right: 8%; top: 16%; z-index: 3; font-size: 9rem; color: #d7d2ea; filter: drop-shadow(0 .4rem 0 var(--ink)); animation: float 2.4s ease-in-out infinite; }
.rs-cloud span { display: block; line-height: 1; }
.rs-sfx { position: absolute; z-index: 4; font-size: 9rem; line-height: 1; -webkit-text-stroke: .3rem var(--ink); paint-order: stroke fill; }
.rs-panel.win .rs-sfx { left: 2.4rem; top: 40%; color: #ffd6ec; text-shadow: .6rem .6rem 0 var(--pink); transform: rotate(-10deg); animation: vs-slam .5s var(--ease-pop) .7s both; background: linear-gradient(#fff, #ffc2dc); -webkit-background-clip: text; background-clip: text; }
.rs-panel.lose .rs-sfx { right: 4rem; top: 18%; color: #3446a8; text-shadow: .6rem .6rem 0 #b9c4ff; transform: rotate(8deg); animation: vs-slam .5s var(--ease-pop) .9s both; }
.rs-names { position: absolute; z-index: 4; bottom: 1.4rem; display: flex; flex-direction: column; gap: .1rem; }
.rs-panel.win .rs-names { left: 2rem; } .rs-panel.lose .rs-names { right: 2rem; align-items: flex-end; }
.rs-names b { color: #fff; font-size: 2.2rem; -webkit-text-stroke: .08rem var(--ink); paint-order: stroke fill; text-shadow: .2rem .2rem 0 var(--ink); }
.rs-banner { position: absolute; left: 50%; top: 1.4rem; z-index: 6; transform: translateX(-62%); display: flex; flex-direction: column; align-items: center; animation: drop-in .55s var(--ease-pop) .2s both; }
.rs-banner-logo { height: 5.4rem; margin-bottom: -.8rem; position: relative; z-index: 2; filter: drop-shadow(0 .3rem .3rem rgba(0,0,0,.3)); }
.rs-banner-strip { display: flex; align-items: center; gap: 1.2rem; padding: .7rem 3.6rem .9rem; background: var(--paper) var(--paper-tex); background-size: 30rem; border: .28rem solid var(--ink); box-shadow: var(--shadow-lg);
  clip-path: polygon(3% 8%, 8% 0, 92% 3%, 97% 0, 100% 40%, 97% 100%, 60% 96%, 4% 100%, 0 60%); transform: rotate(-2deg); outline: .5rem solid var(--pink); }
.rs-banner-strip .title-marker { font-size: 4.4rem; }
.rs-banner-strip b { font-family: 'Dela Gothic One', var(--f-manga); font-weight: 400; font-size: 4.6rem; line-height: 1; }
.rs-s0 { color: #e8336b; } .rs-s1 { color: #3446a8; } .rs-banner-strip i { font-style: normal; font-size: 3.4rem; }
.rs-games { margin-top: .8rem; display: flex; gap: .6rem; } .rs-games span { padding: .1rem .7rem; background: var(--ink); color: #fff; border-radius: .3rem; font-size: 1rem; }
.rs-rewards { position: absolute; right: 2.4rem; bottom: 7rem; width: 50rem; z-index: 7; padding: 1.2rem 1.6rem 1.2rem; transform: translateX(120%) rotate(2deg); transition: transform .6s var(--ease-pop); }
.rs-rewards.in { transform: rotate(-1deg); }
.rs-rw-head { display: flex; align-items: baseline; gap: 1rem; } .rs-rw-head .title-marker { font-size: 2.6rem; } .rs-rw-head .jp { color: var(--pink); font-size: 1.2rem; }
.rs-rw-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.4rem; margin-top: .6rem; }
.rs-xp { display: flex; gap: 1rem; align-items: flex-start; }
.rs-lv { flex: none; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--yellow); border: .22rem solid var(--ink); display: grid; place-items: center; align-content: center; line-height: .9; box-shadow: var(--shadow-sm); }
.rs-lv small { font-size: .8rem; } .rs-lv b { font-size: 1.9rem; }
.rs-lv.pop { animation: card-pop .6s var(--ease-pop); }
.rs-xp-main { flex: 1; min-width: 0; }
.rs-xp-top { display: flex; justify-content: space-between; font-size: 1.15rem; margin-bottom: .3rem; } .rs-xp-top b { font-size: 1.3rem; }
.rs-bar { height: 1.3rem; } .rs-bar i { transition: width .5s var(--ease-out); }
.rs-lines { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .98rem; }
.rs-lines li { display: flex; justify-content: space-between; padding: .12rem 0; border-bottom: .1rem dashed rgba(43,27,51,.18); animation: slide-l .35s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 1.4s); }
.rs-lines b { color: #d6204f; }
.rs-side { display: flex; flex-direction: column; gap: .6rem; }
.rs-fp { display: flex; align-items: center; gap: .7rem; padding: .4rem .8rem; background: #fff; border: .16rem solid var(--ink); border-radius: .6rem; }
.rs-fp img { width: 3.2rem; } .rs-fp small, .rs-bond small, .rs-ki small { display: block; font-size: .8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.rs-fp span { font-size: 1.6rem; font-weight: 900; color: #c98a00; }
.rs-bond { display: flex; align-items: center; gap: .6rem; }
.rs-bond-face { width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; border: .16rem solid var(--ink); flex: none; } .rs-bond-face img { width: 100%; height: 100%; object-fit: cover; }
.rs-hearts { color: var(--pink); font-size: 1.05rem; letter-spacing: .05em; } .rs-hearts em { color: #d8cfc4; font-style: normal; }
.rs-up { margin-left: auto; padding: .05rem .5rem; background: var(--pink); color: #fff; border-radius: .3rem; font-size: .85rem; animation: wobble .8s ease-in-out infinite; }
.rs-ki { display: flex; align-items: center; gap: .7rem; padding: .3rem .6rem; background: #eef2ff; border: .16rem solid var(--ink); border-radius: .6rem; }
.rs-ki img { width: 3.6rem; } .rs-ki b { font-size: 1.8rem; color: var(--navy); margin-right: .6rem; } .rs-ki .up { color: #2fa36b; font-weight: 900; } .rs-ki .down { color: #e23a4e; font-weight: 900; }
.rs-hl { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.rs-hl-chip { padding: .15rem .8rem; border: .16rem solid var(--ink); border-radius: .4rem; background: #fff; font-family: var(--f-manga); font-size: 1.15rem; letter-spacing: .05em; transform: rotate(-2deg); }
.rs-hl-chip.mine { background: var(--yellow); } .rs-hl-chip.info { font-family: var(--f-ui); font-size: .9rem; font-weight: 900; transform: none; }
.rs-actions { position: absolute; right: 2.4rem; bottom: 1.4rem; z-index: 8; display: flex; gap: 1rem; animation: pop-in .4s var(--ease-pop) 1.6s both; }
[data-screen=results] ~ .hints { left: 2rem; transform: none; }

/* unlock reveal */
.modal-card.unlock-card { min-width: 40rem; text-align: center; overflow: hidden; background-color: #fff6e0; }
.ul-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem 0 .4rem; }
.ul-rays { position: absolute; left: 50%; top: 52%; width: 60rem; height: 60rem; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255,210,63,.45) 0 9deg, transparent 9deg 18deg); animation: spin 18s linear infinite; border-radius: 50%; mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); }
.ul-kind { position: relative; font-size: 3.4rem; color: var(--pink); -webkit-text-stroke: .1rem var(--ink); paint-order: stroke fill; text-shadow: .25rem .25rem 0 var(--ink); transform: rotate(-4deg); animation: vs-slam .5s var(--ease-pop) both; }
.ul-art { position: relative; width: 16rem; height: 16rem; animation: ul-pop .7s var(--ease-pop) .15s both; }
.ul-art img { width: 100%; height: 100%; object-fit: contain; }
.ul-art.k-character img, .ul-art.k-court img { object-fit: cover; border: .3rem solid var(--ink); border-radius: .6rem; box-shadow: var(--shadow); background: #fff; }
.ul-art.k-court { width: 24rem; }
@keyframes ul-pop { from { transform: scale(0) rotate(-30deg); } }
.ul-name { position: relative; font-size: 2.8rem; }
.ul-sub { position: relative; font-size: 1.1rem; color: var(--ink-2); }
.unlock-card .modal-actions { justify-content: center; position: relative; }
/* results refinements */
[data-screen=results] ~ .hints { display: none; }
.rs-panel.lose .rs-chars { top: 22%; bottom: 33%; left: 34%; }
.rs-panel.lose .rs-char .rs-art { filter: saturate(.6) brightness(.92) drop-shadow(.5rem .6rem 0 rgba(0,0,0,.5)); transform: rotate(-3deg); }
.rs-panel.lose .rs-names { top: 12rem; bottom: auto; right: 2rem; }
.rs-panel.lose .rs-sfx { top: 9%; }
.rs-panel.lose .rs-cloud { top: 24%; right: 4%; font-size: 7rem; }

/* ================= LEADERBOARD (mockup-4) ================= */
[data-screen=leaderboard] ~ .hints { display: none; }
.leaderboard { --navy-d: #1b2350; --gold: #e8c46a; }
.lb-logo { position: absolute; left: 2.6rem; top: .6rem; z-index: 5; display: flex; align-items: center; gap: 1rem; animation: drop-in .5s var(--ease-pop) both; }
.lb-logo .wide-logo { height: 8.6rem; max-width: 34rem; object-fit: contain; filter: drop-shadow(0 .4rem .6rem rgba(0,0,0,.45)); transform: rotate(-3deg); }
.lb-tagline { font-family: var(--f-hand); color: #ffe3f0; font-size: 1.15rem; line-height: 1.15; white-space: pre-line; transform: rotate(-8deg); text-shadow: 0 .1rem .3rem rgba(0,0,0,.7); }
.lb-kanji { position: absolute; right: 1.6rem; top: -.4rem; z-index: 1; padding: .6rem 1.2rem 1.4rem; background: rgba(255,248,236,.92); color: var(--ink); font-size: 4.6rem; line-height: 1; box-shadow: 0 .4rem 1rem rgba(0,0,0,.4); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); }
.lb-tabs { position: absolute; right: 9rem; top: 4.4rem; z-index: 5; display: flex; gap: .5rem; animation: drop-in .5s var(--ease-pop) .05s both; }
.lb-tab { position: relative; display: flex; align-items: center; gap: .7rem; padding: .65rem 1.5rem; min-width: 11.6rem; justify-content: center; cursor: pointer; color: #fff; font-weight: 900; font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, #2d3770, #1b2350); border: .18rem solid #6b76b8; border-radius: .7rem; box-shadow: 0 .3rem 0 rgba(0,0,0,.4); transition: transform .15s var(--ease-pop), background .2s; }
.lb-tab-ico { width: 1.7rem; height: 1.7rem; display: inline-flex; } .lb-tab-ico svg { width: 100%; height: 100%; }
.lb-tab.on { background: linear-gradient(180deg, #fff4c8, #f2c84f); color: var(--ink); border-color: #fff3c4; box-shadow: 0 .3rem 0 #8a6414, 0 0 1.4rem rgba(255,210,80,.6); }
.lb-tab.on::after { content: ''; position: absolute; left: 50%; bottom: -.75rem; width: 1.2rem; height: 1.2rem; background: #f2c84f; transform: translateX(-50%) rotate(45deg); border-right: .18rem solid #fff3c4; border-bottom: .18rem solid #fff3c4; }
.lb-tab.is-focus, .lb-tab:hover { transform: translateY(-.2rem); border-color: #fff; }
.leaderboard .back-btn { left: auto; right: 77rem; top: 4.7rem; bottom: auto; }

.lb-profile { position: absolute; left: 1.6rem; top: 11.2rem; width: 55rem; bottom: 15.4rem; z-index: 4; display: grid; grid-template-columns: 1fr 17.6rem;
  border: .45rem solid #1b2350; outline: .2rem solid var(--gold); outline-offset: -.6rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.45); animation: slide-l .55s var(--ease-out) .1s both; background: #1b2350; }
.lb-art { position: relative; overflow: hidden; }
.lb-art-bg { position: absolute; inset: 0; background: url('../assets/ui/bg/night-market.jpg') 30% 40%/180% auto; filter: saturate(1.1); }
.lb-art-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 55% 45%, rgba(255,180,120,.25), transparent 70%), linear-gradient(180deg, transparent 60%, rgba(27,35,80,.55)); }
.lb-art-img { position: absolute; left: 6%; right: 4%; top: 3%; bottom: -14%; display: flex; justify-content: center; align-items: flex-start; }
.lb-art-img img { height: 120%; max-width: 120%; object-fit: contain; object-position: 50% 0; filter: drop-shadow(.4rem .5rem 0 rgba(27,35,80,.45)); animation: float 4s ease-in-out infinite; }
.lb-banner { position: absolute; left: 1.4rem; top: 1.6rem; writing-mode: vertical-rl; padding: 1rem .5rem; background: rgba(255,240,236,.85); color: #c4223d; font-size: 1.5rem; letter-spacing: .1em; box-shadow: 0 .3rem .6rem rgba(0,0,0,.3); }
.lb-quote { position: absolute; right: 1.2rem; top: 7rem; font-family: var(--f-hand); color: #fff; font-size: 1.15rem; line-height: 1.15; white-space: pre-line; text-align: center; transform: rotate(-8deg); text-shadow: 0 .1rem .3rem rgba(0,0,0,.8); }
.lb-sig { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.2rem; z-index: 2; }
.lb-sig b { display: block; font-family: var(--f-hand); font-size: 4.6rem; line-height: 1; color: #ffd9e6; transform: rotate(-6deg); transform-origin: 0 100%; text-shadow: .2rem .2rem 0 #c4223d, .4rem .4rem 0 rgba(0,0,0,.4); }
.lb-sig small { display: block; max-width: 22rem; font-family: var(--f-hand); color: #fff; font-size: 1.1rem; line-height: 1.2; margin-top: .4rem; transform: rotate(-4deg); text-shadow: 0 .1rem .3rem rgba(0,0,0,.9); }
.lb-stats { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1rem .8rem 1.2rem; text-align: center;
  background: #fff8ec var(--paper-tex); background-size: 24rem; color: var(--ink); }
.lb-stats::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 100% 100%, rgba(120,170,230,.18) 0 3.2rem, transparent 3.25rem) 0 0/6rem 3rem; opacity: .7; }
.lb-badge { position: relative; width: 12.4rem; height: 12.4rem; object-fit: contain; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.25)); animation: float 3.2s ease-in-out infinite; }
.lb-ki { position: relative; line-height: .9; } .lb-ki small { display: block; font-size: 1.9rem; font-weight: 900; color: var(--navy); }
.lb-ki b { display: block; font-size: 5rem; font-weight: 900; color: var(--navy); letter-spacing: -.02em; }
.lb-rankname { position: relative; font-size: 2.3rem; padding: .1rem 2rem .25rem; }
.lb-aura { position: relative; width: 10.6rem; height: 10.6rem; }
.lb-aura > span, .lb-aura > span svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-aura > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .95; }
.lb-aura small { font-size: 1.15rem; font-weight: 900; color: var(--navy); } .lb-aura b { font-size: 2.8rem; color: var(--navy); }
.lb-world { position: relative; } .lb-world b { display: block; font-size: 2.6rem; color: var(--navy); }
.lb-world small { display: inline-flex; align-items: center; gap: .3rem; font-size: 1rem; font-weight: 900; color: var(--navy); }
.lb-world small span { width: 1.1rem; height: 1.1rem; display: inline-flex; } .lb-world svg { width: 100%; }

.lb-table { position: absolute; left: 58.4rem; right: 1.6rem; top: 11.2rem; bottom: 15.4rem; z-index: 4; display: flex; flex-direction: column; padding: .8rem 1.2rem .6rem;
  background: #fbf4e6 var(--paper-tex); background-size: 30rem; border: .3rem solid #1b2350; outline: .2rem solid var(--gold); outline-offset: -.55rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.45); animation: slide-r .55s var(--ease-out) .15s both; }
.lb-table::before { content: ''; position: absolute; inset: .6rem; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 50% 100%, transparent 1.3rem, rgba(200,180,140,.25) 1.35rem 1.5rem, transparent 1.55rem) 0 0/3rem 1.6rem; mask: linear-gradient(90deg, transparent 50%, #000); -webkit-mask: linear-gradient(90deg, transparent 50%, #000); }
.lb-head { position: relative; display: grid; grid-template-columns: 7rem 1fr 4rem 9rem 5rem; align-items: center; padding: .1rem .6rem .5rem; font-weight: 900; font-size: 1.15rem; color: var(--navy); letter-spacing: .03em; }
.lb-head span:nth-child(4) { text-align: center; }
.lb-rows { position: relative; flex: 1; display: flex; flex-direction: column; gap: .2rem; min-height: 0; transition: opacity .2s; }
.lb-rows.loading { opacity: .4; }
.lb-row { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 7rem 1fr 4rem 9rem 5rem; align-items: center; padding: 0 .6rem; border-bottom: .12rem solid rgba(43,27,51,.14); animation: slide-r .35s var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
.lb-row.gold, .lb-row.silver, .lb-row.bronze { flex: 1.55; border-radius: .4rem; border: .16rem solid rgba(0,0,0,.18); margin-bottom: .25rem; box-shadow: inset 0 .2rem 0 rgba(255,255,255,.6); }
.lb-row.gold { background: linear-gradient(180deg, #fff1c2, #f1cf6c 60%, #e6b84a); }
.lb-row.silver { background: linear-gradient(180deg, #f6f7fb, #d4d8e3 60%, #c2c7d4); }
.lb-row.bronze { background: linear-gradient(180deg, #fbe4cf, #e7b98d 60%, #d9a375); }
.lb-row.you { outline: .25rem solid var(--pink); outline-offset: -.1rem; background: #ffe6ef; }
.lb-row.you em { margin-left: .6rem; padding: 0 .4rem; font-style: normal; background: var(--pink); color: #fff; border-radius: .3rem; font-size: .8rem; vertical-align: middle; }
.lb-num { font-size: 1.5rem; font-weight: 900; color: var(--navy); text-align: center; }
.lb-laurel { position: relative; width: 5.2rem; height: 4.3rem; display: grid; place-items: center; justify-self: center; color: #8a6414; }
.lb-laurel.silver { color: #6b7187; } .lb-laurel.bronze { color: #8c5a2c; }
.lb-laurel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-laurel b { position: relative; font-family: 'Dela Gothic One', var(--f-ui); font-weight: 400; font-size: 2.6rem; color: var(--ink); -webkit-text-stroke: .05rem rgba(255,255,255,.6); }
.lb-av { width: 3.6rem; height: 3.6rem; border-radius: 50%; overflow: hidden; border: .16rem solid var(--ink); background: #fff; position: absolute; left: 7.4rem; top: 50%; transform: translateY(-50%); }
.lb-row.gold .lb-av, .lb-row.silver .lb-av, .lb-row.bronze .lb-av { width: 4.4rem; height: 4.4rem; }
.lb-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lb-name { padding-left: 5.6rem; font-size: 1.35rem; font-weight: 900; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row.gold .lb-name, .lb-row.silver .lb-name, .lb-row.bronze .lb-name { font-size: 1.7rem; color: var(--ink); }
.lb-flag { font-size: 1.9rem; text-align: center; line-height: 1; }
.lb-val { text-align: center; font-size: 1.4rem; font-weight: 900; color: var(--navy); }
.lb-row.gold .lb-val, .lb-row.silver .lb-val, .lb-row.bronze .lb-val { font-size: 1.9rem; color: var(--ink); }
.lb-rowbadge { width: 3.6rem; height: 3.6rem; object-fit: contain; justify-self: center; }
.lb-row.gold .lb-rowbadge, .lb-row.silver .lb-rowbadge, .lb-row.bronze .lb-rowbadge { width: 4.8rem; height: 4.8rem; }
.lb-foot { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .6rem 0; font-size: .95rem; color: var(--ink-2); }
.lb-src { color: var(--ink-soft); }

.lb-strip { position: absolute; left: 2.4rem; right: 2.4rem; bottom: .9rem; height: 13.4rem; z-index: 4; display: grid; grid-template-columns: repeat(6, 1fr);
  background: linear-gradient(180deg, rgba(30,34,72,.94), rgba(20,22,52,.96)); border: .2rem solid #6b76b8; border-radius: .4rem; box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.45); animation: pop-in .5s var(--ease-out) .2s both; }
.lb-rank { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; animation: pop-in .4s var(--ease-pop) both; animation-delay: calc(var(--i) * 50ms + 300ms); }
.lb-rank + .lb-rank::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: .1rem; background: rgba(255,255,255,.18); }
.lb-rank img { width: 8.8rem; height: 8.8rem; object-fit: contain; transition: transform .25s var(--ease-pop); }
.lb-rank:hover img, .lb-rank.mine img { transform: scale(1.1) rotate(-4deg); }
.lb-rank-name { margin-top: -1.1rem; min-width: 12rem; padding: .25rem 1.6rem .3rem; text-align: center; font-weight: 900; font-size: 1.35rem; letter-spacing: .05em; color: var(--ink); background: var(--rc); position: relative; z-index: 1;
  clip-path: polygon(3% 15%, 12% 0, 45% 8%, 80% 0, 98% 10%, 100% 55%, 96% 100%, 60% 92%, 25% 100%, 2% 88%, 0 50%); }
.lb-rank:nth-child(1) .lb-rank-name { color: #8a1f4a; } .lb-rank:nth-child(4) .lb-rank-name { background: #e3e6ef; }
.lb-rank small { color: rgba(255,255,255,.65); font-size: .85rem; }
.lb-rank.mine::after { content: 'YOU'; position: absolute; top: .6rem; right: 1.2rem; padding: 0 .5rem; background: var(--pink); color: #fff; border-radius: .3rem; font-size: .8rem; font-weight: 900; }
.leaderboard .back-btn { right: auto; left: 50.5rem; }
.lb-rank-name { text-transform: uppercase; }

/* ================= TOURNAMENT ================= */
.cup-row { position: absolute; left: 5rem; right: 5rem; top: 12.4rem; height: 23.5rem; z-index: 4; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; }
.cup-poster { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.4rem 1rem 1rem; cursor: pointer; text-align: center;
  background: #fffaf0 var(--paper-tex); background-size: 24rem; border: .22rem solid var(--ink); border-top: 1.2rem solid var(--c); border-radius: .3rem; box-shadow: var(--shadow);
  transform: rotate(var(--rot)); transition: transform .22s var(--ease-pop), box-shadow .2s; animation: pop-in .5s var(--ease-pop) both; animation-delay: calc(var(--i) * 60ms + 100ms); }
.cup-poster.is-focus { transform: rotate(0) translateY(-.8rem) scale(1.05); box-shadow: .7rem .8rem 0 var(--ink), 0 0 0 .3rem var(--c); z-index: 3; }
.cup-emblem { width: 12rem; height: 12rem; display: grid; place-items: center; }
.cup-emblem img { max-width: 100%; max-height: 100%; filter: drop-shadow(.2rem .3rem 0 rgba(43,27,51,.3)); transition: transform .3s var(--ease-pop); }
.cup-poster.is-focus .cup-emblem img { transform: scale(1.1) rotate(-6deg); animation: wobble 1.4s ease-in-out .3s infinite; }
.cup-poster b { font-size: 1.9rem; } .cup-poster .jp { font-size: 1rem; color: var(--c); filter: brightness(.8); }
.cup-medals { display: flex; gap: .8rem; margin-top: auto; }
.cup-medal { display: flex; align-items: center; gap: .2rem; font-size: .8rem; color: var(--ink-soft); }
.cup-poster.locked .cup-emblem img { filter: grayscale(1) brightness(.5); }
.cup-poster.secret .cup-emblem img { filter: brightness(0) drop-shadow(0 0 .6rem rgba(255,210,63,.8)); }
.cup-lock { position: absolute; inset: 1.4rem 0 auto; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding-top: 3rem; }
.cup-lock small { padding: .2rem .6rem; background: var(--ink); color: #fff; border-radius: .3rem; font-size: .85rem; }
.diff-row { position: absolute; left: 5rem; top: 38.2rem; z-index: 5; display: flex; align-items: center; gap: 1.2rem; }
.diff-stamp { display: flex; flex-direction: column; align-items: flex-start; width: 17rem; padding: .5rem 1rem; cursor: pointer; text-align: left; border: .22rem dashed var(--c); border-radius: .5rem; background: rgba(255,250,240,.92); transform: rotate(-1.5deg); transition: transform .2s var(--ease-pop); }
.diff-stamp b { font-family: var(--f-manga); font-weight: 400; font-size: 2rem; color: var(--c); letter-spacing: .05em; }
.diff-stamp small { font-size: .82rem; color: var(--ink-2); line-height: 1.2; }
.diff-stamp.on { border-style: solid; background: #fff; box-shadow: .3rem .3rem 0 var(--ink), 0 0 0 .25rem var(--c); transform: rotate(0) scale(1.04); }
.diff-stamp.is-focus { outline: .25rem solid var(--yellow); }
.cup-detail { position: absolute; left: 5rem; right: 5rem; top: 46.4rem; bottom: 2.4rem; z-index: 4; display: grid; grid-template-columns: 26rem 1fr; gap: 1.6rem; padding: 1rem 1.2rem; transform: rotate(-1deg); border-left: 1rem solid var(--c); }
.cd-art { position: relative; border: .2rem solid var(--ink); background: center/cover #2b1b33; display: grid; place-items: center; }
.cd-q { font-size: 8rem; color: var(--yellow); }
.cd-jp { position: absolute; right: .6rem; bottom: .4rem; padding: .1rem .5rem; background: rgba(43,27,51,.8); color: #fff; font-size: 1rem; }
.cd-body { min-width: 0; padding-right: 22rem; }
.cd-body h2 { margin: 0; font-size: 2.6rem; }
.cd-blurb { margin: .3rem 0 .6rem; font-size: 1.15rem; color: var(--ink-2); }
.cd-courts, .cd-rewards { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.cd-courts .rl-label, .cd-rewards .rl-label { margin-right: .4rem; font-size: 1rem; }
.tag.reward { background: #fff3c4; }
.cd-locked { font-weight: 900; color: var(--red); }
.cup-actions { position: absolute; right: 7rem; bottom: 4.2rem; z-index: 6; display: flex; gap: 1rem; align-items: center; }

/* ================= BRACKET ================= */
.bk-cup { position: absolute; right: 3rem; top: .6rem; width: 9rem; z-index: 6; animation: drop-in .5s var(--ease-pop) both; }
.bk-cup img { width: 100%; filter: drop-shadow(.2rem .3rem 0 rgba(43,27,51,.4)); }
.bk-board { position: absolute; left: 4rem; right: 4rem; top: 11.6rem; bottom: 10rem; z-index: 4; padding: 1.2rem 1.6rem; }
.bk-grid { height: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr .7fr; gap: 2.4rem; }
.bk-col { display: flex; flex-direction: column; justify-content: space-around; gap: .6rem; position: relative; }
.bk-round { position: absolute; top: -.6rem; left: 0; right: 0; text-align: center; font-family: var(--f-title); font-size: 1.4rem; }
.bk-round small { display: block; font-family: var(--f-ui); font-size: .8rem; color: var(--ink-soft); }
.bk-col:first-child { padding-top: 2.6rem; }
.bk-match { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .4rem; border: .18rem solid var(--ink); border-radius: .5rem; background: #fff; box-shadow: var(--shadow-sm); animation: pop-in .4s var(--ease-pop) both; animation-delay: calc(var(--i) * 60ms); }
.bk-match.next { box-shadow: .3rem .3rem 0 var(--ink), 0 0 0 .3rem var(--pink); animation: card-glow 1s ease-in-out infinite; }
.bk-match.empty { opacity: .5; border-style: dashed; box-shadow: none; }
.bk-match::after { content: ''; position: absolute; right: -2.4rem; top: 50%; width: 2.4rem; height: .2rem; background: var(--ink); }
.bk-col:nth-child(3) .bk-match::after { width: 2.4rem; }
.bk-vs { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-family: var(--f-manga); font-size: 1rem; color: var(--ink-soft); }
.bk-team { display: flex; align-items: center; gap: .5rem; padding: .2rem .4rem; border-radius: .3rem; font-size: 1rem; min-height: 2.6rem; }
.bk-team b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-team em { font-style: normal; font-size: .7rem; padding: 0 .35rem; border-radius: .25rem; background: var(--red); color: #fff; } .bk-team em.me { background: var(--pink); }
.bk-team.me { background: #ffe6ef; } .bk-team.rival { background: #e9e6ff; }
.bk-team.win { font-weight: 900; } .bk-team.win::after { content: '★'; margin-left: auto; margin-right: 2.4rem; color: #e9b43a; }
.bk-team.lose { opacity: .45; text-decoration: line-through; }
.bk-team.tbd { justify-content: center; color: var(--ink-soft); font-weight: 900; }
.bk-faces { display: flex; } .bk-face { width: 2.2rem; height: 2.2rem; border-radius: 50%; overflow: hidden; border: .14rem solid var(--ink); margin-left: -.4rem; background: #fff; } .bk-face:first-child { margin-left: 0; }
.bk-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bk-trophy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; }
.bk-trophy img { width: 100%; max-width: 13rem; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 .4rem .4rem rgba(0,0,0,.2)); }
.bk-trophy b { font-size: 1.5rem; } .bk-trophy small { color: var(--ink-soft); font-weight: 900; }
.bk-foot { position: absolute; left: 4rem; right: 4rem; bottom: 1.4rem; height: 7.4rem; z-index: 5; display: flex; justify-content: space-between; align-items: center; }
.bk-status { padding: .6rem 1.6rem; background: var(--ink); color: #fff; border-radius: .5rem; transform: rotate(-1.5deg); margin-left: 10rem; box-shadow: var(--shadow); }
.bk-status b { display: block; font-size: 2.4rem; color: var(--yellow); letter-spacing: .06em; }
.bk-status.win b { color: var(--yellow); font-size: 3rem; } .bk-status.out b { color: var(--pink-2); }
.bk-status span { font-size: 1.05rem; }
.bk-btns { display: flex; gap: 1rem; align-items: center; }

/* ================= STORY ================= */
.story { background: #120d1e; cursor: pointer; }
.st-art, .st-img { position: absolute; inset: 0; }
.st-img { background: center/cover no-repeat; animation: st-pan 9s ease-out both; }
@keyframes st-pan { from { transform: scale(1.12) translateX(1.5%); filter: brightness(.6); } 15% { filter: none; } to { transform: scale(1.02); } }
.st-letterbox { position: absolute; left: 0; right: 0; height: 6.5rem; background: #120d1e; z-index: 3; }
.st-letterbox.top { top: 0; animation: lb-top .6s var(--ease-out) both; } .st-letterbox.bottom { bottom: 0; animation: lb-bot .6s var(--ease-out) both; }
@keyframes lb-top { from { transform: translateY(-100%); } } @keyframes lb-bot { from { transform: translateY(100%); } }
.st-jp { position: absolute; right: 3rem; top: 8rem; z-index: 4; writing-mode: vertical-rl; padding: 1.2rem .7rem; background: rgba(255,248,236,.94); color: #c4223d; font-size: 2rem; letter-spacing: .1em; box-shadow: .3rem .3rem 0 var(--ink); border: .18rem solid var(--ink); animation: drop-in .5s var(--ease-pop) .3s both; }
.st-box { position: absolute; left: 50%; bottom: 3rem; width: min(92rem, 92vw); transform: translateX(-50%); z-index: 5; display: grid; grid-template-columns: 9rem 1fr; gap: 1.4rem; align-items: center; padding: 1.2rem 1.6rem; animation: pop-in .4s var(--ease-pop) .2s both; }
.st-face { width: 9rem; height: 9rem; border: .22rem solid var(--ink); border-radius: .5rem; overflow: hidden; transform: rotate(-3deg); background: var(--pink-3); }
.st-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.st-name { font-size: 2rem; display: block; color: var(--pink); }
.st-line { margin: .3rem 0 0; font-size: 1.6rem; line-height: 1.4; min-height: 4.6rem; font-weight: 800; }
.st-next { position: absolute; right: 1.4rem; bottom: .8rem; font-size: 1.4rem; color: var(--pink); opacity: 0; }
.st-box.done .st-next { opacity: 1; animation: hand-bob .5s ease-in-out infinite alternate; }
.st-count { position: absolute; left: 2.4rem; top: 2.2rem; z-index: 6; color: #fff; font-weight: 900; }
.st-skip { position: absolute; right: 2.4rem; top: 1.6rem; z-index: 6; }
.st-vs { position: absolute; inset: 0; z-index: 2; display: none; }
.story.has-vs .st-vs { display: block; } .story.has-vs .st-art { filter: blur(4px) brightness(.5); }
.st-vs-side { position: absolute; top: 0; bottom: 0; width: 55%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.st-vs-side.me { left: 0; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); background: linear-gradient(135deg, rgba(255,140,60,.75), rgba(255,79,135,.7)); animation: vsx-l .5s var(--ease-out) both; }
.st-vs-side.them { right: 0; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(225deg, rgba(91,92,240,.8), rgba(43,27,80,.85)); animation: vsx-r .5s var(--ease-out) both; flex-direction: row-reverse; }
.st-vs-char { height: 82%; flex: 1; display: flex; justify-content: center; align-items: flex-end; } .st-vs-char img { max-height: 100%; max-width: 130%; object-fit: contain; filter: drop-shadow(.5rem .5rem 0 rgba(43,27,51,.5)); }
.st-vs-word, .st-vs-word2 { position: absolute; left: 50%; z-index: 3; color: var(--yellow); -webkit-text-stroke: .3rem var(--ink); paint-order: stroke fill; text-shadow: .6rem .6rem 0 var(--pink); transform: translateX(-50%) rotate(-8deg); }
.st-vs-word { top: 12%; font-size: 7rem; animation: vs-slam .5s var(--ease-pop) .3s both; } .st-vs-word2 { top: 26%; font-size: 9rem; animation: vs-slam .5s var(--ease-pop) .5s both; }

/* ================= RANKED ================= */
.rk-card { position: absolute; left: 4rem; top: 12.4rem; width: 34rem; bottom: 13rem; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.4rem 1.6rem; text-align: center; animation: slide-l .5s var(--ease-out) both; }
.rk-badge { width: 13rem; height: 13rem; object-fit: contain; animation: float 3s ease-in-out infinite; }
.rk-ki small { display: block; font-size: 1rem; color: var(--ink-soft); letter-spacing: .1em; } .rk-ki b { display: block; font-size: 5rem; line-height: 1; color: var(--navy); }
.rk-ki .brush-tag { margin-top: .4rem; }
.rk-prog { width: 100%; } .rk-prog small { font-size: .95rem; color: var(--ink-2); }
.rk-aura b { display: block; font-size: 1.4rem; color: var(--navy); } .rk-aura small { font-size: .95rem; color: var(--ink-2); }
.rk-rec { display: flex; gap: 1rem; font-size: 1rem; color: var(--ink-2); margin-top: auto; }
.rk-ladder { position: absolute; left: 41rem; top: 12.4rem; width: 36rem; bottom: 2rem; z-index: 4; display: flex; flex-direction: column; gap: .35rem; padding: .8rem; background: rgba(20,22,52,.85); border: .2rem solid #6b76b8; border-radius: .5rem; }
.rk-rung { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 3rem 4rem 1fr 6.5rem; align-items: center; gap: .6rem; padding: 0 .8rem; border-radius: .35rem; background: rgba(255,255,255,.06); color: #fff; border-left: .4rem solid var(--rc); animation: slide-r .3s var(--ease-out) both; animation-delay: calc(var(--i) * 30ms); }
.rk-rung img { width: 2.8rem; height: 2.8rem; object-fit: contain; } .rk-rung b { font-size: 1.4rem; }
.rk-rung small { font-size: .85rem; opacity: .8; text-align: right; }
.rk-rung.below { opacity: .45; }
.rk-rung.next { background: linear-gradient(90deg, rgba(255,210,63,.35), rgba(255,79,135,.25)); box-shadow: 0 0 0 .2rem var(--yellow); }
.rk-rung em { position: absolute; left: -2.6rem; font-style: normal; padding: 0 .4rem; background: var(--pink); border-radius: .3rem; font-size: .8rem; font-weight: 900; }
.rk-faces { display: flex; }
.rk-next { position: absolute; left: 80rem; right: 4rem; top: 12.4rem; z-index: 4; padding: 1.4rem 1.6rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; color: #fff; animation: slide-r .5s var(--ease-out) both; }
.rk-next-label { font-family: var(--f-manga); font-size: 1.6rem; letter-spacing: .1em; color: var(--yellow); }
.rk-next-faces { display: flex; gap: 1rem; } .rk-next-faces .vs-face { width: 9rem; } .rk-next-faces .vs-face img { width: 9rem; height: 9rem; }
.rk-next-info { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: 1.15rem; } .rk-next-info b { font-size: 1.6rem; color: var(--yellow); }
.rk-fmt .seg { box-shadow: none; }
.rk-rules { position: absolute; left: 80rem; right: 4rem; bottom: 12rem; z-index: 4; padding: 1rem 1.4rem; font-size: 1rem; transform: rotate(1deg); }
.rk-rules b { font-family: var(--f-title); font-weight: 400; font-size: 1.4rem; } .rk-rules p { margin: .3rem 0 0; color: var(--ink-2); line-height: 1.35; }
.ranked .cup-actions { right: 4rem; bottom: 4rem; }

/* ================= DOJO ================= */
.dj-sensei { position: absolute; right: 2rem; bottom: 0; height: 74%; width: 34rem; z-index: 3; display: flex; justify-content: center; align-items: flex-end; }
.dj-sensei img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(.4rem .4rem 0 rgba(43,27,51,.4)); animation: float 4s ease-in-out infinite; transform-origin: 50% 100%; }
.dj-bubble { position: absolute; right: 30rem; top: 13rem; width: 32rem; z-index: 5; padding: 1rem 1.4rem; background: #fff; border: .22rem solid var(--ink); border-radius: 1.6rem; box-shadow: var(--shadow); }
.dj-bubble::after { content: ''; position: absolute; right: -1.5rem; top: 3rem; width: 2rem; height: 1.6rem; background: #fff; border: .22rem solid var(--ink); border-left: 0; border-bottom: 0; transform: skewY(25deg) rotate(10deg); }
.dj-bubble b { font-family: var(--f-title); font-weight: 400; font-size: 1.2rem; color: #3a6fb0; } .dj-bubble p { margin: .2rem 0 0; font-size: 1.25rem; line-height: 1.4; }
.dj-bubble.pop { animation: pop-in .35s var(--ease-pop) both; }
.dj-panel { position: absolute; left: 4rem; top: 12.4rem; width: 38rem; bottom: 2.4rem; z-index: 4; padding: 1rem 1.2rem; display: flex; flex-direction: column; }
.dj-panel.drills { left: 44rem; width: 40rem; top: 26rem; transform: rotate(.6deg); }
.dj-lessons, .dj-drills { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .45rem; }
.dj-scroll, .dj-drill { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; gap: .9rem; padding: .2rem 1rem .2rem .5rem; cursor: pointer; text-align: left; border: .18rem solid var(--ink); border-radius: .4rem;
  background: linear-gradient(90deg, #c8a06a 0 .5rem, #fff8e8 .5rem calc(100% - .5rem), #c8a06a calc(100% - .5rem)); transition: transform .18s var(--ease-pop); animation: slide-l .35s var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
.dj-scroll.is-focus, .dj-drill.is-focus { transform: translateX(.8rem) scale(1.02); box-shadow: .3rem .3rem 0 var(--ink); outline: .25rem solid var(--pink); }
.dj-n { width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-weight: 900; font-size: 1.2rem; border: .16rem solid var(--ink); }
.dj-n.big { width: 4.6rem; height: 4.6rem; font-size: 2.2rem; }
.dj-t { display: flex; flex-direction: column; min-width: 0; } .dj-t b { font-size: 1.15rem; } .dj-t small { font-size: .85rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-check { margin-left: auto; color: var(--green); font-size: 1.6rem; font-weight: 900; }
.dj-scroll.done { background: linear-gradient(90deg, #c8a06a 0 .5rem, #ecf8e3 .5rem calc(100% - .5rem), #c8a06a calc(100% - .5rem)); }
.dj-drill .medal-dot { width: 1.6rem; height: 1.6rem; flex: none; }
.dj-best { margin-left: auto; font-weight: 900; font-size: .95rem; color: var(--ink-2); white-space: nowrap; }
.dj-drill.weekly { background: linear-gradient(90deg, #e9b43a 0 .5rem, #fff3c4 .5rem calc(100% - .5rem), #e9b43a calc(100% - .5rem)); }
.dj-lesson-head { display: flex; gap: 1rem; align-items: center; } .dj-lesson-head b { font-size: 2rem; display: block; } .dj-lesson-head small { color: var(--pink); }
.dj-quote { font-family: var(--f-hand); font-size: 1.4rem; color: #3a6fb0; }
.dj-howto { font-size: .92rem; line-height: 1.45; color: var(--ink-2, #4a3f5c); background: rgba(255,255,255,.55); border-radius: 10px; padding: .55rem .75rem; margin: .4rem 0; }
.dj-goals { margin: .4rem 0 .8rem; padding-left: 1.4rem; } .dj-goals li { margin: .2rem 0; }
.dj-keys { display: flex; gap: 1.2rem; flex-wrap: wrap; } .dj-key { display: inline-flex; gap: .3rem; align-items: center; text-transform: uppercase; font-size: .9rem; }

/* ================= COLLECTION / SETTINGS ================= */
.col-wallet { position: absolute; right: 3rem; top: 2rem; z-index: 6; display: flex; align-items: center; gap: .6rem; padding: .4rem 1.2rem .4rem .5rem; border-radius: 99px; font-size: 1.6rem; }
.col-wallet img { width: 3rem; } .col-tickets { font-size: 1.1rem; }
.col-tabs { position: absolute; left: 5rem; top: 11.2rem; z-index: 6; display: flex; gap: .5rem; }
.col-tab { padding: .6rem 1.4rem; border: .2rem solid var(--ink); border-bottom: 0; border-radius: .7rem .7rem 0 0; background: #e9d9bd; font-weight: 900; font-size: 1.15rem; cursor: pointer; transform: translateY(.3rem); transition: transform .15s; }
.col-tab.on { background: var(--paper); transform: translateY(.2rem); } .col-tab.is-focus { background: var(--yellow); transform: translateY(-.1rem); }
.col-panel { position: absolute; left: 4rem; right: 4rem; top: 14.6rem; bottom: 5.4rem; z-index: 5; padding: 1.4rem 1.8rem; overflow: auto; }
.col-body { height: 100%; }
.lo-wrap { display: flex; flex-direction: column; gap: 1.2rem; height: 100%; }
.lo-chars { display: flex; gap: .5rem; flex-wrap: wrap; }
.lo-char { width: 4.6rem; height: 4.6rem; padding: 0; border: .18rem solid var(--ink); border-radius: .4rem; overflow: hidden; cursor: pointer; background: #fff; transition: transform .15s var(--ease-pop); }
.lo-char img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lo-char.on { outline: .3rem solid var(--pink); transform: translateY(-.3rem); } .lo-char.is-focus { transform: translateY(-.3rem) scale(1.08); outline: .3rem solid var(--yellow); }
.lo-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 20rem 1fr 16rem; gap: 2rem; align-items: start; }
.lo-card { position: relative; padding: .8rem .8rem 1rem; text-align: center; transform: rotate(-2deg); }
.lo-art { aspect-ratio: 1; border: .18rem solid var(--ink); overflow: hidden; } .lo-art img { width: 100%; height: 100%; object-fit: cover; }
.lo-card b { display: block; font-size: 1.6rem; margin-top: .5rem; } .lo-card small { color: var(--ink-2); }
.lo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.lo-slot { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .7rem 1rem; cursor: pointer; text-align: left; border: .2rem solid var(--ink); border-left: .8rem solid var(--rc); border-radius: .4rem; background: #fff; box-shadow: var(--shadow-sm); animation: pop-in .35s var(--ease-pop) both; animation-delay: calc(var(--i) * 40ms); transition: transform .15s var(--ease-pop); }
.lo-slot small { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); } .lo-slot b { font-size: 1.25rem; } .lo-rar { font-size: .8rem; color: var(--rc); font-weight: 900; }
.lo-slot.is-focus { transform: translateY(-.2rem) rotate(-1deg); box-shadow: .35rem .4rem 0 var(--ink); }
.lo-note { position: static; transform: rotate(3deg); font-size: 1.1rem; }
.modal-card.wide { max-width: min(90rem, 94vw); }
.lo-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; max-height: 56vh; overflow: auto; padding: .3rem; }
.lo-opt { display: grid; grid-template-columns: 2.2rem 1fr; grid-template-rows: auto auto; column-gap: .5rem; align-items: center; padding: .5rem .7rem; cursor: pointer; text-align: left; border: .16rem solid var(--ink); border-left: .6rem solid var(--rc); border-radius: .35rem; background: #fff; }
.lo-opt .lo-ico { grid-row: span 2; font-size: 1.5rem; } .lo-opt b { font-size: 1rem; } .lo-opt small { font-size: .78rem; color: var(--ink-soft); }
.lo-opt.on { background: #fff3c4; } .lo-opt.locked { opacity: .45; filter: grayscale(1); } .lo-opt.is-focus { outline: .25rem solid var(--pink); }
.cap-wrap { display: grid; grid-template-columns: 30rem 1fr; gap: 2.4rem; height: 100%; align-items: center; }
.cap-machine { position: relative; height: 100%; max-height: 40rem; display: flex; justify-content: center; }
.cap-machine img { height: 100%; object-fit: contain; filter: drop-shadow(.4rem .5rem 0 rgba(43,27,51,.3)); }
.cap-machine.spin img { animation: cap-shake .9s ease-in-out; }
@keyframes cap-shake { 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg) translateY(-.3rem); } 80% { transform: rotate(2deg); } }
.cap-ball { position: absolute; left: 50%; bottom: 8%; width: 5rem; height: 5rem; margin-left: -2.5rem; border-radius: 50%; opacity: 0; border: .2rem solid var(--ink); background: linear-gradient(180deg, var(--rc, var(--pink)) 50%, rgba(255,255,255,.85) 50%); }
.cap-ball.drop { animation: cap-drop .8s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes cap-drop { 0% { opacity: 1; transform: translateY(-6rem) scale(.4); } 60% { transform: translateY(1rem) scale(1.1); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(30deg); } }
.cap-side { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.cap-copy { margin: 0; font-size: 1.1rem; color: var(--ink-2); max-width: 46rem; line-height: 1.4; }
.cap-counts { display: flex; gap: .6rem; flex-wrap: wrap; }
.cap-count { padding: .3rem .9rem; border: .16rem solid var(--ink); border-left: .6rem solid var(--rc); border-radius: .35rem; background: #fff; display: flex; flex-direction: column; } .cap-count b { color: var(--rc); font-size: .9rem; }
.cap-result { min-height: 9rem; }
.cap-card { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem 2rem; border: .25rem solid var(--rc); box-shadow: var(--shadow), 0 0 2rem var(--rc); animation: ul-pop .6s var(--ease-pop) both; text-align: center; }
.cap-rar { color: var(--rc); font-size: 1.6rem; letter-spacing: .06em; -webkit-text-stroke: .05rem var(--ink); } .cap-ico { font-size: 3rem; } .cap-card b { font-size: 2rem; }
.ach-wrap { display: flex; flex-direction: column; gap: 1rem; }
.ach-head { display: flex; align-items: center; gap: 1.4rem; font-size: 1.3rem; } .ach-head .statbar { flex: 1; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .7rem; }
.ach { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; border: .16rem solid var(--ink); border-radius: .4rem; background: #fff; opacity: .9; }
.ach.done { background: #f2fbe9; border-color: var(--green); opacity: 1; }
.ach b { font-size: 1.1rem; padding-right: 4rem; } .ach small { font-size: .85rem; color: var(--ink-2); }
.ach .statbar { height: .7rem; margin-top: .3rem; }
.ach-cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.ach-fp { position: absolute; right: .8rem; top: .7rem; font-size: .85rem; font-weight: 900; color: #c98a00; } .ach.done .ach-fp { color: var(--green); font-size: 1.3rem; }
.ach.is-focus { outline: .25rem solid var(--pink); }
.bond-wrap { display: grid; grid-template-columns: 1fr 30rem; gap: 1.6rem; }
.bond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .7rem; }
.bond-card { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem; border: .16rem solid var(--ink); border-radius: .5rem; background: #fff; text-align: center; animation: pop-in .35s var(--ease-pop) both; animation-delay: calc(var(--i) * 25ms); }
.bond-card.locked { opacity: .45; filter: grayscale(.8); } .bond-card.is-focus { outline: .25rem solid var(--pink); }
.bond-face { width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; border: .18rem solid var(--ink); background: var(--cc); } .bond-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bond-card .rs-hearts { font-size: .8rem; letter-spacing: 0; } .bond-card .statbar { width: 100%; height: .6rem; } .bond-card small { font-size: .75rem; color: var(--ink-2); }
.bond-pairs { padding: 1rem 1.2rem; align-self: start; } .bond-pair { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: .1rem dashed rgba(43,27,51,.2); flex-wrap: wrap; }
/* settings: see the SETTINGS block at the end of this file */
.set-key { cursor: pointer; min-width: 5rem; } .set-key.listening { background: var(--yellow); animation: blink .6s steps(2) infinite; } .set-key.is-focus { outline: .2rem solid var(--pink); }
.np-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .6rem; }
.np-row { display: flex; align-items: center; gap: .5rem; } .np-row b { flex: 1; text-align: center; padding: .3rem; background: #fff; border: .16rem solid var(--ink); border-radius: .4rem; font-size: 1.1rem; }
.rs-dojo { margin-top: .7rem; padding: .4rem .8rem; background: #ecf8e3; border: .16rem solid var(--green); border-radius: .4rem; font-weight: 900; display: flex; align-items: center; gap: .4rem; }
.paper.navy .seg-opt { color: var(--ink); } .paper.navy .seg-opt.on { color: #fff; }
.menu .deco-notes .note.jp { bottom: 6.6rem !important; }
.bk-team { font-size: 1.25rem; min-height: 3.2rem; } .bk-face { width: 2.8rem; height: 2.8rem; } .bk-round { font-size: 1.7rem; } .bk-team em { font-size: .85rem; }

/* 9-entry menu */
.menu-list { gap: .45rem; }
.menu-item { max-height: 5.4rem; grid-template-columns: 4.4rem 1fr auto; }
.menu-icon { width: 4.2rem; height: 4.2rem; }
.menu-text b { font-size: 1.8rem; }
.menu-text small { font-size: .9rem; }

/* ================= OPEN PLAY ================= */
[data-screen=openplay] ~ .hints { display: none; }
.openplay { background: #bfe3ff; }
.op-bg { position: absolute; inset: -2%; } .op-bg img { width: 100%; height: 100%; object-fit: cover; }
.op-sun { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 18% 8%, rgba(255,244,200,.55), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(43,27,51,.18)); }
.op-head { position: absolute; left: 3.6rem; top: .3rem; z-index: 6; display: flex; gap: 1.4rem; align-items: flex-start; }
.op-head .sel-title h1 { font-size: 3.8rem; }
.op-rack { position: absolute; left: 2.6rem; top: 11.2rem; width: 57rem; height: 27.5rem; z-index: 4; display: flex; flex-direction: column; animation: slide-l .5s var(--ease-out) both; }
.op-rack-head { display: flex; align-items: baseline; gap: .8rem; padding: 0 .6rem .4rem; color: #fff; text-shadow: 0 .15rem .3rem rgba(0,0,0,.55); }
.op-rack-head b { font-size: 2.2rem; } .op-rack-head .jp { font-size: 1.1rem; } .op-rack-head small { margin-left: auto; font-size: .95rem; }
.op-rack-board { position: relative; flex: 1; padding: 1.4rem 1rem .6rem; border: .3rem solid #5a3a22; border-radius: .6rem; box-shadow: var(--shadow-lg);
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 .15rem, transparent .15rem 3.4rem), linear-gradient(180deg, #c98d55, #a86b3a); }
.op-rail { position: absolute; left: 1rem; right: 1rem; top: 1.2rem; height: .7rem; border-radius: 99px; background: linear-gradient(180deg, #e7e2da, #9a948c); box-shadow: 0 .2rem .2rem rgba(0,0,0,.3); }
.op-rack-row { position: relative; height: 100%; display: grid; grid-template-columns: repeat(8, 1fr); gap: .6rem; }
.op-paddle { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; padding-top: .3rem; border: 0; background: none; font: inherit; color: inherit; transform-origin: 50% 0; animation: paddle-sway 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes paddle-sway { 0%,100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
.op-hook { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: .3rem solid #6f6a64; background: transparent; margin-bottom: -.2rem; z-index: 1; }
.op-face { position: relative; width: 100%; aspect-ratio: .78; border-radius: 42% 42% 30% 30% / 36% 36% 24% 24%; border: .25rem solid var(--ink); display: grid; place-items: center;
  background: radial-gradient(rgba(255,255,255,.35) .18rem, transparent .22rem) 0 0/.9rem .9rem, var(--pb); box-shadow: .25rem .35rem 0 rgba(43,27,51,.5); }
.op-face-img { width: 72%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: .2rem solid #fff; box-shadow: 0 0 0 .16rem var(--ink); }
.op-face-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.op-tag { position: absolute; top: -.5rem; right: -.4rem; padding: 0 .4rem; border-radius: .3rem; background: var(--pc); color: #fff; border: .14rem solid var(--ink); font-family: var(--f-manga); font-size: .95rem; letter-spacing: .04em; }
.op-assist { position: absolute; bottom: -.4rem; left: -.4rem; width: 2rem; height: 2rem; } .op-assist svg { width: 100%; height: 100%; }
.op-handle { width: 22%; height: 3.4rem; margin-top: -.15rem; border: .2rem solid var(--ink); border-top: 0; border-radius: 0 0 .5rem .5rem; background: repeating-linear-gradient(180deg, #2b1b33 0 .45rem, #4a3552 .45rem .9rem); }
.op-name { margin-top: .2rem; padding: .05rem .5rem; border-radius: .3rem; background: #fffaf0; border: .14rem solid var(--ink); font-family: var(--f-title); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; white-space: nowrap; }
.op-rec { font-size: .8rem; font-weight: 900; color: #fff; text-shadow: 0 .1rem .2rem rgba(0,0,0,.6); }
.op-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; margin-top: .2rem; }
.op-ctl .ps-mini { min-width: 1.8rem; height: 1.8rem; font-size: .72rem; padding: 0 .25rem; }
.op-ctl .ps-mini.assist { padding: .1rem; } .op-ctl .ps-mini.assist svg { width: 1.3rem; height: 1.3rem; filter: grayscale(1) opacity(.5); } .op-ctl .ps-mini.assist.on svg { filter: none; } .op-ctl .ps-mini.assist.on { background: #ffe1ec; }
.op-paddle.up .op-face { box-shadow: .25rem .35rem 0 rgba(43,27,51,.5), 0 0 0 .3rem #ffd23f, 0 0 1.4rem .4rem rgba(255,210,63,.75); }
.op-paddle.up::before { content: 'UP'; position: absolute; top: 2.2rem; left: -.2rem; z-index: 2; padding: 0 .35rem; background: #ffd23f; border: .14rem solid var(--ink); border-radius: .25rem; font-family: var(--f-manga); font-size: .85rem; transform: rotate(-12deg); }
.op-paddle.sit { filter: saturate(.75) brightness(.95); }
.op-paddle.first-sit { border-left: .2rem dashed rgba(255,255,255,.6); padding-left: .3rem; }
.op-paddle.first-sit::after { content: 'SITTING OUT'; position: absolute; top: -1.2rem; left: .2rem; font-size: .7rem; font-weight: 900; color: #fff; letter-spacing: .1em; white-space: nowrap; }
.op-paddle.empty { cursor: pointer; opacity: .85; animation: none; }
.op-paddle.empty .op-face { background: rgba(255,255,255,.35); border-style: dashed; box-shadow: none; }
.op-paddle.empty .op-face span { font-family: var(--f-manga); font-size: 3rem; color: #fff; -webkit-text-stroke: .1rem var(--ink); }
.op-paddle.empty small { color: #fff; font-size: .72rem; font-weight: 900; text-align: center; text-shadow: 0 .1rem .2rem rgba(0,0,0,.6); animation: blink 1.6s ease-in-out infinite; }
.op-paddle.empty.is-focus .op-face, .op-paddle.empty:hover .op-face { background: rgba(255,255,255,.6); }

.op-court { position: absolute; left: 62rem; right: 2.6rem; top: 11.2rem; height: 19.4rem; z-index: 4; padding: .9rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; animation: slide-r .5s var(--ease-out) .05s both;
  background: linear-gradient(rgba(255,250,240,.92), rgba(255,250,240,.92)), repeating-linear-gradient(90deg, transparent 0 49.6%, #fff 49.6% 50.4%, transparent 50.4%), #4f8fd8; }
.op-court-head { display: flex; align-items: center; gap: .8rem; } .op-court-head b { font-size: 2rem; color: var(--pink); letter-spacing: .06em; } .op-court-head span:not(.tag) { font-weight: 900; color: var(--ink-2); }
.op-court-head .tag { margin-left: auto; }
.op-match { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; padding: .6rem; border-radius: .6rem; background: #3f7fd0; border: .2rem solid var(--ink); box-shadow: inset 0 0 0 .3rem #fff; }
.op-vs { font-size: 3.4rem; color: var(--yellow); -webkit-text-stroke: .12rem var(--ink); paint-order: stroke fill; text-shadow: .2rem .2rem 0 var(--pink); }
.op-team { display: flex; justify-content: center; gap: .8rem; }
.op-player { position: relative; display: flex; flex-direction: column; align-items: center; color: #fff; }
.op-pface { width: 6.4rem; height: 6.4rem; border-radius: 50%; overflow: hidden; border: .25rem solid #fff; box-shadow: 0 0 0 .2rem var(--ink), .2rem .3rem 0 rgba(0,0,0,.35); background: var(--pc); }
.op-pface img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.op-player b { font-family: var(--f-title); font-weight: 400; font-size: 1.15rem; margin-top: .2rem; text-shadow: 0 .1rem .2rem rgba(0,0,0,.6); }
.op-player small { font-size: .75rem; font-weight: 900; padding: 0 .4rem; border-radius: .25rem; background: var(--pc); }
.op-player em { position: absolute; top: -.8rem; left: 50%; transform: translateX(-10%) rotate(-6deg); white-space: nowrap; padding: 0 .4rem; font-style: normal; font-size: .7rem; font-weight: 900; background: var(--yellow); color: var(--ink); border: .14rem solid var(--ink); border-radius: .25rem; z-index: 2; }
.op-wait { flex: 1; display: grid; place-items: center; align-content: center; text-align: center; } .op-wait b { font-size: 1.8rem; } .op-wait small { color: var(--ink-2); font-size: 1rem; }
.op-last { font-size: .95rem; } .op-new { color: var(--pink); font-weight: 900; }
.op-table { position: absolute; left: 62rem; right: 2.6rem; top: 31.6rem; bottom: 8.6rem; z-index: 4; padding: .8rem 1.2rem; display: flex; flex-direction: column; gap: .15rem; overflow: hidden; animation: slide-r .5s var(--ease-out) .1s both; }
.op-table-head { display: flex; align-items: baseline; gap: .8rem; } .op-table-head b { font-size: 1.6rem; } .op-table-head small { color: var(--ink-soft); }
.op-trow { flex: 1; min-height: 0; max-height: 2.8rem; display: grid; grid-template-columns: 1.6rem 1.5fr .7fr 1.6fr .7fr 1.3fr; align-items: center; gap: .5rem; padding: 0 .3rem; border-bottom: .1rem dashed rgba(43,27,51,.18); font-size: .95rem; animation: slide-r .3s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms + 300ms); }
.op-trow.head { flex: none; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); animation: none; }
.op-trow.human { background: rgba(255,143,179,.12); }
.op-tname { display: flex; align-items: center; gap: .4rem; font-weight: 900; white-space: nowrap; } .op-tname em { font-style: normal; font-size: .7rem; padding: 0 .3rem; border-radius: .2rem; background: var(--pink); color: #fff; }
.op-trow .bk-face { width: 1.9rem; height: 1.9rem; margin-left: -.35rem; } .op-tname .bk-face { margin-left: 0; }
.op-partners { display: flex; padding-left: .35rem; }
.op-moment { font-family: var(--f-manga); font-size: 1rem; letter-spacing: .04em; color: #d6204f; }
.op-bar { position: absolute; left: 2.6rem; right: 2.6rem; bottom: 1rem; height: 6.4rem; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem .6rem 9rem; }
.op-bar-l, .op-bar-r { display: flex; align-items: center; gap: .7rem; }
.op-sep { width: .15rem; height: 2.6rem; background: rgba(43,27,51,.2); }
.op-courts { display: flex; gap: .3rem; }
.op-court-chip { width: 3.6rem; height: 2.6rem; padding: 0; border: .16rem solid var(--ink); border-radius: .35rem; overflow: hidden; cursor: pointer; opacity: .6; transition: transform .2s cubic-bezier(.34,1.8,.5,1), opacity .2s; }
.op-court-chip img { width: 100%; height: 100%; object-fit: cover; } .op-court-chip.on { opacity: 1; outline: .22rem solid var(--pink); } .op-court-chip:hover, .op-court-chip.is-focus { opacity: 1; transform: translateY(-.2rem) scale(1.08); }
.openplay .back-btn { bottom: 2.6rem; left: 3.6rem; z-index: 7; }
.op-bar .start-btn { font-size: 1.6rem; padding: .6rem 1.8rem; }
.op-notice { position: absolute; left: 31rem; top: 6.4rem; z-index: 8; padding: .3rem 1.2rem; background: var(--yellow); border: .2rem solid var(--ink); border-radius: .5rem; font-weight: 900; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(-.5rem); transition: opacity .2s, transform .3s var(--ease-pop); pointer-events: none; }
.op-notice.show { opacity: 1; transform: none; }
.op-awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .8rem; }
.op-award { display: flex; gap: .9rem; align-items: center; padding: .7rem; border: .18rem solid var(--ink); border-radius: .6rem; background: #fff; animation: pop-in .4s var(--ease-pop) both; animation-delay: calc(var(--i) * 120ms); }
.op-award .op-pface { width: 4.6rem; height: 4.6rem; flex: none; } .op-award b { display: block; font-size: 1.4rem; } .op-award span { font-size: .95rem; color: var(--ink-2); }
/* honest leaderboard */
.lb-tab.soon { opacity: .75; } .lb-tab em { margin-left: .3rem; padding: 0 .35rem; font-style: normal; font-size: .7rem; border-radius: .25rem; background: rgba(255,255,255,.2); }
.lb-tab.soon.on em { background: var(--ink); color: #fff; }
.lb-row.cpu .lb-name em.cpu { margin-left: .6rem; padding: 0 .4rem; font-style: normal; font-size: .75rem; border-radius: .3rem; background: #6b76b8; color: #fff; vertical-align: middle; }
.lb-row .lb-name em.guest { margin-left: .6rem; padding: 0 .4rem; font-style: normal; font-size: .75rem; border-radius: .3rem; background: var(--green); color: #fff; }
.lb-av.pair { overflow: visible; } .lb-av2 { position: absolute; right: -1.6rem; bottom: -.2rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; overflow: hidden; border: .16rem solid var(--ink); background: #fff; }
.lb-av2 img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lb-row.target { opacity: .8; font-style: italic; } .lb-row.target .lb-av { display: grid; place-items: center; background: transparent; border: 0; } .lb-row.target .medal-dot { width: 2rem; height: 2rem; }
.lb-soon { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-align: center; padding: 1rem 3rem; }
.lb-soon-art { display: flex; } .lb-soon-art img { width: 7rem; margin: 0 -1rem; filter: saturate(.5) opacity(.85); animation: float 3s ease-in-out infinite; } .lb-soon-art img:nth-child(2) { animation-delay: -1s; width: 8.6rem; z-index: 1; } .lb-soon-art img:nth-child(3) { animation-delay: -2s; }
.lb-soon b { font-size: 2.2rem; color: var(--navy); } .lb-soon p { margin: 0; max-width: 40rem; font-size: 1.1rem; color: var(--ink-2); line-height: 1.4; }
.lb-table.is-soon .lb-head { visibility: hidden; }

/* ================= FIRST RUN ================= */
.firstrun { display: grid; place-items: center; }
.fr-logo { position: absolute; left: 50%; top: 1.4rem; transform: translateX(-50%); z-index: 3; } .fr-logo img { height: 7rem; }
.fr-card { position: relative; z-index: 4; width: min(78rem, 92vw); margin-top: 6rem; padding: 2rem 2.6rem 1.8rem; }
.fr-card.safety { width: min(62rem, 92vw); text-align: left; border-top: 1rem solid var(--yellow); }
.fr-icon { position: absolute; right: 2rem; top: 1.2rem; font-size: 4rem; color: #e9b43a; }
.fr-card h2 { margin: 0 0 .8rem; font-size: 3rem; }
.fr-card p { font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 .8rem; }
.fr-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0 0; padding: .6rem; border: .16rem dashed var(--ink-soft); border-radius: .6rem; }
.fr-card.welcome { display: grid; grid-template-columns: 22rem 1fr; gap: 1.6rem; align-items: center; min-height: 34rem; }
.fr-tetsu { height: 34rem; display: flex; align-items: flex-end; justify-content: center; margin: -3rem 0 -1.8rem; } .fr-tetsu img { max-height: 100%; max-width: 120%; object-fit: contain; filter: drop-shadow(.3rem .4rem 0 rgba(43,27,51,.35)); animation: breathe 3.4s ease-in-out infinite; }
.fr-q .jp { color: var(--pink); font-size: 1.4rem; } .fr-say { font-family: var(--f-hand); font-size: 1.35rem !important; color: #3a6fb0 !important; }
.fr-choices { display: flex; flex-direction: column; gap: .9rem; margin-top: 1rem; }
.fr-choice { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .9rem 1.4rem; cursor: pointer; text-align: left; border: .22rem solid var(--ink); border-radius: .7rem; box-shadow: var(--shadow); transition: transform .2s cubic-bezier(.34,1.8,.5,1), box-shadow .2s; }
.fr-choice b { font-family: var(--f-title); font-weight: 400; font-size: 2.2rem; } .fr-choice small { font-size: 1.05rem; font-weight: 800; opacity: .85; }
.fr-choice.pink { background: var(--pink); color: #fff; } .fr-choice.yellow { background: var(--yellow); } .fr-choice.blue { background: var(--blue-2); }
.fr-choice.is-focus, .fr-choice:hover { transform: translate(-.2rem, -.25rem) rotate(-.6deg); box-shadow: .6rem .65rem 0 var(--ink); }
.fr-diagrams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: .6rem 0 1rem; }
.fr-diag { display: flex; flex-direction: column; gap: .4rem; } .fr-diag b { font-size: 1.2rem; } .fr-diag small { font-size: .98rem; color: var(--ink-2); line-height: 1.35; }
.fr-svg svg { width: 100%; display: block; border-radius: .5rem; box-shadow: var(--shadow-sm); }
.fr-svg .dash { animation: dash-move 1.2s linear infinite; } @keyframes dash-move { to { stroke-dashoffset: -22; } }
.fr-svg .pulse { animation: blink 1.4s ease-in-out infinite; } .fr-svg .d2 { animation-delay: .7s; }
.fr-svg .ball { animation: float 1s ease-in-out infinite; } .fr-svg .nope { animation: wobble .8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fr-more { font-size: 1.05rem !important; }

/* ================= CREDITS ================= */
.credits { overflow: hidden; }
.cr-dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,27,51,.35), rgba(43,27,51,.65)); }
.cr-roll { position: absolute; left: 50%; top: 100%; width: 56rem; margin-left: -28rem; display: flex; flex-direction: column; align-items: center; gap: 3rem; padding-bottom: 20rem; will-change: transform; }
.credits.static .cr-roll { top: 4rem; height: calc(100% - 8rem); overflow: auto; }
.cr-logo img { height: 10rem; }
.cr-card { width: 44rem; padding: 1.4rem 2rem; text-align: center; } .cr-card.wide { width: 54rem; }
.cr-card h2 { margin: 0 0 .5rem; font-size: 2.2rem; } .cr-card p { margin: .2rem 0; font-size: 1.2rem; color: var(--ink-2); } .cr-card small { color: var(--ink-soft); }
.cr-cast { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; width: 54rem; }
.cr-cast figure { margin: 0; padding: .3rem .3rem .5rem; background: #fff; border: .16rem solid var(--ink); box-shadow: var(--shadow-sm); text-align: center; transform: rotate(calc((var(--r, 1)) * 1deg)); }
.cr-cast figure:nth-child(odd) { --r: -2; } .cr-cast figure:nth-child(3n) { --r: 2.5; }
.cr-cast img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .cr-cast figcaption { font-family: var(--f-title); font-size: .95rem; text-transform: uppercase; }
.cr-end { font-size: 6rem; color: var(--yellow); -webkit-text-stroke: .2rem var(--ink); paint-order: stroke fill; text-shadow: .4rem .4rem 0 var(--pink); }
.cr-end-jp { color: #fff; font-size: 2rem; }
.cr-hold { position: absolute; right: 2rem; bottom: 1.6rem; z-index: 5; display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 900; --p: 0; }
.cr-hold i { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--p) * 360deg), rgba(255,255,255,.3) 0); border: .2rem solid #fff; }
/* pause: how to play / moves */
.pause-banner { flex: none; margin: .4rem 0 0; padding: .3rem .8rem; border-radius: .4rem; background: #fff3c4; border: .16rem solid var(--ink); font-weight: 900; }
.mv-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6rem; } .mv-grid h4, .mv-mech h4 { margin: .2rem 0 .4rem; font-family: var(--f-title); font-weight: 400; font-size: 1.4rem; }
.mv-rule { margin: .25rem 0; font-size: 1rem; line-height: 1.35; } .mv-rule b { color: var(--pink); }
.mv-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem; margin-bottom: .6rem; } .mv-ctl { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 800; }
.mv-specials { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: .8rem; }
.mv-special { display: grid; grid-template-columns: 5rem 1fr; gap: .7rem; padding: .6rem; border: .16rem solid var(--ink); border-left: .5rem solid var(--cc); border-radius: .5rem; background: #fff; }
.mv-special img { width: 5rem; height: 5rem; object-fit: cover; object-position: 50% 20%; border-radius: .4rem; border: .14rem solid var(--ink); }
.mv-special small { font-size: .78rem; font-weight: 900; color: var(--ink-soft); text-transform: uppercase; } .mv-special b { display: block; font-size: 1.4rem; color: #d6204f; line-height: 1; }
.mv-special p { margin: .2rem 0 0; font-size: .9rem; line-height: 1.3; } .mv-counter { color: #2a6f4f; font-weight: 800; }
.lb-row.skeleton span { height: 1.1rem; border-radius: .4rem; background: linear-gradient(90deg, #ece2d0 0%, #f8f0e2 50%, #ece2d0 100%) 0 0/200% 100%; animation: shine 1.2s linear infinite; }
.lb-src.live { color: #2fa36b; font-weight: 900; }
.ego-box { display: flex; flex-direction: column; gap: .1rem; padding: .4rem .8rem; border: .2rem solid var(--ink); border-radius: .5rem; background: rgba(255,250,240,.95); transform: rotate(1deg); }
.ego-box small { font-size: .72rem; font-weight: 900; text-transform: uppercase; color: var(--ink-soft); } .ego-box b { font-size: 1rem; }
.ego-box.is-focus { outline: .25rem solid var(--yellow); } .ego-range { width: 12rem; accent-color: var(--pink); }
/* results stats + records */
.rs-tabs { position: absolute; right: 2.4rem; bottom: 50.6rem; z-index: 9; display: flex; gap: .4rem; }
.rs-tab { padding: .3rem 1rem; border: .18rem solid var(--ink); border-radius: .5rem; background: #fff; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-sm); }
.rs-tab.on { background: var(--yellow); } .rs-tab.is-focus { outline: .2rem solid var(--pink); }
.rs-rewards.hidden { transform: translateX(130%) rotate(2deg) !important; }
.rs-stats { position: absolute; left: 2.4rem; right: 2.4rem; bottom: 7rem; z-index: 7; padding: 1rem 1.4rem; transform: translateY(140%); transition: transform .5s var(--ease-pop); }
.rs-stats.shown { transform: none; }
.rs-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: .4rem; }
.rs-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); text-align: center; padding: .2rem .3rem; border-bottom: .16rem solid var(--ink); }
.rs-table th:first-child { text-align: left; } .rs-table td { text-align: center; padding: .35rem .3rem; border-bottom: .1rem dashed rgba(43,27,51,.18); font-weight: 800; }
.rs-table tr.win td { background: rgba(255,210,63,.12); } .rs-table tr.mvp td { background: rgba(255,79,135,.12); }
.rs-st-name { display: flex; align-items: center; gap: .4rem; text-align: left; } .rs-st-name em { font-style: normal; font-size: .7rem; padding: 0 .3rem; border-radius: .25rem; background: var(--pink); color: #fff; } .rs-st-name em.cpu { background: #6b76b8; }
.rs-mvp { padding: 0 .4rem; border-radius: .3rem; background: var(--yellow); border: .14rem solid var(--ink); font-family: var(--f-manga); font-weight: 400; letter-spacing: .05em; }
.rs-st-foot { margin-top: .5rem; font-size: .9rem; color: var(--ink-2); }
.rec-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.rec-col { padding: .9rem 1.1rem; box-shadow: var(--shadow-sm); }
.rec-row { display: grid; grid-template-columns: 1fr 3.6rem 6rem; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .95rem; text-transform: capitalize; }
.rec-row .rec-chem { grid-column: 1 / -1; margin-top: -.2rem; font-size: .75rem; color: var(--pink); text-transform: none; }
.rec-bar { height: .6rem; border-radius: 99px; background: #e5dccf; border: .12rem solid var(--ink); overflow: hidden; } .rec-bar s { display: block; height: 100%; background: var(--green); }
.rec-best { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; } .rec-best b { color: var(--pink); }
.rec-graph svg { width: 100%; background: #fff; border: .14rem solid var(--ink); border-radius: .4rem; } .rec-graph small { color: var(--ink-soft); }
/* menu today card */
.menu .menu-feature { bottom: 18.4rem; }
.menu-today { position: absolute; left: 51rem; right: 4rem; bottom: 5.4rem; height: 11.6rem; z-index: 4; display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.2rem; padding: .9rem 1.2rem; transform: rotate(-.5deg); animation: slide-r .5s var(--ease-out) .15s both; }
.td-goals { display: flex; flex-direction: column; gap: .25rem; } .td-goals > b { font-size: 1.4rem; }
.td-goal { display: grid; grid-template-columns: 1.4rem 1fr auto auto 1.8rem; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 800; }
.td-check { width: 1.3rem; height: 1.3rem; border: .14rem solid var(--ink); border-radius: .3rem; display: grid; place-items: center; font-size: .8rem; color: #fff; background: #fff; }
.td-goal.done .td-check { background: var(--green); } .td-goal.done .td-text { text-decoration: line-through; opacity: .6; }
.td-prog { color: var(--ink-soft); font-size: .85rem; } .td-fp { color: #c98a00; font-size: .85rem; }
.td-reroll { width: 1.7rem; height: 1.7rem; border: .14rem solid var(--ink); border-radius: 50%; background: #fff; cursor: pointer; font-weight: 900; } .td-reroll.is-focus, .td-reroll:hover { background: var(--yellow); }
.td-fest { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .5rem .8rem; border-radius: .5rem; background: linear-gradient(135deg, #fff3c4, #ffe1ec); border: .16rem dashed var(--ink-soft); }
.td-fest small { font-size: .72rem; font-weight: 900; text-transform: uppercase; color: var(--pink); } .td-fest b { font-family: var(--f-title); font-weight: 400; font-size: 1.4rem; } .td-fest span { font-size: .85rem; color: var(--ink-2); }
.td-fest .btn { margin-top: auto; }
.fest-ribbon { position: absolute; left: 50%; top: 9.2rem; z-index: 6; transform: translateX(-50%) rotate(-1deg); padding: .3rem 1.4rem; background: var(--yellow); border: .2rem solid var(--ink); border-radius: .4rem; font-weight: 900; box-shadow: var(--shadow-sm); }
.cap-featured { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 1rem; border: .2rem solid var(--rc); border-radius: .6rem; background: #fff; box-shadow: var(--shadow-sm); } .cap-featured b { font-size: 1.3rem; } .cap-featured > span { color: var(--rc); font-weight: 900; font-size: .85rem; }
/* ================= PARTY BRACKET ================= */
.pb-body { position: absolute; left: 4rem; right: 4rem; top: 11.6rem; bottom: 2rem; z-index: 4; display: flex; flex-direction: column; gap: 1rem; }
.pb-setup-bar { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-rows: auto auto; gap: .5rem 1.6rem; align-items: center; padding: .9rem 1.2rem; }
.pb-setup-bar small { grid-column: 1 / 4; } .pb-setup-bar .start-btn { grid-row: 1 / 3; grid-column: 4; }
.pb-add { display: flex; gap: .5rem; flex-wrap: wrap; }
.pb-ents { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; align-content: start; padding: .4rem; }
.pb-ent { display: grid; grid-template-columns: 4.4rem 1fr; grid-template-rows: auto auto; gap: .2rem .7rem; padding: .6rem; border-left: .5rem solid var(--cc); }
.pb-ent.host { background-color: #ffe9f1; } .pb-ent.guest { background-color: #eef9e8; }
.pb-face { grid-row: span 2; width: 4.4rem; height: 4.4rem; border-radius: 50%; overflow: hidden; border: .18rem solid var(--ink); } .pb-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.pb-info b { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-info small { font-size: .8rem; color: var(--ink-2); }
.pb-ctl { display: flex; gap: .25rem; flex-wrap: wrap; } .pb-ctl .ps-mini { font-size: .72rem; min-width: 2rem; height: 1.9rem; }
.pb-board { flex: 1; min-height: 0; padding: 1rem 1.2rem; }
.pb-grid { height: 100%; display: grid; grid-template-columns: repeat(var(--cols), 1fr) .6fr; gap: 1.6rem; }
.pb-board.size-16 .bk-team { font-size: .85rem; min-height: 2rem; } .pb-board.size-16 .bk-face { width: 1.8rem; height: 1.8rem; } .pb-board.size-16 .bk-match { padding: .2rem; }
.pb-board .bk-col:first-child { padding-top: 2.4rem; }
.pb-foot { display: flex; justify-content: space-between; align-items: center; } .pb-foot .bk-status { margin-left: 8rem; }
.bk-team.guest em.me, .bk-team.host em.me { background: var(--green); }
/* settings-audit: the footer (camera, End party, Play match) sits above the hint bar instead of under it; a
   16-entrant first round fits the board at every resolution; entrant controls readable and clickable at 720p */
.pb-body { bottom: 5.6rem; }
.pb-setup-bar small { color: var(--ink-2); font-size: .95rem; }
.pb-info small { font-size: .9rem; }
.pb-ctl { gap: .3rem; } .pb-ctl .ps-mini { font-size: .88rem; min-width: 2.3rem; height: 2.2rem; padding: 0 .45rem; }
.pb-board.size-16 { padding-block: .7rem; }
.pb-board.size-16 .bk-col:first-child { padding-top: 2.2rem; gap: .25rem; }
.pb-board.size-16 .bk-pair { gap: .25rem; }
.pb-board.size-16 .bk-team { min-height: 1.75rem; padding-block: .05rem; }
.pb-board.size-16 .bk-match { gap: 0; padding: .1rem .25rem; }
.pb-board.size-16 .bk-round { font-size: 1.4rem; }
.pb-foot .cam-pick { padding: .3rem .8rem .3rem .5rem; border: .16rem solid var(--ink); border-radius: .7rem; background: rgba(255,248,236,.95); box-shadow: var(--shadow-sm); }
.lb-tab { min-width: 0; padding: .6rem 1.1rem; font-size: 1.1rem; }
.leaderboard .back-btn { left: 39rem; }
html.lang-ja .title-marker { letter-spacing: 0; }
.menu-item[hidden] { display: none !important; }
/* KK-019: pause score line */
.pause-score { margin-left: auto; display: flex; gap: .9rem; align-items: baseline; font-weight: 900; font-size: 1.05rem; }
.pause-score b { font-family: 'Dela Gothic One', sans-serif; font-weight: 400; font-size: 1.9rem; padding: 0 .6rem; background: var(--ink); color: #ffd23f; border-radius: .4rem; }

/* ---------- audit round 1: results ---------- */
/* KK-014/015: losers slump; tears + raincloud are emote art; NOOO! sits in a reserved band above the names */
.rs-panel.lose .rs-char:not(.has-defeat) .rs-art { filter: saturate(.45) brightness(.8) hue-rotate(200deg) drop-shadow(.5rem .6rem 0 rgba(0,0,0,.5)); transform: translateY(12%) rotate(-7deg) scaleY(.94); transform-origin: 50% 100%; }
.rs-panel.lose .rs-char.has-defeat .rs-art { filter: saturate(.85) drop-shadow(.5rem .6rem 0 rgba(0,0,0,.5)); transform: none; max-width: 120%; }
img.rs-tears { position: absolute; left: 50%; top: 14%; width: 38%; height: auto; transform: translateX(-50%); background: none; mask: none; -webkit-mask: none; animation: float 1.6s ease-in-out infinite; z-index: 3; }
.rs-char.has-defeat img.rs-tears { display: none; }
.rs-cloud { font-size: 0; }
.rs-cloud img { width: 13rem; height: auto; filter: drop-shadow(0 .4rem 0 rgba(43,27,51,.6)); }
.rs-panel.lose .rs-sfx { top: 4.2rem; right: 3rem; font-size: 7.4rem; }
.rs-panel.lose .rs-names { top: 14.2rem; }
.rs-hl-chip em { font-style: normal; font-family: var(--f-ui); font-weight: 900; font-size: .85em; margin-left: .2rem; }
/* KK-013: lesson / drill result card */
.lesson-results { background: #1e1a33; }
.ls-bg { position: absolute; inset: 0; } .ls-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.9); }
.ls-tetsu { position: absolute; left: 1rem; bottom: 0; height: 78%; z-index: 2; } .ls-tetsu img { height: 100%; object-fit: contain; filter: drop-shadow(.5rem .5rem 0 rgba(43,27,51,.5)); }
.ls-me { position: absolute; left: 30rem; bottom: 0; height: 62%; z-index: 2; } .ls-me img { height: 100%; object-fit: contain; filter: drop-shadow(.5rem .5rem 0 rgba(43,27,51,.5)); }
.ls-say { position: absolute; left: 4rem; top: 4rem; max-width: 44rem; z-index: 3; padding: 1.1rem 1.6rem; transform: rotate(-1.2deg); }
.ls-say b { display: block; font-family: 'Permanent Marker', sans-serif; font-weight: 400; color: #3a6fb0; font-size: 1.3rem; } .ls-say span { font-size: 1.5rem; font-weight: 800; }
.ls-card { position: absolute; right: 5rem; top: 50%; width: 50rem; transform: translateY(-50%) rotate(1deg); z-index: 4; padding: 2.4rem 2.8rem 2rem; animation: pop-in .45s var(--ease-pop) both; }
.ls-kicker { display: flex; gap: 1rem; align-items: baseline; font-weight: 900; font-size: 1.2rem; color: #7a6a80; text-transform: uppercase; letter-spacing: .08em; }
.ls-card h2 { font-size: 3.6rem; margin: .2rem 0 1rem; }
.ls-stamp { position: absolute; right: 2.2rem; top: 1.6rem; padding: .2rem 1.2rem; border: .35rem solid currentColor; border-radius: .6rem; font-size: 3.4rem; transform: rotate(10deg); animation: vs-slam .5s var(--ease-pop) .4s both; }
.ls-stamp.ok { color: #d6204f; } .ls-stamp.retry { color: #3a6fb0; }
.ls-goals { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .6rem; }
.ls-goals li { display: flex; gap: .8rem; align-items: center; font-size: 1.45rem; font-weight: 800; }
.ls-goals li i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: .2rem solid var(--ink); font-style: normal; background: #fff; flex: none; }
.ls-goals li.done i { background: #4fb06a; color: #fff; }
.ls-count { margin: 0 0 .6rem; color: #7a6a80; font-weight: 800; }
.ls-drill { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem; margin-bottom: .8rem; }
.ls-drill > b { font-size: 5rem; line-height: 1; } .ls-drill > span { font-size: 1.6rem; font-weight: 900; }
.ls-medals { display: flex; gap: .8rem; width: 100%; }
.ls-medal { display: flex; gap: .4rem; align-items: center; padding: .2rem .8rem; border-radius: 99px; border: .16rem solid var(--ink); background: #eee5d8; font-weight: 900; opacity: .6; }
.ls-medal.got { opacity: 1; background: #fff6c8; }
.ls-xp { font-family: var(--f-manga); font-size: 2rem; color: #e9a000; -webkit-text-stroke: .05rem var(--ink); margin: .4rem 0 1rem; }
.ls-actions { position: static; display: flex; gap: 1rem; flex-wrap: wrap; transform: none; }
.rs-tabs { bottom: 2rem; right: 46.5rem; }
.rs-tab { padding: .55rem 1.3rem; font-size: 1.2rem; }
.rs-panel.lose .rs-chars:has(.has-defeat) { top: 17%; bottom: 31%; left: 26%; }
.rs-panel.lose .rs-char.has-defeat .rs-art { max-height: 118%; max-width: 165%; }
.ls-card h2 { padding-right: 13rem; }
/* ---------- audit round 1: collection ---------- */
/* KK-023: the pulsing primary button holds still while hovered/focused so it can be clicked */
.start-btn:hover, .start-btn.is-focus, .start-btn:focus-visible { animation: none; }
/* KK-025: live 3D celebration preview */
.kk-cpv { position: relative; width: 100%; height: 100%; min-height: 14rem; }
.kk-cpv-canvas, .kk-cpv-fallback { position: absolute; inset: 0; }
.kk-cpv-canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.kk-cpv-fallback { display: none; } .kk-cpv.fallback .kk-cpv-fallback, .kk-cpv:not(.live) .kk-cpv-fallback { display: block; } .kk-cpv.fallback .kk-cpv-canvas { display: none; }
.kk-cpv-fallback img { width: 100%; height: 100%; object-fit: contain; }
.kk-cpv-label { position: absolute; left: 0; right: 0; bottom: .3rem; text-align: center; font-weight: 900; font-size: 1rem; color: var(--ink); text-shadow: 0 0 .4rem #fff, 0 0 .4rem #fff; pointer-events: none; }
.lo-art.lo-live { height: 26rem; background: radial-gradient(ellipse at 50% 85%, rgba(255,143,179,.35), transparent 60%), linear-gradient(180deg, #fff7e8, #ffe7f0); border-radius: .4rem; overflow: hidden; }
.lo-pick-wrap { display: grid; grid-template-columns: 1fr 22rem; gap: 1rem; }
.lo-pick-pv { height: 28rem; border-radius: .6rem; border: .18rem solid var(--ink); background: radial-gradient(ellipse at 50% 85%, rgba(255,143,179,.35), transparent 60%), #fff7ee; overflow: hidden; }
/* KK-024 / KK-026: capsule ceremony + showcase column */
.cap-wrap { grid-template-columns: 24rem 1fr 30rem; gap: 2rem; }
.cap-stage { position: relative; height: 100%; max-height: 42rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 1rem; overflow: hidden; }
.cap-stage-pv { position: absolute; inset: 1rem 1rem 9rem; opacity: 0; transition: opacity .4s; }
.cap-stage.shown .cap-stage-pv { opacity: 1; }
.cap-stage .cap-result { position: relative; z-index: 2; min-height: 0; }
.cap-stage .cap-card { padding: .6rem 1.4rem; }
.cap-odds { align-self: stretch; display: flex; flex-direction: column; gap: .6rem; margin: auto 0; }
.cap-odds h4 { margin: 0; font-size: 1.4rem; }
.cap-odd { display: flex; justify-content: space-between; padding: .5rem 1rem; border: .16rem solid var(--ink); border-left: .8rem solid var(--rc); border-radius: .4rem; background: #fff; font-weight: 900; } .cap-odd b { color: var(--rc); }
.cap-rays { position: absolute; left: 50%; top: 42%; width: 70rem; height: 70rem; margin: -35rem 0 0 -35rem; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc, #ffd23f) 55%, transparent) 0 6deg, transparent 6deg 18deg); mask: radial-gradient(circle, #000 10%, transparent 60%); -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); }
.cap-rays.go { animation: cap-rays 1.6s ease-out both, spin 9s linear infinite; }
.cap-rays.go.legendary, .cap-rays.go.epic { animation: cap-rays-stay .8s ease-out both, spin 7s linear infinite; }
@keyframes cap-rays { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .25; } }
@keyframes cap-rays-stay { 0% { opacity: 0; } 100% { opacity: .7; } }
.cap-ball { overflow: visible; }
.cap-half { position: absolute; left: -.2rem; right: -.2rem; height: 50%; border: .2rem solid var(--ink); }
.cap-half.top { top: -.2rem; border-radius: 99px 99px 0 0; background: var(--rc, var(--pink)); }
.cap-half.bot { bottom: -.2rem; border-radius: 0 0 99px 99px; background: #fff; }
.cap-ball.wobble { animation: cap-wobble .36s ease-in-out both; opacity: 1; }
@keyframes cap-wobble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-18deg) translateY(-.3rem); } 70% { transform: rotate(14deg); } }
.cap-ball.crack { opacity: 1; background: none; border-color: transparent; }
.cap-ball.crack .cap-half.top { animation: cap-open-top .5s cubic-bezier(.34,1.56,.64,1) forwards; }
.cap-ball.crack .cap-half.bot { animation: cap-open-bot .5s ease-out forwards; }
@keyframes cap-open-top { to { transform: translate(-1.4rem, -3rem) rotate(-40deg); opacity: 0; } }
@keyframes cap-open-bot { to { transform: translate(1rem, 1rem) rotate(20deg); opacity: 0; } }
/* KK-029: the brush stroke sits under the title; the JP subtitle gets its own line below it */
.scr-title h1.brush-underline::after { bottom: -.12em; height: .16em; }
.scr-title-jp { margin-top: .75rem; position: relative; z-index: 1; }
/* KK-030: long court names wrap/shrink instead of running into the index number */
.ct-tk-text { padding-right: 2.6rem; }
.ct-tk-text b { font-size: clamp(1.1rem, 1.45rem, 1.45rem); overflow-wrap: anywhere; }
.ct-ticket .ct-tk-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ---------- audit round 1: open play (KK-037) ---------- */
.op-head .sel-sub { position: relative; right: auto; bottom: auto; display: inline-block; margin: .5rem 0 0 1rem; }
.op-head .sel-title { display: flex; flex-direction: column; align-items: flex-start; }
.op-paddle.ghost { pointer-events: none; opacity: .5; }
.op-paddle.ghost .op-face { background: rgba(255,255,255,.12); border: .2rem dashed rgba(255,255,255,.55); box-shadow: none; }
.op-match.waiting { position: relative; background: #3f7fd0; }
.op-player.open .op-pface { display: grid; place-items: center; background: rgba(255,255,255,.18); border-style: dashed; }
.op-player.open .op-pface span { font-family: var(--f-manga); font-size: 2.6rem; color: #fff; }
.op-player.open b { opacity: .8; } .op-player.open small { background: rgba(0,0,0,.35); }
.op-wait-note { position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); display: flex; gap: .8rem; align-items: baseline; padding: .2rem 1rem; border-radius: 99px; background: rgba(255,250,240,.95); border: .16rem solid var(--ink); white-space: nowrap; }
.op-wait-note b { font-size: 1.15rem; } .op-wait-note small { font-size: .85rem; color: var(--ink-2); }
.op-court-chip { position: relative; width: 6.2rem; height: 3.6rem; }
.op-chip-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 .2rem; background: rgba(43,27,51,.8); color: #fff; font-size: .68rem; font-weight: 900; line-height: 1.35; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* KK-038: dojo panels stop above the hint bar; the weekly blurb gets two lines */
.dj-panel { bottom: 5.4rem; }
.dj-panel.drills { top: 24rem; }
.dj-drill.weekly { flex: 1.5; }
.dj-drill.weekly .dj-t small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
/* KK-033: medal icons with names, court glyph, explained fine-tune */
.cup-medal { gap: .3rem; font-weight: 900; font-size: .78rem; }
.cup-medal.none { opacity: .55; }
.medal-dot.ribbon { position: relative; width: 1.25rem; height: 1.25rem; margin-top: .45rem; }
.medal-dot.ribbon::before { content: ''; position: absolute; left: 50%; top: -.75rem; width: .9rem; height: .7rem; transform: translateX(-50%); background: linear-gradient(90deg, #e23a4e 0 45%, #3f8cff 55% 100%); clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); }
.medal-dot.ribbon.none::before { background: #c9bfb2; }
.court-glyph { display: inline-block; width: 1.4rem; height: 1rem; vertical-align: -.1rem; margin-right: .3rem; } .court-glyph svg { width: 100%; height: 100%; }
.ego-help { display: block; font-size: .72rem; color: var(--ink-soft); font-weight: 800; }
/* KK-036: story dialogue sits above the hint bar */
.st-box { bottom: 5.6rem; }
/* KK-031: the select grid never reflows — rows are fixed, the setup buttons share one non-wrapping row */
.sel-grid { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.sel-setup { gap: .55rem; padding: .7rem 1.1rem; min-height: 0; overflow: hidden; }
.sel-setup-btns { flex-wrap: nowrap; }
.sel-setup-btns .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
/* KK-032 */
.ps-face.unknown { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f3e7d6 0 .6rem, #eadcc6 .6rem 1.2rem); }
.ps-face.unknown span { font-family: var(--f-manga); font-size: 2.4rem; color: var(--ink-soft); }
.ps-picking { white-space: normal; line-height: 1.15; }
.sc-special { display: grid; grid-template-rows: auto auto 1fr auto; }
.sc-special .sc-sp-desc { margin-bottom: .4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-special .sc-details { position: static; justify-self: start; align-self: end; }
.sc-special .sc-details { grid-column: 2; grid-row: 4; justify-self: end; margin-top: .3rem; }
.sc-special .sc-sp-desc { grid-row: 3 / span 2; -webkit-line-clamp: 3; }
/* Kizuna Link pair combo card (pause Moves, select details) */
.mv-pair { margin-top: .8rem; padding: .7rem 1rem; border: .18rem solid var(--ink); border-left: .7rem solid var(--pink); border-radius: .5rem; background: #fff6fa; }
.mv-pair small { display: block; font-weight: 900; color: var(--ink-2); }
.mv-pair b { font-size: 1.5rem; color: var(--pink); } .mv-pair p { margin: .2rem 0 0; font-size: 1rem; line-height: 1.35; }
.lo-art.lo-live { width: 100%; aspect-ratio: auto; position: relative; }
/* KK-041: digits in the handwriting font read as letters; ages use the UI font. Flags a touch bigger. */
.lb-age { font-family: var(--f-ui); font-style: normal; font-weight: 900; letter-spacing: 0; }
.lb-flag { font-size: 2.3rem; }
/* KK-035: full bracket connectors */
.bk-pair { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: .6rem; }
.bk-pair .bk-match::after { right: -1.2rem; width: 1.2rem; }
.bk-pair::before { content: ''; position: absolute; right: -1.2rem; top: 25%; bottom: 25%; border-right: .2rem solid var(--ink); }
.bk-pair::after { content: ''; position: absolute; right: -2.4rem; top: 50%; width: 1.2rem; height: .2rem; margin-top: -.1rem; background: var(--ink); }
/* KK-027: 10-entry menu — flatter tilt and tighter rows so no button covers the JP subtitle above it */
.menu-list { top: 14.6rem; bottom: 4.6rem; gap: .5rem; }
.menu-item { max-height: 4.75rem; transform: rotate(calc(var(--rot) * .35)); padding-top: .15rem; padding-bottom: .15rem; }
.menu-item .menu-text { line-height: 1; }
.menu-item .menu-text b { font-size: 1.68rem; }
.menu-item .menu-text small { font-size: .85rem; margin-top: .15rem; line-height: 1.15; }
.menu-item .menu-icon { width: 3.8rem; height: 3.8rem; }
.menu-item .tape { right: 4.2rem; left: auto; transform: rotate(8deg) scale(.8); }
/* 11+ entries (Party & Practice, Online, Kizuna Club registered) */
.menu-list.dense { top: 14.8rem; bottom: 4.4rem; gap: .38rem; }
.menu-list.dense .menu-item { max-height: 4.2rem; }
.menu-list.dense .menu-item .menu-icon { width: 3.3rem; height: 3.3rem; }
.menu-list.dense .menu-item .menu-text b { font-size: 1.5rem; }
.menu-list.dense .menu-item .menu-text small { font-size: .8rem; margin-top: .1rem; }
/* results: Rewards/Stats toggle sits at the start of the action row; compact buttons when there are many */
.rs-actions .rs-tabs { position: static; align-self: center; margin-right: .4rem; }
.rs-actions.many { gap: .6rem; }
.rs-actions.many .btn { padding: .55rem 1.1rem; font-size: 1.15rem; }
.rs-stats:not(.shown) { transform: translateY(calc(100% + 8rem)); }
/* SVG flags + chibi avatars */
img.flag { display: inline-block; width: 1.5em; height: auto; aspect-ratio: 4 / 3; vertical-align: -.15em; border-radius: .12em; box-shadow: 0 0 0 .06em rgba(43,27,51,.35); object-fit: cover; }
.lb-flag img.flag { width: 2.4rem; }
.pc-flag img.flag { width: 1.6rem; }
.lb-av img.lb-chibi { width: 100%; height: 100%; object-fit: cover; background: #fff3e8; }
.op-chibi { background: #fff3e8; } .op-chibi img { width: 100%; height: 100%; object-fit: cover; }

/* ======================= camera picker (setup screens: rules, Open Play, bracket, Party Bracket, party setup) ======================= */
.cam-pick { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cam-label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 900; font-size: .95rem; }
.cam-ico { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: .14rem solid var(--ink); background: #3f8cff center/62% no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='14' height='11' rx='2'/%3E%3Cpath d='M16 11l6-3.5v10L16 14z'/%3E%3C/svg%3E"); }
.cam-pick[data-view=broadcast] .cam-ico { background-color: var(--pink); }
.cam-note { font-size: .82rem; font-weight: 800; color: var(--ink-2); white-space: nowrap; }

.rl-cam { margin-top: 1.4rem; padding-top: 1rem; border-top: .16rem dashed rgba(43,27,51,.25); display: flex; flex-direction: column; gap: .5rem; }
.rl-cam .cam-label { display: none; }
.rl-cam .cam-pick { flex-direction: column; align-items: flex-start; gap: .4rem; }
.bk-btns .cam-pick, .pb-foot .cam-pick { margin-right: .6rem; }
.op-bar .cam-pick .cam-note { display: none; }
/* settings-audit: Open Play bar never wraps or pushes "Play next game" off-screen; the court is picked on the board */
.op-bar { padding-left: 11.4rem; }
.op-ctl .ps-mini { height: 1.9rem; font-size: .8rem; }
/* the up-next / sitting-out divider lives in the grid gap; as border + padding it narrowed that paddle so its
   buttons wrapped onto three rows */
.op-paddle.first-sit { border-left: 0; padding-left: 0; }
.op-paddle.first-sit::before { content: ''; position: absolute; left: -.42rem; top: 0; bottom: 0; border-left: .2rem dashed rgba(255,255,255,.6); }
.op-rec { font-size: .85rem; }
.op-bar .btn, .op-bar .seg-opt, .op-bar .cam-label { white-space: nowrap; }
.op-bar .btn.small { padding-inline: .9rem; }
.op-bar .seg-opt { padding: .5rem .95rem; }
.op-court-head { flex-wrap: nowrap; }
.op-court-pick { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.op-court-thumb { flex: none; width: 4.6rem; height: 2.7rem; border: .16rem solid var(--ink); border-radius: .35rem; overflow: hidden; }
.op-court-thumb img { width: 100%; height: 100%; object-fit: cover; }
.op-court-name { font-weight: 900; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-arrow { flex: none; width: 2.3rem; height: 2.3rem; border: .16rem solid var(--ink); border-radius: 50%; background: #fff; font-size: .9rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s; }
.op-arrow:hover, .op-arrow.is-focus { transform: scale(1.12); background: var(--yellow); }

/* ======================= SETTINGS (settings-audit) =======================
   Folder tabs sit ON the panel's top edge; the panel itself never scrolls (its tape and shadow stay whole), the
   inner .set-scroll does. Every option is one row: label + help left, control right-aligned, so every right edge
   lines up. Rows share one focus look (white card, ink border, offset shadow) whatever the control type. */
.settings .set-tabs { left: 16rem; right: 16rem; top: 10.4rem; height: 4.4rem; padding: 0 1.2rem; display: flex; align-items: flex-end; gap: .4rem; z-index: 7; pointer-events: none; }
.set-tabs > * { pointer-events: auto; }
.set-tab { display: inline-flex; align-items: center; gap: .45rem; height: 3.5rem; padding: 0 1.05rem; margin: 0; transform: none; font-size: 1.12rem; color: var(--ink-2); white-space: nowrap; border-radius: .8rem .8rem 0 0; background: #e8d6b6; box-shadow: inset 0 -.35rem .5rem -.3rem rgba(43,27,51,.18); transition: height .18s var(--ease-pop), background-color .15s; }
.set-tab-ico { display: inline-grid; width: 1.45rem; height: 1.45rem; flex: none; } .set-tab-ico svg { width: 100%; height: 100%; }
.set-tab:hover { background: #f1e2c6; }
.set-tab.on { height: 4.15rem; margin-bottom: -.22rem; padding-bottom: .22rem; color: var(--ink); background: var(--paper) var(--paper-tex); background-size: 32rem; box-shadow: inset 0 .36rem 0 var(--pink); transform: none; }
.set-tab.on .set-tab-ico { color: var(--pink); }
.set-tab.is-focus { background-color: var(--yellow); color: var(--ink); transform: none; }
.set-tab.on.is-focus { background: var(--yellow); }
.set-tab-key { align-self: center; margin-bottom: .2rem; cursor: pointer; opacity: .92; filter: drop-shadow(0 .12rem .1rem rgba(43,27,51,.35)); }
.set-tab-key:first-child { margin-right: .3rem; } .set-tab-key:last-child { margin-left: .3rem; }
.settings .set-panel { left: 16rem; right: 16rem; top: 14.6rem; bottom: 5.6rem; padding: 0; overflow: visible; display: flex; flex-direction: column; }
body.text-large .settings .set-panel { bottom: 6.8rem; } /* the hint bar grows with Menu text size */
.set-scroll { position: relative; flex: 1; min-height: 0; overflow: hidden auto; padding: 1.5rem 2.2rem 2rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--pink-2) transparent; border-radius: inherit; }
.set-shade { position: absolute; left: .3rem; right: .9rem; height: 2.6rem; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .2s; }
.set-shade.up { top: .2rem; background: linear-gradient(var(--paper) 15%, rgba(255,248,236,0)); }
.set-shade.down { bottom: .2rem; background: linear-gradient(rgba(255,248,236,0), var(--paper) 80%); }
.set-shade.down::after { content: '▾'; position: absolute; left: 50%; bottom: .1rem; transform: translateX(-50%); font-size: 1.5rem; line-height: 1; color: var(--pink); animation: float 1.4s ease-in-out infinite; }
.set-panel.more-up .set-shade.up, .set-panel.more-down .set-shade.down { opacity: 1; }
.set-body { display: flex; flex-direction: column; gap: .35rem; }
.set-h { display: flex; align-items: baseline; gap: .8rem; margin: 1.2rem 0 .3rem; padding: 0 .2rem .35rem; border-bottom: .16rem solid rgba(43,27,51,.16); font-family: var(--f-title); font-weight: 400; font-size: 1.45rem; letter-spacing: .03em; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.set-h:first-child, .set-group > .set-h:first-child { margin-top: 0; }
.set-h small.jp { font-size: .95rem; color: #c8245e; letter-spacing: 0; text-transform: none; }
.set-group { display: flex; flex-direction: column; gap: .35rem; }
.set-group:not([hidden]) { margin-top: .9rem; }
/* one row look for set-row / toggle / slider */
:is(.settings, .pause-body) :is(.set-row, .toggle, .slider) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.6rem; width: 100%; min-height: 4.1rem; margin: 0; padding: .55rem 1.1rem; text-align: left; border: .16rem solid rgba(43,27,51,.08); border-radius: .7rem; background: rgba(255,255,255,.45); box-shadow: none; transition: background-color .15s, border-color .15s, box-shadow .15s; }
:is(.settings, .pause-body) .slider { grid-template-columns: 17rem minmax(0, 1fr) 4.6rem; }
:is(.settings, .pause-body) .slider-track { margin-left: .4rem; }
:is(.settings, .pause-body) :is(.set-row:has(.is-focus), .toggle.is-focus, .slider.is-focus) { background: #fff; border-color: var(--ink); box-shadow: .22rem .22rem 0 var(--ink); }
:is(.settings, .pause-body) :is(.set-label, .toggle-text) b, :is(.settings, .pause-body) .slider-label { display: block; font-size: 1.2rem; font-weight: 900; line-height: 1.2; color: var(--ink); }
:is(.settings, .pause-body) :is(.set-label, .toggle-text) small { display: block; margin-top: .15rem; font-size: 1rem; line-height: 1.3; font-weight: 700; color: var(--ink-2); }
:is(.settings, .pause-body) .slider b.num { font-size: 1.15rem; }
.set-ctl { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
:is(.settings, .pause-body) .seg-opt { font-size: 1.02rem; padding: .5rem 1.05rem; white-space: nowrap; }
.settings .set-row.stack { grid-template-columns: 1fr; gap: .5rem; }
.settings .set-row.stack .set-ctl { justify-content: stretch; }
.settings .set-row.stack .seg { display: flex; flex: 1; } .settings .set-row.stack .seg-opt { flex: 1 1 auto; padding: .45rem .55rem; font-size: .9rem; }
/* gameplay: Kizuna Assist card with P1–P4 pill switches */
.set-assist { display: grid; grid-template-columns: 4.8rem 1fr; gap: .2rem 1.2rem; align-items: center; padding: 1rem 1.2rem; border: .18rem solid var(--ink); border-radius: .8rem; background: #fff0f5; }
.set-assist-ico { grid-row: span 2; width: 4.8rem; height: 4.8rem; } .set-assist-ico svg { width: 100%; height: 100%; }
.set-assist-text b { display: block; font-size: 1.25rem; } .set-assist-text small { display: block; margin-top: .15rem; font-size: 1rem; line-height: 1.35; color: var(--ink-2); }
.set-assist-row { grid-column: 2; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.settings .set-assist-row .toggle { display: inline-flex; width: auto; min-height: 0; gap: .7rem; padding: .25rem .35rem .25rem .9rem; border: .16rem solid var(--ink); border-radius: 99px; background: #fff; }
.settings .set-assist-row .toggle .toggle-text b { font-size: 1.05rem; }
.settings .set-assist-row .toggle.on { background: #e7f6dd; }
/* accessibility: colour-blind preview lives inside its toggle */
.cb-preview { display: flex; gap: 1.4rem; margin-top: .3rem; font-size: 1.05rem; font-weight: 900; } .cb-preview .team0 { color: var(--team0); } .cb-preview .team1 { color: var(--team1); }
/* controls */
.settings .ctl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: 2.2rem; align-items: start; }
.ctl-main { min-width: 0; }
.settings .ctl-table { font-size: 1.05rem; }
.settings .ctl-table th { padding: .3rem .5rem .4rem; font-size: .85rem; color: var(--ink-2); }
.settings .ctl-table td { padding: .26rem .5rem; } .settings .ctl-table td:first-child { font-weight: 900; }
.settings .ctl-table tr:has(.is-focus) td { background: rgba(255,143,179,.14); }
.settings .set-key { min-width: 4.8rem; height: 2.3rem; }
.pad-key { display: inline-flex; align-items: center; justify-content: center; min-width: 4.8rem; height: 2.3rem; padding: 0 .4rem; border: .16rem solid var(--ink); border-radius: .45rem; background: #fff; box-shadow: 0 .18rem 0 var(--ink); cursor: pointer; }
.pad-key.listening { background: var(--yellow); font-size: .85rem; font-weight: 900; }
.ctl-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
.ctl-foot small { font-size: .95rem; color: var(--ink-2); }
.ctl-side { display: flex; flex-direction: column; gap: .35rem; align-items: stretch; min-width: 0; }
.pad-diagram svg { display: block; width: 100%; max-height: 15rem; }
.ctl-detected { padding: 0 .3rem .2rem; font-size: .92rem; color: var(--ink-2); }
.settings .ctl-side .slider { grid-template-columns: minmax(0, 1fr) auto; row-gap: .5rem; }
.settings .ctl-side .slider-label { grid-row: 1; grid-column: 1; } .settings .ctl-side .slider b.num { grid-row: 1; grid-column: 2; }
.settings .ctl-side .slider-track { grid-row: 2; grid-column: 1 / -1; margin: 0 .6rem .5rem; }
.vib { display: flex; gap: .6rem; align-items: center; } .vib .seg { flex: 1; }
/* profile */
.settings .prof-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; align-items: stretch; }
.prof-name { padding: 1.1rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; box-shadow: var(--shadow-sm); }
.prof-name b.title-marker { font-size: 2.5rem; }
.prof-cap { display: block; font-size: .88rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.prof-note { font-size: 1rem; color: var(--ink-2); }
.np small { font-size: .85rem; text-transform: uppercase; color: var(--ink-2); letter-spacing: .08em; }
.prof-avatar { padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm); }
.prof-av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .5rem; margin-top: .6rem; }
.prof-av-grid .lo-char { width: auto; height: auto; aspect-ratio: 1; }
.prof-family, .save-tools { grid-column: 1 / -1; }
.save-tools { position: relative; display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm); }
.save-tools b { font-size: 1.3rem; } .save-tools small { font-size: 1rem; color: var(--ink-2); }
.save-btns { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .2rem; }
.save-cloud { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; padding-top: .6rem; border-top: 1px dashed var(--ink-3, rgba(0,0,0,.2)); }
.save-cloud > .btn { align-self: flex-start; }
.btn.danger { color: #b8213a; }
/* about */
.about-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem; align-items: center; }
.about-head img { height: 6rem; } .about-head b { display: block; font-size: 1.6rem; } .about-head small { display: block; color: var(--ink-2); }
.about-actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.2rem 0 .4rem; }
.about-card { padding: .9rem 1.1rem; box-shadow: var(--shadow-sm); } .about-card b { font-family: var(--f-title); font-weight: 400; font-size: 1.3rem; } .about-card p { font-size: 1rem; line-height: 1.4; color: var(--ink-2); margin: .3rem 0; }
.notices { display: flex; flex-direction: column; }
.notice { border-bottom: .1rem dashed rgba(43,27,51,.2); }
.notice summary { padding: .45rem .6rem; border-radius: .45rem; cursor: pointer; font-weight: 900; }
.notice summary.is-focus, .notice summary:hover { background: rgba(255,143,179,.16); box-shadow: inset 0 0 0 .16rem var(--ink); }
.notice-text { white-space: pre-wrap; font: 500 .9rem/1.4 ui-monospace, Menlo, monospace; background: #fff; border: .14rem solid var(--ink-soft); border-radius: .4rem; margin: .2rem 0 .6rem; padding: .7rem; max-height: 18rem; overflow: auto; }