:root {
  --night: #02031c;
  --gold: #ffc72d;
  --gold-light: #fff4a8;
  --cyan: #24d8ff;
  --violet: #9f38ff;
  --artboard-width: 1672px;
  --artboard-height: 941px;
}

* { box-sizing: border-box; }

.theo-experience {
  width: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(52, 30, 155, .72), transparent 48%),
    radial-gradient(ellipse at 8% 72%, rgba(22, 83, 203, .42), transparent 34%),
    radial-gradient(ellipse at 92% 25%, rgba(132, 23, 178, .34), transparent 31%),
    linear-gradient(180deg, #01021a, #080335 54%, #02021b);
}

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 7% 16%, rgba(255,255,255,.76) 0 1px, transparent 1.8px),
    radial-gradient(circle at 19% 73%, rgba(117,203,255,.68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 19%, rgba(255,190,97,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 94% 78%, rgba(220,143,255,.68) 0 1px, transparent 1.8px);
  background-size: 11rem 9rem, 15rem 13rem, 17rem 11rem, 13rem 15rem;
}

.game-shell::before,
.game-shell::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.game-shell::before {
  inset: -20%;
  opacity: .42;
  background:
    radial-gradient(ellipse at 25% 58%, rgba(93, 41, 226, .52), transparent 30%),
    radial-gradient(ellipse at 76% 44%, rgba(25, 127, 255, .38), transparent 28%);
  filter: blur(2.2rem);
  animation: nebula-drift 28s ease-in-out infinite alternate;
}

.game-shell::after {
  left: -8%;
  right: -8%;
  bottom: -8%;
  height: 31%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(71, 49, 219, .33), transparent 67%);
  filter: blur(1.4rem);
  animation: horizon-breathe 10s ease-in-out infinite;
}

.full-bleed-world {
  position:absolute;
  z-index:0;
  inset:-2.4%;
  overflow:hidden;
  background:#040329;
  pointer-events:none;
}
.full-bleed-world img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  opacity:.82;
  filter:blur(.42rem) saturate(1.08) brightness(.72);
  transform:scale(1.035);
}
.full-bleed-world::after {
  position:absolute;
  content:"";
  inset:0;
  background:linear-gradient(90deg,rgba(4,3,41,.28),transparent 18%,transparent 82%,rgba(4,3,41,.28));
}

.scene-artboard {
  --scene-scale: .5;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: var(--artboard-width);
  height: var(--artboard-height);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--scene-scale));
  transform-origin: center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 1.8%,#000 98.2%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 1.8%,#000 98.2%,transparent 100%);
  box-shadow:0 0 4.8rem rgba(43,39,181,.38);
}

.reference-artboard,
.overlay-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.reference-artboard {
  z-index: 0;
  overflow: hidden;
  background: #03031d;
}

.reference-artboard > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.overlay-frame {
  z-index: 4;
  pointer-events: none;
}

.overlay-frame a,
.overlay-frame button,
.overlay-frame input,
.overlay-frame dialog { pointer-events: auto; }

.visually-hidden,
.sr-live {
  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;
}

.theo-experience a:focus-visible,
.theo-experience button:focus-visible,
.theo-experience input:focus-visible {
  outline: .2rem solid var(--gold-light);
  outline-offset: .16rem;
}

/* The raster supplies the authored world. This layer only adds deterministic light. */
.live-light-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.nebula-wash,
.horizon-breath {
  position: absolute;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
}

.nebula-wash {
  inset: 10% -8% 26%;
  opacity: .2;
  background:
    radial-gradient(ellipse at 29% 61%, rgba(113, 47, 255, .65), transparent 31%),
    radial-gradient(ellipse at 75% 45%, rgba(31, 144, 255, .46), transparent 30%);
  filter: blur(1.2rem);
  animation: nebula-drift 24s ease-in-out infinite alternate;
}

.horizon-breath {
  left: 3%;
  right: 2%;
  bottom: 27%;
  height: 16%;
  border-radius: 50%;
  opacity: .24;
  background: radial-gradient(ellipse, rgba(86, 97, 255, .7), transparent 64%);
  filter: blur(1.5rem);
  animation: horizon-breathe 8s ease-in-out infinite;
}

.live-star {
  position: absolute;
  width: .24%;
  aspect-ratio: 1;
  display: block;
  border-radius: 50%;
  opacity: .28;
  background: #fff;
  box-shadow: 0 0 .38em .14em #fff, 0 0 1.15em .35em rgba(93, 167, 255, .92);
  animation: twinkle 5.8s ease-in-out infinite;
}

.live-star:nth-of-type(3n) { color: #ffe478; background: currentColor; box-shadow: 0 0 .5em .16em currentColor, 0 0 1.35em .38em rgba(255, 129, 37, .75); }
.live-star:nth-of-type(4n) { color: #f5a7ff; background: currentColor; box-shadow: 0 0 .5em .16em currentColor, 0 0 1.4em .38em rgba(187, 57, 255, .78); }
.live-star:nth-of-type(5n) { animation-delay: -2.1s; }
.live-star:nth-of-type(7n) { animation-delay: -4.3s; }
.live-star-1{left:2.8%;top:8.2%}.live-star-2{left:7.7%;top:36.2%}.live-star-3{left:14.6%;top:7.6%}.live-star-4{left:20.2%;top:18.4%}.live-star-5{left:25.8%;top:9.4%}.live-star-6{left:33.4%;top:23.8%}.live-star-7{left:40.1%;top:7.7%}.live-star-8{left:48.8%;top:25.2%}.live-star-9{left:56.8%;top:10.8%}.live-star-10{left:63.2%;top:21.3%}.live-star-11{left:70.6%;top:13.7%}.live-star-12{left:77.4%;top:8.5%}.live-star-13{left:84.5%;top:20.8%}.live-star-14{left:91.6%;top:11.2%}.live-star-15{left:96.9%;top:30.1%}.live-star-16{left:5.2%;top:56.7%}.live-star-17{left:87.1%;top:57.2%}.live-star-18{left:97.4%;top:48.5%}

.hand-star-emitter {
  position: absolute;
  left: 23.17%;
  top: 25.93%;
  width: 7.9%;
  aspect-ratio: 1;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,224,.92) 0 2%, rgba(255,224,66,.58) 9%, rgba(255,170,0,.22) 29%, transparent 67%);
  filter: blur(.08rem);
  mix-blend-mode: screen;
  animation: hand-light 4.8s ease-in-out infinite;
}

.hand-star-emitter::before,
.hand-star-emitter::after,
.hand-star-emitter > i {
  position: absolute;
  content: "";
  inset: 17%;
  border-radius: 50%;
  box-shadow: 0 0 1.3rem rgba(255, 232, 88, .88), inset 0 0 .9rem rgba(255,255,255,.64);
}

.hand-star-emitter::after {
  inset: 45% -12%;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,222,.85), transparent);
  box-shadow: none;
  transform: rotate(18deg);
  animation: glint-ray 7.2s ease-in-out infinite;
}

.hand-star-emitter > i { inset: -9% 48%; background: linear-gradient(transparent, rgba(255,244,185,.72), transparent); box-shadow: none; transform: rotate(28deg); }

.gold-glint {
  position: absolute;
  display: block;
  width: 1.15%;
  aspect-ratio: 1;
  opacity: 0;
  background: radial-gradient(circle, #fff 0 5%, #ffe45b 12%, transparent 54%);
  filter: drop-shadow(0 0 .6rem #ffb000);
  animation: gold-glint 8.6s ease-in-out infinite;
}

.gold-glint::before,
.gold-glint::after { position: absolute; content: ""; inset: 46% -75%; background: linear-gradient(90deg, transparent, #fff7b5, transparent); }
.gold-glint::after { transform: rotate(90deg); }
.gold-glint-one { left: 47.7%; top: 9.1%; }
.gold-glint-two { left: 66.9%; top: 18.5%; animation-delay: -4.25s; }

/* The live header masks the sample identity/navigation in the art. */
.game-topbar {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.05%;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto minmax(300px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 4px 3.05%;
  border-bottom: 1px solid rgba(73, 67, 255, .78);
  background:
    radial-gradient(ellipse at 9% -35%, rgba(130, 65, 255, .27), transparent 30%),
    linear-gradient(180deg, rgba(5, 7, 48, .985), rgba(1, 3, 30, .985));
  box-shadow: inset 0 -.08rem .25rem rgba(69, 61, 255, .3), 0 .22rem 1.1rem rgba(9, 4, 62, .55), 0 .16rem 1rem rgba(51, 77, 255, .2);
  pointer-events: auto;
}

.mini-brand,
.player,
.game-topbar nav,
.game-topbar nav a,
.nav-button { display: flex; align-items: center; }

.mini-brand { gap: 12px; color: #fff; text-decoration: none; letter-spacing: .015em; filter:drop-shadow(0 .2rem .42rem rgba(0,0,0,.48)); }
.mini-brand strong { color:transparent; background:linear-gradient(180deg,#fff 0%,#fffbe5 24%,#ffe783 50%,#dc9a1f 76%,#fff0ad 100%); -webkit-background-clip:text; background-clip:text; font-size:23px; font-weight:950; letter-spacing:.025em; -webkit-text-stroke:.015em rgba(91,42,4,.34); text-shadow:0 0 .65rem rgba(255,204,76,.2); filter:drop-shadow(0 .08rem .035rem rgba(62,21,2,.82)) drop-shadow(0 0 .38rem rgba(255,199,45,.28)); }
.mini-shield {
  position: relative;
  width: 45px;
  aspect-ratio: .86;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  border: .14rem solid rgba(255, 221, 72, .92);
  border-radius: .45rem .45rem 1rem 1rem;
  background:radial-gradient(circle at 34% 23%,rgba(255,255,255,.34),transparent 24%),linear-gradient(145deg,#a13cf0 0%,#4e189f 48%,#1d0d5e 100%);
  box-shadow:inset .08rem .08rem .25rem rgba(255,255,255,.4),inset -.1rem -.18rem .4rem rgba(21,2,79,.7),0 0 .42rem rgba(255,232,106,.7),0 0 1.05rem rgba(255,169,30,.34);
}
.mini-shield::before { position: absolute; content: "♛"; top: -13px; color: var(--gold); font-size: 14px; }

.game-topbar nav { gap: 8px; }
.game-topbar nav a,
.nav-button {
  width: auto;
  min-height: 36px;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #d5d0e7;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
}
.game-topbar nav a:hover,
.game-topbar nav a.is-active,
.nav-button.is-active,
.nav-button:hover {
  color: #fff;
  border-color: rgba(208, 91, 255, .82);
  background: linear-gradient(180deg, rgba(124, 37, 209, .92), rgba(55, 19, 124, .8));
  box-shadow: inset 0 0 .8rem rgba(227, 99, 255, .22), 0 0 1rem rgba(153, 47, 255, .32);
}
.game-topbar nav a:first-child { color: var(--gold-light); }
.player { justify-self:end; gap:11px; font-size:16px; }
.player strong { color:transparent; background:linear-gradient(180deg,#fff,#eafaff 48%,#a6dfff); -webkit-background-clip:text; background-clip:text; letter-spacing:.015em; text-shadow:0 0 .75rem rgba(67,211,255,.18); filter:drop-shadow(0 .08rem .035rem rgba(4,19,62,.92)); }
.avatar {
  width: 43px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid #4ae7ff;
  border-radius: 50%;
  overflow:hidden;
  color:#17052d;
  background:linear-gradient(145deg,#a6f8ff,#9f66ff);
  font-weight: 950;
  box-shadow:inset 0 0 .5rem rgba(255,255,255,.6),0 0 .38rem rgba(191,249,255,.85),0 0 1.2rem rgba(44,220,255,.5),0 0 1.8rem rgba(129,68,255,.22);
}
.avatar img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 27%; transform:scale(1.1); }

.one-screen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.live-mask,
.game-dialog {
  border: 1px solid rgba(143, 112, 255, .7);
  color: #fff;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(116, 83, 255, .2), transparent 52%),
    linear-gradient(145deg, rgba(10, 8, 63, .95), rgba(2, 4, 34, .955));
  box-shadow: inset 0 0 2.1rem rgba(73, 57, 206, .22), 0 .55rem 1.8rem rgba(0,0,0,.3), 0 0 .55rem rgba(181, 148, 255, .24), 0 0 1.55rem rgba(77, 53, 255, .24);
  backdrop-filter: blur(.46rem);
}

.point-palace,
.challenge-panel,
.stats-ribbon,
.rewards-panel { position: absolute; pointer-events: auto; }

.point-palace {
  left: 28.48%;
  top: 27.58%;
  width: 30.25%;
  height: 30.75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .55% 1.2%;
  overflow: hidden;
  border-color: rgba(208, 91, 255, .76);
  border-radius: 1.65rem;
  text-align: center;
  box-shadow: inset .06rem 0 rgba(255,76,216,.88), inset -.06rem 0 rgba(35,223,255,.88), inset 0 0 2.8rem rgba(42,34,171,.34), 0 0 1.65rem rgba(199,46,255,.34);
}
.point-palace::before { position:absolute; content:""; width:76%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,243,174,.17),rgba(255,177,22,.1) 31%,transparent 68%); filter:blur(.12rem); animation:ambient-pulse 6.4s ease-in-out infinite; }
.point-palace::after { position:absolute; content:""; inset:6% 9%; opacity:.42; pointer-events:none; background:radial-gradient(circle at 12% 28%,#fff 0 1px,transparent 2px),radial-gradient(circle at 23% 77%,#ffe993 0 1px,transparent 2px),radial-gradient(circle at 38% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 56% 83%,#fff3bc 0 1px,transparent 2px),radial-gradient(circle at 69% 24%,#fff 0 1px,transparent 2px),radial-gradient(circle at 84% 69%,#ffd45d 0 1px,transparent 2px),radial-gradient(circle at 92% 36%,#fff 0 1px,transparent 2px); filter:drop-shadow(0 0 .26rem rgba(255,221,112,.9)); animation:stardust-drift 11s ease-in-out infinite alternate; }
.point-palace > * { position: relative; z-index: 1; }
.point-palace > p:first-child { margin: 0; font-size: 20px; font-weight: 950; letter-spacing: .035em; }
.main-points { position:relative; isolation:isolate; display:block; margin-top:-.04em; color:transparent; background:linear-gradient(180deg,#fff 0%,#fffdf4 20%,#fff1b0 43%,#ffd86a 67%,#f2b13d 86%,#d98b24 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:.003em rgba(138,82,25,.34); font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif; font-size:132px; font-weight:850; font-kerning:normal; line-height:.78; letter-spacing:-.025em; text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; filter:drop-shadow(0 .012em .045em rgba(104,48,8,.42)) drop-shadow(0 0 .22rem rgba(255,252,222,.88)) drop-shadow(0 0 .58rem rgba(255,207,77,.56)); animation:point-pulse 5.8s ease-in-out infinite; }
.main-points::before { position:absolute; z-index:-1; content:attr(data-points); inset:0; color:rgba(255,211,91,.62); -webkit-text-stroke:.008em rgba(255,241,181,.24); filter:blur(.085em); opacity:.66; transform:scale(1.018); text-shadow:0 0 .2em rgba(255,253,229,.86),0 0 .42em rgba(255,216,96,.6),0 0 .82em rgba(255,164,32,.3); }
.main-points::after { position:absolute; content:attr(data-points); inset:0; color:transparent; background:linear-gradient(108deg,transparent 31%,rgba(255,255,255,.82) 43%,rgba(255,249,211,.42) 49%,transparent 61%); background-size:285% 100%; background-position:145% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:0; mix-blend-mode:screen; opacity:.72; animation:point-glint 11.8s ease-in-out infinite; }
.point-palace > span { font-size: 23px; font-weight: 950; }
.point-palace .next-reward { margin: .45% 0 1.4%; color:#eee7fa; font-size:16px; }
.point-palace .next-reward b { color:var(--gold); font-size:1.35em; }
.progress-segments { width: 72%; display:grid; grid-template-columns:repeat(5,1fr); gap:1.8%; }
.progress-segments i { height:36px; display:grid; place-items:center; border:1px solid rgba(111,92,210,.9); border-radius:999px; color:#6e69a7; background:linear-gradient(180deg,#272467,#0d0c37); font-style:normal; font-size:14px; }
.progress-segments i.is-filled { color:#fff7bd; border-color:#ffe060; background:linear-gradient(180deg,#ffe35b,#f2a900); box-shadow:inset 0 0 .5rem rgba(255,255,255,.35),0 0 .85rem rgba(255,184,20,.65); }
.point-palace small { margin-top:.45%; font-size:15px; font-weight:900; }

.challenge-panel {
  left: 59.44%;
  top: 27.62%;
  width: 26.36%;
  height: 31.05%;
  padding: .9% .92%;
  overflow: hidden;
  border-color: rgba(56, 216, 255, .74);
  border-radius: 1.65rem;
  box-shadow: inset .06rem 0 rgba(34,219,255,.88), inset -.06rem 0 rgba(238,76,255,.88), inset 0 0 2.3rem rgba(30,84,190,.25), 0 0 1.5rem rgba(30,201,255,.3);
}
.challenge-panel::before { position:absolute; content:""; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(18,211,255,.07),transparent 42%,rgba(218,53,255,.09)); }
.challenge-panel h2 { position:relative; margin:0; font-size:18px; text-transform:uppercase; letter-spacing:.018em; }
.challenge-panel h2 span { color:var(--gold); text-shadow:0 0 .7rem #ffb000; }
.challenge-list { position:relative; height:calc(100% - 1.75rem); margin-top:1.5%; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); gap:3%; }
.challenge-card { min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:2.5%; padding:1.3% 2%; border:1px solid rgba(123,77,244,.78); border-radius:.72rem; background:linear-gradient(90deg,rgba(14,12,66,.95),rgba(31,13,91,.88)); box-shadow:inset 0 0 .8rem rgba(96,57,213,.16); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.challenge-card:hover { transform:translateY(-2px); border-color:rgba(219,126,255,.95); box-shadow:0 0 .9rem rgba(121,48,255,.3); }
.challenge-icon { width:46px; aspect-ratio:1; display:grid; place-items:center; border:1px solid #8d79ff; border-radius:.62rem; color:#fff; background:linear-gradient(145deg,#7648e8,#211174); font-weight:1000; box-shadow:inset 0 0 .7rem rgba(255,255,255,.18),0 0 .65rem rgba(73,58,255,.32); }
.challenge-card h3 { margin:0; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.challenge-card small { display:block; color:#cfc7e7; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.proof-button { width:auto; min-height:29px; padding:4px 10px; border:1px solid rgba(221,106,255,.78); border-radius:999px; color:#fff; background:linear-gradient(180deg,#8a2ed3,#4c159b); box-shadow:inset 0 0 .5rem rgba(255,255,255,.1),0 0 .65rem rgba(176,52,255,.3); font-size:12px; font-weight:850; cursor:pointer; }
.challenge-status { padding:5px 8px; border-radius:999px; color:#fff0b1; background:rgba(101,67,20,.9); font-size:11px; font-weight:850; }
.status-approved { color:#b4ffe1; background:rgba(16,94,69,.9); }

.stats-ribbon { left:22.76%; top:59.48%; width:54.38%; height:9.55%; display:grid; grid-template-columns:1fr 1fr 1.05fr; gap:.72%; }
.small-stat { position:relative; min-width:0; display:grid; grid-template:auto auto / auto 1fr; align-content:center; column-gap:5%; padding:2.1% 6%; overflow:hidden; border-radius:1.3rem; text-align:left; }
.small-stat > span:not(.stat-icon) { align-self:end; color:#dcd6ef; font-size:12px; }
.small-stat > strong { color:var(--gold); font-size:38px; line-height:.86; }
.small-stat > small { color:#c8c0de; font-size:10px; }
.stat-icon { grid-row:1/3; align-self:center; color:var(--gold); font-size:44px; line-height:1; text-shadow:0 0 .8rem #ff9d00; }
.small-stat.spent { border-color:#9d4fff; }
.small-stat.spent strong { color:var(--cyan); }
.gift-icon { color:#fa3d7f; text-shadow:0 0 .75rem #ff357d; }
.small-stat.reward-rule { grid-template:1fr / auto 1fr; border-color:#22cfff; }
.small-stat.reward-rule > span:last-child { align-self:center; }
.small-stat.reward-rule b { display:block; color:#fff; font-size:14px; }
.small-stat.reward-rule small { display:block; margin-top:.1rem; color:#d4cce9; font-size:10px; line-height:1.2; }

.rewards-panel { left:5.96%; top:69.5%; width:87.2%; height:29.05%; overflow:hidden; border-radius:1.8rem; pointer-events:auto; }
.rewards-panel::before { position:absolute; z-index:1; content:""; left:1.1%; right:1.1%; bottom:3%; height:42%; border-radius:0 0 1rem 1rem; background:linear-gradient(90deg,rgba(38,3,27,.97),rgba(3,38,24,.96) 24%,rgba(53,3,23,.97) 48%,rgba(28,4,63,.97) 73%,rgba(51,20,3,.97)); -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 14%,rgba(0,0,0,.52) 42%,#000 78%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 14%,rgba(0,0,0,.52) 42%,#000 78%); }
.reward-row { position:absolute; z-index:2; left:1.2%; right:1.2%; top:13%; bottom:3.2%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1%; }
.reward-card { --reward-shade:38,3,27; position:relative; min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:1.18rem; background:transparent; box-shadow:inset 0 0 1.1rem rgba(255,255,255,.07),inset 0 -.65rem 1.25rem rgba(var(--reward-shade),.38),0 0 .7rem rgba(100,48,255,.14); text-align:center; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.reward-card:nth-child(2) { --reward-shade:3,38,24; }
.reward-card:nth-child(3) { --reward-shade:53,3,23; }
.reward-card:nth-child(4) { --reward-shade:28,4,63; }
.reward-card:nth-child(5) { --reward-shade:51,20,3; }
.reward-card::after { position:absolute; z-index:1; content:""; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(var(--reward-shade),0) 30%,rgba(var(--reward-shade),.025) 38%,rgba(var(--reward-shade),.08) 47%,rgba(var(--reward-shade),.18) 56%,rgba(var(--reward-shade),.34) 66%,rgba(var(--reward-shade),.54) 76%,rgba(var(--reward-shade),.76) 87%,rgba(var(--reward-shade),.94) 100%); }
.reward-card::before { position:absolute; z-index:1; content:""; top:53%; left:-9%; width:118%; height:34%; opacity:1; border-radius:50%; background:radial-gradient(ellipse at center,rgba(var(--reward-shade),.99) 0%,rgba(var(--reward-shade),.9) 35%,rgba(var(--reward-shade),.62) 54%,rgba(var(--reward-shade),.23) 70%,rgba(var(--reward-shade),0) 84%); filter:blur(.42rem); }
.reward-art-slot { position:absolute; inset:0; z-index:0; overflow:hidden; }
.reward-art-slot::after { position:absolute; content:""; top:-52%; left:15%; width:48%; height:125%; opacity:.42; background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent); transform:rotate(18deg); animation:card-shimmer 9s ease-in-out infinite; }
.reward-card h3 { position:absolute; z-index:2; left:4%; right:4%; bottom:19%; margin:0; padding:.22rem 0; font-size:19px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:radial-gradient(ellipse at center,rgba(var(--reward-shade),.96),rgba(var(--reward-shade),.72) 44%,rgba(var(--reward-shade),0) 76%); text-shadow:0 .12rem .3rem #080015,0 0 .6rem rgba(255,255,255,.2); }
.reward-cost { position:absolute; z-index:2; left:10%; right:10%; bottom:2.2%; width:auto; min-height:36px; margin:0; padding:2.1% 3%; border:1px solid currentColor; border-radius:999px; color:var(--gold-light); background:rgba(76,8,62,.9); font:inherit; font-size:14px; font-weight:950; cursor:pointer; }
.reward-card.is-locked { filter:saturate(.72) brightness(.82); }
.reward-card:hover { transform:translateY(-3px) scale(1.008); filter:brightness(1.08); box-shadow:0 0 1.25rem rgba(178,81,255,.5); }
.reward-card.is-inspected { filter:brightness(1.08); box-shadow:inset 0 0 1rem rgba(255,255,255,.14),0 0 1.25rem rgba(255,205,75,.56); }
.reward-visible-state { color:#e7d9ff; font-size:.82em; }
.reward-empty { position:absolute; inset:0; z-index:4; display:grid; place-items:center; margin:0; border:1px solid rgba(123,77,244,.82); border-radius:1rem; color:#f4edff; background:rgba(4,4,34,.94); backdrop-filter:blur(.45rem); font-weight:850; }

.game-dialog { width:min(92vw,29rem); max-height:min(88dvh,42rem); padding:0; border-radius:1.4rem; color:#fff; }
.game-dialog::backdrop { background:rgba(2,1,16,.82); backdrop-filter:blur(8px); }
.game-dialog form,.game-dialog>div { position:relative; display:grid; gap:.65rem; padding:1.35rem; }
.game-dialog h2,.game-dialog p { margin:0; text-align:center; }
.dialog-symbol { color:var(--gold); font-size:2.2rem; text-shadow:0 0 1rem #ff9f00; }
.dialog-close { position:absolute; z-index:2; top:.6rem; right:.6rem; width:2.75rem; min-height:2.75rem; padding:0; border-radius:50%; color:#fff; background:rgba(84,42,129,.9); cursor:pointer; }
.game-dialog label { font-weight:800; }
.game-dialog input { width:100%; min-height:3rem; padding:.7rem; border:1px solid #8f69c7; border-radius:.7rem; color:#fff; background:#0a0623; font:inherit; font-size:1rem; }
.game-dialog input[type="file"] { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.file-button { min-height:2.8rem; display:grid; place-items:center; border:1px dashed #a884d6; border-radius:.7rem; color:#ddd0f0; cursor:pointer; }
#finish-proof { min-height:2.75rem; margin-top:.2rem; color:#311400; background:linear-gradient(#ffe76f,#f1a70b); cursor:pointer; }
.dialog-status { min-height:1.4rem; color:#d8cdea; }
.nav-info-dialog { width:min(92vw,31rem); border-color:rgba(181,104,255,.72); box-shadow:inset 0 0 2.4rem rgba(101,56,218,.24),0 0 2.6rem rgba(99,44,255,.34); }
.nav-info-dialog > div { gap:.8rem; padding:1.65rem 1.8rem 1.5rem; }
.nav-info-copy { color:#e5ddf5; font-size:1rem; line-height:1.55; }
.info-confirm { min-height:2.8rem; margin-top:.3rem; border:1px solid rgba(255,226,104,.85); border-radius:999px; color:#2c1500; background:linear-gradient(180deg,#fff3a1,#f5b823); box-shadow:inset 0 0 .55rem rgba(255,255,255,.5),0 0 1rem rgba(255,178,24,.3); font:inherit; font-weight:950; cursor:pointer; }
.compact-history { max-height:58dvh; overflow:auto; display:grid; gap:.55rem; }
.compact-history article { display:grid; grid-template-columns:auto 1fr auto; gap:.65rem; align-items:center; padding:.7rem; border:1px solid rgba(143,83,225,.45); border-radius:.7rem; background:rgba(8,5,35,.72); }
.compact-history time { color:#bcaed4; font-size:.75rem; }
.compact-history span { font-size:.78rem; }
.empty-compact { color:#c9bddc; text-align:center; }

@keyframes twinkle { 0%,100%{opacity:.2;transform:scale(.64)} 48%{opacity:1;transform:scale(1.35)} }
@keyframes nebula-drift { from{transform:translate3d(-2.2%,-.8%,0) scale(1)} to{transform:translate3d(2.8%,1.8%,0) scale(1.04)} }
@keyframes horizon-breathe { 0%,100%{opacity:.16;transform:scaleX(.96)} 50%{opacity:.32;transform:scaleX(1.025)} }
@keyframes hand-light { 0%,100%{opacity:.58;transform:translate(-50%,-50%) scale(.91)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.09)} }
@keyframes glint-ray { 0%,72%,100%{opacity:.08;transform:rotate(18deg) scaleX(.62)} 82%{opacity:.95;transform:rotate(18deg) scaleX(1.18)} }
@keyframes gold-glint { 0%,71%,100%{opacity:0;transform:scale(.5) rotate(0)} 79%{opacity:.95;transform:scale(1.2) rotate(45deg)} 86%{opacity:0;transform:scale(.72) rotate(90deg)} }
@keyframes ambient-pulse { 0%,100%{opacity:.52;transform:scale(.94)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes point-pulse { 0%,100%{transform:scale(1);filter:drop-shadow(0 .012em .045em rgba(104,48,8,.42)) drop-shadow(0 0 .22rem rgba(255,252,222,.88)) drop-shadow(0 0 .58rem rgba(255,207,77,.56))} 50%{transform:scale(1.018);filter:drop-shadow(0 .012em .05em rgba(104,48,8,.36)) drop-shadow(0 0 .34rem rgba(255,254,235,.92)) drop-shadow(0 0 .82rem rgba(255,215,99,.66))} }
@keyframes point-glint { 0%,68%,100%{background-position:140% 0;opacity:0} 76%{opacity:.86} 88%{background-position:-55% 0;opacity:0} }
@keyframes stardust-drift { from{opacity:.28;transform:translateY(.2rem) scale(.98)} to{opacity:.52;transform:translateY(-.2rem) scale(1.015)} }
@keyframes card-shimmer { 0%,72%,100%{transform:translateX(-220%) rotate(18deg)} 84%{transform:translateX(250%) rotate(18deg)} }

@media (max-width: 68rem) {
  .theo-experience {
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .game-shell {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible;
    background: linear-gradient(#03031d, #0b0644 48rem, #03031d);
  }
  .game-shell::before,.game-shell::after { left:0; right:0; }
  .scene-artboard {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transform: none;
    -webkit-mask-image:none;
    mask-image:none;
    box-shadow: none;
  }
  .full-bleed-world { display:none; }
  .reference-artboard {
    position: relative;
    inset: auto;
    order: 1;
    width: 100%;
    max-width: 100%;
    height: clamp(9.5rem, 40vw, 11rem);
    aspect-ratio: auto;
    flex: 0 0 auto;
  }
  .reference-artboard > img {
    width: 100%;
    max-width: none;
    height: auto;
    transform: translateY(-6%);
  }
  .reference-artboard::after {
    position: absolute;
    z-index: 3;
    content: "";
    inset: 30% 0 0;
    background: linear-gradient(180deg, transparent, rgba(3,3,29,.32) 32%, #03031d);
    pointer-events: none;
  }
  .overlay-frame { display: contents; }
  .game-topbar {
    position: sticky;
    top: 0;
    order: 0;
    width: 100%;
    height: calc(3.55rem + env(safe-area-inset-top));
    min-height: calc(3.55rem + env(safe-area-inset-top));
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .3rem;
    padding: max(.35rem, env(safe-area-inset-top)) max(.55rem, env(safe-area-inset-right)) .35rem max(.55rem, env(safe-area-inset-left));
  }
  .game-topbar nav { display:flex; min-width:0; justify-content:center; gap:.1rem; }
  .game-topbar nav a,.nav-button { width:2.75rem; min-width:2.75rem; min-height:2.75rem; justify-content:center; padding:0; font-size:1rem; }
  .game-topbar nav a > span:last-child,.nav-button > span:last-child { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .mini-brand { min-height:2.75rem; }
  .mini-brand strong { display:none; }
  .mini-shield { width: 2.35rem; }
  .player strong { display:none; }
  .avatar { width: 2.25rem; }
  .one-screen {
    position: relative;
    inset: auto;
    order: 2;
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: .75rem;
    padding: .75rem max(.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    overflow: visible;
    pointer-events: auto;
  }
  .point-palace,.challenge-panel,.stats-ribbon,.rewards-panel { position:relative; inset:auto; width:100%; max-width:100%; min-width:0; height:auto; scroll-margin-top:calc(4.15rem + env(safe-area-inset-top)); border-radius:1.3rem; }
  .point-palace { order:1; min-height:18rem; padding:1rem; }
  .main-points { font-size:clamp(4.5rem,16vw,7rem); }
  .point-palace > p:first-child { font-size:clamp(.9rem,4.3vw,1.15rem); }
  .point-palace > span { font-size:clamp(.9rem,4.1vw,1.15rem); }
  .point-palace .next-reward { font-size:clamp(.78rem,3.6vw,1rem); }
  .progress-segments i { height:clamp(1.8rem,9vw,2.35rem); }
  .point-palace small { font-size:.9rem; }
  .challenge-panel { order:3; min-height:20rem; padding:1rem; }
  .challenge-panel h2 { font-size:clamp(.9rem,4.2vw,1.12rem); }
  .challenge-list { height:16rem; gap:.45rem; margin-top:.55rem; }
  .challenge-icon { width:clamp(2.4rem,11vw,3rem); }
  .challenge-card h3 { font-size:clamp(.78rem,3.8vw,1rem); }
  .challenge-card small { font-size:clamp(.65rem,3vw,.76rem); }
  .proof-button { min-height:2.75rem; padding-inline:.75rem; font-size:clamp(.65rem,3vw,.78rem); }
  .challenge-status { font-size:clamp(.62rem,2.8vw,.72rem); }
  .stats-ribbon { order:5; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
  .small-stat { min-height:5rem; padding:.55rem .7rem; }
  .small-stat > span:not(.stat-icon) { font-size:clamp(.58rem,2.8vw,.75rem); }
  .small-stat > strong { font-size:clamp(1.65rem,8vw,2.3rem); }
  .small-stat > small { font-size:clamp(.52rem,2.4vw,.65rem); }
  .stat-icon { font-size:clamp(1.8rem,9vw,2.75rem); }
  .small-stat.reward-rule b { font-size:clamp(.64rem,3vw,.84rem); }
  .small-stat.reward-rule small { font-size:clamp(.52rem,2.4vw,.64rem); }
  .rewards-panel { order:4; min-height:18rem; overflow:hidden; contain:inline-size layout paint; border:1px solid rgba(87,111,255,.86); background:rgba(5,5,40,.84); }
  .rewards-panel::before { display:none; }
  .reward-row {
    position:relative;
    inset:auto;
    width:100%;
    max-width:100%;
    min-width:0;
    height:17rem;
    padding:.75rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:.75rem;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
    grid-template-columns:repeat(5,minmax(10.5rem,72vw));
    gap:.65rem;
  }
  .reward-card { border-color:rgba(139,76,255,.72); background:radial-gradient(ellipse at 50% 35%,rgba(110,39,209,.24),rgba(10,5,45,.85)); }
  .reward-card { scroll-snap-align:start; scroll-snap-stop:always; }
  .reward-art-slot { top:18%; bottom:30%; background-image:url("/static/img/pappa-poeng-reference-art-v3.png"); background-repeat:no-repeat; background-size:540% auto; background-position:7% 94%; }
  .reward-card:nth-child(2) .reward-art-slot { background-position:28% 94%; }
  .reward-card:nth-child(3) .reward-art-slot { background-position:50% 94%; }
  .reward-card:nth-child(4) .reward-art-slot { background-position:72% 94%; }
  .reward-card:nth-child(5) .reward-art-slot { background-position:94% 94%; }
  .reward-card h3 { font-size:clamp(.82rem,4vw,1.1rem); }
  .reward-cost { min-height:2.75rem; font-size:clamp(.66rem,3vw,.82rem); }
  .game-dialog button,.file-button { min-height:2.75rem; }
}

@media (max-width: 44rem) {
  .one-screen { padding:.55rem max(.55rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.55rem, env(safe-area-inset-left)); }
  .stats-ribbon { grid-template-columns:1fr; }
  .small-stat { min-height:4.8rem; }
  .compact-history article { grid-template-columns:1fr; }
}

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