/* ============================================================
   PHONEPEDIA — Cyber Glassmorphism Theme
   Pure CSS3 • No frameworks • Mobile responsive
   Colors use hex / rgba only (keeps PNG export crisp)
============================================================ */

:root{
  --bg:#05071a;
  --bg-2:#0a0f2e;
  --glass:rgba(18,24,58,.55);
  --glass-2:rgba(28,34,80,.45);
  --stroke:rgba(0,212,255,.28);
  --stroke-soft:rgba(255,255,255,.12);
  --text:#eaf6ff;
  --muted:#9fb3d9;
  --cyan:#00d4ff;
  --cyan-dark:#0090ff;
  --purple:#a855f7;
  --pink:#ff2ea6;
  --gold:#ffc93c;
  --green:#2ee6a8;
  --danger:#ff5d73;
  --radius:20px;
  /* phone body (controlled from JS) */
  --body-1:#3a4a63;
  --body-2:#141c2e;
  --body-glow:rgba(0,212,255,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:"Exo 2","Noto Sans Devanagari","Segoe UI",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(168,85,247,.22), rgba(0,0,0,0) 60%),
    radial-gradient(900px 550px at -10% 20%, rgba(0,212,255,.18), rgba(0,0,0,0) 60%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 55%, #12082e 100%);
  color:var(--text);
  overflow-x:hidden;
  padding:14px 14px 8px;
}
button,input,select{font-family:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid rgba(0,212,255,.75); outline-offset:2px;
}
.hidden{display:none !important}

/* ---------- Animated background ---------- */
.bg-blobs{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; animation:drift 18s ease-in-out infinite alternate}
.blob-1{width:420px;height:420px;background:#123a8f; top:-120px; left:-100px}
.blob-2{width:380px;height:380px;background:#4c1d95; top:30%; right:-140px; animation-delay:-6s}
.blob-3{width:300px;height:300px;background:#0e4d5c; bottom:-120px; left:35%; animation-delay:-12s}
@keyframes drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(60px,40px) scale(1.15)}
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(0,212,255,.06) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(90deg, rgba(0,212,255,.06) 1px, rgba(0,0,0,0) 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 90%);
          mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 90%);
}

.glass{
  background:var(--glass);
  border:1px solid var(--stroke-soft);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---------- Header ---------- */
.site-header{
  max-width:1160px; margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-color:var(--stroke);
}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand-icon{
  font-size:2rem; width:58px; height:58px; display:grid; place-items:center; flex:none;
  border-radius:16px; background:linear-gradient(145deg, rgba(0,212,255,.25), rgba(168,85,247,.25));
  border:1px solid var(--stroke); box-shadow:0 0 22px rgba(0,212,255,.35);
  animation:floaty 3.2s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.logo{
  margin:0; font-family:"Rajdhani","Exo 2",sans-serif; font-size:clamp(1.6rem,4.5vw,2.3rem);
  font-weight:700; letter-spacing:.14em; line-height:1;
  background:linear-gradient(90deg,var(--cyan) 10%,#7dd3fc 40%,var(--purple) 80%);
  -webkit-background-clip:text; background-clip:text; color:rgba(0,0,0,0);
  filter:drop-shadow(0 0 12px rgba(0,212,255,.35));
}
.logo span{background:linear-gradient(90deg,var(--pink),var(--gold)); -webkit-background-clip:text; background-clip:text}
.tagline{margin:3px 0 0; color:var(--muted); font-size:.85rem; letter-spacing:.22em; text-transform:uppercase}

.header-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.lang-toggle{
  display:flex; align-items:center; gap:6px; padding:5px;
  border-radius:999px; border:1px solid var(--stroke-soft); background:rgba(0,0,0,.3);
}
.lang-sep{color:var(--muted)}
.lang-btn{
  border:1px solid rgba(0,0,0,0); background:rgba(0,0,0,0); color:var(--muted);
  padding:7px 13px; border-radius:999px; font-weight:700; font-size:.9rem; transition:.25s;
}
.lang-btn:hover{color:var(--text)}
.lang-btn.active{
  color:#04121f; background:linear-gradient(90deg,var(--cyan),#7dd3fc);
  box-shadow:0 0 16px rgba(0,212,255,.55);
}
.icon-btn{
  width:44px;height:44px; font-size:1.25rem; border-radius:14px;
  background:rgba(0,0,0,.3); border:1px solid var(--stroke-soft); color:var(--text); transition:.2s;
}
.icon-btn:hover{border-color:var(--stroke); box-shadow:0 0 14px rgba(0,212,255,.35); transform:translateY(-1px)}
.icon-btn.small{width:46px;height:48px;flex:none}

/* ---------- Mode tabs ---------- */
.mode-tabs{
  position:relative; max-width:640px; margin:16px auto 6px; padding:6px;
  display:grid; grid-template-columns:1fr 1fr; gap:6px; border-color:var(--stroke);
}
.tab-btn{
  position:relative; z-index:2; border:1px solid rgba(0,0,0,0); background:rgba(0,0,0,0);
  color:var(--muted); font-weight:800; font-size:clamp(.85rem,2.6vw,1.02rem);
  padding:13px 8px; border-radius:14px; transition:color .25s; letter-spacing:.02em;
}
.tab-btn.active{color:#fff; text-shadow:0 0 12px rgba(255,255,255,.5)}
.tab-glider{
  position:absolute; z-index:1; top:6px; bottom:6px; left:6px; width:calc(50% - 9px);
  border-radius:14px; background:linear-gradient(100deg, rgba(0,212,255,.85), rgba(168,85,247,.85));
  box-shadow:0 0 24px rgba(0,212,255,.45), 0 0 24px rgba(168,85,247,.3);
  transition:transform .38s cubic-bezier(.6,-0.1,.2,1.25);
}
.mode-tabs.design-active .tab-glider{transform:translateX(calc(100% + 6px))}

main{max-width:1160px; margin:0 auto}
.mode-section{padding:8px 2px 20px; animation:fadeUp .45s ease both}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}

.section-intro{text-align:center; padding:8px 10px 2px}
.section-intro h2{
  margin:4px 0 6px; font-size:clamp(1.45rem,4.5vw,2.2rem); font-weight:900;
  text-shadow:0 0 24px rgba(0,212,255,.35);
}
.section-intro p{margin:0 auto 10px; max-width:640px; color:var(--muted); font-size:1rem; line-height:1.55}

/* ---------- Buttons ---------- */
.btn{
  border-radius:999px; border:1px solid var(--stroke-soft); color:var(--text);
  font-weight:800; letter-spacing:.03em; padding:13px 24px; font-size:1rem;
  background:rgba(0,0,0,.3); transition:.22s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.6; cursor:wait; transform:none}
.btn-hero{
  background:linear-gradient(95deg,#ff2ea6,#a855f7 55%,#00d4ff); border:none; color:#fff; font-size:1.08rem;
  box-shadow:0 8px 30px rgba(168,85,247,.45), 0 0 24px rgba(255,46,166,.3);
}
.btn-hero:hover{box-shadow:0 12px 36px rgba(168,85,247,.6), 0 0 34px rgba(0,212,255,.45)}
.btn-download{
  background:linear-gradient(95deg,#00b894,#00d4ff); border:none; color:#03202b; font-size:1.05rem;
  box-shadow:0 8px 28px rgba(0,212,255,.4);
}
.btn-ghost:hover{border-color:var(--stroke); box-shadow:0 0 16px rgba(0,212,255,.3)}
.mode-download{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:18px}
.hint{width:100%; text-align:center; color:var(--muted); margin:2px 0 0; font-size:.92rem}

/* ============================================================
   MODE 1 — VS BATTLE
============================================================ */
.selectors{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:end;
  padding:18px; margin-top:12px;
}
.selector-box label{display:block; font-weight:800; margin-bottom:8px; font-size:.95rem}
.side-a label{color:#7dd3fc}
.side-b label{color:#d8b4fe}
.neon-select{
  width:100%; padding:13px 12px; border-radius:14px; font-size:1rem; font-weight:700;
  color:var(--text); background:rgba(5,10,35,.9); border:1px solid var(--stroke);
  box-shadow:inset 0 0 18px rgba(0,212,255,.08);
}
.neon-select option{background:#0a0f2e; color:var(--text)}
.swap-btn{
  width:50px;height:50px; border-radius:50%; font-size:1.3rem; flex:none;
  border:1px solid var(--stroke); background:rgba(0,212,255,.12); color:var(--text); transition:.25s;
}
.swap-btn:hover{transform:rotate(180deg); box-shadow:0 0 18px rgba(0,212,255,.5)}
.battle-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:18px 0 20px}

/* Capture card — solid gradients so PNG export looks rich */
.battle-capture{
  border-radius:26px; padding:26px 22px 18px; position:relative; overflow:hidden;
  background:
    radial-gradient(700px 340px at 15% 0%, rgba(0,212,255,.16), rgba(0,0,0,0) 60%),
    radial-gradient(700px 340px at 85% 0%, rgba(168,85,247,.18), rgba(0,0,0,0) 60%),
    linear-gradient(165deg,#0b1130 0%,#0a0f2e 55%,#160a33 100%);
  border:1px solid var(--stroke);
  box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 34px rgba(0,212,255,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.battle-head{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center}
.fighter{text-align:center; padding:16px 10px 14px; border-radius:18px; border:1px solid var(--stroke-soft); background:rgba(255,255,255,.045); min-height:138px; transition:.3s}
.fighter .f-emoji{font-size:2.7rem; line-height:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.fighter h3{margin:8px 0 4px; font-size:clamp(1rem,3vw,1.35rem); font-weight:900; line-height:1.2}
.fighter p{margin:0; color:var(--muted); font-size:.85rem}
.fighter-a.champion{border-color:rgba(0,212,255,.8); box-shadow:0 0 26px rgba(0,212,255,.4), inset 0 0 22px rgba(0,212,255,.08)}
.fighter-b.champion{border-color:rgba(255,201,60,.85); box-shadow:0 0 26px rgba(255,201,60,.4), inset 0 0 22px rgba(255,201,60,.08)}

.vs-badge{
  width:76px;height:76px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#ff2ea6 0%,#a855f7 38%,#00d4ff 70%,#ffc93c 100%);
  box-shadow:0 0 30px rgba(168,85,247,.6); animation:vsPulse 1.6s ease-in-out infinite;
}
.vs-badge span{
  width:60px;height:60px; border-radius:50%; display:grid; place-items:center;
  background:#0a0f2e; font-family:"Rajdhani",sans-serif; font-weight:700; font-size:1.45rem; letter-spacing:.06em; color:#fff;
}
@keyframes vsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08) rotate(3deg)}}

.winner-banner{
  margin:18px auto 4px; text-align:center; min-height:34px;
  font-size:clamp(1.05rem,3.4vw,1.5rem); font-weight:900; letter-spacing:.03em;
  background:linear-gradient(90deg,var(--gold),#fff3c4,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:rgba(0,0,0,0);
  filter:drop-shadow(0 0 14px rgba(255,201,60,.35));
}
.winner-banner.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}

.score-strip{display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 16px}
.score-label{font-family:"Rajdhani",sans-serif; letter-spacing:.3em; font-size:.72rem; color:var(--muted)}
.score-chip{
  min-width:46px; text-align:center; padding:5px 12px; border-radius:999px;
  font-family:"Rajdhani",sans-serif; font-weight:700; font-size:1.25rem;
  border:1px solid var(--stroke-soft); background:rgba(0,0,0,.35);
}
.score-a{color:#7dd3fc; border-color:rgba(0,212,255,.5)}
.score-b{color:#d8b4fe; border-color:rgba(168,85,247,.55)}

/* Stat bars */
.stat-block{
  padding:14px 16px 12px; margin-bottom:12px; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.stat-title{font-weight:900; font-size:1.02rem; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.stat-title .unit{color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.08em}
.bar-row{display:grid; grid-template-columns:minmax(86px,150px) 1fr auto; align-items:center; gap:10px; margin:7px 0; padding:6px 8px; border-radius:12px; border:1px solid rgba(0,0,0,0); transition:.3s}
.bar-name{font-size:.85rem; font-weight:700; color:#cfe3ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{height:20px; border-radius:999px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1); overflow:hidden; position:relative}
.bar-fill{
  height:100%; width:0; border-radius:999px; position:relative;
  transition:width 1s cubic-bezier(.25,.9,.3,1);
}
.bar-fill::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%);
}
.fill-a{background:linear-gradient(90deg,#0090ff,#00d4ff,#7dd3fc)}
.fill-b{background:linear-gradient(90deg,#a855f7,#ff2ea6,#ffb3e2)}
.bar-val{font-family:"Rajdhani",sans-serif; font-weight:700; font-size:1.08rem; min-width:96px; text-align:right}
.bar-row.is-winner{
  border-color:rgba(255,201,60,.75); background:rgba(255,201,60,.07);
  box-shadow:0 0 18px rgba(255,201,60,.28), inset 0 0 14px rgba(255,201,60,.06);
}
.bar-row.is-winner .bar-val{color:var(--gold)}
.bar-row.is-loser{opacity:.75}
.crown{display:inline-block; animation:crownBob 1.2s ease-in-out infinite; filter:drop-shadow(0 0 8px rgba(255,201,60,.7))}
@keyframes crownBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-3px) rotate(6deg)}}

.nokia-note{
  text-align:center; font-weight:800; color:#a7f3c9; margin:6px 0 10px;
  padding:10px 14px; border-radius:12px; border:1px dashed rgba(46,230,168,.6); background:rgba(46,230,168,.08);
}
.capture-foot{
  text-align:center; margin-top:16px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.1); color:var(--muted);
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
}

/* ============================================================
   MODE 2 — DESIGN STUDIO
============================================================ */
.studio-layout{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);
  gap:20px; align-items:start; margin-top:10px;
}
.stage-wrap{min-width:0}
.design-capture{
  position:relative; overflow:hidden; border-radius:28px; padding:30px 18px 18px; text-align:center;
  background:
    radial-gradient(600px 300px at 50% -5%, rgba(0,212,255,.16), rgba(0,0,0,0) 60%),
    linear-gradient(170deg,#0c1233 0%,#0a0f2e 55%,#170a36 100%);
  border:1px solid var(--stroke);
  box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 34px rgba(168,85,247,.14);
}
.stage-ring{
  position:absolute; width:460px;height:460px; border-radius:50%; left:50%; top:52px;
  transform:translateX(-50%);
  border:2px dashed rgba(0,212,255,.22);
  box-shadow:0 0 60px var(--body-glow) inset, 0 0 44px rgba(0,212,255,.1);
  animation:ringSpin 40s linear infinite; pointer-events:none;
}
@keyframes ringSpin{to{transform:translateX(-50%) rotate(360deg)}}

.phones-row{
  position:relative; display:flex; justify-content:center; gap:clamp(14px,4vw,44px);
  flex-wrap:wrap; z-index:1;
}
.phone-fig{margin:0}
.side-label{
  margin-top:12px; font-family:"Rajdhani",sans-serif; font-weight:700; letter-spacing:.3em;
  font-size:.72rem; color:var(--muted);
}

/* ---------- The CSS phone mockup ---------- */
.phone{
  position:relative; width:min(188px,42vw); aspect-ratio:188/384;
  border-radius:38px; transform-style:preserve-3d;
  transition:background .4s, box-shadow .4s;
  box-shadow:
    0 26px 48px rgba(0,0,0,.6),
    0 0 0 3px rgba(255,255,255,.14),
    0 0 0 7px rgba(10,14,30,.9),
    0 0 34px var(--body-glow);
}
.phone:hover{animation:phoneWiggle .6s ease}
@keyframes phoneWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.4deg)}75%{transform:rotate(1.4deg)}}

.phone-back{
  background:
    radial-gradient(140% 90% at 20% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 45%),
    linear-gradient(155deg, var(--body-1) 0%, var(--body-2) 70%);
}
.phone-shine{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 28%, rgba(255,255,255,0) 45%, rgba(255,255,255,.1) 80%, rgba(255,255,255,0) 100%);
}
.side-btn{position:absolute; right:-10px; width:4px; border-radius:3px; background:rgba(200,215,240,.75); z-index:3}
.phone-back .side-btn,.phone-front .side-btn{right:auto; left:-10px}
.sb-1{top:88px; height:26px}
.sb-2{top:124px; height:44px}
.sb-3{top:176px; height:44px}

.back-logo{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  font-size:3.4rem; line-height:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,255,255,.35));
  opacity:.95;
}
.back-brand{
  position:absolute; left:0; right:0; bottom:26px; text-align:center; padding:0 14px;
  font-family:"Rajdhani",sans-serif; font-weight:700; letter-spacing:.22em; font-size:.68rem;
  color:rgba(255,255,255,.75); text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Camera modules */
.camera-module{
  position:absolute; top:16px; left:16px; z-index:2;
  background:linear-gradient(150deg, rgba(255,255,255,.22), rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  display:grid; place-items:center; padding:8px; gap:6px;
}
.cam-dual{border-radius:999px; grid-template-columns:1fr; width:52px}
.cam-triple{border-radius:24px; grid-template-columns:1fr 1fr; width:86px}
.cam-triple .lens:nth-child(2){grid-row:span 1}
.cam-circular{border-radius:50%; width:104px; height:104px; left:50%; transform:translateX(-50%); grid-template-columns:1fr 1fr; padding:16px}
.cam-quad{border-radius:22px; grid-template-columns:1fr 1fr; width:88px}
.lens{
  width:30px; height:30px; border-radius:50%; position:relative; flex:none;
  background:
    radial-gradient(circle at 34% 30%, #9fd8ff 0 12%, rgba(159,216,255,0) 30%),
    radial-gradient(circle at 50% 50%, #122a4d 0 30%, #050b1c 55%, #1c2b4a 76%, #0a1122 100%);
  border:3px solid rgba(210,225,250,.85);
  box-shadow:0 0 0 3px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.5), inset 0 0 8px rgba(0,180,255,.5);
}
.lens::after{
  content:""; position:absolute; left:26%; top:20%; width:6px; height:6px; border-radius:50%;
  background:#eaf6ff; box-shadow:0 0 6px #fff;
}
.flash{
  width:14px;height:14px; border-radius:50%; justify-self:center;
  background:radial-gradient(circle at 40% 35%, #fffbe6, #ffc93c 70%);
  box-shadow:0 0 10px rgba(255,201,60,.8), 0 0 0 2px rgba(0,0,0,.3);
}

/* Front + screen */
.phone-front{background:linear-gradient(160deg,#1a2338,#05080f); padding:9px}
.screen{
  position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; padding:34px 12px 12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -30px 50px rgba(0,0,0,.3);
  transition:background .4s;
}
.wp-nebula{background:linear-gradient(165deg,#2b1055 0%,#7597de 130%), #2b1055}
.wp-nebula::before,.wp-ocean::before,.wp-sunset::before,.wp-matrix::before{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.wp-nebula::before{background:radial-gradient(circle at 78% 18%, rgba(255,46,166,.55), rgba(0,0,0,0) 45%), radial-gradient(circle at 15% 75%, rgba(0,212,255,.5), rgba(0,0,0,0) 50%)}
.wp-ocean{background:linear-gradient(170deg,#023e8a,#00b4d8 80%,#90e0ef)}
.wp-ocean::before{background:radial-gradient(circle at 80% 12%, rgba(255,255,255,.5), rgba(0,0,0,0) 35%), radial-gradient(circle at 10% 85%, rgba(2,62,138,.6), rgba(0,0,0,0) 55%)}
.wp-sunset{background:linear-gradient(175deg,#3a0ca3 0%,#f72585 55%,#ffbe0b 120%)}
.wp-sunset::before{background:radial-gradient(circle at 50% 78%, rgba(255,214,10,.75), rgba(0,0,0,0) 42%)}
.wp-matrix{background:linear-gradient(170deg,#001a08,#003b12 70%,#0a5c1e)}
.wp-matrix::before{background:repeating-linear-gradient(0deg, rgba(46,230,168,.14) 0 2px, rgba(0,0,0,0) 2px 16px), repeating-linear-gradient(90deg, rgba(46,230,168,.1) 0 2px, rgba(0,0,0,0) 2px 16px)}

/* Notch styles */
.notch{position:absolute; z-index:5; background:#05080f; box-shadow:0 2px 8px rgba(0,0,0,.35)}
.notch-punch{width:15px; height:15px; border-radius:50%; top:12px; left:50%; transform:translateX(-50%); border:2px solid rgba(255,255,255,.25)}
.notch-punch::after{content:""; position:absolute; inset:4px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #4db8ff, #0a1c33)}
.notch-notch{width:96px; height:24px; top:0; left:50%; transform:translateX(-50%); border-radius:0 0 16px 16px}
.notch-notch::after{content:""; position:absolute; left:50%; top:6px; transform:translateX(-50%); width:26px; height:5px; border-radius:99px; background:rgba(255,255,255,.3)}
.notch-island{width:82px; height:24px; top:10px; left:50%; transform:translateX(-50%); border-radius:999px}
.notch-island::after{content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #4db8ff, #0a1c33); box-shadow:0 0 5px rgba(0,212,255,.7)}

.status-bar{
  position:relative; z-index:2; width:100%; display:flex; justify-content:space-between;
  font-size:.66rem; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5); margin-top:6px;
}
.lock-clock{
  position:relative; z-index:2; margin-top:14px; color:#fff;
  font-family:"Rajdhani",sans-serif; font-size:2.5rem; font-weight:700; line-height:1;
  text-shadow:0 4px 18px rgba(0,0,0,.45);
}
.lock-date{position:relative; z-index:2; color:rgba(255,255,255,.9); font-size:.72rem; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,.5)}
.app-grid{
  position:relative; z-index:2; margin-top:16px; width:100%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.app-tile{
  aspect-ratio:1; display:grid; place-items:center; font-size:1.25rem; border-radius:13px;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.3);
  box-shadow:0 4px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.dock{
  position:relative; z-index:2; margin-top:auto; width:100%; padding:8px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; border-radius:20px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25);
}

.phone-name-plate{
  position:relative; z-index:2; margin:22px 6px 8px;
  font-size:clamp(1.35rem,4vw,2rem); font-weight:900; letter-spacing:.02em; line-height:1.2;
  background:linear-gradient(90deg,var(--cyan),#fff,var(--purple));
  -webkit-background-clip:text; background-clip:text; color:rgba(0,0,0,0);
  filter:drop-shadow(0 0 16px rgba(0,212,255,.3));
  overflow-wrap:anywhere;
}
.spec-chips{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.spec-chip{
  padding:6px 13px; border-radius:999px; font-weight:800; font-size:.82rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(0,212,255,.4); color:#bfe9ff;
}

/* Controls */
.controls{padding:20px; position:sticky; top:14px}
.control-group{margin-bottom:20px}
.control-label{display:block; font-weight:900; margin-bottom:10px; font-size:.98rem}
.bonus-tag{font-style:normal; font-size:.65rem; vertical-align:super; color:#04121f; background:var(--gold); padding:2px 7px; border-radius:99px; margin-left:4px}
.name-row{display:flex; gap:8px}
#customNameInput{
  flex:1; min-width:0; padding:13px 14px; border-radius:14px; font-size:1rem; font-weight:700;
  color:var(--text); background:rgba(5,10,35,.85); border:1px solid var(--stroke);
}
#customNameInput::placeholder{color:var(--muted)}

.swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.swatch{
  border:2px solid rgba(255,255,255,.15); border-radius:16px; padding:8px 4px 7px;
  background:rgba(0,0,0,.28); color:var(--muted); font-size:.68rem; font-weight:800; line-height:1.25; transition:.2s;
}
.swatch .dot{
  display:block; width:36px; height:36px; margin:0 auto 6px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); box-shadow:0 4px 12px rgba(0,0,0,.5), inset -6px -8px 14px rgba(0,0,0,.35), inset 5px 7px 10px rgba(255,255,255,.35);
}
.swatch:hover{transform:translateY(-2px); color:var(--text)}
.swatch.active{border-color:var(--cyan); color:#fff; box-shadow:0 0 16px rgba(0,212,255,.45)}
.custom-color-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;
  color:var(--muted); font-weight:700; font-size:.9rem;
}
#customColor{
  width:58px; height:40px; border:1px solid var(--stroke); border-radius:12px;
  background:rgba(0,0,0,.3); padding:3px; cursor:pointer;
}

.option-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.option-grid.three{grid-template-columns:repeat(3,1fr)}
.opt-btn{
  padding:11px 8px; border-radius:13px; font-weight:800; font-size:.88rem; color:var(--muted);
  background:rgba(0,0,0,.3); border:1px solid var(--stroke-soft); transition:.2s; line-height:1.3;
}
.opt-btn:hover{color:var(--text); transform:translateY(-1px)}
.opt-btn.active{
  color:#fff; border-color:rgba(0,212,255,.8);
  background:linear-gradient(100deg, rgba(0,212,255,.35), rgba(168,85,247,.35));
  box-shadow:0 0 16px rgba(0,212,255,.35);
}
.wp-thumb-nebula{box-shadow:inset 0 -22px 26px rgba(117,151,222,.35)}
.wp-thumb-ocean{box-shadow:inset 0 -22px 26px rgba(0,180,216,.3)}
.wp-thumb-sunset{box-shadow:inset 0 -22px 26px rgba(247,37,133,.3)}
.wp-thumb-matrix{box-shadow:inset 0 -22px 26px rgba(10,92,30,.4)}

.cool-meter{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px;
  background:rgba(255,201,60,.07); border:1px solid rgba(255,201,60,.35); font-weight:800;
}
.cool-track{flex:1; height:14px; border-radius:99px; background:rgba(0,0,0,.5); overflow:hidden; border:1px solid rgba(255,255,255,.12)}
.cool-fill{height:100%; width:92%; border-radius:99px; background:linear-gradient(90deg,#ff9f1a,var(--gold),#fff3c4); transition:width .6s cubic-bezier(.25,.9,.3,1)}
#coolValue{font-family:"Rajdhani",sans-serif; font-size:1.3rem; color:var(--gold)}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,120px); z-index:99;
  max-width:min(92vw,480px); text-align:center; padding:14px 22px; border-radius:16px;
  background:rgba(8,14,40,.94); border:1px solid var(--cyan); color:var(--text); font-weight:800;
  box-shadow:0 16px 44px rgba(0,0,0,.6), 0 0 24px rgba(0,212,255,.35);
  transition:transform .4s cubic-bezier(.3,1.4,.4,1); pointer-events:none;
}
.toast.show{transform:translate(-50%,0)}

/* ---------- Footer ---------- */
.site-footer{
  max-width:1160px; margin:22px auto 6px; padding:18px; text-align:center;
}
.footer-main{margin:0 0 6px; font-weight:700; font-size:.95rem; overflow-wrap:anywhere}
.footer-main a{color:var(--cyan); text-decoration:none}
.footer-main a:hover{text-decoration:underline}
.footer-sub{margin:0 0 4px; color:var(--muted); font-size:.85rem; letter-spacing:.06em}
.footer-domain{margin:0; color:var(--purple); font-family:"Rajdhani",sans-serif; font-weight:700; letter-spacing:.2em; font-size:.8rem}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:920px){
  .studio-layout{grid-template-columns:1fr}
  .controls{position:static}
}
@media (max-width:640px){
  body{padding:10px 10px 4px}
  .site-header{justify-content:center; text-align:center}
  .brand{width:100%; justify-content:center}
  .header-controls{width:100%; justify-content:center}
  .selectors{grid-template-columns:1fr; align-items:stretch}
  .swap-btn{margin:0 auto; transform:rotate(90deg)}
  .swap-btn:hover{transform:rotate(270deg)}
  .battle-capture{padding:18px 12px 14px}
  .fighter{min-height:118px; padding:12px 6px 10px}
  .fighter .f-emoji{font-size:2.1rem}
  .vs-badge{width:58px;height:58px}
  .vs-badge span{width:45px;height:45px;font-size:1.1rem}
  .bar-row{grid-template-columns:minmax(70px,96px) 1fr auto; gap:7px}
  .bar-val{min-width:74px; font-size:.95rem}
  .bar-name{font-size:.76rem}
  .design-capture{padding:22px 8px 14px}
  .phones-row{gap:14px}
  .phone{border-radius:30px}
  .screen{border-radius:23px; padding:28px 8px 8px}
  .app-tile{font-size:1rem; border-radius:10px}
  .lock-clock{font-size:1.9rem}
  .lens{width:24px;height:24px; border-width:2px}
  .cam-circular{width:86px;height:86px}
  .back-logo{font-size:2.5rem}
  .option-grid.three{grid-template-columns:1fr 1fr 1fr}
  .opt-btn{font-size:.78rem; padding:10px 4px}
  .swatches{gap:7px}
}
@media (max-width:400px){
  .phone{width:43vw}
  .swatches{grid-template-columns:repeat(4,1fr)}
  .swatch .dot{width:29px;height:29px}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  html{scroll-behavior:auto}
}