/* Original animation geometry reused from client/src/index.css. Avatar borders and edge glows are intentionally omitted. */
@keyframes avatarIdle {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg);  }
  20% { transform: translateY(-1px) scale(1.008) rotate(0.3deg); }
  40% { transform: translateY(-2px) scale(1.015) rotate(0deg);  }
  60% { transform: translateY(-1.5px) scale(1.012) rotate(-0.3deg); }
  80% { transform: translateY(-0.5px) scale(1.005) rotate(0.1deg); }
}
@keyframes avatarPlayCard {
  0% { transform: scale(1) rotate(0deg) translateX(0) translateY(0);  }
  8% { transform: scale(0.95) rotate(3deg) translateX(-2px) translateY(2px);  }
  20% { transform: scale(1.18) rotate(-8deg) translateX(6px) translateY(-4px);  }
  35% { transform: scale(1.12) rotate(4deg) translateX(-3px) translateY(-2px);  }
  50% { transform: scale(1.08) rotate(-2deg) translateX(2px) translateY(-1px);  }
  70% { transform: scale(1.03) rotate(1deg) translateX(-1px);  }
  100% { transform: scale(1) rotate(0deg) translateX(0) translateY(0);  }
}
@keyframes avatarPass {
  0% { transform: scale(1) rotate(0deg) translateX(0);  opacity: 1; }
  20% { transform: scale(0.97) rotate(5deg) translateX(2px);  opacity: 0.9; }
  40% { transform: scale(0.93) rotate(12deg) translateX(5px) translateY(2px);  opacity: 0.75; }
  60% { transform: scale(0.94) rotate(10deg) translateX(4px) translateY(1px);  opacity: 0.8; }
  80% { transform: scale(0.97) rotate(4deg) translateX(2px);  opacity: 0.9; }
  100% { transform: scale(1) rotate(0deg) translateX(0);  opacity: 1; }
}
@keyframes avatarCombo {
  0% { transform: scale(1) rotate(0deg);  }
  5% { transform: scale(0.92) rotate(2deg);  }
  15% { transform: scale(1.3) rotate(-6deg);  }
  25% { transform: scale(1.15) rotate(4deg);  }
  35% { transform: scale(1.22) rotate(-3deg);  }
  50% { transform: scale(1.1) rotate(2deg);  }
  70% { transform: scale(1.05) rotate(-1deg);  }
  100% { transform: scale(1) rotate(0deg);  }
}
@keyframes avatarWin {
  0% { transform: translateY(0) scale(1) rotate(0deg);  }
  5% { transform: translateY(2px) scale(0.95) rotate(0deg);  }
  12% { transform: translateY(-12px) scale(1.15) rotate(-8deg);  }
  20% { transform: translateY(-2px) scale(1.05) rotate(5deg);  }
  28% { transform: translateY(-10px) scale(1.12) rotate(-6deg);  }
  36% { transform: translateY(-1px) scale(1.03) rotate(4deg);  }
  44% { transform: translateY(-8px) scale(1.1) rotate(-4deg);  }
  52% { transform: translateY(0) scale(1.02) rotate(3deg);  }
  62% { transform: translateY(-6px) scale(1.08) rotate(-3deg);  }
  72% { transform: translateY(0) scale(1.01) rotate(2deg);  }
  82% { transform: translateY(-4px) scale(1.05) rotate(-2deg);  }
  92% { transform: translateY(0) scale(1) rotate(1deg);  }
  100% { transform: translateY(0) scale(1) rotate(0deg);  }
}
@keyframes avatarLose {
  0% { transform: scale(1) translateY(0) rotate(0deg);  }
  8% { transform: scale(1.05) translateY(-2px) rotate(-2deg);  }
  15% { transform: scale(1.08) translateY(-3px) rotate(3deg);  }
  20% { transform: scale(1.06) translateY(-2px) rotate(-4deg);  }
  25% { transform: scale(1.04) translateY(-1px) rotate(2deg);  }
  35% { transform: scale(0.98) translateY(1px) rotate(-1deg);  }
  50% { transform: scale(0.92) translateY(3px) rotate(0deg);  }
  65% { transform: scale(0.9) translateY(4px) rotate(1deg);  }
  80% { transform: scale(0.91) translateY(3.5px) rotate(0deg);  }
  100% { transform: scale(0.92) translateY(3px) rotate(0deg);  }
}
@keyframes avatarSasaki {
  0% { transform: scale(1) rotate(0deg);  }
  5% { transform: scale(0.85) rotate(0deg);  }
  12% { transform: scale(1.4) rotate(-10deg);  }
  18% { transform: scale(1.2) rotate(8deg);  }
  25% { transform: scale(1.35) rotate(-6deg);  }
  32% { transform: scale(1.15) rotate(5deg);  }
  42% { transform: scale(1.25) rotate(-4deg);  }
  55% { transform: scale(1.1) rotate(2deg);  }
  70% { transform: scale(1.15) rotate(-2deg);  }
  85% { transform: scale(1.05) rotate(1deg);  }
  100% { transform: scale(1) rotate(0deg);  }
}
@keyframes avatarSteal {
  0% { transform: scale(1) rotate(0deg);  }
  10% { transform: scale(0.9) rotate(5deg);  }
  25% { transform: scale(1.25) rotate(-8deg);  }
  40% { transform: scale(1.1) rotate(3deg);  }
  60% { transform: scale(1.15) rotate(-2deg);  }
  80% { transform: scale(1.05) rotate(1deg);  }
  100% { transform: scale(1) rotate(0deg);  }
}
@keyframes avatarIdleVip {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg);  }
  15% { transform: translateY(-2px) scale(1.02) rotate(0.5deg);  }
  30% { transform: translateY(-3px) scale(1.025) rotate(0deg);  }
  50% { transform: translateY(-2px) scale(1.02) rotate(-0.5deg);  }
  70% { transform: translateY(-1px) scale(1.01) rotate(0.3deg);  }
}
@keyframes avatarWinVip {
  0% { transform: translateY(0) scale(1) rotate(0deg);  }
  5% { transform: translateY(3px) scale(0.92) rotate(0deg);  }
  12% { transform: translateY(-18px) scale(1.25) rotate(-12deg);  }
  20% { transform: translateY(-5px) scale(1.1) rotate(8deg);  }
  28% { transform: translateY(-15px) scale(1.2) rotate(-8deg);  }
  36% { transform: translateY(-3px) scale(1.08) rotate(6deg);  }
  46% { transform: translateY(-12px) scale(1.15) rotate(-5deg);  }
  56% { transform: translateY(-2px) scale(1.05) rotate(4deg);  }
  66% { transform: translateY(-8px) scale(1.1) rotate(-3deg);  }
  78% { transform: translateY(-1px) scale(1.03) rotate(2deg);  }
  90% { transform: translateY(-5px) scale(1.06) rotate(-1deg);  }
  100% { transform: translateY(0) scale(1) rotate(0deg);  }
}
@keyframes avatarLoseVip {
  0% { transform: scale(1) translateY(0) rotate(0deg);  }
  8% { transform: scale(1.1) translateY(-4px) rotate(-3deg);  }
  15% { transform: scale(1.12) translateY(-5px) rotate(4deg);  }
  22% { transform: scale(1.08) translateY(-3px) rotate(-5deg);  }
  30% { transform: scale(1.05) translateY(-2px) rotate(3deg);  }
  45% { transform: scale(0.95) translateY(2px) rotate(-1deg);  }
  60% { transform: scale(0.88) translateY(5px) rotate(0deg);  }
  80% { transform: scale(0.87) translateY(5px) rotate(1deg);  }
  100% { transform: scale(0.88) translateY(4px) rotate(0deg);  }
}
@keyframes goldParticle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--gx, 0px), var(--gy, -60px)) scale(0); opacity: 0; }
}
@keyframes vipExplosion {
  0%   { transform: scale(0.2); opacity: 1; }
  40%  { transform: scale(1.6); opacity: 0.9; }
  100% { transform: scale(3);   opacity: 0; }
}
@keyframes vipRay {
  0%   { transform: rotate(var(--ray-angle, 0deg)) scaleX(0); opacity: 0.9; }
  60%  { transform: rotate(var(--ray-angle, 0deg)) scaleX(1); opacity: 0.7; }
  100% { transform: rotate(var(--ray-angle, 0deg)) scaleX(1.3); opacity: 0; }
}
@keyframes vipParticle {
  0%   { transform: translate(0, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--px, 0px), var(--py, -100px)) scale(0); opacity: 0; }
}

/* One shared portrait size; no frames, outlines or permanent edge glows. */
.app .player .avatar-slot{width:var(--portrait-width,74px);height:var(--portrait-height,98px);border:0;outline:0;border-radius:0;background:transparent;box-shadow:none;animation:none;transform-origin:center bottom}
.app .player.active .avatar-slot{border:0;outline:0;box-shadow:none;animation:none}
.app .player,.app .player-meta{border:0;box-shadow:none}.app .player.active .player-meta{border:0;box-shadow:none;background:#071b14e8}.app .player.active .player-meta strong{color:#ffe19a}
.app .player.p0{position:absolute;bottom:auto;display:block;z-index:3}.app .player.p0 .player-meta{display:none}.dock-left{gap:0}.portrait-wrap{z-index:1}.turn-label{bottom:-18px;line-height:14px;padding:1px 5px;color:#ffe39a;background:#061710ed;box-shadow:none;border:0;font-size:12px}
.app .player .avatar-slot[data-idle=yes]{animation:avatarIdle 4s ease-in-out infinite}
.app .player .avatar-slot[data-idle=yes][data-tier=vip],.app .player .avatar-slot[data-idle=yes][data-tier=limited]{animation:avatarIdleVip 3s ease-in-out infinite}
.app .player .avatar-slot[data-motion=entry]{animation:characterEntry .85s ease-out both}
.app .player .avatar-slot[data-motion=play]{animation:avatarPlayCard .7s cubic-bezier(.34,1.56,.64,1) both}
.app .player .avatar-slot[data-motion=pass]{animation:avatarPass .9s ease-out both}
.app .player .avatar-slot[data-motion=combo]{animation:avatarCombo .9s ease-out both}
.app .player .avatar-slot[data-motion=sasaki]{animation:avatarSasaki 1.4s ease-out both}
.app .player .avatar-slot[data-motion=steal]{animation:avatarSteal .8s ease-out both}
.app .player .avatar-slot[data-motion=win]{animation:avatarWin 2s ease-in-out both}
.app .player .avatar-slot[data-motion=lose]{animation:avatarLose 1.5s ease-out both}
.app .player .avatar-slot[data-tier=vip][data-motion=win],.app .player .avatar-slot[data-tier=limited][data-motion=win]{animation:avatarWinVip 2s ease-in-out both}
.app .player .avatar-slot[data-tier=vip][data-motion=lose],.app .player .avatar-slot[data-tier=limited][data-motion=lose]{animation:avatarLoseVip 1.5s ease-out both}
@keyframes characterEntry{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.character-effects{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}.character-effects *,.portrait-impact,.portrait-impact *{pointer-events:none!important}.dock{z-index:6}.team-results{z-index:10}.impact-shot{position:absolute;inset:0}.impact-center{position:absolute;left:50%;top:40%;width:0;height:0}.portrait-impact{position:absolute;left:50%;top:55%;width:0;height:0;z-index:4}
.impact-particle{position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:var(--particle-color,#ffd773);animation:vipParticle .85s ease-out both}.entry-beam{position:absolute;left:-20px;bottom:-35px;width:40px;height:120px;background:linear-gradient(transparent,#f5cf7155,transparent);animation:entryBeam 1.2s ease-out both}
@keyframes entryBeam{0%{opacity:0;transform:scaleX(.2)}35%{opacity:.8;transform:scaleX(2)}100%{opacity:0;transform:scaleX(.5)}}
.impact-aura{position:absolute;inset:12% 18% 22%;background:radial-gradient(ellipse,#f0682c3d,transparent 66%);animation:impactFade 1.2s ease-out both}.impact-shockwave{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border:2px solid #ffd180b3;border-radius:50%;animation:impactWave .65s ease-out both}.impact-lightning{position:absolute;left:0;top:-2px;width:160px;height:16px;clip-path:polygon(0 45%,34% 0,47% 44%,68% 15%,100% 50%,62% 54%,45% 80%,31% 45%,0 58%);background:linear-gradient(90deg,#fff0bf,#ff8c54,transparent);transform-origin:left center;animation:vipRay .6s ease-out both}.impact-flash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#ffd77055,transparent 74%);animation:impactFade .8s ease-out both}.impact-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:clamp(28px,5.5vw,66px);font-family:serif;font-weight:900;white-space:nowrap;color:#ffe0a0;text-shadow:0 3px 18px #000;animation:impactTitle 1s ease-out both}.impact-label.reduced-label{font-size:24px;animation:impactFade .65s linear both}
.impact-explosion{position:absolute;left:-110px;top:-110px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#ffedacbb,#e2762955 46%,transparent 72%);animation:vipExplosion .85s ease-out both}.impact-ray{position:absolute;left:0;top:0;width:230px;height:3px;background:linear-gradient(90deg,#ffe9a5,transparent);transform-origin:left center;animation:vipRay .9s ease-out both}.impact-coin{position:absolute;top:-40px;font-size:23px;animation:impactCoin var(--coin-duration,1.6s) ease-in var(--coin-delay,0s) both}.impact-defeat-shade{position:absolute;inset:0;background:radial-gradient(ellipse,transparent 25%,#18050d99);animation:impactFade 1.5s ease-out both}.lose .impact-label{color:#ffb1af}.impact-crack{position:absolute;left:0;top:0;width:180px;height:3px;background:linear-gradient(90deg,#ef7774,#851c1c,transparent);transform-origin:left center;animation:vipRay .7s ease-out both}
#scene.impact-shake{animation:impactShake .6s ease-out both}
@keyframes impactWave{from{transform:scale(.5);opacity:.85}to{transform:scale(7);opacity:0}}
@keyframes impactFade{from{opacity:1}to{opacity:0}}
@keyframes impactTitle{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes impactCoin{from{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}80%{opacity:1}to{opacity:0;transform:translateY(var(--fall-distance,600px)) rotate(560deg)}}
@keyframes impactShake{0%,100%{transform:translate(0,0)}16%{transform:translate(-3px,2px)}32%{transform:translate(3px,-2px)}48%{transform:translate(-2px,1px)}64%{transform:translate(2px,-1px)}82%{transform:translate(-1px,0)}}
.effect-features{margin:5px 0 10px;font-size:12px;line-height:1.7;color:#d6c79e}
@media(prefers-reduced-motion:reduce){.app .player .avatar-slot[data-motion],.app .player .avatar-slot[data-idle=yes],.app .player .avatar-slot[data-idle=yes][data-tier]{animation:none!important;transform:none!important}#scene.impact-shake{animation:none}.impact-lightning,.impact-shockwave,.impact-particle,.impact-flash,.impact-aura,.impact-coin,.entry-beam{display:none}}

/* Combo strength drives the central cut-in for every character tier. */
.cinematic-impact{isolation:isolate;--impact-color:#ebc67c;--impact-duration:1200ms}
.cinematic-impact .impact-center{z-index:2}
.cutin-scrim{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 48%,#060c10e6,#02080a88 65%,transparent);animation:cutinBackdrop var(--impact-duration) linear both}
.cutin-horizon{position:absolute;inset:15% 0 10%;z-index:1;background:linear-gradient(transparent 10%,#02080abb 46%,#02080a99 65%,transparent);animation:cutinBackdrop var(--impact-duration) linear both}
.cutin-portrait{position:absolute;overflow:hidden;z-index:3;transform:translate(-50%,-50%);transform-origin:center;border:0;outline:0;border-radius:0;box-shadow:none;background:transparent;mask-image:radial-gradient(ellipse 65% 80% at 50% 35%,#000 55%,transparent 94%);-webkit-mask-image:radial-gradient(ellipse 65% 80% at 50% 35%,#000 55%,transparent 94%);animation:cutinArrival var(--impact-duration) cubic-bezier(.2,.72,.25,1) both}
.cutin-copy{position:absolute;transform:translateY(-50%);z-index:4;text-align:left;animation:cutinWords var(--impact-duration) ease-out both;filter:drop-shadow(0 3px 12px #000)}
.cutin-actor{font-size:clamp(14px,1.8vw,21px);color:#e5e4df;letter-spacing:.05em;font-weight:700;margin-bottom:8px}
.cutin-title{font-weight:950;font-family:serif;line-height:1.15;white-space:nowrap;letter-spacing:.035em;color:var(--impact-color);text-shadow:0 3px 0 #181310,0 0 28px color-mix(in srgb,var(--impact-color) 50%,transparent)}
.cutin-detail{font-size:clamp(14px,1.8vw,20px);line-height:1.35;color:#fff4de;margin-top:12px;font-weight:650}
@keyframes cutinBackdrop{0%{opacity:0}14%,77%{opacity:1}100%{opacity:0}}
@keyframes cutinArrival{0%{opacity:0;transform:translate(calc(-50% + var(--flight-x)),calc(-50% + var(--flight-y))) scale(var(--source-scale))}8%{opacity:1}23%{transform:translate(-50%,-50%) scale(1.07)}31%,76%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--flight-x)),calc(-50% + var(--flight-y))) scale(var(--source-scale))}}
@keyframes cutinWords{0%,9%{opacity:0;transform:translate(45px,-50%) scale(1.2)}24%,75%{opacity:1;transform:translate(0,-50%) scale(1)}100%{opacity:0;transform:translate(-12px,-50%) scale(.98)}}
.combo-wave{position:absolute;left:0;top:0;width:var(--impact-radius);height:var(--impact-radius);border:clamp(2px,calc(var(--impact-level)*.8px),7px) solid var(--impact-color);border-radius:50%;box-shadow:0 0 22px var(--impact-color),inset 0 0 18px var(--impact-color);animation:comboWave .8s cubic-bezier(.16,.75,.3,1) both}
.combo-burst{position:absolute;left:0;top:0;width:calc(var(--impact-radius)*2);height:calc(var(--impact-radius)*2);background:radial-gradient(circle,#fff5d9bb 0%,transparent 12%,var(--impact-color) 15%,transparent 60%);mix-blend-mode:screen;animation:comboBurst 1s ease-out .18s both}
.combo-strike{position:absolute;left:0;top:0;width:calc(var(--impact-radius)*2.2);height:calc(3px + var(--impact-level)*1.2px);background:linear-gradient(90deg,transparent,var(--impact-color) 27%,#fff8e5 49%,var(--impact-color) 72%,transparent);box-shadow:0 0 18px var(--impact-color);animation:comboStrike .75s cubic-bezier(.15,.8,.25,1) both}
.combo-sweep{position:absolute;left:0;top:var(--lane);width:calc(var(--impact-radius)*2.6);height:7px;background:linear-gradient(90deg,transparent,var(--impact-color) 55%,#fff7e5 92%,transparent);box-shadow:0 0 15px var(--impact-color);animation:comboSweep .7s ease-out both}
.combo-pillar{position:absolute;left:0;top:0;width:80px;height:calc(var(--impact-radius)*2);background:linear-gradient(90deg,transparent,var(--impact-color),#fff5d5,var(--impact-color),transparent);animation:comboPillar .9s ease-out .2s both}
.combo-charge{position:absolute;left:0;top:0;width:calc(var(--impact-radius)*1.3);height:calc(var(--impact-radius)*1.3);border:12px solid var(--impact-color);border-radius:50%;box-shadow:0 0 50px var(--impact-color),inset 0 0 45px var(--impact-color);animation:comboCharge 1.1s ease-out both}
.combo-pressure{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse,transparent 30%,#9c07216b 64%,#f32b4f99);animation:cutinBackdrop var(--impact-duration) ease-out both}
.combo-counter-wash{position:absolute;inset:15% 0;background:linear-gradient(-25deg,transparent 20%,#82a7dc55 49%,transparent 52%);animation:comboCounter 1.4s ease-out both}
.combo-ten{position:absolute;left:0;top:-55px;font:bold 70px Georgia;color:#ff6b88;text-shadow:0 0 28px #ff1d4d;animation:tenReveal 1s ease-out both}
.cinematic-impact .impact-particle{width:6px;height:6px;border-radius:1px;box-shadow:0 0 8px var(--impact-color);animation-duration:1.15s}
.cinematic-impact .impact-ray{width:var(--impact-radius);height:4px;background:linear-gradient(90deg,#fff3d7,var(--impact-color),transparent)}
.cinematic-impact.level-1 .combo-wave{width:90px;height:90px;border-width:2px;box-shadow:none;animation-duration:.4s}
.cinematic-impact.level-1 .combo-strike{width:140px;height:4px;animation-duration:.4s}
.cinematic-impact.level-1 .impact-particle{width:3px;height:3px}
.effect-counter .combo-strike,.effect-kkota .combo-strike{height:18px}
.effect-sasaki .combo-burst{animation-delay:.4s}.effect-pig .combo-wave{border-width:8px}
@keyframes comboWave{from{opacity:0;transform:translate(-50%,-50%) scale(.08)}15%{opacity:.95}to{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
@keyframes comboBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}20%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}}
@keyframes comboStrike{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--strike-angle)) scaleX(.05)}18%{opacity:1;transform:translate(-50%,-50%) rotate(var(--strike-angle)) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--strike-angle)) scaleX(1.3) scaleY(.1)}}
@keyframes comboSweep{0%{opacity:0;transform:translate(-110%,-50%) scaleX(.3)}30%{opacity:1}100%{opacity:0;transform:translate(20%,-50%) scaleX(1)}}
@keyframes comboPillar{0%{opacity:0;transform:translate(-50%,-130%) scaleX(.1)}25%{opacity:.8;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-35%) scaleX(2.5)}}
@keyframes comboCharge{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}30%{opacity:.7;transform:translate(-50%,-50%) scale(.12)}50%{opacity:.9;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@keyframes comboCounter{0%{opacity:0;transform:scaleX(.2)}30%,55%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.3)}}
@keyframes tenReveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%) scale(1.2)}}
@keyframes impactShake{0%,100%{transform:translate(0,0)}16%{transform:translate(calc(var(--shake-distance,3px)*-1),3px)}32%{transform:translate(var(--shake-distance,3px),-3px)}48%{transform:translate(calc(var(--shake-distance,3px)*-.7),2px)}64%{transform:translate(calc(var(--shake-distance,3px)*.5),-2px)}82%{transform:translate(-1px,0)}}
@media(prefers-reduced-motion:reduce){.cutin-portrait,.cutin-copy,.cutin-scrim,.cutin-horizon,.combo-wave,.combo-burst,.combo-strike,.combo-sweep,.combo-pillar,.combo-charge,.combo-pressure,.combo-counter-wash,.combo-ten{display:none}}

.character-effects.is-preview{z-index:12}

/* Three public combinations share the cinematic stage, with separate motion. */
.combo-cinematic .cutin-scrim{background:#010309;animation:cinemaBlackout var(--impact-duration) linear both}
.combo-cinematic .cutin-horizon{display:none}
.combo-cinematic .cutin-portrait{z-index:4;animation:cinemaPortrait var(--cine-finale) cubic-bezier(.18,.8,.3,1) var(--cine-climax) both;filter:drop-shadow(0 0 20px var(--impact-color))}
.combo-cinematic .cutin-copy{z-index:6;text-align:center;transform:none;animation:cinemaWords var(--cine-finale) ease-out var(--cine-climax) both}
.combo-cinematic .cutin-title{color:var(--impact-color);text-shadow:0 3px 0 #08111b,0 0 26px var(--impact-color)}
.combo-cinematic .cutin-actor{margin-bottom:3px;font-size:var(--caption-small);line-height:1.1}
.combo-cinematic .cutin-detail{margin-top:4px;color:#eff3ff;font-size:var(--caption-small);line-height:1.1}
.combo-cinematic .combo-burst{animation-delay:var(--cine-reveal);animation-duration:1.25s}
.combo-cinematic .combo-wave{animation-duration:1.15s;border-width:6px}
.combo-cinematic .impact-particle{animation-duration:1.25s}
.combo-cinematic.cinema-hit{animation:cinemaStageJolt .45s ease-out}
.cinema-aura{position:absolute;inset:-8%;z-index:1;background:radial-gradient(ellipse at 56% 38%,color-mix(in srgb,var(--impact-color) 32%,transparent),transparent 45%),radial-gradient(ellipse at 84% 30%,color-mix(in srgb,var(--impact-color) 13%,transparent),transparent 40%);animation:cinemaAura var(--impact-duration) ease-in-out both}
.cinema-charge{position:absolute;left:0;top:0;width:var(--impact-radius);height:var(--impact-radius);border:5px solid var(--impact-color);border-radius:50%;box-shadow:0 0 35px var(--impact-color),inset 0 0 28px var(--impact-color);animation:cinemaCharge var(--cine-reveal) ease-in both}
.cinema-orbit{position:absolute;left:0;top:0;width:calc(var(--impact-radius)*1.3);height:calc(var(--impact-radius)*1.3);border:2px solid var(--impact-color);border-left-color:transparent;border-right-color:transparent;border-radius:50%;box-shadow:0 0 24px var(--impact-color);animation:cinemaOrbit var(--cine-life) linear var(--cine-reveal) both}
.cinema-flash{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse at 56% 38%,#fff,var(--impact-color) 24%,transparent 75%);animation:stormFlash .6s ease-out both}
.cinema-beam{position:absolute;left:0;top:0;width:calc(var(--impact-radius)*2.7);height:14px;background:linear-gradient(90deg,transparent,var(--impact-color) 28%,#fff 50%,var(--impact-color) 72%,transparent);box-shadow:0 0 28px var(--impact-color);animation:cinemaBeam .85s ease-out both}
.cinema-finisher{position:absolute;left:0;top:0;width:var(--impact-radius);height:5px;background:linear-gradient(90deg,#fff,var(--impact-color),transparent);transform-origin:left center;animation:cinemaFinisher 1.1s ease-out both}
.cinematic-double_sequence .cinema-orbit{height:calc(var(--impact-radius)*.65);border-width:4px}
.cinematic-double_sequence .cinema-beam{height:7px;animation-name:cinemaSweep}
.cinematic-sasaki .cinema-charge{border-width:14px;background:radial-gradient(circle,#f9efff,transparent 60%);box-shadow:0 0 65px #b058ff,inset 0 0 45px #e3adff}
.cinematic-sasaki .cinema-orbit{border-style:dashed;box-shadow:0 0 35px #be75ff}
.cinematic-sasaki .cinema-beam{height:24px}
.cinematic-four_of_kind .cinema-orbit{border-radius:18%;border-width:5px;border-left-color:var(--impact-color);border-right-color:var(--impact-color)}
.cinematic-four_of_kind .cinema-beam{height:30px;box-shadow:0 0 45px #ff952d}
.cinematic-four_of_kind .combo-wave{border-width:9px;box-shadow:0 0 35px #ffb755,inset 0 0 25px #ffb755}
.cinema-cards{position:absolute;z-index:7;display:grid;align-items:start;perspective:800px}
.cinema-card{height:var(--card-height);position:relative;color:#121d24;background:linear-gradient(130deg,#fffef7,#e8e7df);border:1px solid #e9d9b1;border-radius:4px;box-sizing:border-box;box-shadow:0 3px 13px #000b,0 0 10px color-mix(in srgb,var(--impact-color) 45%,transparent);animation:cinemaCardRise var(--card-travel) cubic-bezier(.12,.67,.19,1) var(--card-delay) both,cinemaCardExit .3s ease-in var(--card-exit) forwards;font-family:Georgia,serif}
.cinema-card.is-red{color:#a61d38}
.cinema-card-rank{position:absolute;left:8%;top:5%;font-size:clamp(17px,calc(var(--card-height)*.26),54px);line-height:1;font-weight:900}
.cinema-card-suit{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);font-size:calc(var(--card-height)*.36);line-height:1}
@keyframes cinemaBlackout{0%{opacity:0}12%,89%{opacity:.98}100%{opacity:0}}
@keyframes cinemaAura{0%{opacity:0;transform:scale(.7)}22%,86%{opacity:.85}100%{opacity:0;transform:scale(1.18)}}
@keyframes cinemaCharge{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}30%{opacity:.7}82%{opacity:1;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(.04)}}
@keyframes cinemaPortrait{0%{opacity:0;transform:translate(calc(-50% + var(--flight-x)),calc(-50% + var(--flight-y))) scale(var(--source-scale))}12%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}21%,90%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-48%) scale(.98)}}
@keyframes cinemaWords{0%{opacity:0;transform:translateY(8px) scale(1.08)}12%,84%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-3px)}}
@keyframes cinemaOrbit{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-25deg)}15%,82%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2) rotate(180deg)}}
@keyframes cinemaBeam{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--beam-angle)) scaleX(.02)}16%{opacity:1;transform:translate(-50%,-50%) rotate(var(--beam-angle)) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--beam-angle)) scaleX(1.3) scaleY(.1)}}
@keyframes cinemaSweep{0%{opacity:0;transform:translate(-130%,-50%) rotate(var(--beam-angle)) scaleX(.2)}25%{opacity:1}100%{opacity:0;transform:translate(15%,-50%) rotate(var(--beam-angle)) scaleX(1.2)}}
@keyframes cinemaFinisher{0%{opacity:0;transform:rotate(var(--ray-angle)) scaleX(.05)}18%{opacity:.85}100%{opacity:0;transform:rotate(var(--ray-angle)) scaleX(1.7) scaleY(.1)}}
.cinema-card-corner{position:absolute;right:7%;bottom:5%;font-size:calc(var(--card-height)*.16);line-height:1}
.cinema-card-trail{position:absolute;z-index:-1;left:12%;top:45%;width:76%;height:220%;background:linear-gradient(var(--impact-color),transparent);filter:blur(9px);animation:cinemaTrail var(--card-travel) linear both}
.cinema-pair-link,.cinema-chain-link{position:absolute;z-index:5;height:3px;background:#b6f6ff;box-shadow:0 0 8px #39d8ff,0 0 17px #39d8ff;transform-origin:left center;animation:cinemaLink .45s ease-out both}
.cinema-pair-link{height:5px}
.triplet-counter .cutin-title{animation:tripletTaunt .6s cubic-bezier(.15,.8,.25,1) .18s both;color:#ffe3a1}
@keyframes tripletTaunt{0%{opacity:0;transform:scale(1.8) rotate(-7deg)}25%{opacity:1;transform:scale(.93) rotate(2deg)}55%{transform:scale(1.05) rotate(-1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes cinemaCardRise{0%{opacity:0;transform:translate(var(--rise-x),var(--rise-y)) rotateZ(var(--rise-turn)) rotateY(-36deg) scale(.7)}24%{opacity:1}100%{opacity:1;transform:translate(0,0) rotateZ(0) rotateY(0) scale(1)}}
@keyframes cinemaCardExit{to{opacity:0}}
@keyframes cinemaTrail{0%{opacity:0}25%,60%{opacity:.55}100%{opacity:0}}
@keyframes cinemaLink{0%{opacity:0}35%{opacity:1}100%{opacity:.7}}
@keyframes cinemaStageJolt{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,2px)}42%{transform:translate(4px,-2px)}66%{transform:translate(-2px,1px)}82%{transform:translate(1px,0)}}
@media(prefers-reduced-motion:reduce){.cinema-aura,.cinema-charge,.cinema-orbit,.cinema-flash,.cinema-beam,.cinema-finisher,.cinema-cards,.cinema-pair-link,.cinema-chain-link{display:none}.combo-cinematic.cinema-hit{animation:none}}

/* Result announcements are a separate visual language from card attacks. */
.result-announcement{position:absolute;inset:0;isolation:isolate;overflow:hidden;animation:finaleEnvelope var(--result-duration) linear both}
.finale-shade{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 45%,#141510dd,#030a08f5 78%)}
.announcement-lose .finale-shade{background:radial-gradient(ellipse at 50% 45%,#19232be8,#070c12f5 78%)}
.finale-copy{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:80%;text-shadow:0 4px 24px #000}
.finale-kicker{font-size:clamp(14px,1.8vw,20px);color:#dad0b4;letter-spacing:.12em;margin-bottom:10px}
.finale-title{font-size:var(--finale-font);font-family:serif;font-weight:950;line-height:1.15;letter-spacing:.18em;text-indent:.18em;color:#ffdf92;animation:finaleWinTitle .65s cubic-bezier(.18,.8,.2,1) both}
.finale-subtitle{font-size:clamp(14px,1.8vw,20px);color:#f1e3bc;margin-top:14px}
.finale-portrait{position:absolute;bottom:-2%;z-index:2;overflow:hidden;opacity:.68;background:transparent;border:0;border-radius:0;box-shadow:none;mask-image:radial-gradient(ellipse 70% 78% at 50% 35%,#000 44%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse 70% 78% at 50% 35%,#000 44%,transparent 96%);animation:finalePortrait .7s ease-out both}
.finale-gold-light{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 50%,#ffe8b244,#cf8d1c16 47%,transparent 72%);animation:finaleGlow 2.3s ease-out both}
.finale-ray{position:absolute;left:50%;top:50%;width:45%;height:2px;z-index:1;transform-origin:left center;background:linear-gradient(90deg,#ffe8a867,transparent 85%);transform:rotate(var(--ray-angle));animation:finaleRay 1.6s ease-out both}
.finale-confetti{position:absolute;top:-14px;z-index:3;width:6px;height:12px;background:linear-gradient(120deg,#fff0b5,#c99737);animation:finaleConfetti 1.8s cubic-bezier(.2,.45,.4,1) var(--delay) both}
.finale-confetti:nth-child(3n){width:4px;height:4px;border-radius:50%;background:#fff5cf}
.announcement-lose .finale-title{color:#dce2e8;animation:finaleLoseTitle .6s ease-out both}
.announcement-lose .finale-kicker,.announcement-lose .finale-subtitle{color:#abb9c9}
.announcement-lose .finale-portrait{filter:grayscale(.85) brightness(.7);opacity:.55;animation:finaleDefeatPortrait 1.5s ease-out both}
.finale-fall-line{position:absolute;left:20%;right:20%;top:64%;height:2px;z-index:3;background:linear-gradient(90deg,transparent,#b7797188,transparent);animation:finaleFallLine 1.6s ease-out both}
.finale-dust{position:absolute;top:50%;width:4px;height:4px;background:#788697;z-index:3;animation:finaleDust 1.35s ease-in var(--delay) both}
.team-results .result-kicker{font-size:13px;color:#c8c7b7;text-align:center;letter-spacing:.1em;margin-bottom:4px}
.team-results[data-outcome=win] h2{color:#ffdc8d;letter-spacing:.16em;font-size:clamp(30px,5vw,45px)}
.team-results[data-outcome=lose] h2{color:#cdd7e3;letter-spacing:.16em;font-size:clamp(30px,5vw,45px)}
.team-results[data-outcome=draw] h2{color:#e0d3b0}
@keyframes finaleEnvelope{0%{opacity:0}12%,86%{opacity:1}100%{opacity:0}}
@keyframes finaleWinTitle{0%{opacity:0;transform:scale(.75) translateY(18px)}65%{opacity:1;transform:scale(1.06) translateY(0)}100%{opacity:1;transform:scale(1)}}
@keyframes finaleLoseTitle{0%{opacity:0;transform:translateY(-18px)}55%{opacity:1;transform:translateY(3px)}100%{opacity:1;transform:translateY(0)}}
@keyframes finalePortrait{from{transform:translateY(25px);opacity:0}to{transform:translateY(0);opacity:.68}}
@keyframes finaleDefeatPortrait{from{transform:translateY(0);opacity:0}35%{opacity:.55}to{transform:translateY(10px);opacity:.45}}
@keyframes finaleGlow{0%{opacity:0;transform:scale(.7)}30%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(1.25)}}
@keyframes finaleRay{0%{opacity:0;transform:rotate(var(--ray-angle)) scaleX(.1)}45%{opacity:.9}100%{opacity:0;transform:rotate(var(--ray-angle)) scaleX(1.1)}}
@keyframes finaleConfetti{0%{opacity:0;transform:translate(0,0) rotate(0)}10%,80%{opacity:1}100%{opacity:0;transform:translate(var(--drift),var(--finale-height)) rotate(var(--spin))}}
@keyframes finaleFallLine{0%{opacity:0;transform:scaleX(.2)}25%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.8) translateY(35px)}}
@keyframes finaleDust{0%{opacity:0;transform:translate(0,0)}20%{opacity:.6}100%{opacity:0;transform:translate(var(--drift),90px)}}
.announcement-reduced{animation:none}.announcement-reduced .finale-title{animation:none}
@media(prefers-reduced-motion:reduce){.result-announcement,.finale-title{animation:none}.finale-portrait,.finale-gold-light,.finale-ray,.finale-confetti,.finale-fall-line,.finale-dust{display:none}}

/* Committed pig: eight seconds; an actual black-pig capture: ten seconds. */
.pig-storm .cutin-scrim{background:#000;animation:stormDarken var(--impact-duration) linear both}
.pig-storm .cutin-horizon{background:none}
.pig-storm .cutin-portrait{display:none}
.pig-storm .cutin-copy{z-index:7;animation:pigRevealCopy var(--pig-stage-life) ease-out var(--pig-reveal) both}
.pig-storm .impact-center{z-index:4}
.pig-storm .cutin-title{background:linear-gradient(#fff7df 5%,#ffce87 40%,#ff546e 80%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 #461025) drop-shadow(0 0 20px #ff4c6777)}
.pig-storm .cutin-detail{color:#ffe0a0;letter-spacing:.08em}
.pig-storm-flash{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse at 45% 35%,#e4f7ff,#729cbd77 55%,transparent);animation:stormFlash .55s ease-out both}
.pig-lightning-bolt{position:absolute;z-index:3;top:-4%;width:clamp(60px,10vw,150px);height:88%;transform-origin:center top;background:linear-gradient(#f5ffff 0%,#ddf7ff 62%,#b9e7ff 85%,transparent);clip-path:polygon(62% 0,96% 0,54% 34%,83% 34%,12% 100%,39% 54%,8% 54%);filter:drop-shadow(0 0 10px #a8e5ff);animation:pigLightning .6s ease-out both}
.pig-nebula{position:absolute;inset:-10%;z-index:1;background:radial-gradient(ellipse at 30% 55%,#97173188,transparent 40%),radial-gradient(ellipse at 72% 35%,#59269b77,transparent 43%);animation:pigNebula var(--impact-duration) ease-in-out both;filter:blur(14px)}
.pig-gold-halo{position:absolute;inset:6% 8%;z-index:1;background:conic-gradient(from 20deg,transparent 0deg,#ffe4a833 18deg,transparent 40deg,#ff425733 70deg,transparent 100deg,#ffc46144 140deg,transparent 180deg,#e51e6733 220deg,transparent 270deg,#ffd27944 320deg,transparent 360deg);mask-image:radial-gradient(ellipse,transparent 12%,#000 37%,transparent 72%);animation:pigHalo var(--impact-duration) ease-out both}
.pig-orbit{position:absolute;left:0;top:0;width:calc(var(--impact-radius)*1.45);height:calc(var(--impact-radius)*.6);border:3px solid #ffe0a8;border-bottom-color:#ff345f;border-left-color:transparent;border-radius:50%;box-shadow:0 0 22px #ffb65366;animation:pigOrbit calc(var(--impact-duration) - 200ms) ease-in-out both}
.pig-ten-seal{position:absolute;top:70%;z-index:5;font:900 clamp(28px,4.8vw,70px) Georgia;color:#ffd9b0;text-shadow:0 0 22px #fc294f,0 4px 0 #3b1420;animation:pigTenSeal var(--impact-duration) ease-out both}
.pig-ember{position:absolute;bottom:4%;z-index:3;width:3px;height:clamp(25px,6vh,65px);background:linear-gradient(transparent,#ffc071,#fff2b4);border-radius:50%;box-shadow:0 0 12px #ffac4f;animation:pigEmber 2s ease-out var(--ember-delay) both}
.pig-storm .combo-wave{border-top-color:#ffe2a7;border-bottom-color:#fc4365;animation-duration:1.2s}
.pig-storm .impact-particle{animation-duration:1.4s;box-shadow:0 0 12px #ffdd9b}
.pig-storm .combo-pressure{animation:stormPressure var(--pig-stage-life) ease-out var(--pig-reveal) both}
.pig-storm .combo-burst{animation-delay:var(--pig-reveal)}
.pig-entrance-art,.counter-victim{position:absolute;z-index:6;max-width:52%;object-fit:contain;pointer-events:none}
.pig-entrance-art{filter:drop-shadow(0 0 22px #ff182b99) drop-shadow(0 8px 24px #000);animation:pigEntrance var(--pig-stage-life) cubic-bezier(.2,.8,.25,1) var(--pig-reveal) both}
.black-pig-storm .pig-entrance-art{filter:drop-shadow(0 0 14px #b8e7ffcc) drop-shadow(0 0 42px #366eab99) drop-shadow(0 10px 24px #000)}
.black-pig-storm .cutin-title{background-image:linear-gradient(#fff 5%,#d9f2ff 35%,#5994d8 85%);filter:drop-shadow(0 3px 0 #031226) drop-shadow(0 0 28px #84bdff99)}
.black-pig-storm .cutin-detail{color:#d9efff}
.black-pig-storm .pig-nebula{background:radial-gradient(ellipse at 35% 50%,#22457599,transparent 40%),radial-gradient(ellipse at 72% 35%,#17377888,transparent 43%)}
.black-pig-storm .pig-gold-halo{filter:hue-rotate(170deg) saturate(.65)}
.black-pig-storm .pig-orbit{border-color:#d4f5ff #5b9de3 transparent;box-shadow:0 0 32px #c4edff88;border-width:5px}
.black-pig-storm .pig-ten-seal{color:#e3f5ff;text-shadow:0 0 26px #77b7ff,0 4px 0 #061324}
.black-pig-storm .pig-ember{background:linear-gradient(transparent,#70b9ff,#fff);box-shadow:0 0 16px #8cd7ff}
.black-pig-storm .combo-wave{border:10px solid #ccefff;box-shadow:0 0 36px #70baff,inset 0 0 26px #fff;animation-duration:1.4s}
.black-pig-storm .combo-counter-wash{z-index:2;animation-delay:var(--pig-reveal)}
.black-pig-storm .pig-lightning-bolt{width:clamp(75px,12vw,180px);filter:drop-shadow(0 0 20px #d2f5ff)}
.counter-victim{z-index:5;filter:drop-shadow(0 0 20px #e12d49aa);animation:counterVictim var(--pig-reveal) ease-in both}
.counter-fragment{position:absolute;left:0;top:0;width:22px;height:11px;background:linear-gradient(45deg,#8d0b20,#ff5e6b,#ffc2bc);clip-path:polygon(0 0,100% 35%,35% 100%);box-shadow:0 0 12px #ff415b;animation:counterShatter 1.3s ease-out var(--pig-reveal) both}
.counter-eclipse{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 37% 50%,transparent 8%,#749fde66 22%,transparent 36%);animation:counterEclipse var(--pig-stage-life) ease-out var(--pig-reveal) both}
.combo-hit-ring{position:absolute;left:0;top:0;width:calc(var(--impact-radius)*1.3);height:calc(var(--impact-radius)*1.3);border:calc(3px + var(--hit-strength)*5px) solid var(--impact-color);border-radius:50%;box-shadow:inset 0 0 35px var(--impact-color),0 0 28px var(--impact-color);animation:comboHit .6s ease-out both}
@keyframes stormDarken{0%{opacity:0}7%{opacity:.6}16%,94%{opacity:1}100%{opacity:0}}
@keyframes stormFlash{0%{opacity:0}12%{opacity:var(--flash-strength)}100%{opacity:0}}
@keyframes pigLightning{0%{opacity:0;transform:rotate(var(--bolt-angle)) scaleY(.25)}15%{opacity:1;transform:rotate(var(--bolt-angle)) scaleY(1)}100%{opacity:0;transform:rotate(var(--bolt-angle)) scaleY(1.04)}}
@keyframes pigNebula{0%{opacity:0;transform:scale(.7)}18%,87%{opacity:.8}100%{opacity:0;transform:scale(1.15) rotate(8deg)}}
@keyframes pigHalo{0%{opacity:0;transform:rotate(-25deg) scale(.55)}24%,88%{opacity:.8}100%{opacity:0;transform:rotate(65deg) scale(1.15)}}
@keyframes pigOrbit{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--orbit-angle)) scale(.2)}22%,80%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--orbit-angle) + 210deg)) scale(1.8)}}
@keyframes pigTenSeal{0%,20%{opacity:0;transform:translate(-50%,35px) scale(.4)}35%,88%{opacity:.85;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-25px) scale(1.15)}}
@keyframes pigEmber{0%{opacity:0;transform:translateY(30px) scaleY(.2)}20%,50%{opacity:.85}100%{opacity:0;transform:translateY(var(--ember-travel)) scaleY(.1)}}
@keyframes pigEntrance{0%{opacity:0;transform:translate(-50%,-46%) scale(.25)}7%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}15%,92%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-52%) scale(1.06)}}
@keyframes pigRevealCopy{0%{opacity:0;transform:translateY(-42%) scale(.8)}8%,91%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-55%) scale(1.05)}}
@keyframes counterVictim{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%,79%{opacity:.8;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-14deg)}}
@keyframes counterShatter{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}12%{opacity:1}100%{opacity:0;transform:translate(var(--fragment-x),var(--fragment-y)) rotate(var(--fragment-spin)) scale(.5)}}
@keyframes counterEclipse{0%{opacity:0;transform:scale(.3)}8%{opacity:.9;transform:scale(1.1)}25%,85%{opacity:.45}100%{opacity:0;transform:scale(1.6)}}
@keyframes stormPressure{0%{opacity:0}12%,86%{opacity:.7}100%{opacity:0}}
@keyframes comboHit{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}10%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(calc(.65 + var(--hit-strength)*.55))}}
@media(prefers-reduced-motion:reduce){.pig-storm-flash,.pig-lightning-bolt,.pig-nebula,.pig-gold-halo,.pig-orbit,.pig-ten-seal,.pig-ember,.pig-entrance-art,.counter-victim,.counter-fragment,.counter-eclipse,.combo-hit-ring{display:none}}

/* 0.4.4 — Cinematic lounge, original brass artwork, visible daily destinations. */
:root{color-scheme:dark;font-family:"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-size:16px;color:#fff1dc;background:#151411;--gold:#e5c382;--muted:#c8baa7;--line:#95674f55;--panel:#27211b;--panel-deep:#1b1815;--cream:#fff1dc}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input,select,textarea,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:none;border:0}button:disabled{cursor:default;opacity:.56}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid #ffdc91;outline-offset:3px}button:not(:disabled):hover{filter:brightness(1.1)}h2,h3,p{margin-top:0}h2{font-size:24px;line-height:1.3}h3{font-size:18px;line-height:1.35}p{line-height:1.55}small{font-size:13px}.ui-icon{width:21px;height:21px;flex:none;vertical-align:middle}button,a{touch-action:manipulation}img{user-select:none}.hub{position:fixed;left:0;top:0;transform-origin:top left;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;container-type:size;background:linear-gradient(150deg,#481a26,#28131c 52%,#371720)}.hub-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.075;z-index:-2}.hub-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#2e0f19aa,#1e0d17b8)}
.hub-header{height:66px;min-height:66px;display:flex;align-items:center;gap:22px;padding:0 max(3%,env(safe-area-inset-left));background:linear-gradient(180deg,#4b1724,#34121d);border-bottom:1px solid #b7875155}.brand{display:flex;align-items:center;gap:13px;padding:0;color:var(--gold)}.header-tools{display:flex;gap:10px;align-items:center;margin-left:auto}.music-button{display:flex;align-items:center;gap:7px;font-size:14px;border:1px solid #bb966858;border-radius:7px;padding:9px 12px;color:#ecd9ae;background:#221b1d;min-height:39px}.music-button.is-playing{background:#344134;border-color:#a8b57f;color:#fff1c9}.icon-button{display:grid;place-items:center;width:39px;height:39px;border:1px solid #bb966845;border-radius:7px;background:#30161f;color:#e8c18a}
.wallet{display:flex;flex:none;align-items:center;gap:18px;padding:0 max(3%,env(safe-area-inset-left));height:48px;min-height:48px;background:#1d0c13d9;border-bottom:1px solid var(--line)}.wallet-resources{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;flex:1;align-items:center;min-width:0}.wallet-resources button{display:flex;align-items:center;gap:8px;min-width:0;text-align:left;font-size:14px;padding:5px 0}.wallet-resources b{font-size:17px;color:var(--gold);font-variant-numeric:tabular-nums;text-overflow:ellipsis;overflow:hidden}.wallet-more{font-size:14px;font-weight:700;color:#e5c382;padding:7px 12px;border:1px solid #b88a5755;border-radius:5px;background:#503020}
.hub-main{display:flex;flex:1;min-height:0;padding:22px 3%;overflow:hidden}.main-panel{flex:1;min-width:0;min-height:0;overflow:auto;background:#171613eb;border:1px solid #b88d5755;border-radius:13px;box-shadow:0 12px 36px #10060c40;scrollbar-width:thin;scrollbar-color:#aa795a #201b16}.main-panel.home-panel{border:0;background:none;box-shadow:none;overflow:hidden}.quick-menu{flex:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));padding:0 max(2%,env(safe-area-inset-left));min-height:74px;background:linear-gradient(#411925,#29101a);border-top:1px solid #c5996266;box-shadow:0 -8px 30px #13090b44}.quick-menu button{display:flex;position:relative;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:72px;padding:10px 7px;font-size:16px;font-weight:600;color:#d3b3a6;white-space:nowrap;border-top:3px solid transparent}.quick-menu button+button:before{content:"";position:absolute;left:0;top:30%;height:40%;width:1px;background:#c9996740}.quick-menu button.active{color:#ffe5a8;border-top-color:#f0c77b;background:linear-gradient(#81543135,#63312208)}.quick-menu .ui-icon{width:25px;height:25px}.quick-menu button.active .ui-icon{filter:drop-shadow(0 0 7px #e8a75844)}.notification-dot{width:7px;height:7px;border-radius:50%;background:#ff765f;position:absolute;top:17px;right:12%}.notification-count{display:grid;place-items:center;border-radius:20px;min-width:18px;height:18px;padding:0 4px;font-size:12px;font-style:normal;color:white;background:#ab3548;position:absolute;top:10px;right:9%}
.primary,.secondary,.subtle{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:7px;min-height:42px;padding:10px 18px;font-size:15px;font-weight:700;white-space:nowrap}.primary{background:linear-gradient(#f0d094,#c0924f);color:#341b15;border:1px solid #f3d59b;box-shadow:0 4px 12px #17080930}.primary:disabled{background:#453827;border-color:#8f725257;color:#c9ae85;opacity:.85;box-shadow:none}.secondary{background:#382a20;border:1px solid #ad7d615c;color:#f6dfbb}.subtle{border:1px solid transparent;color:#d5b8a1;background:transparent;padding:8px 10px}.subtle.selected{background:#685137;border-color:#d9b67866;color:#fff0c7}.wide{width:100%}.positive{color:#d0dfa3!important}.muted{color:var(--muted)}.eyebrow{display:block;font-size:13px;letter-spacing:.055em;color:#e5c48f}.section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none}.section-title h2,.section-title h3{margin:0}.section-title>span{color:var(--muted);font-size:14px}.section-title>div>h2{margin:0}.page-description{margin:5px 0 0;color:var(--muted);font-size:14px}.reward-note{font-size:13px;color:#c4ada5;line-height:1.5;margin:10px 0 0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;min-height:170px}.empty-state>.ui-icon,.empty-suit{width:40px;height:40px;font-size:40px;color:#d7b079;margin-bottom:10px}.empty-state h2,.empty-state h3{margin:0 0 10px;font-size:20px}.empty-state p{color:var(--muted);font-size:15px;max-width:460px;margin:0 0 16px}.catalog{padding:22px}.inline-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.inline-actions select{padding:9px;max-width:100%}
.portrait{position:relative;overflow:hidden;isolation:isolate;width:140px;height:195px}.portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px #10050966)}.portrait.sprite img{max-width:none;height:118%;width:300%;position:absolute;object-fit:fill;left:0;top:-8.64%}.sprite.art-2 img{left:-100%}.sprite.art-3 img{left:-200%}
/* Shared page and shop controls. */
.shop-page,.challenge-page,.attendance-page,.exchange-page,.support-page,.history-page{height:100%;min-height:0;display:flex;flex-direction:column;padding:22px}.shop-top{display:flex;align-items:center;gap:14px;flex:none}.shop-navigation,.page-tabs{display:flex;gap:22px;border-bottom:1px solid #b8936255;flex:1;min-width:0;flex-shrink:0}.shop-navigation button,.page-tabs button{border-bottom:3px solid transparent;color:#d2b0a6;font-size:17px;font-weight:600;min-height:43px;padding:7px 2px;white-space:nowrap}.shop-navigation .selected,.page-tabs .selected{color:#ffe2a6;border-bottom-color:#e9c789}.shop-count{font-size:14px;color:#c9b1a1;white-space:nowrap}.shop-category-select{display:none}.shop-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,29%);gap:22px;min-height:0;flex:1;padding-top:14px}.shop-shelf{min-height:0;display:flex;flex-direction:column;min-width:0}.category-tabs{display:flex;gap:7px;flex-wrap:wrap;flex:none;padding-bottom:12px}.category-tabs button{font-size:14px;min-height:34px;padding:7px 13px}.category-tabs .selected{background:#ddba79;border-color:#e8cd96;color:#3c2118}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;overflow:auto;min-height:0;align-content:start;padding:2px 7px 8px 2px;scrollbar-width:thin;scrollbar-color:#b58e61 #201a15}.character-card{display:flex;align-items:center;flex-direction:column;position:relative;border:1px solid #92695988;border-radius:9px;min-width:0;background:linear-gradient(#503038,#321c25);padding:12px 8px}.character-card.inspected{outline:2px solid #e8c88a;outline-offset:-2px;background:linear-gradient(#6a4433,#43281f)}.character-card .tier{position:absolute;left:8px;top:8px;font-size:12px;background:#201a15c9;border-radius:4px;padding:3px 6px;color:#e9c79f;z-index:1}.character-card .portrait{width:100%;height:clamp(100px,20cqh,190px);max-width:138px;margin:5px 0 10px}.character-card strong{font-size:16px;line-height:1.35}.character-price{font-size:14px;color:#ecc986;line-height:1.4;margin-top:7px}.character-card.equipped .character-price{color:#d0dfa3}.character-showcase{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto;align-items:center;text-align:center;padding-left:20px;border-left:1px solid #b18d6244;background:radial-gradient(ellipse at 50% 32%,#9d714222,transparent 65%)}.showcase-art{display:flex;justify-content:center;min-height:80px;flex:1;max-height:340px;width:100%}.showcase-art .portrait{width:100%;max-width:230px;height:100%;min-height:80px}.showcase-info{width:100%;flex:none}.showcase-info h2{font-size:26px;margin:7px 0;color:#fff0c8}.showcase-info p{font-size:14px;color:#ceb9ac;line-height:1.55;max-width:300px;margin:9px auto}.showcase-price{display:block;font-size:20px;color:#f1ce8e;margin:10px 0 15px}.vip-condition{font-size:13px;color:#e3be8d}.showcase-actions{display:flex;flex-direction:column;gap:8px}.showcase-actions button{width:100%;font-size:15px;min-height:42px;padding:9px 8px}.showcase-actions .ui-icon{width:17px;height:17px}.charge-page{overflow:auto}.compact-notice{padding:10px 13px;border:1px solid #b58d564a;background:#5845274a;border-radius:7px;font-size:14px;color:#ecd2aa;margin:13px 0}.resource-tabs{padding:0 0 14px;gap:10px}.resource-tabs button{min-width:70px}.package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.package{border:1px solid #b98b5e66;background:linear-gradient(140deg,#4d3827,#2b231c);border-radius:9px;text-align:center;padding:20px 14px}.package .eyebrow{font-size:15px}.package-mark{display:grid;place-items:center;height:48px;margin:14px auto 8px}.package-mark .ui-icon{height:45px;width:45px;color:#e9c789}.package h3{font-size:28px;margin:10px 0}.package h3 small{font-size:14px;margin-left:4px}.package p{font-size:14px;color:#d5b5a6;margin-bottom:16px}.package button{width:100%;font-size:15px;padding:9px;min-height:40px}.charge-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:18px}.charge-tools>span{font-size:13px;color:#cbb4a8}.charge-tools button{font-size:14px}
/* Attendance keeps the current reward beside all seven original rewards. */
.attendance-layout{display:grid;grid-template-columns:27% minmax(0,1fr);gap:22px;flex:1;min-height:0;padding-top:20px}.attendance-today{border:1px solid #b88d5b66;background:linear-gradient(145deg,#4d3927,#292019);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center;overflow:auto}.streak-count{display:flex;align-items:baseline;gap:6px;margin:8px 0 16px;color:#f5d08a}.streak-count b{font:70px Georgia,serif;line-height:1}.streak-count span{font-size:20px}.attendance-today>.primary{width:100%;font-size:16px}.attendance-today p{font-size:14px;color:#dcc3ae;margin:10px 0 16px}.attendance-bonus{width:100%;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:center;align-items:center;gap:12px;font-size:14px;color:#cdb09f}.attendance-bonus .ui-icon{width:30px;height:30px;color:#e2b76b}.attendance-bonus strong{display:block;font-size:23px;color:#f9d68d;margin-top:4px}.attendance-week{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;overflow:auto}.attendance-week>.section-title{margin-bottom:19px}.attendance-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.attendance-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;border:1px solid #a37a6055;border-radius:10px;padding:19px 5px;color:#c9ae9c;background:#28211c;min-width:0}.attendance-day>span{font-size:14px;white-space:nowrap}.attendance-day>span:last-child{font-size:12px}.attendance-day strong{font-size:26px;color:#ead3ac}.attendance-day strong small{font-size:13px;margin-left:2px}.stamp{width:43px;height:43px;display:grid;place-items:center;border:1px solid #bb936342;border-radius:50%;background:#25131b}.stamp .ui-icon{width:24px;height:24px;color:#b9996b}.attendance-day.checked .stamp{background:#39513b;border-color:#8ab8768c}.attendance-day.checked .stamp .ui-icon{color:#d6ebb6}.attendance-day.today{border:2px solid #efd093;background:linear-gradient(#6d4333,#3e231f);padding:18px 4px;color:#ffebbf}.attendance-day.today strong{color:#ffe0a1}.attendance-week>.reward-note{margin-top:18px}
/* Two independent lists match the uploaded daily / cumulative challenge screen. */
.challenge-page>.section-title{padding-bottom:13px}.challenge-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;flex:1;min-height:0}.challenge-panel{min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;background:#211d18;overflow:hidden}.challenge-panel>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid #a9806055;min-height:68px;flex:none;background:#38291f}.challenge-panel h3{display:flex;align-items:center;gap:8px;margin:0;font-size:18px;color:#f8dfb0}.challenge-panel h3 .ui-icon{width:20px;height:20px;color:#e9bd7a}.challenge-panel header small{color:#c9aa9c;display:block;font-size:13px;margin-top:4px}.bonus-claim{font-size:13px;color:#f4d096;border:1px solid #b28c6259;border-radius:5px;padding:8px;background:#6e49373b}.bonus-claim:disabled{opacity:.8;color:#d1b59b}.goal-list{display:flex;flex-direction:column;gap:9px;overflow:auto;min-height:0;padding:12px;scrollbar-width:thin;scrollbar-color:#ba835b #28151c}.goal-row{display:flex;align-items:center;gap:13px;flex:none;padding:14px 12px;border:1px solid #835d5155;border-radius:7px;background:#30271f;min-width:0}.goal-row.claimable{border-color:#d8b777;background:#53412c}.goal-row.claimed{background:#272d26;border-color:#68745866}.goal-icon{font-size:25px;width:31px;flex:none;text-align:center}.goal-copy{flex:1;min-width:0}.goal-copy strong{display:block;font-size:16px;color:#f5e4c9;line-height:1.4}.goal-copy small{display:block;font-size:13px;color:#c7aaa0;margin-top:4px;line-height:1.4;word-break:keep-all}.goal-progress{display:flex;align-items:center;gap:9px;margin-top:8px}.goal-progress progress{flex:1;min-width:20px;height:5px;appearance:none;border:0;border-radius:4px;overflow:hidden;background:#201218}.goal-progress progress::-webkit-progress-bar{background:#201218}.goal-progress progress::-webkit-progress-value{background:#e4bc79}.goal-progress progress::-moz-progress-bar{background:#e4bc79}.goal-progress span{font-size:12px;white-space:nowrap;color:#d7bca0;font-variant-numeric:tabular-nums}.goal-claim{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:78px;flex:none}.goal-claim>span{font-size:13px;color:#d6b5a2}.goal-claim b{font-size:17px;color:#efd095}.goal-claim button{font-size:13px;min-height:30px;padding:5px 9px;min-width:75px}.goal-claim .subtle{opacity:1;color:#bfa5a0;background:#23151a66}.challenge-arena-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:8px 12px 0;flex:none}.challenge-arena-tabs button{font-size:13px;min-height:32px;border:1px solid #986f5155;background:#39222a;border-radius:5px;padding:4px 1px;color:#c9b09f;white-space:nowrap}.challenge-arena-tabs .selected{background:#735335;border-color:#d5ae6e;color:#ffe6b1}.challenge-page>.reward-note{font-size:12px;flex:none;margin-top:9px}
/* Exchange: adjacent currencies, explicit direction, preview before committing. */
.exchange-layout{display:grid;grid-template-columns:31% minmax(0,1fr);gap:22px;padding-top:20px;flex:1;min-height:0}.exchange-pairs{display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0}.exchange-pairs>button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:67px;flex:1;max-height:95px;background:#382029;border:1px solid #a77a5b55;border-radius:8px;font-size:17px;color:#d4b59f}.exchange-pairs>button .ui-icon{margin:0 4px;color:#bf9871}.exchange-pairs>button.selected{border-color:#e9c78b;background:linear-gradient(90deg,#694834,#482c28);color:#ffe8ba}.exchange-desk{display:flex;flex-direction:column;min-height:0;overflow:auto;border:1px solid #a5805b55;border-radius:9px;background:#351c23;padding:20px;justify-content:center}.exchange-directions{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none}.exchange-directions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:47px;border:1px solid #976c5755;border-radius:7px;color:#c3a3a0;font-size:16px}.exchange-directions .selected{color:#e8efd2;border-color:#a6b67877;background:#40543788}.exchange-rate{display:flex;align-items:center;justify-content:center;gap:24px;color:#f4d698;padding:26px 0;font-size:26px}.exchange-rate .ui-icon{color:#b08a6a}.exchange-quantity{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;color:#dfc2a8}.exchange-quantity>div{display:flex;align-items:center;gap:7px}.exchange-quantity .secondary{padding:5px;width:38px;min-height:38px}.exchange-quantity input{min-width:0;width:84px;font-size:21px;font-weight:700;text-align:center;background:#25151c;border:1px solid #9b715457;color:#f4d698;border-radius:6px;padding:8px 0;appearance:textfield}.exchange-quantity input::-webkit-inner-spin-button{appearance:none}.exchange-total{display:flex;justify-content:space-between;gap:12px;margin:18px 0;padding:15px 0;border-block:1px solid var(--line);font-size:14px;color:#cbb09f}.exchange-total b{color:#f4dbac;margin-left:7px;font-weight:600}.exchange-submit{min-height:45px}.exchange-desk>.reward-note{text-align:center}.confirm-exchange{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px 0 30px;color:#f3d093;font-size:22px}
/* Help and account-owned saved enquiries; no fabricated conversations. */
.support-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;flex:1;min-height:0;padding-top:20px}.faq-list,.support-inquiries{min-height:0;display:flex;flex-direction:column}.faq-list{overflow:auto}.faq-list h3{font-size:17px;margin-bottom:15px;color:#efd1a0}.faq-list details,.inquiry-list details{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:#38202a;flex:none}.faq-list summary,.inquiry-list summary{cursor:pointer;padding:16px;font-size:15px;line-height:1.5;color:#f4ddbf}.faq-list details p,.inquiry-list details p{font-size:14px;color:#d4bcae;margin:0 16px 17px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.inquiry-list{overflow:auto;min-height:0;margin-top:13px}.inquiry-list summary>span{overflow-wrap:anywhere}.inquiry-list summary small{color:#e7c183;margin-left:12px;white-space:nowrap}.inquiry-list details>small{display:block;margin:10px 16px 16px;color:#bda59e}.support-inquiries>.section-title>.primary{font-size:14px;min-height:38px;padding:8px 13px}.support-answer{margin:16px;padding:13px;border-radius:6px;background:#4e3630}.support-answer p{margin:9px 0 0!important}.history-page .page-tabs{flex:none;margin-top:14px;margin-bottom:15px}.history-list{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#aa7d57 #26171d}.history-list>article{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 18px;border-bottom:1px solid #a4775855}.history-list>article>div{display:flex;flex-direction:column;gap:7px;min-width:0}.history-list b{font-size:16px;overflow-wrap:anywhere}.history-list span{font-size:14px;color:#cbb0a5}.history-value{align-items:flex-end;text-align:right;flex:none}.history-value strong{font-size:16px;color:#ead2a2}.history-value small{font-size:13px;color:#c7ab9c}
/* Room waiting and dialogs retain all existing actions. */
.waiting-content{display:flex;flex-direction:column;min-height:100%;padding:22px}.seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;min-height:160px;flex:1;padding:18px 0}.seat{min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:13px;border:1px solid #aa825657;border-radius:8px;background:#3c252a}.seat .portrait{width:100%;max-width:170px;height:clamp(110px,28cqh,230px)}.seat h3{font-size:18px;margin:10px 0 6px;overflow-wrap:anywhere;text-align:center}.seat p{font-size:14px;color:#dac098;margin:0}.seat.vacant{background:#29171d;border-style:dashed;color:#bca293}.seat.vacant>span{font-size:37px;color:#8e7159}.waiting-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:17px;border-top:1px solid var(--line)}.waiting-bottom p{font-size:14px;color:#cdb6a7;margin:0;line-height:1.6}.room-list{display:flex;flex-direction:column;gap:10px;margin-top:15px}.room-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px;border:1px solid var(--line);border-radius:8px;background:#3c232b}.room-row h3{font-size:18px;margin:6px 0}.room-row p{font-size:14px;color:var(--muted);margin:0}.room-join{display:flex;align-items:center;gap:14px;flex:none}.room-join>span{font-size:14px;color:#d8b79e}.catalog>.section-title+.section-title{margin-top:18px}.first-load{margin:auto;color:var(--gold)}
#toast{position:fixed;z-index:99999;left:50%;bottom:85px;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .15s;border:1px solid #ffe6b7;border-radius:8px;color:#321e17;background:#f3dba9;box-shadow:0 7px 30px #0d050880;padding:13px 20px;max-width:85vw;font-size:16px;font-weight:600}#toast.visible{opacity:1}.hub-dialog{background:#3a202b;color:#fff0d6;border:1px solid #c29c60;border-radius:12px;padding:22px;width:min(620px,90vw);max-height:88vh;overflow:auto;box-shadow:0 22px 60px #09020699}.hub-dialog::backdrop{background:#120711cf}.hub-dialog header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.hub-dialog h2{font-size:23px;margin:0}.close-dialog{background:transparent;color:#f0d5b3;font-size:30px;line-height:1;padding:7px}.hub-dialog p{font-size:16px;line-height:1.6;color:#d6bcaf}.hub-dialog label{display:flex;flex-direction:column;gap:9px;margin:14px 0 19px;font-size:16px}.hub-dialog input,.hub-dialog select,.hub-dialog textarea,.inline-actions select{background:#25141c;border:1px solid #a37e6377;border-radius:6px;color:#ffeed2;padding:11px;min-height:42px;font-size:16px;max-width:100%}.hub-dialog textarea{resize:vertical;min-height:100px}.hub-dialog input[type=range]{padding:0;accent-color:#ebca86;width:100%}.hub-dialog .inline-actions{margin-top:15px}.character-detail{display:grid;grid-template-columns:36% minmax(0,1fr);gap:20px;align-items:center}.character-detail>.portrait{width:100%;height:240px}.character-detail strong{font-size:21px;color:#edca84}.purchase-total{font-size:26px;color:#f6d08c}.effect-dialog{width:min(1000px,95vw);padding:14px}.effect-dialog header{margin-bottom:8px}.preview-host{height:min(55vh,430px);min-height:160px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,#614030,#21111b);border-radius:8px}.preview-host .chrome{position:absolute;inset:0}.preview-host .avatar-slot{position:absolute;width:100px;height:150px;left:25px;top:25px}.preview-host .portrait{width:100%;height:100%}.preview-host .character-effects{position:absolute;inset:0!important;pointer-events:none}.effect-dialog .inline-actions{justify-content:center;margin:12px 0 4px}.landscape-rotated .hub-dialog{width:min(620px,92vh);max-width:92vh;max-height:90vw;transform:rotate(90deg)}.landscape-rotated .effect-dialog{width:92vh}.landscape-rotated .preview-host{height:50vw}.landscape-rotated #toast{bottom:auto;top:50%;left:auto;right:0;max-width:70vh;transform:translateY(-50%) rotate(90deg)}
/* Logical landscape dimensions are set by viewport.ts, including portrait phones. */
@container (max-height:600px){
 .hub-header{height:52px;min-height:52px;padding-inline:2.4%;gap:17px}.brand{gap:10px}.header-tools{gap:8px}.music-button{min-height:35px;padding:7px 9px}.icon-button{width:35px;height:35px}.wallet{height:38px;min-height:38px;padding-inline:2.4%;gap:12px}.wallet-resources{gap:10px}.wallet-resources b{font-size:15px}.wallet-resources button{gap:6px}.wallet-more{padding:5px 9px}.hub-main{padding:13px 2.4%}.quick-menu{min-height:58px;padding-inline:1.4%}.quick-menu button{min-height:56px;font-size:15px;gap:7px;padding:8px 4px}.quick-menu .ui-icon{width:22px;height:22px}.notification-dot{top:10px}.notification-count{top:6px}.name-button{font-size:20px;padding:4px 0}.start-game{min-height:47px;font-size:21px}.shop-page,.challenge-page,.attendance-page,.exchange-page,.support-page,.history-page,.catalog,.waiting-content{padding:15px 17px}.section-title h2{font-size:22px}.shop-navigation,.page-tabs{gap:19px}.shop-navigation button,.page-tabs button{font-size:16px;min-height:37px;padding:6px 1px}.shop-body{padding-top:10px;gap:15px;grid-template-columns:minmax(0,1fr) 27%}.shop-category-select{display:block;max-width:106px;font-size:14px;background:#30271f;border:1px solid #9c785d77;border-radius:6px;padding:6px;min-height:33px;color:#f6dfbe}.shop-count,.shop-shelf>.category-tabs{display:none}.character-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.character-card{padding:9px 7px}.character-card .portrait{height:100px;margin:3px 0 7px}.character-card strong{font-size:15px}.character-price{font-size:14px;margin-top:5px}.character-showcase{padding-left:13px}.showcase-art{min-height:55px;max-height:160px}.showcase-art .portrait{min-height:55px;max-width:145px}.showcase-info .eyebrow,.showcase-info p{display:none}.showcase-info h2{font-size:21px;margin:5px 0}.showcase-price{font-size:17px;margin:5px 0 8px}.showcase-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.showcase-actions button{font-size:14px;min-height:35px;padding:6px 2px}.showcase-actions .ui-icon{display:none}.vip-condition{font-size:12px}.compact-notice{padding:8px 10px;margin:10px 0;font-size:13px}.package{padding:14px 10px}.package h3{font-size:24px}.package-mark{height:30px;margin:10px auto}.package-mark .ui-icon{height:30px;width:30px}.package p{margin-bottom:12px}.charge-tools{margin-top:12px;padding-top:12px}.attendance-layout{gap:15px;padding-top:14px;grid-template-columns:27% minmax(0,1fr)}.attendance-today{padding:15px}.streak-count{margin:4px 0 10px}.streak-count b{font-size:48px}.attendance-today>.primary{font-size:14px;min-height:37px;padding:8px 5px}.attendance-today p{font-size:13px;margin:8px 0 11px}.attendance-bonus{padding-top:11px;font-size:13px;gap:8px}.attendance-bonus strong{font-size:20px}.attendance-bonus .ui-icon{width:24px;height:24px}.attendance-week>.section-title{margin-bottom:12px}.attendance-days{gap:7px}.attendance-day{padding:13px 3px;gap:10px;border-radius:7px}.attendance-day.today{padding:12px 2px}.attendance-day strong{font-size:23px}.stamp{height:33px;width:33px}.stamp .ui-icon{width:20px;height:20px}.attendance-week>.reward-note{margin-top:12px}.challenge-columns{gap:13px}.challenge-panel>header{padding:10px 12px;min-height:54px}.challenge-panel h3{font-size:16px}.challenge-panel header small{font-size:12px}.bonus-claim{font-size:12px;padding:6px}.goal-list{padding:9px;gap:7px}.goal-row{padding:10px 9px;gap:10px}.goal-icon{width:25px;font-size:21px}.goal-copy strong{font-size:15px}.goal-copy small{font-size:12px}.goal-claim{min-width:69px;gap:5px}.goal-claim b{font-size:16px}.goal-claim button{min-width:67px;font-size:12px;padding:4px 7px;min-height:28px}.challenge-arena-tabs{padding:7px 9px 0}.challenge-arena-tabs button{font-size:12px;min-height:29px}.exchange-layout{padding-top:13px;gap:15px}.exchange-pairs{gap:8px}.exchange-pairs>button{min-height:47px;max-height:70px;font-size:16px;gap:7px}.exchange-desk{padding:14px}.exchange-directions{gap:9px}.exchange-directions button{font-size:14px;min-height:39px;gap:6px}.exchange-rate{font-size:23px;padding:17px 0;gap:18px}.exchange-total{margin:13px 0;padding:11px 0}.exchange-quantity{font-size:14px}.exchange-submit{min-height:39px}.support-layout{padding-top:13px;gap:17px}.faq-list h3{margin-bottom:10px}.faq-list summary,.inquiry-list summary{padding:12px;font-size:14px}.faq-list details p,.inquiry-list details p{margin:0 12px 12px}.history-page .page-tabs{margin-top:10px;margin-bottom:10px}.history-list>article{padding:12px 14px}.seats{padding:12px 0;gap:10px;min-height:140px}.seat{padding:9px}.seat .portrait{height:120px}.seat h3{font-size:16px;margin:7px 0}.waiting-bottom{padding-top:12px}#toast{bottom:67px;font-size:15px}
}
@container (max-width:900px){.header-tools{gap:6px}.wallet-resources{gap:7px}.wallet-resources button{gap:5px}.name-button{font-size:18px}.quick-menu button{font-size:14px;gap:5px}.quick-menu .ui-icon{width:20px;height:20px}.shop-body{grid-template-columns:minmax(0,1fr) 180px}.character-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.shop-navigation{gap:15px}.shop-navigation button{font-size:15px}.showcase-actions{gap:5px}.showcase-actions button{font-size:13px}.attendance-layout{grid-template-columns:24% minmax(0,1fr);gap:13px}.attendance-today{padding:12px 8px}.attendance-bonus .ui-icon{display:none}.attendance-week>.section-title>span{font-size:12px}.attendance-day{gap:9px}.attendance-days{gap:5px}.attendance-day>span{font-size:13px}.attendance-day>span:last-child{font-size:12px}.challenge-panel>header{padding:9px}.challenge-panel h3{font-size:15px;gap:6px}.challenge-panel h3 .ui-icon{width:17px;height:17px}.goal-row{gap:7px;padding:9px 7px}.goal-icon{width:22px;font-size:19px}.goal-claim{min-width:64px}.goal-claim button{min-width:62px;padding:4px 5px}.goal-copy strong{font-size:14px}.goal-progress{gap:6px}.bonus-claim{max-width:94px;line-height:1.3;white-space:normal}.exchange-pairs>button{gap:5px}.exchange-pairs>button .ui-icon{width:18px;margin:0}.exchange-directions button{gap:5px;font-size:14px}.exchange-rate{font-size:22px}.exchange-quantity input{width:68px}.exchange-quantity>div{gap:5px}.exchange-quantity .subtle{padding:6px}.exchange-total{font-size:13px}.exchange-total b{margin-left:5px}.history-list b,.history-value strong{font-size:15px}
}
@container (max-height:400px){
 .hub-header{height:44px;min-height:44px}.icon-button{height:31px;width:32px}.music-button{min-height:31px;padding:5px 8px;font-size:14px}.header-tools .ui-icon{width:18px;height:18px}.wallet{height:32px;min-height:32px}.wallet-resources button{font-size:13px;padding:3px 0}.wallet-resources b{font-size:14px}.wallet-more{font-size:13px;padding:4px 8px}.hub-main{padding-top:8px;padding-bottom:8px}.quick-menu{min-height:47px}.quick-menu button{min-height:46px;padding:6px 4px;font-size:14px;gap:5px}.quick-menu .ui-icon{width:18px;height:18px}.notification-dot{top:6px}.notification-count{height:16px;min-width:16px;font-size:12px;top:3px}.name-button{font-size:17px;padding:3px 0}.start-game{min-height:38px;font-size:19px}.start-game .ui-icon{width:19px;height:19px}.shop-page,.challenge-page,.attendance-page,.exchange-page,.support-page,.history-page,.catalog,.waiting-content{padding:10px 12px}.section-title h2{font-size:20px}.section-title .subtle{min-height:30px;font-size:13px;padding:5px 8px}.page-description{display:none}.shop-navigation button{min-height:33px;font-size:14px;padding:5px 1px}.shop-category-select{min-height:30px;font-size:13px}.shop-body{padding-top:8px;gap:12px}.character-grid{gap:8px}.character-card .portrait{height:77px;margin:2px 0 5px}.character-card{padding:8px 6px}.character-card strong{font-size:14px}.character-price{font-size:13px;margin-top:4px}.character-card .tier{font-size:12px;padding:2px 4px;top:6px;left:6px}.showcase-art{max-height:115px}.showcase-art .portrait{max-width:110px}.showcase-info h2{font-size:19px;margin:4px 0}.showcase-price{font-size:15px;margin:3px 0 6px}.showcase-actions button{min-height:31px;font-size:13px;padding:5px 2px}.attendance-layout{padding-top:10px}.streak-count b{font-size:38px}.streak-count{margin:2px 0 8px}.attendance-today .eyebrow{font-size:12px}.attendance-today>.primary{font-size:13px;min-height:33px;padding:6px 3px}.attendance-today p{font-size:12px;margin:6px 0 8px}.attendance-bonus{padding-top:8px;font-size:12px}.attendance-bonus strong{font-size:18px;margin-top:3px}.attendance-week>.section-title{margin-bottom:9px}.attendance-week h3{font-size:16px}.attendance-day{padding:10px 3px;gap:8px}.attendance-day.today{padding:9px 2px}.attendance-day strong{font-size:20px}.stamp{width:28px;height:28px}.stamp .ui-icon{width:17px;height:17px}.attendance-week>.reward-note{font-size:12px;margin-top:9px}.challenge-page>.section-title{padding-bottom:9px}.challenge-panel>header{min-height:43px;padding:8px}.challenge-panel header small{display:none}.challenge-arena-tabs{padding-top:6px}.challenge-arena-tabs button{min-height:26px}.goal-list{padding:7px;gap:6px}.goal-row{padding:8px 7px}.goal-copy small{margin-top:2px}.goal-progress{margin-top:6px}.goal-claim{gap:3px}.goal-claim button{min-height:25px}.challenge-page>.reward-note{font-size:12px;margin-top:6px}.exchange-layout{padding-top:10px;gap:12px}.exchange-pairs{gap:6px}.exchange-pairs>button{min-height:38px;max-height:56px;font-size:14px}.exchange-desk{padding:10px 13px;justify-content:flex-start}.exchange-directions button{min-height:31px;font-size:13px;gap:4px}.exchange-rate{padding:11px 0;font-size:20px;gap:15px}.exchange-quantity{font-size:13px}.exchange-quantity input{font-size:18px;padding:5px;width:65px}.exchange-quantity .secondary{min-height:31px;width:31px}.exchange-total{padding:8px 0;margin:9px 0}.exchange-submit{min-height:33px;font-size:14px;padding:6px}.exchange-desk>.reward-note{font-size:12px;margin-top:7px}.support-layout{padding-top:10px;gap:13px}.faq-list h3{font-size:15px;margin-bottom:8px}.faq-list summary,.inquiry-list summary{padding:10px;font-size:14px}.support-inquiries>.section-title h3{font-size:16px}.support-inquiries>.section-title>.primary{min-height:32px;font-size:13px;padding:6px 9px}.support-inquiries>.reward-note{font-size:12px;margin-top:7px}.inquiry-list{margin-top:9px}.history-page .page-tabs{margin-top:7px;margin-bottom:7px;gap:17px}.page-tabs button{font-size:14px;min-height:31px;padding:5px 1px}.history-list>article{padding:10px 12px}.history-list>article>div{gap:4px}.history-list span{font-size:13px}.seats{padding:9px 0;min-height:115px}.seat .portrait{height:85px}.seat h3{font-size:15px;margin:5px 0}.seat p{font-size:13px}.waiting-bottom{padding-top:9px}.waiting-bottom p{font-size:13px}.waiting-bottom .primary,.waiting-bottom .secondary{font-size:14px;padding:8px;min-height:35px}.empty-state{padding:18px;min-height:140px}.empty-state h3{font-size:18px}.empty-state p{font-size:14px}#toast{bottom:54px}
}
@container (max-width:700px){.header-tools{gap:5px}.wallet-resources{gap:5px}.wallet-resources button{gap:3px}.wallet{gap:9px}.quick-menu button{flex-direction:column;gap:3px;font-size:13px;padding:4px 2px}.quick-menu .ui-icon{height:17px;width:17px}.shop-body{grid-template-columns:minmax(0,1fr) 155px}.shop-navigation{gap:12px}.shop-top{gap:10px}.shop-category-select{max-width:82px}.character-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr))}.character-showcase{padding-left:10px}.attendance-layout{grid-template-columns:24% 1fr;gap:10px}.attendance-week>.section-title>span{display:none}.attendance-days{gap:4px}.attendance-day>span:last-child{display:none}.challenge-columns{gap:9px}.goal-icon{display:none}.goal-row{gap:6px}.challenge-panel h3{font-size:14px}.challenge-panel h3 .ui-icon{width:15px;height:15px}.bonus-claim{font-size:12px;max-width:85px}.exchange-layout{grid-template-columns:29% 1fr;gap:10px}.exchange-quantity{flex-wrap:wrap;justify-content:center;gap:6px}.exchange-total{gap:7px;flex-wrap:wrap}.history-value strong{font-size:14px}.support-layout{grid-template-columns:1fr 1.1fr;gap:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Layout for the original premium artwork. All measurements follow the logical landscape viewport. */
.beta-welcome{display:flex;align-items:center;justify-content:center;gap:clamp(20px,5cqw,80px);height:100%;padding:20px 4%}.beta-welcome-copy{max-width:650px}.beta-welcome h1{font-size:clamp(25px,4cqw,48px);font-family:'Batang',serif;color:#ffe1a3;margin:12px 0}.beta-welcome p{font-size:clamp(14px,1.7cqw,19px);line-height:1.6}.beta-welcome .beta-small{font-size:14px;color:#cabb9e;max-width:570px;margin-top:16px}.beta-welcome-character{height:90%;width:25%;max-width:270px;min-width:120px}.beta-welcome-character .portrait{width:100%;height:100%;aspect-ratio:3/4}.beta-welcome .inline-actions{flex-wrap:wrap}.beta-welcome .subtle{display:inline-block;font-size:14px}.operator-entry{display:grid;place-items:center;text-decoration:none;min-width:38px;min-height:38px}.online-game dialog textarea{display:block;width:100%;margin:14px 0;padding:12px;color:#f5e8d0;background:#19170f;border:1px solid #ae8d53;border-radius:6px;font:inherit}.online-game .top-actions{gap:6px}.online-game .top-actions .quiet{padding-inline:12px}@media(max-height:460px){.beta-welcome{padding-block:6px}.beta-welcome h1{margin:5px 0;font-size:26px}.beta-welcome p{margin:6px 0;line-height:1.4;font-size:14px}.beta-welcome .beta-small{margin-top:8px}.beta-welcome .inline-actions .primary,.beta-welcome .inline-actions .secondary{min-height:38px;padding:9px 12px}}
.hub{background:#171512;color:#fff0d4;--gold:#e5c382;--muted:#c8baa7;--line:#b08b5755;--panel:#27211b;--panel-deep:#1b1815}
.hub-background{opacity:1;filter:brightness(.63) saturate(.8);z-index:-3}
.hub-shade{z-index:-2;background:linear-gradient(180deg,#0a0908db 0%,#0b0a0878 22%,#15100c22 47%,#130d0999 77%,#080706e8 100%)}
.ambient-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 48% -8%,#ffe6a936,transparent 55%)}
.hub-header{height:76px;min-height:76px;padding:0 max(2.6%,env(safe-area-inset-left));gap:24px;background:linear-gradient(#2c241cd9,#11100fea);border-bottom:1px solid #b5935666;box-shadow:0 1px #000,0 6px 22px #0007}
.brand{display:flex;flex:none;align-items:center;width:174px;height:66px;padding:0}
.brand img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px #0009)}
.wallet{height:auto;min-height:0;flex:1;min-width:0;padding:0;gap:12px;background:none;border:0}
.wallet-resources{gap:10px}
.wallet-resources button{position:relative;display:grid;grid-template-columns:35px minmax(0,1fr);grid-template-rows:auto auto;gap:1px 5px;padding:6px 9px;border:1px solid #ad885338;border-radius:5px;background:linear-gradient(#090a0acd,#29221ab0);box-shadow:inset 0 1px 4px #0008,0 1px #ffe0ac0e}
.wallet-resources button>.resource-art{grid-row:span 2;align-self:center;width:33px;height:33px}
.wallet-resources button>span:not(.resource-art){font-size:12px;line-height:1.2;color:#d2c2a4;white-space:nowrap}
.wallet-resources b{font-size:16px;color:#ffdfa0;line-height:1.3;overflow:hidden;text-overflow:ellipsis;font-weight:650}
.wallet-more{display:none}
.header-tools{flex:none;gap:8px;margin:0}
.music-button,.icon-button{border:1px solid #af8e5359;border-radius:5px;background:linear-gradient(#3c3224,#191715);box-shadow:inset 0 1px #fbe4b219,0 2px 4px #0005;color:#e7d0a2}
.music-button{min-height:38px;font-size:13px;padding:8px 10px;gap:6px;white-space:nowrap}
.music-button.is-playing{background:linear-gradient(#354231,#20271d);border-color:#818f5c;color:#e6ebc2}
.icon-button{width:37px;height:38px}
.header-tools .ui-icon{width:18px;height:18px}
.nav-art,.resource-art{display:inline-block;flex:none;background-repeat:no-repeat;background-position:var(--sx) var(--sy);filter:drop-shadow(0 3px 3px #0007)}
.nav-art{width:52px;height:52px;background-image:url('/art/premium/nav-icons.png');background-size:400% 200%}
.resource-art{width:28px;height:28px;vertical-align:middle;background-image:url('/art/premium/resource-icons.png');background-size:300% 200%}
.hub-main{padding:18px 3% 16px;min-height:0}
.main-panel{background:linear-gradient(135deg,#211d18ed,#121311f2);border:1px solid #b3925660;border-radius:9px;box-shadow:0 14px 38px #0008,inset 0 1px #fce4b41a;scrollbar-color:#ac8852 #201b16}
.main-panel.home-panel{border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden}
.quick-menu{position:relative;min-height:98px;padding:0 max(3%,env(safe-area-inset-left));background:linear-gradient(#34271df2,#1f1813 40%,#110f0d);border-top:1px solid #d0ac6877;box-shadow:0 -8px 24px #0005,inset 0 2px #fff0b715,inset 0 -3px #0008}
.quick-menu button{min-height:97px;padding:7px 7px 10px;gap:2px;flex-direction:column;font-size:16px;font-weight:650;color:#d9c5a6;border-top:0;text-shadow:0 2px 3px #000}
.quick-menu button+button:before{top:20%;height:62%;background:linear-gradient(transparent,#b3925659,transparent)}
.quick-menu button.active{color:#ffdda1;background:radial-gradient(ellipse at 50% 0%,#d49a3f3b,transparent 80%)}
.quick-menu button.active:after{content:'';position:absolute;top:0;left:21%;right:21%;height:2px;background:#f1d18e;box-shadow:0 0 11px #ffbf59}
.quick-menu .nav-art{width:52px;height:52px;transition:transform .16s ease;filter:drop-shadow(0 4px 3px #0008)}
.quick-menu button:hover .nav-art{transform:translateY(-3px)}
.notification-dot{width:8px;height:8px;top:12px;right:19%;background:#f07150;box-shadow:0 0 6px #b83e2980}
.notification-count{top:8px;right:17%;background:#a42b31;border:1px solid #ecbc72;font-size:12px}
.primary{background:linear-gradient(170deg,#fae4ab,#d5aa63 48%,#c08b41 49%,#e1b66d);border:1px solid #ffe0a0;box-shadow:inset 0 1px #fff0c8,inset 0 -3px #91602d,0 5px 14px #0006;color:#2c1b10;text-shadow:0 1px #ffedb877}
.secondary{background:linear-gradient(#473326,#2d211a);border-color:#b3955c6b;box-shadow:inset 0 1px #eaca8d13;color:#f3dcaf}
.subtle{color:#daccad}.subtle.selected{background:#6b5030;border-color:#bf9d63;color:#ffedc4}
.premium-loading{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}
.premium-loading img{width:min(340px,45%);height:auto;filter:drop-shadow(0 8px 20px #000)}
.premium-loading p{font-size:15px;color:#d7c4a2;margin:0}
.loading-track{height:2px;width:140px;background:#826746;position:relative;overflow:hidden}
.loading-track:after{content:'';position:absolute;width:42%;height:100%;background:#ffe2a5;animation:loading-light 1.5s ease-in-out infinite}
@keyframes loading-light{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
/* Five bronze entrances sit over the restored arena scenery. */
.premium-lobby{height:100%;min-height:0;display:flex;flex-direction:column}
.lobby-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:39px;border-bottom:1px solid #dbb47b28}
.lobby-game-title{display:flex;align-items:center;gap:18px;font-size:14px;color:#cfc0a5;white-space:nowrap}
.active-game{font:700 23px 'Batang',serif;color:#f0d59e;border-bottom:2px solid #e4bc7a;padding:6px 18px 10px;text-shadow:0 2px 6px #000}
.lobby-room-actions{display:flex;align-items:center;gap:10px}.lobby-room-actions .subtle{font-size:14px;min-height:35px;padding:6px 11px;background:#1715138f;border:1px solid #ba95603f;border-radius:4px}
.lobby-room-actions .ui-icon{width:17px;height:17px}.lobby-room-actions b{font-weight:600;color:#f2cf8b}
.carousel-arrows{display:flex;gap:5px;margin-left:5px}.carousel-arrows button{height:32px;width:32px;display:grid;place-items:center;border:1px solid #c5a36b60;background:#29201994;border-radius:50%}
.arena-carousel{display:flex;align-items:center;gap:clamp(14px,2cqw,38px);flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;padding:17px 10px 14px;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.arena-carousel::-webkit-scrollbar{display:none}
.arena-gate{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1 0 17%;min-width:160px;max-width:360px;padding:5px 3px 0;scroll-snap-align:center;isolation:isolate}
.gate-disc{position:relative;display:block;width:min(100%,32cqh);max-width:290px;aspect-ratio:1;flex:none;border-radius:50%;padding:9px;background:conic-gradient(from 10deg,#8d6636,#f6de9e 9%,#89632e 18%,#412914 34%,#bf9651 47%,#ffebad 55%,#805523 71%,#e8c882 86%,#8d6636);box-shadow:0 12px 18px #0008,inset 0 1px 2px #fff0ba,0 0 0 1px #7d5a30,0 0 0 4px #130e0b88;transition:transform .2s ease,box-shadow .2s ease}
.gate-disc:before{content:'';position:absolute;inset:4px;border:1px solid #fbe0a088;border-radius:50%;pointer-events:none}
.gate-window{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px solid #21180b;box-shadow:inset 0 3px 10px #000;isolation:isolate;background:#201c17}
.gate-window>img{width:100%;height:100%;object-fit:cover;filter:brightness(.83) saturate(.83);transition:transform .3s ease}
.gate-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0001,#0807041a 22%,#100b05b8 60%,#080704f0)}
.gate-copy{position:absolute;inset:23% 3% auto;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 5px #000,0 0 18px #0008}
.gate-copy small{font-size:clamp(13px,1.5cqw,20px);letter-spacing:.15em;color:#ead8b5;line-height:1.4}
.gate-copy strong{font:700 clamp(24px,3cqw,46px)/1.4 'Batang','Noto Serif KR',serif;color:#ffe4ad;letter-spacing:.02em;white-space:nowrap}
.gate-underline{width:23%;height:1px;background:#e0b576;box-shadow:0 2px 4px #000;margin-top:5px}
.gate-status{position:absolute;bottom:15%;left:5%;right:5%;font-size:13px;letter-spacing:.04em;color:#c5b49a;text-shadow:0 2px 3px #000}
.gate-caption{font-size:14px;color:#dbccb3;white-space:nowrap;text-shadow:0 2px 4px #000}
.arena-gate.selected .gate-disc{box-shadow:0 13px 18px #0009,inset 0 1px 2px #fff7dc,0 0 0 1px #fff0c1,0 0 0 4px #9e773760,0 0 34px #e4b35746;transform:translateY(-5px)}
.arena-gate.selected .gate-copy strong{color:#fff0c5}.arena-gate.selected .gate-status{color:#ffe0a0;font-weight:700}.arena-gate.selected .gate-caption{color:#ffe1a3}
.arena-gate:hover .gate-window>img{transform:scale(1.04)}
.lobby-lower{display:grid;grid-template-columns:minmax(180px,1fr) minmax(290px,1.45fr) minmax(220px,1fr);align-items:end;gap:32px;flex:none;height:clamp(120px,23cqh,210px);padding:0 10px 2px;position:relative}
.lobby-player{position:relative;display:flex;align-items:flex-end;height:100%;min-width:0;gap:7px}
.player-figure{flex:none;width:48%;height:100%;padding:0;max-width:160px;position:relative;z-index:1}
.player-figure .portrait{width:100%;height:100%;filter:drop-shadow(0 2px 7px #0005)}
.player-nameplate{flex:1;min-width:0;padding-bottom:18px;text-shadow:0 2px 5px #000}
.name-button{display:block;padding:7px 0;font-size:20px;font-weight:700;color:#ffe3ad;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.player-history{display:flex;align-items:center;gap:5px;color:#d4c2a1;font-size:13px;padding:5px 0;min-height:30px;white-space:nowrap}.player-history .ui-icon{width:15px;height:15px}
.reward-display{display:flex;align-items:center;align-self:center;justify-content:center;gap:20px;min-width:0}
.reward-token{display:flex;align-items:center;gap:10px;padding:12px 7px;position:relative;text-align:left;min-width:0;text-shadow:0 2px 4px #000;background:radial-gradient(ellipse,#ba863020,transparent 70%)}
.reward-token .nav-art{width:66px;height:66px;filter:drop-shadow(0 4px 6px #0008)}
.reward-token>span:last-of-type{display:flex;flex-direction:column;gap:5px;min-width:0}.reward-token strong{font-size:20px;font-weight:700;color:#ffdf9d;white-space:nowrap}.reward-token small{font-size:13px;color:#e0d2b7;white-space:nowrap}.reward-token .notification-dot,.reward-token .notification-count{top:6px;right:3px}
.lobby-start{align-self:center;display:grid;grid-template-columns:1fr;gap:8px;min-width:0;text-align:center;padding-bottom:6px}
.selected-arena-name{font-size:13px;color:#e9d9b8;letter-spacing:.025em;text-shadow:0 2px 4px #000}
.start-game{width:100%;font-size:27px;min-height:66px;border-radius:7px;letter-spacing:.025em}.start-game .ui-icon{width:25px;height:25px}
.practice-entry{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#dac6a5;font-size:14px;min-height:28px}.practice-entry .ui-icon{width:15px;height:15px}
/* Character figures sit on lit display stands; their silhouettes stay borderless. */
.character-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:18px;padding:5px 8px 10px 3px}
.character-card{padding:13px 5px 6px;background:none;border:0;border-radius:0;isolation:isolate;transition:transform .15s ease}
.character-card:before{content:'';position:absolute;top:13%;left:8%;right:8%;aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 50% 36%,#b6934452,#64503338 61%,#17171533 70%);border:1px solid #bfa06420;z-index:-1}
.character-card:after{content:'';position:absolute;left:11%;right:11%;height:12%;bottom:24%;border-radius:50%;background:radial-gradient(ellipse,#e5c37f44,#30251a80 52%,transparent 72%);z-index:-1}
.character-card.inspected{outline:0;background:none}.character-card.inspected:before{border-color:#e9ce854f;background:radial-gradient(ellipse at 50% 34%,#cfaa6070,#75603647 55%,#1b191311 71%);box-shadow:0 0 20px #e4b96013}
.character-card .tier{left:5px;top:6px;background:#17120db0;border:1px solid #a88a5244;border-radius:3px;letter-spacing:.025em;color:#d9bf8c;font-size:12px;padding:2px 6px}
.character-card .portrait{height:clamp(120px,25cqh,230px);max-width:160px;margin:0 0 -3px;width:100%;filter:drop-shadow(0 6px 8px #0007)}
.character-plaque{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:60px;width:100%;padding:7px 4px;background:linear-gradient(160deg,#513a26,#292019 48%,#423121);border:1px solid #a78a5170;border-radius:4px;box-shadow:inset 0 1px #ffe7b314,0 5px 8px #0005;position:relative}
.character-card.inspected .character-plaque{border-color:#e2bf76;box-shadow:inset 0 1px #fff0b22e,0 4px 10px #0006}
.character-card strong{display:block;font-size:16px;color:#f6e4c2}.character-price{display:block;font-size:13px;margin:0;color:#d5b475}
.character-showcase{background:radial-gradient(ellipse at 50% 34%,#d3aa6530,transparent 65%);border-left-color:#bda27336;padding-left:22px}
.showcase-art{max-height:370px;min-height:110px;position:relative;isolation:isolate;align-items:flex-end}
.showcase-art:before{content:'';position:absolute;width:75%;height:12%;bottom:1%;border-radius:50%;background:radial-gradient(ellipse,#bca26944,#1d1b1638 60%,transparent 70%);z-index:-1}
.showcase-art .portrait{max-width:270px;min-height:110px}.showcase-info h2{font-family:'Batang',serif;font-size:27px;color:#ffdf9e}.showcase-price{color:#e8c487}.showcase-actions .secondary{background:linear-gradient(#302b23,#1c1916)}
.package-mark{height:65px}.package-mark .resource-art{width:64px;height:64px}.stamp .resource-art{width:33px;height:33px}.goal-icon .nav-art{width:32px;height:32px}.challenge-arena-tabs .resource-art{width:21px;height:21px}.challenge-arena-tabs button{display:inline-flex;align-items:center;gap:4px}
.attendance-today{box-shadow:inset 0 1px #fce3b122,0 8px 18px #0003}.attendance-day{background:linear-gradient(#29251d,#1f1c17);box-shadow:inset 0 1px #fce5b60d}.attendance-day.today{background:linear-gradient(#5b432a,#34271c)}
.hub-dialog{background:linear-gradient(140deg,#30271e,#141411);border-color:#c6a36d80;box-shadow:0 20px 65px #000b,inset 0 1px #ffe5b61a}
#toast{bottom:112px;background:#161713f2;border-color:#d2ac696b;box-shadow:0 8px 25px #0007}
@container (max-height:600px){
 .hub-header{height:57px;min-height:57px;padding-inline:2.4%;gap:15px}.brand{width:132px;height:49px}.wallet-resources{gap:7px}.wallet-resources button{grid-template-columns:27px minmax(0,1fr);padding:4px 6px;gap:0 4px}.wallet-resources button>.resource-art{width:26px;height:26px}.wallet-resources b{font-size:14px}.wallet-resources button>span:not(.resource-art){font-size:11px}.header-tools{gap:6px}.music-button{min-height:33px;padding:6px 8px;font-size:12px}.icon-button{width:32px;height:33px}
 .hub-main{padding:10px 2.7% 8px}.quick-menu{min-height:73px;padding-inline:2.4%}.quick-menu button{min-height:72px;font-size:14px;padding:4px 5px 7px;gap:1px}.quick-menu .nav-art{width:40px;height:40px}.notification-dot{top:7px}.notification-count{top:4px}.lobby-toolbar{min-height:31px}.lobby-game-title{gap:13px;font-size:13px}.active-game{font-size:19px;padding:3px 12px 7px}.lobby-room-actions{gap:7px}.lobby-room-actions .subtle{font-size:13px;min-height:29px;padding:4px 8px}.carousel-arrows button{width:26px;height:26px}
 .arena-carousel{gap:18px;padding:10px 6px 5px}.arena-gate{min-width:123px;gap:8px;padding-top:3px}.gate-disc{width:min(100%,31cqh,calc(78cqh - 224px));padding:7px}.gate-disc:before{inset:3px}.gate-window{border-width:1px}.gate-copy strong{font-size:clamp(23px,2.8cqw,36px)}.gate-copy small{font-size:14px}.gate-copy{inset-block-start:22%}.gate-status{font-size:12px;bottom:14%}.gate-caption{font-size:12px}.gate-underline{margin-top:3px}.arena-gate.selected .gate-disc{transform:translateY(-3px)}
 .lobby-lower{grid-template-columns:minmax(145px,1fr) minmax(255px,1.6fr) minmax(170px,1fr);gap:16px;height:clamp(86px,22cqh,125px);padding-inline:4px}.player-figure{width:46%;max-width:100px}.player-nameplate{padding-bottom:9px}.name-button{font-size:16px;padding:4px 0}.player-history{font-size:12px;min-height:25px;padding:3px 0;gap:4px}.player-history .ui-icon{width:13px;height:13px}.reward-display{gap:12px}.reward-token{padding:8px 2px;gap:6px}.reward-token .nav-art{width:46px;height:46px}.reward-token strong{font-size:17px}.reward-token small{font-size:12px}.reward-token>span:last-of-type{gap:4px}.lobby-start{gap:4px;padding-bottom:2px}.selected-arena-name{font-size:12px}.start-game{min-height:47px;font-size:23px}.start-game .ui-icon{width:21px;height:21px}.practice-entry{font-size:12px;min-height:23px;gap:6px}
 .character-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}.character-card{padding:10px 4px 5px}.character-card .portrait{height:clamp(88px,25cqh,137px);max-width:135px}.character-plaque{min-height:47px;padding:5px 3px;gap:2px}.character-card strong{font-size:14px}.character-price{font-size:12px}.character-card .tier{top:3px;left:2px;font-size:11px}.showcase-art{max-height:180px;min-height:80px}.showcase-art .portrait{max-width:170px;min-height:80px}.showcase-info h2{font-size:23px}.character-showcase{padding-left:14px}.package-mark{height:40px}.package-mark .resource-art{width:40px;height:40px}.stamp .resource-art{width:27px;height:27px}.goal-icon .nav-art{width:27px;height:27px}.challenge-arena-tabs .resource-art{width:17px;height:17px}#toast{bottom:82px}
}
@container (max-width:950px){
 .hub-header{gap:12px;padding-inline:2.3%}.brand{width:121px}.wallet-resources{gap:6px}.wallet-resources button{grid-template-columns:22px minmax(0,1fr);padding:5px 4px;gap:0 3px}.wallet-resources button>.resource-art{width:23px;height:23px}.wallet-resources b{font-size:13px}.header-tools{gap:5px}.music-button{padding:6px;font-size:12px;gap:4px}.header-tools .ui-icon{width:16px;height:16px}.icon-button{width:30px}.arena-carousel{gap:15px}.arena-gate{min-width:119px}.lobby-lower{gap:12px;grid-template-columns:minmax(130px,.85fr) minmax(252px,1.6fr) minmax(158px,1fr)}.name-button{font-size:15px}.reward-display{gap:9px}.reward-token .nav-art{width:41px;height:41px}.reward-token strong{font-size:16px}.reward-token{gap:5px}.selected-arena-name{font-size:12px}.start-game{font-size:22px}
}
@container (max-height:400px){
 .hub-header{height:49px;min-height:49px;gap:11px}.brand{height:43px;width:115px}.wallet-resources button{padding:3px 4px}.wallet-resources button>span:not(.resource-art){font-size:10px}.wallet-resources b{font-size:13px}.music-button{min-height:30px}.icon-button{height:30px}.hub-main{padding:6px 2.5%}.quick-menu{min-height:62px}.quick-menu button{min-height:61px;padding:3px 4px 5px;font-size:13px;gap:0}.quick-menu .nav-art{width:34px;height:34px}.lobby-toolbar{min-height:28px}.active-game{font-size:17px;padding:2px 10px 5px}.lobby-game-title{font-size:12px}.lobby-room-actions .subtle{min-height:25px;padding:3px 7px;font-size:12px}.carousel-arrows button{width:24px;height:24px}.carousel-arrows{gap:4px}
 .arena-carousel{padding:8px 5px 3px;gap:15px}.arena-gate{min-width:110px;gap:0}.gate-disc{width:min(100%,32cqh,calc(100cqh - 244px));padding:6px}.gate-copy{inset-block-start:20%}.gate-copy small{font-size:12px}.gate-copy strong{font-size:clamp(22px,2.8cqw,29px)}.gate-status{font-size:11px;bottom:12%}.gate-caption{display:none}.gate-underline{margin-top:1px}.lobby-lower{height:76px;gap:10px;grid-template-columns:minmax(125px,.85fr) minmax(244px,1.6fr) minmax(153px,1fr)}.player-figure{width:43%;height:88px}.player-nameplate{padding-bottom:6px}.name-button{font-size:14px}.player-history{font-size:11px;min-height:21px}.reward-token .nav-art{width:39px;height:39px}.reward-token strong{font-size:15px}.reward-token small{font-size:11px}.reward-token>span:last-of-type{gap:3px}.reward-token .notification-dot{top:3px}.reward-token .notification-count{top:1px}.lobby-start{gap:2px}.selected-arena-name{font-size:11px}.start-game{font-size:21px;min-height:39px;padding:5px 10px}.start-game .ui-icon{width:19px;height:19px}.practice-entry{min-height:21px;font-size:11px}
 .character-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:9px}.character-card{padding:8px 3px 4px}.character-card .portrait{height:90px;max-width:114px}.character-plaque{min-height:42px;padding:4px 3px}.character-card strong{font-size:14px}.character-price{font-size:12px}.character-showcase{padding-left:10px}.showcase-art{max-height:110px;min-height:73px}.showcase-art .portrait{min-height:73px;max-width:121px}.showcase-info h2{font-size:20px;margin:3px 0}.showcase-price{margin:3px 0 6px;font-size:14px}.showcase-actions button{min-height:32px;font-size:12px}.stamp .resource-art{width:23px;height:23px}.goal-icon .nav-art{width:23px;height:23px}#toast{bottom:68px}
}
@container (max-width:720px){
 .hub-header{gap:8px;padding-inline:2%}.brand{width:100px}.header-tools{gap:4px}.music-button span{display:none}.music-button{width:31px;justify-content:center}.wallet-resources{gap:4px}.wallet-resources button{grid-template-columns:21px minmax(0,1fr);gap:0 2px;padding-inline:3px}.wallet-resources button>.resource-art{width:21px;height:21px}.wallet-resources b{font-size:12px}.wallet-resources button>span:not(.resource-art){font-size:10px}.icon-button{width:29px}.lobby-game-title{gap:8px}.lobby-room-actions{gap:5px}.lobby-room-actions .ui-icon{display:none}.carousel-arrows{margin-left:2px}.carousel-arrows .ui-icon{display:block}.arena-carousel{gap:14px}.arena-gate{min-width:113px;flex-basis:22%}.lobby-lower{grid-template-columns:minmax(111px,.85fr) minmax(220px,1.6fr) minmax(142px,1fr);gap:8px}.player-figure{width:43%}.name-button{font-size:13px}.reward-display{gap:7px}.reward-token .nav-art{width:32px;height:32px}.reward-token strong{font-size:14px}.reward-token small{font-size:11px}.reward-token{gap:4px}.start-game{font-size:19px}.quick-menu button{font-size:12px}.quick-menu .nav-art{width:31px;height:31px}.character-grid{grid-template-columns:repeat(auto-fill,minmax(93px,1fr))}.character-plaque{padding-inline:2px}
}
@container (max-height:330px){
 .hub-header{height:43px;min-height:43px}.brand{height:39px}.quick-menu{min-height:55px}.quick-menu button{min-height:54px;font-size:12px}.quick-menu .nav-art{width:29px;height:29px}.lobby-toolbar{min-height:25px}.arena-carousel{padding-top:6px}.arena-gate{gap:4px}.gate-disc{width:min(100%,30cqh);padding:5px}.gate-copy strong{font-size:21px}.gate-copy small{font-size:11px}.gate-status{font-size:10px;bottom:10%}.gate-caption{display:none}.gate-underline{display:none}.lobby-lower{height:66px}.player-figure{height:72px}.reward-token small{font-size:10px}.selected-arena-name{display:none}.start-game{min-height:37px}.hub-main{padding-block:5px}.showcase-art{min-height:50px}.showcase-art .portrait{min-height:50px}.character-card .portrait{height:76px}#toast{bottom:61px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* A five-second brand entrance, with lobby data loading quietly underneath. */
.launch-splash{background:radial-gradient(ellipse at 50% 43%,#332719 0%,#151410 37%,#090a08 72%);transition:opacity .5s ease;isolation:isolate}
.launch-splash img{position:relative;z-index:1;filter:drop-shadow(0 9px 22px #0009);user-select:none;pointer-events:none}
.splash-glow{position:absolute;width:70%;height:68%;border-radius:50%;background:radial-gradient(ellipse,#eec66e19,transparent 65%);opacity:0;transform:scale(.8);pointer-events:none}
.launch-splash.is-ready img{opacity:1;animation:sasaki-logo-enter 1.05s cubic-bezier(.18,.7,.25,1) both}
.launch-splash.is-ready .splash-glow{opacity:1;transform:scale(1);transition:opacity 1.6s ease,transform 3s ease}
.launch-splash.is-leaving{opacity:0;pointer-events:auto}
.launch-splash.logo-unavailable img{display:none}.launch-splash.logo-unavailable .splash-fallback{display:block;color:#eccb88;font:700 clamp(36px,9cqw,110px)/1.3 'Batang',serif;letter-spacing:.16em;text-shadow:0 4px 18px #000}
@keyframes sasaki-logo-enter{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* All five shop filters stay visible in landscape phones as well as on desktop. */
.shop-categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex:none;gap:8px;margin-top:16px;padding:0 0 4px;max-width:850px}
.shop-categories button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:41px;padding:8px 10px;border:1px solid #a98a514f;border-radius:5px;background:linear-gradient(#30281d,#1c1915);color:#d3c5ac;font-size:15px;font-weight:650;white-space:nowrap;box-shadow:inset 0 1px #fbe4b211}
.shop-categories button small{font-size:12px;min-width:19px;padding:2px 4px;border-radius:3px;color:#c3ac80;background:#0003;font-variant-numeric:tabular-nums}
.shop-categories button.selected{color:#ffdfa0;border-color:#e0ba74;background:linear-gradient(#735735,#3b2b1c);box-shadow:inset 0 1px #ffe7b13b,0 2px 7px #0005}
.shop-categories button.selected small{color:#fff0c5;background:#0004}
.shop-shelf .empty-state{grid-column:1/-1}
@container (max-height:600px){
 .shop-categories{gap:6px;margin-top:9px;padding-bottom:0}.shop-categories button{min-height:35px;padding:6px 8px;font-size:14px;gap:6px}.shop-categories button small{font-size:12px;padding:1px 4px}.shop-body{padding-top:9px}
}
@container (max-height:400px){
 .shop-categories{margin-top:6px;gap:5px}.shop-categories button{min-height:31px;padding:4px 6px}.shop-body{padding-top:7px}.shop-page .showcase-art{min-height:48px;max-height:95px}.shop-page .showcase-art .portrait{min-height:48px;max-width:108px}.shop-page .showcase-info h2{display:inline-block;vertical-align:baseline;font-size:18px;line-height:1.25;margin:2px 5px 2px 0}.shop-page .showcase-info .vip-condition{font-size:12px;white-space:nowrap}.shop-page .showcase-price{font-size:14px;line-height:1.3;margin:3px 0 5px}
}
@container (max-width:720px){.shop-categories{gap:4px}.shop-categories button{gap:4px;padding-inline:4px}}
@media(prefers-reduced-motion:reduce){.launch-splash.is-ready img{opacity:1;animation:none}.launch-splash,.splash-glow{transition:none!important}}

/* Public announcement lane sits beneath the top resource bar. */
.hub-main.with-notice{flex-direction:column;gap:8px}.with-notice>.main-panel{width:100%}.notice-board{flex:none;align-self:center;display:flex;align-items:center;width:min(86%,1020px);height:34px;min-height:34px;gap:12px;border:1px solid #b9924f66;border-radius:6px;background:linear-gradient(90deg,#251e12ed,#121a13e8);padding:0 9px;color:#ffda8b;box-shadow:inset 0 1px #ffe8a617}.notice-label{font-size:14px;font-weight:750;white-space:nowrap;border-right:1px solid #a17f4755;padding-right:10px}.notice-window{flex:1;min-width:0;overflow:hidden;border:0;background:none;padding:0;height:100%;text-align:left;color:inherit;cursor:pointer}.notice-track{display:flex;width:max-content;animation:notice-scroll 28s linear infinite;font-size:15px;line-height:32px;white-space:nowrap}.notice-track>span{padding-right:4rem}.notice-board:hover .notice-track,.notice-board:focus-within .notice-track,.notice-board.is-paused .notice-track{animation-play-state:paused}.notice-pause{border:0;background:transparent;color:#efd399;padding:4px 7px;min-width:28px;min-height:28px;cursor:pointer;font-size:16px}.full-notice{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:16px}.quick-menu.has-admin{grid-template-columns:repeat(9,minmax(0,1fr))}.quick-menu .admin-nav .ui-icon{width:35px;height:35px;margin:8px;color:#f7d28a}.account-entry{text-decoration:none;display:flex;align-items:center;justify-content:center;min-height:32px;font-size:14px;white-space:nowrap}.notice-window:focus-visible,.notice-pause:focus-visible{outline:2px solid #eac174;outline-offset:2px}@keyframes notice-scroll{to{transform:translateX(-50%)}}@media(max-height:500px){.notice-board{height:29px;min-height:29px;gap:8px;width:94%}.notice-track{line-height:27px;font-size:14px}.hub-main.with-notice{gap:5px}.quick-menu .admin-nav .ui-icon{width:24px;height:24px;margin:5px}.account-entry{padding:4px!important}}@media(prefers-reduced-motion:reduce){.notice-track{animation:none}.notice-track>span+span{display:none}}