@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Mono:wght@500&family=Inter:wght@700;900&display=swap');
:root{--lime:#c9ff46;--orange:#ff6b35;--violet:#c15cff;--cream:#f4eedf}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--cream);font-family:Inter,sans-serif;background:radial-gradient(circle at 50% 5%,#35234a,#100c18 55%,#050507)}button,a{cursor:pointer}header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 max(14px,4vw);border-bottom:1px solid #ffffff18;background:#08070dac}header a,header button{color:#8c8496;font:500 8px DM Mono;text-decoration:none;letter-spacing:1px}header b{font-size:17px;font-style:italic}header i{color:var(--violet)}header button{border:1px solid #4e4658;background:#0e0b14;padding:7px;border-radius:4px}main{width:min(1100px,95vw);margin:auto}.title{text-align:center;padding:23px 0 16px}.title small{color:var(--violet);font:500 8px DM Mono;letter-spacing:3px}.title h1{font:400 clamp(43px,7vw,70px)/1 Anton;margin:2px;text-shadow:5px 5px #000}.title em{color:var(--lime);font-style:normal}.title p{margin:0;color:#958da0;font-size:10px}.cabinet{border:1px solid #51465e;border-radius:10px;background:#0d0b12;overflow:hidden;box-shadow:0 25px 70px #000b}.hud{height:48px;display:flex;align-items:center;justify-content:space-around;border-bottom:1px solid #51465e;color:#746c7e;font:500 8px DM Mono;letter-spacing:1px}.hud span{display:flex;gap:7px;align-items:center}.hud b{color:var(--lime);font-size:16px}.stage{position:relative;min-height:510px;padding:14px;background:linear-gradient(#17111fdd,#09070ddd),repeating-linear-gradient(45deg,transparent 0 35px,#bf5cff0a 36px)}.board{width:100%;min-height:482px;display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:8px;align-content:center;justify-content:center;margin:auto}.card{position:relative;min-width:0;aspect-ratio:1.15;border:0;padding:0;background:transparent;perspective:500px}.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .32s cubic-bezier(.2,.8,.2,1)}.card.flipped .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:grid;place-items:center;border:1px solid #5b4e67;border-radius:7px;overflow:hidden;backface-visibility:hidden}.card-back{background:radial-gradient(circle,#492963,#17101f 67%);box-shadow:inset 0 0 0 3px #100b16,0 3px 8px #0008}.card-back:before{content:'B';display:grid;place-items:center;width:45%;aspect-ratio:1;border:2px solid var(--lime);border-radius:50%;color:var(--lime);font:400 clamp(17px,3vw,34px) Anton;box-shadow:0 0 15px #c9ff4655}.card-front{transform:rotateY(180deg);grid-template-rows:1fr auto;background:linear-gradient(#f0e9db,#c7bcaa);padding:4px;color:#171019}.card-front img{width:100%;height:100%;min-height:0;object-fit:contain}.card-front span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font:900 clamp(5px,.78vw,9px) Inter;padding:2px 1px}.card.matched .card-front{border-color:var(--lime);box-shadow:inset 0 0 15px #c9ff4677,0 0 12px #c9ff4655}.overlay,.tutorial{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;background:#0d0a12f4;backdrop-filter:blur(5px);text-align:center}.overlay.hidden,.tutorial.closed{display:none}.vault-mark{display:grid;place-items:center;width:76px;height:76px;border:3px solid var(--lime);border-radius:15px;background:#241532;color:var(--lime);font-size:42px;transform:rotate(-4deg);box-shadow:0 0 25px #c9ff4633}.overlay>small,.tutorial>small{margin-top:9px;color:var(--violet);font:500 8px DM Mono;letter-spacing:3px}.overlay h2{font:400 33px Anton;margin:2px}.overlay>p{max-width:540px;margin:0 10px 9px;color:#a39aaa;font-size:10px;line-height:1.5}.level-map{display:flex;gap:4px;margin-bottom:9px}.level-map i{display:grid;place-items:center;width:24px;height:19px;border:1px solid #4b4254;border-radius:3px;color:#746d7a;font:500 7px DM Mono;font-style:normal}.level-map i.done{background:var(--lime);border-color:var(--lime);color:#0a0b08}.level-map i.current{border-color:var(--violet);color:white;box-shadow:0 0 8px #c15cff66}.leaders{width:min(560px,96%);display:grid;grid-template-columns:150px 1fr;margin:3px 0 10px;padding:7px 10px;border:1px solid #453b50;border-radius:6px;background:#09070d}.leaders>div{display:flex;flex-direction:column;justify-content:center;text-align:left}.leaders>div b{color:var(--lime);font:500 9px DM Mono}.leaders>div small{color:#665e6e;font:500 7px DM Mono}.leaders ol{counter-reset:r;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:0;padding:0}.leaders li{counter-increment:r;display:grid;grid-template-columns:20px 1fr auto;padding:3px;border-bottom:1px solid #28212f;color:#91889b;font:500 7px DM Mono}.leaders li:before{content:counter(r,decimal-leading-zero);color:#574f5e}.leaders li b{color:white}.leaders li span{color:var(--orange)}.primary{min-width:205px;padding:10px 20px;border:0;border-radius:5px;background:var(--lime);color:#0a0c08;font-weight:900;box-shadow:0 4px #708d2b}.secondary{margin-top:9px;padding:7px 14px;border:1px solid #51465e;border-radius:4px;background:#100c16;color:#aaa0b3;font:500 8px DM Mono;letter-spacing:1px}#scoreForm{width:min(350px,90%);margin-bottom:9px}#scoreForm input{width:62%;padding:9px;border:1px solid #51465e;border-radius:4px 0 0 4px;background:#08060b;color:white}#scoreForm button{width:38%;padding:10px 3px;border:0;background:var(--orange);color:white;font-weight:900}#scoreForm small{display:block;min-height:12px;color:#ff7a73;font:500 8px DM Mono}.tutorial-skip{position:absolute;right:12px;top:10px;border:0;background:none;color:#857d8e;font:500 8px DM Mono}.tutorial-slides{position:relative;width:min(530px,94%);height:245px}.tutorial-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateX(20px);pointer-events:none;transition:.25s}.tutorial-slide.active{opacity:1;transform:none;pointer-events:auto}.tutorial-slide>b{font:400 29px Anton}.tutorial-slide p{max-width:410px;margin:3px;color:#a39aaa;font-size:10px;line-height:1.5}.demo-pair{display:flex;gap:10px}.demo-pair i{width:105px;height:95px;background:var(--img) center/contain no-repeat,#eee5d6;border:3px solid #1b1422;border-radius:8px}.demo-combo,.demo-grid,.demo-clock{display:grid;place-items:center;width:230px;height:110px;color:var(--lime);font:400 35px Anton;text-shadow:0 0 15px #c9ff4666}.demo-grid i{color:var(--violet);font-style:normal}.demo-clock{font-size:27px;line-height:1}.demo-clock strong{color:var(--orange);font-size:35px}.tutorial-nav{display:flex;align-items:center;gap:14px;margin-bottom:10px}.tutorial-nav>button{width:36px;height:34px;border:1px solid #51465e;border-radius:4px;background:#100c16;color:white;font-size:20px}.tutorial-nav>div{display:flex;gap:7px}.tutorial-nav>div button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#51485a}.tutorial-nav>div button.active{background:var(--lime);box-shadow:0 0 8px var(--lime)}nav{display:flex;justify-content:center;gap:8px;padding:13px}nav a{padding:7px;color:#756c80;text-decoration:none;font:500 8px DM Mono}nav a:hover{color:var(--lime)}
@media(max-width:650px){header{height:45px;padding:0 9px}header b{font-size:12px}header a{font-size:6px}.title{padding:12px 0 9px}.title h1{font-size:39px}.title p{font-size:8px}main{width:100%}.cabinet{border-radius:0;border-inline:0}.hud{height:42px}.hud span{font-size:6px;gap:3px}.hud b{font-size:12px}.stage{min-height:calc(100svh - 171px);padding:6px}.board{min-height:calc(100svh - 183px);gap:4px}.board.many{grid-template-columns:repeat(5,1fr)!important}.card{aspect-ratio:1.03}.card-face{border-radius:4px}.card-front{padding:2px}.card-front span{font-size:5px}.overlay,.tutorial{padding:8px}.vault-mark{width:58px;height:58px;font-size:31px}.overlay h2{font-size:28px}.overlay>p{font-size:9px}.leaders{grid-template-columns:1fr;margin:2px 0 8px}.leaders>div{display:none}.leaders ol{gap:0 8px}.level-map i{width:20px}.tutorial-slides{height:230px}.demo-pair i{width:90px;height:82px}.tutorial-slide>b{font-size:26px}.tutorial-nav>button{width:42px;height:38px}}
@media(max-width:380px) and (max-height:700px){.title{display:none}.stage{min-height:calc(100svh - 87px)}.board{min-height:calc(100svh - 99px)}.vault-mark{display:none}.overlay h2{font-size:24px}.leaders li{padding:2px}.tutorial-slides{height:205px}.demo-pair i{width:76px;height:70px}}

/* Fit every vault inside the cabinet by constraining both grid axes. */
.stage{display:flex;align-items:center}.board{height:min(482px,calc(var(--rows,2)*145px));min-height:0;max-width:min(100%,calc(var(--cols,3)*170px));grid-template-rows:repeat(var(--rows,2),minmax(0,1fr));align-content:stretch}.card{height:100%;aspect-ratio:auto}
@media(max-width:650px){.stage{align-items:center}.board,.board.many{height:min(calc(100svh - 183px),calc(var(--mobile-rows,2)*105px));min-height:0;max-width:min(100%,calc(var(--mobile-cols,3)*125px));grid-template-columns:repeat(var(--mobile-cols,3),minmax(0,1fr))!important;grid-template-rows:repeat(var(--mobile-rows,2),minmax(0,1fr))}.card-back:before{width:min(45%,32px)}}
@media(max-width:380px) and (max-height:700px){.board,.board.many{height:min(calc(100svh - 99px),calc(var(--mobile-rows,2)*92px))}}

@media(max-width:650px){body{min-height:100dvh;overflow-x:hidden}header{height:48px;padding:env(safe-area-inset-top) 10px 0}header b{font-size:11px}.title{display:none}.cabinet{border-top:0}.hud{height:42px;position:relative;z-index:2}.stage{min-height:calc(100dvh - 90px);padding:5px}.board,.board.many{height:min(calc(100dvh - 100px),calc(var(--mobile-rows,2)*92px));max-width:min(100%,calc(var(--mobile-cols,3)*108px));gap:3px}.card-face{border-radius:4px}.card-front span{font-size:clamp(4px,1.45vw,6px);line-height:1.1}.overlay,.tutorial{padding:10px 8px;overflow-y:auto;overscroll-behavior:contain}.vault-mark{width:52px;height:52px;font-size:28px}.overlay h2{font-size:26px}.overlay>p{font-size:9px;line-height:1.4}.level-map{gap:3px;max-width:100%}.level-map i{width:19px;height:18px}.leaders{width:98%;max-height:150px;padding:6px 8px}.leaders li{font-size:7px;padding:2px}.primary{min-height:42px}.secondary{min-height:38px}.tutorial-slides{height:min(52dvh,235px);min-height:185px}.tutorial-slide>b{font-size:24px}.tutorial-slide p{font-size:9px}.demo-pair i{width:78px;height:70px}.demo-combo,.demo-grid,.demo-clock{height:88px;font-size:30px}nav{overflow-x:auto;justify-content:flex-start;padding:8px;white-space:nowrap}nav a{flex:0 0 auto;min-height:38px;display:flex;align-items:center}}
@media(max-width:380px) and (max-height:700px){.stage{min-height:calc(100dvh - 90px)}.board,.board.many{height:min(calc(100dvh - 100px),calc(var(--mobile-rows,2)*80px))}.vault-mark{display:none}.leaders{max-height:120px}.tutorial-slides{height:min(49dvh,205px);min-height:165px}}

#time.danger{color:#ff8260;animation:faultPulse .45s infinite alternate}@keyframes faultPulse{to{color:#fff;text-shadow:0 0 12px #ff3f58}}
@media(max-width:650px){.hud{gap:2px}.hud span{flex-direction:column;gap:0}.hud b{font-size:11px}}