/* Site layout only. Component appearance is extracted in game-fragments.css. */
.showcase h1{font-size:clamp(42px,5vw,64px);line-height:1.12;letter-spacing:-.04em;margin:0 0 24px}
.showcase h2{font-size:32px;line-height:1.3;letter-spacing:-.025em}
.showcase-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;padding:88px 0;border-bottom:1px solid var(--border)}
.showcase-row.reverse .section-copy{grid-column:2;grid-row:1}
.showcase-row.reverse .demo-figure{grid-column:1;grid-row:1}
.section-copy p{font-size:18px;line-height:1.8;color:var(--text);max-width:450px;margin:0 0 28px}
.showcase .button{font-size:16px;padding:13px 22px}
.demo-figure{margin:0;min-width:0;width:100%}
.game-demo{--rpx:1px;--ui-font-scale:1;--radius:8px;--card-bright:#eee4da;--text-soft:#8f7a66;--mult-accent:#d86b94;--tile-letter-weight:600;--shadow:0 2px 8px rgba(0,0,0,.08);--shop-shelf-gem-inset:7px;--shop-shelf-gem-size:10px;--letter-grid-bg:#bbada0;--letter-grid-wrap-padding:8px;--letter-grid-wrap-size:100%;--letter-grid-inner:100%;--anim-speed-scale:1;--ease-expo-out:cubic-bezier(.16,1,.3,1);background:var(--card);border-radius:12px;padding:28px;color:var(--text);overflow:hidden;min-height:300px;position:relative}
.game-demo .letter-grid-wrap{aspect-ratio:1;height:auto;max-width:340px;margin:auto}
.game-demo .letter-grid{aspect-ratio:1}
.game-demo .letter-grid-cell{min-width:0;min-height:0}
.game-demo .grid-tile{width:100%;height:100%;font-size:36px;cursor:default}
.game-demo .grid-tile .letter-gem{width:10px;height:10px;left:7px;bottom:7px}
.game-demo .grid-tile .letter-tile-char{line-height:1}
.game-demo .treasure-slot{cursor:default}
.game-demo .treasure-slot-emoji{font-size:38px;line-height:1}
.game-demo .treasure-slot-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.treasure-demo{display:flex;flex-direction:column;justify-content:center;min-height:330px}
.game-demo.treasure-demo,
.game-demo.score-demo{overflow:visible}
.game-demo .result-formula{display:flex;align-items:center;justify-content:center;gap:16px}
.game-demo .result-box{min-width:0;flex:1;padding:18px 10px}
.game-demo .result-label{font-size:16px}
.game-demo .result-num{font-size:40px}
.game-demo .result-times{font-size:28px;flex:none}
.game-demo .result-total{text-align:center;display:block;font-size:56px;font-weight:700;color:var(--dark);font-variant-numeric:tabular-nums;margin-bottom:26px}
.score-demo{padding:40px 28px;overflow:visible}
.showcase .privacy-section{border-top:0}

.game-demo.is-playing .letter-grid-cell:nth-child(-n+4) .grid-tile{animation:letter-cue 1.5s var(--ease-expo-out) both;animation-delay:calc(var(--i)*.24s)}
@keyframes letter-cue{0%,100%{background:var(--card-bright);transform:translateY(0)}25%,65%{background:#edc22e;transform:translateY(-3px)}}

.treasure-slot.filled.is-wobbling{animation:treasure-wobble .46s var(--ease-expo-out) both;z-index:4}
@keyframes treasure-wobble{
  0%{transform:scale(1) rotate(0)}
  24%{transform:scale(.78) rotate(-6deg)}
  56%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}

.game-demo .score-popup-bubble,
.game-demo .mult-popup-bubble{
  position:absolute;
  z-index:8;
  transform:translate(-50%,-100%);
  animation:bubble-pop .86s var(--ease-expo-out) both;
}
@keyframes bubble-pop{
  0%{opacity:0;transform:translate(-50%,-70%) scale(.5)}
  18%{opacity:1;transform:translate(-50%,-118%) scale(1)}
  70%{opacity:1;transform:translate(-50%,-126%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-148%) scale(.92)}
}

.result-num.is-pulse,
.result-total.is-pulse{animation:value-pulse .5s var(--ease-expo-out) both}
@keyframes value-pulse{
  0%{transform:scale(1.42)}
  100%{transform:scale(1)}
}

.score-fly{
  position:absolute;
  z-index:6;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:score-fly .52s var(--ease-expo-out) both;
}
.score-fly-score{color:#6ec4f0;font-size:28px}
.score-fly-mult{color:var(--mult-accent);font-size:28px}
@keyframes score-fly{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:.15;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.72)}
}

.orbit-demo{min-height:360px;padding:12px 8px}
.orbit-stage{
  position:relative;
  height:336px;
  margin:auto;
  perspective:640px;
  perspective-origin:50% 46%;
  transform-style:preserve-3d;
}
.orbit-item{
  position:absolute;
  left:50%;
  top:50%;
  width:76px;
  height:76px;
  transform-style:preserve-3d;
  will-change:transform,opacity;
}
.orbit-item-fog{
  position:absolute;
  inset:0;
  z-index:8;
  border-radius:inherit;
  background:var(--card);
  opacity:var(--fog-opacity, 0);
  pointer-events:none;
}
.orbit-item .grid-tile{
  width:76px;
  height:76px;
  overflow:hidden;
  font-size:34px;
  font-weight:800;
}
.orbit-item .grid-tile canvas{
  position:absolute;
  inset:0;
  width:calc(100% + 1px);
  height:calc(100% + 1px);
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
}
.orbit-item .grid-tile.has-shader{background:transparent}
.orbit-item .grid-tile.has-shader canvas{opacity:1}
.orbit-item .grid-tile .letter-tile-char{
  color:#f7fbff;
  -webkit-text-stroke:1px rgba(40,30,24,.35);
  paint-order:stroke fill;
}
.accessory-face{
  position:relative;
  width:64px;
  height:64px;
  margin:6px auto 0;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}
.accessory-face i{font-size:30px;color:#fff}

@media(max-width:760px){
  .showcase-row{grid-template-columns:1fr;gap:28px;padding:48px 0}
  .showcase-row.reverse .section-copy,
  .showcase-row.reverse .demo-figure{grid-column:auto;grid-row:auto}
  .showcase h2{font-size:28px}
  .game-demo{padding:22px}
  .game-demo .grid-tile{font-size:30px}
  .game-demo .treasure-slot-emoji{font-size:30px}
  .game-demo .result-formula{gap:10px}
  .game-demo .result-label{font-size:14px}
  .game-demo .result-num{font-size:34px}
  .game-demo .result-total{font-size:48px}
  .treasure-demo{min-height:290px}
  .orbit-stage{height:280px}
  .orbit-item,
  .orbit-item .grid-tile{width:62px;height:62px}
  .accessory-face{width:52px;height:52px;border-radius:12px}
  .accessory-face i{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .game-demo *{animation:none!important}
}