/* OliMatica's page: a hologram look (the build's picture in red light, scan lines) over the site's panels. */
.olim,.olim *{font-variant-ligatures:none!important}   /* Pixelify Sans joins f and i (first) into one odd letter: !important, the font shorthands put it back */
.olim h1 span{color:var(--red2)}
.ohero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;align-items:center;margin:6px 0 10px}
.ohero h1{font-size:54px;line-height:1;margin:12px 0 10px}
.ohero p{color:var(--soft);font-size:16px;max-width:560px;margin:0 0 18px}
.ohero .cta{display:flex;gap:10px;flex-wrap:wrap}
.ohero .amsg{margin-top:16px}
.oart{position:relative;aspect-ratio:16/9;width:100%;border:1px solid var(--edge);background:#0b0b0d;overflow:hidden;
clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}
.oart .ovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.oart:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ff4f5c12 0 1px,transparent 1px 4px);pointer-events:none}

.osteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.osteps>div,.ocontrols>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;overflow:hidden}
/* the picture at the top of each box: a dark window onto the game */
.ovis{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:150px;margin:-16px -18px 14px;padding:12px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 75%,#3a0a10 0,#0b0b0d 75%);overflow:hidden;color:#fff}
.ovis:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ff4f5c10 0 1px,transparent 1px 4px);pointer-events:none}
.ocontrols .ovis{height:112px}
.ovis .ofill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.opick figure{position:relative;flex:none;margin:0;width:30%;aspect-ratio:1;border:1px solid var(--edge);overflow:hidden;background:#000}
.opick figure img{width:100%;height:100%;object-fit:cover;filter:sepia(1) hue-rotate(-50deg) saturate(2.6) brightness(.95)}
.opick figure i{position:absolute;right:5px;top:5px;display:grid;place-items:center;width:22px;height:22px;background:var(--red)}
.opick figure i .ico{width:15px;height:15px;color:#fff}
.opick .oexts{flex:1;width:auto;aspect-ratio:auto;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px 4px;border:1px dashed #ff6b5f99;background:#0b0b0dcc}
.oexts b{font:500 12px var(--px);color:#ffb3ab;text-align:center}
.omake{gap:12px}.ofilecard{display:flex;flex-direction:column;align-items:center;gap:6px;width:42%}
.ofilecard img{width:58px;height:58px;border-radius:12px;box-shadow:0 0 0 1px var(--edge),0 8px 24px #ff38282e}
.ofilecard b{font:500 13px var(--px);text-align:center;line-height:1.25}.ofilecard b span{color:#ff6b5f}
.oarrow{font:600 22px Inter,sans-serif;color:#ff6b5f}
.otoast{display:flex;flex-direction:column;gap:2px;padding:9px 12px;background:#1e1e1fe6;border:2px solid #000;box-shadow:inset 0 0 0 2px #5a5a5a}
.otoast b{font:500 13px var(--px);color:#fff}.otoast small{font:500 11px var(--px);color:#bdbdbd}
.ostart{gap:8px}.ostart img{width:36px;height:36px;image-rendering:pixelated;padding:6px;box-sizing:content-box;background:#ffffff0d;border:1px solid #ffffff1f;opacity:.55}
.ostart img.on{opacity:1;border-color:var(--red);background:#ff38281f;box-shadow:0 0 18px #ff382855}
.ocontrols .oboard{height:auto;min-height:112px;padding:16px 12px}.oboard img{width:324px;max-width:100%;image-rendering:pixelated}
.okeys{gap:22px}.okeys>div{display:flex;align-items:center;gap:6px}.okeys b{font:600 16px Inter,sans-serif;color:#ff6b5f}
.okeys small{margin-left:4px;font:500 14px var(--px);color:#ffb3ab}
.okeys kbd{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;font:600 15px Inter,sans-serif;color:#fff;background:#222226;border:1px solid #ffffff2e;border-bottom-width:4px;border-radius:7px}.okeys kbd.wide{font:500 15px var(--px)}
.otabs{flex-wrap:wrap;gap:4px;padding:16px}.otabs span{font:500 13px var(--px);padding:6px 10px;background:#313131;border:2px solid #000;box-shadow:inset 0 -3px 0 #1f1f1f,inset 0 2px 0 #5c5c5c;color:#e6e6e6}
.otabs span.on{background:#7a1a14;box-shadow:inset 0 -3px 0 #4a0d09,inset 0 2px 0 #b8392e}
.ochecks{gap:8px}.ochecks span{font:500 14px var(--px);padding:4px 10px;background:#0a0a0ecc;border:1px solid #ffffff1a}
.ochecks .miss{color:#ff6858}.ochecks .extra{color:#ffa840}.ochecks .ok{color:#78eb8c}
/* captures of the game taking turns (site.js, [data-cycle]): the boxes of "In the game", the guide's pictures */
.ocontrols .ovis.ocycle{display:block;height:auto;aspect-ratio:2/1;padding:0}
.cslide{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.cslide.on{opacity:1;visibility:visible;transition:opacity .6s}
img.cslide,video.cslide{display:block;object-fit:cover}.cslide.fit{object-fit:contain}
div.cslide{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px}
.ocycle .ostart img{width:44px;height:44px}.ocycle .okeys kbd{min-width:40px;height:40px;font-size:17px}.ocycle .otabs{padding:16px 22px}
.ocontrols .ocycle .oboard{padding:16px 12px}
.cdots{position:absolute;left:50%;bottom:8px;z-index:2;display:flex;gap:6px;padding:5px 7px;background:#0b0b0db8;border-radius:999px;transform:translateX(-50%)}
.cdots button{width:9px;height:9px;padding:0;border:0;border-radius:0;background:#ffffff59;box-shadow:0 0 0 1px #0008;cursor:pointer;transition:width .2s,background .2s}
.cdots button.on{width:20px;background:var(--red2)}

.osteps>div>span{display:grid;place-items:center;width:28px;height:28px;background:var(--red);color:#fff;font:700 14px Inter,sans-serif}
.osteps h3{margin:10px 0 4px;font-size:20px}.osteps p,.ocontrols p{margin:0;color:var(--soft)}
.ocontrols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ocontrols b{font:500 17px var(--px)}
/* the wiki: its button, and under How it works */
.ohero .btn .ico{width:15px;height:15px}
.owiki{display:flex;align-items:center;gap:16px;margin-top:14px;padding:14px 18px;background:var(--glow);border:1px solid var(--edge);border-radius:12px}
.owiki>.ico{width:30px;height:30px;color:var(--red2)}
.owiki p{flex:1;margin:0;color:var(--soft)}.owiki p b{display:block;font:500 18px var(--px);color:var(--text)}
.oplans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.oplans>div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.oplans .pro{border-color:var(--red);box-shadow:0 0 0 1px var(--glow),0 12px 40px var(--glow)}
.oplans b{font:800 14px Inter,sans-serif;letter-spacing:.14em;color:var(--muted)}.oplans .pro b{color:var(--red2)}
.oplans ul{margin:10px 0 14px;padding:0;list-style:none}.oplans li{padding:7px 0;border-bottom:1px solid var(--line);color:var(--soft)}

/* the dashboard */
.oapp{margin-top:22px}
.obar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;color:var(--soft)}
.oplan{font:800 12px Inter,sans-serif;letter-spacing:.14em;padding:4px 10px;border:1px solid var(--line);background:var(--panel2);color:var(--muted)}
.oplan.member{color:var(--red2);border-color:var(--edge);background:var(--glow)}
.oup{margin-left:auto;font:500 15px var(--px)}
.ogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;align-items:start}
.opack,.oadd{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.opack{position:sticky;top:72px;border-color:var(--edge);box-shadow:0 0 0 1px var(--glow)}
.ohead{display:flex;align-items:center;justify-content:space-between}.ohead h2,.opast h2{margin:0}
#ocount{font:700 13px Inter,sans-serif;color:var(--muted)}#ocount.over{color:var(--red2)}
.olabel{display:block;margin:12px 0 4px;color:var(--dim);font:700 10px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}
#oname,#oq{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;color:var(--text);font:inherit;outline:none}
#oname:focus,#oq:focus{border-color:var(--edge);box-shadow:0 0 0 3px var(--glow)}
.oitems,.ofiles,.opacks{list-style:none;margin:12px 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.oitems li,.ofiles li,.opacks li{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.oitems li>div,.ofiles li>div,.opacks li>div{flex:1;min-width:0}
.oitems b,.ofiles b,.opacks b{display:block;font:500 16px var(--px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oitems small,.ofiles small,.opacks small,.ocard small{display:block;color:var(--muted);font-size:12px}
.oitems img{width:44px;height:44px;object-fit:cover;border-radius:6px;flex:none}
.onum{display:grid;place-items:center;flex:none;width:22px;height:22px;background:var(--red);color:#fff;font:700 12px Inter,sans-serif}
.ofileico{flex:none;width:44px;height:44px;border-radius:6px;background:linear-gradient(135deg,var(--deep),var(--red));position:relative}
.ofileico:after{content:"";position:absolute;inset:13px;border:2px solid #fff9;transform:rotate(45deg)}
.oacts{display:flex;gap:4px;flex:none}
.oacts button,.odel{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--soft);cursor:pointer;font:600 14px Inter,sans-serif}
.oacts button:hover:not(:disabled),.odel:hover{border-color:var(--edge);color:var(--text)}.oacts button:disabled{opacity:.35;cursor:default}
.oacts .btn{width:auto;height:auto;padding:6px 12px;font-size:13px;border:0}
.oempty{color:var(--muted);justify-content:center;background:none!important;border-style:dashed!important}
#omake{width:100%;justify-content:center;margin-top:4px}
.oitem{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;width:100%;text-align:left;
background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--text);cursor:pointer;font:inherit}
.oitem:hover,.oitem[aria-expanded=true]{border-color:var(--edge);box-shadow:0 0 0 3px var(--glow)}
.oitem img{grid-row:span 2;width:32px;height:32px;image-rendering:pixelated}.oitem b{font:500 16px var(--px)}.oitem small{color:var(--muted);font-size:12px}
.oitem i{grid-row:span 2;grid-column:3;grid-row-start:1;font-style:normal;color:var(--muted)}
.oitemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-top:8px}
.oitemgrid button{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:7px 4px;color:var(--soft);cursor:pointer;font:600 10.5px Inter,sans-serif;line-height:1.2;text-align:center}
.oitemgrid button:hover{border-color:var(--edge);color:var(--text)}.oitemgrid button.on{border-color:var(--red);background:var(--glow);color:var(--text)}
.oitemgrid img{width:28px;height:28px;image-rendering:pixelated}
.opackitem{width:28px;height:28px;image-rendering:pixelated;flex:none}
.onote{color:var(--muted);font-size:12.5px;margin:12px 0 0}
#omsg{margin-top:10px}
.otabs{display:flex;gap:6px;margin-bottom:12px}
.otabs button{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px;color:var(--soft);font:500 15px var(--px);cursor:pointer}
.otabs button.on{color:var(--text);border-color:var(--edge);box-shadow:inset 0 -2px 0 var(--red)}
.ocat{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:10px;max-height:640px;overflow:auto;padding-right:2px}
.ocard{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ocard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#111}
.ocard>div{padding:8px 10px 4px;min-width:0}.ocard b{font:500 16px var(--px)}
.ocard .btn{margin:6px 10px 10px;justify-content:center;padding:7px 12px;font-size:14px}
.ofiles .btn{padding:6px 12px;font-size:13px}
.odrop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:22px 16px;border:2px dashed var(--line);border-radius:12px;cursor:pointer;color:var(--soft)}
.odrop:hover,.odrop.on{border-color:var(--red);background:var(--glow)}.odrop b{font:500 18px var(--px);color:var(--text)}.odrop span{font-size:13px;color:var(--muted)}
.odrop input{position:absolute;width:1px;height:1px;opacity:0}
.opast{margin-top:30px}

/* the making of a pack: the wait (Free) with its ad, then the download */
body.omodal-open{overflow:hidden}
.omodal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#000b;padding:16px}
.obox{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:20px 22px;box-shadow:0 20px 70px #000c}
.obox h2{margin:0 0 12px}
.oad{min-height:120px;margin-bottom:14px;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px}
.oad small{color:var(--dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase;justify-self:start}
.oad ins{min-height:100px}.oad+.obarw{margin-top:22px}         /* the ad well apart from the Download button */
.oad.slim{min-height:0;background:none;border:0;padding:0}.oad.slim+.obarw{margin-top:4px}
.opromo{margin:0;text-align:center;color:var(--soft)}.opromo a{color:var(--red2);font-weight:600}
.obarw{height:8px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}.obarw i{display:block;height:100%;width:0;background:var(--red);transition:width .2s linear}
#ostate{color:var(--soft);margin:10px 0 14px}
.obox .cta{display:flex;gap:10px;flex-wrap:wrap}
.oqrgo{width:100%;margin-top:10px}                                  /* QR code download, under Download */
.oqrbox{margin-top:12px;text-align:center}.oqrbox p{color:var(--soft);margin:0 0 10px}
.oqr{width:min(240px,70vw);margin:0 auto;background:#fff;border-radius:10px;padding:6px}.oqr svg{display:block;width:100%;height:auto}

@media (max-width:980px){.ogrid{grid-template-columns:minmax(0,1fr)}.opack{position:static}}
@media (max-width:820px){.owiki{flex-wrap:wrap}.ohero{grid-template-columns:1fr}.ohero h1{font-size:42px}.oart{max-width:none}.osteps,.ocontrols,.oplans{grid-template-columns:1fr}}

/* the community, the fixed coordinates, the 3D view */
.olead{color:var(--soft);max-width:760px;margin:0}
.obonus{font:700 12px Inter,sans-serif;letter-spacing:.06em;padding:4px 10px;border:1px solid var(--edge);background:var(--glow);color:var(--red2)}
.oadmin{font:600 13px Inter,sans-serif;color:var(--red2)}
.oacts button.on{border-color:var(--red);color:var(--text);background:var(--glow)}
.oplace{display:block!important;background:var(--panel2)!important;border-style:dashed!important}
.oplace span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.oplace div{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.oplace input,.oplace select,.oform input,.oform textarea{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--text);font:inherit}
.oplace input{width:84px;min-width:0;flex:1 1 60px}.oplace select{flex:1 1 80px}.oplace .btn{padding:6px 12px;font-size:13px}
.oform{display:flex;flex-direction:column}.oform input,.oform textarea{width:100%}.oform textarea{resize:vertical}
.oform input:focus,.oform textarea:focus,.oplace input:focus{outline:none;border-color:var(--edge);box-shadow:0 0 0 3px var(--glow)}
.ocheck{display:flex;gap:8px;align-items:flex-start;margin:12px 0 4px;color:var(--soft);font-size:13px}.ocheck input{margin-top:3px}
.oform .cta{margin-top:12px}
.ocardb{display:flex;gap:6px;margin:6px 10px 10px}.ocardb .btn{margin:0;flex:1;justify-content:center;padding:7px 10px;font-size:14px}
.ocard p{margin:4px 0 0;color:var(--soft);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ocardico{display:block;aspect-ratio:4/3;background:linear-gradient(135deg,var(--deep),var(--red));position:relative}
.ocardico:after{content:"";position:absolute;inset:30%;border:3px solid #fff8;transform:rotate(45deg)}
.oshh{margin:20px 0 4px;font-size:18px}.oshh.ofirst{margin-top:6px}
.ofiles .ospaceimg{width:44px;height:44px;object-fit:cover;border-radius:6px;flex:none}
.ostate{flex:none;font:700 11px Inter,sans-serif;letter-spacing:.06em;padding:4px 8px;border:1px solid var(--line);color:var(--muted)}
.ostate.pending{color:var(--gold,#ffd678);border-color:#ffd67855}.ostate.approved{color:#7be38c;border-color:#7be38c55}.ostate.rejected{color:var(--red2);border-color:var(--edge)}
.oprev .obox{width:min(980px,100%);padding:14px 16px}
.oprevh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.oprevh h2{margin:0}.oprevh small{color:var(--muted)}
.oprevs{position:relative;height:min(68vh,620px);background:radial-gradient(circle at 50% 40%,#2a2a30,#121216);border-radius:12px;overflow:hidden}
.oprevs canvas{display:block;width:100%;height:100%;touch-action:none}
.oprevl{position:absolute;inset:0;display:grid;place-items:center;color:var(--soft);margin:0}
.rapp{margin-top:16px}.rlist{display:grid;gap:12px;margin:12px 0}
.rcard{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.rcard img,.rcard .ocardico{width:200px;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.rcard h3{margin:0 0 4px}.rcard small{color:var(--muted)}.rcard p{margin:6px 0 0;color:var(--soft)}.rwhy{color:var(--red2)!important}
.rcard .ocardb{flex-direction:column;margin:0}
@media (max-width:820px){.rcard{grid-template-columns:1fr}.rcard img,.rcard .ocardico{width:100%}.rcard .ocardb{flex-direction:row;flex-wrap:wrap}}