:root {
  --ink: #1d1f23; --ink2: #2b2e34; --paper: #f4efe2; --paper2: #e6dcc6; --line: #d6cbb2; --board: #2f6152; --board2: #23493e;
  --red: #c5463b; --yellow: #e9b63a; --navy: #2f3f5c; --wood: #c9a26b; --mute: #6d675b;
  --fd: "Black Han Sans", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fb: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --fn: "Barlow Condensed", "Noto Sans KR", sans-serif;
  --fh: "Gaegu", "Noto Sans KR", cursive;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #1d1f23; --paper: #f4efe2; } }
:root[data-theme="dark"] { --ink: #1d1f23; --paper: #f4efe2; }
html, body { height: 100%; margin: 0; background: #0b0c0e; overflow: hidden; overscroll-behavior: none; }
/* 화면은 16:9 무대 하나다. 창이 다른 비율이면 위아래나 양옆을 비운다. --vw, --vh 는 무대 크기의 1/100 (main.js 가 넣는다) */
#app { --vw: 1vw; --vh: 1vh; position: fixed; left: 50%; top: 50%; width: calc(var(--vw) * 100); height: calc(var(--vh) * 100); transform: translate(-50%, -50%); font-family: var(--fb); color: var(--paper); font-size: calc(var(--vh) * 1.9); user-select: none; -webkit-user-select: none; touch-action: none; overflow: hidden; background: #1d1f23; }
#app *, #app *::before, #app *::after { box-sizing: border-box; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: filter .5s; }
#gl.gray { filter: grayscale(.85) brightness(.82) contrast(1.05); }
#app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#app [hidden] { display: none !important; }
.sh { text-shadow: 0 .06em 0 rgba(0, 0, 0, .5), 0 0 .14em rgba(0, 0, 0, .55), 0 0 .7em rgba(0, 0, 0, .4); }
.tag { display: inline-block; background: var(--board); color: var(--paper); font: 700 .78em/1 var(--fb); padding: .36em .7em .34em; border-radius: .3em; letter-spacing: .1em; }

/* ---------- 화면 가장자리 효과 ---------- */
#vig { position: absolute; inset: 0; pointer-events: none; --a: 0; background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(197, 70, 59, var(--a)) 118%); }
#vig.held { box-shadow: inset 0 0 0 .7em var(--yellow), inset 0 0 0 1.1em var(--ink); animation: pulse .32s steps(2) infinite; }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #fff; }
#flash.hit { animation: flashR .45s ease-out; background: radial-gradient(ellipse at center, transparent 40%, rgba(197, 70, 59, .7) 120%); }
#flash.cam { animation: flashW .5s ease-out; }
#dust { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, .2) 100%); }
/* 물감 얼룩: 가장자리가 번지고 아래로 흘러내린 자국이 있는 마스크 */
#dust.ink { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='g' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.013' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='34' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -10'/%3E%3C/filter%3E%3Cg filter='url(%23g)'%3E%3Ccircle cx='700' cy='430' r='185'/%3E%3Cpath d='M833 473L1066 415L1064 390L825 367Z'/%3E%3Ccircle cx='1065' cy='402' r='21'/%3E%3Cpath d='M800 533L922 526L931 502L843 416Z'/%3E%3Ccircle cx='926' cy='514' r='27'/%3E%3Ccircle cx='988' cy='536' r='11'/%3E%3Cpath d='M722 567L836 690L857 678L807 518Z'/%3E%3Ccircle cx='846' cy='684' r='24'/%3E%3Ccircle cx='868' cy='721' r='12'/%3E%3Cpath d='M659 568L734 686L749 683L782 548Z'/%3E%3Ccircle cx='742' cy='684' r='15'/%3E%3Ccircle cx='748' cy='723' r='6'/%3E%3Cpath d='M597 525L585 645L607 656L692 570Z'/%3E%3Ccircle cx='596' cy='650' r='23'/%3E%3Ccircle cx='573' cy='699' r='8'/%3E%3Cpath d='M573 477L474 591L489 610L623 542Z'/%3E%3Ccircle cx='482' cy='601' r='27'/%3E%3Ccircle cx='395' cy='669' r='10'/%3E%3Ccircle cx='364' cy='693' r='7'/%3E%3Cpath d='M565 417L401 486L405 504L582 498Z'/%3E%3Ccircle cx='403' cy='495' r='17'/%3E%3Ccircle cx='310' cy='516' r='12'/%3E%3Ccircle cx='213' cy='537' r='6'/%3E%3Cpath d='M595 341L435 321L428 341L562 430Z'/%3E%3Ccircle cx='431' cy='331' r='26'/%3E%3Ccircle cx='363' cy='306' r='12'/%3E%3Cpath d='M625 316L422 197L412 210L572 382Z'/%3E%3Ccircle cx='417' cy='204' r='21'/%3E%3Ccircle cx='285' cy='98' r='5'/%3E%3Cpath d='M707 294L618 96L600 101L625 316Z'/%3E%3Ccircle cx='609' cy='99' r='23'/%3E%3Ccircle cx='590' cy='28' r='8'/%3E%3Ccircle cx='540' cy='-152' r='4'/%3E%3Cpath d='M770 311L766 102L749 99L675 294Z'/%3E%3Ccircle cx='758' cy='100' r='17'/%3E%3Ccircle cx='766' cy='51' r='9'/%3E%3Cpath d='M826 365L931 155L918 145L737 293Z'/%3E%3Ccircle cx='925' cy='150' r='18'/%3E%3Ccircle cx='956' cy='111' r='12'/%3E%3Cpath d='M833 406L1024 280L1014 260L798 338Z'/%3E%3Ccircle cx='1019' cy='270' r='23'/%3E%3Cpath d='M615 523L619 911L641 911L646 523Z'/%3E%3Ccircle cx='630' cy='911' r='23'/%3E%3Cpath d='M789 523L796 715L826 715L833 523Z'/%3E%3Ccircle cx='811' cy='715' r='33'/%3E%3Cpath d='M618 523L625 765L655 765L662 523Z'/%3E%3Ccircle cx='640' cy='765' r='34'/%3E%3Ccircle cx='1190' cy='285' r='100'/%3E%3Cpath d='M1256 321L1365 312L1366 302L1263 266Z'/%3E%3Ccircle cx='1365' cy='307' r='9'/%3E%3Ccircle cx='1387' cy='310' r='4'/%3E%3Cpath d='M1240 341L1324 361L1331 349L1265 293Z'/%3E%3Ccircle cx='1327' cy='355' r='12'/%3E%3Ccircle cx='1363' cy='374' r='5'/%3E%3Cpath d='M1202 358L1268 446L1277 442L1243 336Z'/%3E%3Ccircle cx='1273' cy='444' r='9'/%3E%3Cpath d='M1139 343L1148 413L1155 415L1202 361Z'/%3E%3Ccircle cx='1152' cy='414' r='8'/%3E%3Ccircle cx='1138' cy='460' r='5'/%3E%3Cpath d='M1119 307L1069 368L1076 378L1149 347Z'/%3E%3Ccircle cx='1073' cy='373' r='11'/%3E%3Ccircle cx='1033' cy='403' r='6'/%3E%3Cpath d='M1123 254L1024 264L1023 273L1118 302Z'/%3E%3Ccircle cx='1023' cy='268' r='11'/%3E%3Ccircle cx='929' cy='259' r='3'/%3E%3Cpath d='M1142 224L1043 206L1038 215L1113 283Z'/%3E%3Ccircle cx='1041' cy='211' r='13'/%3E%3Ccircle cx='981' cy='181' r='4'/%3E%3Cpath d='M1201 213L1175 141L1162 143L1158 219Z'/%3E%3Ccircle cx='1168' cy='142' r='12'/%3E%3Ccircle cx='1166' cy='123' r='5'/%3E%3Ccircle cx='1154' cy='43' r='4'/%3E%3Cpath d='M1241 227L1232 162L1222 159L1179 209Z'/%3E%3Ccircle cx='1227' cy='161' r='8'/%3E%3Ccircle cx='1239' cy='120' r='4'/%3E%3Cpath d='M1267 273L1353 180L1347 170L1229 218Z'/%3E%3Ccircle cx='1350' cy='175' r='10'/%3E%3Ccircle cx='1378' cy='156' r='7'/%3E%3Cpath d='M1218 335L1221 530L1236 530L1239 335Z'/%3E%3Ccircle cx='1228' cy='530' r='13'/%3E%3Cpath d='M1201 335L1204 442L1215 442L1218 335Z'/%3E%3Ccircle cx='1209' cy='442' r='12'/%3E%3Ccircle cx='360' cy='250' r='78'/%3E%3Cpath d='M414 276L480 258L481 248L415 226Z'/%3E%3Ccircle cx='480' cy='253' r='11'/%3E%3Ccircle cx='509' cy='253' r='5'/%3E%3Cpath d='M378 308L437 336L441 332L416 272Z'/%3E%3Ccircle cx='439' cy='334' r='7'/%3E%3Ccircle cx='460' cy='357' r='5'/%3E%3Cpath d='M342 307L372 392L380 391L391 301Z'/%3E%3Ccircle cx='376' cy='392' r='8'/%3E%3Ccircle cx='380' cy='424' r='4'/%3E%3Cpath d='M313 282L280 344L288 350L340 303Z'/%3E%3Ccircle cx='284' cy='347' r='9'/%3E%3Cpath d='M301 254L223 318L227 325L323 297Z'/%3E%3Ccircle cx='225' cy='321' r='8'/%3E%3Ccircle cx='205' cy='332' r='3'/%3E%3Cpath d='M311 221L224 212L222 222L303 253Z'/%3E%3Ccircle cx='223' cy='217' r='13'/%3E%3Ccircle cx='132' cy='195' r='3'/%3E%3Cpath d='M342 195L273 132L267 136L311 219Z'/%3E%3Ccircle cx='270' cy='134' r='6'/%3E%3Cpath d='M378 195L361 126L352 127L338 196Z'/%3E%3Ccircle cx='356' cy='127' r='10'/%3E%3Ccircle cx='355' cy='87' r='3'/%3E%3Cpath d='M413 228L465 165L460 160L390 201Z'/%3E%3Ccircle cx='462' cy='162' r='7'/%3E%3Cpath d='M333 289L335 385L345 385L347 289Z'/%3E%3Ccircle cx='340' cy='385' r='9'/%3E%3Ccircle cx='1030' cy='700' r='58'/%3E%3Cpath d='M1069 722L1141 713L1142 706L1072 685Z'/%3E%3Ccircle cx='1142' cy='710' r='9'/%3E%3Ccircle cx='1176' cy='713' r='4'/%3E%3Cpath d='M1051 740L1114 766L1116 762L1074 709Z'/%3E%3Ccircle cx='1115' cy='764' r='5'/%3E%3Ccircle cx='1135' cy='779' r='2'/%3E%3Cpath d='M1023 742L1041 817L1046 816L1046 739Z'/%3E%3Ccircle cx='1044' cy='816' r='6'/%3E%3Ccircle cx='1047' cy='843' r='3'/%3E%3Cpath d='M992 722L967 780L972 783L1020 743Z'/%3E%3Ccircle cx='969' cy='782' r='5'/%3E%3Ccircle cx='946' cy='813' r='4'/%3E%3Ccircle cx='933' cy='830' r='1'/%3E%3Cpath d='M992 682L921 680L920 685L988 705Z'/%3E%3Ccircle cx='920' cy='682' r='5'/%3E%3Ccircle cx='859' cy='672' r='2'/%3E%3Cpath d='M1005 664L946 643L943 648L987 692Z'/%3E%3Ccircle cx='945' cy='646' r='8'/%3E%3Ccircle cx='930' cy='636' r='3'/%3E%3Ccircle cx='881' cy='605' r='2'/%3E%3Cpath d='M1042 659L1033 613L1025 613L1017 660Z'/%3E%3Ccircle cx='1029' cy='613' r='10'/%3E%3Ccircle cx='1029' cy='591' r='4'/%3E%3Cpath d='M1070 682L1102 633L1096 627L1047 660Z'/%3E%3Ccircle cx='1099' cy='630' r='7'/%3E%3Ccircle cx='1121' cy='608' r='4'/%3E%3Ccircle cx='1147' cy='582' r='2'/%3E%3Ccircle cx='215' cy='640' r='40'/%3E%3Cpath d='M245 647L279 628L279 625L240 622Z'/%3E%3Ccircle cx='279' cy='627' r='3'/%3E%3Ccircle cx='300' cy='622' r='2'/%3E%3Ccircle cx='322' cy='618' r='2'/%3E%3Cpath d='M229 666L272 693L274 690L243 651Z'/%3E%3Ccircle cx='273' cy='691' r='4'/%3E%3Ccircle cx='288' cy='705' r='2'/%3E%3Ccircle cx='303' cy='718' r='1'/%3E%3Cpath d='M193 662L195 692L199 693L218 671Z'/%3E%3Ccircle cx='197' cy='692' r='3'/%3E%3Ccircle cx='192' cy='705' r='2'/%3E%3Ccircle cx='185' cy='724' r='1'/%3E%3Cpath d='M185 644L153 676L155 679L197 665Z'/%3E%3Ccircle cx='154' cy='677' r='4'/%3E%3Ccircle cx='144' cy='683' r='2'/%3E%3Ccircle cx='125' cy='695' r='1'/%3E%3Cpath d='M191 622L139 620L138 624L185 645Z'/%3E%3Ccircle cx='139' cy='622' r='4'/%3E%3Ccircle cx='99' cy='613' r='1'/%3E%3Cpath d='M215 609L195 591L191 593L191 620Z'/%3E%3Ccircle cx='193' cy='592' r='4'/%3E%3Cpath d='M243 630L275 593L272 590L230 615Z'/%3E%3Ccircle cx='274' cy='592' r='5'/%3E%3Cpath d='M236 660L237 739L243 739L244 660Z'/%3E%3Ccircle cx='240' cy='739' r='6'/%3E%3Ccircle cx='1420' cy='610' r='46'/%3E%3Cpath d='M1454 613L1478 601L1477 595L1449 594Z'/%3E%3Ccircle cx='1478' cy='598' r='8'/%3E%3Cpath d='M1424 644L1453 681L1456 680L1445 634Z'/%3E%3Ccircle cx='1455' cy='680' r='4'/%3E%3Ccircle cx='1467' cy='705' r='3'/%3E%3Cpath d='M1394 633L1376 692L1381 694L1417 644Z'/%3E%3Ccircle cx='1378' cy='693' r='5'/%3E%3Ccircle cx='1351' cy='747' r='1'/%3E%3Cpath d='M1385 605L1357 623L1359 628L1392 631Z'/%3E%3Ccircle cx='1358' cy='626' r='6'/%3E%3Ccircle cx='1339' cy='630' r='3'/%3E%3Cpath d='M1398 583L1359 570L1357 575L1386 603Z'/%3E%3Ccircle cx='1358' cy='573' r='5'/%3E%3Ccircle cx='1346' cy='565' r='2'/%3E%3Ccircle cx='1324' cy='552' r='1'/%3E%3Cpath d='M1429 577L1416 544L1411 545L1405 579Z'/%3E%3Ccircle cx='1414' cy='544' r='4'/%3E%3Ccircle cx='1413' cy='535' r='3'/%3E%3Cpath d='M1449 591L1463 556L1458 552L1429 576Z'/%3E%3Ccircle cx='1461' cy='554' r='8'/%3E%3Ccircle cx='1475' cy='534' r='2'/%3E%3Ccircle cx='560' cy='95' r='26'/%3E%3Cpath d='M577 103L607 102L608 99L579 91Z'/%3E%3Ccircle cx='607' cy='101' r='3'/%3E%3Ccircle cx='625' cy='103' r='1'/%3E%3Cpath d='M565 114L585 129L587 127L578 104Z'/%3E%3Ccircle cx='586' cy='128' r='2'/%3E%3Ccircle cx='589' cy='132' r='1'/%3E%3Cpath d='M541 102L527 126L528 128L553 114Z'/%3E%3Ccircle cx='527' cy='127' r='2'/%3E%3Ccircle cx='508' cy='146' r='1'/%3E%3Cpath d='M543 84L515 87L515 89L541 100Z'/%3E%3Ccircle cx='515' cy='88' r='2'/%3E%3Ccircle cx='501' cy='86' r='2'/%3E%3Cpath d='M559 76L549 62L546 63L548 80Z'/%3E%3Ccircle cx='548' cy='63' r='4'/%3E%3Ccircle cx='544' cy='54' r='1'/%3E%3Cpath d='M572 79L573 46L571 45L557 76Z'/%3E%3Ccircle cx='572' cy='45' r='2'/%3E%3Ccircle cx='219' cy='337' r='3'/%3E%3Ccircle cx='1296' cy='189' r='10'/%3E%3Ccircle cx='240' cy='562' r='11'/%3E%3Ccircle cx='883' cy='810' r='10'/%3E%3Ccircle cx='742' cy='418' r='10'/%3E%3Ccircle cx='867' cy='353' r='5'/%3E%3Ccircle cx='167' cy='167' r='8'/%3E%3Ccircle cx='1323' cy='324' r='3'/%3E%3Ccircle cx='645' cy='125' r='5'/%3E%3Ccircle cx='196' cy='276' r='10'/%3E%3Ccircle cx='341' cy='561' r='11'/%3E%3Ccircle cx='773' cy='349' r='11'/%3E%3Ccircle cx='62' cy='628' r='8'/%3E%3Ccircle cx='580' cy='574' r='6'/%3E%3Ccircle cx='708' cy='175' r='9'/%3E%3Ccircle cx='460' cy='846' r='7'/%3E%3Ccircle cx='316' cy='803' r='11'/%3E%3Ccircle cx='121' cy='226' r='8'/%3E%3Ccircle cx='330' cy='406' r='10'/%3E%3Ccircle cx='191' cy='560' r='6'/%3E%3Ccircle cx='1298' cy='126' r='5'/%3E%3Ccircle cx='1230' cy='55' r='11'/%3E%3Ccircle cx='407' cy='156' r='8'/%3E%3Ccircle cx='1037' cy='157' r='4'/%3E%3Ccircle cx='813' cy='244' r='3'/%3E%3Ccircle cx='576' cy='747' r='8'/%3E%3C/g%3E%3C/svg%3E"); background: radial-gradient(ellipse 55% 45% at 40% 32%, rgba(255, 255, 255, .2), transparent 62%), var(--inkc); transform: scaleX(var(--inkm, 1));
  -webkit-mask: var(--m) center / cover no-repeat; mask: var(--m) center / cover no-repeat; }
#tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .18s; box-shadow: inset 0 0 calc(var(--vh) * 16) calc(var(--vh) * 3) rgba(138, 95, 201, .75); }
#tint.on { opacity: 1; }
#speed { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 48%, transparent 58%, rgba(255, 255, 255, .22) 130%); }
@keyframes pulse { 50% { opacity: .55; } }
@keyframes flashR { from { opacity: 1; } to { opacity: 0; } }
@keyframes flashW { from { opacity: .8; } to { opacity: 0; } }

/* ---------- 주행 중 표시 ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; padding: max(1.3em, env(safe-area-inset-top)) max(1.7em, env(safe-area-inset-right)) max(1.3em, env(safe-area-inset-bottom)) max(1.7em, env(safe-area-inset-left)); }
#hud > div { position: absolute; }
#hud::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 22, 26, .44) 0, rgba(18, 22, 26, 0) 18%, rgba(18, 22, 26, 0) 74%, rgba(18, 22, 26, .5) 100%); }
.h-tl { left: 1.7em; top: 1.3em; }
.time { font: 700 4.4em/1 var(--fn); font-variant-numeric: tabular-nums; letter-spacing: .01em; margin-top: .08em; }
.time small { font-size: .56em; opacity: .9; }
.best { font: 600 1.15em var(--fn); letter-spacing: .06em; opacity: .9; font-variant-numeric: tabular-nums; }
.delta { display: inline-block; margin-top: .35em; font: 700 1.5em/1 var(--fn); padding: .22em .55em; border-radius: .3em; font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(-.6em); transition: opacity .25s, transform .25s; }
.delta.on { opacity: 1; transform: none; }
.delta.fast { background: var(--board); } .delta.slow { background: var(--red); }
.skip { left: 50%; bottom: 2.2em; transform: translateX(-50%); font: 600 .95em var(--fb); letter-spacing: .08em; padding: .5em 1em; border-radius: .3em; background: rgba(29, 31, 35, .55); opacity: 0; transition: opacity .3s; }
.skip.on { opacity: .9; }
#hud > .skip, #hud > .big { z-index: 2; }
/* 시작 장면: 계기판을 걷어 내고 위아래에 영화 띠를 친다 */
#hud > div:not(.skip):not(.big) { transition: opacity .5s; }
#hud.cine > div:not(.skip):not(.big) { opacity: 0 !important; transition: none; }
#hud::after { content: ''; position: absolute; inset: 0; border: solid #101214; border-width: 0; transition: border-width .55s cubic-bezier(.3, .7, .2, 1); }
#hud.cine::after { border-width: 9.5vh 0; }
/* 층별 구간 기록: 지나간 층은 이번 기록과 최고 기록 차이, 남은 층은 최고 기록을 흐리게 */
.fsplit { list-style: none; margin: .9em 0 0; padding: 0; width: 13.5em; font: 600 1em/1 var(--fn); font-variant-numeric: tabular-nums; }
.fsplit li { display: grid; grid-template-columns: 3em 1fr 4.2em; align-items: baseline; gap: .4em; padding: .32em .5em .3em .6em; border-left: .2em solid transparent; opacity: .55; }
.fsplit li b { font-weight: 600; text-align: right; }
.fsplit li i { font-style: normal; font-size: .86em; text-align: right; }
.fsplit li.now { opacity: 1; border-left-color: var(--yellow); background: rgba(29, 31, 35, .45); }
.fsplit li.done { opacity: .95; }
.fsplit li i.f { color: #8fd4a8; } .fsplit li i.s { color: #f08a7e; }
@media (max-width: 760px), (max-height: 480px) { .fsplit { display: none; } }
.h-tc { left: 50%; top: 1.5em; width: min(38em, calc(var(--vw) * 46)); transform: translateX(-50%); text-align: center; }
.floors { position: relative; height: 2.5em; }
.floors .ln { position: absolute; left: 0; right: 0; top: .95em; height: .6em; border-radius: 1em; background: rgba(29, 31, 35, .6); box-shadow: 0 0 0 .12em rgba(244, 239, 226, .55); overflow: hidden; }
.floors .ln i { display: block; height: 100%; width: 0; background: var(--yellow); }
.floors .nd { position: absolute; top: .3em; width: 1.9em; height: 1.9em; margin-left: -.95em; border-radius: 50%; background: var(--ink); border: .17em solid var(--paper); font: 700 1.05em/1.5 var(--fn); text-align: center; }
.floors .nd.done { background: var(--board); }
.floors .nd.now { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.floors .me { position: absolute; top: -.55em; margin-left: -.5em; width: 0; height: 0; border: .5em solid transparent; border-top: .7em solid var(--paper); filter: drop-shadow(0 .1em 0 rgba(0, 0, 0, .5)); }
.floors .ch { position: absolute; top: 2.05em; margin-left: -1.3em; width: 2.6em; font: 700 .72em/1.5 var(--fb); background: var(--red); border-radius: .3em; opacity: 0; transition: opacity .2s; }
.floors .ch.on { opacity: 1; }
.sec { margin-top: .55em; font: 700 1.05em var(--fb); letter-spacing: .2em; }
.h-tr { right: 1.7em; top: 1.3em; text-align: right; }
.pips { display: flex; gap: .45em; justify-content: flex-end; margin-top: .5em; }
.pip { text-shadow: none; width: 2.5em; height: 2.5em; border-radius: 50%; border: .17em dashed rgba(244, 239, 226, .75); background: rgba(29, 31, 35, .35); display: grid; place-items: center; font: 400 1.15em var(--fd); color: transparent; }
.pip.on { border: .17em solid var(--paper); background: var(--red); color: var(--paper); animation: pop .35s cubic-bezier(.2, 1.8, .4, 1); }
.yaja { margin-top: .5em; font: 700 1.15em var(--fb); } .yaja b { font: 700 1.9em/1 var(--fn); margin: 0 .12em 0 .3em; }
.pen { margin-top: .5em; font: 700 1.05em var(--fb); background: var(--red); display: inline-block; padding: .3em .7em; border-radius: .3em; opacity: 0; transform: translateX(1em); transition: opacity .2s, transform .2s; }
.pen.on { opacity: 1; transform: none; }
.h-bl { left: 1.7em; bottom: 1.4em; }
.kmh { display: flex; align-items: flex-end; gap: .7em; }
.kmh .lab { font: 600 1.15em/1 var(--fn); letter-spacing: .16em; padding-bottom: .5em; opacity: .9; }
.kmh .num { font: 700 5em/.82 var(--fn); font-variant-numeric: tabular-nums; } .kmh .num i { font-style: normal; opacity: .35; }
.segs { display: flex; gap: .2em; margin-top: .7em; }
.segs b { width: .46em; height: 1.35em; background: rgba(244, 239, 226, .28); transform: skewX(-14deg); box-shadow: 0 .08em 0 rgba(0, 0, 0, .25); }
.segs b.on { background: var(--paper); } .segs b.hot.on { background: var(--yellow); } .segs b.max.on { background: var(--red); }
.kmh.tuck .num { color: var(--yellow); }
.flow { display: flex; align-items: center; gap: .65em; margin-top: .65em; font: 700 .9em var(--fb); letter-spacing: .16em; }
.flow div { width: 12.6em; height: .55em; background: rgba(244, 239, 226, .28); transform: skewX(-14deg); overflow: hidden; box-shadow: 0 .08em 0 rgba(0, 0, 0, .25); }
.flow i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .14s linear; }
.flow.max i { background: var(--red); }
.flow b { font: 700 1.3em/1 var(--fn); letter-spacing: 0; color: var(--yellow); min-width: 2.2em; opacity: 0; transition: opacity .2s; }
.flow b.on { opacity: 1; }
.near { left: 50%; top: 62%; transform: translateX(-50%); font: 400 2.3em/1 var(--fd); color: var(--yellow); opacity: 0; white-space: nowrap; }
.near.on { animation: near .8s ease-out forwards; }
@keyframes near { 0% { opacity: 0; transform: translate(-50%, .5em) scale(.8); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -.2em) scale(1); } 100% { opacity: 0; transform: translate(-50%, -.7em) scale(1); } }
.h-br { right: 1.7em; bottom: 1.4em; text-align: right; }
.dist { font: 700 3em/1 var(--fn); font-variant-numeric: tabular-nums; margin-top: .1em; } .dist small { font-size: .5em; margin-left: .2em; }
.alt { font: 700 1em var(--fb); letter-spacing: .1em; margin-top: .25em; } .alt b { font: 700 1.5em/1 var(--fn); letter-spacing: 0; margin: 0 .2em 0 .45em; font-variant-numeric: tabular-nums; }
.keys { display: flex; gap: 1.1em; justify-content: flex-end; margin-top: .8em; font: 700 .95em var(--fb); transition: opacity .6s; }
.keys span { display: flex; align-items: center; gap: .4em; }
kbd { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em; border-radius: .35em; background: var(--paper); color: var(--ink); font: 700 1em/1 var(--fn); box-shadow: 0 .2em 0 rgba(0, 0, 0, .45); text-shadow: none; }
.h-bc { left: 50%; bottom: 1.6em; transform: translateX(-50%); width: min(46em, calc(var(--vw) * 52)); display: flex; flex-direction: column; align-items: center; gap: .7em; }
.pa { display: flex; align-items: center; gap: .8em; max-width: 100%; background: rgba(29, 31, 35, .82); border-left: .4em solid var(--yellow); padding: .6em 1.1em .62em .9em; border-radius: .4em; font: 500 1.12em/1.4 var(--fb); opacity: 0; transform: translateY(.8em); transition: opacity .25s, transform .25s; }
.pa.on { opacity: 1; transform: none; }
.pa em { flex: none; font: 700 .72em/1 var(--fb); font-style: normal; color: var(--ink); background: var(--yellow); padding: .4em .55em; border-radius: .25em; letter-spacing: .06em; }
.alert { display: flex; align-items: center; gap: .7em; background: var(--red); padding: .4em .9em; border-radius: 2em; font: 700 1.05em var(--fb); opacity: 0; transition: opacity .2s; box-shadow: 0 .25em 0 rgba(0, 0, 0, .3); }
.alert.on { opacity: 1; animation: pulse .5s ease-in-out infinite; }
.flip { align-self: center; background: #8a5fc9; padding: .35em 1em; border-radius: 2em; font: 400 1.5em var(--fd); letter-spacing: .08em; opacity: 0; transition: opacity .15s; box-shadow: 0 .2em 0 rgba(0, 0, 0, .3); }
.flip.on { opacity: 1; animation: pulse .4s steps(2) infinite; }
.alert b { font: 700 1.5em/1 var(--fn); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.toast { left: 50%; top: 17%; transform: translateX(-50%); text-align: center; opacity: 0; white-space: nowrap; }
.toast.on { animation: toast 2.4s ease-out forwards; }
.toast span { display: block; font: 700 1em var(--fb); letter-spacing: .34em; color: var(--yellow); }
.toast b { display: block; font: 400 3.5em/1.15 var(--fd); }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, .8em); } 12% { opacity: 1; transform: translate(-50%, 0); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -.5em); } }
@keyframes pop { from { transform: scale(2.2); } to { transform: scale(1); } }
.ready { left: 50%; top: 24%; transform: translateX(-50%); text-align: center; }
.ready b { display: block; font: 400 2.5em var(--fd); animation: pulse 1s ease-in-out infinite; }
.ready span { display: flex; gap: 1.2em; justify-content: center; margin-top: .7em; font: 700 1em var(--fb); }
.ready span i { font-style: normal; display: flex; gap: .4em; align-items: center; }
.grab { left: 50%; top: 13%; transform: translateX(-50%); width: 24em; background: var(--paper); color: var(--ink); border: .25em solid var(--ink); border-radius: .9em; padding: 1em 1.4em 1.2em; text-align: center; box-shadow: 0 .5em 0 rgba(0, 0, 0, .35); }
.grab h3 { margin: 0; font: 400 2em/1.2 var(--fd); color: var(--red); }
.grab p { margin: .5em 0 .7em; font: 700 1.1em var(--fb); display: flex; gap: .5em; justify-content: center; align-items: center; }
.grab kbd { background: var(--ink); color: var(--paper); padding: 0 .9em; animation: tap .16s steps(2) infinite; }
@keyframes tap { 50% { transform: translateY(.14em); box-shadow: 0 .06em 0 rgba(0, 0, 0, .45); } }
.bar { height: 1.15em; border-radius: .6em; background: var(--paper2); overflow: hidden; box-shadow: inset 0 0 0 .12em var(--ink); }
.bar i { display: block; height: 100%; width: 0; background: var(--board); transition: width .06s; }
.bar.t { height: .45em; margin-top: .5em; box-shadow: none; } .bar.t i { background: var(--red); transition: none; }
.stamp { left: 50%; top: 44%; width: 19em; height: 19em; margin: -9.5em 0 0 -9.5em; border-radius: 50%; border: .8em double var(--red); color: var(--red); display: grid; place-content: center; text-align: center; opacity: 0; transform: rotate(-13deg) scale(2.6); background: rgba(244, 239, 226, .1); }
.stamp.on { animation: stamp .45s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.stamp b { font: 400 6.4em/1 var(--fd); } .stamp span { font: 700 1.2em var(--fb); letter-spacing: .08em; } .stamp em { font: 700 1.05em var(--fb); font-style: normal; margin-top: .3em; }
@keyframes stamp { from { opacity: 0; transform: rotate(-13deg) scale(2.6); } to { opacity: .96; transform: rotate(-13deg) scale(1); } }
.big { left: 50%; top: 34%; transform: translateX(-50%); font: 400 6em/1 var(--fd); opacity: 0; white-space: nowrap; color: var(--yellow); }
.big.on { animation: toast 1.6s ease-out forwards; }

/* ---------- 터치 조작 ---------- */
#touch { position: absolute; inset: 0; pointer-events: none; display: none; }
#touch.on { display: block; }
#app.touch .h-bl, #app.touch .h-br { bottom: 12.4em; } #app.touch .ready span { display: none; } .ready em { display: none; font: 700 1em var(--fb); font-style: normal; margin-top: .7em; } #app.touch .ready em { display: block; }
#touch button { position: absolute; pointer-events: auto; width: 6.4em; height: 6.4em; border-radius: 50%; background: rgba(29, 31, 35, .42); border: .2em solid rgba(244, 239, 226, .7); font: 400 1.5em var(--fd); color: var(--paper); bottom: max(1em, env(safe-area-inset-bottom)); }
#touch button.dn { background: rgba(233, 182, 58, .7); color: var(--ink); }
#tL { left: 1.2em; } #tR { right: 1.2em; } #tB { left: 50%; margin-left: -2.3em; width: 4.6em !important; height: 4.6em !important; }
#tP { top: 10em; left: 1.7em; bottom: auto !important; width: 3.2em !important; height: 3.2em !important; font-size: 1em !important; }

/* ---------- 첫 화면 ---------- */
.ov { position: absolute; inset: 0; }
#menu { display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(90deg, rgba(12,31,35,.96) 0%, rgba(17,34,37,.86) 22%, rgba(17,34,37,.3) 48%, transparent 70%), linear-gradient(0deg, rgba(10,26,30,.82), transparent 30%); }
#menu::before { content: ''; position: absolute; inset: 2.5em; border: 1px solid rgba(250,240,215,.12); pointer-events: none; }
.m-l { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--vh) * 10) 0 calc(var(--vh) * 14) calc(var(--vw) * 6); min-height: 0; }
.edition { display: flex; align-items: center; gap: .7em; font: 600 .85em var(--fn); letter-spacing: .22em; color: #e9bd70; }
.edition > span { width: .55em; height: .55em; background: #edba66; border-radius: 50%; box-shadow: 0 0 1em #edba6655; }
.edition i { font: 500 .82em var(--fb); letter-spacing: .04em; color: #e9e3d0; opacity: .6; border-left: 1px solid #e9e3d044; padding-left: 1em; }
.logo { margin: .19em 0 0 -.035em; font: 400 calc(var(--vh) * 22)/1 var(--fd); letter-spacing: -.065em; position: relative; width: max-content; color: #fff5d9; text-shadow: 0 .035em 0 #c3a579, 0 .06em .2em #0b222b66; transform: rotate(-4deg); }
.logo::after { content: ''; position: absolute; left: .03em; width: 90%; bottom: -.025em; height: .035em; background: #ef8d5e; transform: rotate(-2deg); }
.logo-mark { position: absolute; right: -.7em; top: -.1em; font: 400 .44em var(--fh); color: #f0b653; transform: rotate(8deg); text-shadow: none; }
.logo-sub { margin: 1.1em 0 0; font: 700 2.05em/1.3 var(--fh); letter-spacing: -.03em; color: #f0bc73; }
.logo-desc { margin: 1em 0 0; font: 400 1em/1.85 var(--fb); max-width: 27em; color: #d8ded8; }
.nav { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2em; }
.nav button { font: 500 1.03em var(--fb) !important; transition: color .15s, transform .15s, background .15s; }
.nav button:hover, .nav button:focus-visible { color: #f6c76e; outline: none; }
.nav button:focus-visible { outline: 2px solid #ffe2a1; outline-offset: .35em; }
.nav .go { display: flex; width: 13.1em; align-items: center; justify-content: space-between; background: #f1c365 !important; color: #203337 !important; padding: .68em .9em .62em 1em !important; font: 400 1.65em var(--fd) !important; border-radius: .15em; box-shadow: 0 .18em 0 #ae793e, 0 .6em 1.4em #071b2344; }
.nav .go:hover { background: #ffdc8b !important; transform: translateY(-.08em); }
.nav .go:active { transform: translateY(.12em); }
.nav .go small { font: 600 .44em var(--fn); letter-spacing: .12em; opacity: .75; border-left: 1px solid #20333744; padding-left: 1.4em; }
.nav-secondary { display: flex; gap: 2.2em; padding: .4em .1em; color: #ecebdc; }
.menu-note { font: 400 1.05em var(--fh); color: #a8bbb5; margin: 0; }
.menu-note span { color: #e5bf85; }
.menu-corner { position: absolute; right: 6%; top: 8%; text-align: right; text-shadow: 0 1px 8px #122e2f77; }
.menu-corner span { display: block; font: 500 .75em var(--fb); letter-spacing: .22em; opacity: .85; }
.menu-corner b { display: block; font: 700 1.5em var(--fh); margin-top: .35em; }
.m-r { position: relative; align-self: end; justify-self: end; width: min(25em, calc(var(--vw) * 32)); margin: 0 calc(var(--vw) * 6) calc(var(--vh) * 12.2) 0; }
.card { position: relative; background: rgba(18,44,47,.94); color: #f8efd8; border-radius: .25em; padding: 1.2em 1.5em 1.25em; border: 1px solid #d0caa244; border-top: .2em solid #e6b767; box-shadow: 0 1em 2.5em #091a2440; }
.card-heading { display: flex; align-items: center; justify-content: space-between; }
.card-heading > span:last-child { font-size: .72em; color: #bac9bf; letter-spacing: .08em; }
.card .tag { background: transparent; color: #efc477; padding: 0; letter-spacing: .14em; font: 600 .9em var(--fn); }
.card h2 { margin: .4em 0 .12em; font: 400 2.5em/1.1 var(--fd); }
.card .sub { font: 400 .9em var(--fb); color: #b7c9c4; }
.card .rec { margin-top: 1em; padding-top: .8em; border-color: #c1cfc72b; align-items: center; }
.card .rec > div:first-child { display: flex; align-items: baseline; gap: 1.1em; }
.card .rec div span { font-size: .75em; color: #b7c9c4; letter-spacing: 0; }
.card .rec div b { font-size: 1.8em; color: #f0c16c; }
.card .rec div b.no { font: 400 .95em var(--fb); color: #e0e6d8; }
.card .medal { font-size: .7em; width: 2.4em; height: 2.4em; border-color: #afbea35c; }
.card .lb { display: none; }
.menu-footer { position: absolute; bottom: 4.8%; left: 6%; right: 6%; display: flex; justify-content: space-between; padding-top: 1em; border-top: 1px solid #e2ddc423; font: 400 .7em var(--fb); color: #c9d0be; letter-spacing: .03em; }
.menu-footer b { color: #f4d5a1; }
.rec { display: flex; justify-content: space-between; align-items: flex-end; margin-top: .9em; padding-top: .8em; border-top: .12em dashed var(--line); }
.rec div span { display: block; font: 700 .8em var(--fb); letter-spacing: .1em; color: var(--mute); }
.rec div b { font: 700 2.5em/1 var(--fn); font-variant-numeric: tabular-nums; }
.rec div b.no { font: 400 1.6em/1.5 var(--fd); color: var(--mute); }
.medal { width: 3.7em; height: 3.7em; border-radius: 50%; display: grid; place-items: center; font: 400 1.4em var(--fd); color: var(--paper); background: var(--line); border: .16em solid var(--ink); transform: rotate(-9deg); }
.medal:empty { background: transparent; border: .16em dashed var(--line); }
.medal.g { background: #d2a23a; } .medal.s { background: #9aa3aa; } .medal.b { background: #b9764a; } .medal.c { background: var(--board); }
.lb { margin-top: .9em; }
.lb h4 { margin: 0 0 .4em; display: flex; justify-content: space-between; align-items: center; font: 700 .9em var(--fb); letter-spacing: .1em; color: var(--mute); }
.lb h4 button { font: 700 1em var(--fb) !important; color: var(--board) !important; text-decoration: underline; pointer-events: auto; }
.lb ol { list-style: none; margin: 0; padding: 0; }
.lb li { display: grid; grid-template-columns: 1.7em 1fr auto; gap: .5em; align-items: baseline; padding: .2em 0; border-bottom: .06em solid var(--line); font: 500 1.05em var(--fb); }
.lb li i { font: 700 1.05em var(--fn); font-style: normal; color: var(--mute); } .lb li b { font: 700 1.25em var(--fn); font-variant-numeric: tabular-nums; }
.lb li.me { color: var(--board); } .lb li.me i { color: var(--board); }
.lb .none { font: 500 .98em/1.5 var(--fb); color: var(--mute); padding: .3em 0; }
.strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: .4em; margin-top: .9em; }
.strip button { position: relative; font: 700 1.1em/2.1 var(--fn) !important; text-align: center; border-radius: .35em; background: rgba(244, 239, 226, .16) !important; color: rgba(244, 239, 226, .7) !important; pointer-events: auto; transition: transform .1s, background .15s; }
.strip button:hover, .strip button:focus-visible { transform: translateY(-.12em); background: rgba(244, 239, 226, .3) !important; outline: none; }
.strip button.on { background: var(--yellow) !important; color: var(--ink) !important; }
.strip button::after { content: ''; position: absolute; right: .22em; top: .22em; width: .42em; height: .42em; border-radius: 50%; }
.strip button.g::after { background: #d2a23a; } .strip button.s::after { background: #9aa3aa; } .strip button.b::after { background: #b9764a; } .strip button.c::after { background: var(--board); }
.strip button.on.g::after, .strip button.on.s::after, .strip button.on.b::after, .strip button.on.c::after { box-shadow: 0 0 0 .08em var(--ink); }
.strip-n { margin-top: .45em; font: 500 .85em var(--fb); opacity: .7; text-align: right; }

/* ---------- 창 (조작법, 설정, 순위표, 일시정지, 결과) ---------- */
.dim { background: rgba(16, 20, 22, .8); display: grid; place-items: center; padding: calc(var(--vh) * 3) calc(var(--vw) * 4); }
/* 공책 한 장: 빨간 세로줄, 옅은 가로줄, 왼쪽 철 구멍 */
.sheet { width: min(36em, calc(var(--vw) * 92)); max-height: calc(var(--vh) * 92); overflow: auto; color: var(--ink); border-radius: .3em; padding: 1.6em 1.9em 1.7em 3.3em; box-shadow: 0 1.4em 3.4em rgba(0, 0, 0, .5); pointer-events: auto;
  background: radial-gradient(circle, rgba(16, 20, 22, .78) 0 .3em, transparent .34em) .62em 14% / 1em 1em no-repeat local, radial-gradient(circle, rgba(16, 20, 22, .78) 0 .3em, transparent .34em) .62em 50% / 1em 1em no-repeat local, radial-gradient(circle, rgba(16, 20, 22, .78) 0 .3em, transparent .34em) .62em 86% / 1em 1em no-repeat local,
    linear-gradient(90deg, transparent 2.3em, rgba(197, 70, 59, .45) 2.3em, rgba(197, 70, 59, .45) 2.4em, transparent 2.4em) local, repeating-linear-gradient(180deg, transparent 0 1.9em, rgba(47, 63, 92, .08) 1.9em 1.97em) local, var(--paper); }
.sheet.wide { width: min(58em, calc(var(--vw) * 94)); }
.sheet h3 { margin: 0 0 .6em; font: 400 2.2em/1.1 var(--fd); display: flex; align-items: baseline; gap: .5em; }
.sheet h3 small { font: 700 .36em var(--fb); letter-spacing: .2em; color: var(--mute); }

.how { display: grid; grid-template-columns: auto 1fr; gap: .75em 1.2em; align-items: center; font: 500 1.08em/1.45 var(--fb); }
.how kbd { background: var(--ink); color: var(--paper); margin-right: .2em; }
.how b { color: var(--red); }
.tip { margin: 1.1em 0 0; padding: .7em 0 0; list-style: none; border-top: .12em dashed var(--line); font: 400 1.34em/1.5 var(--fh); color: #2f3f5c; }
.tip li { position: relative; padding-left: 1.2em; } .tip li::before { content: '✓'; position: absolute; left: 0; color: var(--red); font: 700 .8em/1.9 var(--fb); }
.tip b { color: var(--red); font-weight: 400; }
.set { display: grid; grid-template-columns: 7.5em 1fr; gap: 1em 1.2em; align-items: center; font: 700 1.05em var(--fb); }
.seg { display: flex; gap: .4em; flex-wrap: wrap; }
.seg button { padding: .5em 1em !important; border-radius: .45em; background: var(--paper2) !important; font: 700 1em var(--fb) !important; color: var(--ink) !important; }
.seg button.on { background: var(--board) !important; color: var(--paper) !important; }
.set input[type=range] { width: 100%; accent-color: var(--board); }
.set input[type=text], .name input { font: 700 1.1em var(--fb); padding: .5em .7em; border: .14em solid var(--ink); border-radius: .45em; background: #fff; color: var(--ink); width: 100%; min-width: 0; user-select: text; -webkit-user-select: text; }
.btns { display: flex; gap: .7em; margin-top: 1.3em; flex-wrap: wrap; }
.btn { padding: .65em 1.3em !important; border-radius: .55em; background: var(--ink) !important; color: var(--paper) !important; font: 400 1.35em var(--fd) !important; box-shadow: 0 .22em 0 rgba(0, 0, 0, .3); transition: transform .08s; }
.btn:hover, .btn:focus-visible { transform: translateY(-.08em); outline: none; }
.btn:active { transform: translateY(.12em); box-shadow: none; }
.btn.p { background: var(--board) !important; } .btn.r { background: var(--red) !important; } .btn.l { background: var(--paper2) !important; color: var(--ink) !important; }
.btn kbd { margin-left: .5em; font-size: .62em; vertical-align: middle; box-shadow: none; }
.res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.8em; }
.res .l h3 { display: block; font-size: 3.2em; color: var(--board); margin: 0; }
.res .big-t { font: 700 6em/1 var(--fn); font-variant-numeric: tabular-nums; margin: .1em 0 0; }
.res .big-t small { font-size: .5em; }
.res .new { display: inline-block; background: var(--red); color: var(--paper); font: 700 .95em var(--fb); padding: .3em .7em; border-radius: .3em; letter-spacing: .1em; transform: rotate(-3deg); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1em; border-top: .14em solid var(--ink); border-bottom: .14em solid var(--ink); }
.stats div { padding: .5em .7em; border-left: .08em solid var(--line); } .stats div:first-child { border-left: 0; padding-left: .1em; } .stats span { display: block; font: 700 .8em var(--fb); color: var(--mute); letter-spacing: .08em; } .stats b { font: 700 1.9em/1.1 var(--fn); }
.name { display: grid; grid-template-columns: 1fr auto; gap: .6em; margin-top: 1em; align-items: center; }
.name p { grid-column: 1 / -1; margin: 0; font: 500 .92em/1.5 var(--fb); color: var(--mute); }
.splits { max-height: 21em; overflow: auto; border: .12em solid var(--line); border-radius: .6em; }
.splits table { width: 100%; border-collapse: collapse; font: 500 .98em var(--fb); }
.splits td { padding: .34em .7em; border-bottom: .06em solid var(--line); } .splits td:nth-child(n+2) { text-align: right; font: 700 1.1em var(--fn); font-variant-numeric: tabular-nums; }
.splits tr.cp td { background: var(--paper2); font-weight: 700; }
.splits .f { color: var(--board); } .splits .s { color: var(--red); }
.res .medal { width: 4.6em; height: 4.6em; position: absolute; right: 1.6em; top: 1.3em; }
#result .sheet { position: relative; }
#load { display: grid; place-content: center; text-align: center; background: var(--board2); gap: 1em; }
#load b { font: 400 5em/1 var(--fd); } #load span { font: 400 1.5em var(--fh); opacity: .9; }
#load .bar { width: 16em; margin: 0 auto; background: rgba(244, 239, 226, .2); box-shadow: none; height: .5em; } #load .bar i { background: var(--yellow); transition: width .3s; }
#note { position: absolute; left: 50%; top: 9.5em; transform: translateX(-50%); background: rgba(29, 31, 35, .85); padding: .5em 1em; border-radius: .4em; font: 500 1em var(--fb); opacity: 0; transition: opacity .3s; pointer-events: none; }
#note.on { opacity: 1; }
#how, #set, #rank { z-index: 5; } #load { z-index: 9; } #note { z-index: 8; }
.lb li.none { display: block; border: 0; font: 500 .98em/1.5 var(--fb); color: var(--mute); }
#app button:disabled { opacity: .45; cursor: default; }
@media (max-width: 760px) {
  #menu { grid-template-columns: 1fr; background: rgba(22, 26, 28, .78); overflow: auto; }
  .m-l { padding: calc(var(--vh) * 4) 16px 0 max(16px, env(safe-area-inset-left)); gap: 1.4em; } .logo { font-size: calc(var(--vh) * 20); }
  .m-r { width: auto; margin: 1.4em 16px calc(var(--vh) * 4); justify-self: stretch; }
  .res { grid-template-columns: 1fr; } .h-tc { width: calc(var(--vw) * 34); } .keys { display: none; } .logo-desc { display: none; }
  #app.touch .h-bc { bottom: 12.4em; width: calc(var(--vw) * 92); }
}
@media (max-height: 430px) and (min-width: 761px) {
  .logo { font-size: calc(var(--vh) * 27); } .logo-desc { display: none; } .logo-sub { margin-top: 1em; }
  .m-l { padding-top: calc(var(--vh) * 5); padding-bottom: calc(var(--vh) * 4); } .nav button { line-height: 1.22 !important; }
  .m-r { margin-bottom: calc(var(--vh) * 4); } .card .lb { display: none; } .keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { #app * { animation-duration: .01s !important; transition-duration: .01s !important; } }

/* Clear instruments over both bright classrooms and dark late-game rooms. */
.h-tl, .h-tr { padding: .45em .2em; text-shadow: 0 2px 2px #102c35, 0 0 .6em #102c3580; }
.h-tl { left: 1.7em; top: 1.5em; min-width: 12.8em; }
.h-tr { right: 1.7em; top: 1.5em; }
.h-tl .time { font-size: 3.6em; }
.h-tl .fsplit { width: 12em; font-size: .88em; }
.h-tc { top: 2.2em; }
.sec { display: inline-block; padding: .35em 1em; border-radius: 2em; background: #15313cc7; font-size: .85em; letter-spacing: .09em; }
.h-bl, .h-br { padding: .6em .2em; text-shadow: 0 2px 2px #102c35, 0 0 .6em #102c3580; }
#hud::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #102c3566, transparent 22%, transparent 76%, #102c3577); }
.card .medal:empty { display: none; }
.h-br .keys { font-size: .78em; }
.h-bl .kmh .num { font-size: 4.4em; }
.h-bl .segs b { height: .8em; width: .43em; }
.h-bc { bottom: 2em; width: min(38em, calc(var(--vw) * 43)); }
.pa { font-size: .9em; }
.pip { width: 1.8em; height: 1.8em; font-size: 1em; }
#menu .strip { gap: .25em; margin-top: .7em; }
#menu .strip button { border: 1px solid #e7d7a52b; border-radius: .12em; background: #173336aa !important; font-size: .95em !important; }
#menu .strip button.on { background: #efc273 !important; border-color: #fbe7b2; color: #173336 !important; }
#menu .strip-n { font-size: .7em; color: #dce2cd; }
.dim { background: #0d252ee0; backdrop-filter: blur(8px); }
.sheet { border-radius: .4em; border-top: .3em solid #e8b65c; }
#load { background: radial-gradient(ellipse at 70% 25%, #315951, #102f37 70%); }
#load b { color: #f7e7c2; transform: rotate(-5deg); }
#app.portrait { font-size: calc(var(--vw) * 2.5); }
.portrait #menu { grid-template-columns: 1fr; background: linear-gradient(90deg, #102c36f0, #102c3680), linear-gradient(0deg, #102c36f0, transparent); }
.portrait .m-l { padding: 9% 8% 0; justify-content: flex-start; gap: 3em; }
.portrait .logo { font-size: calc(var(--vw) * 25); }
.portrait .m-r { width: 84%; margin: 2em 8% 16%; }
.portrait .menu-corner { display: none; }
.portrait .menu-footer { font-size: .8em; }
.portrait .h-tc { top: 11em; width: 70%; }
.portrait .h-tl .fsplit, .portrait .h-br .keys { display: none; }
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* A school record book beside the miniature classroom. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.account-bar { position: absolute; top: 7%; right: 6%; width: 28em; display: flex; align-items: center; justify-content: flex-end; gap: 1em; flex-wrap: wrap; }
.account-identity { display: flex; align-items: center; gap: .7em; min-width: 0; }
.account-avatar { display: grid; place-items: center; flex: 0 0 2.5em; height: 2.5em; border: 1px solid #e7d2a666; border-radius: 50%; background: #173638ed; color: #f2c575; font: 700 1em var(--fb); }
.account-identity > div { min-width: 0; }
.account-identity small { display: block; font: 500 .65em var(--fb); color: #eec77e; text-shadow: 0 1px 5px #15343b; }
.account-identity b { display: block; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .95em var(--fb); color: #fff4d8; text-shadow: 0 1px 6px #15343b; }
#app .google-btn { display: inline-flex; justify-content: center; align-items: center; gap: .7em; padding: .7em 1.05em; background: #fffdf6; color: #253a3e; border: 1px solid #cfc8b8; border-radius: .3em; font: 600 .9em var(--fb); box-shadow: 0 .15em .45em #071c2b18; }
.google-btn svg { width: 1.4em; height: 1.4em; flex-shrink: 0; }
#app .google-btn:hover { background: #fff2d4; }
#app .google-btn:focus-visible, #app .account-logout:focus-visible, .leader-heading button:focus-visible, .close-icon:focus-visible { outline: 2px solid #d7a443; outline-offset: 4px; }
.account-logout { border-bottom: 1px solid #f8e6bc77 !important; color: #ffeed0; padding: .3em 0 !important; font: 500 .8em var(--fb) !important; }
.account-bar p { flex-basis: 100%; text-align: right; margin: -.35em 0 0; font: 400 .72em/1.6 var(--fb); color: #fff3d6; text-shadow: 0 1px 6px #0a2833, 0 0 1em #0a2833; }
#menu .m-r { width: min(26em, calc(var(--vw) * 31)); margin-bottom: calc(var(--vh) * 11); }
#menu .card { background: #143638ed; padding: 1.25em 1.5em 1.1em; border-bottom: 0; border-radius: .35em .35em 0 0; }
#menu .card h2 { font-size: 2.65em; margin-top: .3em; }
#menu .card .rec { margin: .85em 0 1.1em; }
#menu .card .rec div b.no { font-size: .84em; }
#menu .strip { margin-top: .6em; }
#menu .strip-n { font-size: .62em; opacity: .65; }
.hall-of-fame { position: relative; background: #f3e9d2; color: #294346; padding: 1.2em 1.5em .85em; border-radius: 0 0 .35em .35em; box-shadow: 0 1em 2em #071f2c40; background-image: repeating-linear-gradient(180deg, transparent 0 1.95em, #34575b08 1.95em 2em); }
.hall-of-fame::before { content: ''; position: absolute; left: 1.5em; right: 1.5em; top: 0; border-top: 1px dashed #31555055; }
.leader-heading { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .7em; }
.leader-heading small { font: 600 .65em var(--fn); letter-spacing: .16em; color: #8d7152; }
.leader-heading h3 { font: 400 1.5em var(--fd); margin: .14em 0 0; }
.leader-heading button { font: 500 .72em var(--fb) !important; border-bottom: 1px solid #a08b62 !important; padding: .35em 0 !important; }
.hall-of-fame .lb li { padding: .5em 0; font-size: .9em; }
.hall-of-fame .lb li.none { padding: .7em 0 1em; min-height: 3.8em; color: #60716b; font-size: .88em; }
.lb li { grid-template-columns: 2em minmax(0, 1fr) auto; }
.lb li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb li > span small { display: block; font: 400 .67em var(--fb); color: #73817b; margin-top: .2em; }
.lb li em { display: inline-block; margin-left: .6em; padding: .1em .4em; background: #d4e3d4; color: #375f53; font: 600 .65em var(--fb); border-radius: .2em; }
.lb li.podium i { color: #99662e; }
.lb li.me { background: #dce6d4; border-radius: .2em; }
.my-standing { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding-top: .8em; margin-top: .5em; border-top: 1px solid #a6957444; font: 500 .67em var(--fb); }
.my-standing b { font-weight: 700; color: #527155; }
.nav-secondary button span { color: #e9b968; margin-left: .5em; }
.rank-sheet { width: min(52em, calc(var(--vw) * 92)); padding: 2.2em 2.7em; background: #f4ecd9; border-top: .3em solid #bd914e; }
.rank-heading { display: flex; align-items: center; justify-content: space-between; }
.rank-heading .eyebrow { display: block; font: 500 .8em var(--fb); color: #8a7051; margin-bottom: .8em; }
.rank-heading h3 { font-size: 2.6em; margin: 0; }
.close-icon { padding: .1em .4em !important; font: 400 2em/1 var(--fb) !important; color: #52655e; }
.rank-description { margin: .8em 0 1.6em; font: 400 .93em/1.65 var(--fb); color: #6a786d; }
.rank-controls { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.rank-controls .seg button { font-size: .85em !important; border-radius: .2em; }
.rank-stage { display: flex; align-items: center; gap: .7em; font: 500 .8em var(--fb); color: #6b7669; }
.rank-stage select { min-width: 8.3em; padding: .5em .65em; border: 1px solid #b9b8a5; border-radius: .2em; background: #fffbf0; color: #304e4b; font: 600 1em var(--fb); }
.rank-summary { display: flex; align-items: baseline; gap: 1em; margin: 1.5em 0 1em; padding: .9em 1.2em; background: #234d48; color: #fff3d7; border-left: .25em solid #e3b45f; }
.rank-summary > span:first-child { font: 500 .8em var(--fb); opacity: .8; }
.rank-summary b { font: 700 1.8em var(--fn); color: #f3c96b; }
#rPersonal { margin-left: auto; font: 400 .8em var(--fb); }
.rank-columns { display: grid; grid-template-columns: 2.9em 1fr auto; padding: .8em .5em; border-bottom: 1px solid #405c5355; font: 600 .7em var(--fb); color: #77816f; }
.rank-list { max-height: calc(var(--vh) * 31); min-height: 9em; overflow-y: auto; overscroll-behavior: contain; }
.rank-list li { padding: .75em .4em; font-size: 1.06em; }
.rank-list li.none { padding: 2.5em 1em; text-align: center; color: #68796b; }
.rank-actions { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; margin-top: 1em; }
.rank-actions .btn { font: 600 .8em var(--fb) !important; padding: .8em 1em !important; box-shadow: none; border: 1px solid #c2bea7 !important; border-radius: .25em; }
.rank-actions p { flex: 1; margin: 0; font: 400 .77em/1.5 var(--fb); color: #647568; }
.rank-footnote { margin-top: 1.5em; padding-top: .85em; border-top: 1px dashed #a5ac95; text-align: right; font: 400 .68em var(--fb); color: #7d8473; }
.name label { grid-column: 1 / -1; font: 600 .8em var(--fb); color: #6c7669; }
.name .btn { font-size: 1.05em !important; }
.result-nickname { font: 400 .8em var(--fb); color: #647568; }
.result-nickname b { display: block; margin-top: .35em; font-size: 1.3em; color: #294e48; }
.field-hint { display: block; font: 400 .65em var(--fb); margin-top: .5em; color: var(--mute); }
#app.portrait { font-size: calc(var(--vw) * 3.1); }
.portrait #menu { display: flex; flex-direction: column; overflow-y: auto; touch-action: pan-y; }
.rank-list, .sheet { touch-action: pan-y; }
.portrait .account-bar { position: relative; order: -1; top: auto; right: auto; width: auto; margin: 2.5em 8% 0; justify-content: space-between; }
.portrait .account-bar p { text-align: left; }
.portrait .m-l { flex-shrink: 0; padding-top: 3em; gap: 2em; }
.portrait #menu .m-r { width: 84%; margin: 3em 8% 0; flex-shrink: 0; }
.portrait .menu-footer { position: relative; bottom: auto; left: auto; right: auto; margin: 2.5em 8%; font-size: .72em; }
.portrait #menu::before { display: none; }
.portrait .rank-sheet { padding: 1.5em; }
.portrait .rank-controls { flex-wrap: wrap; }
.portrait .rank-summary { flex-wrap: wrap; gap: .6em; }
.portrait #rPersonal { flex-basis: 100%; }
.portrait .rank-list { max-height: calc(var(--vh) * 35); }