/* Real character images. Framing is done in the page; originals are kept intact. */
.hero-grid{min-height:560px;border-bottom:1px solid #ffffff17}
.hero-copy{width:47%;min-height:560px;padding:48px 0 64px}
.hero-copy h1{font-size:clamp(56px,7.6vw,92px)}
.hero-backdrop{inset:0 0 0 40%;background:#10101c}
.hero-backdrop svg{width:100%;height:100%;opacity:.9;display:block;overflow:hidden}
.hero-grid::after{background:linear-gradient(90deg,#10101c 0%,#10101c 35%,#10101c99 44%,#10101c00 61%),linear-gradient(0deg,#10101c 0%,#10101c33 22%,#10101c12 100%)}
.hero-image-credit{position:absolute;z-index:2;right:16px;bottom:18px;max-width:58%;margin:0;color:#c5cedb;font-size:9px;letter-spacing:.03em;text-align:right}
.mode-card{overflow:hidden;padding-top:0}
.mode-art{height:195px;position:relative;margin:0 -27px 24px;background:#283a54;overflow:hidden;border-bottom:1px solid #ffffff17}
.mode-art svg{width:100%;height:100%;display:block;overflow:hidden}
.mode-art .band-hero-illustration{transform:scale(1.64);transform-origin:50% 20%}
.mode-art-cross img{display:block;width:100%;height:100%;object-fit:cover;object-position:45% 38%}
.mode-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#191925aa,transparent 65%)}
.result-hero{grid-template-columns:minmax(280px,.9fr) 1.2fr;gap:40px;padding:32px 0}
.result-orbit{height:auto;min-height:0;transform:none;gap:10px}
.result-portrait-frame{width:min(100%,370px);aspect-ratio:4/5;position:relative;border-radius:16px;background:radial-gradient(ellipse at 50% 26%,#455379 0%,#202339 55%,#141421 100%)}
.character-portrait{display:block;width:100%;height:100%;overflow:hidden;filter:drop-shadow(0 14px 15px #0005)}
.result-art-caption{font:10px/1.8 var(--sans);letter-spacing:.02em;background:none;padding:0;color:#aaa9b6}
.result-art-caption a{color:#b3bed7;font-size:9px;text-decoration:none}
.result-art-caption a:hover{color:var(--lime)}
.result-spark.spark-one{top:12px;right:7px}
.result-spark.spark-two{bottom:45px;left:5px}
.site-footer{padding:16px 0}
@media(max-width:850px){
  .hero-copy{width:46%}
  .hero-copy h1{font-size:66px}
  .hero-backdrop{left:39%}
  .result-hero{grid-template-columns:minmax(230px,.85fr) 1fr;gap:25px}
}
@media(max-width:620px){
  .hero-grid{display:flex;flex-direction:column;min-height:0;margin:0 -17px;padding:0 0 24px;overflow:hidden}
  .hero-backdrop{position:relative;inset:auto;order:-1;width:100%;height:295px;flex:none}
  .hero-backdrop svg{width:100%;height:100%;opacity:.92;object-fit:initial}
  .hero-grid::after{inset:0 0 auto;height:295px;background:linear-gradient(0deg,#10101c 0%,#10101c22 38%,#10101c20 100%)}
  .hero-copy{width:100%;min-height:0;padding:9px 17px 0;justify-content:flex-start}
  .hero-copy .eyebrow{font-size:9px;margin-bottom:2px}
  .hero-copy h1{font-size:clamp(56px,16vw,72px);margin:15px 0}
  .hero-lead{margin:0;font-size:13px}
  .hero-image-credit{position:relative;max-width:none;right:auto;bottom:auto;margin:18px 17px 0;text-align:left;color:#878b9b;font-size:8px}
  .mode-art{margin:0 -21px 20px;height:170px}
  .mode-card{padding-top:0}
  .result-hero{display:flex;gap:20px;padding:20px 0 28px}
  .result-orbit{margin:0;height:auto;min-height:0;transform:none}
  .result-portrait-frame{width:min(100%,310px)}
  .result-title h1{font-size:50px}
  .result-art-caption{font-size:9px}
  .result-spark.spark-one{right:16px}
  .result-spark.spark-two{left:16px}
  .site-footer{align-items:flex-start;flex-direction:column;gap:8px}
}

.tie-note{padding:12px 14px;border-left:3px solid #cefa52;background:#cefa520a;font-size:14px;line-height:1.7;color:#e4e0ec}.rules-version{color:#cefa52!important;font-size:12px!important}