/* ===== 메인 화면: Violence Royale : The Abyss Gate ===== */
.main-screen { background: #0a0204; z-index: 20; }
.main-screen.hidden { display: none; }
.main-bg { position: absolute; inset: 0; display: block; }
.main-bg img { animation: kenburns 32s ease-in-out infinite alternate; transform-origin: 50% 40%; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.main-vignette {
  background:
    radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(10,0,2,.5) 70%, rgba(5,0,1,.9) 100%),
    linear-gradient(to bottom, rgba(10,0,2,.45), transparent 22%, transparent 42%, rgba(10,0,2,.72) 64%, rgba(6,0,1,.96) 100%);
}
.main-logo {
  font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 900; line-height: 1.05;
  font-size: clamp(2.4rem, 8vw, 6rem); letter-spacing: .02em;
  background: linear-gradient(180deg, #fff6d5 0%, #f5c96a 38%, #c7861f 62%, #7a2a10 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(220, 38, 38, .55)) drop-shadow(0 0 28px rgba(160, 20, 20, .5)) drop-shadow(0 3px 2px rgba(0,0,0,.9));
  animation: logoGlow 4s ease-in-out infinite;
}
.main-logo .colon { color: #ef4444; -webkit-text-fill-color: #ef4444; }
@keyframes logoGlow { 50% { filter: drop-shadow(0 0 16px rgba(239, 68, 68, .8)) drop-shadow(0 0 40px rgba(180, 20, 20, .65)) drop-shadow(0 3px 2px rgba(0,0,0,.9)); } }
.main-sub { font-family: 'Cinzel', serif; text-shadow: 0 0 8px rgba(0,0,0,.9); }
.main-line { width: min(70vw, 420px); height: 1px; background: linear-gradient(90deg, transparent, #d4a24a, #ef4444, #d4a24a, transparent); box-shadow: 0 0 8px #b91c1c; }
/* 금테 버튼 (9-slice: img/ui/main/frame_btn.webp, 24px) */
.main-btn {
  font-family: 'Cinzel', 'Noto Sans KR', sans-serif; font-weight: 700; color: #fde7b0; cursor: pointer;
  padding: .35rem .9rem; border: 8px solid transparent; border-radius: 4px;
  border-image: url(../img/ui/main/frame_btn.webp) 24 / 12px / 4px stretch;
  background: linear-gradient(180deg, rgba(70, 10, 14, .92), rgba(22, 3, 5, .94)) border-box;
  box-shadow: 0 4px 14px rgba(0,0,0,.6); transition: transform .12s, filter .15s, box-shadow .2s;
}
.main-btn:hover:not(:disabled) { filter: brightness(1.18); box-shadow: 0 0 18px rgba(245, 201, 106, .35), 0 4px 14px rgba(0,0,0,.6); }
.main-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); filter: brightness(.9); }
.main-btn:disabled { filter: grayscale(.7) brightness(.7); opacity: .6; cursor: not-allowed; }
.main-btn.on { color: #fcd34d; }
.main-btn:focus-visible, .main-banner:focus-visible, .main-medal:focus-visible, .main-gear:focus-visible, .set-toggle:focus-visible, .acct-logout:focus-visible, .main-pop-x:focus-visible {
  outline: 2px solid #fde68a; outline-offset: 4px; }

/* 로고 (이미지, 실패하면 글자) */
.main-logo-wrap { width: min(92vw, 640px); margin: 0 auto; line-height: 0; }
.main-logo-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.85)); animation: logoImgGlow 4s ease-in-out infinite; }
@keyframes logoImgGlow { 50% { filter: drop-shadow(0 4px 6px rgba(0,0,0,.85)) drop-shadow(0 0 18px rgba(220, 38, 38, .45)); } }
.main-logo-fallback { display: none; line-height: 1.05; }
.main-logo-wrap.noimg .main-logo-fallback { display: block; }

/* 아케이드·스토리 배너 (그림 위에 HTML 글자) */
.main-menu { max-width: 460px; gap: 1rem; }
.main-banner {
  position: relative; display: block; width: 100%; aspect-ratio: 10 / 3; overflow: visible; cursor: pointer; text-align: left;
  border: 6px solid transparent; border-radius: 4px; border-image: url(../img/ui/main/frame_btn.webp) 24 / 12px / 5px stretch;
  background: #120204 border-box; box-shadow: 0 6px 18px rgba(0,0,0,.7); transition: transform .12s, filter .15s, box-shadow .2s;
}
.main-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.main-banner-text { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); max-width: 46%; display: flex; flex-direction: column; gap: .15rem; }
.main-banner-title { font-family: 'Noto Sans KR', sans-serif; font-weight: 900; font-size: clamp(1.15rem, 5.4vw, 1.6rem); line-height: 1.15; color: #fff3cf; letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(255, 190, 110, .55), 0 2px 3px rgba(0,0,0,.95); white-space: nowrap; }
.main-banner small { font-size: clamp(.68rem, 2.9vw, .8rem); color: rgba(253, 231, 176, .78); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.banner-story .main-banner-title { color: #fde68a; text-shadow: 0 0 10px rgba(255, 210, 120, .5), 0 2px 3px rgba(0,0,0,.95); }
.main-banner:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 22px rgba(245, 201, 106, .35), 0 6px 18px rgba(0,0,0,.7); transform: translateY(-1px); }
.main-banner:active:not(:disabled) { transform: translateY(1px) scale(.985); filter: brightness(.92); }
.main-banner:disabled { filter: grayscale(.75) brightness(.65); cursor: progress; }

/* 메달 아이콘 줄 */
.main-medals { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; margin-top: .35rem; }
.main-medal { display: flex; flex-direction: column; align-items: center; gap: .3rem; background: none; border: 0; padding: .1rem 0; cursor: pointer; color: #fde7b0; transition: transform .12s, filter .15s; }
.medal-disc { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #1c2c55, #0a1228 72%); box-shadow: 0 4px 10px rgba(0,0,0,.7); }
.medal-disc::after { content: ''; position: absolute; inset: -3px; background: url(../img/ui/main/frame_btn_round.webp) center / 100% 100% no-repeat; pointer-events: none; }
.medal-disc img { width: 58%; height: 58%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.medal-disc img.medal-full { width: 72%; height: 72%; border-radius: 50%; }
.medal-label { font-size: .72rem; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 3px #000, 0 0 6px #000; white-space: nowrap; }
.main-medal:hover .medal-disc { filter: brightness(1.2); box-shadow: 0 0 14px rgba(245, 201, 106, .45), 0 4px 10px rgba(0,0,0,.7); }
.main-medal:active { transform: translateY(1px) scale(.95); }
.main-medal:disabled { filter: grayscale(.8); opacity: .5; cursor: not-allowed; }
@media (min-width: 768px) { .medal-disc { width: 68px; height: 68px; } .medal-label { font-size: .8rem; } }

/* 상단: 계정 + 설정 */
.main-gear { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; position: relative; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, #3a0a10, #120204 72%); box-shadow: 0 3px 10px rgba(0,0,0,.7); transition: transform .12s, filter .15s; }
.main-gear::after { content: ''; position: absolute; inset: -2px; background: url(../img/ui/main/frame_btn_round.webp) center / 100% 100% no-repeat; pointer-events: none; }
.main-gear img { width: 56%; height: 56%; transition: transform .4s; }
.main-gear:hover { filter: brightness(1.2); } .main-gear:hover img { transform: rotate(45deg); }
.main-gear:active { transform: scale(.94); }
.acct-login { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; padding: .15rem .6rem; white-space: nowrap; }
.acct-login .ui-ic { width: 1.25em; height: 1.25em; }
.acct-login small { font-size: .68rem; opacity: .7; font-weight: 500; }
.acct-chip { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: .25rem .35rem .25rem .25rem; border-radius: 999px;
  background: rgba(10, 2, 4, .72); border: 1px solid rgba(212, 162, 74, .65); box-shadow: 0 3px 10px rgba(0,0,0,.6); color: #fde7b0; font-size: .85rem; }
.acct-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; background: #0a1228; }
.acct-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acct-logout { flex: none; font-size: .72rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid rgba(212, 162, 74, .5); color: #fde7b0; background: rgba(60, 8, 12, .7); cursor: pointer; }
.acct-logout:hover { background: rgba(110, 16, 22, .85); border-color: #f5c96a; }

/* 설정 팝업 */
.main-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.main-pop.hidden { display: none; }
.main-pop-card { width: min(92vw, 360px); text-align: left; color: #fde7b0; padding: 1rem 1.1rem 1.1rem;
  border: 10px solid transparent; border-radius: 6px; border-image: url(../img/ui/main/frame_btn.webp) 24 / 16px / 6px stretch;
  background: linear-gradient(180deg, #2a0609, #120204) border-box; box-shadow: 0 12px 40px rgba(0,0,0,.8); animation: popIn .16s ease-out; }
@keyframes popIn { from { transform: scale(.94); opacity: 0; } }
.main-pop-title { font-family: 'Cinzel', 'Noto Sans KR', serif; font-weight: 900; font-size: 1.15rem; color: #fcd34d; }
.main-pop-x { width: 32px; height: 32px; border-radius: 50%; color: #fde7b0; opacity: .8; } .main-pop-x:hover { opacity: 1; background: rgba(255,255,255,.08); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-top: 1px solid rgba(212, 162, 74, .2); }
.set-label { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; font-weight: 700; font-size: .92rem; }
.set-label .ui-ic { width: 1.4em; height: 1.4em; }
.set-label small { flex-basis: 100%; padding-left: calc(1.4em + .45rem); font-weight: 400; font-size: .72rem; opacity: .65; }
.set-toggle { flex: none; min-width: 64px; padding: .35rem .7rem; border-radius: 999px; font-weight: 800; font-size: .8rem; letter-spacing: .05em; cursor: pointer;
  color: #a1a1aa; background: #1c1917; border: 1px solid #52525b; transition: background .15s, color .15s, border-color .15s; }
.set-toggle.on { color: #1c1003; background: linear-gradient(180deg, #fde68a, #d4a24a); border-color: #f5c96a; box-shadow: 0 0 10px rgba(245, 201, 106, .4); }
.set-toggle:active { transform: scale(.95); }

/* 모바일: 로고 + 배너가 첫 화면 안에 */
@media (max-width: 767px) {
  .main-logo-wrap { width: min(94vw, 420px); }
  .main-banner-text { left: 5.5%; }
}
@media (max-height: 700px) and (max-width: 767px) {
  .main-menu { gap: .5rem; } .medal-disc { width: 50px; height: 50px; } .main-line { margin: .4rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .main-bg img, .main-logo, .main-logo-img { animation: none; }
}

/* 세로(모바일) 배경 영상 */
.main-video { animation: none; }
.main-video.hidden { display: none; }

/* ===== 아케이드 설정 (batch B) ===== */
.arcade-opts-btn{align-self:center;margin:-4px auto 8px;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(251,191,36,.45);color:#fde68a;font-weight:800;font-size:13px;max-width:92vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arcade-opts-btn small{color:#d4d4d8;font-weight:600;margin-left:4px}
.arcade-opts-btn.on{background:rgba(120,53,15,.75);border-color:#fbbf24}
.arcade-opts-btn.on small{color:#fde68a}
.ao-card{background:#18181b;border:1px solid rgba(251,191,36,.4);border-radius:24px;padding:18px;width:100%;max-width:26rem;text-align:left;max-height:92vh;overflow-y:auto}
.ao-sec{padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.ao-h{font-weight:900;font-size:14px;margin-bottom:6px}
.ao-h small{font-weight:500;color:#a1a1aa;font-size:11px;margin-left:4px}
.ao-chips{display:flex;flex-wrap:wrap;gap:6px}
.ao-chip{padding:5px 11px;border-radius:999px;background:#27272a;border:1px solid #3f3f46;font-size:12px;font-weight:800;color:#d4d4d8}
.ao-chip.on{background:#065f46;border-color:#10b981;color:#ecfdf5}
.ao-g{min-width:42px;border:2px solid var(--rc,#52525b)}
.ao-g.on{background:color-mix(in srgb,var(--rc,#10b981) 35%,#18181b);color:#fff}
.ao-g.off{opacity:.4;text-decoration:line-through}
.ao-note{font-size:11px;color:#a1a1aa;margin-top:6px;line-height:1.45}

/* 등장 컷인: 프로필(세로) 이미지는 얼굴 쪽 기준으로 자르기 */
.cutin-img .cutin-media.cutin-portrait{object-position:50% 18%}
/* 만남·인연 이벤트 */
.ev-layer{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:14px;animation:evIn .35s ease-out}
@keyframes evIn{from{opacity:0}to{opacity:1}}
.ev-panel{position:relative;width:100%;max-width:760px;background:#0c0a09;border:1px solid rgba(244,114,182,.5);border-radius:22px;overflow:hidden;box-shadow:0 0 40px rgba(244,114,182,.25);text-align:left}
.ev-title{position:absolute;top:10px;left:14px;z-index:2;font-weight:900;font-size:13px;color:#fbcfe8;text-shadow:0 1px 4px #000;background:rgba(0,0,0,.45);padding:3px 10px;border-radius:999px}
.ev-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ev-line{min-height:64px;padding:12px 16px 4px;font-size:15px;line-height:1.5;color:#f4f4f5}
.ev-line b{display:block;font-size:12px;color:#f9a8d4;margin-bottom:2px}
.ev-line .ev-na{color:#d4d4d8;font-style:italic}
.ev-step{padding:0 16px 12px;font-size:11px;color:#a1a1aa}
.ev-skip{position:absolute;top:10px;right:12px;z-index:2;font-size:12px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 10px}
/* 설정 버튼은 항상 아케이드 모드 배너 바로 아래 (스토리·탑 배너는 JS 로 start-btn 뒤에 끼워지므로 order 로 고정) */
.main-menu > *{order:2}
.main-menu > #start-btn{order:0}
.main-menu > #arcade-opts-btn{order:1;margin:6px auto 10px}
.main-menu > .main-medals{order:3}

/* ===== 컴팩트 메인 (그림 위주, 글자 최소) ===== */
.main-menu{display:grid!important;grid-template-columns:1fr 1fr;gap:.5rem;max-width:520px}
.main-menu>#start-btn,.main-menu>#story-btn{order:0;aspect-ratio:16/9}
.main-menu>#start-btn .main-banner-img,.main-menu>#story-btn .main-banner-img{object-position:70% center}
.main-menu>#quest-btn{order:1;grid-column:1/-1}
.main-menu>#arcade-opts-btn{order:0;grid-column:1/2;margin:-4px auto 0!important;padding:3px 10px;font-size:12px}
.main-menu>.main-medals{order:3;grid-column:1/-1}
.main-banner-text{left:0;right:0;top:auto;bottom:6%;transform:none;max-width:none;align-items:center}
.main-banner-title{font-size:clamp(.95rem,4.2vw,1.25rem)}
.main-banner small{display:none}
.arcade-opts-btn .ui-ic{width:1.15em;height:1.15em;vertical-align:-.2em}
.medal-disc{width:46px;height:46px}
.medal-label{font-size:.62rem;opacity:.85}
.main-medals{gap:.1rem;margin-top:.1rem}
@media (min-width:768px){.medal-disc{width:54px;height:54px}.medal-label{font-size:.7rem}}
#stats{font-size:.75rem;margin-top:.5rem}
/* MR 스킬 영상 (첫 사용 1회) */
.mr-vid{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;animation:mrIn .2s ease-out}
.mr-vid video{width:100%;max-width:1100px;max-height:100%;aspect-ratio:736/400;object-fit:cover;box-shadow:0 0 40px rgba(244,63,94,.3)}
.mr-vid-cap{position:absolute;left:0;right:0;bottom:max(14%,calc(50% - 30vw - 70px));text-align:center;color:#fff;text-shadow:0 2px 8px #000;pointer-events:none}
.mr-vid-cap small{display:block;font-size:.75rem;color:#fda4af;letter-spacing:.1em}
.mr-vid-cap b{font-size:clamp(1.3rem,6vw,2.4rem);font-weight:900}
.mr-vid-skip{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;font-size:.72rem;color:#d4d4d8;padding:4px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;pointer-events:none}
@keyframes mrIn{from{opacity:0}to{opacity:1}}

/* ===== 메인 4버튼 · 게임설정 · 공지 · 인트로 (UI 개편) ===== */
.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 520px; }
.main-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; border: 4px solid transparent; border-radius: 6px;
  border-image: url(../img/ui/main/frame_btn.webp) 24 / 10px / 3px stretch; background: radial-gradient(circle at 50% 35%, #2a0a10, #0b0204 75%) border-box;
  box-shadow: 0 6px 18px rgba(0,0,0,.7); transition: transform .12s, filter .15s; }
.main-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.main-tile-ic { object-fit: contain; inset: 14% 25% 30%; width: 50%; height: 56%; filter: drop-shadow(0 3px 6px #000); }
.main-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.85)); pointer-events: none; }
.main-tile-t { position: absolute; left: 0; right: 0; bottom: .45rem; z-index: 1; font-weight: 900; font-size: clamp(1rem, 4.6vw, 1.35rem); color: #fff3cf;
  text-shadow: 0 0 10px rgba(255,190,110,.5), 0 2px 3px #000; white-space: nowrap; }
.main-tile-lock { display: none; position: absolute; top: .35rem; right: .45rem; z-index: 1; font-style: normal; font-size: 1rem; filter: drop-shadow(0 1px 2px #000); }
.main-tile.guest-lock { filter: grayscale(.85) brightness(.6); }
.main-tile.guest-lock .main-tile-lock { display: block; }
.main-tile:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.main-tile:active:not(:disabled) { transform: scale(.97); }
.main-tile:disabled { filter: grayscale(.7) brightness(.6); cursor: progress; }
.gm-card { max-width: 380px; }
.gm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.gm-btn { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .2rem; border-radius: 12px; background: rgba(0,0,0,.35);
  border: 1px solid rgba(245,201,106,.25); color: #fde7b0; font-size: .72rem; font-weight: 800; cursor: pointer; }
.gm-btn img { width: 36px; height: 36px; object-fit: contain; }
.gm-btn small { display: block; font-size: .6rem; opacity: .7; font-weight: 600; }
.gm-btn:hover { border-color: #f5c96a; background: rgba(120,20,20,.35); }
.gm-btn.hidden { display: none; }
.notice-line { display: flex; align-items: center; gap: .4rem; width: min(92vw, 520px); margin: 0 auto .6rem; padding: .3rem .6rem; border-radius: 999px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(245,201,106,.3); color: #fde7b0; font-size: .78rem; font-weight: 700; overflow: hidden; }
.notice-line.hidden { display: none; }
.notice-ic { flex: none; width: 20px; height: 20px; object-fit: contain; }
.notice-track { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
#notice-text { display: inline-block; padding-left: 100%; animation: noticeRun 18s linear infinite; }
@keyframes noticeRun { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { #notice-text { animation: none; padding-left: 0; } }
.intro { position: fixed; inset: 0; z-index: 60; background: #050102; overflow: hidden; }
.intro.hidden { display: none; }
.intro-bg, .intro-bg img, .intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-video.hidden { display: none; }
.intro-shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.25), transparent 35%, rgba(0,0,0,.85)); }
.intro-body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1.6rem; padding: 0 1.5rem 12vh; }
.intro-logo { width: min(84vw, 520px, 76svh); height: auto; filter: drop-shadow(0 4px 8px #000); }
.intro-acts { display: flex; flex-direction: column; align-items: center; gap: .7rem; width: min(80vw, 320px); }
.intro-btn { width: 100%; padding: .7rem 1rem; font-size: 1.05rem; }
.intro-guest { background: none; border: 0; color: rgba(253,231,176,.75); text-decoration: underline; font-size: .9rem; cursor: pointer; }
#vr-confirm { z-index: 70; }
.vc-card { max-width: 320px; text-align: center; }
.vc-msg { color: #fde7b0; font-size: .92rem; line-height: 1.5; }
.vc-q { margin-top: .7rem; font-weight: 900; color: #fff3cf; }
.vc-row { display: flex; gap: .6rem; margin-top: 1rem; }
.vc-row > button { flex: 1; padding: .55rem; font-weight: 900; }
.vc-n { border-radius: 8px; background: #27272a; color: #e4e4e7; border: 1px solid #52525b; cursor: pointer; }
#auto-btn.locked { opacity: .55; }
.auto-hint { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 80; padding: .45rem .9rem; border-radius: 999px; background: rgba(0,0,0,.85);
  border: 1px solid rgba(245,201,106,.5); color: #fde7b0; font-size: .8rem; font-weight: 800; }

/* 메인 타일 높이 줄이기: 화면 높이에 맞춰 그리드 폭 제한 + 낮은 비율 (조직 글자·푸터 겹침 방지) */
.main-grid { max-width: min(520px, 100%, calc((100svh - 300px) * 1.08)); margin-left: auto; margin-right: auto; }
.main-tile { aspect-ratio: 16 / 10; }
.main-tile-img { object-position: 50% 40%; }
.tile-arcade .main-tile-img { object-position: 45% 40%; }

/* ===== 메인 개편 A (심플 · 큰 CTA + 하단 탭) ===== */
#start-screen { --gold: rgba(245, 201, 106, .5); background: #0b0608; }
#start-screen .main-bg, #start-screen .main-video { bottom: 30%; height: auto; inset: 0 0 30% 0; }
#start-screen .main-bg img { height: 100%; object-position: 50% 20%; }
#start-screen .main-vignette { background: linear-gradient(rgba(0,0,0,.4), transparent 18%, transparent 40%, #0b0608 70%); }
.main-top { padding: 14px 20px; }
.acct-chip { background: rgba(0,0,0,.5); border: 1px solid var(--gold); padding: 3px 12px 3px 3px; gap: .4rem; font-size: .8rem; }
.acct-chip .acct-avatar { width: 30px; height: 30px; border: 2px solid #f5c96a; }
.acct-chip .acct-name { max-width: 7em; }
.acct-chip .acct-lv { color: #f5c96a; font-size: .8rem; white-space: nowrap; }
.acct-chip .acct-logout { display: none; }
.acct-login { font-size: .8rem; }
.main-cur { display: flex; gap: 6px; margin-left: auto; }
.main-cur:empty { display: none; }
.main-cur span { background: rgba(0,0,0,.5); border: 1px solid rgba(245,201,106,.3); border-radius: 999px; padding: 4px 10px; font-size: .75rem; font-weight: 700; color: #fde7b0; white-space: nowrap; }
#start-screen .main-gear { width: 38px; height: 38px; background: rgba(0,0,0,.5); }
#start-screen .main-gear::after { display: none; }
#start-screen .main-gear img { width: 24px; height: 24px; }
.main-body { padding: 0 20px calc(92px + env(safe-area-inset-bottom)); gap: 12px; }
#start-screen .main-logo-wrap { width: min(72vw, 360px, 46svh); }   /* 새 로고(약 2:1): 버튼 안 가리게 화면 높이로도 제한 */
#start-screen .notice-line { width: 100%; max-width: 520px; margin: 0; background: rgba(0,0,0,.45); border: 1px solid rgba(245,201,106,.25); font-size: .78rem; color: #fde7b0; }
#start-screen .main-grid { grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; width: 100%; margin: 0 auto; }
#start-screen .main-tile { aspect-ratio: auto; height: clamp(84px, 11svh, 110px); border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
#start-screen .main-tile .main-tile-t { left: 12px; right: auto; bottom: 10px; text-align: left; font-size: 1rem; }
#start-screen .main-cta { grid-column: 1 / -1; order: -1; height: clamp(130px, 19svh, 190px); border-radius: 18px; box-shadow: 0 0 0 1px var(--gold), 0 10px 30px #000; border: 0; }
#start-screen .main-cta::after { background: linear-gradient(90deg, rgba(0,0,0,.8), transparent 70%); }
.main-cta-t { position: absolute; left: 18px; bottom: 16px; z-index: 1; text-align: left; }
.main-cta-t small { display: block; font-size: .75rem; color: #fca5a5; font-weight: 700; letter-spacing: .04em; }
#start-screen .main-cta-t .main-tile-t { position: static; font-size: clamp(1.3rem, 6vw, 1.6rem); }
/* 게스트: 큰 카드 = 아케이드, 스토리는 작은 카드(잠금) */
#start-screen.is-guest #start-btn { grid-column: 1 / -1; order: -1; height: clamp(130px, 19svh, 190px); border-radius: 18px; border: 0; box-shadow: 0 0 0 1px var(--gold), 0 10px 30px #000; }
#start-screen.is-guest #start-btn .main-tile-t { font-size: clamp(1.3rem, 6vw, 1.6rem); left: 18px; bottom: 16px; }
#start-screen.is-guest .main-cta { grid-column: auto; order: 0; height: clamp(84px, 11svh, 110px); border-radius: 14px; }
#start-screen.is-guest .main-cta-t small { display: none; }
#start-screen.is-guest .main-cta-t { left: 12px; bottom: 10px; }
#start-screen.is-guest .main-cta-t .main-tile-t { font-size: 1rem; }
/* 하단 탭 */
.main-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; align-items: center;
  height: calc(70px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(18,8,10,.96); border-top: 1px solid rgba(245,201,106,.3); }
.main-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; color: #fde7b0; font-size: .7rem; font-weight: 700; opacity: .75; cursor: pointer; }
.main-tab i { font-style: normal; font-size: 1.3rem; line-height: 1; height: 26px; display: grid; place-items: center; }
.main-tab i img { width: 26px; height: 26px; object-fit: contain; }
.main-tab.on { opacity: 1; color: #f5c96a; }
.main-tab:hover { opacity: 1; }
.main-tab.guest-lock { opacity: .35; filter: grayscale(1); }
/* 설정 팝업: 가이드(?) · 푸터 */
.gm-q { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #f5c96a; color: #f5c96a; font-size: 1rem; }
.gm-foot #mbbs-footer.mf-flow { background: none; border-top: 1px solid rgba(245,201,106,.2); margin-top: 12px; padding: 10px 0 0; }
@media (min-width: 768px) {
  #start-screen .main-bg, #start-screen .main-video { inset: 0 0 22% 0; }
  .main-body { padding-bottom: 96px; }
  .main-tabs { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, 100%); border-radius: 18px 18px 0 0; border: 1px solid rgba(245,201,106,.3); border-bottom: 0; }
}
#vr-confirm{z-index:300}
/* 로비 좌상단 계정 칩: 파이어폭스에서 칸이 0까지 줄어 얇은 금색 막대로 보이던 문제 → 최소 폭 보장, 좁은 화면은 아바타만 */
#start-screen .acct-box { flex: 0 1 auto; min-width: 38px; }
#start-screen .acct-chip { min-width: 0; overflow: hidden; }
@media (max-width: 480px) { #start-screen .acct-box { flex: none; } #start-screen .acct-chip { padding: 3px; } #start-screen .acct-chip .acct-name, #start-screen .acct-chip .acct-lv { display: none; } }
/* 로비 스토리 타일: 누르면 바로 이어하기 · 오른쪽 위 '📜 스토리' = 스토리 허브(챕터 목록) */
#story-btn{position:relative}
.main-story-hub{position:absolute;top:8px;right:8px;z-index:3;padding:5px 11px;border-radius:999px;border:1px solid rgba(245,201,106,.6);background:rgba(18,8,10,.82);color:#f5c96a;font-weight:800;font-size:12px;line-height:1.2;box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:pointer}
.main-story-hub:active{transform:scale(.95)}
#story-btn:disabled .main-story-hub{display:none}