:root { color-scheme:dark; font-family:Arial,Helvetica,sans-serif; color:#f2f2f2; }
* { box-sizing:border-box; } html,body { margin:0; background:#101010; }
button,a { -webkit-tap-highlight-color:transparent; } button { font:inherit;color:inherit;cursor:pointer; }
button:focus-visible,a:focus-visible,.stage:focus-visible { outline:2px solid #f7f7f7;outline-offset:3px; }
.stage { position:relative; width:100%;height:100svh;min-height:520px;overflow:hidden;isolation:isolate;touch-action:pan-y;user-select:none;cursor:grab;background:#1a1a1a; }
.stage.dragging { cursor:grabbing; }
.room { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.room-shade { position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 35%,#0d0d0d40 100%); }
.brand { position:absolute;top:24px;left:28px;z-index:60;display:flex;align-items:center;gap:10px;letter-spacing:2px;font-size:10px;font-weight:bold; }
.brand b { padding:8px;border:1px solid #d2d2d248;border-radius:7px;font-size:10px;letter-spacing:-1px;color:#f7f7f7;background:#272727b0; }
.preview-label { position:absolute;right:28px;top:34px;z-index:60;color:#a3a3a3;font-size:7px;letter-spacing:1.5px; }
.preview-label::before { content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:#ed3d43;margin-right:7px; }
.scene-heading { position:absolute;left:50%;top:8%;transform:translateX(-50%);font-size:8px;letter-spacing:2.2px;color:#dedede;text-shadow:0 0 10px #e0e0e055;white-space:nowrap;z-index:31;pointer-events:none; }
.cards { position:absolute;inset:0; }
.card { position:absolute;left:50%;top:44%;width:14%;height:20%;display:flex;flex-direction:column;margin:0;padding:.7%;text-align:left;border:1px solid #b8b8b866;border-radius:4px;background:linear-gradient(135deg,#3e3e3eed,#242424f2);box-shadow:0 12px 24px #00000088,inset 0 0 14px #f7f7f706;transform-origin:center;overflow:hidden;will-change:transform,opacity;touch-action:pan-y; }
.card.active { border-color:#ebebeb;box-shadow:0 0 0 1px #d5d5d530,0 0 20px #d9d9d923,0 14px 28px #00000099; }
.card-top { display:flex;justify-content:space-between;align-items:center;height:9%;flex-shrink:0; }
.card-number { color:#b7b7b7;font-size:clamp(4px,.5vw,7px);letter-spacing:1px; }
.card-mini-icon { display:flex;align-items:center;width:9%;height:100%;color:var(--accent); }
.card-mini-icon svg,.card-mini-icon img { width:100%;height:100%;object-fit:contain; }
.card-art { display:block;flex:1;min-height:0;margin:3% 0 1%;background:url('assets/card-art-atlas.png') no-repeat;background-size:300% 200%;mask-image:linear-gradient(#000000 90%,transparent);pointer-events:none; }
.card-art>* { display:none; }.art-0{background-position:0 0}.art-1{background-position:50% 0}.art-2{background-position:100% 0}.art-3{background-position:0 100%}.art-4{background-position:50% 100%}.art-5{background-position:100% 100%}
.card-caption { display:flex;flex-direction:column;padding:2% 1% 0;flex-shrink:0; }
.card-kicker { font-size:clamp(3px,.38vw,5px);color:#9b9b9b;letter-spacing:1px;line-height:1.4;margin-bottom:2%; }
.card-title { font-size:clamp(5px,.7vw,11px);font-weight:600;line-height:1.2;color:#eaeaea;text-transform:uppercase; }
.avatar-wrap { position:absolute;left:50%;bottom:21%;height:69%;aspect-ratio:941/1672;transform:translateX(-50%);z-index:30;pointer-events:none;isolation:isolate; }
.avatar { display:block;width:100%;height:100%;object-fit:contain;filter:brightness(.95) contrast(1.04) drop-shadow(-2px 0 3px #d7d7d732) drop-shadow(2px 0 3px #d0272b32); }
.avatar-wrap::after { content:'';position:absolute;inset:0;background:linear-gradient(110deg,#e4e4e48f,#db343869);mask:url('assets/avatar-cutout.png') center/contain no-repeat;mix-blend-mode:color;opacity:.22; }
.pedestal { position:absolute;left:50%;bottom:18.5%;width:36%;height:10%;transform:translateX(-50%);border-radius:50%;background:linear-gradient(#474747,#171717 55%);box-shadow:0 8px 0 #1c1c1c,0 9px 0 #e3e3e36b,0 15px 18px #000000bb;z-index:10;pointer-events:none; }
.pedestal::before { content:'';position:absolute;inset:7% 6% 15%;border:1px solid #ebebeb78;border-radius:50%;background:radial-gradient(ellipse,#424242,#1a1a1a 70%);box-shadow:0 0 12px #e5e5e522,inset 0 0 13px #dddddd2a; }
.pedestal-front { position:absolute;left:50%;bottom:18.5%;width:36%;height:10%;transform:translateX(-50%);border-radius:50%;border-bottom:3px solid #f7f7f7;border-left:1px solid #f2f2f285;border-right:1px solid #ef444985;background:linear-gradient(transparent 45%,#252525 80%);box-shadow:0 4px 8px -3px #f7f7f788;z-index:38;pointer-events:none; }
.platform-badge { position:absolute;left:50%;bottom:15%;width:29%;transform:translateX(-50%);z-index:45;pointer-events:none; }
.platform-name { display:block;width:100%;filter:brightness(.94) drop-shadow(0 4px 5px #000000bb); }
.dock { position:absolute;bottom:2.5%;left:50%;transform:translateX(-50%);width:min(90%,850px);z-index:60;padding:12px 16px;border:1px solid #8686863d;border-radius:10px;background:linear-gradient(115deg,#292929ef,#272727ed);box-shadow:0 12px 35px #00000077;display:flex;align-items:center;gap:20px;cursor:default;user-select:text; }
.selected-copy { flex:1;min-width:0; }.eyebrow{color:#dedede;font-size:6px;letter-spacing:1.4px}.selected-copy h2{font-size:15px;margin:5px 0;color:#f7f7f7}.selected-copy p{margin:0;font-size:9px;color:#a6a6a6;line-height:1.5}
.open-link{display:flex;align-items:center;gap:18px;color:#f2f2f2;text-decoration:none;border:1px solid #a2a2a25c;border-radius:5px;background:#41414180;padding:10px 13px;font-size:10px;white-space:nowrap}.open-link span{font-size:16px;color:#e44c52}.open-link:hover{background:#55555580}
.controls{display:flex;align-items:center;gap:12px;border-left:1px solid #79797940;padding-left:20px}.arrow{width:30px;height:30px;border:1px solid #7a7a7a66;background:#2b2b2b;border-radius:50%;font-size:16px;color:#e1e1e1}.arrow:hover{border-color:#e4e4e4}.pagination{text-align:center}.dots{display:flex;gap:6px;align-items:center;justify-content:center}.dot{padding:0;width:5px;height:5px;border:0;border-radius:6px;background:#6a6a6a;position:relative}.dot::after{content:'';position:absolute;inset:-7px}.dot.active{width:18px;background:#ededed;box-shadow:0 0 8px #dddddd44}.pagination p{margin:8px 0 0;font-size:7px;letter-spacing:1px;color:#a1a1a1}.divider{margin:0 5px}
.swipe-hint{position:absolute;left:28px;bottom:14.5%;font-size:7px;color:#a0a0a0;letter-spacing:1px;z-index:45;pointer-events:none}
@media(max-width:750px){.dock{gap:12px;padding:11px 13px}.controls{gap:9px;padding-left:12px}.selected-copy p{display:none}.selected-copy h2{font-size:12px}.open-link{font-size:8px;padding:8px}.brand{left:18px;top:18px;font-size:9px}.preview-label{right:18px;top:29px;font-size:6px}.scene-heading{top:11%;font-size:6px}.swipe-hint{left:18px;font-size:6px}}
@media(max-width:599px){.avatar-wrap{width:58%;height:auto;bottom:22%}.pedestal,.pedestal-front{width:74%;bottom:20%;height:7%}.platform-badge{width:60%;bottom:16%}.card{top:43%;width:23%;height:15%;padding:1.5%;border-radius:3px}.card-title{font-size:7px}.card-kicker{display:none}.card-number{font-size:4px}.dock{bottom:2%;flex-wrap:wrap;gap:10px;width:92%}.selected-copy{min-width:50%}.selected-copy h2{font-size:13px}.eyebrow{font-size:5px}.open-link{margin-left:auto;font-size:9px}.controls{width:100%;justify-content:center;border:0;padding:7px 0 0;border-top:1px solid #79797930;gap:20px}.swipe-hint{bottom:14.5%;font-size:5px}.scene-heading{top:16%;font-size:6px;letter-spacing:1.2px}}
@media(prefers-reduced-motion:reduce){.card{will-change:auto}}

/* Red and white gaming palette. */
.dot.active{background:#ff3445;box-shadow:0 0 9px #ff263c66}
.eyebrow,.preview-label::before{color:#ff6470}
.brand b{color:#fff;border-color:#ff445566;background:#211012cc}
.arrow:hover,.open-link:hover{border-color:#ff4657;background:#38151bcc}
.pedestal-front{border-bottom-color:#fff;border-left-color:#ff405b;border-right-color:#fff;box-shadow:0 4px 12px -3px #ff344599}
.scene-heading{color:#fff;text-shadow:0 0 12px #ff344577}
.music-player{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);z-index:60;width:min(420px,90%);padding:12px 16px;border:1px solid #ffffff26;border-top-color:#ff45576b;border-radius:12px;background:linear-gradient(120deg,#231416ee,#141414f5);box-shadow:0 12px 30px #0006;cursor:default;user-select:auto}
.music-track{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.music-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #ff455744;border-radius:7px;color:#ff5263;font-size:20px;background:#3a141a}
.music-track strong{display:block;font-size:11px;letter-spacing:1.5px;color:#fff}
.music-track div>span{display:block;margin-top:4px;font-size:9px;color:#b9b9b9}
.music-player audio{display:block;width:100%;height:32px;accent-color:#f53348;color-scheme:dark}
@media(max-width:599px){.music-player{padding:9px 12px;bottom:2%;width:92%}.music-track{margin-bottom:7px}.music-mark{height:24px;width:24px;font-size:17px}.music-track strong{font-size:10px}.music-track div>span{font-size:8px}.music-player audio{height:30px}}

/* Crimson Core: the character and nameplate share the background podium. */
.room { height:114%;object-fit:fill; }
.pedestal,.pedestal-front { display:none; }
.room-shade { background:radial-gradient(ellipse at 50% 40%,transparent 45%,#08080822 100%); }
@media(max-width:599px) {
  .room { width:140%;max-width:none;left:-20%; }
  .avatar-wrap { bottom:21%; }
  .platform-badge { bottom:15%; }
}