:root{
  color-scheme: dark;
  --stage-w: min(100vw, 56.25svh);
  --stage-h: min(100svh, 177.777vw);
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#01030a}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  color:#fff;
}

#space{
  position:fixed; inset:0; width:100%; height:100%;
  background:
    radial-gradient(circle at 50% 35%, rgba(30,71,135,.13), transparent 32%),
    radial-gradient(circle at 25% 80%, rgba(33,56,117,.10), transparent 28%),
    linear-gradient(#01030b,#000);
}

.app{
  position:fixed; inset:0;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.stage{
  position:relative;
  width:var(--stage-w);
  height:100svh;
  max-height:100svh;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(12,33,64,.4), rgba(0,0,0,.82) 62%, #000 100%);
  box-shadow:0 0 100px rgba(0,0,0,.8);
}

@media (min-aspect-ratio: 3/4){
  .stage{
    height:min(100svh, 960px);
    width:calc(min(100svh, 960px) * 9 / 16);
    border-left:1px solid rgba(255,255,255,.035);
    border-right:1px solid rgba(255,255,255,.035);
  }
}

.layer{position:absolute; inset:0}
.phase1{
  opacity:0;
  pointer-events:none;
  z-index:5;
  transition:opacity .66s cubic-bezier(.32,0,.24,1);
}
.phase1.active{opacity:1; pointer-events:auto}
.phase1.handoff{opacity:0; pointer-events:none}

.earth-wrap,
.bridge-earth-wrap{
  position:absolute;
  left:50%; top:38%;
  width:min(82%, 46svh);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 24px rgba(145,211,255,.20));
}
.earth{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  user-select:none;
  animation:earthBreath 7s ease-in-out infinite alternate;
}
.atmosphere{
  position:absolute; inset:3%;
  border-radius:50%;
  box-shadow:
    0 0 8px 2px rgba(190,232,255,.42),
    0 0 28px 9px rgba(72,147,255,.13),
    inset 0 0 10px rgba(190,230,255,.18);
  animation:haze 5.5s ease-in-out infinite alternate;
}
@keyframes earthBreath{
  from{transform:rotate(-.35deg) scale(.997)}
  to{transform:rotate(.35deg) scale(1.003)}
}
@keyframes haze{
  from{opacity:.60; filter:blur(.4px)}
  to{opacity:.92; filter:blur(1.4px)}
}

.copy{
  position:absolute;
  left:8%; right:8%;
  bottom:15.5%;
  text-align:center;
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  letter-spacing:.10em;
  line-height:1.85;
  text-shadow:0 2px 18px rgba(0,0,0,.95);
  opacity:0;
  animation:copyIn 1.8s ease forwards .55s;
}
.copy p{margin:.1em 0;font-size:clamp(15px,4.1vw,22px);font-weight:400}
.copy .line{
  opacity:0;
  filter:blur(18px);
  transform:translateY(10px) scale(.985);
  animation:lineReveal 1.25s cubic-bezier(.2,.7,.15,1) forwards;
}
.copy .line1{animation-delay:.45s}
.copy .line2{animation-delay:1.55s}
.copy .line3{animation-delay:2.85s}
.copy .lead{margin-top:1.25em;font-size:clamp(18px,4.8vw,25px);letter-spacing:.18em}
@keyframes copyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lineReveal{
  0%{opacity:0;filter:blur(18px);transform:translateY(12px) scale(.985)}
  55%{opacity:.88;filter:blur(6px)}
  100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}

.trigger{
  position:absolute;
  left:50%; bottom:8%;
  transform:translateX(-50%);
  min-width:170px;
  padding:13px 22px;
  border:1px solid rgba(210,232,255,.38);
  border-radius:999px;
  background:rgba(3,10,22,.48);
  color:#eef7ff;
  letter-spacing:.15em;
  font-size:15px;
  backdrop-filter:blur(8px);
  box-shadow:0 0 22px rgba(73,143,230,.10), inset 0 0 16px rgba(120,184,255,.04);
  cursor:pointer;
  opacity:0;
  animation:triggerIn .9s ease forwards 4.0s;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.trigger:active{transform:translateX(-50%) scale(.96)}
.trigger:hover{background:rgba(9,26,50,.62);box-shadow:0 0 30px rgba(86,168,255,.18)}
@keyframes triggerIn{
  0%{opacity:0;filter:blur(10px);transform:translateX(-50%) translateY(10px)}
  100%{opacity:1;filter:blur(0);transform:translateX(-50%) translateY(0)}
}

/* ---- Flow video handoff ---- */
.video-layer{
  z-index:2;
  opacity:0;
  pointer-events:none;
  background:#000;
  transition:opacity .72s cubic-bezier(.28,0,.22,1);
}
.video-layer.active{opacity:1}

.video-motion{
  position:absolute;
  inset:0;
  transform-origin:50% 50%;
  /* Slightly smaller than the mathematically matched size on purpose.
     This hides the video globe rim inside the original Earth overlay during handoff,
     so the viewer reads it as a single object instead of seeing the lower helmet edge.
     Final framing is unchanged later. */
  transform:translate(-0.815%, 6.152%) scale(.8815);
  transition:transform 2.70s cubic-bezier(.24,.02,.16,1);
  will-change:transform;
}
.video-motion.native{transform:translate(0,0) scale(1)}

.video-reframe{
  position:absolute;
  inset:0;
  transform-origin:50% 50%;
  transform:translateX(0) scale(1);
  transition:transform 2.70s cubic-bezier(.24,.02,.16,1);
  will-change:transform;
}
/* After the original Earth is completely gone:
   normal UNIFORM enlargement only, plus extra left shift.
   1.15x gives enough crop headroom for a 47px left move without edge gaps. */
.video-reframe.final-center{
  /* FIXED: approved final neutral position */
  transform:translateX(-6.528%) scale(1.15);
}

#revealVideo,
.final-still{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#revealVideo{
  background:#000;
}
.final-still{
  opacity:0;
  z-index:2;
  pointer-events:none;
  transition:opacity .16s linear;
}
.final-still.lock{opacity:1}

.bridge-earth{
  position:absolute;
  inset:0;
  z-index:8;
  opacity:0;
  pointer-events:none;
}
.bridge-earth.active{opacity:1}
.bridge-earth.release{
  opacity:0;
  transition:opacity 1.48s cubic-bezier(.32,0,.24,1);
}
.bridge-earth-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
}
.bridge-atmosphere{
  position:absolute;
  inset:3%;
  border-radius:50%;
  box-shadow:
    0 0 8px 2px rgba(190,232,255,.34),
    0 0 28px 9px rgba(72,147,255,.12);
  opacity:.72;
}
.bridge-earth-wrap{
  transition:transform 1.10s cubic-bezier(.22,.7,.2,1), filter 1.10s cubic-bezier(.22,.7,.2,1);
  will-change:transform, filter;
}
.bridge-earth.blooming .bridge-earth-wrap{
  transform:translate(-50%,-50%) scale(1.035);
  filter:
    drop-shadow(0 0 18px rgba(170,224,255,.30))
    drop-shadow(0 0 38px rgba(116,180,255,.22));
}
.bridge-earth.blooming .bridge-atmosphere{
  opacity:.98;
  box-shadow:
    0 0 12px 3px rgba(210,240,255,.52),
    0 0 34px 12px rgba(90,166,255,.22),
    0 0 70px 18px rgba(115,177,255,.12);
}
.bridge-earth::after{
  content:"";
  position:absolute;
  left:50%; top:38%;
  width:min(84%, 47.2svh);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.995);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(255,255,255,0) 59%,
      rgba(187,226,255,.10) 67%,
      rgba(66,116,186,.18) 73%,
      rgba(0,0,0,.10) 76%,
      rgba(0,0,0,0) 84%);
  filter:blur(6px);
  transition:opacity .7s ease, transform .9s ease;
}
.bridge-earth.blooming::after{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.05);
}
.handoff-glow{
  position:absolute;
  z-index:9;
  left:50%; top:38%;
  width:min(88%, 50svh);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(210,238,255,.00) 46%,
      rgba(160,211,255,.16) 58%,
      rgba(92,153,230,.08) 67%,
      transparent 75%);
  filter:blur(7px);
}
.handoff-glow.pulse{animation:handoffPulse 1.05s ease-out both}
@keyframes handoffPulse{
  0%{opacity:0}
  28%{opacity:.72}
  100%{opacity:0}
}

.particles{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:12;
}

/* Buttons live only in the visually quiet lower-table area of the final frame. */
.rage-menu{
  position:absolute;
  left:7%; right:7%; bottom:3.0%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  z-index:15;
  transition:opacity .42s ease, transform .42s ease;
}
.rage-menu::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-6%; right:-6%; bottom:-28%;
  height:165%;
  background:linear-gradient(to top,rgba(0,0,0,.58),rgba(0,0,0,.18) 58%,transparent);
  pointer-events:none;
}
.rage-menu.show{
  opacity:1; transform:none; pointer-events:auto;
}
.rage-menu button{
  min-height:48px;
  border:1px solid rgba(224,236,255,.28);
  border-radius:14px;
  color:white;
  background:rgba(6,8,12,.70);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  padding:8px 7px;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.rage-menu button:active{transform:scale(.97)}

.vignette{
  position:absolute; inset:0; z-index:30;
  pointer-events:none;
  box-shadow:inset 0 0 85px rgba(0,0,0,.55);
}
.flash{
  position:absolute; inset:0;
  z-index:40; pointer-events:none;
  background:rgba(190,224,255,.25);
  opacity:0;
}
.flash.hit{animation:flash .25s ease}
@keyframes flash{0%{opacity:0}35%{opacity:.48}100%{opacity:0}}

.stage.shake{animation:shake .35s linear}
@keyframes shake{
  0%,100%{transform:translate(0)}
  20%{transform:translate(-5px,2px)}
  40%{transform:translate(4px,-2px)}
  60%{transform:translate(-3px,-1px)}
  80%{transform:translate(2px,2px)}
}

@media (prefers-reduced-motion: reduce){
  .earth,.atmosphere{animation:none}
  .copy{animation:none;opacity:1}
  .video-motion{transition:none}
}


/* ---------- v25 mystical audio control ---------- */
.sound-toggle{
  position:absolute; z-index:50;
  top:max(12px, env(safe-area-inset-top));
  right:max(12px, env(safe-area-inset-right));
  min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:0 12px;
  border:1px solid rgba(225,238,255,.18);
  border-radius:999px;
  background:rgba(2,7,16,.34);
  color:rgba(238,247,255,.72);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  font-size:10px; letter-spacing:.14em;
  cursor:pointer; opacity:.74;
  transition:opacity .22s ease, background .22s ease, border-color .22s ease;
}
.sound-toggle:active{transform:scale(.96)}
.sound-toggle[aria-pressed="true"]{
  opacity:.96;
  background:rgba(7,18,35,.46);
  border-color:rgba(190,226,255,.30);
}
.sound-toggle .sound-icon{
  font-size:16px; line-height:1;
  text-shadow:0 0 12px rgba(180,225,255,.58);
}
.sound-toggle[aria-pressed="false"] .sound-icon{opacity:.48}
.sound-toggle[aria-pressed="true"] .sound-icon{animation:soundShimmer 2.8s ease-in-out infinite}
@keyframes soundShimmer{
  0%,100%{opacity:.72}
  50%{opacity:1;filter:drop-shadow(0 0 6px rgba(180,225,255,.55))}
}
@media (max-width:420px){
  .sound-toggle .sound-label{display:none}
  .sound-toggle{padding:0;width:44px}
}

.sound-toggle[aria-pressed="true"]::after{
  content:"ON";
  margin-left:3px;
  font-size:9px;
  letter-spacing:.08em;
  opacity:.72;
}
@media (max-width:420px){
  .sound-toggle[aria-pressed="true"]::after{
    position:absolute;
    right:-2px;
    bottom:-3px;
    font-size:8px;
  }
}


/* ---------- v32 START gate ---------- */
/* Do not show copy or キメツケる until START is pressed. */
.copy,
.copy .line,
.trigger{
  animation:none !important;
}

.stage.started .copy{
  animation:copyIn 1.8s ease forwards .45s !important;
}
.stage.started .copy .line{
  animation:lineReveal 1.25s cubic-bezier(.2,.7,.15,1) forwards !important;
}
.stage.started .copy .line1{animation-delay:.45s !important}
.stage.started .copy .line2{animation-delay:1.55s !important}
.stage.started .copy .line3{animation-delay:2.85s !important}
.stage.started .trigger{
  animation:triggerIn .9s ease forwards 4.0s !important;
}

.start-button{
  position:absolute;
  left:50%;
  bottom:21.5%;
  transform:translateX(-50%);
  z-index:16;
  min-width:136px;
  min-height:46px;
  padding:11px 24px;
  border:1px solid rgba(214,233,255,.34);
  border-radius:999px;
  background:rgba(3,10,22,.40);
  color:rgba(242,248,255,.92);
  font-size:13px;
  font-weight:500;
  letter-spacing:.24em;
  text-indent:.24em;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:
    0 0 24px rgba(86,154,230,.10),
    inset 0 0 18px rgba(133,190,255,.035);
  cursor:pointer;
  opacity:1;
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.7,.2,1),
    filter .55s ease,
    background .2s ease;
}
.start-button:hover{
  background:rgba(8,23,45,.54);
}
.start-button:active{
  transform:translateX(-50%) scale(.96);
}
.stage.started .start-button{
  opacity:0;
  filter:blur(6px);
  transform:translateX(-50%) translateY(8px) scale(.97);
  pointer-events:none;
}

/* SOUND toggle is intentionally removed in v32:
   START itself is the user's audio-unlock gesture. */
.sound-toggle{display:none !important}


/* =========================================================
   v35 — rage video system + aggressive browser-side FX
   ========================================================= */

.loading-overlay{
  position:absolute;
  left:50%;
  bottom:10.8%;
  width:min(64%, 290px);
  transform:translate(-50%,8px);
  z-index:22;
  opacity:0;
  pointer-events:none;
  text-align:center;
  transition:opacity .28s ease, transform .28s ease;
}
.loading-overlay.show{
  opacity:1;
  transform:translate(-50%,0);
}
.loading-label{
  font-size:11px;
  letter-spacing:.30em;
  text-indent:.30em;
  color:rgba(235,246,255,.80);
  text-shadow:0 0 16px rgba(126,196,255,.42);
  margin-bottom:9px;
}
.loading-track{
  position:relative;
  height:2px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(210,235,255,.12);
  box-shadow:0 0 12px rgba(96,166,234,.08);
}
.loading-bar{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:99px;
  background:rgba(224,243,255,.88);
  box-shadow:0 0 9px rgba(125,201,255,.68);
  transition:width .12s linear;
}
.loading-percent{
  margin-top:7px;
  font-size:9px;
  letter-spacing:.12em;
  color:rgba(224,239,255,.56);
}

.rage-layer{
  position:absolute;
  inset:0;
  z-index:14;
  pointer-events:none;
  opacity:0;
}
.rage-layer.active{opacity:1}
.rage-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  opacity:0;
  pointer-events:none;
  transform:scale(1.002);
  filter:saturate(1.05) contrast(1.02);
  transition:opacity .075s linear, filter .12s linear;
  will-change:opacity,filter,transform;
}
.rage-video.active{opacity:1}
.rage-video.returning{
  opacity:0;
  transition:opacity .05s linear;
}
.stage.raging .rage-video.active{
  filter:saturate(1.18) contrast(1.07);
}

/* FX sit over the rage clip, but never cover the menu once the clip ends. */
.rage-fx{
  position:absolute;
  inset:0;
  z-index:18;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
}
.rage-fx.active{opacity:1}

.rage-red-vignette,
.rage-speedlines,
.rage-shockwave,
.rage-hot-edge,
.rage-scan{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.rage-red-vignette{
  background:
    radial-gradient(circle at 50% 44%,
      transparent 0 34%,
      rgba(120,0,0,.05) 52%,
      rgba(160,0,0,.18) 76%,
      rgba(62,0,0,.46) 100%);
  mix-blend-mode:screen;
  animation:rageVignette .34s ease-in-out infinite alternate;
}
@keyframes rageVignette{
  from{opacity:.38; transform:scale(1.00)}
  to{opacity:.82; transform:scale(1.018)}
}

/* Manga-style radial impact lines: center kept clear for face/body. */
.rage-speedlines{
  left:-14%; right:-14%; top:-10%; bottom:-10%;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 43%,
      rgba(255,244,236,.92) 0deg .22deg,
      transparent .32deg 3.2deg,
      rgba(255,92,64,.64) 3.32deg 3.48deg,
      transparent 3.62deg 6.7deg
    );
  -webkit-mask-image:radial-gradient(circle at 50% 43%, transparent 0 27%, rgba(0,0,0,.18) 39%, #000 68%);
  mask-image:radial-gradient(circle at 50% 43%, transparent 0 27%, rgba(0,0,0,.18) 39%, #000 68%);
  mix-blend-mode:screen;
  opacity:.30;
  animation:rageLines .14s steps(2,end) infinite;
}
@keyframes rageLines{
  0%{transform:rotate(-.7deg) scale(1.00);opacity:.22}
  50%{transform:rotate(.9deg) scale(1.035);opacity:.42}
  100%{transform:rotate(-.2deg) scale(1.015);opacity:.28}
}

.rage-hot-edge{
  inset:-3%;
  border:3px solid rgba(255,70,38,.0);
  box-shadow:
    inset 0 0 22px rgba(255,52,26,.26),
    inset 0 0 70px rgba(120,0,0,.34),
    0 0 32px rgba(255,42,12,.15);
  animation:rageEdge .20s steps(2,end) infinite;
}
@keyframes rageEdge{
  0%,100%{opacity:.35}
  50%{opacity:.92}
}

/* Thin intermittent scan/glitch slices. */
.rage-scan{
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 36px,
      rgba(255,255,255,.055) 37px,
      transparent 39px 74px
    );
  mix-blend-mode:screen;
  opacity:.22;
  animation:rageScan .19s steps(2,end) infinite;
}
@keyframes rageScan{
  from{transform:translateY(-10px)}
  to{transform:translateY(10px)}
}

.rage-shockwave{
  left:50%;
  top:45%;
  width:22%;
  height:auto;
  aspect-ratio:1;
  inset:auto;
  transform:translate(-50%,-50%) scale(.10);
  border-radius:50%;
  border:2px solid rgba(255,245,235,.94);
  box-shadow:
    0 0 0 4px rgba(255,92,54,.15),
    0 0 26px rgba(255,92,54,.66);
  opacity:0;
}
.rage-shockwave.bang{
  animation:rageShock .42s cubic-bezier(.08,.72,.18,1) both;
}
@keyframes rageShock{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.12)}
  65%{opacity:.55}
  100%{opacity:0;transform:translate(-50%,-50%) scale(5.0)}
}

/* Much harder shake than the old placeholder. JS sets --rage-power per clip. */
.stage.raging{
  --rage-power:1;
  animation:rageContinuousShake .115s steps(2,end) infinite;
}
@keyframes rageContinuousShake{
  0%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(calc(-2.4px * var(--rage-power)),calc(1.2px * var(--rage-power))) rotate(calc(-.11deg * var(--rage-power)))}
  40%{transform:translate(calc(2.0px * var(--rage-power)),calc(-1.6px * var(--rage-power))) rotate(calc(.10deg * var(--rage-power)))}
  60%{transform:translate(calc(-1.5px * var(--rage-power)),calc(-.8px * var(--rage-power))) rotate(calc(-.07deg * var(--rage-power)))}
  80%{transform:translate(calc(1.7px * var(--rage-power)),calc(1.5px * var(--rage-power))) rotate(calc(.08deg * var(--rage-power)))}
  100%{transform:translate(0,0) rotate(0)}
}

.flash.rage-hit{
  background:rgba(255,238,226,.84);
  animation:rageFlash .18s ease-out both;
}
@keyframes rageFlash{
  0%{opacity:0}
  18%{opacity:.90}
  100%{opacity:0}
}

.rage-menu.busy{
  opacity:0 !important;
  transform:translateY(14px) scale(.97) !important;
  pointer-events:none !important;
}
.rage-menu button.seen{
  border-color:rgba(255,105,76,.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,78,45,.08),
    0 0 12px rgba(255,51,26,.06);
}
.rage-menu button.seen::after{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  margin-left:6px;
  border-radius:50%;
  background:rgba(255,107,80,.76);
  box-shadow:0 0 7px rgba(255,64,34,.55);
  vertical-align:middle;
}

@media (prefers-reduced-motion: reduce){
  .stage.raging{animation:none}
  .rage-speedlines,.rage-red-vignette,.rage-hot-edge,.rage-scan{animation:none}
}


/* =========================================================
   v36 — RAGE MAX: louder motion, top + bottom impact lines
   ========================================================= */

/* The old expanding ring/shockwave is intentionally removed. */
.rage-shockwave{display:none !important}

/* Two manga impact-line fields centered on the FACE / NECK area,
   not the desk. They explode outward from around 50% / 56%. */
.rage-speedlines{
  inset:0;
  width:168%;
  height:168%;
  left:-34%;
  top:-34%;
  opacity:.68;
  mix-blend-mode:screen;
  pointer-events:none;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 43%,
      rgba(255,250,242,.98) 0deg .18deg,
      transparent .26deg 1.75deg,
      rgba(255,88,58,.76) 1.88deg 2.04deg,
      transparent 2.18deg 4.9deg
    );
  animation:rageLinesMax .085s steps(2,end) infinite;
  filter:
    drop-shadow(0 0 6px rgba(255,105,72,.24))
    drop-shadow(0 0 14px rgba(255,70,38,.12));
}

.rage-speedlines-bottom{
  /*
    Clear oval follows the helmet/head silhouette.
    Lines are invisible across the helmet itself and start right around its contour.
  */
  -webkit-mask-image:
    radial-gradient(ellipse 29% 23% at 50% 37%,
      transparent 0 88%,
      rgba(0,0,0,.10) 93%,
      rgba(0,0,0,.55) 98%,
      #000 104%),
    linear-gradient(to top, #000 0 72%, rgba(0,0,0,.95) 86%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 29% 23% at 50% 37%,
      transparent 0 88%,
      rgba(0,0,0,.10) 93%,
      rgba(0,0,0,.55) 98%,
      #000 104%),
    linear-gradient(to top, #000 0 72%, rgba(0,0,0,.95) 86%, transparent 100%);
  mask-composite:intersect;
  -webkit-mask-composite:source-in;
}

.rage-speedlines-top{
  -webkit-mask-image:
    radial-gradient(ellipse 29% 23% at 50% 37%,
      transparent 0 88%,
      rgba(0,0,0,.10) 93%,
      rgba(0,0,0,.55) 98%,
      #000 104%),
    linear-gradient(to bottom, #000 0 72%, rgba(0,0,0,.95) 86%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 29% 23% at 50% 37%,
      transparent 0 88%,
      rgba(0,0,0,.10) 93%,
      rgba(0,0,0,.55) 98%,
      #000 104%),
    linear-gradient(to bottom, #000 0 72%, rgba(0,0,0,.95) 86%, transparent 100%);
  mask-composite:intersect;
  -webkit-mask-composite:source-in;
}

@keyframes rageLinesMax{
  0%{opacity:.46; transform:translate3d(-1px,1px,0) scale(1.00) rotate(-.4deg); filter:blur(0px) brightness(1.00)}
  25%{opacity:.88; transform:translate3d(2px,-1px,0) scale(1.035) rotate(.6deg); filter:blur(.10px) brightness(1.26)}
  50%{opacity:.58; transform:translate3d(-2px,2px,0) scale(1.018) rotate(-.3deg); filter:blur(0px) brightness(1.08)}
  75%{opacity:.92; transform:translate3d(1px,-2px,0) scale(1.05) rotate(.5deg); filter:blur(.12px) brightness(1.34)}
  100%{opacity:.66; transform:translate3d(0,0,0) scale(1.028) rotate(0deg); filter:blur(.04px) brightness(1.14)}
}

/* Stronger full-stage shake. */
.stage.raging{
  animation:rageContinuousShakeMax .082s steps(2,end) infinite !important;
  transform-origin:50% 53%;
}

@keyframes rageContinuousShakeMax{
  0%   {transform:translate(0,0) rotate(0deg)}
  12%  {transform:translate(calc(-4.8px * var(--rage-power)),calc(2.2px * var(--rage-power))) rotate(calc(-.22deg * var(--rage-power)))}
  25%  {transform:translate(calc(4.1px * var(--rage-power)),calc(-3.0px * var(--rage-power))) rotate(calc(.19deg * var(--rage-power)))}
  38%  {transform:translate(calc(-3.4px * var(--rage-power)),calc(-2.5px * var(--rage-power))) rotate(calc(-.16deg * var(--rage-power)))}
  52%  {transform:translate(calc(4.7px * var(--rage-power)),calc(2.9px * var(--rage-power))) rotate(calc(.22deg * var(--rage-power)))}
  66%  {transform:translate(calc(-4.1px * var(--rage-power)),calc(1.4px * var(--rage-power))) rotate(calc(-.19deg * var(--rage-power)))}
  80%  {transform:translate(calc(3.0px * var(--rage-power)),calc(-3.5px * var(--rage-power))) rotate(calc(.16deg * var(--rage-power)))}
  92%  {transform:translate(calc(-2.4px * var(--rage-power)),calc(2.7px * var(--rage-power))) rotate(calc(-.12deg * var(--rage-power)))}
  100% {transform:translate(0,0) rotate(0deg)}
}

/* Aggressive zoom breathing on the rage footage itself.
   This combines with the stage shake above. */
.stage.raging .rage-video.active{
  animation:rageZoomMax .50s cubic-bezier(.16,.72,.18,1) infinite alternate !important;
  transform-origin:50% 43%;
  filter:saturate(1.30) contrast(1.12) brightness(1.04) !important;
}

@keyframes rageZoomMax{
  0%   {transform:scale(1.006)}
  28%  {transform:scale(1.042)}
  55%  {transform:scale(1.020)}
  78%  {transform:scale(1.067)}
  100% {transform:scale(1.030)}
}

/* More visible hot frame and vignette. */
.rage-red-vignette{
  background:
    radial-gradient(circle at 50% 43%,
      transparent 0 25%,
      rgba(120,0,0,.09) 43%,
      rgba(188,0,0,.27) 70%,
      rgba(70,0,0,.62) 100%) !important;
  animation:rageVignetteMax .20s ease-in-out infinite alternate !important;
}
@keyframes rageVignetteMax{
  from{opacity:.50;transform:scale(1.00)}
  to{opacity:1;transform:scale(1.035)}
}

.rage-hot-edge{
  box-shadow:
    inset 0 0 34px rgba(255,58,24,.46),
    inset 0 0 94px rgba(132,0,0,.50),
    0 0 46px rgba(255,42,12,.22) !important;
  animation:rageEdgeMax .12s steps(2,end) infinite !important;
}
@keyframes rageEdgeMax{
  0%{opacity:.38}
  50%{opacity:1}
  100%{opacity:.58}
}

/* Stronger impact flash, still very short. */
.flash.rage-hit{
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.98) 0 14%, rgba(255,224,209,.86) 32%, rgba(255,90,52,.40) 65%, transparent 100%) !important;
  animation:rageFlashMax .16s ease-out both !important;
}
@keyframes rageFlashMax{
  0%{opacity:0;transform:scale(.99)}
  13%{opacity:1;transform:scale(1.012)}
  42%{opacity:.44}
  100%{opacity:0;transform:scale(1.025)}
}

/* Slight RGB separation / micro-glitch on impact state. */
.stage.raging .rage-layer{
  filter:
    drop-shadow(2px 0 0 rgba(255,44,44,.20))
    drop-shadow(-2px 0 0 rgba(44,140,255,.16));
}

/* Keep controls stable even while the stage shakes. */
.rage-menu{
  transform-origin:50% 50%;
}


/* =========================================================
   v40 — concentration lines surround the helmet
   ========================================================= */

/* Both line layers now wrap around the whole head area.
   Near the subject they become more transparent instead of disappearing abruptly. */
.rage-speedlines{
  inset:auto !important;
  width:142% !important;
  height:142% !important;
  left:-21% !important;
  top:-21% !important;

  background:
    repeating-conic-gradient(
      from 0deg at 50% 43%,
      rgba(255,250,244,.98) 0deg .17deg,
      transparent .27deg 1.55deg,
      rgba(255,90,58,.76) 1.70deg 1.90deg,
      transparent 2.05deg 4.55deg
    ) !important;

  /*
    Inner area is not cut out anymore.
    It fades gradually:
    very transparent across the face/helmet,
    then progressively stronger toward the outside.
  */
  -webkit-mask-image:
    radial-gradient(
      ellipse 34% 29% at 50% 43%,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.05) 46%,
      rgba(0,0,0,.12) 56%,
      rgba(0,0,0,.30) 66%,
      rgba(0,0,0,.62) 76%,
      rgba(0,0,0,.92) 88%,
      #000 100%
    ) !important;
  mask-image:
    radial-gradient(
      ellipse 34% 29% at 50% 43%,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.05) 46%,
      rgba(0,0,0,.12) 56%,
      rgba(0,0,0,.30) 66%,
      rgba(0,0,0,.62) 76%,
      rgba(0,0,0,.92) 88%,
      #000 100%
    ) !important;

  mask-composite:add !important;
  -webkit-mask-composite:source-over !important;

  opacity:.72 !important;
  mix-blend-mode:screen !important;
  filter:
    drop-shadow(0 0 5px rgba(255,116,82,.28))
    drop-shadow(0 0 11px rgba(255,72,42,.14)) !important;
  transform-origin:50% 43% !important;
}

/* Two slightly different rotations/densities make the surround feel richer. */
.rage-speedlines-bottom{
  transform:rotate(-1.6deg) scale(1.01) !important;
  opacity:.66 !important;
}

.rage-speedlines-top{
  transform:rotate(1.9deg) scale(1.035) !important;
  opacity:.78 !important;
}

/* Animate both line layers without wiping out their base rotation. */
.rage-fx.active .rage-speedlines-bottom{
  animation:rageLinesWrapBottom .085s steps(2,end) infinite !important;
}
.rage-fx.active .rage-speedlines-top{
  animation:rageLinesWrapTop .078s steps(2,end) infinite !important;
}

@keyframes rageLinesWrapBottom{
  0%   {transform:rotate(-1.8deg) scale(1.00); opacity:.52}
  25%  {transform:rotate(-1.1deg) scale(1.045); opacity:.82}
  50%  {transform:rotate(-2.0deg) scale(1.018); opacity:.63}
  75%  {transform:rotate(-.8deg) scale(1.060); opacity:.86}
  100% {transform:rotate(-1.6deg) scale(1.028); opacity:.68}
}

@keyframes rageLinesWrapTop{
  0%   {transform:rotate(2.1deg) scale(1.015); opacity:.58}
  25%  {transform:rotate(1.3deg) scale(1.055); opacity:.90}
  50%  {transform:rotate(2.4deg) scale(1.025); opacity:.69}
  75%  {transform:rotate(1.0deg) scale(1.070); opacity:.94}
  100% {transform:rotate(1.9deg) scale(1.035); opacity:.76}
}