:root { color-scheme:dark; --bg:#09090e; --surface:#101017; --surface-alt:#15151d; --surface-hover:#1d1b27; --text:#f5f2fc; --muted:#a3a0b1; --dim:#777483; --purple:#9b5cff; --lilac:#cbb4ff; --line:rgba(255,255,255,.085); --cyan:#6acfe3; --green:#b3e9c4; --corner:18px; --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --focus-ring:#caa8ff; }
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg); scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);font-style:normal;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--lilac);outline-offset:3px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}svg{display:block;width:20px;height:20px;flex-shrink:0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ambient{position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(85px);opacity:.26}.ambient--first{width:490px;height:490px;right:-270px;top:120px;background:#562994}.ambient--second{width:310px;height:310px;left:-190px;top:620px;background:#352057;opacity:.15}
.topbar{position:relative;z-index:3;height:78px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(20px,4vw,64px);border-bottom:1px solid rgba(255,255,255,.06)}.brand{display:inline-flex;align-items:center;gap:11px;font-size:23px;font-weight:780;letter-spacing:-.07em;white-space:nowrap}.brand-symbol{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;color:#efe6ff;background:#8342eb}.brand-symbol img{width:100%;height:100%;display:block;object-fit:contain}.brand-purple{color:#bc98ff}.topbar-center{display:flex;align-items:center;gap:15px;font-size:10px;font-weight:800;color:#777381;letter-spacing:.14em}.topbar-divider{height:15px;width:1px;background:#3b3942}.topbar-dot,.beta-dot,.stage-dot{height:5px;width:5px;background:var(--purple);border-radius:50%;display:inline-block}.topbar-right{font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:10px;color:#bdb8c9;font-size:11px;font-weight:700;letter-spacing:.04em}.beta-dot{height:7px;width:7px;box-shadow:0 0 14px #b57bff}.topbar-separator{width:1px;height:13px;background:#33303c;margin:0 5px}
.container{position:relative;z-index:1;max-width:1360px;margin:auto;padding:47px clamp(18px,4vw,64px) 42px}.intro{margin-bottom:39px}.intro-eyebrow,.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--lilac);font-weight:800}.intro-eyebrow{display:flex;align-items:center;gap:12px}.eyebrow-rule{height:2px;width:25px;background:var(--purple)}.intro-issue{margin-left:8px;color:#787385}.intro h1{font-size:clamp(36px,4.1vw,62px);line-height:1.065;font-weight:760;letter-spacing:-.061em;margin:14px 0 12px}.intro h1 span{color:#ac79ff}.intro p{max-width:560px;color:#aaa6b7;font-size:14px;line-height:1.68}
.game-layout{display:grid;grid-template-columns:minmax(265px,325px) minmax(0,1fr);gap:23px;align-items:start}.settings{background:rgba(20,19,27,.95);border:1px solid var(--line);border-radius:var(--corner);padding:24px 21px 22px;box-shadow:0 20px 60px rgba(0,0,0,.15)}.settings-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.settings-head h2{font-size:21px;font-weight:690;letter-spacing:-.045em;margin-top:7px}.settings-index{font-size:10px;color:#7e788d;white-space:nowrap;letter-spacing:.1em;padding-top:2px}.section-divider{border-top:1px solid var(--line);margin:22px 0 18px}.setting-section{display:grid;gap:12px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-heading h3{font-size:12px;font-weight:730;letter-spacing:.005em}.section-note{font-size:10px;color:#898493;white-space:nowrap}.space-top{margin-top:9px}
.beat-options{display:grid;gap:7px}.beat-option{display:flex;text-align:left;align-items:center;gap:10px;width:100%;padding:9px;background:transparent;border:1px solid transparent;border-radius:12px;transition:background .14s,border-color .14s}.beat-option:hover{background:#23202d}.beat-option.is-selected{background:rgba(155,92,255,.1);border-color:rgba(155,92,255,.35)}.beat-thumb,.stage-cover{flex:0 0 auto;position:relative;display:grid;place-items:center;border-radius:9px;overflow:hidden;background:#49346c}.beat-thumb{height:43px;width:43px}.beat-thumb::before,.stage-cover::before{content:"";position:absolute;inset:-30%;background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(255,255,255,.14) 10px,transparent 11px 17px);transform:rotate(-12deg)}.beat-thumb svg{position:relative;width:17px;height:17px;color:#fff}.night{background:linear-gradient(135deg,#3f2269,#b94e9b)}.cold{background:linear-gradient(135deg,#194e6c,#7963c8)}.after{background:linear-gradient(135deg,#743a35,#a56e41)}.custom{background:linear-gradient(135deg,#435064,#8161a8)}.beat-item-main{min-width:0;flex:1;display:grid;gap:2px}.beat-item-main strong{font-size:11px;font-weight:760;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.beat-item-main span{color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.beat-item-bpm{font-size:10px;color:#aaa3b8;white-space:nowrap;font-weight:680}.beat-option.is-selected .beat-item-bpm{color:#cbb4ff}
.upload-option{cursor:pointer;display:flex;gap:9px;align-items:center;color:#bfb8cd;font-size:11px;font-weight:650;padding:10px 5px 4px}.upload-option:hover{color:#e8deff}.upload-option svg{width:16px;height:16px}.upload-option small{margin-left:auto;font-size:9px;color:#716e7e}.custom-bpm{padding:12px;border-radius:11px;background:#1a1823;display:grid;grid-template-columns:auto 78px;align-items:center;gap:8px}.custom-bpm label{font-size:11px;font-weight:720}.custom-bpm input{min-width:0;width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#0e0d14;text-align:center}.custom-bpm small{grid-column:1/-1;color:#9c94a7;font-size:10px;line-height:1.5}
.choice-grid{display:flex;flex-wrap:wrap;gap:6px}.choice{min-height:35px;border:1px solid rgba(255,255,255,.095);border-radius:9px;background:#1b1a23;padding:7px 11px;color:#ada8bb;font-size:11px;font-weight:650;transition:.15s ease}.choice:hover{color:#fff;background:#282233}.choice.active{color:#e5d8ff;border-color:rgba(180,136,255,.35);background:rgba(155,92,255,.14)}.mode-choices{display:grid;grid-template-columns:1fr 1fr}.mode-choices .choice{display:flex;gap:7px;align-items:center;justify-content:center}.mode-choices svg{width:15px;height:15px}.helper-text{font-size:10.5px;line-height:1.5;color:#8f8a9c;min-height:18px}.volume-control,.calibration-control{display:grid;gap:9px;margin-top:4px}.volume-control label,.calibration-control label{display:flex;justify-content:space-between;font-size:10px;color:#aaa5b7}.volume-control label span,.calibration-control label span{color:#cab5f3;font-variant-numeric:tabular-nums;font-weight:700}input[type=range]{width:100%;accent-color:#9b5cff;cursor:pointer;height:6px;margin:4px 0 2px}
.stage-shell{position:relative;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.095);border-radius:var(--corner);background:#121119;box-shadow:0 24px 84px rgba(0,0,0,.23)}.stage-top{height:65px;padding:0 27px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}.playing-label,.stage-indicators{display:flex;align-items:center;gap:12px;color:#bdb6cd;font-size:10px;font-weight:770;letter-spacing:.105em}.playing-icon{display:flex;gap:3px;align-items:center;height:17px}.playing-icon span{height:7px;width:2px;background:#b38aff;border-radius:2px}.playing-icon span:nth-child(2){height:13px}.playing-icon span:nth-child(3){height:17px}.playing-icon span:nth-child(4){height:10px}.playing-icon span:nth-child(5){height:5px}.is-playing .playing-icon span{animation:equalizer .7s ease-in-out infinite alternate}.is-playing .playing-icon span:nth-child(2){animation-delay:.16s}.is-playing .playing-icon span:nth-child(3){animation-delay:.32s}.is-playing .playing-icon span:nth-child(4){animation-delay:.12s}.stage-indicators{font-size:10px;color:#777282;gap:13px}.stage-dot{background:#46414f}
.stage-visual{touch-action:manipulation;position:relative;height:390px;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 45% 57% at 52% 47%,rgba(117,60,170,.18),transparent 87%),#14121c}.stage-grid{position:absolute;inset:0;opacity:.33;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:37px 37px;mask-image:linear-gradient(90deg,transparent,black 28%,black 72%,transparent)}.stage-grid::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#14121c,transparent 35%)}.ring{position:absolute;border:1px solid rgba(173,127,255,.075);border-radius:50%;pointer-events:none}.ring-1{width:180px;height:180px}.ring-2{width:310px;height:310px}.ring-3{width:462px;height:462px}.orbit-line{position:absolute;left:50%;top:48%;width:1px;height:240px;transform:translate(-50%,-50%);background:linear-gradient(transparent,rgba(165,101,255,.2),transparent)}
.motion-zone{position:absolute;top:34px;left:50%;width:300px;height:124px;transform:translateX(-50%);z-index:2;pointer-events:none}.motion-ball{position:absolute;top:0;left:calc(50% - 18px);width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#faf5ff,#b584ff 70%);box-shadow:0 0 28px rgba(180,115,255,.55),0 0 5px #fff;transform:translateY(var(--ball-y, 0px)) scale(var(--ball-scale, 1));will-change:transform}.ball-core{width:11px;height:11px;background:rgba(255,255,255,.75);border-radius:50%;margin:7px;filter:blur(4px)}.ball-shadow{position:absolute;left:calc(50% - 23px);bottom:9px;width:46px;height:8px;border-radius:50%;filter:blur(7px);background:rgba(164,106,255,.5);opacity:var(--shadow-alpha,.22);transition:opacity .04s}
.stage-core{transition:opacity .14s;z-index:1;display:flex;align-items:center;flex-direction:column;margin-top:64px;gap:13px;text-align:center;padding:0 20px;width:100%}.cue-above{color:#c4a7ff;font-size:10px;font-weight:830;letter-spacing:.18em}.rhyme-word{font-size:clamp(66px,8.5vw,110px);font-weight:830;line-height:.95;letter-spacing:-.07em;text-transform:uppercase;text-shadow:0 0 50px rgba(155,92,255,.1);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rhyme-hints{height:19px;color:#aba5bd;font-size:12px;font-weight:540;letter-spacing:.015em}.beat-pulses{display:flex;align-items:center;gap:8px;margin-top:13px}.pulse{width:24px;height:4px;background:#3f374c;border-radius:3px;transition:background .12s,transform .12s}.pulse.target{background:#7d489f}.pulse.active{background:#c18dff;transform:scaleY(1.45);box-shadow:0 0 13px rgba(164,96,255,.65)}.cue-instruction{font-size:10px;letter-spacing:.17em;font-weight:730;color:#878099;margin-top:0}.judgement-label{position:absolute;z-index:4;top:94px;right:27px;color:#cfb9ff;font-size:14px;letter-spacing:.04em;font-weight:820;opacity:0;transform:translateY(6px);transition:opacity .12s,transform .12s}.judgement-label.show{opacity:1;transform:translateY(0)}.judgement-label.good{color:#b4f4d1}.judgement-label.miss{color:#e5a2ba}.bar-counter{position:absolute;bottom:20px;right:25px;display:flex;align-items:baseline;gap:2px;color:#c7bfd9;font-size:13px;font-weight:700;letter-spacing:.07em;font-variant-numeric:tabular-nums}.bar-counter #current-bar{color:#ece0ff}.bar-counter-slash{color:#675c79}.bar-counter small{font-size:8px;color:#796d88;margin-left:8px}
.stage-track{display:flex;gap:13px;align-items:center;padding:17px 26px 15px}.stage-cover{width:54px;height:54px;border-radius:10px}.stage-cover span{position:relative;font-size:16px;font-weight:850;letter-spacing:-.1em;color:#fff}.stage-cover .cover-plus{color:#e9caff}.stage-track-meta{min-width:0;display:grid;gap:1px}.stage-track-meta .eyebrow{font-size:8px;color:#9584aa;letter-spacing:.13em}.stage-track-meta strong{font-size:13px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-track-meta>span:last-child{font-size:10px;color:#9a93a7}.stage-time{margin-left:auto;display:grid;gap:3px;justify-items:end;white-space:nowrap;font-variant-numeric:tabular-nums}.stage-time>span{font-size:17px;font-weight:700;letter-spacing:.025em}.stage-time small{font-size:8px;color:#80798e;letter-spacing:.08em}.progress-rail{height:3px;background:#292435}.progress-rail span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#9252ef,#d2acff);transition:width .14s linear}.stage-actions{display:flex;align-items:stretch;gap:9px;padding:18px 25px}.button{height:53px;border:0;border-radius:11px;font-size:12px;font-weight:760;letter-spacing:.005em;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .16s,transform .16s,color .16s}.button:active:not(:disabled){transform:scale(.985)}.button svg{width:17px;height:17px}.button-primary{flex:1;color:#171022;background:#ac7cff}.button-primary:hover{background:#c198ff}.button-hit{flex:1;color:#190e22;background:linear-gradient(105deg,#b987ff,#e3bdff);box-shadow:0 4px 25px rgba(159,84,255,.11)}.button-hit:hover{background:linear-gradient(105deg,#cf9aff,#efcaff)}.button-icon{flex:0 0 53px;background:#24202e;color:#ded4e7}.button-icon:hover{background:#322a40}.hit-key{font-size:9px;letter-spacing:.08em;color:#48315c;border:1px solid rgba(55,24,83,.23);padding:5px 6px;border-radius:4px}.stage-hint{display:flex;align-items:flex-start;justify-content:center;gap:8px;color:#777082;font-size:10px;line-height:1.45;padding:0 18px 17px;text-align:center}.stage-hint svg{height:14px;width:14px;margin-top:1px}.stage-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}.stat{padding:19px 12px;display:grid;justify-content:center;gap:6px;text-align:center;min-width:0}.stat+.stat{border-left:1px solid var(--line)}.stat>span{font-size:8px;letter-spacing:.13em;color:#81798c;font-weight:780}.stat strong{font-size:24px;font-weight:720;letter-spacing:-.048em;font-variant-numeric:tabular-nums}.stat strong small{color:#aa7ff5;font-size:14px}
.result-screen{overflow-y:auto;max-height:100%;position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:30px;background:linear-gradient(135deg,#181324 10%,#110e18 90%)}.result-eyebrow{color:#c4a3f6;font-size:11px;font-weight:750;letter-spacing:.17em}.result-screen h2{font-size:clamp(28px,4vw,40px);font-weight:750;letter-spacing:-.06em}.result-screen>p{font-size:12px;color:#aca4be;max-width:370px}.result-score{display:grid;gap:0}.result-score strong{font-size:clamp(64px,7vw,92px);font-weight:820;letter-spacing:-.07em;line-height:1.05;color:#e7d6ff;font-variant-numeric:tabular-nums}.result-score span{font-size:11px;letter-spacing:.18em;color:#a58ebf;font-weight:700}.result-breakdown{line-height:1.65;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;color:#c1b6d0;font-size:11px}.result-breakdown span{padding:5px 7px}.result-actions{display:flex;gap:8px;width:100%;max-width:360px;margin-top:8px}.button-quiet{flex:1;background:#2a2136;color:#e2cfff}.result-screen .result-note{max-width:340px;font-size:10px;color:#80768e;line-height:1.55}
.info-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;gap:20px}.info-strip>div{display:flex;align-items:flex-start;gap:15px;padding:17px 0;border-top:1px solid rgba(255,255,255,.095)}.info-num{font-size:11px;color:#a97af3;font-weight:740}.info-strip strong{font-size:12px;letter-spacing:-.01em;font-weight:710}.info-strip p{color:#8b8698;font-size:11px;line-height:1.65;margin-top:6px;max-width:290px}.privacy-note{margin-top:16px;display:flex;gap:8px;align-items:flex-start;color:#6e697b;font-size:10px;line-height:1.6;max-width:1000px}.privacy-note svg{width:13px;height:13px;margin-top:1px}.toast{position:fixed;bottom:24px;left:50%;z-index:20;transform:translate(-50%,12px);max-width:min(90vw,560px);padding:13px 20px;background:#2b223b;color:#e9dcff;border:1px solid rgba(174,127,255,.35);border-radius:10px;box-shadow:0 10px 45px rgba(0,0,0,.36);font-size:12px;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes equalizer{from{transform:scaleY(.5)}to{transform:scaleY(1.1)}}
@media(max-width:1080px){.container{padding:35px 26px}.game-layout{grid-template-columns:minmax(245px,285px) minmax(0,1fr);gap:15px}.settings{padding:20px 16px}.stage-top{padding:0 20px}.stage-visual{height:360px}.motion-zone{top:26px}.stage-core{margin-top:55px}.rhyme-word{font-size:clamp(60px,8vw,90px)}}
@media(max-width:800px){.topbar{height:67px;padding:0 23px}.topbar-center{display:none}.container{max-width:680px;margin:auto;padding:29px 20px 45px}.intro{margin-bottom:24px}.intro h1{font-size:clamp(38px,6.5vw,55px)}.intro p{font-size:12.5px;line-height:1.55}.game-layout{grid-template-columns:1fr;gap:17px}.stage-shell{order:0}.settings{order:1}.settings{display:grid;grid-template-columns:1fr 1fr;column-gap:25px}.settings-head{grid-column:1/-1}.settings>.section-divider{grid-column:1/-1;margin:12px 0 3px}.settings>.setting-section{grid-column:1/-1}.beat-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.beat-option{display:grid;grid-template-columns:auto 1fr;gap:6px;padding:9px}.beat-option .beat-item-main{grid-column:1/-1}.beat-option .beat-item-bpm{grid-column:2;grid-row:1}.beat-thumb{height:32px;width:32px}.info-strip{gap:14px}.info-strip>div{gap:8px}.info-strip strong{font-size:11px}.info-strip p{font-size:10px}}
@media(max-width:520px){.topbar{padding:0 17px;height:62px}.brand{font-size:22px}.brand-symbol{width:35px;height:35px}.topbar-right{font-size:10px}.topbar-separator{display:none}.container{padding:29px 14px 37px}.intro h1{font-size:42px;margin:10px 0}.intro p{font-size:12px;max-width:350px}.intro-eyebrow{font-size:9px}.intro-issue{display:none}.game-layout{gap:15px}.stage-shell{border-radius:15px}.stage-top{height:53px;padding:0 15px}.playing-label{font-size:9px;gap:7px}.stage-indicators{font-size:8.5px;gap:7px}.stage-visual{height:347px}.ring-1{width:180px;height:180px}.ring-2{width:280px;height:280px}.ring-3{width:385px;height:385px}.motion-zone{top:36px;transform:translateX(-50%) scale(.78)}.stage-core{margin-top:54px;gap:10px}.cue-above{font-size:9px}.rhyme-word{font-size:clamp(58px,14vw,76px)}.rhyme-hints{font-size:10.5px}.beat-pulses{margin-top:10px}.cue-instruction{font-size:8.5px;letter-spacing:.13em}.bar-counter{bottom:15px;right:15px;font-size:11px}.stage-track{padding:14px 15px 13px;gap:10px}.stage-cover{width:46px;height:46px}.stage-track-meta strong{font-size:12px}.stage-time>span{font-size:15px}.stage-actions{padding:13px 14px;gap:7px}.button{height:48px;font-size:11px}.button-icon{flex-basis:48px}.stage-hint{font-size:9px;padding:0 13px 13px}.stat{padding:13px 5px}.stat>span{font-size:7px;letter-spacing:.09em}.stat strong{font-size:19px}.settings{padding:19px 17px}.settings-head h2{font-size:19px}.info-strip{grid-template-columns:1fr;gap:4px;margin-top:22px}.info-strip>div{padding:10px 0;gap:12px}.info-strip p{margin-top:3px}.privacy-note{font-size:9.5px}.hit-key{display:none}.result-screen{padding:20px}.result-screen .result-breakdown{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Oyun etkileşimleri, hazırlık sayımı ve skor geçmişi */
.stage-visual:has(.count-in:not([hidden])) .stage-core { opacity:.18; }
.count-in {
  position:absolute; inset:0; z-index:7; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; text-align:center; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(30,20,49,.87),rgba(16,13,25,.5) 63%,transparent);
}
.count-in>span { font-size:10px; font-weight:850; letter-spacing:.2em; color:#be99ed; }
.count-in strong { font-size:clamp(125px,18vw,184px); line-height:.95; font-weight:850; letter-spacing:-.085em; color:#dfc7ff; text-shadow:0 0 40px rgba(153,94,255,.45); font-variant-numeric:tabular-nums; }
.count-in small { color:#b2a7c3; font-size:10px; font-weight:700; letter-spacing:.13em; }
.judgement-label.near { color:#e5c08c; }
.personal-best { display:flex; align-items:center; gap:10px; padding:13px 26px 2px; min-width:0; color:#8c839d; font-size:9px; letter-spacing:.12em; font-weight:750; }
.personal-best .best-symbol { font-size:14px; color:#b387f8; }
.personal-best strong { margin-left:auto; color:#e6d0ff; font-size:17px; font-weight:830; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.personal-best small { display:none; letter-spacing:0; font-weight:500; color:#9c91ad; }
.style-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
.style-choices .choice { min-height:42px; }
.coach-controls { margin-top:17px; }
.coach-checkbox { display:flex; align-items:center; gap:12px; cursor:pointer; position:relative; color:#e1d8ec; font-size:12px; font-weight:670; }
.coach-checkbox input { position:absolute; width:26px; height:26px; opacity:0; margin:0; }
.coach-check { pointer-events:none; width:36px; height:21px; border-radius:13px; background:#393242; flex:none; position:relative; transition:background .15s ease; }
.coach-check:after { content:""; position:absolute; left:3px; top:3px; width:15px; height:15px; border-radius:50%; background:#c7bdd2; transition:transform .15s ease,background .15s ease; }
.coach-checkbox input:checked + .coach-check { background:#9160dd; }
.coach-checkbox input:checked + .coach-check:after { transform:translateX(15px); background:#fff; }
.coach-checkbox input:focus-visible + .coach-check { outline:2px solid var(--focus-ring); outline-offset:3px; }
.coach-checkbox>span:last-child { display:flex; flex-direction:column; gap:1px; }
.coach-checkbox small { color:#857c96; font-size:10px; font-weight:500; }
.volume-control--compact { margin-top:12px; }
.calibration-control small { display:block; margin-top:5px; color:#858094; font-size:10px; line-height:1.5; }
.custom-bpm input[type=range] { width:100%; margin-top:5px; }
.custom-bpm label[for=audio-offset] { margin-top:13px; display:flex; justify-content:space-between; gap:9px; }
.custom-bpm label[for=audio-offset] span { color:#b68cff; font-size:10px; }
.challenge-banner { display:flex; align-items:center; gap:17px; margin:0 0 17px; padding:14px 18px; background:linear-gradient(110deg,rgba(119,63,199,.19),rgba(85,41,132,.07)); border:1px solid rgba(186,133,255,.22); border-radius:13px; }
.challenge-symbol { width:39px; height:39px; flex:0 0 39px; border-radius:11px; display:grid; place-items:center; background:rgba(169,119,255,.14); font-size:24px; color:#c9a4ff; }
.challenge-banner div { flex:1; min-width:0; }
.challenge-banner strong { font-size:10px; color:#c5a5ff; letter-spacing:.12em; }
.challenge-banner p { margin-top:3px; font-size:12px; line-height:1.55; color:#c5b8d6; }
.challenge-banner button { border:0; background:transparent; color:#ab96c6; font-size:11px; padding:9px; border-radius:7px; }
.challenge-banner button:hover { color:#fff; background:rgba(255,255,255,.06); }
.result-record { font-size:11px; font-weight:800; color:#ddbeff; letter-spacing:.1em; }
.result-extra { color:#a9a0bb; font-size:11px; line-height:1.6; }
.button-quiet:disabled { cursor:not-allowed; opacity:.36; }
.session-history { margin-top:34px; }
.session-history-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.session-history-heading h2 { font-size:23px; font-weight:760; letter-spacing:-.035em; margin-top:7px; }
.history-local { display:flex; align-items:center; gap:7px; color:#847b92; font-size:10px; }
.history-local svg { width:15px; height:15px; }
.history-empty { color:#7f778c; font-size:12px; padding:24px 0; }
.history-list { display:flex; flex-direction:column; }
.history-row { display:flex; align-items:center; min-height:66px; padding:10px 2px; gap:12px; border-bottom:1px solid rgba(255,255,255,.065); }
.history-rank { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#22192f; color:#b58aff; flex:0 0 34px; }
.history-main { flex:1; min-width:0; display:grid; gap:4px; }
.history-main strong { font-size:12px; font-weight:730; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-main span { font-size:10px; color:#8e879a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-score { display:grid; justify-items:end; gap:3px; white-space:nowrap; }
.history-score strong { font-size:17px; font-weight:790; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.history-score small { font-size:10px; color:#807889; }
.stage-shell.is-playing .personal-best { opacity:.9; }
@media(max-width:800px) {
  .session-history { margin-top:26px; }
  .personal-best { padding:12px 20px 1px; }
}
@media(max-width:520px) {
  .personal-best { padding:11px 15px 0; font-size:8px; gap:7px; letter-spacing:.085em; }
  .personal-best strong { font-size:15px; }
  .count-in strong { font-size:126px; }
  .challenge-banner { padding:12px; gap:10px; align-items:flex-start; }
  .challenge-symbol { width:31px; height:31px; flex-basis:31px; font-size:20px; }
  .challenge-banner p { font-size:11px; }
  .session-history-heading { align-items:flex-end; }
  .session-history-heading h2 { font-size:19px; }
  .history-local { font-size:9px; }
  .result-screen { gap:9px; padding:18px; }
  .result-screen h2 { font-size:28px; }
  .result-screen .result-score strong { font-size:60px; }
  .result-screen .result-breakdown { font-size:9px; gap:4px; }
  .result-extra { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .stage-core,.coach-check,.coach-check:after { transition:none; }
}

/* Kayit sisteminin mevcut BeatPlus kontrol ve sonuc düzenine entegrasyonu */
.recording-controls { margin-top:17px; padding-top:15px; border-top:1px solid rgba(255,255,255,.065); }
.recording-help { color:#938b9d; font-size:10px; line-height:1.65; margin:9px 0 0; }
.record-status { display:inline-flex; align-items:center; gap:6px; color:#f8a8a8; font-size:9px; letter-spacing:.07em; font-weight:800; margin-left:13px; white-space:nowrap; }
.record-status i { height:7px; width:7px; border-radius:50%; background:#ff5c70; box-shadow:0 0 0 4px rgba(255,92,112,.09); }
.result-screen:has(.recording-result:not([hidden])) { justify-content:flex-start; }
.recording-result { width:100%; max-width:480px; display:grid; gap:10px; margin:10px 0 1px; text-align:left; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
.recording-result__head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.recording-result__head strong { color:#eae1f4; font-size:15px; letter-spacing:-.02em; }
.recording-result__head span { color:#bd9cf5; font-size:10px; }
.recording-result p { color:#a89fb5; font-size:11px; line-height:1.55; }
.recording-result audio { width:100%; min-height:40px; border-radius:7px; accent-color:#a980ed; }
.recording-result__actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.recording-result__actions .button { min-height:38px; font-size:11px; padding:9px 13px; }
.recording-result>small { font-size:10px; color:#867d94; line-height:1.5; }
[hidden] { display:none !important; }
@media(max-width:520px) {
 .recording-result__head { align-items:flex-start; }
 .recording-result__actions .button { flex:1 1 125px; }
 .recording-result { gap:9px; }
 .record-status { margin-left:8px; font-size:8px; }
}


/* BeatPlus Flow Arena: tekil oynanis sahnesi ve kafiye rotasi */
.brand-symbol { background:#08070d; border:1px solid rgba(255,255,255,.10); padding:5px; }
.brand-symbol img { width:100%; height:100%; object-fit:contain; }
.arena-hud { position:absolute;top:16px;left:21px;display:flex;gap:21px;z-index:4;pointer-events:none; }
.arena-hud>div {display:grid;gap:3px;}
.arena-hud span {font-size:9px;font-weight:750;letter-spacing:.14em;color:#9787b2;}
.arena-hud strong {font-size:21px;font-weight:850;color:#efe5ff;letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
.arena-hud>div:nth-child(2) strong {color:#91dff3;}
.rhyme-route { position:absolute;bottom:12px;left:16px;right:16px;z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;pointer-events:none; }
.rhyme-route__step {display:grid;min-width:0;gap:4px;padding:9px 7px;min-height:46px;border:1px solid rgba(212,194,248,.09);border-radius:9px;background:rgba(15,13,25,.8);opacity:.52;transform:scale(.97);transition:opacity .2s,transform .2s,border-color .2s;}
.rhyme-route__step span {font-size:8px;font-weight:800;color:#857c99;letter-spacing:.12em;}
.rhyme-route__step strong {font-size:clamp(9px,1.1vw,13px);font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c0b5d3;}
.rhyme-route__step--a.is-current {border-color:rgba(183,121,255,.78);box-shadow:inset 0 0 0 1px rgba(183,121,255,.17);}
.rhyme-route__step--b.is-current {border-color:rgba(106,207,227,.78);box-shadow:inset 0 0 0 1px rgba(106,207,227,.17);}
.rhyme-route__step--a.is-current strong {color:#d1afff;}
.rhyme-route__step--b.is-current strong {color:#8ce1f5;}
.rhyme-route__step.is-current {opacity:1;transform:scale(1);}
.rhyme-route__step.is-past {opacity:.38;}
.stage-visual .bar-counter {bottom:auto;top:18px;right:20px;z-index:5;}
.stage-visual .stage-core {margin-top:27px;padding-bottom:42px;}
.stage-visual .motion-zone {z-index:2;}
.stage-visual .judgement-label {z-index:8;}
.stage-visual::after {content:"";position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;background:radial-gradient(circle at 50% 52%,rgba(180,116,255,.24),transparent 46%);}
.stage-visual.is-perfect-hit::after {animation:arena-impact .5s ease-out;}
.stage-visual.is-good-hit::after {animation:arena-impact .35s ease-out;}
@keyframes arena-impact {0%{opacity:.9}100%{opacity:0}}
.game-running .intro,.game-running .settings,.game-running .session-history,.game-running .info-strip,.game-running .privacy-note {display:none;}
.game-running .game-layout {grid-template-columns:minmax(0,1fr);}
.game-running .stage-visual {height:clamp(480px,65vh,720px);}
.game-running .stage-shell {max-width:1280px;margin:0 auto;}
.game-running .container {max-width:1360px;}
.game-running .stage-core .rhyme-word {font-size:clamp(80px,11vw,142px);}
.game-running .rhyme-route {bottom:19px;left:24px;right:24px;gap:9px;}
.game-running .rhyme-route__step {padding:13px 11px;min-height:67px;}
.game-running .rhyme-route__step strong {font-size:clamp(12px,1.6vw,19px);}
@media(max-width:900px) {
 .game-running .container {padding-top:12px;}
 .game-running .stage-visual {height:clamp(380px,63vh,640px);}
 .arena-hud {top:12px;left:13px;gap:12px;}
 .arena-hud strong {font-size:17px;}
 .stage-visual .bar-counter {right:13px;top:13px;}
 .rhyme-route {left:9px;right:9px;bottom:8px;gap:3px;}
 .rhyme-route__step {min-height:42px;padding:7px 4px;gap:3px;border-radius:6px;}
 .rhyme-route__step span {font-size:7px;}
 .rhyme-route__step strong {font-size:9px;}
 .game-running .rhyme-route {bottom:10px;left:10px;right:10px;gap:4px;}
 .game-running .rhyme-route__step {min-height:47px;padding:8px 5px;}
 .game-running .rhyme-route__step strong {font-size:10px;}
 .game-running .stage-core .rhyme-word {font-size:clamp(62px,14vw,104px);}
}
@media(prefers-reduced-motion:reduce){.rhyme-route__step{transition:none}.stage-visual.is-perfect-hit::after,.stage-visual.is-good-hit::after{animation:none}}

/* Font Awesome yalnız gerçekte yüklenirse SVG fallback'in yerini alır. */
.game-icon {display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;}
.game-icon .fa-solid {display:none;}
.game-icon svg {display:block;width:20px;height:20px;}
.has-beatplus-icons .game-icon .fa-solid {display:inline-block;font-family:"Font Awesome 7 Pro","Font Awesome 7 Free";font-size:17px;line-height:1;}
.has-beatplus-icons .game-icon svg {display:none;}