/* Dark glass belongs only to Home. */
body{--bg:#010205;--text-dim:#c5c6d2;--text-faint:#a5a7bb;background:#010205;isolation:isolate;}
.home-cosmos{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 22% 36%,#322d5317,transparent 56%),radial-gradient(ellipse at 82% 8%,#16456e16,transparent 45%),#010205;}
.home-stars{position:absolute;inset:0;width:100%;height:100%;}
.home-world{position:absolute;z-index:1;width:min(920px,85vw);aspect-ratio:1;right:clamp(-170px,-8vw,-50px);top:40px;opacity:.72;}
.home-world canvas{display:block;width:100%;height:100%;}
.home-world.is-fallback{background:linear-gradient(115deg,transparent 35%,#030813e6 75%),url('world/earth-day-4k.jpg') center/cover;border-radius:50%;width:min(650px,70vw);box-shadow:0 0 35px #74bded33;top:110px;}
.hero,.wrap{position:relative;}
.hero{border-bottom-color:#ccd6fa12;background:linear-gradient(180deg,#ffffff02,transparent);}
.hero h1{color:#f6deb0;text-shadow:0 0 42px #daa85830,0 2px 6px #000a;}
.wrap{max-width:1160px;}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.character-tile>.card{min-height:212px;height:100%;padding:24px 22px 22px;isolation:isolate;border-radius:19px;border:1px solid color-mix(in srgb,var(--card-color) 40%,#ffffff24);background:linear-gradient(130deg,#ffffff0c 0%,#010207bd 35%,#04060baa 100%);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px 0 #ffffff55,inset 1px 0 0 #ffffff20,inset 0 -1px 0 #ffffff0d,0 18px 40px #0008;transition:transform .22s,box-shadow .22s,border-color .22s;}
.card::before{inset:0;height:auto;border-radius:inherit;background:var(--card-accent);opacity:.055;z-index:-1;}
.card::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;background:var(--card-accent) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:.85;pointer-events:none;z-index:3;}
.card .colorbar{width:3px;opacity:.9;box-shadow:0 0 14px var(--card-color);z-index:3;}
/* Mask spans the entire card: no image boundary can meet the text. */
.card .card-portrait{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden;opacity:.95;mask-image:linear-gradient(112deg,transparent 0%,transparent 30%,#00000008 42%,#00000030 54%,#000000a6 74%,#000 96%);-webkit-mask-image:linear-gradient(112deg,transparent 0%,transparent 30%,#00000008 42%,#00000030 54%,#000000a6 74%,#000 96%);}
.card-portrait img{position:absolute;right:0;top:0;width:70%;height:100%;object-fit:cover;object-position:var(--face-position,50% 10%);transform:scale(var(--face-zoom,1.6));transform-origin:50% 0%;filter:brightness(var(--face-light,1.12)) saturate(1.02) contrast(1.02);}
/* Every base image has individual head-and-torso framing. Card-height sizing
   keeps the crop consistent on narrow desktop tiles and wide phone tiles. */
.card-portrait.is-framed img{right:auto;left:var(--frame-center,76%);top:var(--frame-top,0%);height:var(--frame-height,180%);width:auto;max-width:none;object-fit:fill;transform:translateX(-50%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);}
.card .card-shine{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,#ffffff13 0%,transparent 26%,transparent 71%,#ffffff06 100%);overflow:hidden;}
.card-shine::before{content:"";position:absolute;inset:0;background:radial-gradient(190px 130px at var(--glint-x,65%) var(--glint-y,25%),#ffffff23,transparent 70%);opacity:0;transition:opacity .25s;}
.card-shine::after{content:"";position:absolute;inset:-80%;background:linear-gradient(115deg,transparent 41%,#ffffff04 45%,#ffffff23 49%,#ffffff06 53%,transparent 57%);transform:translateX(-65%);opacity:0;}
.card:hover .card-shine::before,.card:focus-visible .card-shine::before{opacity:1;}
.card:hover .card-shine::after,.card:focus-visible .card-shine::after{animation:glass-reflection .85s ease-out both;}
@keyframes glass-reflection{0%{transform:translateX(-65%);opacity:0;}20%{opacity:.75;}100%{transform:translateX(65%);opacity:0;}}
.card .name{position:relative;z-index:3;color:#ffedcc;font-size:25px;text-shadow:0 2px 8px #000;}
.card .subtitle{position:relative;z-index:3;color:#e1dfeb;max-width:76%;line-height:1.55;font-size:12px;min-height:56px;text-shadow:0 1px 6px #000;}
.card .tag{position:relative;z-index:3;color:#eee4ff;background:#03040bcc;border-color:#c6a1e64d;backdrop-filter:blur(6px);margin-top:8px;}
.card .arrow{z-index:3;width:27px;height:27px;display:grid;place-items:center;bottom:13px;right:13px;font-size:16px;border:1px solid #ffffff35;border-radius:50%;background:#05060c99;color:#f5e5bf;backdrop-filter:blur(8px);}
.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:var(--card-color);box-shadow:inset 0 1px 0 #ffffff85,inset 1px 0 0 #ffffff30,0 0 25px color-mix(in srgb,var(--card-color) 16%,transparent),0 22px 44px #0009;}
.card:hover::before{opacity:.1;}
.card:focus-visible{outline:2px solid #ffdfaa;outline-offset:4px;}
.section-title{color:#dad5e2;border-bottom-color:#ffffff16;font-size:13px;letter-spacing:2.5px;}
.footer-note{border-top-color:#ffffff16;color:#a5a7bb;}
.world-toggle{position:fixed;right:16px;bottom:14px;z-index:5;display:flex;gap:7px;align-items:center;padding:8px 12px;font:11px var(--sans);letter-spacing:.4px;color:#ccd5e6;border:1px solid #b5c6ef29;border-radius:30px;background:#050810b3;backdrop-filter:blur(12px);cursor:pointer;}
body:not(.auth-ready) .home-cosmos,body:not(.auth-ready) .world-toggle{visibility:hidden;}
@media(max-width:1020px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}.character-tile>.card{min-height:208px;}.card .subtitle{max-width:69%;}.home-world{width:950px;right:-350px;opacity:.6;}}
@media(max-width:520px){.hero{padding:35px 16px 27px;}.hero h1{font-size:34px;}.wrap{padding:26px 16px 62px;}.grid{grid-template-columns:1fr;gap:15px;}.character-tile>.card{min-height:193px;padding:22px;}.card-portrait img{width:64%;}.card .subtitle{max-width:63%;min-height:45px;}.card .name{font-size:25px;}.home-world{width:650px;right:-330px;top:50px;opacity:.58;}.world-toggle{right:12px;bottom:10px;}}
@media(prefers-reduced-motion:reduce){.card,.card .arrow,.card-shine::before{transition:none;}.card:hover{transform:none;}.card:hover .card-shine::after,.card:focus-visible .card-shine::after{animation:none;}}
@supports not (backdrop-filter:blur(1px)){.character-tile>.card{background:linear-gradient(125deg,#151722e6,#010205e8);}}

.world-credit{font-size:10px;opacity:.75;} .world-credit a{color:inherit;text-underline-offset:3px;}