:root{
  --bg:#07030f; --panel:#130a24; --line:#2c1850;
  --violet:#8b3dff; --violet-soft:#c4a1ff; --text:#f3ecff; --muted:#a592c8;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  background-image:radial-gradient(60% 40% at 50% 0%, #2a1060 0%, transparent 70%);
  background-repeat:no-repeat;
}
main{
  width:100%; min-height:100%; max-width:560px; margin:0 auto; padding:40px 20px 24px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px;
}
main>*{min-width:0; max-width:100%}
h1{overflow-wrap:anywhere; font-size:clamp(2rem,8vw,3.2rem); line-height:1.05; margin:0; font-weight:800; letter-spacing:-.02em}
.stage{
  position:relative; width:min(100%,60vh); aspect-ratio:1/1; margin:0 auto;
  border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden;
}
#result{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block}
#result.show{animation:reveal 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes reveal{
  from{opacity:0; filter:blur(24px) brightness(2.2); transform:scale(1.08)}
  to{opacity:1; filter:none; transform:none}
}
.msg{min-height:1.4em; margin:0; color:var(--violet-soft)}
.actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{
  appearance:none; border:1px solid var(--violet); background:transparent; color:var(--text);
  padding:14px 22px; border-radius:10px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none;
}
.btn.primary{background:var(--violet); border-color:var(--violet)}
.btn:hover{filter:brightness(1.15)}
.btn:focus-visible{outline:3px solid var(--violet-soft); outline-offset:3px}
.btn[disabled]{opacity:.5; cursor:default}
.small{color:var(--muted); font-size:.9rem; margin:0}
#ad-slot {
  max-width: 560px;
  margin: 0 auto 24px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
}
#ad-slot iframe,
#ad-slot ins,
#ad-slot div {
  max-width: 100% !important;
  overflow: hidden;
}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){#result.show{animation:none}}