@font-face{font-family:Titillium;src:url('./assets/fonts/TitilliumWeb-Light.ttf')}@font-face{font-family:Titillium;src:url('./assets/fonts/TitilliumWeb-Regular.ttf');font-weight:400}@font-face{font-family:Titillium;src:url('./assets/fonts/TitilliumWeb-Bold.ttf');font-weight:700}
:root{--bg:#0b1027;--blue:#091f51;--panel:#121830;--control:#2b354d;--text:#ebebeb;--dim:#a9acb7;--orange:#ec6200;--yellow:#ffaa00;--selection:linear-gradient(130deg,#ec6200,#ffaa00)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{font-family:Titillium,'Segoe UI',sans-serif}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}.shell{position:relative;min-height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#091f51,#0b1027 70%)}.wallpaper{position:absolute;inset:0;background-position:center top;background-size:cover;opacity:.26;filter:blur(7px) saturate(.9);transform:scale(1.04);transition:background-image .3s}.wallpaper:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b1027 1%,rgba(11,16,39,.75) 55%,#0b1027)}.topbar{position:relative;height:110px;display:flex;justify-content:space-between;align-items:center;padding:0 6vw;background:linear-gradient(100deg,#091f51,rgba(11,16,39,.78));z-index:2}.preset-wrap{display:flex;align-items:center;gap:22px;min-width:0}.brand{display:grid;place-items:center;color:#fff;background:var(--selection);width:49px;height:49px;transform:rotate(45deg);font-size:28px;flex:none}.brand::first-letter{transform:rotate(-45deg)}.presets{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.preset{border:0;border-bottom:3px solid transparent;background:none;font-size:22px;font-weight:700;padding:10px 18px;white-space:nowrap}.preset:hover,.preset.active{color:var(--yellow);border-color:var(--orange);background:#0b102766}.system{display:flex;align-items:center;gap:18px;font-size:22px}.system button{border:0;background:transparent;font-size:32px;min-width:48px;height:48px}.system button:hover{color:var(--yellow)}.middle{position:relative;z-index:1;height:calc(100dvh - 210px);display:flex;overflow:hidden}.filters{width:300px;flex:none;padding:28px 22px;background:rgba(18,24,48,.58);border-right:1px solid #ffffff1c;overflow-y:auto}.filters h2{font-size:28px;margin:0 0 25px;font-weight:400}.search-label{display:block;font-size:18px;color:var(--dim);margin-bottom:25px}.search-label input{margin-top:8px;width:100%;padding:10px 12px;border:2px solid #5c6681;background:#0b1027;color:#fff;outline:none}.search-label input:focus{border-color:var(--orange)}.filter-group{margin-bottom:27px}.filter-group>span{display:block;font-size:18px;color:var(--dim);padding:0 8px 10px}.filter-choice{display:flex;width:100%;align-items:center;justify-content:space-between;border:3px solid transparent;background:transparent;text-align:left;font-size:20px;padding:9px 10px;margin:3px 0}.filter-choice:hover,.filter-choice.active{background:#121830;border-image:var(--selection) 1}.filter-choice.active{color:var(--yellow)}.filter-choice b{font-weight:400;color:#a0a8bc}.library{flex:1;min-width:0;padding:22px clamp(25px,3vw,50px);overflow-y:auto}.library-heading{display:flex;align-items:baseline;gap:22px;margin:0 0 25px}.library-heading h1{font-size:30px;font-weight:400;margin:0}.library-heading span{font-size:17px;color:var(--dim)}.cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:25px;padding:8px 5px 40px}.cover{position:relative;aspect-ratio:2/3;border:3px solid #2b354d;border-radius:3px;background:#11172b;overflow:visible;padding:0;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;transform-origin:center;transition:transform .15s;box-shadow:0 8px 25px #0008}.cover:hover,.cover.selected,.cover:focus-visible{transform:scale(1.06);z-index:2;border:5px solid var(--orange);box-shadow:0 0 18px #ec6200,0 10px 25px #0009;outline:0}.cover-art{position:absolute;inset:0;background-size:cover;background-position:center}.cover-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000b,transparent 45%)}.cover-logo{z-index:1;width:80%;max-height:36%;object-fit:contain;align-self:center;margin-bottom:35px;filter:drop-shadow(0 4px 10px #000)}.cover-name{z-index:1;background:#121830;padding:6px 4px;min-height:37px;font-size:18px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.empty{font-size:28px;text-align:center;margin:14vh auto;color:#cbd0db}.bottombar{position:relative;height:100px;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:linear-gradient(100deg,#091f51,rgba(11,16,39,.8))}.bottom-actions,.bottom-help{display:flex;gap:28px;align-items:center}.bottom-actions button{display:flex;gap:9px;align-items:center;background:none;border:2px solid transparent;padding:8px 9px;font-size:22px}.bottom-actions button:hover{border-image:var(--selection) 1;background:#121830}.bottom-help{font-size:19px;color:#d3d5de}.bottom-help span{display:flex;align-items:center;gap:5px}kbd{display:inline-grid;place-items:center;min-width:27px;height:27px;border-radius:50%;background:#ec6200;color:#fff;font:700 15px Titillium,sans-serif;padding:0 5px}.bottom-help kbd{background:#45516c}.overlay{position:absolute;inset:0;z-index:10;background:radial-gradient(ellipse at 50% 20%,#091f51,#0b1027 70%)}.overlay[hidden],.menu[hidden]{display:none}.detail-backdrop{position:absolute;inset:0;background-size:cover;background-position:center top;opacity:.53}.detail-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b1027 0%,rgba(11,16,39,.93) 33%,transparent 83%)}.back{position:absolute;top:25px;left:6vw;z-index:2;background:#121830af;border:2px solid #8690a8;padding:3px 18px;font-size:30px}.back span{font-size:20px}.back:hover{border-color:var(--orange)}.detail-content{position:absolute;left:9%;right:9%;bottom:105px;display:grid;grid-template-columns:minmax(180px,310px) 1fr;gap:35px;align-items:start}.detail-cover{position:relative;aspect-ratio:2/3;background-size:cover;background-position:center;border:3px solid #2b354d;border-radius:3px;box-shadow:0 15px 35px #0009;display:flex;align-items:end;justify-content:center}.detail-cover:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(0deg,#000b,transparent)}.detail-cover img{position:relative;z-index:1;width:80%;max-height:40%;object-fit:contain;margin-bottom:20%}.detail-info{max-height:55vh;overflow-y:auto}.detail-info h2{font-size:40px;margin:0 0 20px;font-weight:700}.meta{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:24px}.meta div{display:flex;flex-direction:column;min-width:100px;gap:4px;font-size:18px}.meta strong{font-size:20px}.detail-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:23px}.detail-actions a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:2px solid #77839d;background:#2b354d;color:#fff;font-size:20px;min-width:175px;padding:9px 15px}.detail-actions a:first-child{background:linear-gradient(120deg,#c94d00,#ec6200);border-color:#ffaa00}.detail-actions a:hover{box-shadow:0 0 14px #ec6200}.detail-info p{font-size:18px;line-height:1.45}.detail-footer{position:absolute;bottom:0;height:78px;background:linear-gradient(100deg,#091f51,#0b1027cc);width:100%;display:flex;justify-content:flex-end;align-items:center;gap:24px;padding-right:6vw;font-size:19px}.detail-footer span{display:flex;align-items:center;gap:7px}.menu{position:absolute;z-index:20;right:0;top:0;bottom:0;width:min(400px,90vw);background:linear-gradient(#091f51,#000623);padding:50px 30px;box-shadow:-20px 0 50px #000a}.menu h2{font-size:32px}.menu button,.menu a{display:block;text-align:left;width:100%;padding:14px;border:2px solid transparent;background:none;color:white;text-decoration:none;font-size:22px}.menu button:hover,.menu a:hover{border-color:var(--orange)}#menu-close{position:absolute;top:10px;right:20px;width:auto}
@media(max-width:850px){.topbar{height:75px;padding:0 18px}.brand{width:36px;height:36px;font-size:19px}.preset-wrap{gap:10px}.preset{font-size:17px;padding:9px}.system{gap:5px}.system time{display:none}.middle{height:calc(100dvh - 150px)}.filters{width:190px;padding:20px 12px}.filters h2{font-size:22px}.filter-choice{font-size:16px}.library{padding:20px}.cover-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:17px}.bottombar{height:75px;padding:0 17px}.bottom-actions{gap:4px}.bottom-actions button{font-size:16px}.bottom-help{display:none}.detail-content{left:5%;right:5%;grid-template-columns:190px 1fr;gap:18px}.detail-info h2{font-size:28px}.meta{gap:10px}.meta div,.meta strong{font-size:15px}}
@media(max-width:600px){.shell{height:100dvh}.topbar{height:68px}.presets{max-width:calc(100vw - 135px)}.preset{font-size:15px}.system button{font-size:23px;min-width:32px}.middle{height:calc(100dvh - 133px)}.filters{display:none}.library{padding:17px 14px}.library-heading h1{font-size:23px}.cover-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bottombar{height:65px}.bottom-actions button{font-size:14px;gap:4px;padding:3px}.bottom-actions kbd{min-width:22px;height:22px;font-size:12px}.detail-content{bottom:68px;left:5%;right:5%;display:block}.detail-cover{width:100px;float:left;margin:0 16px 8px 0}.detail-info{max-height:60vh}.detail-info h2{font-size:25px}.detail-actions a{font-size:15px;min-width:130px}.detail-info p{font-size:15px}.detail-footer{height:55px}.back{top:9px}.meta{margin-bottom:12px}}

[hidden]{display:none!important}
/* ARCANUM: negro profundo, oro cálido y el emblema oficial */
:root{--bg:#080806;--blue:#17130c;--panel:#17150f;--control:#302a1e;--text:#f0ede5;--dim:#b5aa95;--orange:#b68b4b;--yellow:#e6c887;--selection:linear-gradient(130deg,#76552a,#d9af68)}
.shell,.overlay{background:radial-gradient(ellipse at 49% 7%,#211a0f,#080806 67%)}
.wallpaper{opacity:.15;filter:blur(11px) saturate(.65)}
.wallpaper:after{background:linear-gradient(90deg,#080806 1%,rgba(8,8,6,.8) 55%,#080806)}
.topbar,.bottombar,.detail-footer{background:linear-gradient(100deg,#17130b,rgba(8,8,6,.95));border-color:#6d552d55}
.topbar{border-bottom:1px solid #ad874544}
.bottombar{border-top:1px solid #ad874544}
.filters{background:rgba(20,18,13,.81);border-right-color:#ad874533}
.preset:hover,.preset.active,.filter-choice:hover,.filter-choice.active{background:#2b231566}
.preset.active{color:var(--yellow)}
.search-label input{background:#100e0a;border-color:#66583d}
.filter-choice b{color:#b7a482}
.cover{background:#16130d;border-color:#51442e}
.cover:hover,.cover.selected,.cover:focus-visible{border-color:#dfbb79;box-shadow:0 0 18px #a9783388,0 10px 25px #0009}
.cover-name{background:#17140e}
.detail-backdrop:after{background:linear-gradient(0deg,#080806 0%,rgba(8,8,6,.94) 33%,transparent 83%)}
.detail-cover{border-color:#8b7247}
.detail-actions a{background:#332a19}
.detail-actions a:first-child{background:linear-gradient(120deg,#775327,#c59852);border-color:#edcc8e;color:#fff}
.detail-actions a:hover{box-shadow:0 0 14px #b68b4b88}
.menu{background:linear-gradient(#241d10,#080806);border-left:1px solid #8f713e}
kbd{background:#a67b3f;color:#100d07}.bottom-help kbd{background:#55452b;color:#f3e2c3}
.availability{display:inline-flex;align-items:center;min-height:48px;padding:8px 16px;border:2px solid #756544;color:#e6ca91;background:#271e0f;font-size:20px}
.detail-cover img[hidden]{display:none!important}
.preset-wrap{flex:1;min-width:0;gap:27px}
.brand-slot{display:flex;align-items:center;justify-content:center;flex:none;width:285px;height:90px;padding:3px 26px 3px 0;border-right:1px solid #af874b66;background:radial-gradient(ellipse at 42% 50%,#ba873820,transparent 67%)}
.brand-logo{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 10px #b78b3042)}
.presets{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.presets::-webkit-scrollbar{display:none}
.system{flex:none;margin-left:12px}
.filters,.library{scrollbar-width:thin;scrollbar-color:#6e5837 transparent}
.filters::-webkit-scrollbar,.library::-webkit-scrollbar{width:7px}
.filters::-webkit-scrollbar-thumb,.library::-webkit-scrollbar-thumb{background:#6e5837;border-radius:8px}
.filters::-webkit-scrollbar-track,.library::-webkit-scrollbar-track{background:transparent}
.bottom-actions button:disabled{opacity:.36;cursor:not-allowed}.bottom-actions button:disabled:hover{border-color:transparent;background:none}
@media(max-width:1250px){.topbar{padding:0 4vw}.preset-wrap{gap:16px}.brand-slot{width:225px;height:76px;padding-right:16px}.preset{font-size:19px;padding:9px 11px}.system{gap:8px;font-size:19px}.system button{font-size:26px;min-width:38px}}
@media(max-width:850px){.brand-slot{width:165px;height:58px;padding-right:12px}}
@media(max-width:700px){.brand-slot{width:125px;height:46px;padding-right:8px}.preset-wrap{gap:9px}}

.shell.apps-view .filters{display:none}.shell.apps-view .library{padding-left:clamp(28px,6vw,100px);padding-right:clamp(28px,6vw,100px)}

/* Cabecera: el emblema ocupa la misma columna que los filtros */
.topbar{padding-left:0}
.preset-wrap{gap:24px}
.brand-slot{width:300px;height:110px;padding:7px 8px;border-right:1px solid #af874b66;background:radial-gradient(ellipse at center,#ba873820,transparent 69%)}
.brand-logo{width:100%;height:100%;object-fit:contain}
@media(max-width:1250px){.topbar{padding-left:0}.brand-slot{width:300px;height:110px;padding:7px 8px}}
@media(max-width:850px){.brand-slot{width:230px;height:88px;padding:6px 5px}}
@media(max-width:700px){.brand-slot{width:150px;height:64px;padding:4px}.preset-wrap{gap:8px}}

@media(max-width:1400px){.topbar{padding-right:3vw}.preset-wrap{gap:14px}.preset{font-size:19px;padding:9px 10px}.system{gap:8px;font-size:19px}.system button{font-size:26px;min-width:38px}}