/* Veltrion Web Platform Phase 21: portal main frame rebuild */
:root {
    --v21-bg: #050403;
    --v21-panel: rgba(9, 8, 7, .76);
    --v21-panel2: rgba(18, 15, 12, .86);
    --v21-line: rgba(192, 151, 86, .28);
    --v21-line-soft: rgba(255, 255, 255, .10);
    --v21-gold: #e8c174;
    --v21-gold2: #a56b2d;
    --v21-red: #8b140f;
    --v21-red2: #d5462f;
    --v21-green: #35d474;
    --v21-orange: #e98b32;
    --v21-muted: #a99d8b;
}

.vweb-shell {
    background:
        radial-gradient(circle at 70% 8%, rgba(153, 21, 15, .20), transparent 34%),
        radial-gradient(circle at 28% 10%, rgba(207, 175, 104, .12), transparent 28%),
        linear-gradient(180deg, #060504 0%, #090704 38%, #030303 100%);
}

.vweb-header--portal {
    max-width: 1440px;
    min-height: 60px;
    border-color: rgba(232, 193, 116, .18);
    background: linear-gradient(180deg, rgba(8, 7, 5, .92), rgba(7, 6, 5, .72));
    box-shadow: 0 20px 70px rgba(0, 0, 0, .34);
}

.vweb-brand--portal .vweb-brand__crest {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 154, .22), rgba(112, 30, 20, .34));
    border: 1px solid rgba(232, 193, 116, .38);
    color: var(--v21-gold);
    font-weight: 900;
    font-family: Georgia, serif;
    box-shadow: inset 0 0 18px rgba(0,0,0,.55), 0 0 24px rgba(172, 69, 40, .22);
}

.vweb-brand--portal strong {
    font-size: 24px;
    letter-spacing: .12em;
    color: #efe3cc;
    text-shadow: 0 2px 0 #000, 0 0 20px rgba(232, 193, 116, .20);
}

.vweb-brand--portal em {
    color: #9b7b4e;
    letter-spacing: .42em;
}

.vweb-nav--portal {
    gap: clamp(10px, 1.6vw, 32px);
}

.vweb-nav--portal a {
    color: #e7dbc6;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -.02em;
    opacity: .92;
}

.vweb-header__actions--portal .vweb-btn {
    min-height: 34px;
    padding-inline: 16px;
    border-radius: 2px;
    text-transform: none;
}

.vweb-main {
    max-width: 1440px;
    padding-top: 18px;
}

.vweb-portal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
        "main side"
        "servers side"
        "news side"
        "rank rank";
    gap: 12px;
    min-height: 760px;
    margin-bottom: 18px;
    isolation: isolate;
}

.vweb-portal__art {
    position: absolute;
    inset: -96px -40px 330px -40px;
    z-index: -1;
    overflow: hidden;
    border-bottom: 1px solid rgba(232, 193, 116, .12);
    background:
        linear-gradient(90deg, rgba(0,0,0,.80), rgba(0,0,0,.05) 42%, rgba(0,0,0,.78) 100%),
        radial-gradient(circle at 61% 16%, rgba(255,255,255,.36), transparent 10%),
        radial-gradient(circle at 72% 28%, rgba(185, 25, 16, .26), transparent 16%),
        radial-gradient(circle at 44% 30%, rgba(214, 191, 151, .20), transparent 22%),
        linear-gradient(180deg, #171615, #070605 72%, #030303 100%);
}

.vweb-portal__moon {
    position: absolute;
    left: 52%;
    top: 42px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.92), rgba(213,210,196,.22) 36%, transparent 68%);
    filter: blur(.2px);
    opacity: .56;
}

.vweb-portal__castle {
    position: absolute;
    right: 19%;
    bottom: 0;
    width: 300px;
    height: 350px;
    background:
        linear-gradient(180deg, transparent 0 12%, rgba(17,17,18,.75) 12% 100%),
        linear-gradient(120deg, transparent 0 42%, rgba(0,0,0,.78) 42% 46%, transparent 46% 100%);
    clip-path: polygon(4% 100%,4% 54%,11% 54%,11% 36%,17% 36%,17% 18%,22% 36%,27% 36%,27% 48%,34% 48%,34% 24%,39% 24%,42% 4%,46% 24%,52% 24%,52% 44%,59% 44%,59% 16%,64% 16%,69% 36%,74% 36%,74% 54%,84% 54%,84% 42%,90% 42%,96% 100%);
    opacity: .70;
}

.vweb-portal__ember {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ff6b35;
    box-shadow: 0 0 16px #ff341e, 0 0 28px rgba(255, 79, 35, .55);
    animation: v21ember 6s ease-in-out infinite;
}
.vweb-portal__ember--a { right: 27%; top: 22%; }
.vweb-portal__ember--b { right: 8%; top: 42%; animation-delay: 1.4s; }
.vweb-portal__ember--c { left: 14%; top: 50%; animation-delay: 2.1s; }
@keyframes v21ember { 0%,100% { transform: translateY(0); opacity:.25 } 50% { transform: translateY(-28px); opacity:1 } }

.vweb-portal__main {
    grid-area: main;
    min-height: 360px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(232, 193, 116, .13);
    background:
        linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.18) 54%, rgba(0,0,0,.46)),
        radial-gradient(circle at 75% 32%, rgba(153, 23, 16, .28), transparent 17%),
        linear-gradient(180deg, rgba(21,19,17,.55), rgba(0,0,0,.82));
    box-shadow: inset 0 0 80px rgba(0,0,0,.58), 0 22px 70px rgba(0,0,0,.38);
}

.vweb-portal__copy {
    position: relative;
    z-index: 3;
    padding: clamp(38px, 6vw, 76px) 28px 40px 36px;
    max-width: 540px;
}

.vweb-portal__eyebrow {
    margin: 0 0 10px;
    color: #fbf0dc;
    font-size: clamp(18px, 2.4vw, 28px);
    font-weight: 900;
    text-shadow: 0 4px 12px rgba(0,0,0,.8);
}

.vweb-portal h1 {
    margin: 0;
    color: #e8dcc7;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(58px, 8vw, 116px);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: .9;
    text-shadow: 0 4px 0 #000, 0 0 32px rgba(239, 203, 141, .24);
}

.vweb-portal__desc {
    margin: 20px 0 26px;
    color: #d5c8b2;
    font-weight: 700;
    line-height: 1.7;
}

.vweb-portal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vweb-portal__party {
    position: absolute;
    right: 0;
    bottom: -18px;
    width: min(58%, 640px);
    height: 390px;
    pointer-events: none;
}

.vweb-heroic {
    position: absolute;
    bottom: 0;
    width: 150px;
    height: 300px;
    border-radius: 44% 44% 8% 8%;
    filter: drop-shadow(0 28px 24px rgba(0,0,0,.65));
    background:
        radial-gradient(circle at 50% 10%, rgba(232,193,116,.42), transparent 10%),
        linear-gradient(180deg, rgba(220,210,194,.78), rgba(72,62,54,.86) 34%, rgba(18,18,18,.98));
    clip-path: polygon(50% 0, 63% 13%, 76% 34%, 92% 72%, 82% 100%, 18% 100%, 8% 72%, 24% 34%, 37% 13%);
}
.vweb-heroic--knight { left: 39%; width: 190px; height: 360px; background: radial-gradient(circle at 50% 9%, rgba(244,221,176,.8), transparent 9%), linear-gradient(180deg, #786247, #2a2928 38%, #0c0b0b); z-index: 4; }
.vweb-heroic--elf { left: 18%; height: 315px; background: radial-gradient(circle at 50% 10%, rgba(255,244,229,.7), transparent 9%), linear-gradient(180deg, #d8d0c8, #50413b 38%, #0e0d0c); z-index: 3; }
.vweb-heroic--mage { left: 66%; height: 325px; background: radial-gradient(circle at 50% 10%, rgba(255,220,210,.7), transparent 9%), linear-gradient(180deg, #7c1f1c, #211015 45%, #080506); z-index: 3; }
.vweb-heroic--rogue { left: 4%; height: 275px; background: radial-gradient(circle at 50% 10%, rgba(190,190,190,.42), transparent 9%), linear-gradient(180deg, #1c1b20, #0c0b0d 46%, #050505); z-index: 2; }

.vweb-portal__side {
    grid-area: side;
    display: grid;
    gap: 10px;
    align-content: start;
}

.vweb-start-gate,
.vweb-login-card,
.vweb-community-card,
.vweb-server-strip,
.vweb-portal-panel,
.vweb-portal-ranking-preview article {
    border: 1px solid var(--v21-line);
    background: linear-gradient(180deg, rgba(14,11,9,.86), rgba(4,4,4,.88));
    box-shadow: inset 0 0 40px rgba(0,0,0,.55), 0 18px 60px rgba(0,0,0,.30);
}

.vweb-start-gate {
    position: relative;
    padding: 20px 16px 14px;
    min-height: 158px;
    overflow: hidden;
}
.vweb-start-gate::before {
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 50% 0%, rgba(224,52,33,.28), transparent 45%);
    pointer-events:none;
}
.vweb-start-gate__crown {
    width: 70px;
    height: 36px;
    margin: 0 auto 8px;
    border: 1px solid rgba(232,193,116,.35);
    clip-path: polygon(0 100%, 8% 34%, 28% 70%, 50% 8%, 72% 70%, 92% 34%, 100% 100%);
    background: linear-gradient(135deg, rgba(255,236,168,.95), rgba(108,34,23,.75));
    box-shadow: 0 0 22px rgba(221,52,34,.28);
}
.vweb-start-gate__button {
    position:relative;
    display:grid;
    place-items:center;
    min-height:72px;
    color:#fff7e6;
    text-decoration:none;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.04em;
    background: linear-gradient(180deg, #8e1f17, #4d0b08);
    border:1px solid rgba(255,210,133,.35);
    text-shadow:0 2px 0 #000;
}
.vweb-start-gate__button small { display:block; margin-top:3px; font-size:11px; color:#d5b06e; letter-spacing:.18em; }
.vweb-start-gate__links { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }
.vweb-start-gate__links a { display:grid; gap:5px; place-items:center; min-height:52px; color:#d8c8a8; text-decoration:none; font-weight:800; font-size:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.vweb-start-gate__links span { color:var(--v21-gold); font-size:16px; }

.vweb-login-card { padding:14px; }
.vweb-login-card__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:#e8dcc7; font-weight:900; }
.vweb-login-card__head strong { color:var(--v21-gold); font-size:12px; }
.vweb-login-card__body { display:grid; gap:7px; }
.vweb-login-card input { width:100%; height:38px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.38); color:#cfc2ad; padding:0 10px; outline:0; }
.vweb-login-card__login,
.vweb-login-card__join { min-height:38px; display:grid; place-items:center; color:#fff; text-decoration:none; font-weight:900; border:1px solid rgba(255,255,255,.12); }
.vweb-login-card__login { background:linear-gradient(180deg,#9d1e18,#5b0d09); }
.vweb-login-card__join { color:#e8c174; background:rgba(232,193,116,.05); border-color:rgba(232,193,116,.28); }
.vweb-login-card.is-logged-in input { display:none; }
.vweb-login-card.is-logged-in .vweb-login-card__body { grid-template-columns:1fr 1fr; }
.vweb-login-card.is-logged-in .vweb-login-card__login::before { content:'로비 '; }
.vweb-login-card.is-logged-in .vweb-login-card__join::before { content:'주문함 '; }

.vweb-community-card { padding:14px; }
.vweb-community-card h3 { margin:0 0 10px; font-size:15px; color:#e7d8be; }
.vweb-community-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.vweb-community-grid a { min-height:46px; display:grid; place-items:center; color:#cdbb9d; text-decoration:none; font-size:12px; font-weight:800; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }

.vweb-server-strip { grid-area: servers; padding:14px; }
.vweb-server-strip__title { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:#efe3ca; }
.vweb-server-strip__title span { color:#bda16e; font-size:12px; }
.vweb-server-list { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.vweb-server-list article { min-height:64px; padding:10px 12px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }
.vweb-server-list b { display:block; color:#e6d8bf; font-size:13px; }
.vweb-server-list span { display:block; margin:4px 0 6px; font-size:12px; font-weight:900; }
.vweb-server-list span::before { content:'● '; }
.vweb-server-list em { display:block; height:7px; border-radius:999px; background:repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px); opacity:.9; }
.is-green { color: var(--v21-green); }
.is-orange { color: var(--v21-orange); }
.is-yellow { color: #e7ca48; }

.vweb-portal-newsline { grid-area: news; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.vweb-portal-panel { min-height:168px; padding:14px; overflow:hidden; }
.vweb-portal-panel__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.vweb-portal-panel__head h3 { margin:0; color:#f1e2c5; font-size:16px; }
.vweb-portal-panel__head a { color:#bda16e; font-size:12px; text-decoration:none; }
.vweb-portal-panel p { margin:0; color:#a99d8b; font-size:13px; }
.vweb-portal-list { display:grid; gap:8px; }
.vweb-portal-list a { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; color:#d5c7af; text-decoration:none; font-size:13px; }
.vweb-portal-list b { color:#e15e3d; font-size:11px; border:1px solid rgba(225,94,61,.35); padding:2px 5px; }
.vweb-portal-list time { color:#7f725d; font-size:11px; }
.vweb-portal-update-card { min-height:122px; display:flex; flex-direction:column; justify-content:center; padding:16px; background: radial-gradient(circle at 78% 35%, rgba(118,92,197,.26), transparent 34%), linear-gradient(135deg, rgba(17,16,24,.88), rgba(3,3,4,.94)); border:1px solid rgba(255,255,255,.08); }
.vweb-portal-update-card span { color:#d8b260; font-size:11px; font-weight:900; letter-spacing:.14em; }
.vweb-portal-update-card strong { color:#f2e0c2; font-size:24px; margin-top:8px; }
.vweb-portal-update-card p { margin-top:8px; }

.vweb-portal-ranking-preview { grid-area: rank; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vweb-portal-ranking-preview article { padding:14px; }
.vweb-portal-ranking-preview header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:10px; }
.vweb-portal-ranking-preview strong { color:#f2e0c2; font-size:18px; }
.vweb-portal-ranking-preview span { color:#8e7b5f; font-size:12px; }
.vweb-portal-rank-list { display:grid; gap:8px; }
.vweb-portal-rank-list div { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; min-height:36px; padding:7px 8px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.vweb-portal-rank-list b { color:#e6c06d; }
.vweb-portal-rank-list span { color:#d7c8ad; }
.vweb-portal-rank-list em { color:#9a8a70; font-style:normal; }

.vweb-portal + .vweb-notification-center,
.vweb-portal + * {
    scroll-margin-top: 90px;
}

@media (max-width: 1180px) {
    .vweb-portal { grid-template-columns:1fr; grid-template-areas:"main" "side" "servers" "news" "rank"; }
    .vweb-portal__side { grid-template-columns:1fr 1fr; }
    .vweb-community-card { grid-column:1 / -1; }
    .vweb-portal__party { width:52%; opacity:.86; }
}

@media (max-width: 820px) {
    .vweb-main { padding-inline:12px; }
    .vweb-portal { gap:8px; min-height:auto; }
    .vweb-portal__main { min-height:420px; }
    .vweb-portal__copy { padding:34px 20px 170px; }
    .vweb-portal__party { width:100%; height:230px; right:-8%; opacity:.58; }
    .vweb-heroic { transform:scale(.72); transform-origin:bottom center; }
    .vweb-portal__side,
    .vweb-portal-newsline,
    .vweb-portal-ranking-preview { grid-template-columns:1fr; }
    .vweb-server-list { grid-template-columns:1fr; }
    .vweb-server-list article { display:grid; grid-template-columns:1fr auto 90px; align-items:center; min-height:48px; }
    .vweb-header--portal { margin-inline:12px; }
    .vweb-header__actions--portal { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    .vweb-portal__ember { animation:none; }
}