:root{font-family:Inter,system-ui,-apple-system,"Noto Sans KR",sans-serif;color:#e9f3f2;background:#101923;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#1d3a3b 0,#101923 56%)}button,input,select{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.45;cursor:default}.wrap{max-width:1020px;margin:auto;padding:25px 20px 90px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #2c4249;padding-bottom:18px;flex-wrap:wrap}.logo{font-weight:900;letter-spacing:.17em;font-size:27px;color:#b7f3d9}.tag{font-size:11px;color:#9bb2b7;letter-spacing:.08em}.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.nav button,.ghost{background:#24343f;color:#d6e5e3;padding:10px 14px;border-radius:12px}.nav button:hover,.ghost:hover{background:#35505a}.primary{background:#639987;color:#081f1c;padding:13px 22px;border-radius:13px;font-weight:800}.primary:hover{background:#8ac1ad}.panel{background:#192832;border:1px solid #2a4149;border-radius:22px;padding:24px;box-shadow:0 14px 38px #0002}.hero{text-align:center;margin:65px auto 25px;max-width:650px}.hero h1{font-size:clamp(28px,5vw,52px);margin:10px 0}.hero p{color:#b1c6c8;line-height:1.8}.center{text-align:center}.muted{color:#9bb2b7}.small{font-size:12px}.section{margin:28px 0 15px}.moods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.mood{background:#22343e;color:#d9e8e8;padding:17px 8px;border-radius:14px;border:1px solid #314952}.mood.active{border-color:#8cd6b7;background:#28544d;color:white}.stack{display:grid;gap:14px}.row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.input{width:100%;padding:13px 15px;background:#101e27;color:white;border:1px solid #3b5158;border-radius:12px;outline:none}.input:focus{border-color:#82c7b1}.label{display:block;font-size:13px;color:#b1c7c9;margin:0 0 8px}.pill{display:inline-block;border-radius:99px;padding:6px 10px;background:#2d4b49;color:#b8e7d5;font-size:12px}.notice{background:#273e45;border:1px solid #52716c;border-radius:14px;padding:15px;color:#d4e7e3;line-height:1.6}.avatar{width:84px;height:84px;background:linear-gradient(145deg,#558f85,#273f52);border-radius:50%;display:grid;place-items:center;font-size:35px;margin:0 auto 8px;position:relative}.lv{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#b5e9d2;color:#0b2624;font-size:11px;font-weight:900;border-radius:10px;padding:4px 9px}.profile{text-align:center}.profile h2{margin:12px 0 4px}.badge{font-size:12px;letter-spacing:.16em;color:#e5bb8d}.timer{font-size:38px;font-weight:900;color:#b7f3d9;font-variant-numeric:tabular-nums}.video{width:100%;aspect-ratio:16/9;background:#09151d;border-radius:16px;overflow:hidden;border:1px solid #38515a}.video iframe{width:100%;height:100%;border:0}.reactions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.reaction{background:#293a44;color:#d9e5e6;padding:13px 7px;border-radius:12px;border:1px solid transparent}.reaction.active{border-color:#9dd8c1;background:#305b50}.stars{display:flex;gap:7px;justify-content:center}.star{font-size:36px;color:#53616c;background:none;padding:0 3px}.star.active{color:#efc16c}.ranklist{max-height:240px;overflow-y:auto}.rankrow{padding:9px 0;border-bottom:1px solid #31434b;display:flex;justify-content:space-between;gap:12px}.rankrow.mine{color:#b7f3d9}.rankpopup{position:absolute;right:0;top:49px;z-index:20;width:min(340px,90vw);background:#1d3039;border:1px solid #47655f;border-radius:17px;box-shadow:0 15px 35px #0009;padding:16px}.rankfooter{padding:13px;background:#2c4d48;border-radius:10px;margin-top:10px}.relative{position:relative}.error{color:#ff9b9b}.success{color:#a6e4c5}.spacer{height:20px}footer{text-align:center;margin-top:60px;font-size:12px;color:#718b91}@media(max-width:720px){.grid2{grid-template-columns:1fr}.moods{grid-template-columns:repeat(2,1fr)}.reactions{grid-template-columns:repeat(2,1fr)}.panel{padding:17px}.hero{margin-top:32px}.timer{font-size:29px}}

/* FIVEO v0.1.3: visible seasonal rank tags */
.rank-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;border:1px solid currentColor;font-size:12px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.rank-zero{color:#aab1ba}.rank-spark{color:#c68b60}.rank-pulse{color:#65b7a4}.rank-wave{color:#6aa9e9}.rank-echo{color:#a78bfa}.rank-nova{color:#e88ed0}.rank-orbit{color:#e7bf70}.rank-fiveo{color:#b7f3d9;box-shadow:0 0 12px #63998755}
.rankrow{gap:8px}.rankrow>span:last-child{display:flex;align-items:center;gap:5px}
/* FIVEO v0.2 — UI OVERHAUL */
:root{font-family:Inter,'Segoe UI','Noto Sans KR',system-ui,sans-serif;color:#eaf3f1;background:#101923}body{background:radial-gradient(ellipse at 52% -20%,#294d4c 0,transparent 58%),#101923}button{transition:background .2s,transform .16s,border-color .2s}button:not(:disabled):active{transform:scale(.965)}.wrap{max-width:1140px}.ico{flex-shrink:0;vertical-align:middle}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid #557c71;background:#243e3b;color:#b7f3d9;border-radius:13px}.nav button{display:inline-flex;align-items:center;gap:7px}.nav button.active{background:#365b50;color:#c7f6e3}.sound-toggle{border:1px solid #3c5c56!important;min-width:70px}.sound-toggle span{font-size:10px;letter-spacing:.1em}.hero{margin:72px auto 33px}.hero h1{font-weight:850;letter-spacing:-.055em;line-height:1.17}.hero h1 em{font-style:normal;color:#8cc4ae}.eyebrow{color:#a6d5c1;font-size:11px;letter-spacing:.22em;font-weight:800}.hero .eyebrow{display:flex;justify-content:center;align-items:center;gap:8px}.panel{background:linear-gradient(155deg,#1b2d37,#16252f);border:1px solid #365059;box-shadow:0 18px 45px #050e1840}.section-heading{display:flex;align-items:center;gap:12px;color:#9bd1bb}.section-heading h2,.section-heading h3{color:#e8f2ee;margin:0}.section-heading p{margin:4px 0 0}.signup-panel{max-width:560px;margin:auto}.signup-panel .section-heading{margin-bottom:23px}.signup-panel .primary{width:100%;display:flex;justify-content:center;align-items:center;gap:12px}.lobby-panel{padding:28px}.lobby-panel .section-heading{margin-bottom:22px}.moods{gap:12px}.mood{min-height:118px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;position:relative;border-radius:18px;background:#1e303a;font-weight:650}.mood-symbol{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#2c4648;color:#a9dfc9}.mood.active .mood-symbol{background:#639987;color:#0e2925}.selected-dot{position:absolute;right:12px;top:12px;width:7px;height:7px;border-radius:50%;background:#b7f3d9;box-shadow:0 0 12px #b7f3d9}.cta-space{margin-top:30px}.primary.big{display:inline-flex;align-items:center;justify-content:center;gap:13px;font-size:15px;padding:17px 27px;min-width:250px}.waiting-indicator{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:15px;background:#29433f;color:#c4f2dd}.pulse-dot{width:10px;height:10px;background:#9ee8c9;border-radius:50%;box-shadow:0 0 0 6px #9ee8c920;animation:pulse 1.5s infinite}.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:20px}.quick-stats>div{border:1px solid #344c53;background:#1a2a34;padding:19px 22px;border-radius:17px;display:flex;justify-content:space-between;align-items:center;gap:8px}.quick-stats span,.stat-card>span{color:#91aeb3;font-size:11px;letter-spacing:.1em;font-weight:750}.quick-stats strong{font-size:19px}.page-title{text-align:center;margin:58px 0 35px}.page-title h1{font-size:clamp(31px,5vw,48px);letter-spacing:-.05em;margin:10px 0}.archive-top{display:flex;gap:25px;align-items:center;padding:25px 30px}.archive-medal{width:83px;height:83px;border-radius:22px;background:linear-gradient(145deg,#386d5c,#223c42);color:#b8e8d2;display:grid;place-items:center;border:1px solid #598d7a}.archive-overview{flex:1}.archive-count{margin:4px 0 12px}.archive-count strong{font-size:36px}.archive-count span{color:#9eb5b9;font-size:12px}.progress{height:8px;border-radius:50px;background:#30434b;overflow:hidden}.progress>span{height:100%;display:block;background:linear-gradient(90deg,#639987,#b7f3d9);border-radius:50px;transition:width .4s}.title-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.title-card{min-height:250px;background:linear-gradient(150deg,#20343e,#182731);border:1px solid #3b5857;border-radius:21px;padding:19px;display:flex;align-items:center;flex-direction:column;text-align:center}.title-card.locked{filter:saturate(.6);border-color:#30434a}.title-card-top{width:100%;display:flex;justify-content:space-between;align-items:center;color:#95c9b6;font-size:10px;letter-spacing:.12em;font-weight:850}.title-card.locked .title-card-top{color:#7d939d}.title-art{width:77px;height:77px;margin:12px auto 13px;border-radius:22px;display:grid;place-items:center;color:#b7f3d9;background:radial-gradient(circle,#3b6356,#223b40);box-shadow:0 0 26px #63998718}.title-card.locked .title-art{color:#748b93;background:#23323b;box-shadow:none}.title-card strong{font-size:14px;letter-spacing:.06em}.title-card p{font-size:12px;color:#a2b7bb;min-height:35px;margin:9px 0 13px}.title-card .progress{width:100%;margin-top:auto}.title-progress{font-size:11px;color:#9dbcb2;margin-top:8px}.profile-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.profile-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:450px}.rank-emblem{display:flex;align-items:center;gap:8px;border:1px solid currentColor;padding:8px 17px;border-radius:30px;margin-bottom:28px;letter-spacing:.16em}.avatar-big{width:115px;height:115px;color:#b7f3d9}.profile-card h2{font-size:26px;margin:24px 0 6px}.mood-chip{margin:18px 0 8px;background:#2c4744;color:#b9e6d5;border-radius:30px;padding:9px 15px;display:flex;align-items:center;gap:8px;font-size:13px}.equipped{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:13px}.title-chip{display:flex;align-items:center;gap:5px;border:1px solid #48655e;border-radius:40px;padding:7px 10px;font-size:11px;color:#c4e5d9}.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stat-card{background:#1b2c36;border:1px solid #355058;border-radius:19px;padding:20px;display:flex;flex-direction:column;gap:12px;justify-content:center}.stat-card strong{font-size:31px;line-height:1}.stat-card strong small{font-size:12px;color:#a4cbb9}.stat-card>small{color:#9bb3b8}.results-wrap{max-width:950px;margin:auto}.result-head{text-align:center;margin:52px 0 32px}.result-symbol{display:grid;place-items:center;margin:15px auto;width:86px;height:86px;color:#b7f3d9;background:radial-gradient(circle,#497b68,#1c363b);border:1px solid #6ba78e;border-radius:50%;box-shadow:0 0 40px #63998733;animation:reveal .65s both}.result-head h1{font-size:clamp(31px,5vw,52px);letter-spacing:-.06em;margin:9px 0}.result-head p{color:#9eb8ba}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.result-card{background:#1d303b;border:1px solid #39545c;border-radius:22px;padding:25px;text-align:center;animation:reveal .6s both}.result-card.accent{border-color:#639987;animation-delay:.16s}.result-face{margin:18px auto;color:#b7f3d9}.result-card h3{margin:8px 0 13px;min-height:27px}.result-stars{font-size:28px;letter-spacing:3px;color:#e7bf70}.result-card small{display:block;color:#91a9b1;margin-top:14px}.rewards-panel{margin-top:18px;padding:26px}.reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:21px 0}.reward-cell{padding:22px;background:#142630;border-radius:17px;border:1px solid #35545a;display:flex;flex-direction:column;gap:10px}.reward-cell>span{font-size:11px;color:#99b9b9;letter-spacing:.12em}.reward-cell strong{font-size:38px;font-variant-numeric:tabular-nums;letter-spacing:-.05em}.reward-gain{color:#b7f3d9;font-size:14px}.reward-meter{height:5px;border-radius:10px;background:#30464c;overflow:hidden}.reward-meter i{display:block;height:100%;background:#8ed6b7;animation:meterfill 1.4s .1s both}.reward-summary{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #344e53;padding-top:18px}.reward-summary>span{display:flex;align-items:center;gap:8px}.reward-summary b{color:#b7f3d9}.new-titles{margin-top:15px;padding:14px;background:#2b4d44;color:#d1f5e5;border-radius:12px;display:flex;align-items:center;gap:9px;animation:reveal .6s .7s both}.rankrow>span:last-child{font-size:11px}.rankpopup{width:min(410px,94vw)}@keyframes reveal{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes meterfill{from{width:0}to{width:100%}}@keyframes pulse{50%{box-shadow:0 0 0 13px #9ee8c900}}@media(max-width:750px){.title-grid{grid-template-columns:repeat(2,1fr)}.profile-layout{grid-template-columns:1fr}.quick-stats{grid-template-columns:1fr}.result-grid,.reward-grid{grid-template-columns:1fr}.archive-top{padding:17px;gap:15px}.archive-medal{width:65px;height:65px}.mood{min-height:104px}}

/* v0.2.1 한국어 UI, 컴팩트 국가 탭, 장착 가능한 칭호 */
.rank-filters{display:inline-flex;gap:3px;margin:12px 0;padding:4px;background:#12252e;border:1px solid #36514d;border-radius:11px;width:auto;flex-wrap:nowrap}
.rank-filters .rank-filter{padding:6px 12px;min-width:52px;border-radius:8px;color:#9db7b3;background:transparent;font-size:12px;font-weight:700;justify-content:center}
.rank-filters .rank-filter.selected{background:#639987;color:#102b27}
.rank-filters .rank-filter:hover:not(.selected){background:#29453f}
.rankpopup{max-width:calc(100vw - 25px)}
.title-card{position:relative;overflow:visible;isolation:isolate}
.title-card:hover,.title-card:focus-within,.title-card:focus{z-index:5;border-color:#a2e1c6;box-shadow:0 8px 32px #0006}
.title-card.is-equipped{border-color:#8edfc0;background:linear-gradient(150deg,#244b43,#182d32)}
.title-tooltip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%,5px);width:245px;max-width:90vw;display:flex;flex-direction:column;gap:5px;padding:13px 15px;text-align:left;background:#0e2029;border:1px solid #81bda6;border-radius:13px;box-shadow:0 12px 28px #000a;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s;font-size:12px;color:#d6e9e2;z-index:20}
.title-tooltip b{color:#b7f3d9;font-size:13px}
.title-card:hover .title-tooltip,.title-card:focus-within .title-tooltip,.title-card:focus .title-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.equip-button{width:100%;margin-top:12px;padding:10px 8px;border-radius:10px;background:#639987;color:#10251f;font-weight:800;font-size:12px}
.equip-button.equipped{background:#334c4c;color:#c8e6dc;border:1px solid #639987}
.equip-locked{display:block;margin-top:12px;padding:10px;color:#718d91;font-size:12px}
.equip-summary{display:flex;align-items:center;gap:9px;margin:20px 0 4px;color:#c8e7da;font-size:13px;flex-wrap:wrap}
.equip-summary b{background:#2b4d43;padding:5px 9px;border-radius:8px}
.equip-summary span{color:#9cb6b8;font-size:12px}


/* v0.2.2: Bigger cinematic player, with evaluation below it.
   A full-width 16:9 player remains responsive on narrower screens. */
.wrap:has(.watch-layout){max-width:1440px}
.watch-layout{grid-template-columns:minmax(0,1fr);gap:18px}
.watch-player-panel{min-width:0;padding:18px}
.watch-player-panel .video{width:100%;aspect-ratio:16/9;border-radius:18px;min-height:0}
.watch-player-panel .video iframe{display:block;width:100%;height:100%}
.watch-layout>.panel:not(.watch-player-panel){width:100%}
@media(min-width:1100px){
  .watch-layout>.panel:not(.watch-player-panel){max-width:100%}
}
@media(max-width:720px){
  .wrap:has(.watch-layout){padding-left:12px;padding-right:12px}
  .watch-player-panel{padding:10px}
  .watch-player-panel .video{border-radius:12px}
}


/* v0.2.3: 우주 로비 — 홈에서만 배경 활성화, 클릭/스크롤 간섭 없음 */
.fiveo-starfield{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
body.cosmic-home{background:radial-gradient(ellipse at 50% 18%,#153e41 0%,#0c1829 48%,#060d1a 100%)}
body.cosmic-home .wrap{position:relative;z-index:1}
body.cosmic-home .hero{text-shadow:0 3px 24px #050b16a6}
body.cosmic-home .lobby-panel,body.cosmic-home .quick-stats>div{background:linear-gradient(145deg,#192d38eb,#12232fe8);backdrop-filter:blur(7px)}
@media(prefers-reduced-motion:reduce){body.cosmic-home .hero{text-shadow:none}}

/* v0.2.4: 실제 대기열에 들어간 이용자에게 전용 매칭 화면 표시 */
.searching-screen{min-height:67vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:15px;padding:40px 16px}
.searching-screen h1{margin:0;font-size:clamp(30px,5vw,48px);letter-spacing:-.04em}
.searching-screen p{margin:0}
.searching-orbit{position:relative;width:230px;height:230px;border:1px solid #63998755;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;box-shadow:0 0 0 32px #6399870c,0 0 0 65px #63998708,inset 0 0 50px #63998715;animation:orbitBreathe 3.4s ease-in-out infinite}
.searching-orbit:before{content:'';position:absolute;inset:22px;border:1px dashed #a0e2cc55;border-radius:50%;animation:orbitRotate 18s linear infinite}
.searching-core{width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#387567,#173b42);color:#c4fbe8;box-shadow:0 0 42px #63998777}
.orbit-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#b8f6e2;box-shadow:0 0 18px #a1eed6}
.orbit-dot-a{top:8px;left:50%}.orbit-dot-b{bottom:42px;right:4px;width:6px;height:6px}.orbit-dot-c{top:45px;left:10px;width:5px;height:5px}
.searching-ellipsis:after{content:' ';animation:searchDots 1.5s steps(4,end) infinite}
.searching-status{display:flex;align-items:center;gap:10px;border:1px solid #63998766;background:#17382e99;border-radius:999px;padding:11px 19px;color:#b8ebd9}
.searching-screen .ghost{margin-top:20px}
@keyframes orbitRotate{to{transform:rotate(360deg)}}
@keyframes orbitBreathe{50%{box-shadow:0 0 0 38px #6399870c,0 0 0 73px #63998708,inset 0 0 65px #63998728}}
@keyframes searchDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'...'}}
@media(prefers-reduced-motion:reduce){.searching-orbit,.searching-orbit:before,.searching-ellipsis:after{animation:none}}

/* v0.2.5 국가 국기 SVG + 시즌/레벨 순위 탭 */
.country-flag{display:inline-block;width:23px;height:16px;object-fit:cover;vertical-align:middle;flex:none;border:1px solid #84969d66;border-radius:2px;background:white}
.rank-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#12252e;border:1px solid #36514d;padding:4px;border-radius:11px;margin:13px 0 3px}
.rank-mode-tabs button{background:transparent;border:0;border-radius:8px;padding:9px 12px;color:#a5bdb8;font-size:12px;font-weight:750}
.rank-mode-tabs button.selected{background:#355e52;color:#e4fff3}
.rank-filters{gap:3px;display:flex;max-width:max-content}
.rank-filters .rank-filter{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:6px 10px;white-space:nowrap}
.rankrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 6px}
.rank-person{display:inline-flex;align-items:center;gap:7px;min-width:0;flex:1}
.rank-position{font-size:12px;color:#9ac5b4;min-width:29px}
.rank-nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.rank-value{display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
.rank-value small{font-size:10px;color:#a3b8bd}
.profile .avatar .country-flag{width:44px;height:30px;border-radius:4px}
@media(max-width:480px){.rankpopup{width:min(365px,95vw)}.rankrow{padding:9px 2px}.rank-value{gap:3px}.rank-value .rank-tag{font-size:10px;padding:3px 5px}}

/* v0.2.6: 랭크 및 장착 칭호 조건 툴팁 */
.rank-hover{position:relative;display:inline-flex;vertical-align:middle;cursor:help;outline-offset:4px}
.rank-hover-tip{display:none;position:absolute;z-index:120;top:calc(100% + 9px);left:50%;transform:translateX(-50%);width:315px;max-width:calc(100vw - 30px);padding:14px;background:#0c202a;border:1px solid #77aa98;border-radius:13px;box-shadow:0 14px 35px #000b;text-align:left;color:#e8f3ee;font-size:12px;letter-spacing:normal;white-space:normal;pointer-events:none}
.rank-hover:hover>.rank-hover-tip,.rank-hover:focus>.rank-hover-tip,.rank-hover:focus-within>.rank-hover-tip{display:grid;gap:6px}
.rank-hover-tip>b{font-size:14px;color:#c2f3df;margin-bottom:3px}.rank-hover-tip>small{color:#a6c7bf;font-size:11px;line-height:1.5}
.rank-rule{display:flex;align-items:center;gap:10px;padding:5px 7px;border-radius:6px}.rank-rule strong{min-width:55px;color:#d3e8e0}.rank-rule>span{color:#abc4c1;line-height:1.3}.rank-rule.current{background:#35635566;outline:1px solid #639987}.rank-rule.current strong{color:#b7f3d9}
.rankpopup .rank-hover-tip{left:auto;right:0;transform:none}
.title-chip-hover{position:relative;cursor:help;outline-offset:4px}
.title-chip-tip{display:none;position:absolute;z-index:110;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(300px,calc(100vw - 30px));padding:12px 15px;background:#0c202a;border:1px solid #77aa98;border-radius:12px;box-shadow:0 12px 28px #0009;text-align:left;white-space:normal;line-height:1.5;color:#dcefe7;pointer-events:none;font-size:12px;letter-spacing:normal}
.title-chip-hover:hover>.title-chip-tip,.title-chip-hover:focus>.title-chip-tip{display:grid;gap:5px}.title-chip-tip>b{color:#b7f3d9}.profile-card,.profile{overflow:visible}
@media(max-width:600px){.rank-hover-tip{left:0;transform:none}.rankpopup .rank-hover-tip{right:-12px}}

/* v0.2.7: 각 랭크별 고유 SVG 문양 */
.rank-tag{gap:5px}
.rank-tag .rank-icon{width:17px;height:17px;flex-shrink:0}
.rank-rule strong{display:flex;align-items:center;gap:7px;min-width:93px}
.rank-rule strong .rank-icon{width:19px;height:19px}
.rank-rule strong{white-space:nowrap}
.rank-rule{gap:5px}
.rank-emblem{border:0;padding:0}
.rank-emblem .rank-tag{font-size:15px;padding:8px 17px;gap:9px}
.rank-emblem .rank-icon{width:29px;height:29px}
.rank-zero{color:#a8b4bd}.rank-spark{color:#d89b69}.rank-pulse{color:#77c8a4}.rank-wave{color:#75b9ef}.rank-echo{color:#bd9cf4}.rank-nova{color:#f2a0d4}.rank-orbit{color:#efc873}.rank-fiveo{color:#b9f6df}

/* v0.2.8 자동재생 차단 시 직접 재생 */
.watch-player-panel .video{position:relative}
.autoplay-fallback[hidden]{display:none!important}
.autoplay-fallback{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#07131bd9;backdrop-filter:blur(5px);padding:18px}
.autoplay-fallback-content{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:#e8f5ef}
.autoplay-fallback-content p{margin:0;color:#b9cfc8;font-size:13px}
.autoplay-fallback-content button{font-size:15px}

/* v0.2.12: 문서 스크롤 금지, 콘텐츠 내부 스크롤 */
html,body{height:100%;width:100%;overflow:hidden!important;overscroll-behavior:none}
#app{height:100dvh;overflow:hidden}
.wrap{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:12px 20px 0;position:relative}
.wrap>header{flex:none;position:relative;z-index:30;padding-bottom:9px}
.app-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:0 2px 14px}
.wrap>footer{flex:none;padding:5px 0;font-size:10px;text-align:center}
/* 데스크톱 홈: 스크롤 없이 화면 안에 들어오도록 조밀하게 */
@media(min-width:950px) and (min-height:680px){
 .app-content:has(.lobby-panel) .hero{margin:13px auto 10px}
 .app-content:has(.lobby-panel) .hero h1{font-size:clamp(27px,3.6vh,43px);margin:5px 0}
 .app-content:has(.lobby-panel) .hero p{margin:5px 0;line-height:1.4}
 .app-content:has(.lobby-panel) .lobby-panel{padding:14px 20px}
 .app-content:has(.lobby-panel) .mood{min-height:64px;padding:8px 6px}
 .app-content:has(.lobby-panel) .mood-symbol{width:32px;height:32px}
 .app-content:has(.lobby-panel) .cta-space{margin-top:11px}
 .app-content:has(.lobby-panel) .quick-stats{margin-top:10px}
 .app-content:has(.lobby-panel) .quick-stats>div{padding:11px 14px}
}
.rank-hover-tip{z-index:9999!important;box-sizing:border-box;contain:paint;pointer-events:none}
.rankpopup{max-height:min(75dvh,600px);display:flex;flex-direction:column;overflow:hidden;z-index:100}
.rankpopup .ranklist{flex:1;min-height:0;overflow-y:auto}
.app-content:has(.title-grid) .title-grid{padding:8px 3px 22px}
.together-page{max-width:1050px;margin:15px auto;display:grid;gap:12px}
.together-page h2{margin:0}.together-page p{margin:4px 0}
.together-choices,.together-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.together-video{width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 270px);background:#07141d;border-radius:16px;overflow:hidden;border:1px solid #36524e}
.together-video iframe{width:100%;height:100%;border:0}
@media(max-width:750px){.wrap{padding:9px 10px 0}.app-content{padding:0 2px 10px}.together-video{max-height:none}}

/* v0.2.13: entire browser viewport fixed, only explicitly scrollable panels scroll */
html,body,#app{height:100%!important;max-height:100%!important;overflow:hidden!important}
.wrap{height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
.app-content{overflow:hidden!important;min-height:0;min-width:0}
.app-content:has(.title-grid){overflow-y:auto!important;overscroll-behavior:contain}
.home-fit{width:100%;transform-origin:top center}
.rank-hover-tip:not(.rank-portal){display:none!important}
.rank-portal{display:grid!important;gap:6px;box-sizing:border-box;contain:layout style paint;background:#0c202a;border:1px solid #77aa98;border-radius:13px;box-shadow:0 14px 35px #000a;padding:14px;color:#d6e9e2;font-size:12px}
.rank-portal>b{font-size:14px;color:#c2f3df}
.rank-portal>small{color:#a6c7bf;font-size:11px;line-height:1.5}
@media(max-height:540px){.app-content:has(.watch-layout),.app-content:has(.results-wrap),.app-content:has(.profile-layout){overflow-y:auto!important}}

/* v0.2.14: text country identifiers instead of malformed flag artwork */
.country-code{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:29px;height:21px;padding:0 5px;border:1px solid #628c85;background:#17372f;border-radius:6px;font-size:10px;line-height:1;font-weight:800;letter-spacing:.5px;color:#c7f4e2;vertical-align:middle}
.avatar .country-code{min-width:43px;height:30px;font-size:14px}
.rank-filters .country-code{min-width:25px;height:18px;font-size:9px}
/* v0.2.14: two-second search followed by an orbital flight transition */
.flight-screen{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;width:100%;height:100%;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 72% 43%,#1b5c59 0%,#102b3c 29%,#091725 70%);border-radius:22px;color:#e6fff7}
.flight-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.flight-stars i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#e1fff6;box-shadow:0 0 11px #b5f4e7;animation:flightWarp .85s linear infinite;animation-delay:var(--d)}
@keyframes flightWarp{0%{transform:translate(-110px,0) scaleX(1);opacity:0}25%{opacity:.95}100%{transform:translate(290px,0) scaleX(24);opacity:0}}
.flight-scene{position:relative;width:min(740px,95%);height:min(40vh,320px);flex:none}
.flight-origin{position:absolute;left:6%;top:55%;width:105px;height:105px;border-radius:50%;background:radial-gradient(circle at 30% 27%,#6dd7d3,#1c7477 45%,#082536 78%);box-shadow:0 0 35px #4ecdb455;animation:flightOrigin 1.7s ease-in forwards}
.flight-destination{position:absolute;right:13%;top:22%;width:180px;height:180px;animation:flightTarget 1.7s cubic-bezier(.2,.6,.3,1) forwards}
.flight-planet{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle at 34% 25%,#b7f5d7,#4d9c89 35%,#174656 65%,#091a2a);box-shadow:0 0 80px #62c6a266,0 0 20px #a9e8d366}
.flight-ring{position:absolute;left:-8%;top:43%;width:116%;height:25%;border:5px solid #94f1d3aa;border-radius:50%;transform:rotate(-22deg);box-shadow:0 0 15px #8de2cb66}
.flight-trail{position:absolute;left:23%;top:60%;width:46%;height:3px;transform:rotate(-12deg);background:linear-gradient(90deg,transparent,#6bf2d4,transparent);filter:drop-shadow(0 0 12px #76fbdc);animation:flightBeam 1.7s ease-out forwards}
.flight-ship{position:absolute;z-index:2;left:19%;top:58%;width:56px;height:56px;display:grid;place-items:center;color:#d9fff3;background:#639987;border-radius:50%;box-shadow:0 0 35px #76fbdc,0 0 75px #66eacb77;animation:flightShip 1.7s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes flightShip{0%{transform:translate(0,0) scale(.7);opacity:.6}55%{transform:translate(210px,-30px) scale(1.2);opacity:1}100%{transform:translate(410px,-60px) scale(.05);opacity:0}}
@keyframes flightOrigin{to{transform:translate(-120px,55px) scale(.25);opacity:.1}}
@keyframes flightTarget{0%{transform:scale(.55);opacity:.6}80%{transform:scale(1.15)}100%{transform:scale(3.4);opacity:0}}
@keyframes flightBeam{to{transform:rotate(-12deg) scaleX(1.8);opacity:0}}
.flight-message{position:relative;z-index:3;text-align:center;padding:0 14px;animation:flightText 1.7s ease-in-out both}
.flight-message h1{font-size:clamp(21px,3.8vw,36px);margin:10px 0}.flight-message p{color:#b8d8cf}
.flight-status{display:inline-flex;align-items:center;gap:9px;color:#a4e6cf;font-size:13px}
@keyframes flightText{0%{opacity:0;transform:translateY(15px)}25%,75%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.flight-screen *{animation:none!important}.flight-message{opacity:1!important}}
@media(max-width:650px){.flight-scene{transform:scale(.7);margin:-30px 0}.flight-message{margin-top:-25px}}

/* v0.2.15: 시선 동기화 */
.watch-along-invite{border:1px solid #639987;border-radius:14px;padding:15px;background:linear-gradient(140deg,#193c3a,#102b36);display:flex;flex-direction:column;gap:10px}
.watch-along-invite strong{font-size:15px}.watch-along-invite p{margin:0}
#watch-along-player{position:absolute;inset:0;width:100%;height:100%}
.video:has(#watch-along-player){position:relative;min-height:180px}
.watch-along-overlay{position:absolute;z-index:2;bottom:8px;left:8px;background:#102c34d9;color:#b9e9d8;padding:5px 10px;border-radius:7px;font-size:12px;pointer-events:none}

/* v0.2.16 compact title archive */
.app-content:has(.title-grid) .title-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:9px;padding:8px 5px 28px}
.app-content:has(.title-grid) .title-card{min-height:88px;padding:11px 12px;border-radius:12px;gap:8px;justify-content:space-between;align-items:stretch;text-align:left;isolation:auto}
.app-content:has(.title-grid) .title-card-top{font-size:9px;letter-spacing:.06em}
.app-content:has(.title-grid) .title-name{font-size:13px;line-height:1.25;letter-spacing:.015em;overflow-wrap:anywhere;color:#d9f3e8}
.app-content:has(.title-grid) .title-card.locked .title-name{color:#82969c}
.app-content:has(.title-grid) .equip-button{margin-top:0;padding:5px 8px;font-size:10px;border-radius:7px}
.app-content:has(.title-grid) .title-tooltip{position:fixed;bottom:auto;left:auto;top:var(--title-tip-y,50%);right:var(--title-tip-r,18px);transform:translateY(4px);width:260px;max-width:calc(100vw - 24px);z-index:9999}
.app-content:has(.title-grid) .title-card:hover .title-tooltip,.app-content:has(.title-grid) .title-card:focus-within .title-tooltip{transform:translateY(0)}
@media(max-width:500px){.app-content:has(.title-grid) .title-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.app-content:has(.title-grid) .title-card{padding:10px;min-height:82px}}

/* v0.2.17: body-level title tooltip escapes scrolling/clipped containers */
.app-content:has(.title-grid) .title-card .title-tooltip{display:none!important}
#fiveo-title-float{position:fixed;z-index:2147483000;box-sizing:border-box;width:260px;max-width:calc(100vw - 20px);padding:13px 15px;background:#0e2029;border:1px solid #81bda6;border-radius:13px;box-shadow:0 12px 28px #000a;color:#d6e9e2;font-size:12px;line-height:1.5;pointer-events:none;display:flex;flex-direction:column;gap:5px;overflow-wrap:anywhere}
#fiveo-title-float b{color:#b7f3d9;font-size:13px}
#fiveo-title-float .progress{width:100%;height:8px}
#fiveo-title-float[hidden]{display:none!important}

/* v0.2.18: Keep the outer game viewport fixed while allowing the entire
   match/watching content (including evaluation and exit controls) to scroll. */
.app-content:has(.watch-layout){
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  min-height:0;
  padding-bottom:32px;
}
/* Keep video readable without pushing the rating controls excessively far down. */
.app-content .watch-player-panel .video{
  width:100%;
  aspect-ratio:16 / 9;
  max-width:min(100%, calc((100dvh - 235px) * 16 / 9));
  margin-inline:auto;
}
@media(max-height:650px){
  .app-content .watch-player-panel .video{max-width:min(100%, calc((100dvh - 170px) * 16 / 9));}
}
@media(max-width:750px){
  .app-content:has(.watch-layout){padding-bottom:40px;}
  .app-content .watch-player-panel .video{max-width:100%;}
}

/* v0.2.21: mutual evaluation disclosure */
.mutual-rule{display:flex;align-items:center;gap:10px;margin:14px 0;line-height:1.6}.mutual-rule .ico,.mutual-note .ico{flex-shrink:0;color:#83c6ab}.mutual-note{display:flex;align-items:center;gap:8px;font-size:12px;color:#a9c9bc;line-height:1.5;margin:0 0 6px}


/* v0.2.22: desktop viewing uses a true side-by-side, viewport-fitted layout.
   No scrolling in the viewing screen; all actions remain visible at 100% zoom. */
.app-content:has(.watch-layout){
  display:flex;flex-direction:column;overflow:hidden!important;
  padding:4px 3px 8px!important;min-height:0;
}
.app-content:has(.watch-layout)>.section.row{flex:0 0 auto;margin:0 0 7px!important;padding:0!important}
.app-content:has(.watch-layout)>.section.row h2{font-size:17px!important}
.app-content:has(.watch-layout)>.spacer{display:none!important}
.app-content:has(.watch-layout)>.watch-layout{
  display:grid!important;grid-template-columns:minmax(0,1.22fr) minmax(320px,.78fr)!important;
  grid-template-rows:minmax(0,1fr);align-items:stretch;gap:12px;
  flex:1;min-height:0;margin:0!important;
}
.app-content:has(.watch-layout) .watch-layout>.panel{
  min-height:0;min-width:0;overflow:hidden;padding:12px!important;
  display:flex;flex-direction:column;gap:8px!important;
}
.app-content:has(.watch-layout) .watch-layout h3{font-size:15px;margin:0!important}
.app-content:has(.watch-layout) .watch-player-panel .video{
  width:100%;max-width:100%!important;min-height:0!important;
  aspect-ratio:16/9;max-height:min(100%,calc(100dvh - 190px));
  margin:0 auto!important;flex:0 1 auto;
}
.app-content:has(.watch-layout) .watch-player-panel .video iframe{height:100%;width:100%}
.app-content:has(.watch-layout) .watch-player-panel>.row:last-child{margin-top:auto;flex-wrap:wrap;gap:7px}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .reactions{gap:5px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .reaction{padding:7px 8px!important;font-size:12px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .stars{margin:0!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .star{font-size:25px!important;padding:2px 5px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .notice{padding:10px!important;margin:0!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .watch-along-invite{padding:9px!important;gap:5px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .watch-along-invite strong{font-size:13px}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .primary{padding:9px 12px!important}
/* Results are deliberately scrollable *inside* the app, not clipped by the fixed page. */
.app-content:has(.results-wrap){overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin;padding-bottom:30px!important}
.app-content:has(.results-wrap) .result-head{margin:14px 0 16px}
.app-content:has(.results-wrap) .result-symbol{width:54px;height:54px;margin:7px auto}
.app-content:has(.results-wrap) .result-symbol svg{width:30px;height:30px}
.app-content:has(.results-wrap) .result-head h1{font-size:34px;margin:4px 0}
.app-content:has(.results-wrap) .result-head p{margin:4px 0}
.app-content:has(.results-wrap) .result-card{padding:13px}
.app-content:has(.results-wrap) .result-face{margin:7px auto}
.app-content:has(.results-wrap) .result-face svg{width:30px;height:30px}
.app-content:has(.results-wrap) .result-stars{font-size:23px}
.app-content:has(.results-wrap) .rewards-panel{padding:16px;margin-top:12px}
.app-content:has(.results-wrap) .reward-grid{margin:10px 0}
.app-content:has(.results-wrap) .reward-cell{padding:12px}
.app-content:has(.results-wrap) .reward-cell strong{font-size:28px}
.app-content:has(.results-wrap)>.center.section{padding:12px 0!important}
@media(max-width:850px){
  .app-content:has(.watch-layout)>.watch-layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr);gap:7px}
  .app-content:has(.watch-layout) .watch-layout>.panel{padding:8px!important;gap:5px!important}
  .app-content:has(.watch-layout) .watch-player-panel .video{width:auto;max-width:100%;height:min(30dvh,260px);aspect-ratio:16/9}
  .app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .reactions{display:flex;flex-wrap:wrap}
}
@media(max-height:670px) and (min-width:851px){
  .app-content:has(.watch-layout) .watch-layout>.panel{padding:8px!important;gap:5px!important}
  .app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) p{margin:2px 0}
  .app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .reaction{padding:5px!important}
}

/* v0.2.23: no scrollbars anywhere, compact viewport-fitting layouts */
html,body,#app,.wrap,.app-content,.rankpopup,.rankpopup .ranklist{overflow:hidden!important;overscroll-behavior:none!important}
.app-content:has(.title-grid),.app-content:has(.results-wrap),.app-content:has(.watch-layout),.app-content:has(.profile-layout){overflow:hidden!important}
.app-content:has(.results-wrap){display:flex;flex-direction:column;padding:0 4px 4px!important}
.results-wrap{height:100%;min-height:0;display:flex;flex-direction:column;gap:clamp(3px,1vh,10px)}
.results-wrap .result-head{margin:0!important;flex:0 0 auto}
.results-wrap .result-head .result-symbol{width:36px;height:36px;margin:2px auto}
.results-wrap .result-head h1{font-size:clamp(22px,3.8vh,32px);margin:0}
.results-wrap .result-head p{font-size:12px;margin:0}
.results-wrap .result-grid{flex:0 1 auto;min-height:0;gap:10px}
.results-wrap .result-card{padding:8px!important}
.results-wrap .result-face{margin:1px auto!important}
.results-wrap .result-face svg{height:24px;width:24px}
.results-wrap .result-stars{font-size:18px!important}
.results-wrap .rewards-panel{margin:0!important;padding:9px 12px!important;flex:0 1 auto;min-height:0}
.results-wrap .reward-grid{margin:5px 0!important;gap:8px}
.results-wrap .reward-cell{padding:7px!important}
.results-wrap .reward-cell strong{font-size:22px!important}
.results-wrap>.center.section{padding:2px 0!important;flex:0 0 auto}
.results-wrap .primary.big{padding:10px 22px}
.app-content:has(.watch-layout)>.watch-layout{grid-template-columns:minmax(0,1.75fr) minmax(290px,.75fr)!important;gap:9px!important}
.app-content:has(.watch-layout) .watch-player-panel .video{width:100%!important;aspect-ratio:16/9!important;max-height:calc(100dvh - 135px)!important;object-fit:contain}
.app-content:has(.watch-layout) .watch-layout>.panel{padding:9px!important;gap:5px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .reactions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .reaction{padding:5px!important;font-size:11px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) p{margin:0!important}
.app-content:has(.title-grid){display:flex;flex-direction:column;gap:5px;padding:2px!important}
.app-content:has(.title-grid) .page-title{margin:0!important}
.app-content:has(.title-grid) .page-title h1{font-size:24px;margin:0}
.app-content:has(.title-grid) .page-title p{display:none}
.app-content:has(.title-grid) .archive-top{padding:8px!important;min-height:0}
.app-content:has(.title-grid) .section-heading.section{margin:0!important}
.app-content:has(.title-grid) .title-grid{flex:1;min-height:0;overflow:hidden!important;align-content:start;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;padding:2px!important}
.app-content:has(.title-grid) .title-card{min-height:0;padding:7px 9px;gap:4px}
.app-content:has(.title-grid) .title-name{font-size:12px}
.legend-aura{position:relative!important;isolation:isolate;border:1px solid #f7e6a1!important;box-shadow:0 0 7px #ffe48d,0 0 18px #f2b9ff,0 0 28px #79d6ff,inset 0 0 12px #f8da9440!important;animation:legendGlow 2.2s ease-in-out infinite alternate}
.legend-aura:before{content:'';position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;z-index:-1;background:conic-gradient(from 0deg,#ffe997aa,#a8ffff77,#f6a9ff99,#ffe997aa);filter:blur(8px);animation:legendRotate 4s linear infinite}
@keyframes legendGlow{from{filter:brightness(.96);box-shadow:0 0 8px #ffde7b,0 0 17px #bca5ff}to{filter:brightness(1.2);box-shadow:0 0 14px #fff1aa,0 0 28px #f4a2ff,0 0 38px #84dfff}}
@keyframes legendRotate{to{transform:rotate(360deg)}}
@media(max-width:850px){.app-content:has(.watch-layout)>.watch-layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1.25fr) minmax(0,.75fr)!important}.app-content:has(.watch-layout) .watch-player-panel .video{max-height:100%!important}}
@media(prefers-reduced-motion:reduce){.legend-aura,.legend-aura:before{animation:none}}

/* v0.2.24: interactive collectible title cards */
.title-grid .title-card{cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;}
.title-grid .title-card:hover{border-color:#a9e6d1;box-shadow:0 0 18px #63998735;}
.fiveo-card-modal{position:fixed;inset:0;z-index:99999;background:#071017d9;display:flex;align-items:center;justify-content:center;perspective:1000px;backdrop-filter:blur(12px);}
.fiveo-card-scene{width:min(320px,75vw);height:min(450px,72vh);perspective:1000px;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .14s ease;--mx:50%;--my:50%;}
.fiveo-flip-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.7,.2,1);cursor:pointer;outline:none;}
.fiveo-flip-card.flipped{transform:rotateY(180deg)}
.fiveo-card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:22px;border:2px solid #78b5a5;background:radial-gradient(ellipse at 40% 18%,#385d59,#172d3a 58%,#101b2b);box-shadow:0 25px 55px #000a,0 0 28px #63998745;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:17px;padding:25px;text-align:center;color:#e9fff5;}
.fiveo-card-back{transform:rotateY(180deg);background:radial-gradient(ellipse at 65% 15%,#34504f,#162b36 65%,#0c1926);}
.fiveo-card-kicker{position:absolute;top:22px;font-size:10px;font-weight:800;letter-spacing:.19em;color:#b5d8c9;}
.fiveo-card-glyph{font-size:88px;color:#b8ffe1;text-shadow:0 0 22px #71e5b7,0 0 55px #639987;line-height:1;}
.fiveo-card-name{font-size:clamp(22px,3vw,29px);font-weight:850;letter-spacing:.02em;word-break:keep-all;}
.fiveo-card-caption{font-size:12px;letter-spacing:.15em;color:#c2e6da;}
.fiveo-card-hint{position:absolute;bottom:22px;font-size:11px;color:#b5ccc6;}
.fiveo-card-sheen{position:absolute;inset:-5%;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffffff55,transparent 42%);mix-blend-mode:screen;}
.fiveo-card-status{padding:7px 15px;border-radius:50px;border:1px solid #657984;color:#b0bfc7;font-weight:750;font-size:13px;}
.fiveo-card-status.is-got{border-color:#8ed5b7;color:#b8f7da;background:#63998724;}
.fiveo-card-condition-label{font-size:11px;color:#8fb8b1;letter-spacing:.1em;}
.fiveo-card-condition{font-size:16px;font-weight:700;line-height:1.6;overflow-wrap:anywhere;}
.fiveo-card-meter{width:100%;height:7px;background:#344850;border-radius:20px;overflow:hidden;}
.fiveo-card-meter span{height:100%;display:block;background:linear-gradient(90deg,#639987,#c4ffe7);}
.fiveo-card-progress{font-size:12px;color:#b2d3c8;}
.fiveo-card-close{position:fixed;top:22px;right:25px;border:1px solid #7f9e9a;border-radius:50%;background:#20333c;color:white;width:39px;height:39px;font-size:25px;cursor:pointer;}
.fiveo-flip-card.fiveo-legend .fiveo-card-face{border-color:#e4c0ff;box-shadow:0 20px 55px #000a,0 0 25px #b28cff,0 0 55px #79d9ff88;background:linear-gradient(140deg,#30274c,#173747 50%,#3a274d);}
.fiveo-flip-card.fiveo-legend .fiveo-card-face:before{content:'';position:absolute;inset:-50%;background:conic-gradient(transparent,#88f9ff33,#e2b4ff55,#ffe5a244,transparent);animation:fiveo-card-aura 7s linear infinite;pointer-events:none;}
.fiveo-flip-card.fiveo-legend .fiveo-card-face>*{position:relative;z-index:1;}
.fiveo-flip-card.fiveo-legend .fiveo-card-glyph{color:#fff1d7;text-shadow:0 0 24px #ffda90,0 0 52px #a890ff;}
@keyframes fiveo-card-aura{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.fiveo-flip-card,.fiveo-card-scene{transition:none}.fiveo-flip-card.fiveo-legend .fiveo-card-face:before{animation:none}}

/* v0.2.26: equal-size archive tiles and contained legendary sheen */
.app-content:has(.title-grid) .title-grid{grid-auto-rows:88px!important;align-content:start!important;min-height:0!important;overflow:hidden!important;}
.app-content:has(.title-grid) .title-card{height:88px!important;min-height:88px!important;max-height:88px!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important;position:relative;isolation:isolate;}
.app-content:has(.title-grid) .title-card>*{position:relative;z-index:2;}
.app-content:has(.title-grid) .title-card.legend-archive{border-color:#b8a4db!important;box-shadow:inset 0 0 14px #ba8bff26,0 0 8px #c6a1ff40!important;background:linear-gradient(125deg,#2d2843,#1b3340 58%,#302640)!important;}
.app-content:has(.title-grid) .title-card.legend-archive::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 15%,#c9b7ff16 36%,#e4e8ff44 49%,#8edff522 58%,transparent 76%);background-size:240% 100%;animation:fiveo-archive-shine 6s ease-in-out infinite;pointer-events:none;z-index:0;}
.app-content:has(.title-grid) .title-card.legend-archive::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 12px #bba0ff33;pointer-events:none;z-index:1;}
@keyframes fiveo-archive-shine{0%,25%{background-position:140% 0}70%,100%{background-position:-140% 0}}
.app-content:has(.title-grid) .title-card.legend-archive.locked{filter:none!important;}
.app-content:has(.title-grid) .title-card.legend-archive .title-name{color:#e8d9ff!important;text-shadow:0 0 9px #b58fff65;}
.app-content:has(.title-grid) .title-card .title-tooltip{display:none!important;}
.title-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;flex-shrink:0;padding:3px 6px;font-size:12px;color:#b9d7cb;}
.title-filters label{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.title-filters select{background:#1b303b;border:1px solid #55756c;border-radius:8px;padding:5px 9px;color:#e2f7ed;font-size:12px;}
.title-filters input{accent-color:#639987;}
.title-filter-count{margin-left:auto;color:#8db4a5;}
@media(prefers-reduced-motion:reduce){.app-content:has(.title-grid) .title-card.legend-archive::before{animation:none}}

/* v0.2.27: each title has its own visible icon, including locked titles */
.app-content:has(.title-grid) .title-card{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:5px 8px!important;}
.app-content:has(.title-grid) .title-card .title-card-top{position:absolute!important;top:5px;left:8px;right:8px;width:auto!important;font-size:9px;}
.app-content:has(.title-grid) .title-card .title-archive-icon{display:grid;place-items:center;flex:0 0 auto;height:32px;width:32px;color:#9edfc5;filter:drop-shadow(0 0 5px #63998744);}
.app-content:has(.title-grid) .title-card.locked .title-archive-icon{color:#8da3ac;filter:none;}
.app-content:has(.title-grid) .title-card.legend-archive .title-archive-icon{color:#e8c7ff;filter:drop-shadow(0 0 7px #bb94ff);}
.app-content:has(.title-grid) .title-card .title-name{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.app-content:has(.title-grid) .title-card .equip-button{position:absolute!important;bottom:2px;right:5px;font-size:9px!important;padding:2px 5px!important;}
.fiveo-card-glyph{display:grid;place-items:center;}
.fiveo-card-glyph svg{width:84px;height:84px;filter:drop-shadow(0 0 12px #7ce5b6);}
.fiveo-flip-card.fiveo-legend .fiveo-card-glyph svg{filter:drop-shadow(0 0 18px #d4a5ff);}

/* v0.2.28: confine ALL legendary light to the card/chip outline. */
.legend-aura{overflow:hidden!important;clip-path:inset(0 round 10px);box-shadow:inset 0 0 12px #ffe48d55,inset 0 0 18px #bfa3ff44!important;filter:none!important;}
.legend-aura::before{inset:0!important;z-index:0!important;filter:none!important;opacity:.35!important;border-radius:inherit!important;}
.legend-aura>*{position:relative;z-index:1;}
@keyframes legendGlow{from{box-shadow:inset 0 0 7px #ffe48d44,inset 0 0 12px #bca5ff44}to{box-shadow:inset 0 0 13px #ffe48d99,inset 0 0 22px #bca5ff88}}
.title-chip.legend-aura,.title-chip-hover.legend-aura{clip-path:inset(0 round 999px);border-radius:999px;}
.title-card.legend-aura{clip-path:inset(0 round 12px);}
/* Preserve floating hover descriptions while clipping only the light-emitting chip. */
.title-chip.legend-aura .title-chip-tip{display:none!important;}
.title-chip.legend-aura:hover .title-chip-tip{display:none!important;}
.app-content:has(.title-grid) .title-card.legend-archive{box-shadow:inset 0 0 14px #ba8bff35!important;}

/* v0.2.29: visibly locked legendary titles, consistent card hint placement */
.app-content:has(.title-grid) .title-card.legend-archive.locked{background:linear-gradient(135deg,#1a1b25,#171f29)!important;border-color:#41404c!important;box-shadow:inset 0 0 8px #0009!important;}
.app-content:has(.title-grid) .title-card.legend-archive.locked::before{animation:none!important;opacity:.06!important;}
.app-content:has(.title-grid) .title-card.legend-archive.locked::after{opacity:.12!important;}
.app-content:has(.title-grid) .title-card.legend-archive.locked .title-name{color:#82818f!important;text-shadow:none!important;}
.app-content:has(.title-grid) .title-card.legend-archive.locked .title-archive-icon{color:#696674!important;filter:none!important;}
.fiveo-flip-card.fiveo-unearned.fiveo-legend .fiveo-card-face{background:linear-gradient(140deg,#20202b,#15252e 55%,#25202e)!important;border-color:#5b5268!important;box-shadow:0 18px 48px #0009!important;}
.fiveo-flip-card.fiveo-unearned.fiveo-legend .fiveo-card-face:before{opacity:.08;animation:none!important;}
.fiveo-flip-card.fiveo-unearned.fiveo-legend .fiveo-card-glyph{color:#817b90;text-shadow:none;filter:none;}
.fiveo-card-face .fiveo-card-hint{position:absolute!important;bottom:22px!important;top:auto!important;left:0!important;right:0!important;margin:0!important;z-index:4!important;transform:none!important;}
.fiveo-flip-card.fiveo-legend .fiveo-card-face{justify-content:center!important;}

/* v0.2.30 — 12 SVG reaction cards, compact in the no-scroll video stage */
.reactions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
.reaction{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:51px;padding:5px 3px!important;line-height:1.2;font-size:10px!important;text-align:center;overflow:hidden}
.reaction .ico{flex:none;color:#89cbb7;max-height:21px}
.reaction span{display:block;overflow-wrap:anywhere}
.reaction.active .ico{color:#bdf9da;filter:drop-shadow(0 0 3px #63998766)}
@media(max-height:780px){.reaction{min-height:39px!important;padding:3px!important;gap:2px}.reaction .ico{height:16px;width:16px}}

/* v0.2.31: quarterly season identity and viewport-safe hover/focus help */
.season-hover{display:inline-flex;align-items:center;vertical-align:middle;position:relative;cursor:help;outline-offset:4px;max-width:100%}
.season-label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:#b5e7d3;font-size:inherit;font-weight:700}
.season-help{display:inline-grid;place-items:center;width:17px;height:17px;border:1px solid #78ad9f;border-radius:50%;font-size:11px;color:#b3e4d5}
.season-tooltip{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 30px);overflow:auto;z-index:999999;padding:18px;border:1px solid #639987;border-radius:14px;background:#101f2b;box-shadow:0 12px 65px #000d;color:#d6e9e8;font-size:12px;font-weight:400;line-height:1.55;text-align:left;white-space:normal;pointer-events:none;flex-direction:column;gap:7px}
.season-tooltip strong{color:#e5fff0;font-size:16px}.season-current{color:#a6e8c9;font-weight:700}.season-divider{height:1px;background:#335149;margin:4px 0}
.season-hover:hover .season-tooltip,.season-hover:focus .season-tooltip,.season-hover:focus-within .season-tooltip{display:flex}

/* v0.2.32 — precise fuel meter */
.fuel-rating{display:grid;gap:5px;background:#112631;border:1px solid #41695f;border-radius:14px;padding:10px 12px;min-width:0;outline-offset:3px}
.fuel-top,.fuel-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.fuel-top{color:#a8d7c4;font-size:11px;font-weight:800}.fuel-top strong{font-size:23px;color:#c0ffe0;font-variant-numeric:tabular-nums}.fuel-top small{font-size:10px;color:#95b7af}.fuel-bottom{font-size:9px;color:#91aeb3}.fuel-track{height:17px;background:#263e49;border-radius:30px;overflow:hidden;position:relative;isolation:isolate}.fuel-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#317c91,#5cbca8,#b5f6cc);transition:width .12s;position:relative;overflow:hidden}.fuel-fill:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 10%,#ffffff55 45%,transparent 65%);background-size:180% 100%;animation:fuel-sheen 2s linear infinite}@keyframes fuel-sheen{to{background-position:-180% 0}}#fuel-slider{width:100%;height:12px;margin:0;accent-color:#87cdb3;cursor:ew-resize}.fuel-help{text-align:center;font-size:10px;color:#91aeb3}
/* Same internal aurora sheen as archive cards; faster cycles on equipped chips in profile and match. */
.title-chip.legend-aura{position:relative;isolation:isolate;overflow:hidden!important;clip-path:inset(0 round 999px);background:linear-gradient(125deg,#302941,#203b43 58%,#322746)!important;border:1px solid #a991d3!important;box-shadow:inset 0 0 12px #c4a1ff55!important}
.title-chip.legend-aura::before{content:'';position:absolute!important;inset:0!important;border-radius:inherit!important;background:linear-gradient(115deg,transparent 12%,#d4bfff33 35%,#ffffff77 50%,#91e8e955 62%,transparent 83%);background-size:240% 100%;animation:fiveo-archive-shine 1.8s linear infinite!important;opacity:.8!important;pointer-events:none;z-index:0!important}
.title-chip.legend-aura>*{position:relative;z-index:1}.app-content:has(.title-grid) .title-card.legend-archive:not(.locked)::before{animation-duration:2.2s!important}
@media(prefers-reduced-motion:reduce){.title-chip.legend-aura::before{animation:none!important}}

/* v0.2.33: tooltips are portaled outside the clipped legendary glow. */
.title-chip-hover>.title-chip-tip{display:none!important}
.fiveo-title-floating-tip{position:fixed;z-index:2147483000;display:grid;gap:5px;max-width:min(310px,calc(100vw - 24px));min-width:180px;width:max-content;padding:12px 15px;background:#0c202a;border:1px solid #77aa98;border-radius:12px;box-shadow:0 12px 28px #000a;text-align:left;white-space:normal;line-height:1.5;color:#dcefe7;pointer-events:none;font-size:12px;letter-spacing:normal}
.fiveo-title-floating-tip>b{color:#b7f3d9}
.lang-switch{border:1px solid #639987!important;color:#b8f7d6!important;border-radius:10px!important;padding:8px 10px!important;font-size:12px!important;white-space:nowrap}

/* v0.2.34: 16 signals fit in four columns, with responsive labels. */
.moods{grid-template-columns:repeat(4,minmax(0,1fr))}.mood{min-width:0;min-height:86px;padding:9px 7px;gap:6px;font-size:clamp(10px,1.05vw,13px);line-height:1.3}.mood-symbol{width:34px;height:34px}.mood-symbol .ico{width:22px;height:22px}
@media(max-width:650px){.moods{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.mood{font-size:10px;min-height:82px;padding:6px 3px}.mood-symbol{width:27px;height:27px}.mood-symbol .ico{width:18px;height:18px}}

/* v0.2.35: fit 16 mood signals without cutting off the bottom controls. */
.app-content:has(.lobby-panel) .hero{margin:5px auto 5px!important}
.app-content:has(.lobby-panel) .hero h1{font-size:clamp(22px,3.1vh,35px)!important;margin:2px 0!important;line-height:1.1}
.app-content:has(.lobby-panel) .hero p{margin:2px 0!important;line-height:1.2;font-size:12px}
.app-content:has(.lobby-panel) .lobby-panel{padding:10px 14px!important}
.app-content:has(.lobby-panel) .section-heading{margin-bottom:7px}
.app-content:has(.lobby-panel) .moods{gap:5px!important}
.app-content:has(.lobby-panel) .mood{min-height:48px!important;padding:4px 3px!important;gap:3px!important;line-height:1.13!important}
.app-content:has(.lobby-panel) .mood-symbol{height:22px!important;width:25px!important}
.app-content:has(.lobby-panel) .mood-symbol svg{width:18px!important;height:18px!important}
.app-content:has(.lobby-panel) .cta-space{margin-top:7px!important}
.app-content:has(.lobby-panel) .primary.big{padding:9px 16px!important}
.app-content:has(.lobby-panel) .mutual-rule{margin:6px 0!important;padding:7px 10px!important;font-size:11px}
.app-content:has(.lobby-panel) .quick-stats{margin-top:5px!important}
.app-content:has(.lobby-panel) .quick-stats>div{padding:7px 10px!important}
.result-stars{font-size:19px;letter-spacing:0;color:#a9f0d1;font-weight:800}

/* v0.2.36: partner mood SVG is visible regardless of language */
.partner-mood-signal{display:flex;align-items:center;justify-content:center;gap:9px}.partner-mood-signal .ico,.notice .ico{display:inline-block;vertical-align:middle;flex-shrink:0;color:#7dcdb2}

/* Restored original legendary glow from the early collectible-card design.
   Keep the later layout, title details and whole-screen mouse tilt. */
/* v0.2.38: legendary and ordinary card headers share the exact top placement.
   A previous legendary override made every child position:relative, defeating the kicker's absolute position. */
.fiveo-flip-card.fiveo-legend .fiveo-card-face > .fiveo-card-kicker,
.fiveo-flip-card .fiveo-card-face > .fiveo-card-kicker{
 position:absolute!important;
 top:22px!important;
 left:12px!important;
 right:12px!important;
 width:auto!important;
 margin:0!important;
 transform:none!important;
 z-index:5!important;
}

/* v0.2.39: always-visible SVG mood marks in the exchange stage */
.signal-mood-icon{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;min-width:28px;min-height:28px;color:#a6e9cf;opacity:1!important;visibility:visible!important}
.signal-mood-icon svg{display:block!important;width:25px!important;height:25px!important;stroke:currentColor!important;opacity:1!important;visibility:visible!important}
.notice .signal-mood-icon svg{width:22px!important;height:22px!important}

/* v0.2.42: smooth whole-screen pointer-follow on expanded title cards. */
.fiveo-card-scene{transition:transform .24s cubic-bezier(.2,.65,.3,1)!important;will-change:transform}
.fiveo-card-sheen{transition:background-position .2s ease;pointer-events:none}
@media(prefers-reduced-motion:reduce){.fiveo-card-scene{transition:none!important}}


/* v0.2.47: one interactive fuel slider and drifting anonymous guestbook */
.fuel-rating .fuel-track,.fuel-rating .fuel-fill{display:none!important}
.fuel-rating #fuel-slider{display:block!important;appearance:none;-webkit-appearance:none;width:100%;height:13px;margin:15px 0 9px;border-radius:99px;cursor:pointer;background:linear-gradient(90deg,#4b786c,#9de3ca);border:1px solid #83bca9}
.fuel-rating #fuel-slider::-webkit-slider-thumb{appearance:none;width:23px;height:23px;border-radius:50%;background:#e3fff3;border:3px solid #639987;box-shadow:0 0 13px #7bc4a9}
.fuel-rating #fuel-slider::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:#e3fff3;border:3px solid #639987;box-shadow:0 0 13px #7bc4a9}
.last-signal-label{display:flex;justify-content:space-between;align-items:center;font-weight:750;color:#c3e9dc;font-size:12px;letter-spacing:.035em;margin-top:8px}.last-signal-label small{font-weight:400;color:#93afb2}
.last-signal-input{width:100%;box-sizing:border-box;background:#10232d;border:1px solid #496960;border-radius:12px;color:#ecfff5;padding:10px 12px;resize:none;font:inherit;font-size:13px;outline:none}.last-signal-input:focus{border-color:#a3e1c7}.last-signal-count{text-align:right;color:#91adb2;font-size:10px;margin-top:-9px}
.signal-guestbook{position:relative;margin-top:16px;padding:15px 20px;overflow:hidden!important}.signal-guestbook-heading{text-align:center;pointer-events:none;position:relative;z-index:2}.signal-guestbook-heading h3{margin:5px 0}.signal-guestbook-heading p{color:#91afb6;font-size:11px;margin:0}.signal-sky{position:relative;overflow:hidden;height:clamp(125px,22vh,220px);isolation:isolate;border-radius:14px;background:radial-gradient(ellipse at center,#203947 0%,#111e2c 85%);margin-top:12px}.signal-star-motion{position:absolute;left:var(--x);top:var(--y);animation:signal-drift var(--dur) ease-in-out var(--delay) infinite alternate;z-index:1}.signal-star-motion:hover,.signal-star-motion:focus-within{animation-play-state:paused;z-index:10}.signal-star{position:relative;border:0;background:none;padding:0;width:37px;height:37px;cursor:pointer;display:grid;place-items:center;filter:drop-shadow(0 0 7px #94d9c4a8)}.signal-star img{width:31px;height:31px;border-radius:50%;border:1px solid #a0dfc7;object-fit:cover}.signal-star-spark{position:absolute;top:-10px;right:-7px;color:#bdf7e1;font-size:15px;pointer-events:none}.signal-star-tooltip{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(240px,65vw);min-width:135px;white-space:normal;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid #7bbca6;background:#102631;box-shadow:0 8px 24px #000b;color:#e5f9f0;font-size:12px;line-height:1.45;overflow-wrap:anywhere;pointer-events:none}.signal-star-tooltip b{display:block;color:#a5e5c9;font-size:10px;margin-bottom:4px}.signal-star-tooltip span{display:block}.signal-star:hover .signal-star-tooltip,.signal-star:focus .signal-star-tooltip{display:block}.signal-empty{position:absolute;inset:0;display:grid;place-items:center;color:#7898a4;font-size:12px}@keyframes signal-drift{0%{transform:translate(calc(var(--dx)*-1),calc(var(--dy)*-1))}50%{transform:translate(calc(var(--dx)*.65),calc(var(--dy)*.7))}100%{transform:translate(var(--dx),var(--dy))}}
@media(max-height:760px){.signal-sky{height:130px}.signal-guestbook{margin-top:8px;padding:10px 16px}.signal-guestbook-heading p{font-size:10px}}

/* v0.2.52: restrained legendary badge sheen in the video exchange and other compact chips.
   Keep the detailed card aura unchanged. */
.title-chip.legend-aura,
.title-chip-hover.legend-aura {
  animation: fiveoChipSoftBreath 7.2s ease-in-out infinite !important;
  filter: none !important;
  box-shadow: inset 0 0 8px rgba(221,196,255,.19), 0 0 5px rgba(179,224,216,.10) !important;
}
.title-chip.legend-aura::before,
.title-chip-hover.legend-aura::before {
  animation: fiveoChipSoftSheen 8.4s ease-in-out infinite !important;
  background: linear-gradient(110deg, transparent 10%, rgba(220,205,255,.13) 45%, rgba(228,255,247,.19) 52%, transparent 88%) !important;
  background-size: 220% 100% !important;
  opacity: .48 !important;
}
@keyframes fiveoChipSoftBreath {
  0%,100% { border-color: rgba(177,153,205,.55); opacity: .94; }
  50% { border-color: rgba(211,202,227,.76); opacity: 1; }
}
@keyframes fiveoChipSoftSheen {
  0%,100% { background-position: 110% 50%; }
  50% { background-position: -10% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .title-chip.legend-aura,.title-chip-hover.legend-aura,
  .title-chip.legend-aura::before,.title-chip-hover.legend-aura::before { animation:none!important; }
}

/* v0.2.53: LAST SIGNAL stars live in the profile background, never a separate guestbook panel. */
.profile-scene{position:relative;isolation:isolate;min-height:calc(100dvh - 180px)}
.profile-scene-content{position:relative;z-index:1;pointer-events:none}
.profile-scene-content button,.profile-scene-content a,.profile-scene-content input,.profile-scene-content select,.profile-scene-content [role="button"]{pointer-events:auto}
.profile-signal-sky{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;background:none;overflow:hidden;z-index:2;pointer-events:none;isolation:auto}
.profile-signal-sky .signal-star-motion{pointer-events:auto}
.profile-signal-sky .signal-star{width:42px;height:42px;opacity:.82;transition:opacity .25s,filter .25s}
.profile-signal-sky .signal-star:hover,.profile-signal-sky .signal-star:focus{opacity:1;filter:drop-shadow(0 0 12px #b3f6e3)}
.profile-signal-sky .signal-star-tooltip{z-index:20}
.profile-scene .page-title{margin-top:35px}

/* v0.2.55: profile-wide independent looping routes; pause on hover or keyboard focus. */
.profile-signal-sky .profile-wandering-star{position:absolute;transform:translate(-50%,-50%);will-change:left,top;animation-timing-function:linear!important;animation-direction:normal!important}
.profile-signal-sky .profile-wandering-star:hover,.profile-signal-sky .profile-wandering-star:focus-within{animation-play-state:paused!important;z-index:30}
.profile-signal-sky .profile-wandering-star .signal-star-tooltip{z-index:40}
@media (prefers-reduced-motion:reduce){.profile-signal-sky .profile-wandering-star{animation:none!important}}
/* v0.2.57: throwable LAST SIGNAL stars */
.profile-signal-sky .profile-wandering-star{animation:none!important;transition:none!important;touch-action:none}
.profile-signal-sky .signal-star{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.profile-signal-sky .signal-star.is-dragging{cursor:grabbing;filter:drop-shadow(0 0 14px #b3f6e3)}
.profile-signal-sky .profile-wandering-star:has(.is-dragging){z-index:60}
.profile-signal-sky .signal-star img{pointer-events:none;user-select:none;-webkit-user-drag:none}

/* v0.2.58 — Keep interactive equipped titles above the decorative guestbook sky.
   v0.2.53 disabled pointer events on the entire profile content tree,
   but equipped title chips are spans, not buttons. Restore hit testing for
   those chips and their descendants, while retaining drag on visible stars. */
.profile-scene-content{z-index:3}
.profile-scene-content .equipped,
.profile-scene-content .title-chip-hover,
.profile-scene-content .title-chip-hover *{pointer-events:auto}
.profile-scene-content .title-chip-hover{cursor:help}
.profile-signal-sky{z-index:2}
/* Legendary aura is visual only; never intercept title hover. */
.profile-scene-content .title-chip.legend-aura::before,
.profile-scene-content .title-chip.legend-aura::after{pointer-events:none!important}

/* v0.2.59: Guestbook visibly floats above profile; only stars accept input. */
.profile-scene-content{z-index:1;pointer-events:auto}
.profile-signal-sky{z-index:5;pointer-events:none}
.profile-signal-sky .profile-wandering-star{pointer-events:auto}
.profile-scene-content .rank-hover,.profile-scene-content .rank-hover *{pointer-events:auto}
.profile-scene-content .rank-hover{cursor:help;position:relative;z-index:7}
.profile-scene-content .rank-hover:hover>.rank-hover-tip,.profile-scene-content .rank-hover:focus>.rank-hover-tip,.profile-scene-content .rank-hover:focus-within>.rank-hover-tip{display:grid;gap:6px}
.profile-scene-content .rank-hover-tip{z-index:10000}
.profile-scene-content .rank-emblem,.profile-scene-content .stat-card{overflow:visible}

/* v0.2.60: Full-screen guestbook sky; no invisible profile-panel collision walls.
   The layer is portaled to <body> while the profile is visible. */
body > .profile-signal-sky{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;overflow:visible!important;z-index:80!important;pointer-events:none!important}
body > .profile-signal-sky .profile-wandering-star{pointer-events:auto}

/* v0.2.64 — Legendary equipped chips: visible, slow and seamless aura.
   Previous clip-path/overflow rules hid the halo and clipped the tooltip.
   Scoped to compact chips, leaving the title-collection card untouched. */
.title-chip.legend-aura.title-chip-hover {
  position:relative!important;
  isolation:isolate;
  overflow:visible!important;
  clip-path:none!important;
  border:1px solid rgba(206,183,246,.86)!important;
  border-radius:999px!important;
  background:linear-gradient(120deg,#302c47,#23404a 52%,#342a4a)!important;
  box-shadow:0 0 7px rgba(194,155,252,.40),0 0 14px rgba(117,218,210,.20),inset 0 0 9px rgba(219,186,255,.22)!important;
  filter:none!important;
  animation:fiveoLegendChipPulse 7.8s ease-in-out infinite!important;
}
.title-chip.legend-aura.title-chip-hover::before {
  content:''!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(108deg,transparent 22%,rgba(210,185,255,.05) 37%,rgba(244,255,252,.46) 50%,rgba(148,241,220,.13) 61%,transparent 78%)!important;
  background-size:230% 100%!important;
  opacity:.9!important;
  filter:none!important;
  animation:fiveoLegendChipSweep 8.8s linear infinite!important;
}
.title-chip.legend-aura.title-chip-hover::after {
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  border:1px solid rgba(191,170,241,.36);
  box-shadow:0 0 9px rgba(181,146,240,.22),0 0 13px rgba(126,220,211,.15);
  pointer-events:none;
  animation:fiveoLegendChipPulse 7.8s ease-in-out infinite!important;
}
.title-chip.legend-aura.title-chip-hover > .ico,
.title-chip.legend-aura.title-chip-hover > svg {position:relative;z-index:1}
.title-chip.legend-aura.title-chip-hover > .title-chip-tip {
  z-index:500!important;
  clip-path:none!important;
  animation:none!important;
}
@keyframes fiveoLegendChipPulse {
  0%,100% {border-color:rgba(206,183,246,.72);box-shadow:0 0 6px rgba(194,155,252,.30),0 0 12px rgba(117,218,210,.15),inset 0 0 8px rgba(219,186,255,.18)}
  50% {border-color:rgba(230,212,255,.96);box-shadow:0 0 11px rgba(194,155,252,.52),0 0 21px rgba(117,218,210,.30),inset 0 0 12px rgba(219,186,255,.30)}
}
@keyframes fiveoLegendChipSweep {
  from {background-position:115% 50%}
  to {background-position:-115% 50%}
}
@media(prefers-reduced-motion:reduce){
  .title-chip.legend-aura.title-chip-hover,
  .title-chip.legend-aura.title-chip-hover::before,
  .title-chip.legend-aura.title-chip-hover::after {animation:none!important}
}

/* v0.2.65: sender name and flag in LAST SIGNAL hover */
.signal-star-tooltip b{display:flex;align-items:center;gap:6px;max-width:100%;font-size:12px;line-height:1.3}
.signal-star-tooltip .guestbook-tooltip-flag{width:22px;height:15px;object-fit:cover;border:0;border-radius:2px;flex-shrink:0}

/* v0.2.69: shared cosmic sky across Home, Profile and Title Archive. */
body.cosmic-home .profile-scene,body.cosmic-home .profile-scene-content{background:transparent}
body.cosmic-home .profile-card,body.cosmic-home .stat-card,body.cosmic-home .archive-top,body.cosmic-home .title-card{backdrop-filter:blur(7px)}

/* v0.2.70: Mac/short-viewport layout — allow content to scroll rather than clip. */
.app-content:has(.profile-scene),
.app-content:has(.title-grid){
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#41635f transparent;
  padding-bottom:26px!important;
}
.app-content:has(.profile-scene) .profile-scene{
  min-height:0;
  padding-bottom:22px;
}
.app-content:has(.profile-scene) .profile-scene .page-title{
  margin-top:clamp(16px,3vh,35px);
  margin-bottom:clamp(14px,3vh,30px);
}
.app-content:has(.title-grid) .title-grid{
  flex:0 0 auto!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  padding-bottom:18px!important;
}
@media(max-width:780px){
  .app-content:has(.profile-scene) .profile-layout{grid-template-columns:minmax(0,1fr)!important}
  .app-content:has(.profile-scene) .profile-card{min-height:320px}
  .app-content:has(.profile-scene) .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:440px){
  .app-content:has(.profile-scene) .profile-stats{grid-template-columns:minmax(0,1fr)}
}

/* v0.2.71 — viewport-fitted shell; scrolling belongs to individual content regions.
   Keep this last: earlier versions contain broad !important overflow locks. */
html,body,#app{height:100%;height:100dvh;overflow:hidden!important}
.wrap{height:100dvh;max-height:100dvh;min-height:0;overflow:hidden!important;display:flex;flex-direction:column;padding:clamp(5px,1.2vh,12px) clamp(10px,2vw,20px) 0!important}
.wrap>header{flex:0 0 auto;min-height:0;padding-bottom:clamp(3px,.7vh,9px)}
.wrap>footer{flex:0 0 auto;margin:0!important;padding:3px 0!important}
.app-content,.app-content:has(.profile-scene),.app-content:has(.title-grid),.app-content:has(.results-wrap),.app-content:has(.watch-layout),.app-content:has(.profile-layout){flex:1 1 0;min-height:0;min-width:0;overflow:hidden!important;overscroll-behavior:contain;padding:clamp(2px,.5vh,6px) 2px 5px!important}
/* Custom mint scrollbar on the scrollable *sections*, never the document. */
.fiveo-inner-scroll,.app-content:has(.title-grid) .title-grid,.rankpopup .ranklist,.app-content:has(.profile-scene) .profile-scene-content,.app-content:has(.watch-layout) .watch-layout>.panel,.app-content:has(.results-wrap) .results-wrap{
  scrollbar-width:thin;scrollbar-color:#63998788 transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.fiveo-inner-scroll::-webkit-scrollbar,.app-content:has(.title-grid) .title-grid::-webkit-scrollbar,.rankpopup .ranklist::-webkit-scrollbar,.app-content:has(.profile-scene) .profile-scene-content::-webkit-scrollbar,.app-content:has(.watch-layout) .watch-layout>.panel::-webkit-scrollbar,.app-content:has(.results-wrap) .results-wrap::-webkit-scrollbar{width:5px}
.fiveo-inner-scroll::-webkit-scrollbar-thumb,.app-content:has(.title-grid) .title-grid::-webkit-scrollbar-thumb,.rankpopup .ranklist::-webkit-scrollbar-thumb,.app-content:has(.profile-scene) .profile-scene-content::-webkit-scrollbar-thumb,.app-content:has(.watch-layout) .watch-layout>.panel::-webkit-scrollbar-thumb,.app-content:has(.results-wrap) .results-wrap::-webkit-scrollbar-thumb{background:#63998799;border-radius:12px}
/* Profile: the cards scale with available height; only the profile's own content
   becomes scrollable on exceptionally short or narrow viewports. */
.app-content:has(.profile-scene) .profile-scene{height:100%;min-height:0!important;padding:0!important;display:flex;flex-direction:column}
.app-content:has(.profile-scene) .profile-scene-content{height:100%;min-height:0;display:flex;flex-direction:column;overflow-x:hidden!important;overflow-y:auto!important;padding:0 3px 8px}
.app-content:has(.profile-scene) .page-title{flex:0 0 auto;margin:clamp(7px,2vh,22px) 0 clamp(8px,1.7vh,18px)!important}
.app-content:has(.profile-scene) .page-title h1{font-size:clamp(23px,4.3vh,42px);margin:clamp(3px,.7vh,8px) 0}
.app-content:has(.profile-scene) .page-title p{margin:clamp(2px,.5vh,5px) 0;font-size:clamp(10px,1.6vh,13px)}
.app-content:has(.profile-scene) .profile-layout{flex:1 1 auto;min-height:min(390px,64dvh);grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(7px,1.4vw,18px);align-items:stretch}
.app-content:has(.profile-scene) .profile-card{min-height:0!important;padding:clamp(10px,2vh,24px);gap:clamp(3px,.6vh,9px)}
.app-content:has(.profile-scene) .rank-emblem{margin-bottom:clamp(3px,1vh,16px)}
.app-content:has(.profile-scene) .avatar-big{width:clamp(62px,13vh,115px);height:clamp(62px,13vh,115px);flex-shrink:0}
.app-content:has(.profile-scene) .profile-card h2{font-size:clamp(17px,3vh,26px);margin:clamp(5px,1vh,14px) 0 2px}
.app-content:has(.profile-scene) .mood-chip{margin:clamp(3px,.8vh,11px) 0 3px;padding:clamp(5px,.8vh,9px) 12px}
.app-content:has(.profile-scene) .equipped{margin-top:clamp(4px,.7vh,10px)}
.app-content:has(.profile-scene) .profile-stats{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(7px,1.1vw,14px)}
.app-content:has(.profile-scene) .stat-card{min-width:0;min-height:0;padding:clamp(10px,1.7vh,20px);gap:clamp(5px,1.4vh,12px)}
.app-content:has(.profile-scene) .stat-card strong{font-size:clamp(21px,3.8vh,31px)}
/* Archive: fixed header/overview/filter, scroll ONLY the title-card collection. */
.app-content:has(.title-grid){display:flex!important;flex-direction:column;gap:clamp(3px,.7vh,8px)!important}
.app-content:has(.title-grid)>.page-title,.app-content:has(.title-grid)>.archive-top,.app-content:has(.title-grid)>.equip-summary,.app-content:has(.title-grid)>.section-heading,.app-content:has(.title-grid)>.title-filters{flex:0 0 auto;min-height:0}
.app-content:has(.title-grid) .page-title h1{font-size:clamp(19px,3.4vh,28px)}
.app-content:has(.title-grid) .archive-top{padding:clamp(6px,1vh,12px)!important;gap:clamp(8px,1.2vw,16px)}
.app-content:has(.title-grid) .archive-medal{width:clamp(36px,6vh,65px);height:clamp(36px,6vh,65px);flex-shrink:0}
.app-content:has(.title-grid) .archive-count strong{font-size:clamp(20px,3.5vh,32px)}
.app-content:has(.title-grid) .title-grid{flex:1 1 0!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;align-content:start!important;grid-template-columns:repeat(auto-fill,minmax(clamp(110px,15vw,160px),1fr));grid-auto-rows:88px!important;padding:3px 8px 10px 3px!important}
.app-content:has(.title-grid)>.notice{flex:0 0 auto;margin:0!important;padding:5px 9px!important;font-size:10px}
/* Rankings: the popup is stationary and its rows are the scrollable area. */
.rankpopup{max-height:min(78dvh,640px);display:flex;flex-direction:column;overflow:hidden!important}
.rankpopup .ranklist{flex:1 1 auto;min-height:0;max-height:min(52dvh,420px);overflow-x:hidden!important;overflow-y:auto!important}
/* Watch/evaluation and results: no browser scroll, contained panel fallback. */
.app-content:has(.watch-layout) .watch-layout{height:100%;min-height:0;align-items:stretch}
.app-content:has(.watch-layout) .watch-layout>.panel{min-height:0;overflow-x:hidden!important;overflow-y:auto!important}
.app-content:has(.results-wrap) .results-wrap{height:100%;min-height:0;overflow-x:hidden!important;overflow-y:auto!important}
/* Home scales via existing fitHome() logic. Avoid any document scrolling. */
.app-content:has(.lobby-panel){overflow:hidden!important}
@media(max-width:780px){
 .wrap>header{gap:6px}
 .nav{gap:4px}
 .nav button{padding:7px 9px;font-size:12px}
 .app-content:has(.profile-scene) .profile-layout{grid-template-columns:minmax(0,1fr)!important;flex:0 0 auto;min-height:0;gap:9px}
 .app-content:has(.profile-scene) .profile-card{min-height:0!important;padding:14px}
 .app-content:has(.profile-scene) .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto}
 .app-content:has(.profile-scene) .stat-card{min-height:105px}
}
@media(max-width:440px){
 .app-content:has(.profile-scene) .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .app-content:has(.profile-scene) .stat-card{padding:9px;min-height:100px}
 .app-content:has(.title-grid) .title-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:610px){
 .wrap>footer{display:none}
 .app-content:has(.profile-scene) .page-title{margin:4px 0 7px!important}
 .app-content:has(.profile-scene) .profile-layout{min-height:min(325px,65dvh)}
 .app-content:has(.title-grid) .page-title .muted{display:none}
 .app-content:has(.title-grid) .archive-top{padding:5px 9px!important}
}

/* v0.2.72 — subtle prestige aurora on ORBIT/FIVEO rows in rank guide only */
.rank-hover-tip .rank-rule-orbit,
.rank-hover-tip .rank-rule-fiveo,
.rank-portal .rank-rule-orbit,
.rank-portal .rank-rule-fiveo {
  position:relative;
  isolation:isolate;
  border:1px solid transparent;
  background:
    linear-gradient(#112b35,#112b35) padding-box,
    linear-gradient(115deg,#42729c,#80c9ff,#2e628c,#9dd7ff,#42729c) border-box;
  background-size:100% 100%,300% 300%;
  animation:fiveo-prestige-border 11s ease-in-out infinite;
  box-shadow:inset 0 0 10px #6fbaff0a,0 0 8px #4c9bd315;
}
.rank-hover-tip .rank-rule-fiveo,.rank-portal .rank-rule-fiveo {
  background:
    linear-gradient(#1c2239,#1c2239) padding-box,
    linear-gradient(115deg,#7654b4,#c8a0ff,#6a43ac,#dfb8ff,#7654b4) border-box;
  background-size:100% 100%,300% 300%;
  box-shadow:inset 0 0 10px #b88aff0d,0 0 9px #b281ee22;
  animation-delay:-4s;
}
.rank-hover-tip .rank-rule-orbit strong,.rank-portal .rank-rule-orbit strong{color:#a6d6ff}
.rank-hover-tip .rank-rule-fiveo strong,.rank-portal .rank-rule-fiveo strong{color:#d9baff}
.rank-hover-tip .rank-rule-orbit.current,.rank-portal .rank-rule-orbit.current{outline:1px solid #6aaee577}
.rank-hover-tip .rank-rule-fiveo.current,.rank-portal .rank-rule-fiveo.current{outline:1px solid #bb90ee88}
@keyframes fiveo-prestige-border{
  0%,100%{background-position:0 0,0% 50%}
  50%{background-position:0 0,100% 50%}
}
@media(prefers-reduced-motion:reduce){
 .rank-hover-tip .rank-rule-orbit,.rank-hover-tip .rank-rule-fiveo,
 .rank-portal .rank-rule-orbit,.rank-portal .rank-rule-fiveo{animation:none}
}

/* v0.2.73: reports */
.report-watch-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 0}
.report-open{font-size:12px;opacity:.82}
.signal-report-link{display:block;margin-top:8px;padding-top:7px;border-top:1px solid #6a9b9350;color:#b9d6d1;font-size:11px;cursor:pointer;pointer-events:auto}
.signal-report-link:hover{color:#fff}
.fiveo-report-backdrop{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:16px;background:#020b13d9;backdrop-filter:blur(8px)}
.fiveo-report-dialog{width:min(440px,100%);max-height:90dvh;overflow-y:auto;background:#142c37;border:1px solid #639987;border-radius:18px;padding:22px;color:#e7f4f1;box-shadow:0 24px 90px #0009}
.fiveo-report-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fiveo-report-heading h2{margin:0}
.fiveo-report-dialog textarea{min-height:84px;resize:vertical}
.fiveo-report-dialog .stack{gap:12px}

/* v0.2.74 in-game staff dashboard */
.admin-board{display:flex;flex-direction:column;gap:14px;min-height:0;height:100%;overflow:hidden}
.admin-board .page-title{flex:none;margin-bottom:0}
.admin-unlock{max-width:450px;display:flex;flex-direction:column;gap:14px}
.admin-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;flex:none}
.admin-summary .panel{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 17px}
.admin-summary strong{font-size:24px;color:#a6dfce}
.admin-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;flex:none}
.admin-filters,.admin-actions{display:flex;flex-wrap:wrap;gap:7px}
.admin-filters .selected{color:#c5ffeb;border-color:#639987;background:#285247}
.admin-report-list{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;display:flex;flex-direction:column;gap:12px;padding:2px 6px 12px 2px}
.admin-report-card{display:flex;flex-direction:column;gap:12px;padding:16px}
.admin-report-top,.admin-report-bottom,.admin-report-people{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.admin-report-people{justify-content:flex-start;gap:20px;font-size:13px}
.admin-evidence{white-space:pre-wrap;overflow-wrap:anywhere;background:#07192577;border:1px solid #63998733;border-radius:8px;padding:10px;margin:0}
.admin-evidence a{color:#a8e4d0}
.admin-empty{text-align:center;padding:30px}
@media(max-width:640px){.admin-summary{gap:6px}.admin-summary .panel{padding:10px;display:block}.admin-summary strong{display:block}.admin-board .page-title h1{font-size:clamp(22px,6vw,32px)}}

/* v0.2.76 — isolate the season guide from clipped profile panels and stacking contexts */
.season-hover .season-tooltip{display:none!important}
body>.season-portal{display:flex!important;position:fixed!important;left:50%;top:50%;bottom:auto;right:auto;transform:translateY(-50%);z-index:2147483001!important;pointer-events:none;box-sizing:border-box;width:min(360px,calc(100vw - 24px));max-height:min(78dvh,520px);overflow-y:auto;overflow-x:hidden;contain:layout style;background:#101f2b;box-shadow:0 24px 75px #000e;border:1px solid #639987;border-radius:14px;padding:18px;flex-direction:column;gap:7px;white-space:normal;color:#d6e9e8;font-size:12px;line-height:1.55;text-align:left}
/* Result screen: each column stays inside the viewport; only the reward content scrolls. */
.app-content:has(.results-wrap) .results-wrap{display:flex;flex-direction:column;gap:clamp(5px,.9vh,10px);padding:2px 4px 8px;box-sizing:border-box}
.app-content:has(.results-wrap) .results-wrap>.result-head{flex:0 0 auto}
.app-content:has(.results-wrap) .results-wrap>.result-grid{flex:0 0 auto;min-height:0}
.app-content:has(.results-wrap) .results-wrap>.rewards-panel{flex:1 1 auto;min-height:110px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#63998788 transparent}
.app-content:has(.results-wrap) .results-wrap>.center.section{flex:0 0 auto;margin:0!important;padding:4px 0 8px!important}
.app-content:has(.results-wrap) .results-wrap .reward-grid{margin:6px 0!important}
.app-content:has(.results-wrap) .results-wrap .reward-summary{margin-top:5px;padding-top:9px}
@media(max-height:740px){.app-content:has(.results-wrap) .results-wrap .result-card{padding:6px!important}.app-content:has(.results-wrap) .results-wrap .result-face{margin:0 auto!important}.app-content:has(.results-wrap) .results-wrap .result-head p{font-size:11px}}

/* v0.2.77: portal geometry is calculated in viewport pixels (no competing translate). */
body>.season-portal,body>.rank-portal{
  position:fixed!important;
  transform:none!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
}
body>.season-portal{max-width:calc(100vw - 24px)!important}
body>.rank-portal{max-width:calc(100vw - 24px)!important;z-index:2147483000!important}

/* v0.2.80: 30x30 safe SVG avatar composer */
.fiveo-avatar{display:inline-grid;place-items:center;flex-shrink:0;width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;color:#ecfff7;background:var(--avatar-bg);border:3px solid var(--avatar-border);box-shadow:0 0 0 3px #091b2488,inset 0 0 22px #071b2422;vertical-align:middle}
.fiveo-avatar svg{filter:drop-shadow(0 1px 3px #0008)}
.fiveo-avatar-fiveo{box-shadow:0 0 0 2px #c18aff77,0 0 17px #b885ff70,inset 0 0 14px #8b60cc44}
.fiveo-avatar-orbit{box-shadow:0 0 0 2px #75c8ff66,0 0 15px #75c8ff66,inset 0 0 14px #378bd544}
.avatar-host{background:none!important;overflow:visible!important;border:0!important;box-shadow:none!important}
.avatar-host .fiveo-avatar{max-width:100%;max-height:100%}
.rank-avatar{--avatar-size:27px!important;border-width:2px;margin:0 4px}
.rank-avatar svg{width:14px;height:14px}
.avatar-editor{margin:14px auto 0;max-width:760px;padding:20px!important}
.avatar-editor-header h3{margin:0 0 6px}.avatar-editor-header p{margin:0 0 15px}
.avatar-editor-preview{display:flex;align-items:center;gap:20px;margin:8px 0 20px}.avatar-editor-preview p{margin:7px 0 0}
.avatar-editor-label{display:block;font-size:12px;color:#b8e7d4;margin:13px 0 9px}
.avatar-color-grid,.avatar-icon-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px}
.avatar-color-choice,.avatar-icon-choice{width:100%;min-height:33px;border:2px solid #ffffff20;border-radius:9px}
.avatar-icon-choice{background:#1b343d;color:#c7efdf;display:grid;place-items:center}
.avatar-color-choice.selected,.avatar-icon-choice.selected{outline:2px solid #b9f4dc;outline-offset:1px}
.avatar-color-choice:hover,.avatar-icon-choice:hover{border-color:#b9f4dc}
@media(max-width:650px){.avatar-color-grid,.avatar-icon-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.avatar-editor-preview{gap:12px}}

/* v0.2.81 selectable normal and earned special frames */
.avatar-frame-choice{border-radius:50%;min-height:32px}
.avatar-special-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.avatar-special-choice{padding:9px 3px;border-radius:10px;background:#152b36;color:#d6ebe6;border:2px solid var(--special-frame);font-size:11px;cursor:pointer}
.avatar-special-choice.selected{outline:2px solid #fff;outline-offset:2px}
.avatar-special-choice:disabled{opacity:.36;cursor:not-allowed;filter:grayscale(.6)}
.avatar-special-choice[data-value="ORBIT"]:not(:disabled){box-shadow:0 0 12px #75c8ff66}
.avatar-special-choice[data-value="FIVEO"]:not(:disabled){box-shadow:0 0 13px #c18aff88}
@media(max-width:500px){.avatar-special-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v0.2.82 — 15 background colors, 16 patterns including none, 7 unlockable frames */
.fiveo-avatar{position:relative;isolation:isolate;overflow:hidden}
.fiveo-avatar::before,.avatar-pattern-preview::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.62;background-image:var(--avatar-pattern,none);background-size:var(--avatar-pattern-size,auto)}
.fiveo-avatar svg{position:relative;z-index:1}
.avatar-pattern-preview{position:relative;display:block;width:32px;height:32px;border-radius:50%;background:var(--avatar-bg);overflow:hidden;border:1px solid #ffffff44}
.avatar-pattern-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.avatar-pattern-choice{display:flex;align-items:center;gap:8px;text-align:left;padding:7px;background:#193540;color:#d6f5e9;border:1px solid #ffffff25;border-radius:9px;font-size:12px;cursor:pointer}
.avatar-pattern-choice.selected{outline:2px solid #b9f4dc}
.avatar-pattern-0{--avatar-pattern:none}
.avatar-pattern-1{--avatar-pattern:radial-gradient(circle,#fff9 1px,transparent 2px);--avatar-pattern-size:11px 11px}
.avatar-pattern-2{--avatar-pattern:linear-gradient(#fff5 1px,transparent 1px),linear-gradient(90deg,#fff5 1px,transparent 1px);--avatar-pattern-size:12px 12px}
.avatar-pattern-3{--avatar-pattern:repeating-linear-gradient(125deg,#fff6 0 2px,transparent 2px 10px)}
.avatar-pattern-4{--avatar-pattern:radial-gradient(circle,#001b25bb 2px,transparent 3px);--avatar-pattern-size:13px 13px}
.avatar-pattern-5{--avatar-pattern:conic-gradient(#00192399 25%,transparent 0 50%,#00192399 0 75%,transparent 0);--avatar-pattern-size:18px 18px}
.avatar-pattern-6{--avatar-pattern:repeating-radial-gradient(ellipse at 0 50%,transparent 0 5px,#ffffff66 6px 7px,transparent 8px 15px)}
.avatar-pattern-7{--avatar-pattern:repeating-radial-gradient(circle at 10% 90%,transparent 0 11px,#ffffff66 12px 13px,transparent 14px 26px)}
.avatar-pattern-8{--avatar-pattern:repeating-radial-gradient(circle at center,transparent 0 7px,#e0fff266 8px 9px,transparent 10px 19px)}
.avatar-pattern-9{--avatar-pattern:linear-gradient(30deg,#fff6 12%,transparent 12.5%,transparent 87%,#fff6 87.5%),linear-gradient(150deg,#fff6 12%,transparent 12.5%,transparent 87%,#fff6 87.5%);--avatar-pattern-size:21px 36px}
.avatar-pattern-10{--avatar-pattern:repeating-linear-gradient(90deg,#00151a99 0 3px,transparent 3px 10px),repeating-linear-gradient(0deg,#fff5 0 2px,transparent 2px 15px)}
.avatar-pattern-11{--avatar-pattern:radial-gradient(circle at 15% 30%,#fff 0 2px,transparent 3px),radial-gradient(circle at 70% 65%,#fff 0 1px,transparent 2px),linear-gradient(35deg,transparent 47%,#fff5 48% 49%,transparent 50%);--avatar-pattern-size:29px 29px}
.avatar-pattern-12{--avatar-pattern:repeating-linear-gradient(0deg,#0008 0 2px,transparent 2px 8px)}
/* Camo is drawn entirely with CSS: no user uploads or extra server images. */
.avatar-pattern-13{--avatar-pattern:radial-gradient(ellipse 16px 10px at 18% 28%,#283d2e 85%,transparent 90%),radial-gradient(ellipse 18px 13px at 79% 76%,#887d52 85%,transparent 90%),radial-gradient(ellipse 13px 18px at 75% 12%,#162d27 85%,transparent 90%),radial-gradient(ellipse 13px 11px at 28% 83%,#5a633d 85%,transparent 90%);--avatar-pattern-size:64px 54px}
.avatar-pattern-14{--avatar-pattern:radial-gradient(ellipse 18px 11px at 17% 30%,#9b744a 85%,transparent 90%),radial-gradient(ellipse 15px 18px at 74% 72%,#e7c693 85%,transparent 90%),radial-gradient(ellipse 14px 10px at 79% 12%,#755a44 85%,transparent 90%);--avatar-pattern-size:58px 54px}
.avatar-pattern-15{--avatar-pattern:linear-gradient(45deg,transparent 46%,#fff9 47% 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,#fff9 47% 53%,transparent 54%);--avatar-pattern-size:18px 18px}
.fiveo-avatar-orbit{animation:fiveo-orbit-glow 3.8s ease-in-out infinite}
.fiveo-avatar-fiveo{animation:fiveo-fiveo-glow 3.8s ease-in-out infinite}
@keyframes fiveo-orbit-glow{0%,100%{box-shadow:0 0 0 2px #75c8ff77,0 0 9px #75c8ff88}50%{box-shadow:0 0 0 3px #9bdcffaa,0 0 25px #75c8ffcc}}
@keyframes fiveo-fiveo-glow{0%,100%{box-shadow:0 0 0 2px #c18aff88,0 0 11px #b885ff99}50%{box-shadow:0 0 0 3px #e0bcffcc,0 0 27px #b885ffdd}}
@media(prefers-reduced-motion:reduce){.fiveo-avatar-orbit,.fiveo-avatar-fiveo{animation:none}}
@media(max-width:520px){.avatar-pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* v0.2.83: organically shaped, background-color-reactive camouflage.
   Two tiled SVG alpha masks carry only geometry, never hardcoded pigment.
   All pigments derive from --avatar-bg, so all 15 palette choices recolor both camouflages. */
.fiveo-avatar.avatar-pattern-13,.fiveo-avatar.avatar-pattern-14,
.avatar-pattern-preview.avatar-pattern-13,.avatar-pattern-preview.avatar-pattern-14{
  --avatar-pattern:none;
  background-color:var(--avatar-bg);
  isolation:isolate;
}
.fiveo-avatar:is(.avatar-pattern-13,.avatar-pattern-14)::before,
.fiveo-avatar:is(.avatar-pattern-13,.avatar-pattern-14)::after,
.avatar-pattern-preview:is(.avatar-pattern-13,.avatar-pattern-14)::before,
.avatar-pattern-preview:is(.avatar-pattern-13,.avatar-pattern-14)::after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:1;
  background-image:none;
  background-size:auto;
  mask-repeat:repeat;
  -webkit-mask-repeat:repeat;
  mask-size:94px 94px;
  -webkit-mask-size:94px 94px;
}
.fiveo-avatar:is(.avatar-pattern-13,.avatar-pattern-14)::before,
.avatar-pattern-preview:is(.avatar-pattern-13,.avatar-pattern-14)::before{
  background-color:color-mix(in srgb,var(--avatar-bg) 38%,#10161a);
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M-22%2018%20C-5%20-2%2017%201%2027%2014%20C37%2028%2022%2035%2037%2043%20C51%2050%2069%2033%2078%2045%20C90%2061%2066%2078%2048%2075%20C27%2072%2029%2092%2011%2092%20C-7%2092%20-7%2072%20-25%2077Z%22%2F%3E%3Cpath%20d%3D%22M95%20-16%20C109%20-2%20122%205%20136%20-4%20C155%20-13%20170%200%20163%2018%20C157%2035%20137%2028%20130%2044%20C120%2061%2094%2059%2088%2042%20C82%2027%20101%2018%2095%20-16Z%22%2F%3E%3Cpath%20d%3D%22M88%2089%20C107%2076%20114%2089%20123%20100%20C134%20112%20152%2095%20165%20108%20C182%20126%20150%20142%20131%20138%20C114%20134%20110%20158%2090%20155%20C68%20151%2076%20131%2062%20125%20C50%20119%2069%20101%2088%2089Z%22%2F%3E%3Cpath%20d%3D%22M-17%20121%20C-1%20106%2019%20112%2030%20123%20C45%20139%2027%20155%2040%20173%20L-18%20173Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M-22%2018%20C-5%20-2%2017%201%2027%2014%20C37%2028%2022%2035%2037%2043%20C51%2050%2069%2033%2078%2045%20C90%2061%2066%2078%2048%2075%20C27%2072%2029%2092%2011%2092%20C-7%2092%20-7%2072%20-25%2077Z%22%2F%3E%3Cpath%20d%3D%22M95%20-16%20C109%20-2%20122%205%20136%20-4%20C155%20-13%20170%200%20163%2018%20C157%2035%20137%2028%20130%2044%20C120%2061%2094%2059%2088%2042%20C82%2027%20101%2018%2095%20-16Z%22%2F%3E%3Cpath%20d%3D%22M88%2089%20C107%2076%20114%2089%20123%20100%20C134%20112%20152%2095%20165%20108%20C182%20126%20150%20142%20131%20138%20C114%20134%20110%20158%2090%20155%20C68%20151%2076%20131%2062%20125%20C50%20119%2069%20101%2088%2089Z%22%2F%3E%3Cpath%20d%3D%22M-17%20121%20C-1%20106%2019%20112%2030%20123%20C45%20139%2027%20155%2040%20173%20L-18%20173Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.fiveo-avatar:is(.avatar-pattern-13,.avatar-pattern-14)::after,
.avatar-pattern-preview:is(.avatar-pattern-13,.avatar-pattern-14)::after{
  background-color:color-mix(in srgb,var(--avatar-bg) 34%,#fffaf4);
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M34%20-16%20C45%20-2%2071%20-3%2082%209%20C95%2025%2079%2037%2063%2035%20C50%2034%2045%2050%2029%2047%20C11%2044%2015%2029%20-1%2028%20C-18%2027%20-13%205%204%203%20C21%201%2021%20-11%2034%20-16Z%22%2F%3E%3Cpath%20d%3D%22M137%2047%20C154%2033%20176%2049%20168%2067%20C160%2083%20145%2077%20144%2094%20C143%20110%20124%20114%20113%20100%20C103%2086%20111%2076%2094%2073%20C81%2070%2083%2056%2097%2052%20C114%2048%20122%2060%20137%2047Z%22%2F%3E%3Cpath%20d%3D%22M30%2078%20C46%2072%2059%2079%2058%2093%20C57%20109%2039%20106%2037%20118%20C35%20134%2017%20132%209%20121%20C1%20111%20-13%20117%20-14%20103%20C-15%2089%206%2093%2014%2087%20C20%2082%2023%2080%2030%2078Z%22%2F%3E%3Cpath%20d%3D%22M60%20138%20C76%20127%2090%20143%2089%20158%20C87%20177%2057%20175%2049%20160%20C45%20152%2051%20145%2060%20138Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M34%20-16%20C45%20-2%2071%20-3%2082%209%20C95%2025%2079%2037%2063%2035%20C50%2034%2045%2050%2029%2047%20C11%2044%2015%2029%20-1%2028%20C-18%2027%20-13%205%204%203%20C21%201%2021%20-11%2034%20-16Z%22%2F%3E%3Cpath%20d%3D%22M137%2047%20C154%2033%20176%2049%20168%2067%20C160%2083%20145%2077%20144%2094%20C143%20110%20124%20114%20113%20100%20C103%2086%20111%2076%2094%2073%20C81%2070%2083%2056%2097%2052%20C114%2048%20122%2060%20137%2047Z%22%2F%3E%3Cpath%20d%3D%22M30%2078%20C46%2072%2059%2079%2058%2093%20C57%20109%2039%20106%2037%20118%20C35%20134%2017%20132%209%20121%20C1%20111%20-13%20117%20-14%20103%20C-15%2089%206%2093%2014%2087%20C20%2082%2023%2080%2030%2078Z%22%2F%3E%3Cpath%20d%3D%22M60%20138%20C76%20127%2090%20143%2089%20158%20C87%20177%2057%20175%2049%20160%20C45%20152%2051%20145%2060%20138Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.fiveo-avatar.avatar-pattern-14::before,.avatar-pattern-preview.avatar-pattern-14::before{
  background-color:color-mix(in srgb,var(--avatar-bg) 48%,#493325);
}
.fiveo-avatar.avatar-pattern-14::after,.avatar-pattern-preview.avatar-pattern-14::after{
  background-color:color-mix(in srgb,var(--avatar-bg) 28%,#fff0d3);
}
.fiveo-avatar:is(.avatar-pattern-13,.avatar-pattern-14) svg{z-index:2}
.avatar-pattern-preview:is(.avatar-pattern-13,.avatar-pattern-14){border-color:#d6eee580}

/* v0.2.84: viewport-contained profile editor; save-only persistence */
.avatar-profile-trigger{position:relative;cursor:pointer;appearance:none;background:transparent;border:0;padding:0;color:inherit;font:inherit;overflow:visible!important}
.avatar-profile-trigger:focus-visible{outline:3px solid #b2f3dd;outline-offset:6px}
.avatar-edit-hint{position:absolute;right:8px;bottom:15px;display:grid;place-items:center;width:28px;height:28px;background:#639987;color:#092b29;border-radius:50%;border:2px solid #c5f7e6;z-index:3;box-shadow:0 2px 12px #0008}
.avatar-modal-backdrop{position:fixed;inset:0;z-index:2147483200;background:#031018d9;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.avatar-modal{width:min(1100px,100%);height:min(780px,calc(100dvh - 32px));min-height:0;display:flex;flex-direction:column;border:1px solid #639987aa;border-radius:20px;background:#102630;color:#e8f6f1;box-shadow:0 24px 100px #000b;overflow:hidden}
.avatar-modal-header{flex:0 0 auto;display:flex;justify-content:space-between;gap:15px;align-items:start;padding:20px 24px 13px;border-bottom:1px solid #63998740}
.avatar-modal-header h2{margin:4px 0;font-size:clamp(21px,3vw,30px)}
.avatar-modal-close{border:1px solid #ffffff33;background:#203d45;color:#e8f6f1;border-radius:10px;min-width:36px;height:36px;cursor:pointer}
.avatar-modal-content{flex:1;min-height:0;display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr)}
.avatar-preview-panel{min-width:0;background:linear-gradient(145deg,#193b43,#132936);border-right:1px solid #63998740;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;text-align:center}
.avatar-preview-main{padding:26px;overflow:visible}
.avatar-preview-panel strong{font-size:21px}
.avatar-preview-lock{font-size:12px;color:#f1ce9d}
.avatar-modal-options{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 24px 28px}
.avatar-modal-options .avatar-editor-label{margin-top:17px}
.avatar-modal-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:14px 24px;border-top:1px solid #63998750;background:#102630}
.avatar-modal-footer .avatar-editor-error{color:#ffb8b8;font-size:12px;margin-right:auto}
.avatar-modal-footer button{min-width:92px}
.avatar-special-preview{display:flex;align-items:center;gap:8px;justify-content:center;min-height:76px;padding:8px;border:2px solid var(--special-frame);opacity:1!important;filter:none!important}
.avatar-tier-sample{display:block;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#1e424c;border:3px solid var(--special-frame);box-shadow:inset 0 0 0 2px #102630}
.avatar-tier-status{font-size:11px}
.avatar-special-preview[data-value="ORBIT"],.avatar-tier-orbit{animation:fiveo-orbit-glow 3.8s ease-in-out infinite}
.avatar-special-preview[data-value="FIVEO"],.avatar-tier-fiveo{animation:fiveo-fiveo-glow 3.8s ease-in-out infinite}
@media(max-width:680px){.avatar-modal-content{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.avatar-preview-panel{padding:10px;gap:4px;border-right:0;border-bottom:1px solid #63998740}.avatar-preview-main{padding:7px}.avatar-preview-main .fiveo-avatar{--avatar-size:76px!important}.avatar-modal-header{padding:12px 16px}.avatar-modal-options{padding:10px 16px}.avatar-modal-footer{padding:10px 16px}.avatar-special-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.avatar-special-preview,.avatar-tier-sample{animation:none!important}}

/* v0.2.85: single full-bleed camo mask per circle, no repeated 94px tiles/seams */
.fiveo-avatar:is(.avatar-pattern-13,.avatar-pattern-14)::before,
.fiveo-avatar:is(.avatar-pattern-13,.avatar-pattern-14)::after,
.avatar-pattern-preview:is(.avatar-pattern-13,.avatar-pattern-14)::before,
.avatar-pattern-preview:is(.avatar-pattern-13,.avatar-pattern-14)::after{
  mask-repeat:no-repeat!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-size:100% 100%!important;
  -webkit-mask-size:100% 100%!important;
  mask-position:center!important;
  -webkit-mask-position:center!important;
}
.avatar-default-frame{--special-frame:#83949F;border-color:#83949F}
.avatar-tier-default{border-color:#83949F;box-shadow:inset 0 0 0 2px #102630}

/* v0.2.87: all tier frames MUST remain perfectly circular. Tier affects ring styling only. */
.fiveo-avatar[class*="fiveo-frame-"],.avatar-tier-sample[class*="fiveo-frame-"]{
 border-radius:50%!important;aspect-ratio:1/1!important;
 box-sizing:border-box!important;
}
.fiveo-avatar.fiveo-frame-spark,.avatar-tier-sample.fiveo-frame-spark{
 border:5px double var(--avatar-border,var(--special-frame))!important;
 box-shadow:0 0 0 2px #0b2330,inset 0 0 0 1px var(--avatar-border,var(--special-frame))!important;
}
.fiveo-avatar.fiveo-frame-pulse,.avatar-tier-sample.fiveo-frame-pulse{
 border:4px dashed var(--avatar-border,var(--special-frame))!important;
 box-shadow:inset 0 0 0 2px var(--avatar-border,var(--special-frame)),0 0 0 2px #061923!important;
}
.fiveo-avatar.fiveo-frame-wave,.avatar-tier-sample.fiveo-frame-wave{
 border:3px solid var(--avatar-border,var(--special-frame))!important;
 outline:2px dashed var(--avatar-border,var(--special-frame));outline-offset:3px;
 box-shadow:inset 0 0 0 2px #09242a!important;
}
.fiveo-avatar.fiveo-frame-echo,.avatar-tier-sample.fiveo-frame-echo{
 border:6px double var(--avatar-border,var(--special-frame))!important;
 box-shadow:0 0 0 2px #0c2734,0 0 0 4px var(--avatar-border,var(--special-frame)),inset 0 0 0 2px #0c2734!important;
}
.fiveo-avatar.fiveo-frame-nova,.avatar-tier-sample.fiveo-frame-nova{
 border:6px solid var(--avatar-border,var(--special-frame))!important;
 box-shadow:0 0 0 2px #0c2734,0 0 0 5px var(--avatar-border,var(--special-frame)),inset 0 0 0 2px #ffffff55!important;
}
.fiveo-avatar.fiveo-frame-orbit,.avatar-tier-sample.fiveo-frame-orbit{
 border:6px double var(--avatar-border,var(--special-frame))!important;
 outline:2px solid #8ddaff;outline-offset:3px;
 animation:fiveo-orbit-superglow 2.5s ease-in-out infinite!important;
}
.fiveo-avatar.fiveo-frame-fiveo,.avatar-tier-sample.fiveo-frame-fiveo{
 border:7px double var(--avatar-border,var(--special-frame))!important;
 outline:3px solid #dcb3ff;outline-offset:3px;
 animation:fiveo-fiveo-superglow 2.5s ease-in-out infinite!important;
}
@keyframes fiveo-orbit-superglow{
 0%,100%{box-shadow:0 0 0 3px #61bdffcc,0 0 15px 5px #3eafffa8,0 0 30px 9px #36a3ff66,inset 0 0 10px #c0ebff77;filter:drop-shadow(0 0 4px #a4e6ff)}
 50%{box-shadow:0 0 0 4px #a8e7ff,0 0 24px 9px #6dcfffed,0 0 48px 15px #4eaaffbb,inset 0 0 16px #d2f6ffcc;filter:drop-shadow(0 0 10px #85d7ff)}
}
@keyframes fiveo-fiveo-superglow{
 0%,100%{box-shadow:0 0 0 3px #c58bffdd,0 0 18px 6px #b47affbb,0 0 34px 10px #8d5aff77,inset 0 0 12px #f0d8ff99;filter:drop-shadow(0 0 5px #e3c3ff)}
 50%{box-shadow:0 0 0 4px #e4bbff,0 0 27px 10px #cb90ffff,0 0 55px 18px #ae68ffcc,inset 0 0 18px #f4ddffdd;filter:drop-shadow(0 0 12px #d6a6ff)}
}
.avatar-special-preview{border-color:#53717a!important;background:#152b36!important}
.avatar-special-preview.selected{border-color:#a2e4d1!important}
.avatar-special-preview .avatar-tier-sample{
 --avatar-border:var(--special-frame);
 background:#24424b;border-color:var(--special-frame)!important;
 width:36px;height:36px;flex-basis:36px;
}
.avatar-tier-sample.avatar-tier-default{border-radius:50%!important}
.avatar-special-preview[data-value="ORBIT"],.avatar-special-preview[data-value="FIVEO"]{animation:none!important;box-shadow:none!important}
.avatar-special-preview[data-value="ORBIT"] .avatar-tier-sample,
.avatar-special-preview[data-value="FIVEO"] .avatar-tier-sample{overflow:visible}
@media(prefers-reduced-motion:reduce){
 .fiveo-avatar.fiveo-frame-orbit,.fiveo-avatar.fiveo-frame-fiveo,
 .avatar-tier-sample.fiveo-frame-orbit,.avatar-tier-sample.fiveo-frame-fiveo{animation:none!important;filter:none!important}
}

/* v0.2.88 — rating panel: allocate real space to the 40-character note without adding a scrollbar */
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel){gap:3px!important;align-content:start}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .reactions{gap:3px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .reaction{padding:3px 6px!important;min-height:39px!important;line-height:1.2!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .fuel-rating{padding:10px 13px!important;margin:1px 0!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .fuel-rating #fuel-slider{margin:10px 0 5px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .last-signal-input{height:72px!important;min-height:72px!important;max-height:72px!important;padding:10px 12px!important;line-height:1.45!important;font-size:14px!important;overflow:hidden!important;flex-shrink:0!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .last-signal-count{margin:0!important;line-height:1.1!important;text-align:right}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .last-signal-label{margin-top:2px!important}
.app-content:has(.watch-layout) .watch-layout>.panel:not(.watch-player-panel) .primary{flex-shrink:0!important}
/* All guestbook avatars reuse the same composer as profile and ranking. */
.profile-wandering-star .signal-star{width:44px;height:44px}
.profile-wandering-star .guestbook-avatar{display:flex;align-items:center;justify-content:center;pointer-events:none}
.profile-wandering-star .guestbook-avatar .fiveo-avatar{flex-shrink:0}
.profile-wandering-star.message-pinned{z-index:100!important;animation-play-state:paused!important}
.profile-wandering-star.message-pinned .signal-star-tooltip{display:block!important;pointer-events:auto!important}
.profile-wandering-star .signal-star-tooltip{pointer-events:auto;cursor:default;min-width:190px;max-width:min(300px,75vw);z-index:200!important}
.profile-wandering-star .signal-star-tooltip .signal-report-link{display:block;width:100%;border:1px solid #76b9a3;border-radius:8px;padding:7px 8px;margin-top:8px;background:#254e48;color:#ddfff3;cursor:pointer;text-align:center;font-size:12px}
.profile-wandering-star .signal-message-close{position:absolute;right:5px;top:3px;border:0;background:transparent;color:#c4e6de;cursor:pointer;font-size:18px;line-height:1}
.profile-wandering-star .signal-star-tooltip{padding-top:21px}
.partner-avatar .fiveo-avatar{display:inline-grid}
.match-header-person{display:flex;align-items:center;gap:6px}

/* v0.2.89: pattern #14 is now PLANET (not desert camo).
   All planet/ring colors derive from the selected --avatar-bg color. */
.fiveo-avatar.avatar-pattern-14,.avatar-pattern-preview.avatar-pattern-14{
  --avatar-pattern:none;
  background-color:var(--avatar-bg)!important;
  isolation:isolate;
}
.fiveo-avatar.avatar-pattern-14::before,.avatar-pattern-preview.avatar-pattern-14::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:1!important;display:block!important;
  background-color:transparent!important;
  background-image:
    radial-gradient(ellipse 27% 27% at 48% 53%,color-mix(in srgb,var(--avatar-bg) 35%,#f2fcff) 0%,color-mix(in srgb,var(--avatar-bg) 70%,#647caa) 56%,color-mix(in srgb,var(--avatar-bg) 45%,#101d3d) 100%,transparent 101%),
    radial-gradient(circle at 83% 20%,#ffffffba 0 1.5%,transparent 2%),
    radial-gradient(circle at 20% 78%,#ffffffa8 0 1.2%,transparent 1.8%),
    radial-gradient(circle at 16% 30%,#ffffffa8 0 .9%,transparent 1.5%)!important;
  background-size:100% 100%!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
}
.fiveo-avatar.avatar-pattern-14::after,.avatar-pattern-preview.avatar-pattern-14::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:1!important;display:block!important;
  background-color:transparent!important;
  background-image:
    radial-gradient(ellipse 44% 13% at 48% 53%,transparent 56%,color-mix(in srgb,var(--avatar-bg) 35%,#efffff) 62% 70%,transparent 76%),
    radial-gradient(ellipse 50% 17% at 48% 53%,transparent 70%,color-mix(in srgb,var(--avatar-bg) 65%,#d2f2ff) 73% 79%,transparent 82%)!important;
  background-size:100% 100%!important;
  transform:rotate(-25deg)!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
}
.fiveo-avatar.avatar-pattern-14 svg{z-index:2}

/* v0.2.90: unobstructed avatar, tooltip outside circular image */
.avatar-profile-trigger .avatar-edit-hint{display:none!important}
.avatar-profile-trigger .avatar-hover-tooltip{
 position:absolute;left:50%;bottom:calc(100% + 13px);transform:translate(-50%,5px);
 width:max-content;max-width:220px;padding:8px 12px;box-sizing:border-box;
 border:1px solid #8bcdb8aa;border-radius:10px;background:#0e2832f2;
 color:#d5ffef;font-size:12px;font-weight:650;line-height:1.3;white-space:nowrap;
 box-shadow:0 8px 22px #0008;opacity:0;visibility:hidden;pointer-events:none;
 z-index:10;transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.avatar-profile-trigger .avatar-hover-tooltip::after{
 content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
 border:6px solid transparent;border-top-color:#0e2832;
}
.avatar-profile-trigger:hover .avatar-hover-tooltip,
.avatar-profile-trigger:focus-visible .avatar-hover-tooltip{
 opacity:1;visibility:visible;transform:translate(-50%,0);
}
@media(hover:none){.avatar-profile-trigger .avatar-hover-tooltip{display:none}}
@media(prefers-reduced-motion:reduce){.avatar-profile-trigger .avatar-hover-tooltip{transition:none}}