/* Play MMO v0.4.5 — design additions; all visuals are local CSS/SVG and follow the saved theme. */
:root {--pm-gold:#b88946;--pm-blue:#347ba5;--pm-surface:#fefefe;--pm-veil:rgba(43,88,125,.09)}
html[data-theme="dark"] {--pm-gold:#e3be75;--pm-blue:#7fc5ed;--pm-surface:#141f2f;--pm-veil:rgba(131,200,250,.06)}
/* Chronicle icon system */
.chron-icon{display:inline-grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border:1px solid color-mix(in srgb,var(--pm-gold) 35%,transparent);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--pm-gold) 10%,var(--surface)),var(--surface));color:var(--pm-gold);vertical-align:middle;box-shadow:inset 0 1px 0 #ffffff19}
.chron-icon svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chron-icon-interlude,.chron-icon-gracia{color:#bd7054;border-color:#d5a18a70}
.chron-icon-highfive,.chron-icon-god{color:var(--pm-blue);border-color:#81bbdd65}
.chron-icon-classic{color:#b69755}
.chron-icon-essence{color:#887bd4}
.chron-icon-kamael{color:#679cac}
.chron-label{display:inline-flex;align-items:center;gap:8px;min-width:0}
.realm-row-name{gap:5px!important;min-width:0}
.realm-row-name .chron-icon{flex-basis:22px;width:22px;height:22px;border-radius:7px}
.realm-row-name .chron-icon svg{width:16px;height:16px}
.realm-row-name strong{min-width:0;overflow-wrap:anywhere}
.realm-row-flair{width:20px!important;height:20px!important;font-size:10px!important}
/* Compact actual server indexes remain photo-free. */
.realm-tier-vip .realm-row-name strong{color:var(--pm-gold)!important}
.realm-tier-premium .realm-row-name strong{color:var(--pm-blue)!important}
.realm-row:hover .chron-icon{transform:scale(1.06);transition:transform .18s}
/* Hero — follows main upcoming/opened columns, not before them */
.gateway-feature{position:relative;min-height:285px;margin:10px 0 28px;padding:31px 33px;display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.44fr);align-items:center;overflow:hidden;isolation:isolate;border:1px solid #c5b18b;border-radius:23px;background:radial-gradient(ellipse at 84% 48%,#326c87 0%,transparent 51%),linear-gradient(112deg,#101b2e 0%,#202b43 50%,#172c40 100%);color:#f4f0e6;box-shadow:0 17px 44px rgba(12,29,47,.24)}
.gateway-feature:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.64;background:repeating-linear-gradient(125deg,transparent 0 34px,rgba(219,185,118,.04) 35px 36px),radial-gradient(circle at 72% 46%,rgba(124,222,235,.28),transparent 38%)}
.gateway-feature:after{content:"";position:absolute;inset:0;z-index:-1;border:1px solid rgba(239,207,135,.35);border-radius:22px;pointer-events:none;box-shadow:inset 0 0 0 8px rgba(238,209,151,.03)}
.gateway-content{position:relative;z-index:2;max-width:580px}
.gateway-kicker{display:inline-flex;align-items:center;gap:8px;color:#efce89;font-size:10px;letter-spacing:.16em;font-weight:900}
.gateway-feature h2{font:800 clamp(25px,2.6vw,38px)/1.12 Georgia,"Times New Roman",serif;letter-spacing:-.018em;color:#fff6df!important;margin:15px 0 13px;max-width:590px}
.gateway-feature h2 em{font-style:normal;color:#e9bf6c}
.gateway-feature p{font-size:13px;line-height:1.65;color:#c4d5e2;max-width:470px;margin:0 0 22px}
.gateway-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.gateway-primary{background:linear-gradient(125deg,#f5d894,#bc8c43)!important;color:#31220f!important;border:1px solid #e7c384!important;box-shadow:0 7px 22px #0004!important;font-weight:850}
.gateway-secondary{font-size:12px;color:#d0eafa;font-weight:800;text-decoration:none}
.gateway-secondary:hover{color:#fff;text-decoration:underline}
.gateway-signs{display:flex;flex-wrap:wrap;gap:13px;margin-top:24px;font-size:10px;color:#afc8d8;letter-spacing:.02em}
.gateway-art{position:absolute;right:-18px;top:-18px;width:45%;height:calc(100% + 35px);display:flex;align-items:center;justify-content:center;pointer-events:none}
.gateway-art img{height:115%;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 16px rgba(103,238,238,.30))}
html[data-theme="light"] .gateway-feature{background:radial-gradient(ellipse at 82% 50%,#387f9c,transparent 51%),linear-gradient(112deg,#142843,#1a3452 58%,#1e4159)}
html[data-theme="dark"] .gateway-feature{border-color:#987643;background:radial-gradient(ellipse at 85% 51%,rgba(45,140,169,.65),transparent 50%),linear-gradient(112deg,#080c18,#151d30 65%,#122436)}
/* three tiers, with real servers and no photos */
.tier-gallery{margin:20px 0 33px}
.tier-gallery-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:0 0 14px}
.tier-gallery-head h2{font:800 clamp(22px,2vw,28px)/1.2 Georgia,"Times New Roman",serif;color:var(--text)!important;margin:8px 0}
.tier-gallery-head p{color:var(--muted);font-size:12px;margin:0}
.tier-gallery-head>a{font-size:11px;font-weight:850;color:var(--accent);white-space:nowrap}
.tier-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.tier-card{display:flex;flex-direction:column;min-width:0;min-height:250px;padding:17px 14px 13px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,var(--surface-2),var(--surface));box-shadow:var(--shadow);position:relative;overflow:hidden}
.tier-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent)}
.tier-card-vip{border-color:var(--vip-line)!important;background:linear-gradient(155deg,var(--vip-bg),var(--surface))!important}
.tier-card-vip:before{background:linear-gradient(90deg,#af803c,#f5dc9b,#b17b35)}
.tier-card-premium{border-color:var(--premium-line)!important;background:linear-gradient(155deg,var(--premium-bg),var(--surface))!important}
.tier-card-premium:before{background:linear-gradient(90deg,#2f6e9e,#9dd4f3,#347ca7)}
.tier-card-simple:before{background:linear-gradient(90deg,#8594aa,#ced8e1)}
.tier-card-head{display:flex;gap:11px;align-items:flex-start;padding:3px 0 12px;border-bottom:1px solid var(--line);min-height:75px}
.tier-emblem{display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;border-radius:11px;border:1px solid var(--line);background:var(--surface);font-size:22px;color:var(--pm-gold)}
.tier-card-premium .tier-emblem{color:var(--pm-blue)}.tier-card-simple .tier-emblem{color:var(--muted)}
.tier-flag{font-size:12px;font-weight:950;letter-spacing:.12em;color:var(--text)}
.tier-card-vip .tier-flag{color:var(--pm-gold)}.tier-card-premium .tier-flag{color:var(--pm-blue)}
.tier-card-head p{font-size:10px;line-height:1.45;color:var(--muted);margin:5px 0 0}
.tier-card-list{flex:1;display:flex;flex-direction:column;gap:0;padding:5px 0 10px}
.tier-server{display:flex;align-items:center;gap:6px;min-width:0;padding:9px 0;border-bottom:1px solid var(--line);color:var(--text)!important;text-decoration:none}
.tier-server:last-child{border-bottom:0}
.tier-server .chron-icon{flex-basis:24px;width:24px;height:24px}
.tier-server-name{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;font-size:11px;font-weight:850;overflow-wrap:anywhere;line-height:1.2}
.tier-server-name small{font-size:9px;color:var(--muted);font-weight:550}
.tier-server strong{font-size:11px;color:var(--pm-blue);white-space:nowrap}
.tier-server>span:last-child{font-size:13px;color:var(--muted)}
.tier-server:hover .tier-server-name{color:var(--accent)}
.tier-empty{display:flex;align-items:center;min-height:80px;font-size:11px;line-height:1.6;color:var(--muted)}
.tier-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:12px 4px 0;font-size:11px;color:var(--accent)!important;font-weight:900}
.tier-card-foot:hover{text-decoration:none;color:var(--pm-gold)!important}
/* luxury server detail, preserve existing profile functionality */
.detail-shell{border-radius:21px!important;overflow:hidden}
.detail-shell.detail-tier-vip{border-color:var(--vip-line)!important}
.detail-banner-premium{height:270px;overflow:hidden;isolation:isolate;background:linear-gradient(115deg,#101729,#244766)!important}
.detail-banner-premium .detail-cover{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(ellipse at 68% 50%,rgba(101,213,230,.45),transparent 50%),linear-gradient(115deg,#111f35,#294c69)!important}
.detail-cover .cover-sig{font-size:0!important;background:url('/assets/portal.svg') center/contain no-repeat;display:block;position:absolute;top:-35px!important;right:7%!important;width:40%;height:340px;opacity:.84;filter:drop-shadow(0 0 17px rgba(105,229,240,.20))}
.detail-cover:has(>img) .cover-sig{display:none!important}
.detail-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.detail-banner-premium:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,16,29,.5),transparent 55%),linear-gradient(0deg,rgba(9,16,29,.35),transparent 70%);pointer-events:none}
.detail-banner-shield{position:absolute;left:30px;bottom:26px;z-index:2;display:flex;flex-direction:column;gap:8px;color:#f4deb7}
.detail-banner-shield span{font-size:11px;letter-spacing:.16em;font-weight:800}
.detail-banner-shield b{font:900 clamp(28px,4vw,50px) Georgia,serif;letter-spacing:.10em;color:#fff3d1}
.detail-banner-crest{position:absolute;right:8%;top:14%;font-size:150px;color:#f7deb077;line-height:1;z-index:1;opacity:.15}
.detail-intro{gap:18px;flex-wrap:wrap;background:var(--surface)}
.detail-intro .detail-logo{flex:0 0 82px;border:2px solid var(--vip-line);box-shadow:0 6px 25px rgba(30,75,107,.11)}
.detail-logo-fallback .chron-icon{width:54px;height:54px;border-radius:15px}
.detail-logo-fallback .chron-icon svg{width:37px;height:37px}
.detail-intro .detail-text h1{font:800 clamp(25px,2.6vw,39px)/1.2 Georgia,"Times New Roman",serif;color:var(--text)!important;margin:9px 0}
.detail-chronicle-badge{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:8px 0;color:var(--muted);font-size:11px;font-weight:800}
.detail-separator{color:var(--pm-gold)}
.detail-intro-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:13px 0;padding:13px 18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(130deg,var(--surface-2),var(--surface));color:var(--muted);font-size:12px;font-weight:800}
.detail-intro-strip a{margin-left:auto;color:var(--accent)}
.detail-stats{margin:13px 0 19px}
.detail-stats>div{border-radius:14px!important;box-shadow:0 7px 23px rgba(35,75,98,.06)!important}
.detail-stats .chron-label{font-size:14px;white-space:normal}
.detail-columns-elevated .panel{border-radius:18px!important}
.detail-columns-elevated h2{font:800 clamp(19px,2vw,24px) Georgia,serif}
.detail-columns-elevated .quick-panel{border-top:3px solid var(--pm-gold)!important}
.detail-tools .btn{white-space:nowrap}
/* breakpoints */
@media(max-width:1380px){.tier-cards{gap:9px}.tier-card{padding:13px 10px}.tier-server .chron-icon{display:none}.gateway-art{opacity:.8}}
@media(max-width:1050px){.tier-cards{grid-template-columns:1fr}.tier-card{min-height:0;padding:16px}.tier-card-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}.tier-server .chron-icon{display:inline-grid}.gateway-feature{grid-template-columns:1fr minmax(120px,.28fr)}.gateway-art{right:-12px;width:38%}}
@media(max-width:720px){.gateway-feature{grid-template-columns:1fr;min-height:315px;padding:23px 19px}.gateway-feature h2{font-size:28px}.gateway-art{width:70%;right:-65px;top:12px;opacity:.28;z-index:-1}.gateway-kicker{font-size:9px}.gateway-signs{gap:8px}.tier-gallery-head{align-items:flex-start;flex-direction:column;gap:6px}.tier-card-list{display:flex}.tier-server .chron-icon{display:inline-grid}.detail-banner-premium{height:210px}.detail-banner-shield{left:18px;bottom:17px}.detail-cover .cover-sig{right:-8%!important;width:62%}.detail-intro{padding:20px 17px}.detail-intro-strip a{margin-left:0}.realm-row-name .realm-row-flair{display:none}.realm-row-name .chron-icon{width:19px;height:19px;flex-basis:19px}.realm-row-name .chron-icon svg{width:14px;height:14px}.realm-row-name{gap:3px!important}.realm-row-name .row-premium,.realm-row-name .row-vip{font-size:7px!important;padding:2px 4px!important;gap:2px}.detail-tools{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.gateway-feature *, .tier-card *, .chron-icon{animation:none!important;transition:none!important}}