:root{
  --bg:#050607; --fg:#e8edf2;
  --gold:#c9a227; --gold-light:#f2d675; --gold-dark:#7a5c12;
  --radius:22px; --frame-max-w:78vw; --frame-max-h:78vh;
  --tr-fast:.25s ease; --tr:.6s ease; --tr-slow:.95s cubic-bezier(.22,.61,.36,1);
}
html,body{height:100%;margin:0;padding:0}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}

/* Background */
.bg{position:fixed;inset:0;z-index:0;background-image:url('/pica/hg1.png');background-size:cover;background-position:center center;filter:blur(14px);transition:filter var(--tr-slow)}
.bg.sharp{filter:blur(0)}

/* Frame / Video */
.frame{
  position:relative;width:var(--frame-max-w);max-width:100%;
  aspect-ratio:16/9;max-height:var(--frame-max-h);border-radius:var(--radius);
  overflow:hidden;background:linear-gradient(145deg,#0a0c0d,#1a1c1d);
  box-shadow:0 0 0 3px var(--gold-dark),0 0 25px rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;z-index:1;
  transition:opacity var(--tr-slow),transform var(--tr-slow)
}
.frame::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold-light));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;z-index:3;pointer-events:none
}
.frame.fadeout{opacity:0;transform:scale(.96);pointer-events:none}
.armor-sheen{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 40%,rgba(0,0,0,0) 70%);opacity:.25;pointer-events:none;z-index:2}
.intro-video{width:100%;height:100%;object-fit:cover;background:#000;transition:opacity var(--tr),transform var(--tr);pointer-events:none}

/* Controls */
.controls{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));display:flex;gap:10px;z-index:9999;pointer-events:auto}
.btn{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;border:2px solid var(--gold-dark);box-shadow:0 0 18px rgba(0,0,0,.6),inset 0 0 10px rgba(255,255,255,.25);transition:transform var(--tr-fast),box-shadow var(--tr-fast),opacity var(--tr-fast)}
.btn:hover{transform:scale(1.06);box-shadow:0 0 25px rgba(0,0,0,.75)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#1a1402}
.btn-dark{background:linear-gradient(145deg,#0f1012,#1c1f22);color:var(--fg)}

/* CENTER-WIDGET */
.center-widget{position:fixed;inset:0;z-index:5;display:grid;place-items:center;opacity:0;transform:translateY(8px) scale(.985);transition:opacity var(--tr-slow),transform var(--tr-slow);pointer-events:none;text-align:center}
.center-widget.show{opacity:1;transform:none;pointer-events:auto}
.center-stack{position:relative}
.center-main{
  font-size:clamp(42px,8vw,140px);font-weight:1000;letter-spacing:2px;line-height:1;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 10px 32px rgba(201,162,39,.22),0 0 1px rgba(0,0,0,.7);
}
.center-script{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-20%) rotate(-5deg);
  font-size:clamp(28px,5.8vw,98px);font-weight:600;font-style:italic;
  font-family:"Segoe Script","Brush Script MT","Comic Sans MS","Snell Roundhand",cursive;
  letter-spacing:.4px;color:rgba(255,255,255,.78);
  text-shadow:0 0 3px rgba(255,255,255,.38),0 0 8px rgba(255,255,255,.22),0 2px 14px rgba(0,0,0,.32);
  filter:drop-shadow(0 5px 14px rgba(255,255,255,.08));opacity:.82;line-height:.95;-webkit-font-smoothing:antialiased;pointer-events:none
}

/* Responsive */
@media (max-width:1024px){:root{--frame-max-w:88vw;--frame-max-h:74vh}}
@media (max-width:768px){:root{--frame-max-w:92vw;--frame-max-h:70vh;--radius:18px}}
@media (max-width:480px){:root{--frame-max-w:94vw;--frame-max-h:58vh;--radius:14px}.btn{width:46px;height:46px;font-size:18px}}
.stage { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

/* Feintuning Typo */
.center-main{ font-size: clamp(38px, 7.2vw, 132px); letter-spacing: 1.5px; }
.center-script{ transform: translate(-50%, -19.5%) rotate(-4.8deg); font-size: clamp(26px, 5.4vw, 94px); opacity: .80; }
@media (max-width:1199px){ .center-main{ font-size: clamp(36px, 7.8vw, 120px); } .center-script{ transform: translate(-50%, -21%) rotate(-5.2deg); font-size: clamp(26px, 6vw, 88px); } }
@media (max-width:900px){ .center-main{ font-size: clamp(34px, 8.6vw, 108px); } .center-script{ transform: translate(-50%, -22.5%) rotate(-5.6deg); font-size: clamp(24px, 7vw, 82px); } }
@media (max-width:420px){ .center-main{ font-size: clamp(30px, 9.6vw, 96px); letter-spacing: 1px; } .center-script{ transform: translate(-50%, -24%) rotate(-6deg); font-size: clamp(22px, 8.4vw, 72px); text-shadow:0 0 2px rgba(255,255,255,.34),0 0 6px rgba(255,255,255,.18),0 1px 10px rgba(0,0,0,.28); } }