/* ===== 허브 페이지 (아케이드) ===== */
.hub-ov{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:14px;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.hub-page{position:relative;width:min(100%,460px);max-height:92vh;overflow:auto;padding:14px;border-radius:16px;background:linear-gradient(#1a0609,#080203);border:1px solid rgba(245,201,106,.4);box-shadow:0 12px 40px rgba(0,0,0,.7);color:#fde7b0}
.hub-x{position:absolute;top:8px;right:10px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);color:#fde7b0;border:1px solid rgba(255,255,255,.2)}
.hub-hero{position:relative;aspect-ratio:10/3;border-radius:10px;overflow:hidden}
.hub-hero img{width:100%;height:100%;object-fit:cover}
.hub-hero b{position:absolute;left:5%;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:900;color:#fff3cf;text-shadow:0 2px 4px #000,0 0 12px rgba(255,190,110,.5)}
.hub-rec{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
.hub-rec>div{display:flex;flex-direction:column;align-items:center;padding:8px 0;border-radius:10px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
.hub-rec b{font-size:1.25rem;font-weight:900;color:#fff3cf}.hub-rec small{font-size:.68rem;opacity:.7}
.hub-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hub-big{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 4px;border-radius:12px;background:radial-gradient(circle at 50% 30%,#3a0a10,#120204 75%);border:1px solid rgba(245,201,106,.45);color:#fff3cf;font-weight:900;font-size:.95rem;cursor:pointer}
.hub-big img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 4px #000)}
.hub-big:hover{filter:brightness(1.15)}
.hub-sub{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:8px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);color:#d4d4d8;font-size:.8rem;font-weight:700}
/* 스토리 허브: 하단 메뉴 고정 + 시련의 탑 강조 */
.story-hub .hub-menu{position:sticky;bottom:0;z-index:5;padding:8px 0 calc(8px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(5,2,4,.92) 30%)}
.story-hub #story-quest{border-color:rgba(245,201,106,.7);background:radial-gradient(circle at 50% 30%,#3a0a10,#120204 80%);color:#fde68a}
/* PvP 허브: 1~10위 */
.pvp-top{margin-top:10px}
.pvp-top-h{font-size:.75rem;font-weight:800;opacity:.75;margin:0 2px 4px}
.pvp-top .pvp-rk-row{padding:5px 8px}
/* 아케이드 허브(z 55) 위에 아케이드 설정 레이어 */
#arcade-opts{z-index:60}
/* 유리의 특강 (js/arcade-tut.js) */
.yt-hub{border-color:rgba(232,121,249,.45);color:#f5d0fe}
.yt-new{margin-left:4px;padding:0 5px;border-radius:6px;background:#e11d48;color:#fff;font-size:.65rem}
.yt-ov{z-index:9500}
.yt-page{max-width:420px}
.yt-head{display:flex;gap:10px;align-items:center;margin:4px 28px 12px 0}
.yt-head img{width:64px;height:64px;flex:none;object-fit:cover;object-position:top;border-radius:14px;border:2px solid #f5c96a;background:#000}
.yt-head b{color:#f5c96a;font-size:1.05rem}.yt-head p{margin:2px 0 0;color:#e4e4e7;font-size:.85rem;line-height:1.35}
.yt-list{display:flex;flex-direction:column;gap:8px}
.yt-st{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,#2a1530,#120a14);border:1px solid rgba(245,201,106,.45);color:#fff}
.yt-st b{grid-row:1/3;align-self:center;font-size:1.05rem;color:#f5c96a}.yt-st span{font-size:.85rem;font-weight:700}.yt-st i{font-style:normal;font-size:.72rem;color:#a1a1aa}
.yt-st.done{border-color:#34d399}.yt-st.done i{color:#34d399}.yt-st:disabled{opacity:.45}
.yt-note{display:block;margin-top:10px;text-align:center;color:#71717a;font-size:.7rem}
.yt-btns{display:flex;gap:8px;margin-top:12px}.yt-btns button{flex:1;padding:10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;font-weight:700}
.yt-btns .yt-main{background:#f5c96a;color:#1a1a1a;border-color:#f5c96a}
.yt-reward:empty{display:none}.yt-reward{margin-top:6px;padding:10px;border-radius:12px;background:rgba(245,201,106,.12);border:1px solid rgba(245,201,106,.4);text-align:center;color:#fde68a;font-weight:700}
.yt-claim{margin-top:-2px;padding:8px;border-radius:12px;background:#f5c96a;color:#1a1a1a;font-weight:800;border:0}
.yt-login{width:100%;margin-top:8px;padding:11px;border-radius:12px;background:linear-gradient(180deg,#fde68a,#f5c96a);color:#1a1a1a;font-weight:900;border:0}
.yt-promo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:6px}
.yt-promo-img{width:min(62vw,240px);aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:18px;border:2px solid #f5c96a;box-shadow:0 0 30px rgba(232,121,249,.45);background:#000}
.yt-promo-t{font-size:1.5rem;color:#f5c96a}
.yt-promo p{margin:0;color:#f5d0fe;font-size:.9rem;line-height:1.4}
.yt-promo ul{margin:2px 0;padding:0;list-style:none;color:#e4e4e7;font-size:.8rem;line-height:1.6}
.yt-promo ul li::before{content:'✦ ';color:#f5c96a}
.yt-promo-go{width:100%;background:#f5c96a;color:#1a1a1a;padding:13px;border-radius:14px;font-size:1.05rem;font-weight:900;border:0}
.yt-promo-off{display:flex;align-items:center;gap:6px;color:#a1a1aa;font-size:.78rem}