.game-page{--page-background:url('assets/back ground game chòm sao.png')}
.game-page [hidden]{display:none!important}
.game-section{padding:30px 0 60px;min-height:calc(100svh - 88px)}
.game-container{max-width:1320px}
.game-screen{text-align:center}
.game-kicker{font-size:23px;font-style:italic;font-weight:700;color:#FFF;text-shadow:1px 1px #1aabfa,-1px -1px #1aabfa;margin:0 0 18px}
.game-title{font-size:clamp(38px,5.2vw,74px);line-height:1.17;font-weight:900;background:linear-gradient(#51FFFF,#F3FFFF);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(3px 6px 5px #00000055);margin:0 auto;max-width:1100px}
.orbit-frame{height:450px;display:flex;align-items:center;justify-content:center;margin:20px auto 14px;width:100%;pointer-events:none}


.game-description{font-size:clamp(22px,2.4vw,34px);font-weight:700;line-height:1.2;max-width:1000px;margin:18px auto 22px;color:#FFF}
.game-description span{background:#1aabfa;padding:4px 10px;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:5px}
.game-start{display:inline-flex;align-items:center;justify-content:center;gap:22px;border:0;border-radius:65px;background:linear-gradient(#51FFFF,#F3FFFF);font:900 clamp(28px,3.3vw,48px)/1.2 Montserrat,sans-serif;color:#1aabfa;padding:15px 35px;min-width:360px;cursor:pointer;animation:game-bounce 1.3s ease-in-out infinite;transform-origin:center}
.play-triangle{width:0;height:0;border-top:28px solid transparent;border-bottom:28px solid transparent;border-left:48px solid #14ADD6}
@keyframes game-bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.game-start:hover{filter:drop-shadow(0 0 12px #FAF84E)}
.question-progress{font-size:14px;color:#1aabfa;font-weight:800;display:table;background:#FFFFFFDD;border-radius:20px;margin:0 auto 22px;padding:7px 15px}
.question-title{font-size:clamp(25px,3vw,40px);font-weight:700;color:#FFF;line-height:1.4;margin:20px auto 30px;max-width:1240px}
.question-title span{background:#14ADD6;padding:4px 9px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.game-answers{max-width:950px;margin:auto;display:grid;gap:34px}
.game-answer,.personality-tag{border:6px solid #40E9F4;border-right-color:#14ADD6;border-bottom-color:#14ADD6;border-radius:65px;background:linear-gradient(135deg,#51FFFF77,#FFFFFFAA);color:#1aabfa;font:800 32px/1.3 Montserrat,sans-serif;padding:24px 28px;min-height:110px}
.game-answer{cursor:pointer;text-align:center;transition:transform .18s ease,background .18s ease}
.game-answer:hover{transform:translateY(-3px);background:linear-gradient(135deg,#51FFFFBB,#FFFFFFDD)}
.game-answer.selected{background:linear-gradient(135deg,#FAF84EAA,#51FFFFCC);border-color:#FAF84E}
.game-answer:disabled{cursor:default}
.game-answer:disabled:not(.selected){opacity:.7}
.game-result-button{display:block;padding:0;border:0;background:transparent;margin:40px auto 30px;width:min(819px,80%);cursor:pointer;transition:transform .2s ease}
.game-result-button img{width:100%;height:auto}
.game-result-button:hover{transform:scale(1.04)}
.answer-confirmation{max-width:950px;border:5px solid #40E9F4;border-radius:55px;padding:24px;background:#FFFFFFAA;margin:30px auto;color:#1aabfa;font-size:30px;font-weight:800}
.game-result{--constellation-gradient:linear-gradient(110deg,#51FFFF,#F3FFFF);--tag-background:linear-gradient(135deg,#51FFFF77,#FFFFFFAA);--tag-color:#1aabfa;--description-color:#1aabfa}
.game-result[data-theme="friendly"]{--constellation-gradient:linear-gradient(100deg,#FFE500 10%,#50FDC5 55%,#51FFFF 85%);--tag-background:linear-gradient(110deg,#FAF84E99,#50FDC577);--tag-color:#FFF;--description-color:#FAF84E}
.game-result[data-theme="active"]{--constellation-gradient:linear-gradient(100deg,#50FDC5,#0AA3AE);--tag-background:linear-gradient(110deg,#36DCBD99,#0AA3AE99);--tag-color:#FFF;--description-color:#14ADD6}
/* Purple-to-green is present in the supplied Quan Sát result reference. */
.game-result[data-theme="observer"]{--constellation-gradient:linear-gradient(100deg,#8C52FF,#00BF63);--tag-background:linear-gradient(110deg,#8C52FF99,#00BF6399);--tag-color:#FFF;--description-color:#8C52FF}
.result-title{font-size:clamp(38px,5.2vw,74px);font-weight:900;line-height:1.2;background:var(--constellation-gradient);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(3px 6px 5px #00000055);margin:0 0 14px}
.result-description{font-size:clamp(23px,2.4vw,34px);font-weight:800;font-style:italic;line-height:1.15;max-width:1160px;margin:0 auto;color:#FFF;text-shadow:2px 2px var(--description-color),-2px -2px var(--description-color),2px -2px var(--description-color),-2px 2px var(--description-color)}
.result-character{position:relative;min-height:400px;display:grid;grid-template-columns:1fr 350px 1fr;grid-template-rows:1fr 1fr;column-gap:18px;align-items:start;max-width:1320px;margin:24px auto 0}
.result-star{grid-column:2;grid-row:1/3;width:350px;height:auto;align-self:center}
.personality-tag{min-height:108px;font-size:31px;padding:24px 10px;display:flex;align-items:center;justify-content:center;background:var(--tag-background);color:var(--tag-color);margin:10px 0;text-shadow:0 2px 4px #00000022}
.tag-one{grid-column:1;grid-row:1}.tag-two{grid-column:3;grid-row:1}.tag-three{grid-column:1;grid-row:2}.tag-four{grid-column:3;grid-row:2}
.reco-match{text-align:left;margin:5px auto 12px}
.reco-match h3,.compatible h3{font-size:44px;font-weight:900;line-height:1.2;margin:0 0 20px}
.reco-match>p{background:#FFFFFF66;backdrop-filter:brightness(.7);border:6px solid #FAF84E99;border-radius:40px;padding:25px 28px;text-align:center;font-size:32px;line-height:1.25;font-weight:700;color:#FFF;margin:0}
.reco-match strong{color:#FAF84E}
.compatible{display:flex;align-items:center;gap:22px;text-align:left;flex-wrap:wrap;margin:22px 0}
.compatible h3{margin:0}.compatible img{width:85px;height:auto}
.compatible span{font-size:32px;font-weight:900}
.compatible [data-theme="party"]{color:#51FFFF}.compatible [data-theme="friendly"]{background:linear-gradient(100deg,#FFE500,#50FDC5,#51FFFF);background-clip:text;-webkit-background-clip:text;color:transparent}.compatible [data-theme="active"]{color:#0AA3AE}.compatible [data-theme="observer"]{background:linear-gradient(100deg,#8C52FF,#00BF63);background-clip:text;-webkit-background-clip:text;color:transparent}
.game-result-actions{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.game-secondary{border:0;border-radius:30px;background:linear-gradient(#94FFFF,#F3FFFF);padding:14px 30px;font:800 20px/1.4 Montserrat,sans-serif;color:#1aabfa;text-decoration:none;cursor:pointer}
.game-noscript{background:#FFFFFFDD;padding:20px;border-radius:20px;color:#1aabfa}
.game-page main :focus-visible{outline:3px solid #0E58FC;outline-offset:6px}
.game-page h2:focus{outline:0}
.game-enter{animation:game-enter .55s ease-out both}
@keyframes game-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.result-character{grid-template-columns:1fr 270px 1fr;min-height:340px}.result-star{width:270px}.personality-tag{font-size:24px;min-height:105px;padding:20px 12px}.reco-match>p{font-size:27px}.compatible h3,.reco-match h3{font-size:36px}}
@media(max-width:700px){.game-section{padding:24px 0 45px}.game-kicker{font-size:17px;margin-bottom:15px}.game-title,.result-title{font-size:33px;line-height:1.2}.orbit-frame{height:320px;margin:18px auto}.game-description{font-size:20px;line-height:1.4;margin:20px auto 28px}.game-start{min-width:0;max-width:90%;font-size:30px;padding:14px 27px;gap:15px}.play-triangle{border-top-width:18px;border-bottom-width:18px;border-left-width:30px}.question-title{font-size:24px;line-height:1.5;margin:18px auto 25px}.game-answers{gap:18px}.game-answer{min-height:90px;font-size:19px;padding:18px 16px;border-width:4px;border-radius:36px}.game-result-button{width:100%;margin:24px auto}.answer-confirmation{font-size:21px;padding:20px;border-radius:32px}.result-description{font-size:21px;line-height:1.4;text-shadow:1px 1px var(--description-color),-1px -1px var(--description-color),1px -1px var(--description-color),-1px 1px var(--description-color)}.result-character{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:24px auto}.result-star{order:0;width:min(240px,70%);align-self:center;margin:0 auto 14px}.personality-tag{order:1;font-size:21px;min-height:74px;border-width:4px;margin:0;padding:17px 14px;border-radius:40px}.reco-match{margin-top:25px}.reco-match h3,.compatible h3{font-size:28px;margin-bottom:15px}.reco-match>p{border-width:4px;font-size:21px;line-height:1.5;padding:20px 16px;border-radius:28px}.compatible{gap:12px;justify-content:center;text-align:center;margin-top:25px}.compatible h3{width:100%;margin:0}.compatible img{width:65px}.compatible span{font-size:23px}.game-result-actions{gap:12px}.game-secondary{font-size:17px;padding:13px 22px}}
@media(prefers-reduced-motion:reduce){.game-start,.game-enter{animation:none!important}.game-answer,.game-result-button{transition:none}.game-answer:hover,.game-result-button:hover{transform:none}}
/* Keep each result gradient aligned with its actual title, as in the reference. */
.result-title{display:table;margin:0 auto 14px}
.game-result[data-theme="friendly"] .personality-tag{background:linear-gradient(110deg,#FAF84E99 0%,#FAF84E99 55%,#50FDC577 100%);border-left-color:#FAF84E;border-top-color:#50FDC5}
.result-description{-webkit-text-stroke:1.5px var(--description-color);paint-order:stroke fill;text-shadow:none;font-weight:700}
@media(min-width:701px){.orbit-frame{height:500px}}
@media(max-width:700px){.result-description{-webkit-text-stroke:1px var(--description-color);text-shadow:none}}

/* Horizontal rotation; result tags remain on a single line at every width. */
.orbit-frame{perspective:1000px}
.personality-tag{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.personality-tag{min-width:0}

/* Four upright stars follow a projected horizontal circle, with individual depth. */
.game-page .orbit-frame{position:relative;display:block;width:min(640px,100%);height:500px;perspective:none;isolation:isolate}
.orbit-star{position:absolute;left:50%;top:50%;width:25%;height:auto;max-width:none;will-change:transform,opacity;pointer-events:none}
@media(max-width:700px){.game-page .orbit-frame{height:320px}}
@media(prefers-reduced-motion:reduce){.orbit-star{will-change:auto}}