/* CHROMAFIRE game page. Loads after styles.css */
@font-face{font-family:'Audiowide';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/audiowide-latin-400-normal.woff2) format('woff2')}
.cf{
  --cf-deep:#0B0420; --cf-night:#12032B; --cf-violet:#4B0F6B; --cf-panel:#150A2E; --cf-line:#2A1A4F;
  --cf-pink:#FF3DC8; --cf-cyan:#2EE6FF; --cf-sun:#FFE14D; --cf-text:#EDEAF7; --cf-muted:#B6ADD6;
  --cf-display:'Audiowide','Big Shoulders Display',sans-serif;
  --cf-grad:linear-gradient(90deg,#FFB43A 0%,#FF5C8A 35%,#E04BD0 65%,#8A4BFF 100%);
  background:var(--cf-deep);color:var(--cf-text)
}
.cf .site-header{background:rgba(11,4,32,.72);border-bottom-color:var(--cf-line)}
.cf-display{font-family:var(--cf-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin:0}
.cf-kicker{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--cf-cyan)}
.cf-grad-text{background:var(--cf-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-cf{background:var(--cf-grad);color:#1A0730;border:none;box-shadow:0 0 0 rgba(255,61,200,0);transition:transform .2s,box-shadow .2s,filter .2s}
.btn-cf:hover{color:#1A0730;transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,61,200,.45);filter:saturate(1.2)}
.btn-cf-g{border:1px solid rgba(46,230,255,.45);color:var(--cf-text);background:rgba(11,4,32,.4);transition:border-color .2s,color .2s,background .2s}
.btn-cf-g:hover{border-color:var(--cf-cyan);color:var(--cf-cyan);background:rgba(46,230,255,.08)}

/* Hero */
.cf-hero{position:relative;overflow:hidden;min-height:calc(100svh - var(--header));display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate}
.cf-hero video,.cf-hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;animation:cfColorIn 2.6s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes cfColorIn{from{filter:grayscale(1) brightness(.55)}to{filter:grayscale(0) brightness(.8)}}
.cf-hero:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 45%,rgba(11,4,32,.2) 0%,rgba(11,4,32,.65) 60%,rgba(11,4,32,.95) 100%)}
.cf-hero:after{content:'';position:absolute;left:0;right:0;bottom:0;height:40%;z-index:-1;background:linear-gradient(to bottom,rgba(11,4,32,0),var(--cf-deep))}
.cf-hero .inner{width:min(1100px,100%);padding:64px var(--pad) 96px;display:flex;flex-direction:column;align-items:center;gap:28px}
.cf-logo{position:relative;width:min(960px,100%);margin:0}
.cf-logo img{display:block;width:100%;height:auto}
.cf-logo .color{position:absolute;inset:0;clip-path:inset(0 100% 0 0);animation:cfSweep 2.6s cubic-bezier(.65,0,.35,1) .4s forwards}
.cf-logo .scan{position:absolute;top:-6%;bottom:-6%;left:0;width:3px;border-radius:3px;background:#fff;box-shadow:0 0 18px 6px rgba(255,255,255,.85),0 0 60px 18px rgba(255,61,200,.6),0 0 90px 30px rgba(46,230,255,.35);opacity:0;animation:cfScan 2.6s cubic-bezier(.65,0,.35,1) .4s forwards}
@keyframes cfSweep{to{clip-path:inset(0 0 0 0)}}
@keyframes cfScan{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.cf-logo.idle .color{animation:cfPulse 5s ease-in-out infinite;clip-path:inset(0 0 0 0)}
@keyframes cfPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(255,61,200,0))}50%{filter:drop-shadow(0 0 22px rgba(255,61,200,.45))}}
.cf-tag{margin:0;font-family:var(--cf-display);font-size:clamp(20px,2.6vw,34px);line-height:1.25;text-transform:uppercase;letter-spacing:.03em;color:var(--cf-text);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.cf-tag span{display:block}
.cf-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cf-chip{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border-radius:3px;border:1px solid rgba(237,234,247,.25);background:rgba(11,4,32,.6);color:var(--cf-text)}
.cf-chip.hot{border-color:var(--cf-pink);color:#fff;background:rgba(255,61,200,.18)}
.cf-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cf-replay{position:absolute;right:var(--pad);bottom:28px;z-index:2;min-height:44px;padding:0 14px;border-radius:4px;border:1px solid rgba(237,234,247,.25);background:rgba(11,4,32,.6);color:var(--cf-muted);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;cursor:pointer}
.cf-replay:hover{color:var(--cf-cyan);border-color:var(--cf-cyan)}

/* Sections */
.cf-sec{padding-top:clamp(96px,11vw,160px)}
.cf-head{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:clamp(36px,4vw,56px)}
.cf-head h2{font-size:clamp(34px,4.6vw,64px)}
.cf-head p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--cf-muted)}

/* Restore slider */
.restore-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(28px,4vw,64px);align-items:center}
.restore-copy{display:flex;flex-direction:column;gap:18px}
.restore-copy h2{font-size:clamp(34px,4vw,56px)}
.restore-copy p{margin:0;font-size:18px;line-height:1.65;color:var(--cf-muted)}
.compare{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--cf-line);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 80px rgba(255,61,200,.12);aspect-ratio:3/2;background:#000;touch-action:pan-y}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.compare .drained{clip-path:inset(0 0 0 var(--pos,50%))}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 16px 4px rgba(255,255,255,.7),0 0 40px 10px rgba(255,61,200,.45);pointer-events:none}
.compare .knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#0B0420;border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 24px rgba(255,61,200,.6)}
.compare .lbl{position:absolute;top:16px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;padding:7px 10px;border-radius:3px;background:rgba(11,4,32,.75);border:1px solid rgba(237,234,247,.2);pointer-events:none}
.compare .lbl.l{left:16px;color:var(--cf-cyan)}
.compare .lbl.r{right:16px;color:#bbb}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare:focus-within{outline:3px solid var(--cf-cyan);outline-offset:3px}

/* Features */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feat{position:relative;border:1px solid var(--cf-line);border-radius:10px;background:linear-gradient(180deg,rgba(75,15,107,.25),rgba(21,10,46,.9));padding:30px 26px 28px;display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.feat:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--cf-grad);filter:grayscale(1);opacity:.6;transition:filter .5s,opacity .5s}
.feat:hover{transform:translateY(-4px);border-color:rgba(255,61,200,.6);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px rgba(255,61,200,.15)}
.feat:hover:before{filter:none;opacity:1}
.feat .ic{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(46,230,255,.1);border:1px solid rgba(46,230,255,.35);color:var(--cf-cyan)}
.feat:nth-child(3n+2) .ic{background:rgba(255,61,200,.1);border-color:rgba(255,61,200,.4);color:var(--cf-pink)}
.feat:nth-child(3n) .ic{background:rgba(255,225,77,.08);border-color:rgba(255,225,77,.4);color:var(--cf-sun)}
.feat h3{font-family:var(--cf-display);font-weight:400;font-size:21px;line-height:1.2;text-transform:uppercase;margin:6px 0 0;color:var(--cf-text)}
.feat p{margin:0;font-size:16px;line-height:1.6;color:var(--cf-muted)}

/* Motion showcase */
.showcase{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--cf-line);box-shadow:0 50px 120px rgba(0,0,0,.65),0 0 100px rgba(46,230,255,.1)}
.showcase video{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.showcase .scan{position:absolute;inset:0;pointer-events:none}

/* Signup, CHROMAFIRE skin */
.cf .signup{background-color:transparent;background-image:radial-gradient(rgba(255,255,255,.08) 1.2px,transparent 1.2px),linear-gradient(120deg,#4B0F6B 0%,#8E1C8C 45%,#1B6F9E 100%);background-size:22px 22px,100% 100%;border:1px solid rgba(255,61,200,.4)}
.cf .signup h2{font-family:var(--cf-display);font-weight:400;text-transform:uppercase;color:#fff;font-size:clamp(34px,4.2vw,60px);line-height:1.05;margin:0}
.cf .signup p{color:#E6DDF7}
.cf .signup .fine{color:#CFC4EA}
.cf .signup .fine a{color:#fff}
.cf .signup label{color:#fff}
.cf .field input{border-color:#0B0420;background:#F4F1FF}
.cf .field button{background:#0B0420;border-color:#0B0420;color:var(--cf-cyan)}
.cf .field button:hover{color:var(--cf-pink)}
.cf .err{color:#FFD1F1}
.cf .done{background:#0B0420}
.cf .done b{color:var(--cf-cyan)}
.cf .signup .ghost-logo{position:absolute;right:-40px;bottom:-30px;width:520px;opacity:.12;pointer-events:none;transform:rotate(-8deg)}

/* More games */
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.more{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px;border-radius:10px;border:1px solid var(--line2);text-decoration:none;min-height:180px;transition:transform .3s,border-color .3s}
.more:hover{transform:translateY(-4px)}
.more img{width:min(260px,55%);height:auto;flex:none;min-width:0}
.more span{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--bone2)}
.more-mtt{background:radial-gradient(ellipse at 30% 40%,#4A1010 0%,#1A0606 70%)}
.more-mtt:hover{border-color:#F2C14E}
.more-tide{background:linear-gradient(180deg,#0F4C5C 0%,#0B2F3A 100%)}
.more-tide:hover{border-color:#E9B949}
.cf .doc-footer{border-top-color:var(--cf-line);margin-top:clamp(96px,10vw,140px)}

@media (max-width:900px){
  .restore-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .more-grid{grid-template-columns:1fr}
  .cf-replay{display:none}
}
@media (max-width:600px){
  .feat-grid{grid-template-columns:1fr}
  .cf-ctas{flex-direction:column;width:100%}
  .cf-ctas .btn{width:100%}
  .more{flex-direction:column;align-items:flex-start;min-height:0}
  .more img{width:70%}
  .cf .signup .ghost-logo{width:320px}
}
@media (prefers-reduced-motion:reduce){
  .cf-logo .color{animation:none;clip-path:inset(0 0 0 0)}
  .cf-logo .scan{display:none}
  .cf-hero video,.cf-hero .poster{animation:none;filter:brightness(.8)}
}
.more-cf img{width:min(360px,72%) !important}