:root { color-scheme: dark; --blue:#49b5ff; --silver:#eaf6ff; --ink:#010812; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; min-height:100%; background:var(--ink); }
body { overflow:hidden; font-family:Georgia,"Times New Roman",serif; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* Desktop: the approved composition is preserved pixel-for-pixel. The 2x master
   is only downsampled by the browser, which keeps the background and typography
   considerably sharper on 1080p/1440p/HiDPI screens. */
.desktop-canvas { position:fixed; inset:0; overflow:hidden; background:#010812; isolation:isolate; }
.desktop-canvas::before {
  content:""; position:absolute; inset:-2.5%; z-index:0;
  background:url('/assets/approved-preview-hq.png') 50% 50% / cover no-repeat;
  filter:blur(18px) brightness(.42) saturate(1.08);
  transform:scale(1.04);
}
.approved-art {
  position:absolute; z-index:1; inset:0; margin:auto;
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  image-rendering:auto;
  user-select:none; pointer-events:none;
  transform:translateZ(0);
}
/* Purely transparent click target: no extra rectangle, border, filter or glow can
   become visible over the button that is already part of the approved artwork. */
.discord-hotspot {
  position:absolute; z-index:3;
  left:38.65%; top:70.10%; width:22.70%; height:7.70%;
  display:block; border:0; border-radius:0; background:transparent;
  box-shadow:none; filter:none; transform:none; opacity:1;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.discord-hotspot:hover,
.discord-hotspot:active { background:transparent; box-shadow:none; filter:none; transform:none; }
.discord-hotspot:focus { outline:none; }
.discord-hotspot:focus-visible { outline:2px solid rgba(222,246,255,.92); outline-offset:-3px; border-radius:8px; }
.mobile-page { display:none; }

@media (max-width: 780px) {
  body { overflow:auto; }
  .desktop-canvas { display:none; }
  .mobile-page { position:relative; display:grid; min-height:100svh; place-items:center; overflow:hidden; background:#020a16; color:var(--silver); }
  .mobile-backdrop { position:fixed; inset:-10%; background:url('/assets/approved-preview-hq.png') 50% 50% / auto 110% no-repeat; filter:blur(1px) saturate(1.1); opacity:.78; transform:scale(1.03); }
  .mobile-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,5,14,.62),rgba(0,7,18,.78) 48%,rgba(0,4,11,.92)),radial-gradient(circle at 50% 35%,rgba(18,66,118,.16),rgba(0,0,0,.56) 68%); }
  .mobile-card { position:relative; z-index:2; width:min(92vw,34rem); margin:auto; padding:2.1rem 1.05rem 1.35rem; text-align:center; text-shadow:0 2px 14px #000; }
  .mobile-logo { width:min(91vw,30rem); height:auto; filter:drop-shadow(0 0 10px rgba(61,177,255,.85)) drop-shadow(0 0 28px rgba(22,101,204,.45)); }
  .divider { display:flex; align-items:center; gap:.6rem; width:min(72vw,18rem); margin:.2rem auto 1.1rem; }
  .divider span { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(194,231,255,.8)); }
  .divider span:last-child { transform:scaleX(-1); }
  .divider i { font-style:normal; color:#dff5ff; }
  .mobile-card h1 { margin:0 auto; max-width:12ch; font-size:clamp(2.35rem,11.5vw,4rem); line-height:1.03; font-weight:400; letter-spacing:-.035em; }
  .mobile-copy { margin:.85rem auto 0; max-width:28rem; font-size:1.03rem; line-height:1.5; color:#d7e4ed; }
  .mobile-worlds { margin:1rem 0 1.35rem; font-family:system-ui,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#d9ebf8; }
  .mobile-worlds b { margin:0 .45rem; color:#67c8ff; }
  .mobile-status { display:flex; align-items:center; gap:.8rem; width:100%; padding:.85rem; text-align:left; border:1px solid rgba(110,198,255,.68); border-radius:.55rem; background:linear-gradient(180deg,rgba(3,24,51,.84),rgba(1,12,30,.9)); box-shadow:0 0 28px rgba(31,139,230,.15),0 20px 45px rgba(0,0,0,.35); backdrop-filter:blur(7px); }
  .status-star { flex:0 0 2.6rem; width:2.6rem; height:2.6rem; display:grid; place-items:center; border:1px solid #79d0ff; border-radius:50%; box-shadow:0 0 16px rgba(55,170,255,.25); }
  .mobile-status strong { display:block; font-size:.94rem; }
  .mobile-status small { display:block; margin-top:.22rem; color:#adc6d9; font-size:.76rem; line-height:1.35; }
  .mobile-discord { display:flex; align-items:center; justify-content:center; gap:.85rem; width:min(100%,21rem); margin:1rem auto 0; padding:1rem 1.2rem; color:#fff; text-decoration:none; font-weight:700; border:1px solid #54baff; border-radius:.42rem; background:linear-gradient(180deg,rgba(6,55,107,.96),rgba(2,28,64,.96)); box-shadow:0 0 13px rgba(50,166,255,.55),0 0 32px rgba(18,101,196,.28); }
  .mobile-discord:focus-visible { outline:2px solid #dff5ff; outline-offset:4px; }
  footer { margin-top:2rem; color:#a7b8c5; font-size:.64rem; line-height:1.4; }
  footer p { margin:.25rem 0; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none!important; } }