.repertoire-creation { margin:8px 10px 16px; padding:12px; border:1px solid rgba(255,211,79,.5); border-radius:16px; background:linear-gradient(145deg,#2d2134,#101c36); box-shadow:inset 0 1px rgba(255,255,255,.08),0 7px 18px rgba(0,0,0,.3); }
.repertoire-creation > header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.repertoire-creation h2,.repertoire-creation small { display:block; margin:0; }.repertoire-creation header small { color:#efb53f; font-size:.5rem; font-weight:900; letter-spacing:.11em; }.repertoire-creation h2 { color:#fff5ce; font-size:.9rem; line-height:1; }
.repertoire-creation header button { min-width:76px; min-height:38px; border:2px solid #fff0a6; border-radius:11px; color:#3d2708; background:linear-gradient(#ffdc62,#eda11d); box-shadow:inset 0 2px rgba(255,255,255,.35),0 3px 0 #80510a; font:900 .72rem/1 "Baloo 2",sans-serif; }
.repertoire-calendar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:11px; }
.repertoire-calendar article,.repertoire-calendar__item { position:relative; display:grid; min-width:0; min-height:72px; padding:7px 4px; place-content:center; border:1px solid #344a69; border-radius:10px; color:inherit; background:#0d203d; font-family:inherit; text-align:center; }
.repertoire-calendar__item.is-current { isolation:isolate; overflow:visible; border:2px solid #fff0a6; color:#4a2b05; background:linear-gradient(#ffdf68,#f1a51c); box-shadow:inset 0 3px rgba(255,255,255,.42),inset 0 -5px rgba(151,82,0,.2),0 4px 0 #80510a,0 0 15px rgba(255,190,50,.38); cursor:pointer; animation:repertoireCurrentPulse 1.35s ease-in-out infinite; }.repertoire-calendar__item.is-current::after { content:"PULSA AQUÍ"; position:absolute; z-index:3; top:-10px; left:50%; min-width:88px; padding:4px 8px 3px; border:2px solid #fff3a0; border-radius:999px; color:#542600; background:linear-gradient(#ffe766,#ffae22); box-shadow:0 3px 0 #a94b08,0 5px 10px rgba(0,0,0,.38); font:900 clamp(.45rem,1.8vw,.58rem)/1 "Baloo 2",sans-serif; letter-spacing:.06em; text-align:center; text-shadow:0 1px rgba(255,255,255,.55); transform:translateX(-50%); pointer-events:none; }.repertoire-calendar__item:not(:disabled) { cursor:pointer; }.repertoire-calendar__item:disabled { opacity:.72; cursor:default; }.repertoire-calendar small { color:#8ca3c0; font-size:.39rem; font-weight:900; }.repertoire-calendar strong { margin:3px 0; overflow:hidden; color:#fff; font-size:clamp(1rem,4vw,1.28rem); line-height:1; text-overflow:ellipsis; }.repertoire-calendar span { display:none; color:#ffd34f; font-size:.58rem; font-weight:900; }.repertoire-calendar span b,.repertoire-calendar span em { display:block; font-style:normal; line-height:1.05; }.repertoire-calendar__item > i { color:#ffd34f; font-size:.58rem; font-style:normal; font-weight:900; }.repertoire-calendar__item.is-current small,.repertoire-calendar__item.is-current > strong,.repertoire-calendar__item.is-current > i { display:none; }.repertoire-calendar__item.is-current span { display:block; color:#4a2b05; text-shadow:0 1px rgba(255,255,255,.35); }.repertoire-calendar__item.is-current span b { font-size:.56rem; letter-spacing:.08em; }.repertoire-calendar__item.is-current span em { margin-top:3px; font-size:clamp(1rem,4vw,1.28rem); font-weight:900; }.repertoire-plan > p { margin:9px 2px 0; color:#aab9ce; font-size:.58rem; line-height:1.25; text-align:center; }
.repertoire-plan[hidden] { display:none; }
.repertoire-calendar__item.is-current span .repertoire-calendar__style { display:block; width:100%; margin-top:5px; padding-inline:3px; box-sizing:border-box; overflow:visible; color:#6a3905; font-size:clamp(.42rem,1.65vw,.52rem); font-weight:900; line-height:1.05; letter-spacing:.025em; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
.repertoire-calendar__item.is-repertoire-prompt::after { content:"PULSA AQUÍ"; }
@keyframes repertoireCurrentPulse { 0%,100% { filter:none; transform:translateY(0) scale(1); } 50% { filter:brightness(1.08); transform:translateY(-3px) scale(1.025); } }
@media (prefers-reduced-motion:reduce) { .repertoire-calendar__item.is-current { animation:none; } }
.repertoire-style-picker{position:fixed;z-index:1260;inset:0;display:grid;padding:16px;place-items:center;background:rgba(2,7,20,.82);backdrop-filter:blur(4px)}
.repertoire-style-picker>section{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(100%,470px);height:min(86dvh,590px);overflow:hidden;border:3px solid #b35cef;border-radius:22px;color:#fff;background:linear-gradient(180deg,#151b38,#0a1129);box-shadow:inset 0 2px rgba(255,255,255,.15),0 8px 0 #32134e,0 24px 60px rgba(0,0,0,.72)}
.repertoire-style-picker>section>header{position:relative;padding:17px 54px 13px 18px;border-bottom:1px solid rgba(197,106,255,.5);background:linear-gradient(135deg,#6c278f,#3d266f 62%,#152454)}
.repertoire-style-picker header small{display:block;color:#e0a0ff;font-size:.52rem;font-weight:900;letter-spacing:.11em}.repertoire-style-picker h2{margin:2px 0 0;font-size:1.12rem;line-height:1}.repertoire-style-picker header p{margin:5px 0 0;color:#8fe9ff;font-size:.52rem;font-weight:900;letter-spacing:.06em}.repertoire-style-picker header .modal-dismiss{position:absolute;top:50%;right:13px;transform:translateY(-50%)}
.repertoire-style-picker__selector{display:grid;gap:9px;padding:14px 14px 16px;background:#111b36}.repertoire-style-picker__selector>label{color:#78dffc;font-size:.58rem;font-weight:900;letter-spacing:.08em}.repertoire-style-picker__selector>span{position:relative;display:block}.repertoire-style-picker__selector>span::after{content:"";position:absolute;top:50%;right:17px;border:8px solid transparent;border-top-color:#72def9;transform:translateY(-20%);pointer-events:none}.repertoire-style-picker__selector select{width:100%;height:55px;padding:8px 50px 8px 16px;border:3px solid #72def9;border-radius:14px;color:#fff;background:#162541;box-shadow:inset 0 2px 5px rgba(0,0,0,.32),0 4px 0 #080e21;font:900 1rem/1 "Baloo 2",sans-serif;appearance:none;outline:none}
.repertoire-style-picker__cost{--style-tier:#72def9;--style-tier-dark:#17617d;display:grid;grid-template-columns:78px 1fr auto;min-height:52px;padding:7px 9px;align-items:center;gap:9px;border:2px solid var(--style-tier);border-radius:14px;background:linear-gradient(160deg,rgba(34,56,84,.98),#0e1730 70%);box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.25)}.repertoire-style-picker__cost span{display:contents}.repertoire-style-picker__cost b{display:grid;min-height:27px;padding:4px 7px;place-items:center;border:1px solid var(--style-tier);border-radius:8px;color:#101725;background:var(--style-tier);box-shadow:inset 0 1px rgba(255,255,255,.5),0 2px 0 var(--style-tier-dark);font-size:.52rem}.repertoire-style-picker__cost small{color:var(--style-tier);font-size:.5rem;font-weight:900}.repertoire-style-picker__cost>strong{display:flex;align-items:center;gap:5px;color:#fff;font-size:.78rem}.repertoire-style-picker__cost>strong img{width:21px;height:21px;object-fit:contain}.repertoire-style-picker__cost--bronze{--style-tier:#e58a49;--style-tier-dark:#71351f}.repertoire-style-picker__cost--plata{--style-tier:#dce9f7;--style-tier-dark:#53677e}.repertoire-style-picker__cost--oro{--style-tier:#ffe265;--style-tier-dark:#9a5d09}.repertoire-style-picker__cost--leyenda{--style-tier:#c896ff;--style-tier-dark:#6730a1}
.repertoire-style-picker__authors{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:0;margin:0 14px 12px;padding:8px;border:2px solid #614278;border-radius:14px;background:linear-gradient(145deg,#282044,#17182f)}.repertoire-style-picker__authors>.repertoire-style-picker__cost{margin-bottom:9px}.repertoire-style-picker__authors>small{padding:0 5px;color:#d991fa;font-size:.52rem;font-weight:900;letter-spacing:.08em}
.repertoire-style-picker__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:42px;align-content:start;gap:7px;min-height:0;padding:8px 12px 12px;overflow:auto}.repertoire-style-picker__options>p{grid-column:1/-1;align-self:center;margin:auto;padding:20px;color:#91a3bd;font-size:.62rem;text-align:center}
.repertoire-style-picker__options>.repertoire-style-picker__own-message{width:100%;padding:18px 12px;border:1px dashed var(--style-tier,#72def9);border-radius:11px;color:#dfeeff;background:rgba(10,25,52,.58);font-size:.62rem;font-weight:900;line-height:1.35;letter-spacing:.035em}
.repertoire-style-option{min-width:0;min-height:42px;padding:6px 8px;overflow:hidden;border:2px solid #344666;border-radius:10px;color:#aab5ca;background:linear-gradient(#243250,#18243f);box-shadow:0 2px 0 #080e21;font:900 .62rem/1.05 "Baloo 2",sans-serif;text-align:center;text-overflow:ellipsis;white-space:nowrap}.repertoire-style-option--silver{border-color:#92a9bf}.repertoire-style-option--gold{border-color:#dba919}.repertoire-style-option--legend{border-color:#9f62dc}.repertoire-style-option.is-selected{border-color:#8ce8ff;color:#06263e;background:linear-gradient(#73e8ff,#38b9df);box-shadow:0 3px 0 #147c9e,0 0 12px rgba(82,212,246,.3)}
.repertoire-style-picker footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:11px 13px max(13px,env(safe-area-inset-bottom));border-top:1px solid rgba(197,106,255,.55);background:#0b132c}.repertoire-style-picker footer span{overflow:hidden;color:#dfa2ff;font-size:.56rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.repertoire-style-picker footer button{min-height:43px;padding:7px 18px;border:2px solid #efb3ff;border-radius:11px;color:#fff;background:linear-gradient(#ca62f0,#8c36bc);box-shadow:inset 0 2px rgba(255,255,255,.25),0 3px 0 #5d207f;font:900 .7rem/1 "Baloo 2",sans-serif}.repertoire-style-picker footer button:disabled{opacity:.42;filter:grayscale(.65);box-shadow:none}
.repertoire-score-block>header>div{min-width:0}.repertoire-score-block>header>div>small{display:block;overflow:hidden;margin-top:2px;color:#8ddff5;font-size:.4rem;font-weight:900;line-height:1;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:380px){.repertoire-style-picker{padding:9px}.repertoire-style-picker__selector{padding-inline:9px}.repertoire-style-picker__options{gap:6px;padding-inline:8px}.repertoire-style-option{padding-inline:5px;font-size:.56rem}}
.repertoire-calendar__item.is-completed { border-color:#66e59d; background:linear-gradient(145deg,#185b48,#173446 72%); box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 12px rgba(65,218,139,.35); }
.repertoire-calendar__item.is-completed span { display:block; }
.repertoire-calendar__item.is-completed > i { display:none; }
.repertoire-calendar__item.is-completed small { color:#8cf0b7; }.repertoire-calendar__item.is-completed span { color:#76efa9; }
.repertoire-calendar__item.is-completed span { display:grid; justify-items:center; gap:3px; }
.repertoire-calendar__item.is-completed span .repertoire-calendar__style--completed { display:block; width:calc(100% - 8px); max-width:none; padding:3px 7px; overflow:visible; border:1px solid rgba(150,248,190,.52); border-radius:9px; color:#e8fff1; background:rgba(5,45,31,.58); font-size:clamp(.38rem,1.45vw,.46rem); font-weight:900; line-height:1.05; letter-spacing:.025em; text-overflow:clip; text-shadow:0 1px 2px #031c12; white-space:normal; overflow-wrap:anywhere; }
.repertoire-calendar__item.is-completed span > em { color:#76efa9; font-size:.58rem; font-weight:900; }
.repertoire-scores { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,211,79,.25); }.repertoire-scores > header { margin-bottom:7px; }.repertoire-scores > header small { color:#efb53f; font-size:.47rem; font-weight:900; letter-spacing:.1em; }.repertoire-scores > header h3 { margin:0; color:#fff5ce; font-size:.82rem; line-height:1; }.repertoire-scores > div { display:grid; gap:6px; }.repertoire-score-block { overflow:hidden; border:1px solid #655238; border-radius:11px; background:#10243f; }.repertoire-score-block > header { display:flex; min-height:25px; padding:5px 8px; align-items:center; justify-content:space-between; gap:8px; background:#29283d; }.repertoire-score-block h4 { margin:0; color:#ffd45c; font-size:.62rem; letter-spacing:.07em; }.repertoire-score-block > header span { color:#aebcd0; font-size:.47rem; font-weight:800; }.repertoire-score-block > header b { color:#63ddff; font-size:.58rem; }.repertoire-score-block > header span.is-missing b { color:#ff626f; }.repertoire-score-block > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; padding:1px; background:#374052; }.repertoire-score-piece { display:grid; min-height:38px; padding:3px 5px; align-content:center; color:#fff; background:#10243f; }.repertoire-score-piece.is-missing { opacity:.48; }.repertoire-score-piece > small { overflow:hidden; color:#63ddff; font-size:.43rem; font-weight:800; line-height:8px; text-overflow:ellipsis; white-space:nowrap; }.repertoire-score-piece > span { display:grid; grid-template-columns:minmax(59px,.9fr) minmax(24px,1fr) 29px; align-items:center; column-gap:5px; min-height:14px; }.repertoire-score-piece strong { font-size:.52rem; line-height:1; white-space:nowrap; }.repertoire-score-piece i { height:8px; overflow:hidden; border-radius:8px; background:#030a15; }.repertoire-score-piece i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ef9e26,#ffe16d); }.repertoire-score-piece em { color:#ffd45c; font-size:.57rem; font-style:normal; font-weight:900; text-align:right; }.repertoire-score-piece.is-missing em { color:#ff626f; }.repertoire-scores > div > .repertoire-score-piece { grid-template-columns:1fr; border:1px solid #655238; border-radius:10px; }.repertoire-scores > div > .repertoire-score-piece > span { grid-template-columns:minmax(90px,1fr) minmax(70px,1.5fr) 34px; }
.repertoire-plan[hidden] + .repertoire-scores{margin-top:0;padding-top:0;border-top:0}

.repertoire-summary { width:100%; height:100dvh; padding:max(7px,env(safe-area-inset-top)) 7px max(7px,env(safe-area-inset-bottom)); color:#fff; background:radial-gradient(circle at 50% 0,rgba(255,198,54,.18),transparent 35%),#050b20; }
.repertoire-summary__panel { width:min(100%,680px); height:100%; margin:auto; overflow-y:auto; border:2px solid #e9b641; border-radius:22px; background:linear-gradient(#101e3b,#071329); box-shadow:0 0 0 3px #10132c,0 18px 55px #000; }
.repertoire-summary__header { position:sticky; z-index:2; top:0; display:grid; grid-template-columns:46px 1fr; min-height:78px; padding:10px 12px; align-items:center; gap:9px; border-bottom:1px solid rgba(255,211,79,.4); background:linear-gradient(135deg,#714018,#3c2856 64%,#172452); }
.repertoire-summary__header > button { width:43px; height:43px; padding:0 0 4px; border:2px solid #ffe899; border-radius:14px; color:#fff; background:linear-gradient(#ffc94d,#d77a12); box-shadow:inset 0 2px rgba(255,255,255,.3),0 4px 0 #683a08; font:900 2rem/1 "Baloo 2",sans-serif; outline:none; }.repertoire-summary__header small,.repertoire-summary__header h1 { display:block; margin:0; }.repertoire-summary__header small { color:#ffd568; font-size:.5rem; font-weight:900; letter-spacing:.12em; }.repertoire-summary__header h1 { font-size:1.55rem; line-height:.95; }
.repertoire-summary__content { padding:14px 11px 22px; }.repertoire-summary__music { display:grid; grid-template-columns:48px 1fr auto; min-height:76px; padding:10px 13px; align-items:center; gap:10px; border:2px solid #ffe277; border-radius:16px; background:linear-gradient(145deg,#6e4212,#30233e 70%); box-shadow:inset 0 2px rgba(255,255,255,.12),0 5px 0 #4d2c08,0 10px 20px rgba(0,0,0,.3); }.repertoire-summary__music > span { color:#ffe068; font-size:2.1rem; text-align:center; text-shadow:0 0 12px rgba(255,210,70,.65); }.repertoire-summary__music small,.repertoire-summary__music strong { display:block; }.repertoire-summary__music small { color:#ffc84c; font-size:.46rem; font-weight:900; letter-spacing:.1em; }.repertoire-summary__music strong { color:#fff; font-size:.78rem; }.repertoire-summary__music > b { min-width:52px; color:#ffe169; font-size:2rem; line-height:1; text-align:center; text-shadow:0 3px 0 #663c06; }
.repertoire-summary__section-title { display:flex; margin:22px 3px 9px; align-items:end; justify-content:space-between; }.repertoire-summary__section-title small,.repertoire-summary__section-title h2 { display:block; margin:0; }.repertoire-summary__section-title small { color:#68ddf8; font-size:.45rem; font-weight:900; letter-spacing:.1em; }.repertoire-summary__section-title h2 { font-size:1rem; line-height:1; }.repertoire-summary__section-title > b { color:#ffcd50; font-size:.55rem; }
.repertoire-summary__list { display:grid; margin:0; padding:0; gap:6px; list-style:none; }.repertoire-summary__list li { display:grid; grid-template-columns:1fr 48px; min-height:52px; padding:7px 9px 7px 13px; align-items:center; border:1px solid #304a6d; border-radius:11px; background:linear-gradient(90deg,#132b4d,#0c1c36); }.repertoire-summary__list li span small,.repertoire-summary__list li span strong { display:block; }.repertoire-summary__list li span small { color:#7eddf5; font-size:.4rem; font-weight:900; letter-spacing:.1em; }.repertoire-summary__list li span strong { color:#fff; font-size:.72rem; }.repertoire-summary__list li > b { display:grid; width:42px; height:36px; place-items:center; border:1px solid #f3c64f; border-radius:9px; color:#ffe16b; background:#372a24; font-size:1rem; }.repertoire-summary__content > p { margin:13px 5px 0; color:#8fa2bd; font-size:.58rem; line-height:1.25; text-align:center; }

.note-game { --note-gold:#ffd34f; --note-blue:#40d9ff; width:100%; height:100dvh; padding:max(7px,env(safe-area-inset-top)) 7px max(7px,env(safe-area-inset-bottom)); color:#fff; background:radial-gradient(circle at 50% 0,rgba(255,192,54,.18),transparent 34%),#050b20; }
.note-game__panel { display:grid; grid-template-rows:auto 5px auto minmax(0,1fr) auto; width:min(100%,680px); height:100%; margin:auto; overflow:hidden; border:2px solid #eeb63d; border-radius:22px; background:#08162e; box-shadow:0 0 0 3px #11132b,0 18px 55px #000; }
.note-game__header { display:grid; grid-template-columns:1fr 52px; min-height:76px; padding:9px 11px; align-items:center; gap:9px; background:linear-gradient(135deg,#714018,#3c2856 64%,#172452); }
.note-game__header > button { width:43px; height:43px; padding:0 0 4px; border:2px solid #ffe899; border-radius:14px; color:#fff; background:linear-gradient(#ffc94d,#d77a12); box-shadow:inset 0 2px rgba(255,255,255,.3),0 4px 0 #683a08; font:900 2rem/1 "Baloo 2",sans-serif; outline:none; }.note-game__header small,.note-game__header h1 { display:block; margin:0; }.note-game__header small { color:#ffd568; font-size:.5rem; font-weight:900; letter-spacing:.12em; }.note-game__header h1 { font-size:clamp(1.15rem,5vw,1.6rem); line-height:.95; }.note-game__time { display:grid; height:49px; place-content:center; border:1px solid rgba(255,222,112,.6); border-radius:13px; background:rgba(25,18,42,.7); text-align:center; }.note-game__time b { color:#ffe06a; font-size:1.25rem; line-height:.8; }.note-game__time small { margin-top:5px; color:#fff; font-size:.38rem; font-weight:900; letter-spacing:.1em; }
.note-game__meter { background:#1a2943; }.note-game__meter i { display:block; width:0; height:100%; background:linear-gradient(90deg,#1cb4e1,#ffe05d); box-shadow:0 0 9px #42dfff; transition:width .1s linear; }
.note-game__scoreboard { display:grid; grid-template-columns:auto auto 1fr; min-height:60px; padding:8px 12px; align-items:center; gap:18px; border-bottom:1px solid #284260; background:linear-gradient(#102644,#0b1c35); }.note-game__scoreboard > span:not(.note-game__instruction) { display:grid; }.note-game__scoreboard small { color:#84def6; font-size:.43rem; font-weight:900; letter-spacing:.1em; }.note-game__scoreboard b { color:#fff4ca; font-size:1.28rem; line-height:1; }.note-game__instruction { grid-column:3; display:grid; justify-self:end; gap:2px; color:#94a9c5; font-size:clamp(.42rem,1.8vw,.5rem); font-weight:800; line-height:1.15; text-align:left; }.note-game__instruction > span { display:block; white-space:nowrap; }.note-game__instruction b { color:#ffe169; font-size:inherit; }
.note-game__scoreboard > [hidden] { display:none !important; }
.note-game__trial-badge { grid-column:1 / 3; min-width:0; }.note-game__trial-badge b { color:#ffe169; font-size:clamp(.7rem,3vw,.9rem); letter-spacing:.04em; }
.note-game__play { position:relative; min-height:240px; overflow:hidden; touch-action:none; background:radial-gradient(circle at 70% 35%,rgba(37,105,157,.26),transparent 38%),linear-gradient(#0b1b34,#071127); }.note-game__play canvas { display:block; width:100%; height:100%; }
.note-game__author-briefing { position:absolute; z-index:7; inset:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,38%); padding:18px 8px 0 14px; align-items:end; background:linear-gradient(rgba(3,9,24,.68),rgba(3,9,24,.22)); }.note-game__author-briefing[hidden] { display:none; }.note-game__author-briefing > img { z-index:1; align-self:end; justify-self:end; width:135%; max-width:245px; height:min(78%,340px); margin-right:-17%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 7px 6px rgba(0,0,0,.48)); transform-origin:center bottom; animation:noteAuthorBreath 3.1s ease-in-out infinite; }.note-game__author-speech { position:relative; z-index:2; align-self:center; margin-right:-14px; padding:15px 13px 13px; border:3px solid #d8e2ef; border-radius:18px; color:#14213c; background:rgba(255,255,255,.96); box-shadow:0 6px 0 rgba(25,40,70,.32),0 13px 26px rgba(0,0,0,.28); }.note-game__author-speech::after { content:""; position:absolute; top:50%; right:-17px; width:27px; height:27px; border-top:3px solid #d8e2ef; border-right:3px solid #d8e2ef; background:#fff; transform:translateY(-50%) rotate(45deg); }.note-game__author-speech p { position:relative; z-index:1; margin:0; font-size:clamp(.66rem,3vw,.88rem); font-weight:900; line-height:1.2; }.note-game__author-speech button { position:relative; z-index:2; min-width:110px; min-height:38px; margin-top:11px; border:2px solid #fff0a5; border-radius:10px; color:#4c2d08; background:linear-gradient(#ffd95b,#f4a916); box-shadow:inset 0 2px rgba(255,255,255,.38),0 3px #9b620a; font:900 .62rem/1 "Baloo 2",sans-serif; }
.note-game__countdown { position:absolute; z-index:5; inset:0; display:grid; place-items:center; background:rgba(3,9,24,.42); pointer-events:none; }
.note-game__countdown[hidden] { display:none; }
.note-game__countdown strong { color:#ffe064; font-size:clamp(4rem,24vw,8rem); line-height:1; letter-spacing:-.05em; -webkit-text-stroke:2px #6e3f08; paint-order:stroke fill; text-shadow:0 6px 0 #6c3c08,0 0 28px rgba(255,210,67,.85); }
.note-game__countdown strong.is-popping { animation:noteCountdownPop .68s cubic-bezier(.2,.75,.25,1) both; }
@keyframes noteCountdownPop { 0% { opacity:0; transform:scale(1.65); } 22% { opacity:1; transform:scale(.92); } 42% { transform:scale(1); } 100% { opacity:.92; transform:scale(.88); } }
@keyframes noteAuthorBreath { 0%,100% { transform:scaleX(1) scaleY(1); } 50% { transform:scaleX(1.025) scaleY(.975); } }
.note-game__author-briefing { position:fixed; z-index:1000; inset:0; display:block; padding:0; background:rgba(0,0,0,.82); backdrop-filter:blur(2px); }
.note-game__author-briefing > img { position:absolute; z-index:1; top:auto; right:-8%; bottom:-5%; left:auto; width:min(70%,280px); max-width:280px; height:min(78%,350px); margin:0; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 7px 6px rgba(0,0,0,.48)); transform:none; transform-origin:center bottom; animation:noteSectionAuthorBreath 3.2s ease-in-out infinite; }
.note-game__author-speech { position:absolute; z-index:2; right:auto; bottom:max(1%,calc(env(safe-area-inset-bottom) + 4px)); left:4%; width:auto; max-width:63%; margin:0; padding:8px 11px; border:2px solid #19345d; border-radius:15px; color:#14223a; background:linear-gradient(#fff,#eef5fb); box-shadow:0 4px 0 rgba(6,18,42,.45),0 7px 16px rgba(0,0,0,.28); text-align:center; }
.note-game__author-speech::after { top:50%; right:-12px; width:14px; height:18px; border:0; background:#eef5fb; clip-path:polygon(0 0,100% 50%,0 100%); filter:drop-shadow(2px 0 0 #19345d); transform:translateY(-50%); }
.note-game__author-speech p { font-size:clamp(.78rem,3.2vw,1rem); font-weight:800; line-height:1.18; }
.note-game__author-speech button { min-width:105px; min-height:34px; margin-top:7px; font-size:.57rem; }
@keyframes noteSectionAuthorBreath { 0%,100% { transform:scaleX(1) scaleY(1); } 45%,55% { transform:scaleX(1.012) scaleY(.982); } }
.note-game__overlay { position:fixed; z-index:900; inset:0; display:grid; box-sizing:border-box; min-height:100dvh; padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)); overflow-y:auto; place-items:center; background:rgba(2,7,20,.84); backdrop-filter:blur(2px); }.note-game__overlay[hidden] { display:none; }.note-game__card { box-sizing:border-box; width:min(100%,390px); max-height:calc(100dvh - max(36px,env(safe-area-inset-top) + env(safe-area-inset-bottom))); padding:22px 18px 18px; overflow-y:auto; border:2px solid #e9b843; border-radius:20px; background:linear-gradient(150deg,rgba(28,48,83,.98),rgba(11,22,48,.99)); box-shadow:inset 0 2px rgba(255,255,255,.09),0 8px 0 #070e20,0 18px 38px rgba(0,0,0,.55); text-align:center; }.note-game__symbol { display:block; color:#ffe068; font-size:2.8rem; line-height:.8; text-shadow:0 0 15px rgba(255,207,64,.65); }.note-game__card > small { display:block; margin-top:10px; color:#50dcff; font-size:.48rem; font-weight:900; letter-spacing:.12em; }.note-game__card h2 { margin:3px 0 7px; color:#fff4ce; font-size:1.35rem; line-height:1; }.note-game__card p { margin:0 auto 15px; color:#b8c6d9; font-size:.7rem; line-height:1.3; }.note-game__card > button { min-width:190px; min-height:45px; border:2px solid #fff1a9; border-radius:12px; color:#402807; background:linear-gradient(#ffdb5d,#e99918); box-shadow:inset 0 2px rgba(255,255,255,.38),0 4px 0 #75450b; font:900 .78rem/1 "Baloo 2",sans-serif; }.note-game__card em { display:block; margin-top:11px; color:#7489a7; font-size:.43rem; font-style:normal; font-weight:800; letter-spacing:.08em; }
.note-game__result { display:grid; margin:-3px auto 15px; }.note-game__result strong { color:#ffe065; font-size:2.8rem; line-height:.8; text-shadow:0 3px 0 #8e5707,0 0 12px rgba(255,211,79,.45); }.note-game__result span { margin-top:5px; color:#fff; font-size:.48rem; font-weight:900; letter-spacing:.12em; }.note-game__result small { color:#56dcff; font-size:.5rem; font-weight:800; }
.note-game__result.is-trial > strong { display:none; }
.note-game__result.is-trial > span { margin-top:0; color:#ffe169; font-size:.82rem; letter-spacing:.08em; }
.note-game__result.is-trial > small { margin-top:3px; }
.note-game__pieces { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; margin-top:10px; }
.note-game__pieces > span { display:grid; min-width:0; padding:5px 2px 4px; border:1px solid #355475; border-radius:7px; background:#0a1b35; place-items:center; }
.note-game__pieces > span small { color:#70ddf7; font-size:.38rem; line-height:1; }.note-game__pieces > span b { margin-top:2px; color:#ffe169; font-size:.72rem; line-height:1; }
.note-game__tutorial-progress { display:block; width:max-content; margin:-5px auto 13px; padding:3px 9px; border:1px solid #355575; border-radius:999px; color:#6ce3ff; background:#091b35; font-size:.48rem; font-weight:900; letter-spacing:.08em; }
.note-game__tutorial-progress[hidden] { display:none; }
.note-game__card > button:disabled { cursor:default; opacity:.45; filter:grayscale(.45); box-shadow:inset 0 2px rgba(255,255,255,.18),0 2px 0 #50340e; }
.note-game__footer { display:flex; min-height:50px; padding:8px 11px; align-items:center; justify-content:center; gap:10px; border-top:1px solid #2c4361; background:#0a1a33; text-align:center; }.note-game__footer span { display:inline-flex; min-height:28px; padding:5px 14px; align-items:center; justify-content:center; border:1px solid rgba(103,224,255,.72); border-radius:999px; color:#e8fbff; background:linear-gradient(180deg,rgba(27,91,133,.9),rgba(10,44,79,.96)); box-shadow:inset 0 1px rgba(255,255,255,.18),0 0 12px rgba(53,207,248,.2); font-size:clamp(.58rem,2.2vw,.7rem); font-weight:900; line-height:1; letter-spacing:.045em; text-shadow:0 1px 2px #00172e; }
@media (max-width:420px) { .note-game__scoreboard { gap:11px; }.note-game__instruction { max-width:105px; }.repertoire-calendar { grid-template-columns:repeat(2,minmax(0,1fr)); }.repertoire-calendar article,.repertoire-calendar__item { min-height:57px; }.repertoire-score-block > div { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Fichas compactas de puntuación del repertorio */
.repertoire-score-piece { grid-template-columns:minmax(0,1fr) 31px; grid-template-rows:auto auto 15px; gap:2px 6px; min-height:61px; padding:6px 7px; align-content:center; }
.repertoire-score-piece > strong { grid-column:1/-1; overflow:hidden; font-size:.64rem; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.repertoire-score-piece > small { grid-column:1/-1; overflow:hidden; color:#63ddff; font-size:.46rem; font-weight:800; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.repertoire-score-piece > span { position:relative; grid-column:1; grid-row:3; display:block; min-height:0; height:15px; overflow:hidden; border:1px solid #705c34; border-radius:7px; background:linear-gradient(#090d16,#171521); box-shadow:inset 0 2px 3px rgba(0,0,0,.72),0 1px rgba(255,255,255,.08); }
.repertoire-score-piece > span > i { position:absolute; inset:0 auto 0 0; display:block; height:100%; border-radius:5px; background:linear-gradient(180deg,#ffe98b 0%,#efad32 48%,#b96c13 100%); box-shadow:inset 0 2px rgba(255,255,255,.42),0 0 8px rgba(255,190,56,.35); }
.repertoire-score-piece > em { grid-column:2; grid-row:3; align-self:center; color:#ffd45c; font-size:.64rem; font-style:normal; font-weight:900; text-align:right; }
.repertoire-score-block > header.has-style { min-height:0; padding-block:3px; }
.repertoire-score-block > header.has-style > div { display:grid; gap:1px; }
.repertoire-score-block > header .repertoire-score-block__style { display:inline-flex; width:max-content; max-width:100%; min-height:16px; margin:0; padding:2px 7px; box-sizing:border-box; align-items:center; overflow:hidden; border:1px solid rgba(103,224,255,.62); border-radius:999px; color:#e8fbff; background:linear-gradient(180deg,rgba(27,91,133,.9),rgba(10,44,79,.96)); box-shadow:inset 0 1px rgba(255,255,255,.15),0 0 8px rgba(53,207,248,.16); font-size:clamp(.38rem,1.5vw,.46rem); font-weight:900; line-height:1; letter-spacing:.035em; text-overflow:ellipsis; text-shadow:0 1px 2px #00172e; white-space:nowrap; }
.repertoire-score-piece.is-missing > em { color:#ff626f; }
.repertoire-scores > div > .repertoire-score-piece { grid-template-columns:minmax(0,1fr) 34px; }
.repertoire-score-piece { grid-template-columns:minmax(0,1fr); }
.repertoire-score-piece > span { grid-column:1/-1; }
.repertoire-score-piece > span > em { position:absolute; z-index:2; inset:0 5px 0 auto; display:flex; align-items:center; color:#fff7cf; font-size:.5rem; font-style:normal; font-weight:900; line-height:1; text-shadow:0 1px 2px #000,1px 0 #000; }
.repertoire-score-piece.is-missing > span > em { color:#ff9aa2; }
.repertoire-scores > div > .repertoire-score-piece { grid-template-columns:minmax(0,1fr); }
.repertoire-scores > div > .repertoire-score-block,
.repertoire-scores > div > .repertoire-score-piece { border-width:2px; border-color:#806a45; box-shadow:0 3px 0 rgba(3,8,18,.72),0 0 8px rgba(255,204,84,.1); }
.repertoire-score-piece > span { height:13px; border:1px solid #7b6337; border-radius:5px; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),rgba(105,120,145,.24) calc(20% - 1px),rgba(105,120,145,.24) 20%),linear-gradient(180deg,#060b14,#172035); box-shadow:inset 0 2px 4px rgba(0,0,0,.82),0 1px rgba(255,229,139,.12); }
.repertoire-score-piece > span > i { border-radius:3px; background:linear-gradient(180deg,#fff0a0 0%,#f4c34e 38%,#d58b1f 64%,#a85a0c 100%); box-shadow:inset 0 1px rgba(255,255,255,.72),inset 0 -2px rgba(100,45,0,.3),0 0 5px rgba(255,188,54,.28); }
.repertoire-score-piece > span > em { right:4px; color:#fff; font-size:.45rem; text-shadow:0 1px 2px #000; }
.repertoire-scores > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
.repertoire-scores > div > .repertoire-score-block { grid-column:1/-1; }
.repertoire-score-piece.is-record { position:relative; background:linear-gradient(145deg,#17395a,#10243f); box-shadow:inset 0 0 0 1px rgba(255,215,73,.38),0 0 10px rgba(255,195,39,.2); }
.repertoire-score-piece.is-record > strong { padding-right:54px; }
.repertoire-score-piece.is-record::after { content:"¡RÉCORD!"; position:absolute; z-index:2; top:5px; right:4px; padding:3px 6px 2px; border:1px solid #ffe57c; border-radius:999px; color:#fff; background:linear-gradient(#292b36,#07090e); box-shadow:0 2px 0 #000,0 0 8px rgba(255,209,55,.3); font:900 .35rem/1 "Baloo 2",sans-serif; letter-spacing:.06em; }
.repertoire-calendar__item.is-current { min-height:84px; padding:27px 4px 8px; }
.repertoire-calendar__item.is-current::after { top:5px; }
.repertoire-calendar__item.is-current.is-demo::after { content:"DEMOSTRACIÓN"; box-sizing:border-box; width:calc(100% - 10px); min-width:0; max-width:112px; padding-inline:3px; border-color:#596074; color:#fff; background:linear-gradient(#242733,#080a10); box-shadow:0 3px 0 #000,0 5px 10px rgba(0,0,0,.48); text-shadow:none; white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { .note-game__meter i { transition:none; } }
@media (prefers-reduced-motion:reduce) { .note-game__countdown strong.is-popping { animation:none; } }

.repertoire-style-picker__options.is-own-style { padding-inline:0; }

.repertoire-style-picker__options.is-own-style { grid-auto-rows:auto; }
.repertoire-style-picker__own-explanation { display:block; margin-top:12px; font-size:.55rem; line-height:1.45; color:#bdcee5; }
.repertoire-style-picker__own-explanation strong { color:#8fe9ff; }

/* La calidad comparte marcador con Ensayos; la barra queda solo visual. */
.repertoire-scores .repertoire-score-piece{grid-template-columns:34px minmax(0,1fr);grid-template-rows:minmax(15px,auto) minmax(15px,auto) 15px;gap:3px 7px}
.repertoire-scores .repertoire-score-piece > .piece-quality-badge{grid-column:1;grid-row:1/3;align-self:center;justify-self:center}
.repertoire-scores .repertoire-score-piece > strong{grid-column:2;grid-row:1;min-width:0}
.repertoire-scores .repertoire-score-piece > small{grid-column:2;grid-row:2;min-width:0}
.repertoire-scores .repertoire-score-piece > span{grid-column:1/-1;grid-row:3}
.repertoire-scores .repertoire-score-piece:not(:has(> small)) > strong{grid-row:1/3;align-self:center}

/* Presentación y popurrí usan las mismas dos columnas que las demás piezas. */
.repertoire-scores > div > .repertoire-score-piece{grid-template-columns:34px minmax(0,1fr)}
.repertoire-scores .repertoire-score-piece{min-width:0}
.repertoire-scores .repertoire-score-piece > span{width:100%;box-sizing:border-box;justify-self:stretch}
.repertoire-scores .repertoire-score-piece.is-record > strong{padding-right:0}
.repertoire-scores .repertoire-score-piece.is-record{overflow:hidden;z-index:1}
.repertoire-scores .repertoire-score-piece.is-record::after{position:absolute;top:4px;right:4px;grid-column:auto;grid-row:auto;margin:0;padding:3px 6px 2px;white-space:nowrap;transform:rotate(3deg);pointer-events:none}
.repertoire-score-block:has(.repertoire-score-piece.is-record){overflow:hidden}
.repertoire-score-block > div:has(.repertoire-score-piece.is-record){row-gap:1px;padding-top:1px}

/* Nombre y letra forman un bloque compacto centrado junto al marcador. */
.repertoire-scores .repertoire-score-piece:has(> small){row-gap:1px}
.repertoire-scores .repertoire-score-piece:has(> small) > strong{align-self:end;line-height:1.05}
.repertoire-scores .repertoire-score-piece:has(> small) > small{align-self:start;line-height:1.1}
.repertoire-scores .repertoire-score-piece:has(> small) > span{margin-top:4px}

.note-game__result > [hidden] { display:none !important; }