@import "tailwindcss";
:root{--ink:#282739;--paper:#fffaf4;--pink:#ff6f91;--yellow:#ffd84f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif}button{font:inherit}main{overflow:hidden}header{height:78px;max-width:1180px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-weight:900;text-decoration:none;color:var(--ink);letter-spacing:.03em}.brand span{width:39px;height:39px;display:grid;place-items:center;background:var(--pink);color:white;border:2px solid var(--ink);border-radius:50% 50% 14% 50%;box-shadow:3px 3px 0 var(--yellow)}.nav-link{color:var(--ink);font-size:12px;font-weight:800;text-underline-offset:5px}.hero{min-height:650px;text-align:center;display:flex;flex-direction:column;align-items:center;padding:95px 24px 110px;position:relative}.hero::before{content:"";position:absolute;width:620px;height:620px;border:2px dashed #ffc2d1;border-radius:50%;top:28px;z-index:-1}.eyebrow{font:900 11px Arial;letter-spacing:.2em;color:var(--pink);margin:0 0 18px}.hero h1{font-size:clamp(45px,6vw,78px);line-height:1.18;letter-spacing:-.06em;margin:0}.hero h1 span{color:var(--pink);position:relative}.hero h1 span::after{content:"";position:absolute;left:0;right:0;bottom:-7px;border-top:7px dotted var(--yellow)}.intro{font-size:14px;line-height:2;color:#777586;font-weight:700;margin:30px 0 23px}.role-list{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:600px}.role-list span{background:white;border:1px solid #eadbd2;border-radius:50px;padding:7px 13px;font-size:11px;font-weight:800;box-shadow:0 3px 0 #eee3dc}.main-button{width:280px;height:68px;margin-top:35px;border:3px solid var(--ink);border-radius:50px;background:var(--yellow);font-weight:900;letter-spacing:.08em;box-shadow:6px 7px 0 var(--ink);cursor:pointer;position:relative;transition:.2s}.main-button i{position:absolute;right:24px;font-style:normal;font-size:21px}.main-button:hover{transform:translate(3px,3px);box-shadow:3px 4px 0 var(--ink)}.main-button.rolling b{animation:pulse .45s infinite alternate}.orb{position:absolute;border-radius:50%;z-index:-1}.orb-a{width:90px;height:90px;background:#dff6f2;left:10%;top:155px}.orb-b{width:55px;height:55px;background:#eee8ff;right:15%;top:270px}.orb-c{width:38px;height:38px;background:#ffe4b8;left:20%;bottom:80px}.spark{position:absolute;font-weight:900}.s1{left:7%;top:90px;color:#65b9a5;font-size:30px}.s2{right:8%;bottom:100px;color:var(--pink);font-size:42px}.s3{right:26%;top:105px;color:var(--yellow);font-size:17px}
.result{max-width:1180px;margin:auto;padding:0 26px;max-height:0;opacity:0;transform:translateY(25px);transition:.6s ease;overflow:hidden}.result.show{max-height:2200px;opacity:1;transform:none;padding-bottom:115px}.tree{background:#fff;border:3px solid var(--ink);border-radius:35px;padding:48px 32px 40px;box-shadow:12px 14px 0 #ffe5ec}.tree-title{text-align:center;margin-bottom:38px}.tree-title p,.section-title p{font:900 11px Arial;letter-spacing:.2em;color:var(--pink);margin:0 0 10px}.tree-title h2{font-size:36px;margin:0 0 6px}.tree-title span{font-size:12px;color:#858292}.generation{display:grid;justify-content:center;position:relative}.generation.parents{grid-template-columns:repeat(2,190px);gap:80px}.generation.siblings{grid-template-columns:repeat(4,1fr);gap:15px}.generation.close{grid-template-columns:repeat(2,190px);gap:80px;margin-top:45px}.family-card{min-width:0;background:#fff;border:2px solid var(--ink);border-radius:22px;padding:30px 10px 16px;text-align:center;position:relative;box-shadow:4px 5px 0 var(--card)}.role{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--card);color:white;border:2px solid var(--ink);border-radius:30px;padding:6px 15px;font-size:12px;font-weight:900;white-space:nowrap}.letter{width:72px;height:72px;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--card) 18%,white);color:var(--card);font-size:32px;font-weight:900;border:2px solid var(--card)}.card-copy small{font-size:9px;color:var(--card);font-weight:900}.card-copy h3{font-size:19px;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.family-card>i{position:absolute;right:10px;top:18px;color:var(--yellow);font-style:normal}.connector{height:105px;display:flex;align-items:center;justify-content:center;position:relative}.connector::before{content:"";position:absolute;left:25%;right:25%;top:0;height:48px;border-left:2px solid #e2c3ca;border-right:2px solid #e2c3ca;border-bottom:2px solid #e2c3ca}.connector::after{content:"";position:absolute;left:50%;top:48px;height:57px;border-left:2px solid #e2c3ca}.you{position:relative;z-index:2;width:75px;height:75px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);display:grid;place-content:center;font:900 10px Arial}.you small{font:900 13px sans-serif}.actions{display:flex;justify-content:center;gap:12px;margin-top:42px}.actions button{border:2px solid var(--ink);border-radius:50px;padding:14px 24px;font-weight:900;cursor:pointer}.again{background:var(--yellow)}.share{background:var(--ink);color:white}.share span{font:18px Arial;margin-right:8px}.artists{background:#fff;padding:100px max(24px,calc((100vw - 1120px)/2)) 120px}.section-title{text-align:center;margin-bottom:45px}.section-title h2{font-size:38px;margin:0}.section-title h2 span{font-size:53px;color:var(--pink);margin:0 5px}.artist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.artist-pill{border:1px solid #e8e1db;border-radius:14px;padding:12px;display:flex;align-items:center;gap:11px;background:#fffcf8}.artist-pill>b{font:900 9px Arial;color:var(--pink)}.artist-pill div{min-width:0}.artist-pill span{display:block;font-size:8px;color:#9994a0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artist-pill strong{display:block;font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}footer{min-height:235px;background:var(--ink);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px}.footer-brand{color:white}footer p{font-size:11px;color:#aaa8b5;margin:4px 0}footer a{font-size:11px;color:var(--yellow);text-underline-offset:4px}@keyframes pulse{to{opacity:.35}}
@media(max-width:800px){header{height:68px;padding:0 18px}.brand{font-size:14px}.brand span{width:34px;height:34px}.nav-link{font-size:10px}.hero{padding:80px 18px 95px;min-height:620px}.hero::before{width:410px;height:410px;top:70px}.hero h1{font-size:43px}.intro{font-size:12px}.orb-a{left:-20px}.orb-b{right:-10px}.result{padding-left:13px;padding-right:13px}.result.show{max-height:3600px;padding-bottom:95px}.tree{padding:42px 12px 30px;border-radius:25px}.tree-title h2{font-size:28px}.generation.parents,.generation.siblings,.generation.close{grid-template-columns:repeat(2,1fr);gap:28px 10px}.generation.close{margin-top:28px}.family-card{padding:28px 7px 13px}.letter{width:60px;height:60px;font-size:26px}.card-copy h3{font-size:17px}.connector{height:96px}.connector::before{height:42px}.connector::after{top:42px;height:54px}.actions{flex-direction:column;align-items:center}.actions button{width:240px}.artists{padding:80px 16px 90px}.section-title h2{font-size:29px}.section-title h2 span{font-size:42px}.artist-grid{grid-template-columns:repeat(2,1fr);gap:8px}.artist-pill{padding:10px 8px;gap:7px}.artist-pill strong{font-size:12px}footer{padding:30px 20px}}
@media(max-width:380px){.hero h1{font-size:37px}.nav-link{display:none}.card-copy h3{font-size:15px}.letter{width:54px;height:54px}.role{font-size:10px}.artist-pill strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}
.family-card{min-height:132px;background:linear-gradient(145deg,#fff 0 65%,color-mix(in srgb,var(--card) 12%,white) 65%);padding:42px 12px 20px;display:grid;place-items:center}.card-copy h3{font-size:22px;margin-top:6px}.card-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--card);left:13px;bottom:12px}
@media(max-width:800px){.family-card{min-height:120px;padding:38px 7px 16px}.card-copy h3{font-size:18px}}
@media(max-width:380px){.card-copy h3{font-size:16px}}

/* White & blush-pink ribbon theme */
:root{--ink:#5d4851;--paper:#fffdfd;--pink:#e99bb2;--yellow:#f8dfe6}
body{background:linear-gradient(180deg,#fff 0,#fff9fb 50%,#fff 100%)}
header{border-bottom:1px solid #f4e1e7;background:rgba(255,255,255,.9);backdrop-filter:blur(12px)}
.brand span{background:#f3b7c8;border-color:#765b66;box-shadow:3px 3px 0 #f9e4ea}
.hero{background:radial-gradient(circle at 50% 34%,#fff 0 30%,#fff7fa 68%,transparent 69%)}
.hero::before{border:1px dashed #efc9d4;background:rgba(255,255,255,.35)}
.hero h1 span{color:#dd8da6}.hero h1 span::after{border-color:#f0c3cf;border-width:5px}
.intro{color:#887780}.role-list span{border-color:#efdce2;box-shadow:0 3px 0 #f7e9ed;background:#fff}
.main-button{border:2px solid #765b66;background:linear-gradient(180deg,#f8cfda,#efadc0);color:#5d4851;box-shadow:6px 7px 0 #f5dfe5}
.main-button:hover{box-shadow:3px 4px 0 #f5dfe5}
.orb-a{background:#fae7ed}.orb-b{background:#fff0f4}.orb-c{background:#f6d6e0}
.s1,.s2,.s3{color:#e7a3b7}
.bow{position:absolute;width:22px;height:12px;z-index:-1;opacity:.65}
.bow::before,.bow::after{content:"";position:absolute;top:0;width:12px;height:10px;border:2px solid #dfa0b4;background:#fff;border-radius:70% 30% 70% 30%}
.bow::before{right:50%;transform:rotate(16deg)}.bow::after{left:50%;transform:scaleX(-1) rotate(16deg)}
.bow-a{left:13%;bottom:120px;transform:scale(1.35) rotate(-12deg)}.bow-b{right:14%;top:135px;transform:scale(.9) rotate(12deg)}
.tree{border:1px solid #e8cbd4;background:linear-gradient(180deg,#fff,#fffafb);box-shadow:12px 14px 0 #f8e7ec}
.tree-title h2,.section-title h2{color:#5d4851}
.generation.parents{gap:80px}.family-card{border:1px solid #dec3cc;background:linear-gradient(145deg,#fff 0 72%,color-mix(in srgb,var(--card) 14%,white) 72%);box-shadow:0 8px 22px rgba(171,115,136,.10)}
.role{top:-16px;border:1px solid #d898ad;background:color-mix(in srgb,var(--card) 78%,white);box-shadow:0 3px 8px rgba(171,115,136,.12)}
.family-card>i{font-size:17px;color:#d995aa;right:12px;top:12px}.card-dot{display:none}
.connector::before,.connector::after{border-color:#e8cbd4}.you{background:#fff3f6;border:1px solid #dca0b3;box-shadow:4px 4px 0 #f5dfe5;color:#765b66}
.actions button{border:1px solid #c98da1}.again{background:#fff0f4;color:#765b66}.share{background:#765b66;color:#fff}
.artists{background:#fff8fa}.artist-pill{background:#fff;border-color:#efdce2;box-shadow:0 3px 10px rgba(172,116,136,.05)}
footer{background:#6d5660}footer a{color:#f3c4d1}
@media(max-width:800px){.bow-a{left:5%;bottom:100px}.bow-b{right:8%;top:105px}.hero{background:radial-gradient(circle at 50% 32%,#fff 0 28%,#fff7fa 67%,transparent 68%)}}

/* Clear pastel-pink, pure-white, lace and ribbon refinement */
:root{--ink:#4d3040;--paper:#fff;--pink:#ff76ad;--yellow:#ffd9e8}
body{background:#fff;color:var(--ink)}
header{background:rgba(255,255,255,.96);border-color:#ffc5dc}
.brand span{background:#ff7caf;border-color:#5a3546;box-shadow:3px 3px 0 #ffd3e4}
.hero{background:
  radial-gradient(circle at 12px 12px,#ffb4d0 1.2px,transparent 1.5px) 0 0/24px 24px,
  linear-gradient(180deg,#fff 0%,#fff 64%,#fff2f8 100%)}
.hero::before{border:2px dashed #ff9fc3;background:rgba(255,255,255,.92);box-shadow:0 0 0 10px rgba(255,210,228,.35)}
.hero h1 span{color:#ff5f9e}.hero h1 span::after{border-color:#ff9fc3}
.eyebrow,.tree-title p,.section-title p{color:#ff5f9e}
.role-list span{border-color:#ffb9d3;background:#fff;box-shadow:0 3px 0 #ffe2ed}
.main-button{background:linear-gradient(180deg,#ff9fc3,#ff79ad);border-color:#5a3546;color:#fff;box-shadow:6px 7px 0 #ffd5e5;text-shadow:0 1px 0 rgba(130,22,69,.15)}
.main-button:hover{box-shadow:3px 4px 0 #ffd5e5}
.orb-a{background:#ffc2da}.orb-b{background:#ffe0ec}.orb-c{background:#ff9fc3}.s1,.s2,.s3{color:#ff70aa}
.bow{opacity:.9}.bow::before,.bow::after{border-color:#ff69a5;background:#fff}.bow-a{transform:scale(1.65) rotate(-12deg)}.bow-b{transform:scale(1.2) rotate(12deg)}
.tree{position:relative;border:2px solid #ff9fc3;background:#fff;box-shadow:12px 14px 0 #ffe0eb}
.tree::before{content:"";position:absolute;inset:10px;border:5px dotted #ffc2d8;border-radius:25px;pointer-events:none;opacity:.75}
.tree::after{content:"★";position:absolute;top:-20px;left:50%;transform:translateX(-50%);padding:2px 16px;background:#fff;color:#ff5f9e;font-size:28px;line-height:1}
.family-card{border:1.5px solid #ff8fbb;background:#fff;box-shadow:0 8px 0 #ffe4ee,0 12px 24px rgba(255,88,153,.10)}
.family-card::after{content:"";position:absolute;left:12px;right:12px;bottom:-7px;height:10px;background:radial-gradient(circle at 5px 0,#fff 5px,#ff9fc3 5.5px,#ff9fc3 6.5px,transparent 7px) 0 0/12px 10px;pointer-events:none}
.role{background:#ff79ad;border-color:#ff5f9e;color:#fff;box-shadow:0 3px 0 #ffd3e3}
.family-card>i{color:#ff5f9e;font-size:19px}.card-copy small{color:#ff5f9e}.connector::before,.connector::after{border-color:#ffb5d0}
.you{background:#ffeff6;border:2px solid #ff74aa;color:#e74d89;box-shadow:4px 4px 0 #ffd5e5}
.again{background:#ffe5ef;color:#d94682}.share{background:#ff69a5;border-color:#e44783;color:#fff}
.artists{background:#fff5f9;border-top:10px solid transparent;border-image:radial-gradient(circle,#ff9fc3 4px,transparent 5px) 10 round}
.artist-pill{background:#fff;border-color:#ffbad4;box-shadow:0 4px 0 #ffe2ed}.artist-pill>b,.section-title h2 span{color:#ff5f9e}
footer{background:#ff7caf}footer p{color:#fff}footer a{color:#fff;text-decoration-color:#fff}
@media(max-width:800px){.tree::before{inset:7px;border-width:3px}.family-card::after{left:7px;right:7px}.hero{background:radial-gradient(circle at 10px 10px,#ffbdd5 1px,transparent 1.3px) 0 0/20px 20px,linear-gradient(180deg,#fff 0%,#fff 67%,#fff1f7 100%)}}
.card-copy small{font-size:12px;letter-spacing:.02em;line-height:1.35}.result{margin-bottom:80px}
@media(max-width:800px){.card-copy small{font-size:11px}.result{margin-bottom:50px}}

/* Selected fine-line ribbon design */
.tree{border:1.5px solid #ff9cbd;border-radius:30px;box-shadow:0 14px 38px rgba(255,91,151,.08);background:#fff;padding-top:58px}
.tree::before{inset:18px;border:0;border-top:1px solid #ffb7cf;border-bottom:1px solid #ffb7cf;border-radius:22px;background:linear-gradient(90deg,transparent 0 3%,#ffb7cf 3% 3.12%,transparent 3.12% 96.88%,#ffb7cf 96.88% 97%,transparent 97%);opacity:1}
.tree::after{content:"★";top:12px;font-size:22px;color:#ff79a9;padding:0 14px}
.tree-title{position:relative}.tree-title::after{content:"✦  ★  ✦";display:block;margin:15px auto 0;color:#ffabc7;letter-spacing:.6em;font-size:14px}
.family-card::after{height:1px;bottom:15px;background:repeating-linear-gradient(90deg,#ffc0d5 0 3px,transparent 3px 6px)}
.family-card>i,.card-front>i{position:absolute;right:10px;top:12px;color:#ff79a9;font-style:normal;font-size:15px}.family-card{box-shadow:0 5px 15px rgba(255,101,157,.07);border-color:#ffb2cc}
.card-front,.card-back{grid-area:1/1;backface-visibility:hidden;width:100%;height:100%;display:grid;place-items:center;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s}
.flip-card{display:grid;padding:0;perspective:800px;overflow:visible}.card-front{position:relative;padding:40px 10px 20px;transform:rotateY(180deg);opacity:0}.card-back{border-radius:20px;background:linear-gradient(135deg,#fff,#fff1f6);color:#ff6fa5;transform:rotateY(0);font-size:30px}.card-back b{position:absolute;bottom:12px;font:800 9px Arial;letter-spacing:.15em}.flip-card.revealed .card-front{transform:rotateY(0);opacity:1}.flip-card.revealed .card-back{transform:rotateY(-180deg);opacity:0}.flip-card.revealed{animation:card-pop .55s both var(--delay)}
.actions{opacity:.25;pointer-events:none;transition:.4s}.actions.ready{opacity:1;pointer-events:auto}.complete-badge{width:max-content;margin:34px auto 0;padding:9px 18px;border:1px solid #ff9fbe;border-radius:30px;color:#ef5c91;background:#fff5f8;font:900 11px Arial;letter-spacing:.12em;animation:complete-pop .55s both}
.gacha-overlay{position:fixed;inset:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);display:grid;place-items:center;padding:24px}.gacha-box{width:min(390px,90vw);padding:36px 28px 30px;text-align:center;border:1.5px solid #ff9fbe;border-radius:28px;background:#fff;box-shadow:0 20px 70px rgba(255,86,148,.16);position:relative;overflow:hidden}.gacha-box::before{content:"";position:absolute;inset:9px;border:1px dashed #ffc3d6;border-radius:21px;pointer-events:none}.gacha-box p{font:900 10px Arial;letter-spacing:.22em;color:#ff6fa5}.gacha-box h2{font-size:20px;margin:18px 0 16px}.gacha-box small{font-size:10px;color:#a5818e}.gacha-capsule{width:104px;height:104px;margin:18px auto;border:2px solid #ff7dab;border-radius:50%;background:linear-gradient(180deg,#ff8db8 0 49%,#fff 49%);box-shadow:inset 0 0 0 7px #fff,0 8px 20px #ffd5e4;display:grid;place-items:center;animation:capsule-roll .7s ease-in-out infinite}.gacha-capsule span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#ff659c;font-size:20px}.gacha-meter{height:7px;background:#ffe3ed;border-radius:10px;overflow:hidden;margin:0 18px 14px}.gacha-meter b{display:block;height:100%;width:40%;background:#ff73a8;border-radius:10px;animation:meter 1.1s ease-in-out infinite}
@keyframes capsule-roll{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-8px)}}@keyframes meter{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}@keyframes card-pop{0%{transform:scale(.9)}70%{transform:scale(1.035)}100%{transform:scale(1)}}@keyframes complete-pop{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@media(max-width:800px){.tree{padding-top:52px}.tree::before{inset:10px}.card-front{padding:36px 7px 16px}.gacha-box{padding:28px 20px 24px}.gacha-capsule{width:92px;height:92px}}

/* Holographic social-game theme */
:root{--ink:#15558a;--paper:#dff9ff;--pink:#ff69b4;--yellow:#78e9ff}
body{background:linear-gradient(145deg,#76eaff 0%,#b8f6ff 28%,#d6d0ff 68%,#ffc8ee 100%);color:#15558a;background-attachment:fixed}
main{min-height:100vh;background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.24)),repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.16) 40px),repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.16) 40px)}
header{height:72px;max-width:none;padding:0 max(22px,calc((100vw - 1120px)/2));background:rgba(85,205,241,.36);border-bottom:1px solid rgba(255,255,255,.8);box-shadow:0 5px 18px rgba(57,92,172,.14);color:#fff}
.brand,.nav-link{color:#fff;text-shadow:0 2px 5px rgba(32,85,160,.3)}.brand span{background:transparent;border:1px solid #fff;box-shadow:0 0 12px #fff;border-radius:8px;color:#fff}
.hero{min-height:620px;padding:92px 24px 105px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.92),rgba(218,250,255,.35) 50%,transparent 72%)}
.hero::before{width:720px;height:470px;top:55px;border-radius:34px;border:1px solid rgba(255,255,255,.9);background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(162,235,255,.12));box-shadow:inset 0 0 0 5px rgba(255,255,255,.25),0 22px 60px rgba(55,104,194,.12)}
.eyebrow{color:#1388b2;font-size:13px;text-shadow:0 1px #fff}.hero h1{font-family:Impact,"Hiragino Kaku Gothic ProN",sans-serif;font-style:italic;letter-spacing:.02em;font-size:clamp(62px,9vw,112px);color:#fff;text-shadow:0 2px 0 #4bcde5,0 5px 0 #5574c8,0 9px 18px rgba(41,76,162,.28)}.hero h1 span{color:#fff}.hero h1 span::after{display:none}.intro{color:#226b9a;font-size:16px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.9);padding:10px 28px;clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%)}
.role-list span{color:#4962a8;background:rgba(255,255,255,.72);border-color:#fff;box-shadow:0 3px 8px rgba(73,88,177,.12)}
.main-button{width:300px;background:linear-gradient(180deg,#3ce3f4,#159ccd);border:2px solid #fff;color:#fff;box-shadow:0 0 0 4px #3f83cf,0 8px 20px rgba(19,89,164,.28);text-shadow:0 2px 3px #176699}.main-button:hover{box-shadow:0 0 0 4px #3f83cf,0 5px 12px rgba(19,89,164,.25)}
.bow{display:none}.orb{filter:blur(2px);box-shadow:0 0 22px #fff}.s1,.s2,.s3{color:#fff;text-shadow:0 0 12px #fff}
.result{max-width:1080px}.tree{border:2px solid rgba(255,255,255,.95);border-radius:30px;background:linear-gradient(160deg,rgba(246,255,255,.78),rgba(215,228,255,.78));box-shadow:inset 0 0 0 5px rgba(74,139,208,.28),inset 0 0 35px #fff,0 22px 60px rgba(53,78,165,.2);backdrop-filter:blur(16px);padding:58px 36px 42px}.tree::before{inset:12px;border:1px solid rgba(83,119,204,.45);border-radius:22px;background:linear-gradient(90deg,rgba(255,255,255,.6),transparent 12%,transparent 88%,rgba(255,255,255,.6));opacity:1}.tree::after{content:"✦  ✦";top:14px;color:#52cce6;background:transparent;letter-spacing:1em}.tree-title::after{content:"✦ ─── FAMILY LINK ─── ✦";color:#6a76d1;letter-spacing:.12em}.tree-title p{color:#1aaaca}.tree-title h2{font-family:Impact,sans-serif;font-style:italic;color:#fff;font-size:50px;text-shadow:0 2px 0 #54cbe1,0 5px 0 #6572c6}.tree-title span{color:#286a9d;font-weight:800}
.family-card{border:2px solid #fff;background:linear-gradient(145deg,rgba(255,255,255,.96),color-mix(in srgb,var(--card) 18%,white));box-shadow:0 0 0 3px color-mix(in srgb,var(--card) 72%,#5575ca),inset 0 0 18px #fff,0 8px 18px rgba(59,73,158,.2);border-radius:12px}.family-card::after{height:5px;left:12px;right:12px;bottom:12px;background:linear-gradient(90deg,transparent,var(--card),transparent);opacity:.55}.role{top:-15px;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 65%,white),var(--card));border:2px solid #fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--card) 75%,#4260aa),0 4px 10px rgba(57,75,163,.18);border-radius:6px}.card-copy h3{color:#166384;text-shadow:0 1px #fff}.card-copy small{color:color-mix(in srgb,var(--card) 75%,#38549a);font-size:13px}.card-front>i{color:#fff;text-shadow:0 0 8px var(--card)}.card-back{border-radius:10px;background:linear-gradient(145deg,#dffcff,#cbc8ff);color:#538ed2;box-shadow:inset 0 0 24px #fff}.connector::before,.connector::after{border-color:#7784d4}.you{background:linear-gradient(145deg,#45e1f2,#a8a5ff);border:2px solid #fff;color:#fff;box-shadow:0 0 0 3px #6482cf,0 6px 14px rgba(52,83,162,.25)}
.complete-badge{color:#176ca2;border:1px solid #fff;background:rgba(255,255,255,.65);box-shadow:0 0 0 2px #61cae5}.actions button{border:2px solid #fff;color:#fff;box-shadow:0 0 0 3px #6177c7,0 8px 16px rgba(56,69,151,.22);border-radius:14px;font-size:16px}.again{background:linear-gradient(180deg,#ff83c8,#ee46a2)}.share{background:linear-gradient(180deg,#44dcef,#168fc8)}
.gacha-overlay{background:linear-gradient(145deg,rgba(105,233,255,.92),rgba(197,188,255,.92));}.gacha-box{border:2px solid #fff;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(222,235,255,.9));box-shadow:0 0 0 5px #6285d2,0 24px 80px rgba(35,59,144,.3)}.gacha-box::before{border-color:#72d8ea}.gacha-box p,.gacha-box h2{color:#27669a}.gacha-capsule{border-color:#fff;background:linear-gradient(180deg,#45dff0 0 49%,#b9adff 49%);box-shadow:inset 0 0 0 7px #fff,0 0 0 3px #6684d2,0 10px 30px rgba(64,89,180,.25)}.gacha-meter{background:#d2e9ff}.gacha-meter b{background:linear-gradient(90deg,#27d4e8,#967ff2,#ff69b4)}
footer{background:linear-gradient(90deg,#4f77c7,#6474bd);border-top:1px solid #fff}footer a{color:#92f1ff}
@media(max-width:800px){header{padding:0 16px}.hero{min-height:590px;padding-top:72px}.hero::before{width:94vw;height:450px}.hero h1{font-size:58px}.intro{font-size:12px;padding:9px 18px}.tree{padding:54px 14px 30px}.tree-title h2{font-size:40px}.family-card{border-radius:10px}.actions button{width:250px}}

/* Faithful implementation of the selected design reference */
body{background:#f4f4f4;font-family:"Arial Rounded MT Bold","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.game-frame{width:min(940px,100%);margin:28px auto;background:linear-gradient(180deg,#7ceafb 0,#c6f7ff 23%,#d9d2ff 58%,#b9d9ff 100%);border:2px solid #8495da;border-radius:30px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.65),0 10px 32px rgba(59,78,140,.16);overflow:hidden}
.game-frame header{display:none}
.game-frame .hero{min-height:570px;padding:390px 24px 70px;background:linear-gradient(180deg,transparent 0 58%,rgba(213,247,255,.88) 79%,rgba(212,218,255,.9) 100%);position:relative}
.game-frame .hero::before{content:"";display:block;position:absolute;z-index:0;inset:0 0 auto;width:100%;height:390px;border:0;border-radius:0;background-image:url('/socialgame-design-staen.png');background-repeat:no-repeat;background-position:center top;background-size:100% auto;box-shadow:none}
.game-frame .hero::after{content:"";position:absolute;z-index:0;left:0;right:0;top:315px;height:100px;background:linear-gradient(180deg,transparent,rgba(211,246,255,.96))}
.game-frame .hero>*{position:relative;z-index:2}.game-frame .hero .eyebrow,.game-frame .hero h1,.game-frame .hero .intro,.game-frame .hero .role-list,.game-frame .hero .spark,.game-frame .hero .orb,.game-frame .hero .bow{display:none}
.game-frame .main-button{margin:0;width:330px;height:74px;border-radius:18px;border:2px solid #fff;background:linear-gradient(180deg,#62e9fa,#14a9dd);box-shadow:0 0 0 4px #667ed0,inset 0 0 16px rgba(255,255,255,.85),0 10px 22px rgba(52,87,176,.24);font-size:18px}
.game-frame .result{padding:0 28px;max-width:none;margin:0}.game-frame .result.show{padding-bottom:70px}
.game-frame .tree{padding:42px 34px 38px;border:2px solid rgba(255,255,255,.96);border-radius:22px;background:linear-gradient(155deg,rgba(239,255,255,.83),rgba(214,222,255,.84));box-shadow:inset 0 0 0 4px rgba(97,127,205,.36),inset 0 0 30px #fff,0 16px 34px rgba(54,77,157,.2)}
.game-frame .tree::before{inset:10px;border:1px solid rgba(102,119,194,.5);border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.58),transparent 14%,transparent 86%,rgba(255,255,255,.58))}.game-frame .tree::after{content:"✦  +  ☆  +  ✦";top:13px;color:#fff;text-shadow:0 0 7px #5dd8ee,0 0 2px #6673c9;background:transparent;font-size:15px;letter-spacing:.45em}
.game-frame .tree-title{margin:16px 0 42px}.game-frame .tree-title p,.game-frame .tree-title h2{display:none}.game-frame .tree-title span{display:inline-block;padding:10px 30px;color:#fff;font-size:15px;font-weight:900;border:1px solid #fff;background:linear-gradient(90deg,rgba(48,197,224,.8),rgba(126,119,222,.68));clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);text-shadow:0 1px 3px #365d9b}.game-frame .tree-title::after{display:none}
.game-frame .family-card{min-height:138px;border:2px solid #fff;border-radius:9px;background:linear-gradient(145deg,rgba(255,255,255,.96),color-mix(in srgb,var(--card) 24%,white));box-shadow:0 0 0 4px color-mix(in srgb,var(--card) 62%,#6674c4),inset 0 0 18px #fff,0 8px 14px rgba(61,73,150,.22)}
.game-frame .family-card::before{content:"";position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--card) 65%,white);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);pointer-events:none}.game-frame .family-card::after{height:9px;left:24px;right:24px;bottom:12px;background:linear-gradient(90deg,transparent,var(--card) 14%,var(--card) 86%,transparent);opacity:.72;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.game-frame .role{top:-16px;border-radius:5px;border:2px solid #fff;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 55%,white),var(--card));box-shadow:0 0 0 2px color-mix(in srgb,var(--card) 72%,#5664b2);font-size:13px}.game-frame .card-copy h3{font-size:25px;color:color-mix(in srgb,var(--card) 55%,#155581);text-shadow:0 1px #fff}.game-frame .card-copy small{font-size:13px;color:#fff;text-shadow:0 1px 2px color-mix(in srgb,var(--card) 70%,#38549a)}.game-frame .card-front>i{color:#fff}.game-frame .card-back{border-radius:7px;background:linear-gradient(145deg,#e8fdff,#d3ceff);color:#6b81d1}
.game-frame .connector::before,.game-frame .connector::after{border-color:#7780cc}.game-frame .you{border-radius:8px;background:linear-gradient(145deg,#53dff0,#9586ef);box-shadow:0 0 0 3px #6476c5;color:#fff}
.game-frame .complete-badge{border-radius:8px;color:#1b70a2;background:rgba(255,255,255,.72);box-shadow:0 0 0 2px #67cee3}.game-frame .actions button{min-width:265px;height:66px;border-radius:19px;font-size:18px;text-shadow:0 2px 3px rgba(44,66,139,.55);box-shadow:0 0 0 4px #6676c7,inset 0 0 15px rgba(255,255,255,.75),0 8px 16px rgba(50,66,145,.22)}.game-frame .again{background:linear-gradient(180deg,#ff83cc,#ed3c9c)}.game-frame .share{background:linear-gradient(180deg,#50e2f4,#1197d0)}
.game-frame footer{background:linear-gradient(90deg,#6a79c4,#4f85cb);border-top:1px solid #fff}.game-frame .footer-brand span{border-radius:7px}
@media(max-width:800px){.game-frame{margin:0;border-radius:0;border-left:0;border-right:0}.game-frame .hero{min-height:475px;padding:315px 16px 54px}.game-frame .hero::before{height:330px}.game-frame .hero::after{top:260px;height:90px}.game-frame .main-button{width:280px;height:66px}.game-frame .result{padding:0 12px}.game-frame .tree{padding:38px 13px 28px}.game-frame .tree-title span{font-size:11px;padding:9px 15px}.game-frame .family-card{min-height:124px}.game-frame .card-copy h3{font-size:18px}.game-frame .card-copy small{font-size:11px}.game-frame .actions button{width:245px}}

/* Requested result refinements */
.game-frame .hero::before{height:335px}.game-frame .hero::after{top:275px;height:125px;background:linear-gradient(180deg,transparent 0%,rgba(211,246,255,.98) 58%,rgba(211,246,255,1) 100%)}
.game-frame .card-copy small{display:block;margin-top:9px;font-size:17px;line-height:1.15;letter-spacing:.015em}.game-frame .card-copy h3{margin:0;font-size:25px}
.game-frame .love-card{min-height:178px;border:0;background:transparent;box-shadow:none;filter:drop-shadow(0 8px 12px rgba(229,68,157,.2));overflow:visible}
.game-frame .love-card::before{content:"♡";position:absolute;z-index:0;inset:auto;left:50%;top:50%;width:auto;height:auto;border:0;clip-path:none;transform:translate(-50%,-54%) scaleX(1.28);font:220px/.72 Arial,sans-serif;color:#ff62b2;text-shadow:0 0 0 #fff,0 0 8px #fff,0 0 14px #ff9fd2;pointer-events:none}
.game-frame .love-card::after{display:none}.game-frame .love-card .card-front{z-index:2;padding:42px 20px 20px}.game-frame .love-card .role{top:12px;background:linear-gradient(180deg,#ff9bd0,#f453aa);box-shadow:0 0 0 2px #d83991}.game-frame .love-card .card-copy h3{color:#d8328d}.game-frame .love-card .card-copy small{color:#e94da0;text-shadow:0 1px #fff}.game-frame .love-card .card-back{clip-path:polygon(50% 100%,8% 62%,0 38%,3% 16%,16% 3%,35% 0,50% 18%,65% 0,84% 3%,97% 16%,100% 38%,92% 62%);background:linear-gradient(145deg,#fff,#ffc7e5)}
.gacha-overlay{overflow:hidden}.gacha-overlay::before{content:"✦  ★  ✦  ★  ✦  ★  ✦  ★";position:absolute;inset:-20%;display:grid;place-items:center;color:#fff;font-size:clamp(32px,7vw,86px);letter-spacing:.8em;text-shadow:0 0 10px #fff,0 0 25px #42e8ff,0 0 45px #9c80ff;animation:gacha-stars 1.4s linear infinite}.gacha-box{animation:gacha-impact .7s ease-in-out infinite alternate}.gacha-box::after{content:"✦  ★  ✦";position:absolute;left:0;right:0;top:20px;color:#57dcec;font-size:18px;letter-spacing:.65em;text-shadow:0 0 10px #fff;animation:spark-flash .45s ease-in-out infinite alternate}.gacha-capsule{animation:capsule-roll .42s ease-in-out infinite,energy-pulse .7s ease-in-out infinite alternate}
@keyframes gacha-stars{to{transform:rotate(360deg) scale(1.1)}}@keyframes gacha-impact{to{transform:scale(1.025);box-shadow:0 0 0 7px #fff,0 0 55px #57e6ff,0 24px 90px rgba(82,61,199,.4)}}@keyframes spark-flash{to{opacity:.25;transform:scale(1.2)}}@keyframes energy-pulse{to{filter:brightness(1.25) drop-shadow(0 0 16px #fff)}}
@media(max-width:800px){.game-frame .hero::before{height:275px;background-size:760px auto}.game-frame .hero::after{top:225px;height:110px}.game-frame .card-copy small{font-size:14px}.game-frame .love-card{min-height:158px}.game-frame .love-card::before{font-size:184px}.game-frame .love-card .card-front{padding:39px 10px 16px}}

/* Full-screen stage, translucent action buttons and mobile-safe title */
body{background:linear-gradient(145deg,#76eaff 0%,#c4f8ff 31%,#d9d2ff 68%,#b9d9ff 100%)}
.game-frame{width:100%;min-height:100vh;margin:0;border:0;border-radius:0;box-shadow:none}
.game-frame .hero::before{background-size:min(1091px,100%) auto;background-position:center top}
.game-frame .actions{gap:22px}
.game-frame .actions button{min-width:300px;height:72px;border:2px solid rgba(255,255,255,.96);border-radius:24px;color:#fff;font-size:20px;letter-spacing:.04em;backdrop-filter:blur(13px) saturate(145%);-webkit-backdrop-filter:blur(13px) saturate(145%);box-shadow:0 0 0 4px rgba(91,111,199,.78),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -12px 24px rgba(255,255,255,.12),0 10px 25px rgba(47,68,153,.2);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.game-frame .actions button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 0 0 4px rgba(91,111,199,.82),inset 0 1px 0 #fff,inset 0 -12px 24px rgba(255,255,255,.18),0 14px 30px rgba(47,68,153,.25)}
.game-frame .again{background:linear-gradient(180deg,rgba(255,127,202,.66),rgba(229,47,147,.52))}
.game-frame .share{background:linear-gradient(180deg,rgba(72,222,242,.68),rgba(17,145,205,.52))}

@media(max-width:800px){
  .game-frame .hero{min-height:430px;padding:245px 16px 48px}
  .game-frame .hero::before{height:255px;background-size:100% auto;background-position:center top}
  .game-frame .hero::after{top:195px;height:90px}
  .game-frame .main-button{margin-top:10px}
  .game-frame .actions{gap:16px}
  .game-frame .actions button{width:min(300px,82vw);min-width:0;height:66px;border-radius:21px;font-size:18px}
}
@media(max-width:430px){
  .game-frame .hero{min-height:390px;padding-top:215px}
  .game-frame .hero::before{height:225px}
  .game-frame .hero::after{top:172px;height:82px}
  .game-frame .main-button{width:min(280px,78vw);height:62px}
}

/* Seamless full-bleed star field and reference-matched capsule buttons */
body{background:#a9edff}
.game-frame{position:relative;background:
  radial-gradient(circle at 18% 10%,rgba(255,255,255,.95) 0 1px,transparent 2px) 0 0/43px 43px,
  radial-gradient(circle at 82% 30%,rgba(255,255,255,.8) 0 2px,transparent 3px) 0 0/91px 91px,
  linear-gradient(155deg,#61dff5 0%,#a7f1ff 24%,#c8c8ff 57%,#8bc7f2 100%)}
.game-frame::before{content:"✦  ·  ✧  ·  ✦     ✧  ·  ✦  ·  ✧";position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:rgba(255,255,255,.76);font-size:clamp(16px,2vw,31px);line-height:5.2;letter-spacing:1.7em;text-shadow:0 0 8px #fff,0 0 16px #75dff7;opacity:.85}
.game-frame>.hero,.game-frame>.result,.game-frame>footer{position:relative;z-index:1}
.game-frame .hero{background:transparent}
.game-frame .hero::before{height:390px;background-image:url('/socialgame-design-staen-fullbleed.png');background-size:min(1091px,100%) auto}
.game-frame .hero::after{display:none}
.game-frame .result{background:transparent}
.game-frame .actions button{position:relative;overflow:hidden;height:78px;border-radius:999px;border:3px solid rgba(255,255,255,.98);font-size:21px;font-weight:900;text-shadow:0 2px 4px rgba(53,64,139,.72),0 0 8px rgba(255,255,255,.8);box-shadow:0 0 0 4px rgba(93,110,191,.7),0 0 0 7px rgba(255,255,255,.58),inset 0 0 0 2px rgba(255,255,255,.75),inset 0 10px 18px rgba(255,255,255,.62),inset 0 -12px 22px rgba(69,86,181,.18),0 12px 26px rgba(47,66,143,.26)}
.game-frame .actions button::before{content:"✦";position:absolute;left:26px;top:50%;transform:translateY(-50%);font-size:25px;color:#fff;text-shadow:0 0 6px #fff,0 0 13px currentColor}
.game-frame .actions button::after{content:"✦";position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:20px;color:#fff;text-shadow:0 0 6px #fff,0 0 13px currentColor}
.game-frame .again{background:linear-gradient(180deg,rgba(255,188,228,.88) 0%,rgba(255,86,178,.82) 48%,rgba(225,48,147,.76) 100%)}
.game-frame .share{background:linear-gradient(180deg,rgba(183,248,255,.9) 0%,rgba(50,205,236,.82) 48%,rgba(16,139,199,.76) 100%)}
.game-frame footer{background:linear-gradient(90deg,rgba(78,111,198,.76),rgba(70,129,203,.76));backdrop-filter:blur(8px)}

@media(max-width:800px){
  .game-frame .hero{padding-top:245px}
  .game-frame .hero::before{height:255px;background-size:100% auto}
  .game-frame .actions button{height:68px;border-width:2px;border-radius:999px}
  .game-frame .actions button::before{left:19px;font-size:19px}
  .game-frame .actions button::after{right:19px;font-size:17px}
}
@media(max-width:430px){.game-frame .hero{padding-top:215px}.game-frame .hero::before{height:225px}}

/* Clean title gap, brighter foreground sparkles and filled love card */
.game-frame .hero{min-height:670px;padding-top:430px}
.game-frame .hero::before{height:410px;background-image:url('/socialgame-design-staen-clean-title.png')}
.game-frame .hero::after{content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(circle at 6% 18%,#fff 0 2px,transparent 3px),
  radial-gradient(circle at 13% 64%,rgba(255,255,255,.95) 0 3px,transparent 4px),
  radial-gradient(circle at 24% 83%,#fff 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 76% 72%,#fff 0 2px,transparent 3px),
  radial-gradient(circle at 89% 42%,rgba(255,255,255,.95) 0 3px,transparent 4px),
  radial-gradient(circle at 96% 80%,#fff 0 1.5px,transparent 2.5px);filter:drop-shadow(0 0 6px #fff)}
.game-frame .hero>*{z-index:2}
.game-frame .love-card::before{content:"";width:250px;height:218px;left:50%;top:50%;transform:translate(-50%,-52%);background:linear-gradient(145deg,rgba(255,255,255,.96) 0%,rgba(255,222,240,.95) 48%,rgba(255,162,211,.9) 100%);clip-path:polygon(50% 100%,8% 61%,2% 48%,0 33%,3% 18%,13% 6%,27% 1%,39% 4%,50% 17%,61% 4%,73% 1%,87% 6%,97% 18%,100% 33%,98% 48%,92% 61%);filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #ff62b2) drop-shadow(0 8px 10px rgba(216,54,143,.22));opacity:1}
.game-frame .love-card .card-front{background:transparent}

@media(max-width:800px){
  .game-frame .hero{min-height:470px;padding-top:275px}
  .game-frame .hero::before{height:265px}
  .game-frame .love-card::before{width:205px;height:182px}
}
@media(max-width:430px){.game-frame .hero{min-height:435px;padding-top:250px}.game-frame .hero::before{height:240px}}

/* Blend the title artwork into the shared background with no visible panel edge */
.game-frame .hero::before{
  inset:0;
  height:430px;
  background-size:min(1160px,100%) auto;
  background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 72% 64% at 50% 31%,#000 42%,rgba(0,0,0,.96) 58%,rgba(0,0,0,.42) 76%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 64% at 50% 31%,#000 42%,rgba(0,0,0,.96) 58%,rgba(0,0,0,.42) 76%,transparent 100%);
}
@media(max-width:800px){
  .game-frame .hero::before{height:285px;background-size:112% auto;-webkit-mask-image:linear-gradient(180deg,#000 0 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 70%,transparent 100%)}
}
@media(max-width:430px){.game-frame .hero::before{height:255px}}

[hidden]{display:none!important}
.flip-card.revealed .card-front{opacity:1;transform:none}

[hidden]{display:none!important}
.flip-card.revealed .card-front{opacity:1;transform:none}

/* Definitive mobile spacing: title, counter and button each have their own row */
.game-frame{
  background:#72ddf2 url('/unified-holographic-starfield.png') center top/cover no-repeat!important;
}
.game-frame .hero{
  min-height:820px!important;
  padding:620px 24px 120px!important;
}
.game-frame .hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:3!important;
  top:70px!important;
  left:50%!important;
  right:auto!important;
  width:min(1120px,94vw)!important;
  height:min(420px,35.25vw)!important;
  transform:translateX(-50%)!important;
  background:transparent url('/staen-title-transparent.png') center/contain no-repeat!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.visitor-counter{top:500px!important;z-index:5!important}

@media(max-width:800px){
  .game-frame{background-size:cover!important;background-position:center top!important}
  .game-frame .hero{min-height:500px!important;padding:330px 12px 66px!important}
  .game-frame .hero::before{top:52px!important;width:96vw!important;height:36vw!important;background-size:contain!important}
  .visitor-counter{top:215px!important;width:92vw!important}
  .game-frame .main-button{margin-top:0!important}
}
@media(max-width:430px){
  .game-frame .hero{min-height:480px!important;padding-top:315px!important}
  .visitor-counter{top:205px!important}
}
@media(max-width:380px){
  .game-frame .hero{min-height:455px!important;padding-top:300px!important}
  .visitor-counter{top:192px!important}
}

/* Published single-surface layout: one frame, one star field, no section seams */
html,body{min-height:100%;background:#69dff4}
body{margin:0}
.game-frame{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  background:#69dff4 url('/unified-holographic-starfield.png') center top/cover no-repeat;
  isolation:isolate;
}
.game-frame::before{display:none!important}
.game-frame::after{
  content:"";
  position:absolute;
  z-index:100;
  inset:7px;
  border:2px solid rgba(255,255,255,.82);
  border-radius:30px;
  box-shadow:0 0 0 3px rgba(91,112,201,.58),inset 0 0 0 4px rgba(255,255,255,.2),inset 0 0 25px rgba(255,255,255,.3),0 0 18px rgba(255,255,255,.5);
  pointer-events:none;
}
.game-frame>.hero,.game-frame>.result,.game-frame>footer{position:relative;z-index:1;background:transparent!important;border:0!important;box-shadow:none!important}
.game-frame .hero{
  flex:1 0 auto;
  min-height:720px;
  padding:500px 24px 112px;
}
.game-frame .hero::before{
  inset:0;
  width:100%;
  height:500px;
  background-image:url('/socialgame-title-borderless-v2.png');
  background-position:center top;
  background-size:min(1180px,94vw) auto;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0 80%,rgba(0,0,0,.76) 90%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 80%,rgba(0,0,0,.76) 90%,transparent 100%);
}
.game-frame .hero::after{display:none!important}
.game-frame .main-button{margin-top:20px}
.game-frame .result{background:transparent!important}
.game-frame footer{margin-top:auto;background:transparent!important;backdrop-filter:none!important}
.game-frame .love-card::after{
  background:linear-gradient(145deg,#fff 0 2.5%,#d458b7 3% 100%);
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px #d458b7) drop-shadow(0 7px 10px rgba(216,54,143,.23));
}

@media(max-width:800px){
  .game-frame{background-position:center top;background-size:auto 100%}
  .game-frame::after{inset:4px;border-width:1.5px;border-radius:17px;box-shadow:0 0 0 2px rgba(91,112,201,.55),inset 0 0 0 2px rgba(255,255,255,.2),inset 0 0 14px rgba(255,255,255,.3)}
  .game-frame .hero{min-height:405px;padding:245px 14px 58px}
  .game-frame .hero::before{height:240px;background-size:94% auto;background-position:center 5px}
  .game-frame .main-button{margin-top:18px;width:220px;height:54px;font-size:14px}
  .game-frame .result{padding:0 8px}
  .game-frame .tree{padding:32px 9px 22px;border-radius:16px}
  .game-frame .tree-title{margin:10px 0 30px}
  .game-frame .tree-title span{font-size:9px;padding:7px 10px}
  .generation.parents,.generation.siblings,.generation.close{gap:23px 9px}
  .game-frame .family-card{min-height:102px}
  .game-frame .card-front{padding:31px 5px 13px}
  .game-frame .role{top:-12px;padding:4px 9px;font-size:9px}
  .game-frame .card-copy h3{font-size:15px}
  .game-frame .card-copy small{margin-top:6px;font-size:10px}
  .game-frame .love-card{min-height:134px}
  .game-frame .love-card::before{width:174px;height:154px}
  .game-frame .love-card::after{width:184px;height:164px}
  .game-frame .love-card .card-front{padding:32px 6px 13px}
  .game-frame .actions button{width:218px;height:56px;font-size:14px}
  .game-frame footer{min-height:145px;padding:22px 16px 30px}
}
@media(max-width:380px){
  .game-frame .hero{min-height:370px;padding-top:215px}
  .game-frame .hero::before{height:210px}
  .game-frame .card-copy h3{font-size:13px}
  .game-frame .card-copy small{font-size:8px}
}

/* Final one-piece artwork: title, frame and star field are one continuous image */
html,body{background:#72ddf2}
.game-frame{
  background-color:#72ddf2;
  background-image:url('/staen-family-fullpage-v3.png');
  background-position:center top;
  background-size:100% auto;
  background-repeat:no-repeat;
}
.game-frame::after{display:none!important}
.game-frame .hero{
  min-height:clamp(700px,55vw,1060px);
  padding-top:clamp(450px,40vw,820px);
  padding-bottom:110px;
}
.game-frame .hero::before,.game-frame .hero::after{display:none!important}
.game-frame .main-button{margin-top:0}

@media(max-width:800px){
  .game-frame{background-size:100% auto;background-position:center top}
  .game-frame .hero{min-height:430px;padding:290px 14px 58px}
  .game-frame .main-button{margin-top:10px}
}
@media(max-width:430px){
  .game-frame .hero{min-height:385px;padding-top:245px;padding-bottom:48px}
}
@media(max-width:380px){
  .game-frame .hero{min-height:355px;padding-top:220px}
}

/* Reliable live title and nostalgic visitor counter */
.game-frame{
  background:#72ddf2 url('/unified-holographic-starfield.png') center top/cover no-repeat;
}
.game-frame::after{
  display:block!important;
  content:"";
  position:absolute;
  z-index:100;
  inset:7px;
  border:2px solid rgba(255,255,255,.84);
  border-radius:30px;
  box-shadow:0 0 0 3px rgba(91,112,201,.58),inset 0 0 0 4px rgba(255,255,255,.2),inset 0 0 25px rgba(255,255,255,.3),0 0 18px rgba(255,255,255,.5);
  pointer-events:none;
}
.game-frame .hero{
  min-height:700px;
  padding:190px 24px 150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.game-frame .hero .eyebrow{
  display:block;
  margin:0 0 18px;
  color:#fff;
  font:900 clamp(24px,3.2vw,54px)/1 "Arial Rounded MT Bold",Arial,sans-serif;
  letter-spacing:.06em;
  text-shadow:0 3px 0 #1c88b4,0 7px 14px rgba(38,66,157,.48),0 0 8px #fff;
}
.game-frame .hero h1{
  display:block;
  width:100%;
  margin:0 0 86px;
  text-align:center;
  font:900 clamp(64px,9vw,150px)/1 "Arial Black","Hiragino Kaku Gothic ProN",sans-serif;
  letter-spacing:-.06em;
  white-space:nowrap;
  transform:skewX(-4deg);
}
.game-frame .hero h1 span{
  display:inline-block;
  color:#eefcff;
  background:linear-gradient(180deg,#fff 5%,#dffcff 35%,#b9b5ff 64%,#f8f6ff 88%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:3px #276ba8;
  filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 8px 2px #5450b4) drop-shadow(0 12px 15px rgba(28,70,145,.48));
}
.game-frame .main-button{margin-top:0}
.visitor-counter{
  position:absolute;
  z-index:4;
  top:38px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  width:min(680px,88vw);
  color:#e8fbff;
  font:800 13px/1.4 "MS PGothic","Yu Gothic",sans-serif;
  text-shadow:0 1px 3px #3166a5;
}
.visitor-counter strong{
  display:inline-block;
  padding:5px 10px 4px;
  border:2px inset rgba(255,255,255,.9);
  border-radius:4px;
  background:#18335f;
  color:#85fbff;
  font:900 22px/1 "Courier New",monospace;
  letter-spacing:.12em;
  box-shadow:inset 0 0 8px #07172f,0 0 10px rgba(255,255,255,.45);
}
.visitor-counter em{
  flex-basis:100%;
  color:#fff8a8;
  font-style:normal;
  text-align:center;
  animation:counter-blink .75s steps(2,end) infinite;
}
@keyframes counter-blink{50%{opacity:.38}}

@media(max-width:800px){
  .game-frame::after{inset:4px;border-width:1.5px;border-radius:17px}
  .game-frame .hero{min-height:440px;padding:112px 12px 64px}
  .game-frame .hero .eyebrow{margin-bottom:12px;font-size:clamp(17px,5vw,27px)}
  .game-frame .hero h1{margin-bottom:70px;font-size:clamp(42px,12vw,76px);letter-spacing:-.08em}
  .game-frame .hero h1 span{-webkit-text-stroke:1.5px #276ba8;filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 4px 1px #5450b4) drop-shadow(0 7px 9px rgba(28,70,145,.42))}
  .visitor-counter{top:24px;gap:5px;width:92vw;font-size:10px}
  .visitor-counter strong{padding:4px 7px 3px;font-size:16px}
}
@media(max-width:380px){
  .game-frame .hero{min-height:410px;padding-top:105px}
  .game-frame .hero h1{margin-bottom:62px;font-size:40px}
}

/* Restore the exact selected chrome title artwork without cropping */
.game-frame .hero{
  min-height:900px;
  padding:700px 24px 120px;
}
.game-frame .hero::before{
  content:"";
  display:block!important;
  position:absolute;
  z-index:2;
  top:62px;
  left:50%;
  right:auto;
  width:min(1200px,96vw);
  height:min(675px,54vw);
  transform:translateX(-50%);
  background:url('/socialgame-title-borderless-v2.png') center/contain no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 70% 64% at 50% 48%,#000 55%,rgba(0,0,0,.8) 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 64% at 50% 48%,#000 55%,rgba(0,0,0,.8) 75%,transparent 100%);
  pointer-events:none;
}
.game-frame .hero .eyebrow,.game-frame .hero h1{display:none!important}
.visitor-counter{top:22px;z-index:5}

@media(max-width:800px){
  .game-frame .hero{min-height:450px;padding:285px 12px 62px}
  .game-frame .hero::before{top:48px;width:98vw;height:55.125vw}
  .visitor-counter{top:15px}
}
@media(max-width:430px){
  .game-frame .hero{min-height:420px;padding-top:255px}
  .game-frame .hero::before{top:46px}
}
@media(max-width:380px){
  .game-frame .hero{min-height:395px;padding-top:235px}
}

/* One actual image only: the chrome title is baked into the continuous page artwork */
.game-frame{
  background-color:#72ddf2;
  background-image:url('/staen-family-fullpage-v3.png');
  background-position:center top;
  background-size:100% auto;
  background-repeat:no-repeat;
}
.game-frame::after{display:none!important}
.game-frame .hero::before{display:none!important;background:none!important}
.game-frame .hero{
  min-height:clamp(760px,58vw,1120px);
  padding-top:clamp(560px,43vw,880px);
  padding-bottom:110px;
}

@media(max-width:800px){
  .game-frame .hero{min-height:455px;padding:300px 12px 62px}
}
@media(max-width:430px){
  .game-frame .hero{min-height:420px;padding-top:270px}
}
@media(max-width:380px){
  .game-frame .hero{min-height:395px;padding-top:245px}
}

/* Add only the requested transparent chrome lettering over the existing one-piece background */
.game-frame{
  background:#72ddf2 url('/unified-holographic-starfield.png') center top/cover no-repeat;
}
.game-frame .hero{
  min-height:760px;
  padding:520px 24px 120px;
}
.game-frame .hero::before{
  content:"";
  display:block!important;
  position:absolute;
  z-index:3;
  top:62px;
  left:50%;
  right:auto;
  width:min(1120px,94vw);
  height:min(420px,35.25vw);
  transform:translateX(-50%);
  background:transparent url('/staen-title-transparent.png') center/contain no-repeat!important;
  -webkit-mask-image:none;
  mask-image:none;
  pointer-events:none;
}
.visitor-counter{top:18px;z-index:5}

@media(max-width:800px){
  .game-frame .hero{min-height:445px;padding:270px 12px 62px}
  .game-frame .hero::before{top:48px;width:96vw;height:32.4vw}
  .visitor-counter{top:12px}
}
@media(max-width:430px){
  .game-frame .hero{min-height:410px;padding-top:245px}
}
@media(max-width:380px){
  .game-frame .hero{min-height:390px;padding-top:225px}
}

/* Fade the artwork into the shared star field and lower the draw button */
.game-frame .hero{min-height:740px;padding-top:505px}
.game-frame .hero::before{
  height:505px;
  -webkit-mask-image:linear-gradient(180deg,#000 0 72%,rgba(0,0,0,.96) 80%,rgba(0,0,0,.55) 91%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 72%,rgba(0,0,0,.96) 80%,rgba(0,0,0,.55) 91%,transparent 100%);
}
@media(max-width:800px){
  .game-frame .hero{min-height:515px;padding-top:315px}
  .game-frame .hero::before{height:310px;-webkit-mask-image:linear-gradient(180deg,#000 0 74%,rgba(0,0,0,.7) 89%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 74%,rgba(0,0,0,.7) 89%,transparent 100%)}
}
@media(max-width:430px){.game-frame .hero{min-height:470px;padding-top:285px}.game-frame .hero::before{height:280px}}

/* Replace the dotted lower field with the same luminous stars as the hero */
.game-frame{background:linear-gradient(155deg,#61dff5 0%,#9beaff 25%,#c7c9ff 58%,#87c8f2 100%)}
.game-frame::before{
  content:"✦　　✧　　　　☆　　　✦　　　　✧　　✦\A　　　☆　　　　✦　　✧　　　　✦　　　☆\A✧　　　　✦　　　☆　　　　✧　　✦　　　　✦\A　　✦　　　　✧　　　　✦　　☆　　　　✧\A☆　　　✦　　　　✧　　　☆　　　　✦　　　✧";
  white-space:pre-wrap;
  display:block;
  padding:40px 2vw;
  font-size:clamp(18px,2.4vw,38px);
  line-height:4.2;
  letter-spacing:.28em;
  color:rgba(255,255,255,.88);
  text-shadow:0 0 5px #fff,0 0 14px #7ee8ff,0 0 25px rgba(112,115,231,.55);
  opacity:.92;
}
@media(max-width:800px){.game-frame::before{font-size:20px;line-height:4.8;letter-spacing:.12em;padding-top:18px}}

/* Single continuous holographic surface — preview candidate */
body{background:#75dff6}
.game-frame{
  background-color:#75dff6;
  background-image:url('/unified-holographic-starfield.png');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:scroll;
}
.game-frame::before{display:none}
.game-frame .hero,.game-frame .result,.game-frame footer{background-color:transparent;background-image:none}
.game-frame footer{border:0;box-shadow:none;backdrop-filter:none}
.game-frame .hero::after{background:none;filter:none}
@media(max-width:800px){.game-frame{background-size:auto 100%;background-position:center top}}

/* One connected outer frame and a calmer mobile scale — preview candidate */
.game-frame::after{
  content:"";
  position:absolute;
  z-index:20;
  inset:24px 5.5% 28px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:36px;
  box-shadow:0 0 0 2px rgba(88,108,194,.42),inset 0 0 18px rgba(255,255,255,.34),0 0 16px rgba(255,255,255,.3);
  pointer-events:none;
}
@media(max-width:800px){
  .game-frame::after{inset:6px 5px 8px;border-width:1.5px;border-radius:17px}
  .game-frame .hero{min-height:415px;padding:235px 14px 42px}
  .game-frame .hero::before{height:235px;background-size:94% auto;background-position:center 8px}
  .game-frame .main-button{width:225px;height:56px;font-size:15px;border-radius:16px}
  .game-frame .result{padding:0 8px}
  .game-frame .tree{padding:32px 9px 22px;border-radius:16px}
  .game-frame .tree-title{margin:10px 0 30px}
  .game-frame .tree-title span{font-size:9px;padding:7px 10px}
  .generation.parents,.generation.siblings,.generation.close{gap:23px 9px}
  .game-frame .family-card{min-height:104px}
  .game-frame .card-front{padding:31px 5px 13px}
  .game-frame .role{top:-12px;padding:4px 9px;font-size:9px}
  .game-frame .card-copy h3{font-size:15px}
  .game-frame .card-copy small{margin-top:6px;font-size:9px}
  .game-frame .love-card{min-height:135px}
  .game-frame .love-card::before{width:174px;height:154px}
  .game-frame .love-card::after{width:186px;height:166px}
  .game-frame .love-card .card-front{padding:32px 6px 13px}
  .game-frame .actions button{width:220px;height:58px;font-size:15px}
  .game-frame footer{min-height:175px;padding:24px 16px}
}
@media(max-width:380px){
  .game-frame .hero{min-height:385px;padding-top:215px}
  .game-frame .hero::before{height:215px}
  .game-frame .card-copy h3{font-size:13px}
  .game-frame .card-copy small{font-size:8px}
}

/* Full-width artwork on desktop; fitted artwork on phones */
.game-frame .hero::before{
  height:430px;
  background-size:100% auto;
  background-position:center top;
  -webkit-mask-image:none;
  mask-image:none;
}
.game-frame .love-card::after{
  content:"";
  display:block;
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:264px;
  height:232px;
  transform:translate(-50%,-52%);
  background:linear-gradient(145deg,#fff 0 3%,#d458b7 4% 100%);
  clip-path:polygon(50% 100%,8% 61%,2% 48%,0 33%,3% 18%,13% 6%,27% 1%,39% 4%,50% 17%,61% 4%,73% 1%,87% 6%,97% 18%,100% 33%,98% 48%,92% 61%);
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #d458b7);
  opacity:1;
}
.game-frame .love-card::before{z-index:1}
@media(max-width:800px){
  .game-frame .hero::before{height:285px;background-size:100% auto}
  .game-frame .love-card::after{width:219px;height:196px}
}
@media(max-width:430px){.game-frame .hero::before{height:255px}}

[hidden]{display:none!important}
.flip-card.revealed .card-front{opacity:1;transform:none}