/* WORK BEAT — 採用向けの音ゲー（Y2K アイドルステージ・昼の野外フェス） */
:root {
    --ink: #2E2A5A;
    --mute: #6B6790;
    --lav: #6F55E0;
    --lav-l: #C9B5FF;
    --pink: #FF8FC7;
    --cyan: #7FE3FF;
    --gold: #FFD36B;
    --cream: #FDF7FF;
    --holo: linear-gradient(120deg, #FFD6F0 0%, #E5D9FF 35%, #D2F4FF 68%, #FFF3D6 100%);
    --c-movie: #FF5B7F; --c-web: #3EC5FF; --c-game: #A07CFF; --c-sales: #FFC23C;
    --disp: "Fredoka", "M PLUS Rounded 1c", sans-serif;
    --body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--cream); color: var(--ink); font-family: var(--body); font-weight: 500; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; }
.wb-backdrop { position: fixed; inset: -40px; background: var(--holo); filter: saturate(1.1); }
.wb-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.8), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.7), transparent 45%); }
.wb-stage { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; background: var(--cream); border-radius: 24px; box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px rgba(201,181,255,.7), 0 30px 80px rgba(111,85,224,.28); container-type: size; }
.wb-stage.wb-full { border-radius: 0; box-shadow: none; }
.wb-stage [hidden] { display: none !important; }
.wb-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ───── 共通 ───── */
.wb-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: max(4cqw, env(safe-area-inset-top)) 5cqw max(4cqw, env(safe-area-inset-bottom)); text-align: center; }
.wb-screen.enter { animation: wbEnter .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes wbEnter { from { opacity: 0; transform: scale(.97) translateY(1.5cqw); } }
.wb-grow { flex: 1; }
.wb-row { display: flex; gap: 2.6cqw; justify-content: center; flex-wrap: wrap; }
.wb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; text-decoration: none; border-radius: 999px; padding: .8em 2em .85em; font: 900 clamp(14px, 4.3cqw, 22px)/1.2 var(--body); letter-spacing: .06em; word-break: keep-all; transition: transform .12s, filter .12s; position: relative; }
.wb-btn:active { transform: scale(.95); }
.wb-btn:disabled { filter: grayscale(.8) opacity(.6); cursor: default; }
.wb-btn-main { color: #FFFFFF; border: 3px solid #FFFFFF; background: linear-gradient(180deg, #FFB1D8 0%, #FF7FB6 45%, #A98BFF 100%); box-shadow: 0 .3em 0 #7C5FE6, 0 .7em 1.4em rgba(111,85,224,.35); text-shadow: 0 2px 0 rgba(111,85,224,.55); }
.wb-btn-main::after { content: ""; position: absolute; left: 12%; right: 12%; top: 10%; height: 34%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); pointer-events: none; }
.wb-btn-sub { color: var(--ink); background: linear-gradient(180deg, #FFFFFF, #F1ECFF); border: 3px solid var(--lav-l); box-shadow: 0 .26em 0 var(--lav-l); }
.wb-btn-s { font-size: clamp(12px, 3.4cqw, 17px); padding: .55em 1.4em .6em; }
.wb-btn-xl { font-size: clamp(18px, 6.2cqw, 32px); padding: .6em 2.8em .65em; }
.wb-round { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; cursor: pointer; border: 3px solid #FFFFFF; background: var(--holo); box-shadow: 0 3px 0 var(--lav-l), 0 6px 14px rgba(111,85,224,.2); font: 700 18px/1 var(--disp); color: var(--ink); display: grid; place-items: center; padding: 0; }
.wb-pillbtn { min-height: 44px; border-radius: 999px; cursor: pointer; border: 3px solid #FFFFFF; background: var(--holo); box-shadow: 0 3px 0 var(--lav-l); padding: 0 1.1em; font: 700 clamp(12px, 3.4cqw, 16px)/1 var(--disp); color: var(--ink); }
.wb-pillbtn.off { color: #A3A7BC; }
.wb-link { color: var(--ink); font: 800 clamp(12px, 3.4cqw, 15px)/1 var(--body); padding: .8em; min-height: 44px; display: inline-flex; align-items: center; }
.wb-link-btn { background: none; border: 0; text-decoration: underline; cursor: pointer; }
.wb-note { margin: 0; font-size: clamp(10.5px, 2.9cqw, 13.5px); color: var(--mute); line-height: 1.6; word-break: keep-all; }
.wb-panel { width: 100%; background: rgba(255,255,255,.9); border: 3px solid #FFFFFF; border-radius: 26px; box-shadow: 0 0 0 3px rgba(201,181,255,.75), 0 1em 2.4em rgba(111,85,224,.18); padding: 4cqw; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wb-scroll { overflow-y: auto; touch-action: pan-y; flex: 1; min-height: 0; }
.wb-head { margin: 0; font: 700 clamp(20px, 6.6cqw, 34px)/1 var(--disp); letter-spacing: .04em; color: transparent; background: linear-gradient(180deg, #FFFFFF 0%, #FF9FD0 55%, #9F8CFF 100%); -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 0 var(--lav)); }
.wb-sub { font: 800 clamp(11px, 3cqw, 14px)/1 var(--body); color: var(--lav); background: #FFFFFF; border-radius: 999px; padding: .45em .9em; }
.wb-topbar { width: 100%; display: flex; align-items: center; gap: 2cqw; flex: none; }
.wb-back { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #FFFFFF; background: var(--holo); box-shadow: 0 3px 0 var(--lav-l); font: 700 26px/1 var(--disp); color: var(--ink); cursor: pointer; padding: 0 0 4px; }
.wb-big-head { margin: 0 0 2cqw; font: 700 clamp(34px, 12cqw, 60px)/1 var(--disp); letter-spacing: .04em; color: transparent; background: linear-gradient(180deg, #FFFFFF 0%, #FFB8D9 50%, #9F8CFF 100%); -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 5px 0 var(--lav)); }
.wb-big-s { font-size: clamp(26px, 8.6cqw, 44px); }

/* ───── HUD ───── */
.wb-hud { position: absolute; left: 0; right: 0; top: 0; padding: max(2cqw, env(safe-area-inset-top)) 2.6cqw 0; pointer-events: none; display: flex; flex-direction: column; gap: 1.4cqw; font-size: clamp(11px, 3.3cqw, 17px); }
.wb-hud-row { display: flex; align-items: center; gap: 1.6cqw; }
.wb-hud .wb-round { pointer-events: auto; }
.wb-songchip { display: flex; align-items: center; gap: .6em; min-width: 0; max-width: 56%; background: rgba(255,255,255,.92); border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px rgba(201,181,255,.6); border-radius: 999px; padding: .25em .9em .25em .25em; }
.wb-songchip > div { min-width: 0; display: flex; flex-direction: column; gap: .2em; text-align: left; }
.wb-songchip b { font: 900 .95em/1.1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-hud-diff { font: 700 .7em/1 var(--disp); letter-spacing: .06em; color: var(--lav); }
.d-easy { color: #18A88A !important; } .d-normal { color: #E0559A !important; } .d-hard { color: #6F55E0 !important; }
.wb-mini-jk { width: 2.4em; height: 2.4em; flex: none; border-radius: .6em; overflow: hidden; background: var(--holo); display: block; }
.wb-mini-jk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-mini-jk .wb-jk-fb small { display: none; }
.wb-score { background: rgba(255,255,255,.92); border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px rgba(201,181,255,.6); border-radius: 999px; padding: .35em 1em; display: flex; flex-direction: column; align-items: flex-end; }
.wb-score small { font: 700 .58em/1 var(--disp); letter-spacing: .16em; color: var(--mute); }
.wb-score b { font: 700 1.35em/1 var(--disp); font-variant-numeric: tabular-nums; }
.wb-prog { height: 5px; border-radius: 99px; background: rgba(255,255,255,.7); overflow: hidden; }
.wb-prog em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--lav-l), var(--cyan)); }
.wb-meters { display: flex; gap: 2cqw; }
.wb-meter { flex: 1; display: flex; align-items: center; gap: .5em; background: rgba(255,255,255,.9); border: 2px solid #FFFFFF; box-shadow: 0 0 0 2px rgba(201,181,255,.5); border-radius: 999px; padding: .3em .7em; }
.wb-meter small { font: 700 .62em/1 var(--disp); letter-spacing: .12em; color: var(--lav); }
.wb-meter i { flex: 1; height: .8em; border-radius: 99px; background: #ECE6FA; overflow: hidden; position: relative; }
.wb-meter em { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .15s; }
.wb-meter b { font: 700 .7em/1 var(--disp); min-width: 2.6em; text-align: right; }
.wb-live em { background: linear-gradient(90deg, #FFB8D9, #FF7FB6); }
.wb-live.ok em { background: linear-gradient(90deg, #FFE27A, #FF9FD0, #9F8CFF); }
.wb-live u { position: absolute; left: 70%; top: -2px; bottom: -2px; width: 3px; background: var(--lav); border-radius: 2px; }
.wb-fever em { background: linear-gradient(90deg, #7FE3FF, #B69CFF); }
.wb-fever.on { animation: wbFever .4s steps(2) infinite; }
.wb-fever.on em { background: linear-gradient(90deg, #FF9FD0, #FFE27A, #7FE3FF, #B69CFF); }
@keyframes wbFever { 50% { box-shadow: 0 0 0 3px #FFE27A, 0 0 14px #FF9FD0; } }

/* ───── チュートリアル ───── */
.wb-tutcard { position: absolute; left: 4cqw; right: 4cqw; top: calc(max(2cqw, env(safe-area-inset-top)) + 27cqw); background: rgba(255,255,255,.96); border: 3px solid #FFFFFF; border-radius: 22px; box-shadow: 0 0 0 3px var(--lav-l), 0 .8em 1.8em rgba(111,85,224,.2); padding: 3cqw 4cqw; display: flex; flex-direction: column; gap: 1.6cqw; align-items: center; text-align: center; z-index: 5; }
.wb-tutcard.pop { animation: wbEnter .4s cubic-bezier(.2, .9, .3, 1.4) both; }
.wb-tut-top { width: 100%; display: flex; align-items: center; }
.wb-tut-step { font: 700 clamp(12px, 3.4cqw, 16px)/1 var(--disp); letter-spacing: .12em; color: #FFFFFF; background: linear-gradient(90deg, var(--pink), var(--lav-l)); padding: .5em 1em; border-radius: 999px; }
.wb-mini { min-height: 40px; border: 2px solid var(--lav-l); background: #FFFFFF; border-radius: 999px; padding: 0 1em; font: 800 clamp(11px, 3cqw, 14px)/1 var(--body); color: var(--mute); cursor: pointer; }
.wb-tut-text { margin: 0; font: 900 clamp(15px, 4.8cqw, 24px)/1.45 var(--body); word-break: keep-all; }
.wb-tut-text em { font-style: normal; color: #E0559A; }
.wb-tut-text small { font: 700 .62em/1.4 var(--body); color: var(--mute); }
.wb-tut-prog { display: flex; gap: 2cqw; }
.wb-tut-prog i { width: 4cqw; height: 4cqw; min-width: 14px; min-height: 14px; border-radius: 50%; background: #ECE6FA; border: 2px solid var(--lav-l); }
.wb-tut-prog i.on { background: linear-gradient(135deg, #FFE27A, #FF9FD0); border-color: #FFFFFF; box-shadow: 0 0 0 2px var(--pink); }

/* ───── タイトル ───── */
.wb-title { justify-content: flex-start; gap: 2cqw; padding-top: max(3cqw, env(safe-area-inset-top)); }
.wb-topline { width: 100%; display: flex; align-items: center; gap: 2cqw; }
.wb-demo-tag { font: 700 clamp(10px, 2.8cqw, 14px)/1 var(--disp); letter-spacing: .2em; background: #FFFFFF; color: var(--lav); padding: .7em 1em; border-radius: 999px; box-shadow: 0 0 0 2px var(--lav-l); }
.wb-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--pink); margin-right: .6em; animation: wbBlink 1s steps(2) infinite; }
@keyframes wbBlink { 50% { opacity: 0; } }
.wb-logo-wrap { width: 92cqw; animation: wbFloat 3.4s ease-in-out infinite; position: relative; }
.wb-logo-wrap::before { content: ""; position: absolute; inset: 4% -2% 2%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 45%, rgba(255,255,255,0) 72%); pointer-events: none; }
.wb-logo, .wb-logo-svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(.35cqw 0 0 #7C5FE6) drop-shadow(-.35cqw 0 0 #7C5FE6) drop-shadow(0 .35cqw 0 #7C5FE6) drop-shadow(0 -.35cqw 0 #7C5FE6) drop-shadow(0 0 1.4cqw #fff) drop-shadow(0 1.4cqw 2.4cqw rgba(111,85,224,.35)); }
@keyframes wbFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6cqw) rotate(1deg); } }
.wb-ls-t { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 230px; letter-spacing: 4px; }
.wb-ls-big { font-size: 300px; }
.wb-ls-o { fill: var(--lav); stroke: var(--lav); stroke-width: 56; stroke-linejoin: round; }
.wb-ls-w { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 36; stroke-linejoin: round; }
.wb-ls-ja { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900; font-size: 54px; letter-spacing: 6px; fill: var(--lav); }
.wb-title-bottom { margin-top: auto; width: calc(100% + 10cqw); margin-left: -5cqw; margin-right: -5cqw; padding: 10cqw 5cqw 0; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; background: linear-gradient(180deg, rgba(253,247,255,0), rgba(253,247,255,.92) 22%, rgba(253,247,255,.97)); }
.wb-catch { margin: 0; font: 900 clamp(15px, 4.9cqw, 26px)/1.45 var(--body); letter-spacing: .04em; word-break: keep-all; color: var(--ink); text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; }
.wb-title-bottom .wb-btn-main { animation: wbPulse 1.07s ease-in-out infinite; }
.wb-title-bottom .wb-row { flex-wrap: nowrap; }
.wb-title-bottom .wb-row .wb-btn { font-size: clamp(12px, 3.7cqw, 18px); padding: .65em 1.2em .7em; }
@keyframes wbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.wb-stars { margin: 0; font: 700 clamp(12px, 3.6cqw, 17px)/1 var(--disp); color: #E39A00; letter-spacing: .08em; }

/* ───── あそびかた ───── */
.wb-how { justify-content: flex-start; }
.wb-how-list { list-style: none; margin: 0 0 3cqw; padding: 0; display: flex; flex-direction: column; gap: 2.4cqw; text-align: left; }
.wb-how-list li { display: flex; gap: 3cqw; align-items: center; background: #FFFFFF; border-radius: 18px; padding: 2.4cqw; box-shadow: 0 0 0 2px #EFE8FF; }
.wb-how-list b { font: 900 clamp(14px, 4.2cqw, 20px)/1.2 var(--body); color: var(--lav); }
.wb-how-list p { margin: .3em 0 0; font: 700 clamp(12px, 3.4cqw, 16px)/1.55 var(--body); }
.wb-how-list em { font-style: normal; color: #E0559A; }
.wb-how-list kbd { font: 700 .85em/1 var(--disp); border: 2px solid var(--lav-l); border-bottom-width: 4px; border-radius: 6px; padding: .1em .35em; margin: 0 .1em; background: #fff; }
.fig { flex: none; width: 19cqw; height: 15cqw; min-width: 64px; min-height: 52px; border-radius: 14px; background: var(--holo); position: relative; overflow: hidden; }
.fig-tap i { position: absolute; left: 22%; right: 22%; top: 18%; height: 22%; border-radius: 999px; background: linear-gradient(180deg, #fff, var(--c-movie)); border: 2px solid #fff; animation: figFall 1.2s linear infinite; }
.fig-tap u, .fig-hold u { position: absolute; left: 14%; right: 14%; bottom: 12%; height: 22%; border-radius: 50%; border: 3px solid var(--c-movie); }
.fig-hold i { position: absolute; left: 30%; right: 30%; top: 8%; bottom: 22%; border-radius: 10px; background: linear-gradient(180deg, rgba(62,197,255,.35), rgba(62,197,255,.85)); border: 2px solid #fff; }
.fig-hold u { border-color: var(--c-web); }
.fig-dbl i { position: absolute; top: 38%; width: 30%; height: 24%; border-radius: 999px; border: 2px solid #fff; }
.fig-dbl i:first-child { left: 8%; background: var(--c-game); } .fig-dbl i:last-child { right: 8%; background: var(--c-sales); }
.fig-dbl::after { content: ""; position: absolute; left: 30%; right: 30%; top: 47%; height: 6%; background: #fff; }
.fig-judge { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
.fig-judge s { text-decoration: none; font: 700 clamp(8px, 2.4cqw, 12px)/1 var(--disp); }
.fig-judge .p { color: #FF5FA0; } .fig-judge .gr { color: #4BA8FF; } .fig-judge .gd { color: #2FB7A0; }
.fig-fever i { position: absolute; left: 12%; right: 12%; top: 42%; height: 18%; border-radius: 99px; background: linear-gradient(90deg, #FF9FD0, #FFE27A, #7FE3FF, #B69CFF); animation: wbFever .5s steps(2) infinite; }
.fig-live i { position: absolute; left: 12%; right: 12%; top: 42%; height: 18%; border-radius: 99px; background: linear-gradient(90deg, #FFB8D9 0 78%, #ECE6FA 78%); }
.fig-live u { position: absolute; left: 61%; top: 34%; height: 34%; width: 3px; background: var(--lav); }
.fig-job { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 10px 8px; }
.fig-job i { border-radius: 6px; } .fig-job .c1 { background: var(--c-movie); } .fig-job .c2 { background: var(--c-web); } .fig-job .c3 { background: var(--c-game); } .fig-job .c4 { background: var(--c-sales); }
@keyframes figFall { from { transform: translateY(-60%); } to { transform: translateY(150%); } }
.wb-how-tip { margin: 0 0 3cqw; font: 700 clamp(11px, 3cqw, 14px)/1.5 var(--body); color: var(--mute); }

/* ───── 曲選択 ───── */
.wb-select { justify-content: flex-start; gap: 2cqw; }
.wb-starpill { font: 700 clamp(12px, 3.4cqw, 16px)/1 var(--disp); color: #E39A00; background: #FFFFFF; border-radius: 999px; padding: .55em .9em; box-shadow: 0 0 0 2px #FFE7A6; margin-left: auto; }
.wb-sel-panel { width: 100%; flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; display: flex; flex-direction: column; align-items: center; gap: 1.8cqw; margin-top: 15cqh; background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.94) 18%); border: 3px solid #FFFFFF; border-radius: 26px; box-shadow: 0 0 0 3px rgba(201,181,255,.75), 0 1em 2.4em rgba(111,85,224,.18); padding: 3cqw 4cqw 4cqw; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wb-carousel { position: relative; width: 100%; height: min(40cqw, 22cqh); flex: none; display: flex; align-items: center; justify-content: space-between; touch-action: pan-y; }
.wb-jk-track { position: absolute; inset: 0; }
.wb-jk { position: absolute; left: 50%; top: 50%; width: min(40cqw, 22cqh); height: min(40cqw, 22cqh); padding: 0; border: 4px solid #FFFFFF; border-radius: 20px; overflow: hidden; background: var(--holo); cursor: pointer; transform: translate(-50%, -50%) translateX(calc(var(--off) * 34cqw)) scale(calc(1 - min(1, max(var(--off), calc(var(--off) * -1))) * .32)); transition: transform .35s cubic-bezier(.2, .9, .3, 1.15), opacity .3s; box-shadow: 0 0 0 3px rgba(201,181,255,.7), 0 .6em 1.4em rgba(111,85,224,.25); }
.wb-jk.cur { box-shadow: 0 0 0 3px #FF9FD0, 0 0 0 7px #FFFFFF, 0 .8em 1.8em rgba(111,85,224,.35); }
.wb-jk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-jk-fb { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; }
[data-song="movie"] .wb-jk-fb { background: linear-gradient(135deg, #FFE0EA, #FF8FAE); }
[data-song="web"] .wb-jk-fb { background: linear-gradient(135deg, #E2F8FF, #7FD8FF); }
[data-song="game"] .wb-jk-fb { background: linear-gradient(135deg, #F0E9FF, #B9A0FF); }
[data-song="sales"] .wb-jk-fb { background: linear-gradient(135deg, #FFF6DA, #FFD36B); }
[data-song="final"] .wb-jk-fb, [data-song="tut"] .wb-jk-fb { background: var(--holo); }
[data-song="locked"] .wb-jk-fb { background: linear-gradient(135deg, #F4F2FA, #DCD6EE); }
.wb-jk-balls { display: flex; flex-wrap: wrap; justify-content: center; width: 80%; }
.wb-jk-balls img { width: 60%; height: auto; }
.wb-jk-balls.n4 img { width: 44%; }
.wb-jk-fb small { font: 700 clamp(9px, 2.6cqw, 13px)/1 var(--disp); color: #FFFFFF; letter-spacing: .06em; text-shadow: 0 1px 0 rgba(111,85,224,.6); }
.wb-jk-fb b { font: 700 clamp(30px, 12cqw, 60px)/1 var(--disp); color: #FFFFFF; text-shadow: 0 3px 0 var(--lav-l); }
.wb-arrow { position: relative; z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #FFFFFF; background: rgba(255,255,255,.9); box-shadow: 0 3px 0 var(--lav-l); font: 700 26px/1 var(--disp); color: var(--lav); cursor: pointer; padding: 0 0 4px; }
.wb-dots { display: flex; gap: 6px; }
.wb-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E2DAF6; }
.wb-dots i.on { background: var(--pink); width: 22px; border-radius: 99px; }
.wb-dots i.lk { opacity: .45; }
.wb-sel-info { display: flex; flex-direction: column; gap: .8cqw; align-items: center; }
.wb-sel-no { margin: 0; font: 700 clamp(10px, 2.8cqw, 13px)/1 var(--disp); letter-spacing: .2em; color: var(--lav); }
.wb-sel-en { margin: 0; font: 700 clamp(18px, 6.2cqw, 32px)/1 var(--disp); letter-spacing: .03em; color: transparent; background: linear-gradient(90deg, #FF7FB6, #9F8CFF, #3EC5FF); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #fff); }
.wb-sel-title { margin: 0; font: 900 clamp(15px, 4.6cqw, 23px)/1.25 var(--body); word-break: keep-all; }
.wb-sel-meta { margin: 0; display: flex; gap: 2cqw; align-items: center; flex-wrap: wrap; justify-content: center; font: 700 clamp(11px, 3cqw, 14px)/1 var(--disp); color: var(--mute); }
.wb-chip { font: 800 clamp(11px, 3cqw, 14px)/1 var(--body); color: #FFFFFF; background: var(--c, var(--lav)); border-radius: 999px; padding: .45em .9em; }
.wb-sel-lead { margin: 0; font: 700 clamp(11.5px, 3.2cqw, 15px)/1.5 var(--body); color: var(--mute); word-break: keep-all; overflow-wrap: anywhere; }
.wb-diffs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.wb-diff { position: relative; min-height: 52px; border-radius: 16px; border: 3px solid #FFFFFF; background: #F4F0FF; box-shadow: 0 0 0 2px #E2DAF6; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: .4em .2em; }
.wb-diff small { font: 700 clamp(10px, 2.8cqw, 13px)/1 var(--disp); letter-spacing: .1em; }
.wb-diff b { font: 700 clamp(14px, 4.2cqw, 20px)/1 var(--disp); }
.wb-diff-easy small { color: #18A88A; } .wb-diff-normal small { color: #E0559A; } .wb-diff-hard small { color: #6F55E0; }
.wb-diff.on { background: linear-gradient(180deg, #FFFFFF, #FFE6F3); box-shadow: 0 0 0 3px #FF9FD0, 0 4px 0 #FF9FD0; transform: translateY(-2px); }
.wb-diff-easy.on { box-shadow: 0 0 0 3px #5FD9BC, 0 4px 0 #5FD9BC; background: linear-gradient(180deg, #FFFFFF, #E2FBF3); }
.wb-diff-hard.on { box-shadow: 0 0 0 3px #A98BFF, 0 4px 0 #A98BFF; background: linear-gradient(180deg, #FFFFFF, #EEE7FF); }
.wb-diff.lk { opacity: .55; }
.wb-diff em { position: absolute; top: -9px; right: -4px; font: 700 10px/1 var(--disp); font-style: normal; color: #FFFFFF; border-radius: 99px; padding: .35em .5em; background: #5FD9BC; }
.wb-diff em.fc { background: #FF7FB6; } .wb-diff em.ap { background: linear-gradient(90deg, #FFC23C, #FF7FB6); }
.wb-sel-rec { display: flex; gap: 2cqw; width: 100%; justify-content: center; }
.wb-sel-rec span { flex: 1; background: #FFFFFF; border-radius: 14px; box-shadow: 0 0 0 2px #EFE8FF; padding: .5em; display: flex; flex-direction: column; gap: .3em; }
.wb-sel-rec small { font: 700 clamp(9px, 2.4cqw, 12px)/1 var(--disp); letter-spacing: .12em; color: var(--mute); }
.wb-sel-rec b { font: 700 clamp(14px, 4cqw, 19px)/1 var(--disp); }
.rk-S { color: #E39A00; } .rk-A { color: #E0559A; } .rk-B { color: #3EA0E0; } .rk-C, .rk-D { color: #8A8DA6; }
.wb-missions { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.2cqw; text-align: left; }
.wb-missions li { display: flex; align-items: center; gap: 2cqw; background: #FFFFFF; border-radius: 999px; padding: .45em 1em .45em .5em; box-shadow: 0 0 0 2px #EFE8FF; font: 800 clamp(11.5px, 3.3cqw, 15px)/1.3 var(--body); }
.wb-missions li i { font-style: normal; width: 1.7em; height: 1.7em; flex: none; display: grid; place-items: center; border-radius: 50%; background: #ECE8F6; color: #FFFFFF; font-size: 1em; }
.wb-missions li.done i { background: linear-gradient(135deg, #FFE27A, #FFB23C); box-shadow: 0 0 0 2px #FFF1B8; }
.wb-missions li span { flex: 1; }
.wb-missions li b { font: 700 .75em/1 var(--disp); color: #FFFFFF; background: var(--pink); border-radius: 99px; padding: .35em .6em; }
.wb-missions li.new i { animation: wbStar .6s cubic-bezier(.34, 1.56, .64, 1) 1.5s backwards; }
@keyframes wbStar { from { transform: scale(0) rotate(-120deg); } }
.wb-sel-panel .wb-btn-xl { margin-top: 1cqw; position: sticky; bottom: 0; flex: none; }
@container (max-height: 700px) { .wb-sel-panel { margin-top: 6cqh; } .wb-sel-lead { display: none; } }

/* ───── 図鑑 ───── */
.wb-dex { justify-content: flex-start; }
.wb-dex .wb-panel { margin-top: 2cqw; }
.wb-dex-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqw; margin-bottom: 3cqw; }
.wb-dtab { min-height: 44px; border: 3px solid #FFFFFF; border-radius: 16px; background: #F7F3FF; box-shadow: 0 0 0 2px #E8E0FA; padding: .4em .2em; display: flex; flex-direction: column; align-items: center; gap: .3em; cursor: pointer; }
.wb-dtab img { width: 12cqw; height: 12cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: #FFF; }
.wb-dtab-all { width: 12cqw; height: 12cqw; border-radius: 50%; display: grid; place-items: center; font: 700 clamp(11px, 3cqw, 14px)/1 var(--disp); color: #FFFFFF; background: conic-gradient(var(--c-movie) 0 25%, var(--c-web) 0 50%, var(--c-game) 0 75%, var(--c-sales) 0); border: 3px solid #FFFFFF; }
.wb-dtab small { font: 800 clamp(10px, 2.8cqw, 13px)/1 var(--body); }
.wb-dtab em { font: 700 clamp(9px, 2.4cqw, 12px)/1 var(--disp); font-style: normal; color: var(--mute); }
.wb-dtab.on { background: #FFFFFF; box-shadow: 0 0 0 3px var(--c), 0 4px 0 var(--c); }
.wb-dex-prof { display: flex; gap: 3cqw; align-items: center; text-align: left; background: linear-gradient(135deg, #FFFFFF, #F6F1FF); border-radius: 20px; padding: 3cqw; box-shadow: 0 0 0 2px #EFE8FF; margin-bottom: 2.4cqw; }
.wb-dex-prof img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; border: 4px solid var(--c); background: #FFF; flex: none; }
.wb-dex-prof > div { min-width: 0; }
.wb-dex-type { margin: 0 0 .3em; font: 800 clamp(10.5px, 2.9cqw, 14px)/1.2 var(--body); color: #E0559A; }
.wb-dex-name { margin: 0; font: 900 clamp(15px, 4.8cqw, 26px)/1.2 var(--body); white-space: nowrap; }
.wb-dex-song { margin: .4em 0 0; font: 700 clamp(11px, 3cqw, 14px)/1.4 var(--body); color: var(--mute); }
.wb-dex-match { margin: .4em 0 0; font: 700 clamp(11px, 3cqw, 14px)/1.4 var(--body); }
.wb-dex-match b { color: var(--lav); }
.wb-dex-page { text-align: left; background: #FFFFFF; border-radius: 18px; box-shadow: 0 0 0 2px #EFE8FF; padding: 3cqw 3.4cqw; margin-bottom: 2cqw; }
.wb-dex-ph { margin: 0 0 .5em; font: 900 clamp(14px, 4.2cqw, 19px)/1.3 var(--body); color: var(--lav); display: flex; align-items: center; gap: .5em; }
.wb-dex-ph i { font: 700 .8em/1 var(--disp); font-style: normal; width: 1.7em; height: 1.7em; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; background: linear-gradient(135deg, var(--pink), var(--lav-l)); }
.wb-dex-pb { margin: 0; font: 700 clamp(12.5px, 3.6cqw, 16.5px)/1.7 var(--body); }
.wb-dex-page.lk { background: #F6F4FB; }
.wb-dex-page.lk .wb-dex-ph { color: #A3A7BC; }
.wb-dex-page.lk .wb-dex-ph i { background: #CFCBE0; }
.wb-dex-page.lk .wb-dex-pb { color: #8A8DA6; }

/* ───── 一時停止・設定 ───── */
.wb-pause { background: rgba(253,247,255,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); gap: 3.4cqw; z-index: 30; }
.wb-pause .wb-btn { min-width: 62cqw; }
.wb-settings { background: rgba(253,247,255,.6); z-index: 40; }
.wb-set-panel { display: flex; flex-direction: column; gap: 3cqw; align-items: stretch; max-width: 92cqw; }
.wb-set-row { display: flex; align-items: center; gap: 2cqw; background: #FFFFFF; border-radius: 18px; box-shadow: 0 0 0 2px #EFE8FF; padding: 2.4cqw 3cqw; text-align: left; }
.wb-set-row > span { flex: 1; font: 900 clamp(13px, 3.8cqw, 18px)/1.3 var(--body); display: flex; flex-direction: column; gap: .3em; }
.wb-set-row small { font: 700 .72em/1.4 var(--body); color: var(--mute); }
.wb-set-row b { min-width: 3.4em; text-align: center; font: 700 clamp(15px, 4.4cqw, 21px)/1 var(--disp); }

/* ───── 結果 ───── */
.wb-result { background: rgba(253,247,255,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); justify-content: flex-start; overflow-y: auto; gap: 2.4cqw; touch-action: pan-y; padding-top: max(5cqw, env(safe-area-inset-top)); }
.wb-res-song { margin: 0; display: flex; align-items: center; gap: .6em; font-size: clamp(12px, 3.5cqw, 17px); }
.wb-res-song b { font: 900 1em/1.2 var(--body); }
.wb-res-diff { font: 700 .78em/1 var(--disp); letter-spacing: .06em; background: #FFFFFF; border-radius: 99px; padding: .4em .7em; box-shadow: 0 0 0 2px #EFE8FF; }
.wb-res-head { min-height: 16cqw; display: grid; place-items: center; animation: wbIn .7s cubic-bezier(.34, 1.56, .64, 1); }
.wb-result > * { flex-shrink: 0; }
.wb-res-head img { width: auto; height: 30cqw; max-width: 80cqw; object-fit: contain; display: block; }
.wb-res-head span { font: 700 clamp(34px, 12cqw, 62px)/1 var(--disp); letter-spacing: .02em; color: transparent; background: linear-gradient(180deg, #FFFFFF 0%, #FFB8D9 45%, #9F8CFF 100%); -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 5px 0 var(--lav)); }
.wb-res-head.w-ap span, .wb-res-head.w-fullcombo span { background: linear-gradient(180deg, #FFFFFF, #FFE27A 45%, #FF7FB6); -webkit-background-clip: text; background-clip: text; }
.wb-res-head.w-nicetry span { background: linear-gradient(180deg, #FFFFFF, #CFE9FF 45%, #A98BFF); -webkit-background-clip: text; background-clip: text; }
@keyframes wbIn { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
.wb-res-gauge { margin: -1cqw 0 0; font: 800 clamp(11.5px, 3.3cqw, 15px)/1.3 var(--body); color: #E0559A; }
.wb-res-gauge.ng { color: var(--mute); }
.wb-res-main { display: flex; align-items: center; gap: 4cqw; }
.wb-rank { width: 23cqw; height: 23cqw; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 clamp(40px, 14cqw, 70px)/1 var(--disp); color: #FFFFFF; background: conic-gradient(from 200deg, #FFD36B, #FF9FD0, #B69CFF, #7FE3FF, #9FF0D6, #FFD36B); border: 5px solid #FFFFFF; box-shadow: 0 0 0 3px var(--lav-l), 0 .3em 0 var(--lav); text-shadow: 0 3px 0 var(--lav), 0 0 8px rgba(111,85,224,.4); }
.wb-rank:empty { background: #EFEAFB; }
.wb-rank.stamp { animation: wbStamp .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wbStamp { from { transform: scale(2.4) rotate(-20deg); opacity: 0; } }
.wb-res-score { display: flex; flex-direction: column; align-items: flex-start; gap: .3em; }
.wb-res-score small { font: 700 clamp(11px, 3cqw, 15px)/1 var(--disp); letter-spacing: .2em; color: var(--mute); }
.wb-res-score b { font: 700 clamp(30px, 10cqw, 52px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.wb-badges { display: flex; gap: .4em; flex-wrap: wrap; }
.wb-badges span { font: 700 clamp(10px, 2.8cqw, 13px)/1 var(--disp); letter-spacing: .06em; color: #FFFFFF; border-radius: 999px; padding: .45em .8em; animation: wbIn .5s cubic-bezier(.34, 1.56, .64, 1) 1.4s backwards; }
.b-rec { background: #FF7FB6; } .b-fc { background: linear-gradient(90deg, #FF9FD0, #A98BFF); } .b-ap { background: linear-gradient(90deg, #FFC23C, #FF7FB6, #A98BFF); }
.wb-res-judge, .wb-res-sub { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 1.4cqw; }
.wb-res-judge { grid-template-columns: repeat(4, 1fr); }
.wb-res-sub { grid-template-columns: repeat(3, 1fr); }
.wb-res-judge li, .wb-res-sub li { background: #FFFFFF; border-radius: 14px; box-shadow: 0 0 0 2px #EFE8FF; padding: 1.6cqw .4cqw; display: flex; flex-direction: column; gap: .5em; }
.wb-res-judge small, .wb-res-sub small { font: 700 clamp(8.5px, 2.4cqw, 12px)/1 var(--disp); letter-spacing: .04em; color: var(--mute); white-space: nowrap; }
.wb-res-judge b, .wb-res-sub b { font: 700 clamp(15px, 4.8cqw, 24px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.wb-res-judge .p b { color: #FF5FA0; } .wb-res-judge .gr b { color: #4BA8FF; } .wb-res-judge .gd b { color: #2FB7A0; } .wb-res-judge .m b { color: #A3A7BC; }
.wb-res-unlocks { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.2cqw; }
.wb-res-unlocks li { background: linear-gradient(90deg, #FFF6D6, #FFE6F3); border: 2px solid #FFFFFF; box-shadow: 0 0 0 2px #FFD36B; border-radius: 14px; padding: .6em 1em; font: 900 clamp(12px, 3.4cqw, 16px)/1.4 var(--body); text-align: left; animation: wbIn .5s cubic-bezier(.34, 1.56, .64, 1) 1.8s backwards; }
.wb-res-top-btns .wb-btn { min-width: 38cqw; }
.wb-res-match { width: 100%; background: #FFFFFF; border: 3px solid #FFFFFF; border-radius: 22px; box-shadow: 0 0 0 3px var(--lav-l), 0 .3em 0 var(--lav-l); padding: 3.4cqw 4cqw; text-align: left; display: flex; flex-direction: column; gap: 1.4cqw; }
.wb-res-lead { margin: 0; font: 800 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.wb-res-job { display: flex; align-items: center; gap: 3cqw; }
.wb-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; border: 5px solid var(--jc, var(--lav)); background: var(--cream); flex: none; }
.wb-res-job > div { min-width: 0; }
.wb-res-type { margin: 0 0 .3em; font: 800 clamp(11px, 3cqw, 14px)/1.2 var(--body); color: #E0559A; }
.wb-res-name { margin: 0; font: 900 clamp(16px, 5.2cqw, 28px)/1.25 var(--body); white-space: nowrap; }
.wb-res-reason { margin: 0; font: 900 clamp(12.5px, 3.7cqw, 17px)/1.6 var(--body); background: linear-gradient(90deg, #FFF0F7, #F1ECFF); border-radius: 14px; padding: .7em .9em; }
.wb-res-desc { margin: 0; font: 500 clamp(13px, 3.7cqw, 17.6px)/1.7 var(--body); }
.wb-res-barhead { margin: .6em 0 0; font: 800 clamp(11px, 3cqw, 14px)/1 var(--body); color: var(--mute); }
.wb-res-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.wb-res-bar { display: grid; grid-template-columns: 9em 1fr 3.2em; align-items: center; gap: .8em; font: 700 clamp(11px, 3cqw, 14px)/1 var(--body); }
.wb-res-bar i { height: 1.1em; background: #F0ECFA; border-radius: 999px; overflow: hidden; }
.wb-res-bar em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.wb-res-bar span:last-child { text-align: right; font-family: var(--disp); }
.wb-res-bar.top span:first-child { font-weight: 900; color: var(--lav); }
.wb-res-match .wb-btn-s { align-self: center; margin-top: 1cqw; }
.wb-res-small { margin: 0; font-size: clamp(10.5px, 2.8cqw, 13.6px); color: var(--mute); line-height: 1.6; }
.wb-res-btns { display: flex; flex-direction: column; gap: 2.4cqw; align-items: center; padding-bottom: 5cqw; }
.wb-res-btns .wb-btn { min-width: 72cqw; }

/* ───── 切り替えのワイプ・通知・読み込み ───── */
.wb-wipe { position: absolute; inset: 0; pointer-events: none; z-index: 60; background: var(--holo); clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
.wb-wipe::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%); }
.wb-wipe.in { animation: wbWipeIn .3s cubic-bezier(.6, 0, .4, 1) forwards; pointer-events: auto; }
.wb-wipe.out { animation: wbWipeOut .38s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes wbWipeIn { from { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); } to { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); } }
@keyframes wbWipeOut { from { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); } to { clip-path: polygon(130% 0, 130% 0, 100% 100%, 100% 100%); } }
.wb-toasts { position: absolute; left: 5cqw; right: 5cqw; bottom: max(6cqw, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 2cqw; pointer-events: none; z-index: 50; }
.wb-toast { background: rgba(46,42,90,.88); color: #FFFFFF; font: 800 clamp(12px, 3.4cqw, 16px)/1.4 var(--body); padding: .7em 1.2em; border-radius: 999px; animation: wbToast 2.6s ease both; }
@keyframes wbToast { 0% { opacity: 0; transform: translateY(10px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.wb-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; background: var(--cream); transition: opacity .4s; font: 700 clamp(12px, 3.4cqw, 16px)/1 var(--disp); letter-spacing: .3em; color: var(--lav); z-index: 70; }
.wb-loading i { width: 12cqw; height: 12cqw; border-radius: 50%; border: 1.6cqw solid #ECE6FA; border-top-color: var(--pink); animation: wbSpin .8s linear infinite; }
@keyframes wbSpin { to { transform: rotate(360deg); } }
.wb-loading.off { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .wb-logo-wrap, .wb-title-bottom .wb-btn-main, .wb-fever.on, .fig-tap i, .fig-fever i { animation: none; }
    .wb-screen.enter { animation: none; }
}

/* スマホ幅でも文字は12pxを下回らせない（元の大きさが12px以上の環境では元のまま） */
.wb-note { font-size: max(12px, clamp(10.5px, 2.9cqw, 13.5px)); }
.wb-sub { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.wb-songchip b { font-size: max(12px, .95em); }
.wb-hud-diff { font-size: max(12px, .7em); }
.wb-score small { font-size: max(12px, .58em); letter-spacing: .08em; }
.wb-meter small { font-size: max(12px, .62em); letter-spacing: .04em; }
.wb-meter b { font-size: max(12px, .7em); }
.wb-mini { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.wb-tut-text small { font-size: max(12px, .62em); }
.wb-demo-tag { font-size: max(12px, clamp(10px, 2.8cqw, 14px)); }
.wb-how-list kbd { font-size: max(12px, .85em); }
.fig-judge s { font-size: max(12px, clamp(8px, 2.4cqw, 12px)); }
.wb-how-tip { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.wb-jk-fb small { font-size: max(12px, clamp(9px, 2.6cqw, 13px)); }
.wb-sel-no { font-size: max(12px, clamp(10px, 2.8cqw, 13px)); }
.wb-sel-meta { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.wb-chip { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.wb-sel-lead { font-size: max(12px, clamp(11.5px, 3.2cqw, 15px)); }
.wb-diff small { font-size: max(12px, clamp(10px, 2.8cqw, 13px)); letter-spacing: .04em; }
.wb-diff em { font-size: 12px; }
.wb-sel-rec small { font-size: max(12px, clamp(9px, 2.4cqw, 12px)); letter-spacing: .06em; }
.wb-missions li { font-size: max(12px, clamp(11.5px, 3.3cqw, 15px)); }
.wb-missions li b { font-size: max(12px, .75em); }
.wb-dtab-all { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.wb-dtab small { font-size: max(12px, clamp(10px, 2.8cqw, 13px)); }
.wb-dtab em { font-size: max(12px, clamp(9px, 2.4cqw, 12px)); }
.wb-dex-type { font-size: max(12px, clamp(10.5px, 2.9cqw, 14px)); }
.wb-dex-song, .wb-dex-match { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.wb-set-row small { font-size: max(12px, .72em); }
.wb-res-diff { font-size: max(12px, .78em); }
.wb-res-gauge { font-size: max(12px, clamp(11.5px, 3.3cqw, 15px)); }
.wb-res-score small { font-size: max(12px, clamp(11px, 3cqw, 15px)); }
.wb-badges span { font-size: max(12px, clamp(10px, 2.8cqw, 13px)); }
.wb-res-judge small, .wb-res-sub small { font-size: max(12px, clamp(8.5px, 2.4cqw, 12px)); letter-spacing: 0; }
.wb-res-type, .wb-res-barhead, .wb-res-bar { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.wb-res-small { font-size: max(12px, clamp(10.5px, 2.8cqw, 13.6px)); }