body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.card{position:relative;--world-ink:#b08946}.card:before,.card:after{content:'✧';position:absolute;pointer-events:none;z-index:2;color:var(--world-ink);font-size:28px;line-height:1;text-shadow:0 0 8px #fff8}.card:before{left:10px;top:8px}.card:after{right:10px;bottom:8px;transform:rotate(180deg)}.card-top{padding-left:18px;padding-right:18px}.card .portrait{border:1px solid var(--world-ink);box-shadow:inset 0 0 30px #0006}.card .origin{background:#111827d9;border:1px solid var(--world-ink);border-radius:4px;padding:3px 8px;color:#fff}.custom-portrait img{width:100%;height:100%;object-fit:cover}.card-name,.name-on-card{font-family:Georgia,'Times New Roman',serif;font-size:clamp(23px,5.8vw,32px);font-weight:800!important;line-height:1.12;color:#704516;text-shadow:0 1px 0 #fff,0 2px 8px #d5ac5050}.name-on-card{background:linear-gradient(110deg,#673d10,#946b21,#57317c);background-clip:text;-webkit-background-clip:text;color:transparent}.play-bottom{gap:4px;flex-wrap:wrap}.play-bottom button{padding:7px 9px;min-height:35px}.card-quote{padding-bottom:8px}.focus-play .play-bottom{display:flex}.focus-play .play-bottom #archiveBtn,.focus-play .play-bottom #returnLive,.focus-play .play-bottom #viewCurrent{display:none}.card[data-world='E01']{--world-ink:#397e87}.card[data-world='E02']{--world-ink:#aa6d3a}.card[data-world='E03']{--world-ink:#6959b4}.card[data-world='E04']{--world-ink:#967537}.card[data-world='E05']{--world-ink:#497852}.card[data-world='E06']{--world-ink:#7654a1}.card[data-world='E07']{--world-ink:#418c9b}.card[data-world='E08']{--world-ink:#a05252}.card[data-world='E09']{--world-ink:#9865ad}.card[data-world='E10']{--world-ink:#56847f}.card[data-world='E11']{--world-ink:#af8240}.card[data-world='E12']{--world-ink:#6375ac}.card[data-world='E13']{--world-ink:#98743a}.card[data-world='E14']{--world-ink:#ad514e}.card[data-world='E15']{--world-ink:#438f9d}.card[data-world='E16']{--world-ink:#73864d}.card[data-world='E17']{--world-ink:#8b4f92}.card[data-world='E18']{--world-ink:#b27956}.card[data-world='E19']{--world-ink:#647e9d}.card[data-world='E20']{--world-ink:#97663e}.portrait:after{content:'';position:absolute;inset:7px;pointer-events:none;border:1px solid color-mix(in srgb,var(--world-ink) 55%,transparent);border-radius:30% 0 30% 0;background:repeating-linear-gradient(45deg,transparent 0 39px,#ffffff08 40px 41px,transparent 42px 80px);mask-image:linear-gradient(#000,transparent 35%,transparent 65%,#000)}@media(max-height:750px){.studio-mode .card-quote{font-size:11px;margin:5px}.studio-mode .play-bottom{margin-top:4px}.studio-mode .card-name{font-size:23px}}

.card[data-world="E01"]:before,.card[data-world="E01"]:after{content:"✦"}.card[data-world="E02"]:before,.card[data-world="E02"]:after{content:"❖"}.card[data-world="E03"]:before,.card[data-world="E03"]:after{content:"✧"}.card[data-world="E04"]:before,.card[data-world="E04"]:after{content:"☯"}.card[data-world="E05"]:before,.card[data-world="E05"]:after{content:"❀"}.card[data-world="E06"]:before,.card[data-world="E06"]:after{content:"⚜"}.card[data-world="E07"]:before,.card[data-world="E07"]:after{content:"⌘"}.card[data-world="E08"]:before,.card[data-world="E08"]:after{content:"⚔"}.card[data-world="E09"]:before,.card[data-world="E09"]:after{content:"☾"}.card[data-world="E10"]:before,.card[data-world="E10"]:after{content:"❧"}.card[data-world="E11"]:before,.card[data-world="E11"]:after{content:"♜"}.card[data-world="E12"]:before,.card[data-world="E12"]:after{content:"◇"}.card[data-world="E13"]:before,.card[data-world="E13"]:after{content:"✺"}.card[data-world="E14"]:before,.card[data-world="E14"]:after{content:"♆"}.card[data-world="E15"]:before,.card[data-world="E15"]:after{content:"◎"}.card[data-world="E16"]:before,.card[data-world="E16"]:after{content:"♧"}.card[data-world="E17"]:before,.card[data-world="E17"]:after{content:"✥"}.card[data-world="E18"]:before,.card[data-world="E18"]:after{content:"❦"}.card[data-world="E19"]:before,.card[data-world="E19"]:after{content:"⌁"}.card[data-world="E20"]:before,.card[data-world="E20"]:after{content:"✵"}.name-on-card{color:#82531c!important;background:transparent!important;-webkit-text-fill-color:#82531c;text-shadow:0 1px 1px #e5ca8e66}.card-name{color:#694584;text-shadow:0 1px 1px #fff5}.card-top{padding-left:26px!important}
@media(max-height:750px){.studio-mode .portrait{height:clamp(130px,26dvh,190px)!important}.studio-mode .play-bottom button{font-size:11px;min-height:30px;padding:5px 7px}}

.portrait:after{inset:3px;border:0;border-radius:0;mask-image:none;background-size:100% 100%;background-repeat:no-repeat}
.card[data-world="E01"] .portrait:after{background-image:url("hoa-van-tinh-khong.svg")}
.card[data-world="E02"] .portrait:after{background-image:url("hoa-van-co-dai.svg")}
.card[data-world="E03"] .portrait:after{background-image:url("hoa-van-phep.svg")}
.card[data-world="E04"] .portrait:after{background-image:url("hoa-van-tu-tien.svg")}
.card[data-world="E05"] .portrait:after{background-image:url("hoa-van-co-dai.svg")}
.card[data-world="E06"] .portrait:after{background-image:url("hoa-van-hac-am.svg")}
.card[data-world="E07"] .portrait:after{background-image:url("hoa-van-phep.svg")}
.card[data-world="E08"] .portrait:after{background-image:url("hoa-van-tu-tien.svg")}
.card[data-world="E09"] .portrait:after{background-image:url("hoa-van-rung.svg")}
.card[data-world="E10"] .portrait:after{background-image:url("hoa-van-hac-am.svg")}
.card[data-world="E11"] .portrait:after{background-image:url("hoa-van-hac-am.svg")}
.card[data-world="E12"] .portrait:after{background-image:url("hoa-van-co-dai.svg")}
.card[data-world="E13"] .portrait:after{background-image:url("hoa-van-hac-am.svg")}
.card[data-world="E14"] .portrait:after{background-image:url("hoa-van-phep.svg")}
.card[data-world="E15"] .portrait:after{background-image:url("hoa-van-tinh-khong.svg")}
.card[data-world="E16"] .portrait:after{background-image:url("hoa-van-tinh-khong.svg")}
.card[data-world="E17"] .portrait:after{background-image:url("hoa-van-phep.svg")}
.card[data-world="E18"] .portrait:after{background-image:url("hoa-van-tinh-khong.svg")}
.card[data-world="E19"] .portrait:after{background-image:url("hoa-van-rung.svg")}
.card[data-world="E20"] .portrait:after{background-image:url("hoa-van-co-dai.svg")}
/* V4: ornaments outside the portrait and below text. */
.card:before{display:none!important}.card:after{position:static!important;display:block!important;transform:none!important;text-align:right!important;font-size:19px!important;line-height:20px!important;height:20px!important;margin:0 8px 0 0;clear:both}.card .portrait:after{display:none!important}.card .portrait{box-shadow:none}.card-role{text-transform:uppercase;font-family:Georgia,'Times New Roman',serif!important;font-weight:700!important;letter-spacing:.045em;line-height:1.18}.card .origin{text-transform:uppercase;font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:.09em;max-width:95%;white-space:normal}.card-top{padding-left:0!important}.card-quote{margin-bottom:0!important}.card-name .name-on-card{padding-right:8px!important;padding-left:8px!important}

.attribute .wealth-unit{color:#b91c1c;font-style:italic;font-size:12px;font-weight:600;white-space:nowrap}

/* Ánh sáng chạy trong viền, không bắt thao tác chạm. */
.card-effects{position:absolute;inset:5px;border-radius:16px;pointer-events:none;z-index:3;--glow:#48e88b}.fx-blue{--glow:#50baff}.fx-purple{--glow:#cb80ff}.fx-orange{--glow:#ffad48}.fx-gold{--glow:#ffe785}.orbit-light{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 5px 2px var(--glow),0 0 13px 4px var(--glow);animation:card-orbit var(--orbit-duration) linear infinite}.fx-gold .orbit-light{width:8px;height:8px;box-shadow:0 0 6px 3px #ffe785,0 0 17px 5px #ffba38}.card-spark{position:absolute;font-style:normal;color:var(--glow);font-size:18px;opacity:0;text-shadow:0 0 8px var(--glow);animation:card-twinkle 4s ease-in-out infinite}
@keyframes card-orbit{0%{left:0;top:0}25%{left:100%;top:0}50%{left:100%;top:100%}75%{left:0;top:100%}100%{left:0;top:0}}
@keyframes card-twinkle{0%,65%,100%{opacity:0;transform:scale(.3) rotate(0)}78%{opacity:.8;transform:scale(1.1) rotate(25deg)}88%{opacity:.2;transform:scale(.6) rotate(40deg)}}
.rank-full-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px;align-items:start}.rank-full{min-width:0;max-width:440px;width:100%;margin:auto}.rank-place{text-align:center;color:#ffe0a0;font-size:22px;margin:0 0 12px}.rank-full .card{width:100%;padding:14px}.rank-full .portrait{height:230px}.rank-full .card-role{font-size:23px}.rank-full .card-name{font-size:28px;overflow-wrap:anywhere}.rank-full .card-quote{display:block!important}.rank-full .stars{font-size:20px}.rank-story{display:block;width:100%;margin-top:10px}.rank-full .attribute{font-size:13px}.rank-full .attribute b{max-width:65%;overflow-wrap:anywhere}.rank-full .total-number{font-size:clamp(18px,4vw,27px)}
@media(prefers-reduced-motion:reduce){.orbit-light,.card-spark{animation:none!important}.card-spark{display:none}.orbit-light{display:none}}

.card-role{white-space:nowrap!important;overflow:hidden;text-overflow:clip;max-width:100%;min-width:0;letter-spacing:.025em!important}