/* Bitfold web player · bitfold.9io.ai/play/ */
.play-hero{background:var(--hero);color:#fff;padding:108px 0 80px;position:relative;overflow:hidden}
.play-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 45% at 30% 30%,rgba(255,255,255,.2),transparent 70%);pointer-events:none}
.play-layout{position:relative;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);column-gap:clamp(30px,6vw,80px);row-gap:22px;
  grid-template-areas:"console intro" "console carts" "console details";align-content:center}
.play-intro{grid-area:intro;display:flex;flex-direction:column;gap:16px;align-self:end}
.play-intro h1{font-size:clamp(22px,3.4vw,36px);text-shadow:.12em .12em 0 #3A2150}
.play-intro .lede{max-width:34ch}
.pcarts{grid-area:carts}
.play-console{grid-area:console;position:relative;align-self:center}
.play-details{grid-area:details;display:flex;flex-direction:column;gap:18px;align-self:start}

.console{--shell:#F4A9C5;--shell-hi:#FAC6DA;--btn:#FFFFFF;--ink:#6B1F45;position:relative;width:100%;max-width:400px;margin:0 auto;
  background:linear-gradient(160deg,var(--shell-hi),var(--shell) 58%);border-radius:26px 26px 92px 26px;padding:22px 26px 74px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 0 rgba(0,0,0,.08),0 46px 90px -34px rgba(25,10,60,.7);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:background .4s}
.c-top{display:flex;align-items:center;gap:9px;height:22px}
.c-power{display:flex;align-items:center;gap:9px;padding:4px 6px 4px 0;border-radius:8px}
.c-time{margin-left:auto;font:400 9px/1 var(--pixel);letter-spacing:.04em;color:var(--ink);opacity:.7;font-variant-numeric:tabular-nums}
.console.low .c-time{opacity:1;color:#C8304D}
.c-switch{width:46px;height:18px;border-radius:99px;background:rgba(0,0,0,.16);position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.c-switch span{position:absolute;left:3px;top:3px;width:20px;height:12px;border-radius:99px;background:color-mix(in srgb,var(--shell) 55%,#000);transition:left .2s}
.console.on .c-switch span{left:23px}
.c-off{font:800 9px/1 var(--round);letter-spacing:.22em;color:var(--ink);opacity:.65}
.c-bezel{position:relative;background:#3A3846;border-radius:12px 12px 48px 12px;padding:16px 30px 26px;margin-top:12px;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.c-label{display:flex;align-items:center;gap:8px;justify-content:center;color:#B9BACB;font:800 7.5px/1 var(--round);letter-spacing:.16em;margin-bottom:12px;white-space:nowrap}
.c-label i{flex:1;height:6px;border-top:2px solid #8E2D5A;border-bottom:2px solid #2D3E8E;opacity:.9}
.c-led-wrap{position:absolute;left:7px;top:44%;display:flex;flex-direction:column;align-items:center;gap:4px;color:#B9BACB;font:800 5.5px/1 var(--round);letter-spacing:.12em}
.c-led{width:9px;height:9px;border-radius:50%;background:#4a1e22;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transition:background .2s,box-shadow .2s}
.c-led.lit{background:#ff4d5a;box-shadow:0 0 10px #ff4d5a}
.c-screen{position:relative;aspect-ratio:160/144;border-radius:4px;overflow:hidden;background:#F2F0E6;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
#lcd{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#F2F0E6;outline:none}
.c-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#F2F0E6;color:#2B2A4A;text-align:center;padding:12px}
.c-idle[hidden]{display:none}
.c-idle .wm{font-family:var(--pixel);font-size:clamp(15px,4.4vw,21px);display:flex}
.c-idle .wm span:nth-child(1){color:#E8505B}.c-idle .wm span:nth-child(2){color:#F28C38}.c-idle .wm span:nth-child(3){color:#F2C230}
.c-idle .wm span:nth-child(4){color:#5DBB63}.c-idle .wm span:nth-child(5){color:#2EA8A0}.c-idle .wm span:nth-child(6){color:#3B7DD8}.c-idle .wm span:nth-child(7){color:#8A5CD8}
.c-idle b{font:800 12px var(--round);letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.c-screen::after{content:"PAUSED · TAP TO PLAY";position:absolute;inset:auto 0 0 0;padding:7px 0;text-align:center;
  font:400 8px/1 var(--pixel);letter-spacing:.06em;color:#fff;background:rgba(21,20,40,.78);opacity:0;transition:opacity .2s;pointer-events:none}
.console.paused .c-screen::after{opacity:1}
.console.paused #lcd{cursor:pointer}
.console.loading .c-idle b{animation:blink .6s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.c-brand{display:flex;align-items:baseline;gap:8px;margin:16px 0 0 6px;color:var(--ink)}
.c-brand b{font:900 23px/1 var(--round);letter-spacing:-.01em}
.c-brand span{font:800 9px var(--round);letter-spacing:.32em}
.c-controls{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:10px}
.c-dpad{position:relative;width:132px;height:132px;flex:none;touch-action:none;cursor:pointer}
.c-dpad::before,.c-dpad::after{content:"";position:absolute;background:#2A2830;border-radius:7px;box-shadow:0 5px 0 rgba(0,0,0,.28)}
.c-dpad::before{left:34%;top:0;width:32%;height:100%}
.c-dpad::after{top:34%;left:0;height:32%;width:100%}
.c-dpad span{position:absolute;z-index:1;pointer-events:none;width:32%;height:32%;border-radius:6px;transition:background .06s}
.c-dpad .du{left:34%;top:0}.c-dpad .dd{left:34%;bottom:0}.c-dpad .dl{left:0;top:34%}.c-dpad .dr{right:0;top:34%}
.c-dpad span.down{background:rgba(255,255,255,.16)}
.c-ab{position:relative;display:flex;gap:18px;transform:rotate(-24deg);padding:8px 10px;border-radius:99px;background:rgba(0,0,0,.06)}
.c-ab button{position:relative;width:58px;height:58px;border-radius:50%;touch-action:none;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--btn) 65%,#fff),var(--btn) 58%,color-mix(in srgb,var(--btn) 72%,#000));
  box-shadow:0 5px 0 rgba(0,0,0,.25);transition:transform .05s,box-shadow .05s}
.c-ab button::after{content:attr(data-label);position:absolute;bottom:-20px;right:-6px;transform:rotate(24deg);font:900 12px var(--round);color:var(--ink)}
.c-ab button.down,.c-ss button.down{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.c-ss{display:flex;justify-content:center;gap:30px;margin:30px 0 0 -40px}
.c-ss button{position:relative;width:54px;height:13px;border-radius:99px;background:color-mix(in srgb,var(--shell) 62%,#000);transform:rotate(-24deg);touch-action:none;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.c-ss button::after{content:attr(data-label);position:absolute;top:17px;left:50%;transform:translateX(-50%);font:900 8.5px var(--round);letter-spacing:.14em;color:var(--ink);white-space:nowrap}
.c-grille{position:absolute;right:30px;bottom:26px;width:88px;height:56px;background:repeating-linear-gradient(115deg,rgba(0,0,0,.16) 0 6px,transparent 6px 13px);border-radius:10px}
.play-hud{text-align:center;margin-top:18px;font-weight:850;font-size:15px;letter-spacing:.01em}
.play-hud span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(21,20,40,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.console.low ~ .play-hud span,.play-console.low .play-hud span{background:#F2C230;color:#2B2A4A}
.c-limit{position:absolute;inset:0;border-radius:26px 26px 92px 26px;background:rgba(21,20,40,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 26px;gap:16px;color:#fff;z-index:5}
.c-limit[hidden]{display:none}
.c-limit h2{font-family:var(--pixel);font-weight:400;font-size:17px;line-height:1.45;text-transform:uppercase;text-shadow:.12em .12em 0 #000}
.c-limit p{font-weight:700;opacity:.92;font-size:15.5px;max-width:30ch}
.c-limit .small{font-size:13px;opacity:.75}
.c-limit a.more{font-weight:800;font-size:14px}

.pcarts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:460px}
.pcart{display:flex;flex-direction:column;gap:8px;padding:10px 10px 12px;border-radius:12px 22px 12px 12px;background:var(--c);color:#151428;text-align:left;
  clip-path:polygon(0 0,84% 0,100% 12%,100% 100%,0 100%);transition:transform .15s;box-shadow:0 14px 24px -16px rgba(0,0,0,.6)}
.pcart:hover{transform:translateY(-4px)}
.pcart[aria-pressed="true"]{outline:4px solid #fff;outline-offset:2px}
.pcart img{width:100%;aspect-ratio:10/9;border-radius:6px;image-rendering:pixelated;background:#000}
.pcart b{font-size:14px;font-weight:900;line-height:1.15}
.pcart span{font-size:11.5px;font-weight:800;opacity:.7;margin-top:-6px}
.now{background:rgba(21,20,40,.28);border-radius:20px;padding:18px 20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);max-width:460px}
.now h2{font-size:20px;font-weight:900}
.now p{font-weight:650;opacity:.9;margin-top:4px}
.now dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:12px;font-size:14px;font-weight:700}
.now dt{font-family:var(--pixel);font-size:10px;padding-top:3px;color:#FFE38A}
.pswatches{display:flex;flex-wrap:wrap;gap:9px;align-items:center;max-width:460px}
.pswatches small{font-weight:800;font-size:13px;opacity:.85;width:100%}
.pswatch{width:28px;height:28px;border-radius:50%;background:var(--s);box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),0 4px 10px -4px rgba(0,0,0,.45)}
.pswatch[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(21,20,40,.5)}
.keys{font-size:13.5px;font-weight:700;opacity:.85;max-width:460px}
.keys kbd{font-family:var(--pixel);font-size:9px;background:rgba(21,20,40,.35);padding:3px 6px;border-radius:5px}

/* ---------- below the fold ---------- */
.play-games{background:var(--paper)}
.pgames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.pgame{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(43,42,74,.45)}
.pgame img{width:100%;aspect-ratio:10/9;image-rendering:pixelated;background:#000}
.pgame div{padding:20px 22px 24px}
.pgame .genre{display:inline-block;font-family:var(--pixel);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:7px;background:var(--c);color:#151428}
.pgame h3{font-size:22px;font-weight:900;margin-top:12px;letter-spacing:-.01em}
.pgame p{font-weight:600;color:#55536D;margin-top:8px;font-size:15.5px}
.play-more{background:var(--night);color:#ECEAF6;text-align:center}
.play-more .body{margin:0 auto}
.locked-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.locked{position:relative;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 16px 30px -18px rgba(0,0,0,.8)}
.locked img{width:100%;aspect-ratio:10/9;image-rendering:pixelated;filter:saturate(.75) brightness(.72)}
.locked::before{content:"";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:7px;z-index:1;
  background:#F2C230 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23151428' d='M2 1h4v1h1v2h1v4H0V4h1V2h1zm1 1v2h2V2z'/%3E%3C/svg%3E") center/12px no-repeat}
.locked figcaption{padding:10px 10px 12px;text-align:left;font-size:12px;font-weight:700;color:#B9B7D3;line-height:1.3}
.locked figcaption b{display:block;color:#fff;font-size:13.5px;font-weight:900}
.play-more .ctas{margin-top:44px}
.play-page .faq-sec .credit{text-align:center;margin-top:34px;font-weight:650;color:#55536D}

@media (max-width:1100px){
  .locked-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .play-hero{padding:96px 0 56px}
  .play-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "carts" "console" "details"}
  .play-intro{align-items:center;text-align:center;align-self:auto}
  .play-intro .lede{margin:0 auto}
  .pcarts{margin:0 auto;width:100%}
  .play-details{align-items:center;text-align:center}
  .now,.pswatches,.keys{margin:0 auto}
  .now dl{text-align:left}
  .pswatches{justify-content:center}
  .pgames{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto}
  .locked-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:520px){
  .pcarts{gap:9px}
  .pcart{padding:7px 7px 9px}
  .pcart b{font-size:12px}
  .pcart span{display:none}
}
@media (max-width:420px){
  .c-led-wrap{font-size:0;left:7px}
  .c-limit{border-radius:22px 22px 80px 22px;padding:24px 20px}
  .console{padding:18px 18px 64px;border-radius:22px 22px 80px 22px}
  .c-bezel{padding:13px 22px 20px}
  .c-dpad{width:116px;height:116px}
  .c-ab button{width:50px;height:50px}
  .c-grille{width:72px;height:46px;right:22px;bottom:20px}
}