/* 세로 웹 클라이언트. 전투 효과/상태 클래스는 공용 스타일을 사용하고 화면 배치는 여기서 소유한다. */
:root { --bg:#100f19; --bg-panel:#201d2b; --bg-raised:#2b2538; --panel:#201d2b; --line:#494052; --text:#f4eee2; --text-dim:#b4aabf; --gold:#e7c88b; --accent:#b9a4ed; --ok:#97cebc; --crystal:#c6aff7; }
html { min-height:100%; background:#09080e; }
body.portrait-game { width:100%; max-width:520px; margin:auto; min-height:100dvh; background:var(--bg); color:var(--text); overflow-x:clip; font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; }
.portrait-game button,.portrait-game select,.portrait-game input { font:inherit; touch-action:manipulation; }
.portrait-game button:focus-visible,.portrait-game a:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.portrait-game #app { max-width:none; width:100%; margin:0; padding:0; }
.portrait-game .view { padding:16px 18px 104px; min-height:calc(100dvh - 92px); overflow:visible; }
.portrait-game .view.active { display:block; }
.portrait-game .view::before,.portrait-game .view::after { display:none; }
.portrait-game .hud { position:sticky; top:0; width:100%; min-height:88px; padding:calc(10px + env(safe-area-inset-top)) 18px 10px; display:flex; flex-wrap:wrap; gap:8px; background:#15121ef5; border:0; border-bottom:1px solid #ffffff12; box-shadow:none; z-index:30; }
.portrait-game.in-town .hud { display:flex; }
.portrait-game .hud-profile { width:100%; display:flex; gap:8px; font-size:13px; }
.portrait-game .hud-level { width:25px; height:25px; font-size:12px; background:#342c42; border:1px solid #9b7d53; }
.portrait-game .hud-currencies { display:flex; justify-content:space-between; width:100%; gap:4px; }
.portrait-game .pill { background:transparent; padding:0 3px; border:0; font-size:12px; box-shadow:none; gap:4px; }
.portrait-game .pill .ico { width:15px; height:15px; }
.portrait-game .topbar { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 0 22px; margin:0; background:none; border:0; box-shadow:none; min-height:72px; }
.portrait-game .topbar h2 { margin:0; flex:1; font-size:25px; letter-spacing:-1px; color:var(--text); text-shadow:none; }
.portrait-game .btn { border:1px solid #675673; border-radius:12px; background:#2b2537; box-shadow:none; min-height:44px; padding:10px 15px; color:var(--text); line-height:1.35; white-space:normal; text-shadow:none; }
.portrait-game .btn::before,.portrait-game .btn::after { display:none; }
.portrait-game .btn-primary { background:var(--gold); border-color:var(--gold); color:#261c11; font-weight:750; }
.portrait-game .btn-back { font-size:12px; min-width:48px; padding:8px; background:transparent; border-color:#ffffff20; }
.portrait-game .btn-small { min-height:40px; font-size:12px; }
.portrait-game .panel { padding:16px; border:1px solid #ffffff14; background:#211c2b; border-radius:16px; box-shadow:none; }
.portrait-game .panel::before,.portrait-game .panel::after { display:none; }
.portrait-game .view input:not([type=checkbox]):not([type=radio]):not([type=range]),.portrait-game .view select,.portrait-game .view textarea { min-width:0; max-width:100%; border:1px solid #5e526b; background:#181420; color:var(--text); border-radius:10px; min-height:44px; }
.portrait-game h3,.portrait-game h4 { color:var(--gold); }
.portrait-game .note { line-height:1.65; font-size:12px; color:var(--text-dim); overflow-wrap:anywhere; }
.portrait-game .chapter-tabs,.portrait-game .journal-tabs,.portrait-game .deck-filters,.portrait-game .myth-origin-bar { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:7px; padding:4px 0 12px; scrollbar-width:none; max-width:100%; }
.portrait-game .chapter-tabs>*,.portrait-game .journal-tabs>* { flex:none; min-height:42px; border-radius:24px; }
.portrait-game .chapter-tab { background:#221d2d; border:1px solid #51445e; color:var(--text-dim); padding:9px 15px; }
.portrait-game .chapter-tab.active { background:#e7c88b; color:#241a0e; box-shadow:none; }
.portrait-nav { position:fixed; z-index:65; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,520px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:#15121ef5; border-top:1px solid #ffffff1c; box-shadow:0 -12px 32px #09080e55; }
.portrait-nav button { display:flex; flex-direction:column; align-items:center; gap:5px; min-height:52px; padding:3px; border:0; background:none; color:#9689a4; font-size:10px; }
.portrait-nav i { font-style:normal; font-size:24px; height:28px; line-height:28px; }
.portrait-nav [aria-current=page] { color:var(--gold); }
.portrait-nav [aria-current=page] i { border-bottom:2px solid var(--gold); }
/* 성역: 그림 위의 여정 입구와 아래의 시설. */
.portrait-game #view-home { position:relative; padding:0 20px 105px; isolation:isolate; min-height:calc(100dvh - 88px); display:none; }
.portrait-game #view-home.active { display:flex; flex-direction:column; }
.portrait-game #view-home .town { position:absolute; inset:0 0 auto; height:485px; z-index:-1; border:0; background:linear-gradient(180deg,#100f1930 35%,#100f19 100%),url('../art/mythic-sanctuary.png') 62% 25%/cover; opacity:1; }
.portrait-game #view-home .town>* { display:none; }
.portrait-game .home-profile,.portrait-game .home-stamina { display:none; }
.portrait-intro { order:0; padding:55px 0 0; min-height:285px; max-width:90%; }
.portrait-eyebrow { font-size:10px; letter-spacing:4px; color:var(--gold); font-weight:600; }
.portrait-game #view-home .home-command { position:static; margin:15px 0 10px; color:#fff7e4; font-family:Georgia,'AppleMyungjo',serif; font-size:44px; font-weight:400; letter-spacing:-2px; text-shadow:0 3px 25px #000; }
.portrait-intro p { font-size:13px; line-height:1.8; max-width:220px; text-shadow:0 2px 6px #000; }
.portrait-journey { order:1; position:relative; text-align:left; padding:18px 22px; display:flex; flex-direction:column; gap:5px; background:#e7c88b; color:#302414; border:1px solid #ffe9b8; border-radius:4px 22px 4px 22px; box-shadow:0 8px 28px #0004; min-height:86px; }
.portrait-journey span { font-size:11px; letter-spacing:2px; }
.portrait-journey strong { font-size:24px; font-weight:650; }
.portrait-journey i { position:absolute; right:24px; top:20px; font-size:34px; font-style:normal; }
.portrait-game #view-home .occupy-banner { order:2; position:static; width:auto; transform:none; display:flex; justify-content:space-between; gap:10px; margin:14px 0 0; padding:12px 0; background:none; border:0; border-bottom:1px solid #ffffff17; box-shadow:none; font-size:12px; }
.portrait-game .occupy-banner>div { display:flex; flex-direction:column; gap:3px; }
.portrait-home-heading { order:3; display:flex; justify-content:space-between; align-items:center; margin:22px 0 10px; }
.portrait-home-heading h2 { font-size:17px; font-weight:500; margin:0; }
.portrait-home-heading span { color:var(--gold); }
.portrait-game #view-home .home-side { order:4; position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; width:100%; transform:none; }
.portrait-game #view-home .round-btn { width:auto; height:98px; min-height:98px; display:flex; flex-direction:column; gap:12px; justify-content:center; border:1px solid #ffffff18; border-radius:14px; background:#272031; font-size:12px; box-shadow:none; }
.portrait-game #view-home .round-btn[data-go=map] { background:#292c29; }
.portrait-game #view-home .round-btn[data-go=enhance] { background:#342330; }
.portrait-game #view-home .round-btn[data-go=temple] { background:#282338; }
.portrait-game .round-btn::before,.portrait-game .round-btn::after,.portrait-game .bar-btn::after { display:none; }
.portrait-game #view-home .home-bottom { order:5; position:static; transform:none; width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px; }
.portrait-game #view-home .bar-btn { min-width:0; min-height:68px; padding:8px 2px; display:flex; flex-direction:column; gap:6px; background:transparent; border:0; font-size:11px; border-radius:8px; }
.portrait-game #view-home .home-chat { order:7; position:static; transform:none; width:100%; margin:22px 0 0; border:1px solid #ffffff12; background:#17131f; border-radius:12px; box-shadow:none; }
.portrait-game #view-home .chat-body { height:90px; }
.portrait-game #view-home #content-next { order:6; font-size:12px; color:var(--text-dim); }
.portrait-game .home-settings { position:absolute; right:18px; top:16px; width:40px; height:40px; background:#15121ea0; border:1px solid #ffffff30; border-radius:50%; }
.portrait-game .home-admin { position:static; align-self:flex-end; order:8; margin-top:12px; }
.portrait-game .home-sheet { position:fixed; inset:auto 12px calc(90px + env(safe-area-inset-bottom)); margin:auto; width:calc(100% - 24px); max-width:480px; max-height:65dvh; overflow-y:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:16px; background:#211b2dfc; border:1px solid #736381; border-radius:20px; z-index:70; transform:none; box-shadow:0 0 0 100vmax #0008; }
.portrait-game .home-sheet .menu-btn { min-width:0; min-height:80px; padding:8px; background:#302638; border:0; font-size:11px; }
/* 관문은 길을 따라 아래로 진행한다. */
.portrait-game #view-map { background:linear-gradient(#1b2524d9,#10191af5),url('../art/mythic-sanctuary.png') center top/auto 650px; }
.portrait-game .map-bar { align-items:flex-start; }
.portrait-game .chapter-head { width:100%; max-width:none; display:block; font-size:20px; }
.portrait-game .chapter-head .myth-chapter-story { font-size:12px; margin:10px 0 0; max-height:none; }
.portrait-game .stage-map { position:relative; min-height:500px; margin:15px 0; background:none; border:0; overflow:visible; }
.portrait-game .stage-path { position:absolute; inset:0; width:100%; height:100%; }
.portrait-game .stage-path polyline { stroke:#a7b99955; stroke-width:1; stroke-dasharray:2 2; fill:none; }
.portrait-game .stage-node { width:134px; height:116px; transform:translate(-50%,-50%); display:flex; flex-direction:column; justify-content:center; gap:3px; padding:9px; border:1px solid #8d9d7f; border-radius:20px; background:#202e29; color:var(--text); box-shadow:0 8px 18px #0003; }
.portrait-game .stage-node .stage-label { position:static; order:1; font-size:11px; white-space:normal; line-height:1.3; max-width:100%; }
.portrait-game .stage-tile { display:contents; }
.portrait-game .stage-no { position:static; order:0; font-size:22px; font-weight:600; }
.portrait-game .stage-meta { position:static; order:2; font-size:10px; }
.portrait-game .stage-node .stars { position:static; order:3; font-size:20px; letter-spacing:3px; }
.portrait-game .stage-node.current { background:#e7c88b; color:#2d2415; border:2px solid #fff1c8; outline:5px solid #e7c88b22; }
.portrait-game .stage-node.locked { opacity:.5; filter:none; }
.portrait-game .stage-crown { top:-15px; right:10px; font-size:26px; }
/* 카드/편성은 3열의 세로 카드. 작은 기기에서도 선택 영역을 확보한다. */
.portrait-game .card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.portrait-game .card-grid .card { width:100%; min-width:0; min-height:172px; padding:9px 7px; border-radius:9px; background-color:#1c1925; box-shadow:none; font-size:11px; }
.portrait-game .card-name { font-size:12px; white-space:normal; line-height:1.3; }
.portrait-game .card-grid .card .card-art { object-fit:cover; }
.portrait-game .card .card-stars { font-size:11px; }
.portrait-game .deck-stats { flex-wrap:wrap; gap:10px; padding:12px; border-radius:14px; background:#272032; }
.portrait-game #view-deck .topbar { border-bottom:1px solid #b9a4ed44; margin-bottom:14px; }
.portrait-game .deck-filters>* { min-width:0; flex:1; padding:8px 5px; font-size:11px; }
.portrait-game .rune-slots { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.portrait-game .rune-slot { min-width:0; width:auto; }
.portrait-game .sticky-bottom { position:sticky; bottom:calc(82px + env(safe-area-inset-bottom)); padding:10px 0; background:linear-gradient(transparent,#100f19 25%); z-index:25; }
.portrait-game #view-codex { background:linear-gradient(#291e30,#100f19 450px); }
.portrait-game #view-enhance,.portrait-game #view-shards,.portrait-game #view-sell { background:linear-gradient(#2b1d27,#100f19 500px); }
.portrait-game #view-temple,.portrait-game #view-ogre { background:linear-gradient(#251e38,#100f19 500px); }
.portrait-game #view-shop { background:radial-gradient(ellipse at 100% 0,#56412880,transparent 65%),#141118; }
.portrait-game .pack-list { display:grid; grid-template-columns:1fr; gap:18px; }
.portrait-game .pack { padding:20px; border-radius:20px; min-height:160px; border:1px solid #b8996155; background:linear-gradient(130deg,#43313f,#251d2b); box-shadow:none; display:flex; flex-wrap:wrap; gap:14px; }
.portrait-game .pack h3 { font-size:22px; }
.portrait-game .shop-item-list { display:grid; grid-template-columns:1fr; gap:10px; }
.portrait-game .shop-item { min-width:0; padding:14px; border:1px solid #ffffff15; border-radius:14px; background:#241e2b; flex-wrap:wrap; gap:8px; }
.portrait-game #shop-focus { width:100%; margin:8px 0 20px; }
.portrait-game #view-daily { background:linear-gradient(#26332b,#14171a 450px); }
.portrait-game .quest-list { display:grid; grid-template-columns:1fr; gap:12px; }
.portrait-game .quest { border:1px solid #a1b39333; border-radius:16px; padding:16px; background:#222a27; min-width:0; flex-wrap:wrap; gap:10px; }
.portrait-game .quest .btn { margin-left:auto; }
.portrait-game .attendance-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.portrait-game #view-tower,.portrait-game #view-demon,.portrait-game #view-challenge,.portrait-game #view-tournament { background:linear-gradient(#281b29,#100f19 600px); }
.portrait-game #view-mail,.portrait-game #view-friends,.portrait-game #view-ranking,.portrait-game #view-guild { background:linear-gradient(#1f2530,#100f19 420px); }
.portrait-game table { width:100%; table-layout:fixed; font-size:12px; }
.portrait-game th,.portrait-game td { overflow-wrap:anywhere; padding:10px 5px; }
/* 상세 정보는 세로 하단 시트로 표시한다. */
.portrait-game .modal { padding:12px; align-items:flex-end; z-index:100; background:#09070dd9; }
.portrait-game .modal-box,.portrait-game .modal-box.cm-box { width:100%; max-width:496px; max-height:88dvh; overflow:auto; padding:22px 18px; border:1px solid #796587; border-radius:24px 24px 12px 12px; background:#211b2b; box-shadow:0 -15px 60px #0005; }
.portrait-game .modal-box::before,.portrait-game .modal-box::after { display:none; }
.portrait-game .cm-layout,.portrait-game .cm-top { flex-wrap:wrap; }
.portrait-game .cm-art-wrap { width:128px; min-width:128px; height:190px; margin:0 auto 14px; }
.portrait-game .cm-info { min-width:0; flex:1 1 190px; }
.portrait-game .modal-actions { display:flex; flex-wrap:wrap; gap:8px; }
.portrait-game .modal-actions .btn { flex:1 1 100px; }
.portrait-game .result-plaque { width:100%; max-width:470px; max-height:90dvh; overflow:auto; padding:24px 18px; border:1px solid #b89a67; border-radius:24px; background:#201b2a; }
.portrait-game .result-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.portrait-game .battle-result h2 { font-size:30px; line-height:1.4; }
.portrait-game .result-panel { padding:14px; background:#2b2436; border:0; }
.portrait-game .result-detail { font-size:14px; line-height:1.8; }
.portrait-game .result-actions { flex-wrap:wrap; }
/* 전투: 위아래 영웅, 가운데 5×2 전장, 손패와 조작은 아래. */
.portrait-game.in-battle { overflow:auto; }
.portrait-game #view-battle { padding:calc(12px + env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom)); min-height:100dvh; background:linear-gradient(#110e1cdc,#110e1ce8),url('../art/mythic-sanctuary.png') center/cover; }
.portrait-game .resonance-guide { font-size:10px; margin:0 0 8px; }
.portrait-game .battle-stage { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto auto; gap:12px; width:100%; height:auto; min-height:calc(100dvh - 70px); padding:0; border:0; background:none; box-shadow:none; }
.portrait-game .battle-heroes { display:contents; }
.portrait-game .battle-heroes .hero-row { display:grid; grid-template-columns:auto 1fr auto; gap:3px 8px; width:100%; min-height:62px; padding:10px 12px; background:#2b2234; border:1px solid #ffffff18; border-radius:12px; }
.portrait-game .battle-heroes .hero-row:first-child { grid-row:1; }
.portrait-game .battle-heroes .hero-row:last-child { grid-row:4; }
.portrait-game .hero-row .hpbar { grid-column:1/-1; width:100%; height:16px; margin:4px 0; }
.portrait-game .hero-row .hero-runes { grid-column:1/-1; display:flex; gap:4px; }
.portrait-game .hero-name { font-size:13px; }
.portrait-game .hero-label,.portrait-game .hero-lv { font-size:11px; }
.portrait-game .turn-marker { grid-row:2; padding:4px; text-align:center; margin:0; font-size:16px; }
.portrait-game #deploy-hint { display:block; font-size:11px; }
.portrait-game .battle-stage .field { grid-row:3; width:100%; min-width:0; padding:0; display:flex; flex-direction:column; gap:12px; background:none; border:0; }
.portrait-game .lane-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; padding:0; margin:0; min-height:100px; }
.portrait-game .lane { width:auto; min-width:0; height:112px; margin:0; border:1px dashed #79698455; border-radius:8px; padding:0; }
.portrait-game .lane .unit { inset:0; width:100%; height:100%; padding:4px; border-radius:8px; }
.portrait-game .lane .unit-name { font-size:10px; line-height:1.2; white-space:normal; max-height:25px; }
.portrait-game .unit-lv { font-size:8px; }
.portrait-game .unit-stats { font-size:10px; display:flex; flex-wrap:wrap; gap:2px; }
.portrait-game .unit-atk { margin:0; }
.portrait-game .prep-row { grid-template-columns:repeat(5,minmax(0,1fr)) 25px; gap:4px; min-height:76px; height:76px; width:100%; margin:0; }
.portrait-game .prep-card { width:100%; height:76px; padding:4px; border-radius:6px; }
.portrait-game .prep-name { font-size:9px; }
.portrait-game .prep-stats { font-size:9px; }
.portrait-game .battle-rail { grid-row:5; position:static; width:100%; height:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0; }
.portrait-game .deploy-panel { width:auto; flex:1; margin:0; }
.portrait-game .deploy-panel .btn { width:100%; min-height:50px; }
.portrait-game .battle-controls { position:static; display:flex; gap:6px; }
.portrait-game .battle-foot { display:none; }
/* 로그인: 세로 포스터와 아래쪽 시작 영역. */
.portrait-game #view-login { position:relative; min-height:100dvh; padding:calc(100px + env(safe-area-inset-top)) 28px 35px; background:linear-gradient(#0c0a160a,#100f19 72%),url('../art/mythic-sanctuary.png') 62% top/auto 75dvh no-repeat; }
.portrait-game #view-login .title-block { margin:13dvh 0 12dvh; text-align:left; }
.portrait-game #view-login .title-block h1 { font-size:48px; letter-spacing:-2px; color:#f7e4bd; text-shadow:0 3px 25px #000; }
.portrait-game #view-login .panel { width:100%; max-width:none; margin:12px 0; background:#18131ddd; }
.portrait-game #view-login .social-buttons { display:flex; flex-direction:column; gap:10px; }
.portrait-game #view-login .legal-links { font-size:11px; text-align:center; margin-top:24px; }
.portrait-game #toast { bottom:calc(95px + env(safe-area-inset-bottom)); max-width:calc(100vw - 40px); }
@media(min-width:700px) { body.portrait-game { box-shadow:0 0 100px #000; border-inline:1px solid #ffffff12; } }
@media(max-width:359px) { .portrait-game .view { padding-inline:12px; } .portrait-game .card-grid { gap:6px; } .portrait-game .lane { height:100px; } }
@media(prefers-reduced-motion:reduce) { .portrait-game *, .portrait-game *::before,.portrait-game *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
/* 작은 세로 폭에서도 상세 시트의 설명과 버튼이 각자의 줄을 차지한다. */
.portrait-game .modal-box.sm-box,.portrait-game .modal-box.cm-box { display:flex; flex-direction:column; gap:16px; }
.portrait-game .sm-main,.portrait-game .cm-box .cm-body { width:100%; min-width:0; overflow:visible; flex:none; }
.portrait-game .sm-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.portrait-game .sm-actions #sm-close { margin:0; }
.portrait-game .diff-row { display:grid; grid-template-columns:54px minmax(0,1fr); gap:8px; padding:12px; }
.portrait-game .diff-cond { line-height:1.6; }
.portrait-game .diff-extra,.portrait-game .diff-locked,.portrait-game .diff-done { grid-column:2; justify-self:start; white-space:normal; }
.portrait-game .cm-box .cm-art-wrap { flex:none; width:130px; height:185px; min-height:0; max-width:none; margin:0 auto; }
.portrait-game .chapter-head>h3 { font-size:22px; margin:0 0 8px; }
.portrait-game .chapter-head>.dim { font-size:12px; line-height:1.6; }
.portrait-game .stage-node>* { flex-shrink:0; }
.portrait-game .stage-node .stage-label { color:inherit; height:auto; min-height:16px; font-size:12px; overflow:visible; }
.portrait-game .stage-node .stage-meta { color:inherit; font-size:11px; }
.portrait-game .stage-node.current .stars { color:#584525; text-shadow:none; }
.portrait-game .stage-node .stage-crown { width:32px; height:32px; line-height:29px; font-size:24px; top:-18px; right:8px; }
.portrait-game .stage-node.locked { opacity:.7; }
.portrait-game .portrait-nav button { position:relative; }
.portrait-game .portrait-nav .attention-badge { position:absolute; top:0; right:14px; }
.portrait-game #signin-banner { align-items:center; }
.portrait-game #signin-banner>div { flex:1; }
.portrait-game #signin-banner .btn { flex:none; margin:0; }
.portrait-game .battle-rail .deploy-panel { position:static; transform:none; top:auto; right:auto; flex:1; min-width:0; }
.portrait-game .battle-rail .deploy-panel .btn { width:100%; font-size:14px; }
.portrait-game .battle-rail .battle-controls-foot { position:static; }
.portrait-game .prep-slot .prep-card { padding:4px 3px; }
.portrait-game .prep-slot .prep-stats { display:flex; flex-wrap:wrap; gap:2px; font-size:10px; line-height:1.25; }
.portrait-game .prep-wait { font-size:9px; }
.portrait-game .turn-marker { border:0; background:none; box-shadow:none; min-height:0; }
.portrait-game .hero-row .hero-lv { justify-self:end; min-width:24px; width:auto; }
.portrait-game .portrait-nav .reward-attention { position:absolute; top:0; right:9px; margin:0; }
.portrait-game .portrait-nav { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(0,1fr); }
/* 상점은 소환권 한 장을 고르는 진열장, 임무는 진행도를 읽는 기록장이다. */
.portrait-game .pack-row { --pack-color:#b9985d; position:relative; display:flex; flex-direction:column; align-items:stretch; gap:20px; padding:24px; border:1px solid color-mix(in srgb,var(--pack-color) 60%,transparent); border-radius:20px; background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--pack-color) 35%,transparent),transparent 75%),#211a27; box-shadow:none; }
.portrait-game .pack-row[data-focus=FIRE] { --pack-color:#ef9474; }
.portrait-game .pack-row[data-focus=WATER] { --pack-color:#78b9de; }
.portrait-game .pack-row[data-focus=WIND] { --pack-color:#84c9ae; }
.portrait-game .pack-row[data-focus=EARTH] { --pack-color:#cab27b; }
.portrait-game .pack-row[data-focus=IRON] { --pack-color:#b8a3e1; }
.portrait-game .pack-info { width:100%; min-width:0; line-height:1.7; }
.portrait-game .pack-info>b { display:block; color:var(--pack-color); font-size:24px; margin-bottom:8px; }
.portrait-game .pack-price { font-size:17px; margin:12px 0 0; }
.portrait-game .pack-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:10px; }
.portrait-game .pack-actions .btn { width:100%; }
.portrait-game .pack-buy { background:var(--pack-color); border-color:var(--pack-color); }
.portrait-game .shop-item-main { min-width:0; flex:1 1 180px; line-height:1.7; }
.portrait-game .shop-item-actions { flex-wrap:wrap; }
.portrait-game .quest-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:18px; border:1px solid #9fb39530; border-radius:16px; background:#242d28; }
.portrait-game .quest-row .quest-body { flex:1 1 170px; }
.portrait-game .quest-row .quest-name { font-size:16px; line-height:1.5; margin-bottom:7px; }
.portrait-game .quest-row .quest-meta { font-size:12px; line-height:1.7; }
.portrait-game .quest-row .btn { margin-left:auto; }
.portrait-game .quest-bar { height:7px; margin-top:12px; }
.portrait-game .quest-bar i { background:#92c6a5; }
.portrait-game .quest-row.done { border-color:#a4d9ae; }
.portrait-game #view-daily>.panel { padding:16px; margin-bottom:18px; background:#1b231f; }
.portrait-game .attendance-grid { gap:6px; margin-top:18px; }
.portrait-game .att-day { min-width:0; min-height:75px; padding:8px 4px; font-size:11px; border-radius:10px; }
.portrait-game .att-day .att-reward { line-height:1.5; }
.portrait-game .deck-sets { flex-basis:100%; display:flex; gap:8px; padding-top:8px; }
.portrait-game .deck-sum { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; background:#272032; border:1px solid #ffffff10; border-radius:14px; }
.portrait-game .deck-sum>span { display:flex; justify-content:space-between; gap:5px; }
.portrait-game .deck-cost { margin:12px 0; }
.portrait-game .enhance-panel { flex-wrap:wrap; gap:15px; padding:15px; }
.portrait-game .enh-actions { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; }
.portrait-game .enh-actions .btn { width:auto; flex:1 1 90px; }
.portrait-game .enh-split { display:block; }
.portrait-game .enh-side,.portrait-game .enh-main { width:100%; }
.portrait-game .modal-box.cm-box { height:auto; }
.portrait-game .portrait-fold { border:1px solid #ffffff18; border-radius:12px; padding:12px; margin:12px 0; background:#221c2c; }
.portrait-game .portrait-fold summary { cursor:pointer; color:var(--gold); font-size:14px; min-height:24px; line-height:24px; }
.portrait-game .portrait-fold[open] summary { margin-bottom:14px; }
.portrait-game .portrait-fold .deck-sum { margin:0; padding:8px; border:0; }
.portrait-game .rune-slot { font-size:10px; line-height:1.5; }
.portrait-game #view-deck .topbar { padding-bottom:14px; }
.portrait-game #view-deck .card-grid { margin-top:14px; }
.portrait-game .sticky-bottom { margin-top:16px; }
.portrait-game .enh-tabs { display:flex; flex-basis:100%; gap:8px; }
.portrait-game .enh-tabs .btn { flex:1; }
.portrait-game #view-maze { background:radial-gradient(ellipse at 80% 0,#284647aa,transparent 60%),#10191c; }
.portrait-game .maze-head,.portrait-game .tower-head,.portrait-game .challenge-head,.portrait-game .tour-head,.portrait-game .demon-head { padding:18px; border-radius:18px; border:1px solid #ffffff1a; background:#ffffff06; }
.portrait-game .myth-book { max-width:min(496px,calc(100vw - 24px)); max-height:88dvh; border:1px solid #776080; border-radius:20px; padding:20px; background:#211b2b; color:var(--text); }
.portrait-game .myth-traditions { grid-template-columns:1fr; }

/* 2026-10-03 신화 게임 스킨. 실제 그림 아틀라스와 신전 무대를 모든 화면에 연결한다. */
:root { --gold:#f1d28b; --accent:#79cddd; --text:#f5ecd9; --text-dim:#bdb49e; --line:#6c6149; --myth-icons:url('../art/mythic-ui/icons.webp'); --myth-scene:url('../art/mythic-ui/sanctuary.webp'); }
body.portrait-game { background:#0b1420; }
.portrait-game button { -webkit-tap-highlight-color:transparent; }
.portrait-game button:active:not(:disabled) { filter:brightness(1.2); }
.portrait-game .view:not(#view-home):not(#view-login):not(#view-battle) { background:var(--facility-background,linear-gradient(#101c2bef,#0b1522ed),var(--myth-scene) center/cover fixed); }
.portrait-game .hud { min-height:80px; padding:calc(7px + env(safe-area-inset-top)) 12px 9px; gap:6px; background:linear-gradient(90deg,#111c2ff7,#142e3df5,#111c2ff7); border-bottom:2px solid #8c7646; box-shadow:0 3px 12px #0008,inset 0 -4px #030b1544; }
.portrait-game .hud-profile { align-items:center; gap:9px; color:#f9e2a3; }
.portrait-game .hud-level { width:28px; height:28px; border:2px solid #cfab62; box-shadow:0 0 0 2px #142638,0 0 0 3px #6e5b39; background:radial-gradient(#315b76,#101926); }
.portrait-game .hud-nick { max-width:240px; color:#fff0cd; }
.portrait-game .pill { background:#030c16a8; border:1px solid #8d794657; border-radius:16px; padding:2px 5px 2px 1px; font-size:11px; gap:3px; }
/* 아틀라스를 잘라 파일을 늘리지 않고 각 셀을 CSS 배경으로 표시한다. */
.portrait-game [data-go=home],.portrait-game [data-screen=home] { --gx:0%; --gy:0%; }
.portrait-game [data-go=map] { --gx:33.3333%; --gy:0%; }
.portrait-game [data-go=deck],.portrait-game [data-go=cards] { --gx:66.6667%; --gy:0%; }
.portrait-game [data-go=shop],.portrait-game [data-go=sell],.portrait-game [data-go=ogre] { --gx:100%; --gy:0%; }
.portrait-game [data-go=daily] { --gx:0%; --gy:33.3333%; }
.portrait-game [data-go=enhance] { --gx:33.3333%; --gy:33.3333%; }
.portrait-game [data-go=temple],.portrait-game [data-go=shards] { --gx:66.6667%; --gy:33.3333%; }
.portrait-game [data-go=codex],.portrait-game [data-go=mythology],.portrait-game #btn-home-menu { --gx:100%; --gy:33.3333%; }
.portrait-game [data-go=mail],.portrait-game #btn-home-social { --gx:0%; --gy:66.6667%; }
.portrait-game [data-go=tournament],.portrait-game [data-go=ranking],.portrait-game [data-go=guild],.portrait-game [data-go=friends] { --gx:33.3333%; --gy:66.6667%; }
.portrait-game [data-go=tower] { --gx:66.6667%; --gy:66.6667%; }
.portrait-game [data-go=maze],.portrait-game [data-go=demon],.portrait-game [data-go=challenge] { --gx:100%; --gy:66.6667%; }
.portrait-game [data-go=settings] { --gx:66.6667%; --gy:33.3333%; }
.portrait-game .home-side .ico,.portrait-game .home-bottom .ico,.portrait-game .home-sheet .ico,.portrait-game .portrait-nav i,.portrait-game .pill .ico { display:block; flex-shrink:0; background-image:var(--myth-icons); background-size:400% 400%; background-position:var(--gx,0%) var(--gy,0%); background-color:#101827; width:54px; height:54px; border:0; border-radius:9px; clip-path:none; mask:none; box-shadow:none; transform:none; color:transparent; font-size:0; }
.portrait-game .ico::before,.portrait-game .ico::after { content:none; }
.portrait-game .pill .ico { width:23px; height:23px; border-radius:50%; --gy:100%; }
.portrait-game .pill .ico-stamina { --gx:0%; }
.portrait-game .pill .ico-crystal { --gx:33.3333%; }
.portrait-game .pill .ico-gold { --gx:66.6667%; }
.portrait-game .pill .ico-ticket { --gx:100%; }
/* 하단 메뉴는 금속 받침 위에 놓인 큰 그림 버튼이다. */
.portrait-game .portrait-nav { min-height:88px; padding:0 5px calc(5px + env(safe-area-inset-bottom)); background:linear-gradient(#263c49,#101a2b 45%,#080f1b); border-top:3px ridge #bd9d61; box-shadow:0 -5px 16px #0009; }
.portrait-game .portrait-nav button { min-height:80px; gap:0; padding:3px 0 0; font-size:11px; font-weight:700; color:#ded1b3; text-shadow:0 2px 3px #000; border-inline:1px solid #b0905040; background:linear-gradient(90deg,#0001,#b18c3510,#0001); }
.portrait-game .portrait-nav i { width:56px; height:56px; margin-top:-4px; border-radius:50%; box-shadow:0 2px 6px #000; }
.portrait-game .portrait-nav [aria-current=page] { color:#ffe4a4; background:linear-gradient(#d5a65340,#152c3b); box-shadow:inset 0 0 14px #d49b4d55; }
.portrait-game .portrait-nav [aria-current=page] i { border:1px solid #e0ba6b; transform:translateY(-6px) scale(1.08); box-shadow:0 0 14px #e5bc5155; }
.portrait-game .portrait-nav .reward-attention { top:3px; right:3px; z-index:2; box-shadow:0 0 0 2px #f9dd94; }
/* 성역: 중앙 신전 + 양옆 시설 + 하단 출전. 길게 스크롤하는 소개 페이지가 아니다. */
.portrait-game #view-home.active { display:block; height:calc(100svh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:560px; padding:0; margin-bottom:88px; overflow:visible; }
.portrait-game #view-home .town { inset:0; height:100%; background:linear-gradient(#06102018,#06102000 60%,#061020a0),var(--myth-scene) center 48%/cover; }
.portrait-game .portrait-intro { position:absolute; top:20px; left:18%; width:64%; max-width:none; padding:0; min-height:0; text-align:center; pointer-events:none; }
.portrait-game .portrait-eyebrow { font-size:9px; letter-spacing:3px; color:#f4d48e; text-shadow:0 2px 4px #000; }
.portrait-game #view-home .home-command { font-size:32px; letter-spacing:4px; margin:5px 0; font-weight:bold; color:#fff4d1; text-shadow:0 2px 2px #000,0 0 16px #284762; }
.portrait-game .portrait-intro p,.portrait-game .portrait-home-heading { display:none; }
.portrait-game .home-settings { top:14px; right:12px; z-index:3; border:2px ridge #d1b272; color:#ead09a; background:#112436de; border-radius:50%; }
.portrait-game #view-home .home-side { position:absolute; left:8px; top:112px; width:70px; display:flex; flex-direction:column; gap:13px; }
.portrait-game #view-home .home-bottom { position:absolute; right:8px; left:auto; top:112px; width:70px; margin:0; display:flex; flex-direction:column; gap:13px; }
.portrait-game #view-home .round-btn,.portrait-game #view-home .bar-btn { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:70px; height:78px; min-height:78px; padding:0; background:linear-gradient(#102031aa,#102031dd); border:1px solid #b6985c99; border-radius:5px; box-shadow:0 2px 8px #0008,inset 0 0 8px #dab06522; font-size:11px; color:#fff0ce; }
.portrait-game #view-home .round-btn>span,.portrait-game #view-home .bar-btn>span { width:100%; background:#081421dd; padding:3px 1px; line-height:15px; border-top:1px solid #94723e99; text-shadow:0 1px 2px #000; }
.portrait-game #view-home .portrait-journey { position:absolute; inset:auto 16% 55px; width:68%; min-height:63px; padding:9px 20px; align-items:center; justify-content:center; gap:2px; border:3px ridge #ffe0a0; border-radius:8px 22px 8px 22px; color:#fff6d8; background:linear-gradient(#d9ab50,#855020 55%,#b88131); box-shadow:0 0 0 2px #24170d,0 4px 14px #0009,inset 0 1px #ffedb9; text-shadow:0 2px 2px #392309; animation:myth-gateway-glow 3s ease-in-out infinite; }
.portrait-game .portrait-journey span { font-size:9px; letter-spacing:2px; }
.portrait-game .portrait-journey strong { font-size:23px; letter-spacing:3px; }
.portrait-game .portrait-journey i { display:none; }
.portrait-game #view-home .occupy-banner { position:absolute; bottom:142px; left:14px; width:92px; min-height:76px; margin:0; padding:0; border:0; flex-direction:column; gap:0; background:none; }
.portrait-game #view-home #occupy-banner { left:auto; right:14px; }
.portrait-game #view-home .occupy-banner>div { display:none; }
.portrait-game #view-home .occupy-banner .btn { width:100%; min-height:34px; font-size:11px; padding:6px 2px; border-radius:4px; background:#091626ee; }
.portrait-game #view-home .occupy-banner::before { content:''; display:block; width:50px; height:50px; margin:auto; background:var(--myth-icons) 0% 33.3333%/400% 400%; border-radius:8px; }
.portrait-game #view-home #occupy-banner::before { background-position:100% 0%; }
.portrait-game #view-home #content-next { position:absolute; bottom:123px; left:15%; width:70%; padding:3px; margin:0; font-size:10px; text-align:center; background:#051323a3; color:#e9d9b3; }
.portrait-game #view-home .home-chat { position:absolute; bottom:6px; left:12px; width:calc(100% - 24px); margin:0; z-index:5; background:#091726ed; border:1px solid #7b6748; border-radius:5px; }
.portrait-game #view-home .home-chat:not(.folded) { box-shadow:0 -10px 28px #0008; }
.portrait-game #view-home .home-admin { position:absolute; top:62px; right:12px; margin:0; font-size:10px; z-index:4; }
.portrait-game .home-sheet { background:linear-gradient(#122b3aee,#081421fa),var(--myth-scene) center/cover; border:3px ridge #c2a068; border-radius:8px; padding:18px 10px; gap:10px; }
.portrait-game .home-sheet .menu-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:98px; color:#f9e4b6; background:linear-gradient(#23435399,#091725); border:1px solid #a18750; border-radius:5px; box-shadow:inset 0 0 10px #c6983922; text-shadow:0 2px 2px #000; }
/* 모든 시설의 버튼·패널·상세창을 동일한 신화 재질로 묶는다. */
.portrait-game .btn { border:1px solid #b69c66; border-top-color:#e1c58a; border-bottom:3px solid #3f3326; border-radius:4px; background:linear-gradient(#304958,#132c3a 50%,#102331); color:#efe2c3; box-shadow:inset 0 0 0 1px #091925,0 2px 4px #0005; text-shadow:0 1px 2px #000; }
.portrait-game .btn-primary { border-color:#efd69a; border-bottom-color:#72501f; background:linear-gradient(#f3d18a,#be8b3e 48%,#885823 52%,#bd8940); color:#fff5da; text-shadow:0 1px 2px #3c260e; }
.portrait-game .btn:disabled { filter:saturate(.3); opacity:.5; }
.portrait-game .topbar { border-bottom:1px solid #c6a56288; margin-bottom:18px; padding:10px 0 17px; }
.portrait-game .topbar h2 { font-family:Georgia,'AppleMyungjo',serif; font-size:23px; color:#f2d398; text-shadow:0 2px 4px #000; letter-spacing:0; }
.portrait-game .topbar::after { content:'◆'; display:block; position:absolute; bottom:-9px; left:50%; color:#d6b46e; font-size:12px; background:#102030; padding:0 10px; }
.portrait-game .panel,.portrait-game .portrait-fold,.portrait-game .deck-sum,.portrait-game .quest-row,.portrait-game .shop-item,.portrait-game .result-panel { border:1px solid #8f7950; border-radius:4px; background:linear-gradient(130deg,#1d3745eb,#0c1d2ced); box-shadow:inset 0 0 0 3px #0a162288,inset 0 0 24px #0004,0 3px 10px #0003; }
.portrait-game .portrait-fold summary { color:#f0d5a0; }
.portrait-game .modal-box,.portrait-game .modal-box.cm-box,.portrait-game .result-plaque { border:3px ridge #d0b077; border-radius:9px; background:linear-gradient(#153246f7,#091828fa),var(--myth-scene) center/cover; box-shadow:0 0 0 2px #060b12,0 0 40px #000; }
.portrait-game .modal-box h3,.portrait-game .result-plaque h2 { color:#f5d393; text-shadow:0 2px 3px #000; }
.portrait-game .chapter-tab { border:1px solid #8c754b; border-radius:4px; background:linear-gradient(#263f4e,#12222d); color:#e6d6ae; }
.portrait-game .chapter-tab.active { background:linear-gradient(#e4c480,#92662d); color:#221705; }
.portrait-game .stage-node { border:3px ridge #bca777; border-radius:8px; background:linear-gradient(#143449ee,#071b2cee); box-shadow:0 4px 15px #0009; }
.portrait-game .stage-node.current { background:linear-gradient(#ffe6a6,#c29646); border:3px ridge #ffe7a6; box-shadow:0 0 20px #eac07355,0 4px 10px #0008; }
.portrait-game .stage-node .stage-crown { background:#16202c; border:2px ridge #e7c37f; }
.portrait-game .card-grid .card { border:2px ridge #8f7853; border-radius:5px; box-shadow:0 3px 6px #0008; }
.portrait-game .card-grid .card.selected { border-color:#f9dc8f; box-shadow:0 0 10px #f8cd5855; }
.portrait-game .rune-slot { background:radial-gradient(#245165,#0a1929); border:2px ridge #8e784b; border-radius:50%; }
.portrait-game .pack-row { border:2px ridge var(--pack-color); border-radius:5px 18px 5px 18px; padding:20px 18px 18px 108px; min-height:205px; background:radial-gradient(ellipse at 0 20%,color-mix(in srgb,var(--pack-color) 24%,transparent),transparent 75%),linear-gradient(#1e3546,#0c1c2c); }
.portrait-game .pack-row::before { content:''; position:absolute; left:12px; top:28px; width:88px; height:100px; background:var(--myth-icons) 66.6667% 0%/400% 400%; border:1px solid var(--pack-color); border-radius:8px; box-shadow:0 0 14px color-mix(in srgb,var(--pack-color) 35%,transparent); }
.portrait-game .pack-info>b { font-size:21px; line-height:1.3; }
.portrait-game .pack-actions { grid-template-columns:1fr; gap:7px; }
.portrait-game #view-daily>.panel { background:linear-gradient(#1c3838,#0b2025); border-color:#8c895b; }
.portrait-game .att-day { border:1px solid #8b774d; border-radius:4px; background:linear-gradient(#21384a,#0c1c2e); }
.portrait-game .att-day.earned { background:linear-gradient(#315342,#172c25); }
.portrait-game .quest-row { background:linear-gradient(120deg,#253d35,#0e252b); }
.portrait-game .battle-stage .hero-row { border:2px ridge #bda375; border-radius:5px; background:linear-gradient(#203e50,#102433); }
.portrait-game #view-battle { background:linear-gradient(#061421bc,#061421d9),var(--myth-scene) center/cover; }
.portrait-game .lane { border:1px solid #a0895655; box-shadow:inset 0 0 12px #d5af4620; border-radius:5px; background:#07132145; }
.portrait-game .lane .unit { border-radius:5px; }
.portrait-game .prep-slot { border-color:#a58b5966; }
.portrait-game .hpbar { border:1px solid #c4a268; border-radius:4px; background:#050e1a; }
.portrait-game #view-login { background:linear-gradient(transparent,#061422e8 85%),var(--myth-scene) center/cover; }
.portrait-game #view-login .title-block h1 { color:#ffe4a8; font-family:Georgia,'AppleMyungjo',serif; text-align:center; text-shadow:0 3px 4px #000,0 0 25px #b8985a; }
@keyframes myth-gateway-glow { 50% { box-shadow:0 0 0 2px #24170d,0 0 22px #edc57877,inset 0 1px #ffedb9; } }
@media(max-width:359px) { .portrait-game #view-home .home-side,.portrait-game #view-home .home-bottom { width:60px; } .portrait-game #view-home .round-btn,.portrait-game #view-home .bar-btn { width:60px; } .portrait-game .portrait-nav i { width:48px; height:48px; } .portrait-game .portrait-nav button { font-size:10px; } .portrait-game .pack-row { padding-left:88px; } .portrait-game .pack-row::before { left:8px; width:70px; height:86px; } }
@media(prefers-reduced-motion:reduce) { .portrait-game .portrait-journey { animation:none!important; } }
/* 이전 가로 로비의 top/bottom 동시 지정이 시트를 늘리지 않도록 해제한다. */
.portrait-game #view-home .home-chat { top:auto; height:auto; min-height:0; }
.portrait-game #view-home .home-side,.portrait-game #view-home .home-bottom { bottom:auto; }
.portrait-game #view-home .occupy-banner,.portrait-game #view-home #signin-banner:not(.hidden) ~ #occupy-banner { top:auto; }
.portrait-game #view-home .occupy-banner::before { position:static; transform:none; }
/* 시설별 문장과 그림 문장을 함께 사용한다. */
.portrait-game #view-map { --sx:100%; --sy:66.6667%; }
.portrait-game #view-deck,.portrait-game #view-cards { --sx:66.6667%; --sy:0%; }
.portrait-game #view-shop,.portrait-game #view-sell,.portrait-game #view-ogre { --sx:100%; --sy:0%; }
.portrait-game #view-daily { --sx:0%; --sy:33.3333%; }
.portrait-game #view-enhance { --sx:33.3333%; --sy:33.3333%; }
.portrait-game #view-temple,.portrait-game #view-shards { --sx:66.6667%; --sy:33.3333%; }
.portrait-game #view-codex { --sx:100%; --sy:33.3333%; }
.portrait-game #view-mail { --sx:0%; --sy:66.6667%; }
.portrait-game #view-tower { --sx:66.6667%; --sy:66.6667%; }
.portrait-game #view-maze,.portrait-game #view-challenge,.portrait-game #view-demon { --sx:100%; --sy:66.6667%; }
.portrait-game #view-tournament,.portrait-game #view-guild,.portrait-game #view-ranking,.portrait-game #view-friends { --sx:33.3333%; --sy:66.6667%; }
.portrait-game .topbar h2 { display:flex; align-items:center; gap:8px; font-size:21px; }
.portrait-game .topbar h2::before { content:''; display:block; flex:0 0 40px; height:40px; border-radius:50%; background:var(--myth-icons) var(--sx,0%) var(--sy,0%)/400% 400%; border:1px solid #aa8d59; box-shadow:0 0 12px #dbc68b22; }
.portrait-game #view-home .town::after { content:''; position:absolute; inset:12% 20%; pointer-events:none; background:radial-gradient(circle at 20% 20%,#ffe8aabb 0 1px,transparent 3px),radial-gradient(circle at 78% 54%,#88f2ff 0 1px,transparent 3px),radial-gradient(circle at 40% 80%,#fff1bb 0 1px,transparent 3px),radial-gradient(circle at 65% 28%,#fff3d4 0 1px,transparent 3px); animation:myth-motes 7s ease-in-out infinite alternate; }
@keyframes myth-motes { to { opacity:.3; transform:translateY(-18px); } }
@media(prefers-reduced-motion:reduce) { .portrait-game #view-home .town::after { animation:none!important; } }
@media(max-height:780px) { .portrait-game #view-home.active { min-height:610px; } }

/* 성역에서는 중앙 출전 버튼이 관문 진입을 전담한다. 다른 화면의 관문 바로가기는 유지한다. */
/* 하단 이동은 성역에서도 같은 다섯 항목과 순서를 유지한다. */

/* 소환 상품은 세로 카드팩 세 장을 한 줄에 진열한다. */
.portrait-game #shop-packs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:stretch; }
.portrait-game #shop-packs>.note { grid-column:1/-1; }
.portrait-game #shop-packs .pack-row { min-width:0; min-height:0; padding:9px 7px; gap:7px; border-radius:7px 7px 14px 14px; text-align:center; }
.portrait-game #shop-packs .pack-row::before { position:static; align-self:center; flex:none; width:100%; max-width:88px; height:auto; aspect-ratio:1/1; margin:0; border-radius:5px; }
.portrait-game #shop-packs .pack-info { display:flex; flex-direction:column; flex:1; line-height:1.45; overflow-wrap:anywhere; }
.portrait-game #shop-packs .pack-info>b { font-size:15px; line-height:1.4; margin:0 0 7px; word-break:keep-all; overflow-wrap:anywhere; }
.portrait-game #shop-packs .pack-info .dim { font-size:11px; line-height:1.5; }
.portrait-game #shop-packs .pack-price { font-size:13px; line-height:1.5; margin:10px 0 0; font-weight:700; }
.portrait-game #shop-packs .pack-actions { grid-template-columns:1fr; gap:6px; margin-top:auto; }
.portrait-game #shop-packs .pack-actions .btn { min-width:0; min-height:44px; padding:7px 3px; font-size:12px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
@media(max-width:359px) { .portrait-game #shop-packs { gap:6px; } .portrait-game #shop-packs .pack-row { padding:8px 5px; } .portrait-game #shop-packs .pack-info>b { font-size:14px; } }

/* 확률은 상품별 버튼 대신 상점 제목의 공통 창에서 확인한다. */
.portrait-game #view-shop>.topbar { flex-wrap:nowrap; gap:8px; }
.portrait-game #view-shop>.topbar h2 { min-width:0; font-size:19px; }
.portrait-game #shop-rates-open { flex:none; padding:7px 9px; font-size:11px; min-height:36px; }
.portrait-game .shop-rates-sheet { display:flex; flex-direction:column; max-height:85svh; overflow:hidden; }
.portrait-game .shop-rates-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; }
.portrait-game #rates-box { overflow:auto; min-height:0; border:0; padding:0; }
.portrait-game .shop-rates-focus { color:var(--gold); }
.portrait-game .shop-rates-group { margin:18px 0; }
.portrait-game .shop-rates-group h4 { position:sticky; top:0; background:#153246; color:var(--gold); padding:10px; margin:0; border-bottom:1px solid #ac905a; }
.portrait-game .shop-rates-group .rate-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:12px; }
.portrait-game .shop-rates-group .rate-row b { white-space:nowrap; }
@media(max-width:359px) { .portrait-game #view-shop>.topbar h2 { font-size:16px; } .portrait-game #view-shop>.topbar h2::before { flex-basis:30px; height:30px; } }

/* 한국어는 어절을 우선 보존하고, 공간보다 긴 이름만 마지막 수단으로 나눈다. */
.portrait-game :is(h1,h2,h3,h4,p,label,summary,button,.note,.dim,.card-name,.pack-info,.quest-name,.quest-body,.stage-label,.hero-name,.skill-name,.skill-desc) { word-break:keep-all; overflow-wrap:anywhere; text-wrap:pretty; }
.portrait-game :is(.note,.quest-body,.skill-desc,.modal-box p) { line-height:1.55; }
.portrait-game :is(.btn,.menu-btn,.bar-btn,.round-btn) { white-space:normal; height:auto; }
.portrait-game .battle-rail { flex-wrap:wrap; }
.portrait-game .battle-rail .deploy-panel { flex:1 1 170px; }
.portrait-game .battle-controls { flex-wrap:wrap; justify-content:flex-end; }
.portrait-game :is(.hero-name,#deploy-hint,.resonance-guide) { white-space:normal; line-height:1.4; }
.portrait-game .lane .unit-name { max-height:none; line-height:1.25; word-break:keep-all; overflow-wrap:anywhere; }
.portrait-game .shop-rate-tabs { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.portrait-game .shop-rate-tabs .btn { min-height:34px; padding:5px 8px; font-size:11px; }
.portrait-game .shop-rate-tabs [aria-pressed="true"] { background:linear-gradient(#e6c581,#98713b); color:#21170c; border-color:#f9dfa4; }
.portrait-game #shop-rates-filters { flex:none; border-bottom:1px solid #8f7950; padding-bottom:7px; }
.portrait-game .battle-heroes .hero-row { grid-template-columns:minmax(0,1fr) auto; }
.portrait-game .hero-row .hero-name { max-width:none; min-width:0; text-overflow:clip; }
.portrait-game .hero-row .hero-lv { justify-self:end; }

/* 강화: 상단 제단에 대상, 하단 가로 보관함에서 재료를 고른다. */
.portrait-game #view-enhance .enh-split { display:flex; flex-direction:column; height:auto; gap:16px; }
.portrait-game #view-enhance .enh-split.hidden { display:none; }
.portrait-game #view-enhance .enh-side,.portrait-game #view-enhance .enh-main { width:100%; min-width:0; flex:none; overflow:visible; }
.portrait-game #view-enhance .enhance-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding:15px; background:radial-gradient(ellipse at 25% 25%,#a3783538,transparent 70%),linear-gradient(#243644,#101e2c); border:2px ridge #bda06b; }
.portrait-game #view-enhance .enh-target { width:100%; min-width:0; text-align:center; }
.portrait-game #view-enhance .enh-target h3 { display:block; margin:0 0 10px; color:#f2d398; font-size:14px; }
.portrait-game #enhance-target>.card { width:100%; max-width:165px; height:auto; aspect-ratio:3/4; min-height:0; margin:0 auto; }
.portrait-game #enhance-target>.dim { display:flex; align-items:center; justify-content:center; min-height:160px; border:1px dashed #ad925b; padding:12px; }
.portrait-game #view-enhance .enh-materials { min-width:0; width:auto; display:flex; flex-direction:column; gap:10px; }
.portrait-game #view-enhance .enh-cost { font-size:13px; line-height:1.5; color:#f2d398; }
.portrait-game #view-enhance .enh-mat-list:not(#rune-enh-list) { max-height:190px; overflow:auto; }
.portrait-game #view-enhance .enh-mat { display:flex; flex-wrap:wrap; gap:4px; padding:7px; font-size:11px; }
.portrait-game #view-enhance .enh-actions,.portrait-game #view-enhance .enh-hint { grid-column:1/-1; margin:0; }
.portrait-game #view-enhance .enh-change-target { width:100%; margin-top:8px; font-size:12px; }
.portrait-game #view-enhance .enh-main { border-top:1px solid #b89c66; padding-top:12px; }
.portrait-game #view-enhance .enh-main>.note { display:block; margin:0 0 10px; }
.portrait-game #view-enhance :is(#enhance-list,#rune-enh-list) { --enh-paged:0; display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:10px; padding:10px 2px 16px; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#c3a264 #152533; max-height:none; }
.portrait-game #enhance-list>.card { flex:0 0 112px; width:112px; min-width:112px; min-height:155px; scroll-snap-align:start; }
.portrait-game #rune-enh-list>.rune-row { flex:0 0 145px; min-width:145px; flex-wrap:wrap; scroll-snap-align:start; }
.portrait-game #view-enhance .enh-filters { flex-wrap:wrap; }
.portrait-game #view-enhance>.topbar { gap:7px; padding:4px 0 10px; margin-bottom:12px; min-height:0; }
.portrait-game #view-enhance .enh-tabs .btn { min-height:36px; padding:6px; }
.portrait-game #view-enhance .enhance-panel { padding:10px; gap:8px; }
.portrait-game #enhance-target>.card { max-width:112px; }
.portrait-game #view-enhance .enh-target h3 { margin-bottom:6px; font-size:12px; }
.portrait-game #view-enhance .enh-change-target { min-height:32px; padding:5px; margin-top:5px; }
.portrait-game #view-enhance .enh-actions .btn { min-height:38px; padding:6px; font-size:12px; }
.portrait-game #view-enhance .enh-hint { font-size:11px; line-height:1.4; }
.portrait-game #view-enhance .enh-main>.note { display:none; }
.portrait-game #view-enhance .enh-cost { word-break:keep-all; overflow-wrap:anywhere; }

/* 신화 카드: 조각한 금속 프레임, 중앙 속성 인장, 양피지 이름띠. */
.portrait-game :is(#view-enhance,#view-deck) .enh-clean-card {
  --enh-rarity:#cbd5e1; position:relative; display:flex; flex-direction:column;
  padding:7px 6px 6px; gap:0; border:3px ridge var(--enh-rarity);
  border-radius:19px 19px 10px 10px; overflow:visible; text-align:center;
  background:repeating-linear-gradient(135deg,#ffffff09 0 1px,transparent 1px 5px),linear-gradient(110deg,#171b25,#6c6250 15%,#242a32 28%,#151c26 72%,#776948 88%,#161c26);
  color:#eee5d3; box-shadow:inset 0 0 0 1px #e0c788,inset 0 0 0 3px #0b111b,0 4px 7px #000b;
  height:auto; aspect-ratio:auto; min-height:0; font:inherit; opacity:1;
}
.portrait-game :is(#view-enhance,#view-deck) .enh-clean-card::after { content:""; display:block; position:absolute; inset:4px; border:1px solid #c6ab6a; border-radius:13px 13px 5px 5px; pointer-events:none; background:none; z-index:3; }
.portrait-game :is(#view-enhance,#view-deck) .enh-clean-card[data-rarity="2"] { --enh-rarity:#35e878; }
.portrait-game :is(#view-enhance,#view-deck) .enh-clean-card[data-rarity="3"] { --enh-rarity:#299cff; }
.portrait-game :is(#view-enhance,#view-deck) .enh-clean-card[data-rarity="4"] { --enh-rarity:#c16aff; }
.portrait-game :is(#view-enhance,#view-deck) .enh-clean-card[data-rarity="5"] { --enh-rarity:#ffd037; }
.portrait-game :is(#view-enhance,#view-deck) .enh-clean-card>.enh-card-crest {
  position:absolute; top:-28px; left:50%; transform:translateX(-50%); z-index:5;
  display:grid; place-items:center; width:38px; height:40px;
  clip-path:polygon(50% 0,89% 20%,100% 65%,50% 100%,0 65%,11% 20%);
  background:linear-gradient(135deg,#ffedbc,#9a783d 45%,#e7c786 60%,#73522c);
  filter:drop-shadow(0 2px 2px #000);
}
.portrait-game :is(#view-enhance,#view-deck) .enh-card-crest::before { content:""; position:absolute; inset:3px; background:radial-gradient(ellipse at 40% 25%,#435369,#0b1420 75%); clip-path:polygon(50% 0,89% 20%,100% 65%,50% 100%,0 65%,11% 20%); }
.portrait-game :is(#view-enhance,#view-deck) .enh-name-element { position:relative; z-index:1; width:20px; height:20px; fill:currentColor; filter:drop-shadow(0 0 3px currentColor); }
.portrait-game :is(#view-enhance,#view-deck) .enh-name-element-FIRE { color:#ff9854; }
.portrait-game :is(#view-enhance,#view-deck) .enh-name-element-WATER { color:#64c5ff; }
.portrait-game :is(#view-enhance,#view-deck) .enh-name-element-WIND { color:#8ee8c1; }
.portrait-game :is(#view-enhance,#view-deck) .enh-name-element-EARTH { color:#ddad73; }
.portrait-game :is(#view-enhance,#view-deck) .enh-name-element-IRON { color:#d3e0ec; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-portrait { display:block; position:relative; width:100%; aspect-ratio:1/1.35; overflow:hidden; border-radius:40% 40% 5% 5% / 22% 22% 3% 3%; border:1px solid #dbbe7e; box-shadow:0 0 0 2px #080d16; box-sizing:border-box; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-portrait .card-art { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-caption { display:flex; flex-direction:column; width:100%; padding:0 2px 4px; box-sizing:border-box; gap:5px; background:radial-gradient(ellipse at top,#4c4536,#161e2a 80%); }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-caption>b { position:relative; z-index:4; display:flex; align-items:center; justify-content:center; min-height:26px; margin:-8px -8px 0; padding:4px 5px; box-sizing:border-box; border:1px solid #eed19a; border-radius:3px 3px 35% 35% / 3px 3px 15% 15%; background:linear-gradient(100deg,#856032,#d7b778 18%,#f0d599 50%,#c5a062 82%,#70502a); box-shadow:0 2px 3px #000a,inset 0 0 0 1px #785934; color:#261b0f; text-shadow:0 1px #ffe9b9; font-size:11px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-meta { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:#e8d9b8; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-stars { color:var(--enh-rarity); font-size:11px; letter-spacing:1px; text-shadow:0 1px 2px #000; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-stats { display:flex; justify-content:space-between; gap:3px; font-size:10px; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-stats>span:first-child { color:#efc88f; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-stats>span:last-child { color:#94d5bb; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-check,.portrait-game :is(#view-enhance,#view-deck) .enh-card-seal { position:absolute; top:24px; right:3px; z-index:3; background:#ead09a; color:#18232c; border:1px solid #fff1cc; border-radius:50%; width:20px; height:20px; display:grid; place-items:center; font-size:14px; }
.portrait-game :is(#view-enhance,#view-deck) .enh-picked { outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 12px color-mix(in srgb,var(--enh-rarity) 55%,transparent); }
.portrait-game :is(#view-enhance,#view-deck) .enh-clean-card:focus-visible { outline:3px solid white; outline-offset:2px; }
.portrait-game :is(#view-enhance,#view-deck) #enhance-list { padding-top:36px; gap:12px; }
.portrait-game :is(#view-enhance,#view-deck) #enhance-target { padding-top:28px; }

.portrait-game :is(#view-enhance,#view-deck) .enh-card-crest .enh-name-element { width:28px; height:28px; opacity:.8; }
.portrait-game :is(#view-enhance,#view-deck) .enh-crest-cost { position:absolute; z-index:2; inset:0; display:grid; place-items:center; padding-bottom:2px; font-size:20px; line-height:1; font-weight:900; color:#fff9df; -webkit-text-stroke:1px #172333; paint-order:stroke fill; text-shadow:0 2px 2px #000,1px 0 #142030,-1px 0 #142030; }
.portrait-game :is(#view-enhance,#view-deck) .enh-card-stats { border-top:1px solid #b79a6255; padding-top:4px; font-weight:700; white-space:nowrap; }

/* 프로필 옆에 재화를 모은 2×2 금속 계기판. */
.portrait-game .hud,.portrait-game.in-town .hud { display:grid; grid-template-columns:minmax(85px,.85fr) minmax(0,1.4fr); min-height:76px; gap:10px; padding:calc(8px + env(safe-area-inset-top)) 12px 8px; align-items:center; }
.portrait-game .hud-profile { width:auto; min-width:0; gap:8px; }
.portrait-game .hud-level { flex:none; }
.portrait-game .hud-nick { min-width:0; max-width:none; font-size:12px; white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
.portrait-game .hud-currencies { width:auto; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 7px; }
.portrait-game .hud .pill { min-width:0; min-height:27px; padding:2px 6px 2px 3px; border-radius:6px 12px 6px 12px; background:linear-gradient(120deg,#34516888,#0a1526); border:1px solid #aa8b505e; box-shadow:inset 0 1px #f8dfa223; gap:3px; font-size:11px; justify-content:flex-start; white-space:nowrap; }
.portrait-game .hud .pill .ico { width:20px; height:20px; flex:0 0 20px; }
.portrait-game .hud .pill b { margin-left:auto; font-variant-numeric:tabular-nums; }
.portrait-game .hud .pill-stamina .dim { font-size:9px; }
.portrait-game #shop-packs .pack-info>b { font-size:14px; margin-bottom:4px; }
.portrait-game #shop-packs .pack-price { margin-top:6px; }
.portrait-game #shop-packs .pack-actions { gap:4px; }
.portrait-game #shop-packs .pack-actions .btn { min-height:40px; padding:5px 3px; }
/* 별자리 관문: 별은 진행 지점, 빛나는 선은 열린 경로다. */
.portrait-game #view-map { background:radial-gradient(ellipse at 20% 25%,#34487b66,transparent 50%),radial-gradient(ellipse at 85% 65%,#66387544,transparent 55%),#080f23; }
.portrait-game .stage-map { background-image:radial-gradient(circle at 12px 20px,#c5defb99 0 1px,transparent 1.5px),radial-gradient(circle at 40px 67px,#e7d3a677 0 1px,transparent 1.5px); background-size:89px 127px,137px 173px; }
.portrait-game .stage-path line { stroke:#4d6689; stroke-width:1; vector-effect:non-scaling-stroke; }
.portrait-game .stage-path .constellation-open { stroke:#a7d9ff; stroke-width:2; filter:drop-shadow(0 0 3px #83bcff); }
.portrait-game .stage-path .constellation-locked { stroke-dasharray:3 6; opacity:.65; }
.portrait-game .stage-node { width:112px; height:124px; padding:4px; gap:2px; border:0; border-radius:0; background:radial-gradient(ellipse,#0b1429 35%,#0b1429bb 65%,transparent 72%); box-shadow:none; }
.portrait-game .stage-node .constellation-star { order:-2; display:block; height:37px; font-size:39px; line-height:37px; color:#8d9ebd; text-shadow:0 0 8px #7392d7; }
.portrait-game .stage-node .stage-no { order:-1; font-size:14px; line-height:18px; color:#d1e6ff; }
.portrait-game .stage-node .stage-label { font-size:11px; line-height:1.3; color:#d8e5f7; }
.portrait-game .stage-node .stage-meta { font-size:9px; color:#a5b7d0; }
.portrait-game .stage-node .stars { font-size:17px; letter-spacing:2px; line-height:21px; }
.portrait-game .stage-node.current { border:0; outline:0; background:radial-gradient(ellipse,#594e3066,transparent 72%); box-shadow:none; color:#ffdc83; }
.portrait-game .stage-node.current .constellation-star { color:#ffe49d; text-shadow:0 0 9px #ffd77d,0 0 24px #ffbc36; transform:scale(1.22); }
.portrait-game .stage-node.current .stage-no { color:#ffe49d; font-weight:900; text-decoration:underline; text-underline-offset:3px; }
.portrait-game .stage-node.current .stars { color:#ffda84; }
.portrait-game .stage-node.cleared .constellation-star { color:#9be4ff; }
.portrait-game .stage-node.locked { opacity:.7; }
.portrait-game .stage-node .stage-crown { top:2px; right:17px; width:22px; height:22px; line-height:20px; font-size:19px; border:0; background:none; color:#ffe1a0; }
.portrait-game .stage-node:focus-visible { outline:2px solid #fff1b6; outline-offset:3px; border-radius:12px; }
@media(max-width:359px) { .portrait-game .hud { padding-left:8px; padding-right:8px; gap:6px; grid-template-columns:minmax(75px,.8fr) minmax(0,1.5fr); } .portrait-game .hud-profile { gap:6px; } .portrait-game .hud-nick { font-size:11px; } }

.portrait-game .stage-node .stars .off { color:#7e8eab; }
.portrait-game .stage-path .constellation-locked { stroke:#8097be; opacity:.8; }

/* 하단 메뉴와 콘텐츠가 같은 높이 기준을 사용한다. 홈 인디케이터 영역도 확보한다. */
body.portrait-game { --portrait-nav-height:66px; --portrait-nav-space:calc(var(--portrait-nav-height) + env(safe-area-inset-bottom)); }
.portrait-game .portrait-nav { min-height:0; height:var(--portrait-nav-space); box-sizing:border-box; padding:0 5px env(safe-area-inset-bottom); }
.portrait-game .portrait-nav button { min-height:0; height:63px; padding:3px 0 2px; font-size:10px; line-height:14px; }
.portrait-game .portrait-nav i { width:42px; height:42px; margin-top:0; }
.portrait-game .portrait-nav [aria-current=page] i { transform:translateY(-2px) scale(1.04); }
.portrait-game .view:not(#view-home):not(#view-battle) { padding-bottom:calc(var(--portrait-nav-space) + 24px); }
.portrait-game #view-map .map-foot { flex-wrap:wrap; gap:8px; padding-bottom:8px; }
.portrait-game #view-map .map-stamina { flex:1 0 100%; }
.portrait-game .sticky-bottom { bottom:calc(var(--portrait-nav-space) + 8px); }
.portrait-game .home-sheet { bottom:calc(var(--portrait-nav-space) + 12px); }
.portrait-game #view-home.active { margin-bottom:calc(var(--portrait-nav-space) + 12px); }

/* 성역은 뷰포트에 고정하고 채팅/메뉴 내부만 필요할 때 스크롤한다. */
html:has(body.portrait-game[data-screen="home"]) { height:100%; overflow:hidden; overscroll-behavior-y:none; }
body.portrait-game[data-screen="home"] { display:flex; flex-direction:column; height:100dvh; min-height:0; overflow:hidden; overscroll-behavior-y:none; }
.portrait-game[data-screen="home"] .hud { position:relative; flex:none; }
.portrait-game[data-screen="home"] #app { flex:1; min-height:0; padding-bottom:var(--portrait-nav-space); box-sizing:border-box; overflow:hidden; }
.portrait-game[data-screen="home"] #view-home.active { height:100%; min-height:0; max-height:100%; margin:0; padding:0; overflow:hidden; }
.portrait-game[data-screen="home"] .home-chat .chat-body { max-height:min(90px,18dvh); overflow-y:auto; overscroll-behavior:contain; }
@media(max-height:700px) {
  .portrait-game[data-screen="home"] .portrait-intro { top:10px; }
  .portrait-game[data-screen="home"] #view-home .home-command { font-size:26px; }
  .portrait-game[data-screen="home"] #view-home .home-side,.portrait-game[data-screen="home"] #view-home .home-bottom { top:94px; gap:7px; }
  .portrait-game[data-screen="home"] #view-home .round-btn,.portrait-game[data-screen="home"] #view-home .bar-btn { height:66px; min-height:66px; }
  .portrait-game[data-screen="home"] #view-home .home-side .ico,.portrait-game[data-screen="home"] #view-home .home-bottom .ico { width:42px; height:42px; }
}

/* 메뉴는 목적별로 한 묶음만 펼쳐 반복 그림과 선택지를 줄인다. */
.portrait-game #home-menu-sheet { display:flex; flex-direction:column; gap:14px; padding:14px; inset:50% auto auto 50%; transform:translate(-50%,-50%); margin:0; width:min(480px,calc(100% - 24px)); height:480px; max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); box-sizing:border-box; overflow:hidden; }
.portrait-game #home-menu-sheet.hidden { display:none; }
.portrait-game .home-menu-heading { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #9a7b4855; padding-bottom:8px; }
.portrait-game .home-menu-heading h3 { margin:0; color:#f7d797; font-size:18px; }
.portrait-game #home-menu-close { width:44px; height:44px; border:1px solid #ad915b; border-radius:50%; background:#101f2f; color:#ecd5aa; font-size:24px; }
.portrait-game .home-menu-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.portrait-game .home-menu-categories button { min-width:0; min-height:44px; padding:7px 2px; border:1px solid #71869b66; border-radius:5px; background:#101d2d; color:#b9c7d7; font-size:12px; }
.portrait-game .home-menu-categories [aria-pressed="true"] { background:linear-gradient(#e0c58a,#a47b3c); border-color:#f4dca5; color:#261b0e; font-weight:800; }
.portrait-game .home-menu-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.portrait-game .home-menu-group.hidden { display:none; }
.portrait-game #home-menu-sheet .menu-btn { position:relative; min-height:98px; padding:8px; gap:5px; font-size:12px; line-height:1.4; border:1px solid #a18750; background:linear-gradient(#23435399,#091725); text-align:center; }
.portrait-game #home-menu-sheet .menu-btn .reward-attention { position:absolute; right:5px; top:4px; }

/* 중앙 메뉴의 크기는 분류와 무관하게 유지하고 작은 화면에서는 항목만 스크롤한다. */
.portrait-game #home-menu-sheet .home-menu-heading,.portrait-game #home-menu-sheet .home-menu-categories { flex:none; }
.portrait-game #home-menu-sheet .home-menu-group { flex:1; min-height:0; grid-auto-rows:116px; align-content:start; overflow-y:auto; overscroll-behavior:contain; }
.portrait-game #home-menu-sheet .menu-btn .ico { width:68px; height:68px; flex:none; }
.portrait-game #home-menu-sheet [data-go="ogre"] .ico { background-image:url("../art/mythic-ui/menu-ogre.webp"); background-size:cover; background-position:center; border-radius:8px; }
.portrait-game #home-menu-sheet [data-go="mythology"] .ico { background-image:url("../art/mythic-ui/menu-mythology.webp"); background-size:cover; background-position:center; border-radius:8px; }
.portrait-game #home-menu-sheet [data-go="demon"] .ico { background-image:url("../art/mythic-ui/menu-demon.webp"); background-size:cover; background-position:center; border-radius:8px; }
.portrait-game #home-menu-sheet [data-go="challenge"] .ico { background-image:url("../art/mythic-ui/menu-challenge.webp"); background-size:cover; background-position:center; border-radius:8px; }
.portrait-game #home-menu-sheet [data-go="settings"] .ico { background-image:url("../art/mythic-ui/menu-settings.webp"); background-size:cover; background-position:center; border-radius:8px; }

/* 메뉴 그림을 독립된 유물처럼 배치한다. 사각 타일 대신 그림과 이름 리본을 누른다. */
.portrait-game #home-menu-sheet .home-menu-group { grid-auto-rows:140px; gap:8px 12px; }
.portrait-game #home-menu-sheet .menu-btn {
  min-height:0; padding:5px 2px; gap:0; border:0; border-radius:0;
  background:transparent; box-shadow:none; overflow:visible;
}
.portrait-game #home-menu-sheet .menu-btn .ico {
  width:96px; height:96px; border-radius:0; background-color:transparent;
  mask-image:radial-gradient(ellipse at center,#000 48%,#000b 63%,transparent 74%);
  filter:drop-shadow(0 3px 5px #0008);
}
.portrait-game #home-menu-sheet .menu-btn > span:not(.reward-attention) {
  position:relative; margin-top:-3px; min-width:104px; max-width:100%; padding:5px 10px;
  box-sizing:border-box; color:#ffe6af; font-size:13px; font-weight:700; line-height:1.35;
  background:linear-gradient(90deg,transparent,#182b39 18%,#102030 82%,transparent);
  border-top:1px solid #bba16a70; border-bottom:1px solid #bba16a35;
  text-shadow:0 2px 2px #000;
}
.portrait-game #home-menu-sheet .menu-btn:active .ico { transform:scale(.94); filter:brightness(1.2); }
.portrait-game #home-menu-sheet .menu-btn:focus-visible { outline:2px solid #e9cd8c; outline-offset:-2px; border-radius:14px; }
.portrait-game #home-menu-sheet .menu-btn .reward-attention { right:calc(50% - 49px); top:6px; }
.portrait-game #home-menu-sheet .home-menu-categories button {
  border:0; border-radius:0; background:transparent; box-shadow:none;
  border-bottom:2px solid #71869b44; color:#adbac9;
}
.portrait-game #home-menu-sheet .home-menu-categories [aria-pressed="true"] {
  color:#ffe2a0; border-bottom-color:#edc76e;
  background:radial-gradient(ellipse at bottom,#b185394d,transparent 75%);
  text-shadow:0 0 12px #f6c56866;
}

/* 대표님 확정 기준: 성역과 하단 이동도 그림 + 이름 장식. 사각 타일을 만들지 않는다. */
.portrait-game #view-home .round-btn,.portrait-game #view-home .bar-btn {
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
.portrait-game #view-home .home-side .ico,.portrait-game #view-home .home-bottom .ico,
.portrait-game .portrait-nav i {
  background-color:transparent; border:0; border-radius:0; box-shadow:none;
  mask-image:radial-gradient(ellipse at center,#000 48%,#000b 63%,transparent 74%);
}
.portrait-game #view-home .round-btn>span,.portrait-game #view-home .bar-btn>span,
.portrait-game .portrait-nav button>span:not(.reward-attention):not(.attention-badge) {
  background:linear-gradient(90deg,transparent,#102030c9 20%,#102030c9 80%,transparent);
  border-top:1px solid #bba16a70; border-bottom:1px solid #bba16a35;
  color:#ffe6af; text-shadow:0 2px 2px #000; font-weight:700;
}
.portrait-game .portrait-nav {
  border-top:0; background:linear-gradient(transparent,#081323d9 35%,#081323f5);
  box-shadow:none;
}
.portrait-game .portrait-nav button,.portrait-game .portrait-nav [aria-current=page] {
  border:0; background:transparent; box-shadow:none;
}
.portrait-game .portrait-nav button>span:not(.reward-attention):not(.attention-badge) { width:90%; padding:1px 0; line-height:14px; }
.portrait-game .portrait-nav [aria-current=page] i {
  border:0; box-shadow:none; filter:brightness(1.2) drop-shadow(0 0 5px #efc96688);
}
.portrait-game .portrait-nav [aria-current=page]>span:not(.reward-attention):not(.attention-badge) {
  border-bottom:2px solid #f2cd78; color:#fff2c6;
}
.portrait-game #view-home .round-btn:active .ico,.portrait-game #view-home .bar-btn:active .ico,
.portrait-game .portrait-nav button:active i { transform:scale(.94); }
.portrait-game #view-home .round-btn:focus-visible,.portrait-game #view-home .bar-btn:focus-visible,
.portrait-game .portrait-nav button:focus-visible { outline:2px solid #e9cd8c; outline-offset:-2px; }
.portrait-game #view-home .portrait-journey {
  border:0; border-radius:0; box-shadow:none; background:transparent; animation:none;
  padding:0; min-height:100px; gap:0; text-shadow:0 2px 4px #000;
}
.portrait-game #view-home .portrait-journey::before {
  content:''; display:block; width:76px; height:76px;
  background:var(--myth-icons) 33.3333% 0%/400% 400%;
  mask-image:radial-gradient(ellipse at center,#000 48%,#000b 63%,transparent 74%);
}
.portrait-game #view-home .portrait-journey>span { display:none; }
.portrait-game #view-home .portrait-journey>strong {
  width:150px; padding:3px 12px; font-size:20px;
  border-top:1px solid #d8b66e99; border-bottom:1px solid #d8b66e66;
  background:linear-gradient(90deg,transparent,#102030dc 20%,#102030dc 80%,transparent);
}
.portrait-game #view-home .round-btn[data-go] { background:transparent; }

.portrait-game #view-home .occupy-banner .btn { border:0; border-radius:0; box-shadow:none; border-top:1px solid #bba16a70; border-bottom:1px solid #bba16a35; background:linear-gradient(90deg,transparent,#102030c9 20%,#102030c9 80%,transparent); color:#ffe6af; }
.portrait-game #view-home .occupy-banner::before { border-radius:0; mask-image:radial-gradient(ellipse at center,#000 48%,#000b 63%,transparent 74%); }

/* 푸터는 콘텐츠 밖의 전용 영역이다. 모든 일반 화면은 그 위에서만 스크롤한다. */
html:has(body.portrait-game #portrait-nav:not(.hidden)) { height:100%; overflow:hidden; }
body.portrait-game:has(#portrait-nav:not(.hidden)) { display:flex; flex-direction:column; height:100dvh; min-height:0; overflow:hidden; }
.portrait-game:has(#portrait-nav:not(.hidden)) .hud { position:relative; flex:none; }
.portrait-game:has(#portrait-nav:not(.hidden)) #app {
  flex:1; min-height:0; height:auto; margin:0 0 var(--portrait-nav-space); padding:0;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; isolation:isolate;
  scroll-padding-bottom:20px;
}
.portrait-game:has(#portrait-nav:not(.hidden)) .view:not(#view-home):not(#view-battle) {
  min-height:100%; box-sizing:border-box; padding-bottom:24px;
}
.portrait-game:has(#portrait-nav:not(.hidden)) .sticky-bottom { bottom:0; padding:12px 0; }
.portrait-game[data-screen="home"]:has(#portrait-nav:not(.hidden)) #app { overflow:hidden; }
.portrait-game #btn-save-deck {
  position:relative; min-height:56px; padding:12px 44px; border:1px solid #dfc082;
  border-radius:5px 18px 5px 18px; color:#fff0c2; font-weight:800; font-size:17px;
  letter-spacing:2px; text-shadow:0 2px 3px #000;
  background:linear-gradient(115deg,#152a3a,#375667 48%,#152a3a);
  box-shadow:inset 0 0 0 3px #122534,inset 0 0 0 4px #a78b5355,0 3px 10px #0006;
}
.portrait-game #btn-save-deck::before,.portrait-game #btn-save-deck::after {
  content:'◆'; position:absolute; top:50%; transform:translateY(-50%); color:#eacb83; font-size:14px;
}
.portrait-game #btn-save-deck::before { left:18px; }
.portrait-game #btn-save-deck::after { right:18px; }
.portrait-game #btn-save-deck:active { filter:brightness(1.2); }

/* 가격의 재화 그림은 HUD 아틀라스와 같은 좌표를 사용한다. */
.portrait-game #view-shop .shop-currency-icon {
  display:inline-block; flex:0 0 23px; width:23px; height:23px;
  background-image:var(--myth-icons); background-size:400% 400%; background-position:var(--currency-x) 100%;
  border:0; border-radius:50%; vertical-align:middle;
}
.portrait-game #view-shop .shop-currency-gold { --currency-x:66.6667%; }
.portrait-game #view-shop .shop-currency-crystal { --currency-x:33.3333%; }
.portrait-game #view-shop .shop-currency-ticket { --currency-x:100%; }
.portrait-game #shop-packs .pack-price,.portrait-game #view-shop .shop-buy,.portrait-game #view-shop .shop-cat {
  display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap;
}
.portrait-game #shop-packs .pack-price { line-height:1.35; }
.portrait-game #shop-packs .pack-price .shop-currency-icon { width:20px; height:20px; flex-basis:20px; }
.portrait-game #shop-packs .pack-price { flex-direction:column; gap:3px; }

/* 네이티브 선택창 금지: 선택지는 게임 안의 버튼으로 직접 누른다. */
.portrait-game .game-choices { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.portrait-game .game-choices button {
  flex:0 0 auto; min-height:44px; padding:8px 12px; border:0; border-bottom:2px solid #71869b55;
  border-radius:0; background:linear-gradient(transparent,#162b3d77); color:#bac9d9; font-size:12px;
}
.portrait-game .game-choices button[aria-pressed="true"] {
  color:#ffe5a6; border-bottom-color:#e8c578; font-weight:800;
  background:radial-gradient(ellipse at bottom,#b58b4155,transparent 80%);
}
.portrait-game .game-choices button:disabled { opacity:.45; }
.portrait-game .set-row:has(.lang-select) { flex-wrap:wrap; gap:10px; }
.portrait-game .lang-select { width:100%; }
.portrait-game .lang-select button { flex:1 0 40%; }
.portrait-game #shop-focus { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:8px 0 12px; }
.portrait-game #codex-origin,.portrait-game #codex-skill {
  flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:6px; scrollbar-width:thin;
}
.portrait-game .myth-origin-bar { flex-wrap:wrap; }
.portrait-game #codex-origin { flex-basis:100%; }
.portrait-game #view-codex .codex-filters { flex-wrap:wrap; min-width:0; }
.portrait-game #codex-skill { flex:0 0 100%; width:100%; align-items:center; }
.portrait-game #codex-search { flex:1 1 150px; min-width:0; }
.portrait-game #view-codex .codex-filters>label { flex:0 0 auto; white-space:nowrap; }

/* 출전 편성도 동일한 카드 프레임과 인장을 사용한다. */
.portrait-game #view-deck #deck-list { padding-top:30px; row-gap:38px; align-items:start; }
.portrait-game #view-deck .enh-clean-card { width:100%; min-width:0; }

.portrait-game .deck-filter-options .game-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:4px 0 12px; }
.portrait-game .deck-filter-options .hidden { display:none; }
.portrait-game .deck-filters [aria-expanded="true"] { border-color:#e8c578; color:#ffe5a6; }
.portrait-game #view-deck .deck-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
.portrait-game #deck-filter-reset { grid-column:1/-1; justify-self:end; min-height:36px; padding:5px 14px; color:#ead4a4; }

.portrait-game .deck-filter-actions { display:flex; align-items:stretch; gap:8px; margin:0 0 10px; }
.portrait-game #deck-auto-equip { flex:1; min-width:0; min-height:44px; border:1px solid #c3a368; color:#ffe8af; background:linear-gradient(115deg,#152a3a,#375667,#152a3a); font-weight:700; }
.portrait-game .deck-filter-actions #deck-filter-reset { flex:0 0 auto; min-height:44px; align-self:stretch; border-color:#8e846b; }

/* 편성 조작부: 분류 탭 / 추천 카드 / 초기화 인장 / 저장 봉인을 서로 구분한다. */
.portrait-game #view-deck .deck-filters { gap:8px; padding-top:10px; }
.portrait-game #view-deck .deck-filters .btn {
  position:relative; min-height:65px; padding:27px 3px 7px; border:0; border-bottom:2px solid #8f784b;
  border-radius:0 0 12px 12px; background:linear-gradient(#172a3800,#263d49 70%,#152632);
  box-shadow:inset 1px 0 #b59d6044,inset -1px 0 #b59d6044; color:#e0d0ae;
}
.portrait-game #view-deck .deck-filters .btn::before {
  display:block; position:absolute; top:1px; left:50%; transform:translateX(-50%);
  color:#edcb7f; font-size:22px; line-height:26px; text-shadow:0 2px 3px #000;
}
.portrait-game #deck-sort::before { content:'⇅'; }
.portrait-game #deck-star::before { content:'★'; }
.portrait-game #deck-faction::before { content:'✦'; }
.portrait-game #view-deck .deck-filters [aria-expanded="true"] {
  border-bottom-color:#ffdc83; color:#fff0bd; background:linear-gradient(#72512711,#614b2d 75%,#30291e);
}
.portrait-game #view-deck .deck-filter-actions { align-items:center; gap:12px; padding:4px 0 10px; }
.portrait-game #view-deck #deck-auto-equip {
  position:relative; min-height:70px; padding:10px 12px 10px 72px;
  border:0; border-bottom:2px solid #c6a463; border-radius:0 18px 6px 0;
  background:linear-gradient(90deg,transparent,#173e48 26%,#245660 70%,#152e39);
  box-shadow:inset 0 1px #d3bc7955,0 4px 8px #0005; color:#fff0bd; text-shadow:0 2px 2px #000;
}
.portrait-game #view-deck #deck-auto-equip::before {
  content:''; display:block; position:absolute; left:0; top:1px; width:68px; height:68px;
  background:var(--myth-icons) 66.6667% 0%/400% 400%;
  mask-image:radial-gradient(ellipse,#000 50%,transparent 74%); transform:rotate(-9deg);
}
.portrait-game #view-deck #deck-filter-reset {
  position:relative; flex:0 0 58px; height:62px; padding:33px 0 3px; border:0; border-radius:50%;
  background:radial-gradient(ellipse,#3b3a32,#15232f 67%,transparent 70%);
  box-shadow:none; font-size:10px; color:#cdbd9e;
}
.portrait-game #view-deck #deck-filter-reset::before {
  content:'↶'; display:block; position:absolute; top:2px; left:0; width:100%;
  font-size:31px; line-height:32px; color:#e0c386; text-shadow:0 2px #000;
}
.portrait-game #view-deck #btn-save-deck {
  min-height:62px; padding:10px 42px 10px 64px; border:2px ridge #e9c887;
  border-radius:6px 6px 22px 22px;
  background:linear-gradient(100deg,#38232b,#743d42 48%,#442631);
  box-shadow:inset 0 0 0 3px #231b27,inset 0 0 0 4px #caab6d66,0 4px 12px #0009;
}
.portrait-game #view-deck #btn-save-deck::before {
  content:''; display:block; width:50px; height:50px; left:9px; top:50%; transform:translateY(-50%);
  background:var(--myth-icons) 0% 33.3333%/400% 400%;
  mask-image:radial-gradient(ellipse,#000 48%,transparent 74%);
}
.portrait-game #view-deck #btn-save-deck::after { content:'✦'; display:block; right:18px; }
.portrait-game #view-deck .deck-filter-options button {
  border-radius:50% 50% 4px 4px; border-bottom-width:2px; background:radial-gradient(ellipse at bottom,#21405288,transparent 80%);
}
.portrait-game #view-deck .deck-filter-options button[aria-pressed="true"] { background:radial-gradient(ellipse at bottom,#aa803d77,transparent 85%); }
.portrait-game #view-deck :is(#deck-auto-equip,#deck-filter-reset):active { filter:brightness(1.25); }
.portrait-game #view-deck .deck-filters .btn::before,.portrait-game #view-deck #deck-filter-reset::before { border:0; border-radius:0; background:none; box-shadow:none; height:auto; pointer-events:none; }
.portrait-game #view-deck .deck-filters .btn::after,.portrait-game #view-deck #deck-filter-reset::after,.portrait-game #view-deck #deck-auto-equip::after { content:none; }

/* 선택은 성급 프레임 바깥의 청록 이중선과 체크로 구분한다. */
.portrait-game :is(#view-enhance,#view-deck) .enh-clean-card.enh-picked {
  outline:3px solid #64fff0; outline-offset:1px;
  box-shadow:0 0 0 1px #082e3d,0 0 0 4px #a4fff1,0 0 12px #22e9d580,inset 0 0 0 1px #e0c788,inset 0 0 0 3px #0b111b;
}
.portrait-game :is(#view-enhance,#view-deck) .enh-picked .enh-card-check {
  width:24px; height:24px; background:#79ffec; color:#063d3b;
  border:2px solid #f0fff9; box-shadow:0 0 8px #29ffe0; font-size:17px; font-weight:900;
}

/* 성물 공방: 작업 모드를 고르고 정수를 제단에 담는 게임 화면. */
.portrait-game #view-temple {
  background:radial-gradient(ellipse at 50% 40%,#244e6544,transparent 65%),linear-gradient(#0b1729dd,#091521ed),var(--myth-scene) center/cover;
}
.portrait-game #temple-open { display:flex; flex-direction:column; gap:16px; }
.portrait-game .workshop-tabs { order:0; display:grid; grid-template-columns:1fr 1fr; }
.portrait-game #temple-open>.note { order:1; margin:0; text-align:center; color:#c3c9d1; font-size:11px; }
.portrait-game #temple-open .engrave-panel { order:2; }
.portrait-game #temple-open #essence-list { order:3; }
.portrait-game #temple-open .fusion-panel { order:2; }
.portrait-game #temple-open #fragment-panel { order:4; }
.portrait-game #temple-open[data-mode="engrave"] .fusion-panel,
.portrait-game #temple-open[data-mode="fusion"] :is(.engrave-panel,#essence-list) { display:none; }
.portrait-game #view-temple :is(.engrave-panel,.fusion-panel) {
  position:relative; margin:0; padding:20px 12px 16px; border:0; border-radius:0;
  background:radial-gradient(ellipse at 50% 24%,#396d8655,transparent 70%); box-shadow:none;
}
.portrait-game #view-temple .engrave-panel::before {
  content:''; display:block; width:124px; height:124px; margin:0 auto 10px;
  background:var(--myth-icons) 66.6667% 33.3333%/400% 400%;
  mask-image:radial-gradient(ellipse,#000 48%,transparent 73%);
  filter:drop-shadow(0 0 12px #8c6eff99);
}
.portrait-game #view-temple .engrave-slots {
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.portrait-game #view-temple .engrave-slots>.dim { flex:0 0 100%; text-align:center; color:#dfc795; font-size:12px; }
.portrait-game #view-temple .engrave-slots .engrave-slot {
  display:grid; place-items:center; width:74px; height:74px; min-width:0; padding:6px;
  border:2px ridge #8e805f; border-radius:50%; box-sizing:border-box;
  background:radial-gradient(#12293d,#080f1b); color:#829bab; font-size:11px; text-align:center;
  box-shadow:0 0 0 4px #1e354455,inset 0 0 15px #000;
}
.portrait-game #view-temple .engrave-slots .filled { border-color:var(--essence-color,#b6dbff); color:#fff1cc; box-shadow:0 0 12px var(--essence-color,#b6dbff); }
.portrait-game #view-temple [data-element="FIRE"] { --essence-color:#ff9a50; }
.portrait-game #view-temple [data-element="WATER"] { --essence-color:#68c7ff; }
.portrait-game #view-temple [data-element="WIND"] { --essence-color:#83ecd2; }
.portrait-game #view-temple [data-element="EARTH"] { --essence-color:#d1ad72; }
.portrait-game #view-temple [data-element="IRON"] { --essence-color:#c7c6fc; }
.portrait-game #view-temple #engrave-recipe,.portrait-game #view-temple #fusion-recipe { text-align:center; line-height:1.7; font-size:12px; color:#dacdad; margin:15px 0; }
.portrait-game #view-temple #essence-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 8px; }
.portrait-game #view-temple .essence-row {
  display:flex; flex-direction:column; gap:5px; padding:8px 2px; border:0; background:none; box-shadow:none; text-align:center; opacity:1;
}
.portrait-game #view-temple .essence-row::before {
  content:'◆'; display:grid; place-items:center; margin:auto; width:46px; height:46px;
  color:var(--essence-color); font-size:37px; text-shadow:0 0 14px var(--essence-color),0 3px 2px #000;
  background:radial-gradient(#33506566,transparent 70%); border:0;
}
.portrait-game #view-temple .essence-row .npc-name { color:#e1d4b6; font-size:12px; }
.portrait-game #view-temple .essence-row .npc-meta { color:var(--essence-color); font-size:11px; }
.portrait-game #view-temple .essence-row .btn { min-height:36px; width:100%; border:0; border-bottom:1px solid #b79c6066; border-radius:0; background:linear-gradient(transparent,#28425466); font-size:11px; }
.portrait-game #view-temple .engrave-actions { display:flex; gap:10px; align-items:center; }
.portrait-game #view-temple :is(#btn-engrave,#btn-fuse) {
  flex:1; min-height:52px; border:2px ridge #dbbc7c; border-radius:6px 6px 22px 22px;
  background:linear-gradient(110deg,#26213d,#60517c,#26213d); color:#ffe9ba; font-weight:800; letter-spacing:2px;
}
.portrait-game #view-temple :is(#btn-engrave-clear,#btn-fuse-clear) { border:0; background:none; box-shadow:none; color:#c6b38f; font-size:11px; padding:8px; }
.portrait-game #view-temple .fusion-panel h3 { text-align:center; color:#ffe095; }
.portrait-game #view-temple .fusion-panel::before { content:'✦'; display:block; text-align:center; color:#ffe095; font-size:64px; text-shadow:0 0 24px #e5a846; }
.portrait-game #view-temple #fusion-inputs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; min-height:100px; align-items:center; }
.portrait-game #view-temple .rune-chip { border:2px ridge #c1a170; border-radius:14px 14px 5px 5px; padding:16px 10px; background:radial-gradient(#44365e,#122334); }

/* 성급별 성물과 확률을 결과 제단에 놓고 비용은 별도 재화 줄로 분리한다. */
.portrait-game #view-temple #temple-open>.note { max-width:32em; align-self:center; line-height:1.8; text-wrap:pretty; word-break:keep-all; }
.portrait-game #temple-open[data-mode="fusion"]>.note { display:none; }
.portrait-game #view-temple .fusion-panel::before { content:none; }
.portrait-game #view-temple .fusion-panel>.dim { line-height:1.8; word-break:keep-all; text-align:center; text-wrap:pretty; }
.portrait-game #view-temple .workshop-outcomes { display:flex; justify-content:center; gap:22px; padding:8px 0; }
.portrait-game #view-temple .workshop-outcome { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:70px; }
.portrait-game #view-temple .workshop-outcome i { display:block; width:66px; height:66px; background:var(--myth-icons) 66.6667% 33.3333%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); }
.portrait-game #view-temple .workshop-outcome.rarity-3 { color:#78c2ff; }
.portrait-game #view-temple .workshop-outcome.rarity-4 { color:#d5a0ff; }
.portrait-game #view-temple .workshop-outcome.rarity-5 { color:#ffdc78; }
.portrait-game #view-temple .workshop-stars { letter-spacing:2px; font-size:13px; text-shadow:0 0 8px currentColor; }
.portrait-game #view-temple .workshop-outcome b { font-size:23px; line-height:1.2; font-variant-numeric:tabular-nums; }
.portrait-game #view-temple .workshop-gold { display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 0; color:#f4da9c; font-size:13px; }
.portrait-game #view-temple .workshop-gold i { width:24px; height:24px; background:var(--myth-icons) 66.6667% 100%/400% 400%; border-radius:50%; }
.portrait-game #fusion-altar { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:14px 0 20px; background:radial-gradient(ellipse at bottom,#7353a633,transparent 70%); }
.portrait-game .fusion-altar-count { flex:0 0 100%; text-align:center; color:#d6c69e; font-size:12px; }
.portrait-game .fusion-material { display:flex; flex-direction:column; align-items:center; justify-content:center; width:76px; min-height:92px; padding:5px; box-sizing:border-box; border:2px ridge #837298; border-radius:35px 35px 10px 10px; background:radial-gradient(#302641,#101b2c); color:#b9a0d4; }
.portrait-game .fusion-material i { display:block; width:48px; height:48px; background:var(--myth-icons) 66.6667% 33.3333%/400% 400%; mask-image:radial-gradient(ellipse,#000 45%,transparent 72%); opacity:.25; }
.portrait-game .fusion-material b { font-size:10px; letter-spacing:1px; }
.portrait-game .fusion-material.filled { border-color:#82fff0; box-shadow:0 0 12px #42cbbb66; }
.portrait-game .fusion-material.filled i { opacity:1; }
.portrait-game .fusion-material small { text-align:center; font-size:10px; line-height:1.4; }
.portrait-game #view-temple #fusion-inputs { min-height:0; }
.portrait-game #view-temple #fusion-inputs>.note { text-align:center; font-size:12px; margin:8px 0; }
.portrait-game #view-temple .engrave-panel::before { width:92px; height:92px; }
.portrait-game #view-temple #temple-open>.note,.portrait-game #view-temple .fusion-panel>p[data-i18n] { white-space:pre-line; font-size:12px; line-height:1.8; }
.portrait-game #view-temple .fusion-panel h3 { margin:0 0 12px; }

/* 공방 모드는 글자 탭 대신 성물 문양이 달린 두 제단을 고른다. */
.portrait-game #view-temple .workshop-tabs { gap:16px; padding:8px 0; }
.portrait-game #view-temple .workshop-tabs button {
  position:relative; min-height:102px; padding:72px 5px 8px; border:0; border-radius:0;
  background:radial-gradient(ellipse at bottom,#253b4d66,transparent 75%);
  color:#a3adbe; font-weight:700; text-shadow:0 2px 3px #000;
}
.portrait-game #view-temple .workshop-tabs button::before {
  content:''; position:absolute; display:block; width:68px; height:68px; top:0; left:50%; transform:translateX(-50%);
  background:var(--myth-icons) 66.6667% 33.3333%/400% 400%;
  mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); opacity:.55;
}
.portrait-game #view-temple .workshop-tabs [data-choice="fusion"]::before {
  background-image:url('../art/mythic-ui/menu-challenge.webp'); background-size:cover; background-position:center;
}
.portrait-game #view-temple .workshop-tabs [aria-pressed="true"] {
  color:#ffe7a7; background:radial-gradient(ellipse at bottom,#94703455,transparent 75%);
}
.portrait-game #view-temple .workshop-tabs [aria-pressed="true"]::before { opacity:1; filter:drop-shadow(0 0 8px #dbb855); }
.portrait-game #view-temple .workshop-tabs [aria-pressed="true"]::after { content:'◆'; display:block; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); color:#f9d383; font-size:10px; }
.portrait-game #view-enhance #enhance-list>.note { flex:1 0 100%; text-align:center; padding:28px 16px; box-sizing:border-box; color:#decfaa; line-height:1.8; }

/* 출전 편성의 펼침부는 전력 문장과 성물 소켓으로 표현한다. */
.portrait-game #view-deck .portrait-fold {
  padding:0 0 12px; margin:14px 0; border:0; border-radius:0; box-shadow:none;
  background:radial-gradient(ellipse at top,#9c7b3820,transparent 75%);
}
.portrait-game #view-deck .portrait-fold>summary {
  position:relative; display:flex; align-items:center; min-height:66px; box-sizing:border-box;
  padding:10px 42px 10px 78px; list-style:none; color:#ffe2a1; font-size:17px; font-weight:800;
  letter-spacing:1px; text-shadow:0 2px 3px #000; border:0;
  background:linear-gradient(90deg,transparent,#57432366 35%,#182b3c88 80%,transparent);
}
.portrait-game #view-deck .portrait-fold>summary::-webkit-details-marker { display:none; }
.portrait-game #view-deck .portrait-fold>summary::before {
  content:''; position:absolute; left:3px; top:0; width:68px; height:68px;
  background:var(--myth-icons) 33.3333% 0%/400% 400%;
  mask-image:radial-gradient(ellipse,#000 48%,transparent 74%);
  filter:drop-shadow(0 0 7px #d5a04755);
}
.portrait-game #view-deck .portrait-fold:has(#deck-rune-slots)>summary::before { background-position:66.6667% 33.3333%; }
.portrait-game #view-deck .portrait-fold>summary::after { content:'⌄'; position:absolute; right:15px; top:19px; color:#e2bd71; font-size:24px; }
.portrait-game #view-deck .portrait-fold[open]>summary::after { content:'⌃'; }
.portrait-game #view-deck .portrait-fold>summary:focus-visible { outline:2px solid #89f5ee; outline-offset:2px; }
.portrait-game #view-deck .portrait-fold .deck-sum { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px; padding:6px 8px 12px; background:none; border:0; box-shadow:none; }
.portrait-game #view-deck .deck-sum>span { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:64px; padding:6px 4px 6px 46px; box-sizing:border-box; border-bottom:1px solid #a88a4944; background:linear-gradient(90deg,#c59b2d0d,transparent); }
.portrait-game #view-deck .deck-sum>span::before { content:'♜'; position:absolute; left:4px; top:18px; font-size:28px; line-height:1; color:#e8c27b; text-shadow:0 0 12px #d8a13566; }
.portrait-game #view-deck .deck-sum>span:nth-child(2)::before { content:'⚔'; color:#ffbd94; }
.portrait-game #view-deck .deck-sum>span:nth-child(3)::before { content:'♥'; color:#86e4bb; }
.portrait-game #view-deck .deck-sum>span:nth-child(4)::before { content:'✦'; color:#8dd6ff; }
.portrait-game #view-deck .deck-sum small { margin:0 0 5px; font-size:11px; line-height:1.5; word-break:keep-all; color:#d4c7b0; }
.portrait-game #view-deck .deck-sum b { font-size:22px; line-height:1.3; font-variant-numeric:tabular-nums; color:#fff0c9; overflow-wrap:anywhere; }
.portrait-game #view-deck #deck-rune-slots { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 8px; padding:4px 4px 10px; }
.portrait-game #view-deck .rune-slot { position:relative; display:flex; flex:0 0 calc(33.333% - 8px); flex-direction:column; align-items:center; justify-content:flex-start; gap:7px; min-width:0; padding:0 2px 8px; border:0; border-radius:0; background:none; box-shadow:none; text-align:center; opacity:1; }
.portrait-game #view-deck .deck-relic-orb { display:block; width:66px; height:66px; box-sizing:border-box; border:3px ridge #a39265; border-radius:50%; background:radial-gradient(circle,#1b3347 15%,#08111f 60%,#827249 65%,#121d2b 74%); box-shadow:inset 0 0 14px #000,0 3px 8px #0009; }
.portrait-game #view-deck .deck-relic-orb::after { content:'+'; display:block; color:#d8c195; font-style:normal; font-size:35px; line-height:58px; text-shadow:0 0 12px #d9b561; }
.portrait-game #view-deck .rune-slot.filled .deck-relic-orb { border-color:#e9c678; background:var(--myth-icons) 66.6667% 33.3333%/400% 400%; box-shadow:0 0 15px #bb82ec77; }
.portrait-game #view-deck .rune-slot.filled .deck-relic-orb::after { content:none; }
.portrait-game #view-deck .rune-slot.locked .deck-relic-orb { border-color:#536174; opacity:.7; }
.portrait-game #view-deck .rune-slot.locked .deck-relic-orb::after { content:'◆'; color:#536174; font-size:23px; }
.portrait-game #view-deck .rune-slot .rune-no { position:absolute; z-index:1; top:-4px; left:calc(50% - 35px); width:20px; height:20px; line-height:20px; border:1px solid #b89d60; border-radius:50%; background:#142332; color:#ffe4a3; font-size:11px; }
.portrait-game #view-deck .rune-slot .rune-name { color:#e5d4ad; font-size:12px; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.portrait-game #view-deck .rune-slot .rune-name .dim { display:block; color:#b4a8cd; }
.portrait-game #view-deck .rune-slot.locked .rune-name { color:#94a0af; }
.portrait-game #view-deck #deck-rune-hint { margin:8px auto 0; padding:0 16px; max-width:30em; text-align:center; font-size:12px; line-height:1.8; word-break:keep-all; color:#c4b797; }

/* 탐험 선택지는 웹 정보 타일이 아닌 그림 오브젝트와 이름 띠로 만든다. */
.portrait-game #view-maze {
  --facility-background:linear-gradient(#07121b77,#07121bdd),var(--maze-region-scene,url('../art/mythic-ui/labyrinth.webp')) center top/cover;
}
.portrait-game #maze-picker { gap:8px; padding:2px 0 14px; scroll-snap-type:x proximity; }
.portrait-game #maze-picker button {
  flex:0 0 104px; display:flex; flex-direction:column; align-items:center; padding:0 3px 10px;
  border:0; border-radius:0; background:none; color:#c4bbaa; white-space:normal; line-height:1.5;
  scroll-snap-align:center; text-shadow:0 2px 3px #000;
}
.portrait-game .maze-region-art { display:block; width:56px; height:56px; background:var(--myth-icons) 100% 66.6667%/400% 400%; mask-image:radial-gradient(ellipse,#000 46%,transparent 74%); }
.portrait-game .maze-region-name { width:100%; padding:6px 2px; border-bottom:1px solid #b79b5d55; font-size:11px; word-break:keep-all; }
.portrait-game #maze-picker button.active { color:#ffe5a6; background:radial-gradient(ellipse at bottom,#d8a74744,transparent 65%); }
.portrait-game #maze-picker button.active .maze-region-art { filter:drop-shadow(0 0 8px #ffd077); }
.portrait-game #maze-picker button.active .maze-region-name { border-bottom:3px double #eecb7e; }
.portrait-game #maze-head { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 14px; border:0; border-radius:0; padding:18px 10px; background:linear-gradient(90deg,transparent,#08141bcc 20%,#08141bcc 80%,transparent); text-align:center; line-height:1.65; }
.portrait-game #maze-head>b { flex:0 0 100%; font-family:Georgia,'AppleMyungjo',serif; color:#ffe1a3; font-size:25px; }
.portrait-game #maze-head>.dim { color:#c6c4b5; font-size:12px; word-break:keep-all; }
.portrait-game #maze-nodes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:32px 0 24px; margin:0; }
.portrait-game #maze-nodes>.note { grid-column:1/-1; text-align:center; }
.portrait-game #maze-nodes .maze-node {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; min-width:0;
  padding:0 0 14px; border:0; border-radius:0; box-shadow:none; background:radial-gradient(ellipse at 50% 45%,#94713733,transparent 65%);
  color:#ffe4b1; text-align:center; cursor:pointer; text-shadow:0 2px 3px #000;
}
.portrait-game .maze-path-art { display:block; flex:none; width:100%; max-width:116px; aspect-ratio:1; background:var(--myth-icons) 100% 0%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); filter:drop-shadow(0 5px 5px #000); }
.portrait-game .node-battle .maze-path-art { background-position:33.3333% 0%; }
.portrait-game .node-shrine .maze-path-art { background-position:0% 0%; }
.portrait-game .node-event .maze-path-art { background-position:100% 33.3333%; }
.portrait-game .node-rest .maze-path-art { background-position:66.6667% 66.6667%; }
.portrait-game .node-gatekeeper .maze-path-art { background:url('../art/mythic-ui/menu-demon.webp') center/cover; }
.portrait-game #maze-nodes .node-name { display:block; align-self:stretch; padding:7px 3px; font-size:16px; line-height:1.4; font-family:Georgia,'AppleMyungjo',serif; border-block:1px solid #b7995266; background:linear-gradient(90deg,transparent,#60462099,transparent); }
.portrait-game #maze-nodes .node-desc { font-size:11px; color:#e0d8c6; line-height:1.7; word-break:keep-all; overflow-wrap:anywhere; }
.portrait-game #maze-nodes .node-picked { font-size:12px; color:#9ff9e3; }
.portrait-game #maze-nodes .picked .maze-path-art { filter:drop-shadow(0 0 10px #60e4c7); }
.portrait-game #maze-nodes .closed { opacity:.45; cursor:default; filter:grayscale(.8); }
.portrait-game #maze-nodes .maze-node:focus-visible { outline:2px solid #a1f7df; outline-offset:3px; }
.portrait-game #view-maze>.note { color:#d0c7b5; text-align:center; line-height:1.8; word-break:keep-all; }
.portrait-game #btn-maze-reset { display:block; margin:12px auto; min-height:48px; padding:10px 26px; border-radius:24px 4px; background:linear-gradient(#413c31,#1a282c); }

/* 남아 있던 모드 선택: 그림 문장 + 이름 띠, 활성 문양. 기존 이벤트 클래스는 공유하지 않는다. */
.portrait-game :is(.chal-tabs,.shard-tabs,.sell-tabs,.tower-tabs,.journal-tabs,#ranking-tabs) { display:flex; gap:8px; overflow-x:auto; padding:8px 0 18px; }
.portrait-game :is(.chal-tabs,.shard-tabs,.sell-tabs,.tower-tabs,.journal-tabs,#ranking-tabs)>button {
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  flex:1 0 88px; min-width:0; min-height:104px; padding:72px 5px 10px; border:0; border-radius:0;
  background:radial-gradient(ellipse at bottom,#34485444,transparent 75%); box-shadow:none;
  color:#bbbcae; font-size:12px; line-height:1.5; white-space:normal; word-break:keep-all; text-shadow:0 2px 3px #000;
}
.portrait-game :is(.chal-tabs,.shard-tabs,.sell-tabs,.tower-tabs,.journal-tabs,#ranking-tabs)>button::before {
  content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:68px; height:68px;
  border:0; border-radius:0; box-shadow:none; opacity:.65; background:var(--myth-icons) 33.3333% 66.6667%/400% 400%;
  mask-image:radial-gradient(ellipse,#000 48%,transparent 74%);
}
.portrait-game :is(.chal-tabs,.shard-tabs,.sell-tabs,.tower-tabs,.journal-tabs,#ranking-tabs)>button::after { content:none; }
.portrait-game :is(.chal-tabs,.shard-tabs,.sell-tabs,.tower-tabs,.journal-tabs,#ranking-tabs)>button:is(.active,[aria-pressed="true"]) { color:#ffe6aa; background:radial-gradient(ellipse at bottom,#c49b4044,transparent 75%); }
.portrait-game :is(.chal-tabs,.shard-tabs,.sell-tabs,.tower-tabs,.journal-tabs,#ranking-tabs)>button:is(.active,[aria-pressed="true"])::before { opacity:1; filter:drop-shadow(0 0 7px #f5ca6d88); }
.portrait-game :is(.chal-tabs,.shard-tabs,.sell-tabs,.tower-tabs,.journal-tabs,#ranking-tabs)>button:is(.active,[aria-pressed="true"])::after { content:'◆'; display:block; position:absolute; top:auto; bottom:-4px; left:50%; transform:translateX(-50%); width:auto; height:auto; border:0; background:none; box-shadow:none; font-size:10px; color:#ffe6aa; }
.portrait-game #view-challenge .chal-tabs>button:nth-child(1)::before { background-position:0% 100%; }
.portrait-game #view-challenge .chal-tabs>button:nth-child(2)::before { background-position:100% 66.6667%; }
.portrait-game #view-challenge .chal-tabs>button:nth-child(3)::before { background-image:url('../art/mythic-ui/menu-demon.webp'); background-position:center; background-size:cover; }
.portrait-game #view-shards .shard-tabs>button:nth-child(1)::before { background-position:66.6667% 33.3333%; }
.portrait-game #view-shards .shard-tabs>button:nth-child(2)::before { background-position:33.3333% 33.3333%; }
.portrait-game #view-sell .sell-tabs>button:nth-child(1)::before { background-position:66.6667% 0%; }
.portrait-game #view-sell .sell-tabs>button:nth-child(2)::before { background-position:66.6667% 33.3333%; }
.portrait-game #view-tower .tower-tabs>button:nth-child(1)::before { background-position:66.6667% 66.6667%; }
.portrait-game #view-tower .tower-tabs>button:nth-child(2)::before { background-position:100% 33.3333%; }
.portrait-game #ranking-tabs>button:nth-child(2)::before { background-position:33.3333% 0%; }
.portrait-game #ranking-tabs>button:nth-child(3)::before { background-position:66.6667% 66.6667%; }

/* 탑은 세계수 전경, 시련은 제단, 대회는 월계관, 균열은 균열 문양을 중심으로 둔다. */
.portrait-game #view-tower .tower-top { display:flex; flex-direction:column; gap:12px; }
.portrait-game #view-tower .tower-stairs { flex-direction:row; justify-content:center; flex-wrap:wrap; width:100%; }
.portrait-game #view-tower .tower-step { flex:0 0 38px; width:38px; height:38px; padding:0; line-height:38px; text-align:center; border:1px solid #a1ba8266; border-radius:50%; background:#152c2c; }
.portrait-game #view-tower .tower-step.here { color:#ffe8b0; border:3px double #eac77c; background:#425942; box-shadow:0 0 14px #b4d27455; }
.portrait-game :is(.tower-now,.chal-now,#tour-head,#demon-head) { position:relative; width:100%; box-sizing:border-box; padding:20px 16px; border:0; border-radius:0; box-shadow:none; background:linear-gradient(90deg,transparent,#071722bb 20%,#071722bb 80%,transparent); }
.portrait-game :is(.tower-now,.chal-now,#tour-head,#demon-head)::before { content:''; display:block; width:128px; height:128px; margin:0 auto 12px; background:var(--myth-icons) 66.6667% 66.6667%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); }
.portrait-game #view-challenge .chal-now::before { background:url('../art/mythic-ui/menu-challenge.webp') center/cover; }
.portrait-game #view-tournament #tour-head::before { background-position:33.3333% 66.6667%; }
.portrait-game #view-demon #demon-head::before { background:url('../art/mythic-ui/menu-demon.webp') center/cover; }
.portrait-game :is(#tour-head,#demon-head) { display:block; text-align:center; }
.portrait-game :is(#tour-head,#demon-head)>span { display:block; margin:8px 0; }
.portrait-game .chal-body { display:flex; flex-direction:column; align-items:stretch; }
.portrait-game :is(.tower-floor,.chal-now h3) { text-align:center; font-size:20px; color:#ffe5aa; margin-bottom:18px; }
.portrait-game :is(.tower-line,.chal-line) { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 2px; font-size:13px; border-bottom:1px solid #c5a56922; }
.portrait-game :is(.tower-line,.chal-line) b { font-size:18px; color:#fae5ae; }
.portrait-game :is(.chal-now,.tower-now) .note { font-size:12px; line-height:1.8; word-break:keep-all; margin:12px 0; }
.portrait-game :is(.tower-rank,.chal-rank) { width:100%; box-sizing:border-box; border:0; background:linear-gradient(90deg,transparent,#34403755,transparent); border-radius:0; }
.portrait-game :is(.tower-rank-row,.chal-rank-row,.rank-row) { gap:12px; padding:14px 8px; border:0; border-bottom:1px solid #b49a5e44; border-radius:0; background:linear-gradient(90deg,#d7b46212,transparent); box-shadow:none; flex-wrap:wrap; }
.portrait-game :is(.tower-rank-no,.chal-rank-no,.rank-no) { flex:0 0 30px; width:30px; height:30px; line-height:30px; text-align:center; color:#ffdc85; border:1px solid #a88c53; border-radius:50%; background:#172c37; }

/* 재료와 보상은 보관함/봉인 문서로 표현하고 표 형태의 회색 타일을 남기지 않는다. */
.portrait-game #ogre-materials { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.portrait-game #ogre-materials .ogre-mat { width:auto; min-width:0; padding:12px 5px; border:0; border-radius:0; background:radial-gradient(ellipse at top,#79573844,transparent 80%); text-align:center; }
.portrait-game #ogre-materials .ogre-mat::before { content:''; display:block; width:64px; height:64px; margin:auto; background:url('../art/mythic-ui/menu-ogre.webp') center/cover; mask-image:radial-gradient(ellipse,#000 45%,transparent 74%); }
.portrait-game #ogre-materials .ogre-mat b { font-size:12px; line-height:1.6; word-break:keep-all; }
.portrait-game #ogre-materials .ogre-qty { font-size:23px; color:#ffe0a0; }
.portrait-game .ogre-row { position:relative; padding:16px 12px 16px 70px; border:0; border-bottom:1px solid #af8b4a55; border-radius:0; background:linear-gradient(90deg,#5b452333,transparent); min-height:60px; gap:8px; }
.portrait-game .ogre-row::before { content:''; position:absolute; left:0; top:12px; width:60px; height:60px; background:var(--myth-icons) 100% 0%/400% 400%; mask-image:radial-gradient(ellipse,#000 45%,transparent 74%); }
.portrait-game .ogre-row>.dim { flex:1 0 100%; line-height:1.7; }
.portrait-game :is(.mail-row,.friend-row,.guild-row) { border:0; border-radius:0; border-bottom:1px solid #a68b5255; padding:16px 8px; background:linear-gradient(90deg,#54432433,transparent); box-shadow:none; gap:10px; flex-wrap:wrap; }
.portrait-game .mail-row::before { content:''; flex:0 0 48px; height:48px; background:var(--myth-icons) 0% 66.6667%/400% 400%; mask-image:radial-gradient(ellipse,#000 45%,transparent 74%); }
.portrait-game :is(.friend-main,.guild-main,.mail-main) { min-width:0; flex:1 1 160px; overflow-wrap:anywhere; line-height:1.7; }
.portrait-game :is(#view-guild,#view-friends) .panel { border:0; border-radius:0; border-block:1px solid #aa8c4b55; box-shadow:none; background:linear-gradient(90deg,transparent,#21384588,transparent); padding:18px 10px; }
.portrait-game :is(#view-guild,#view-friends) .section-title { border-left:0; border-bottom:1px solid #a3895055; padding:12px 4px; color:#f3d89b; font-family:Georgia,'AppleMyungjo',serif; }
.portrait-game :is(.tower-actions,.chal-actions) { flex-wrap:wrap; gap:10px; }
.portrait-game :is(.tower-actions,.chal-actions) .btn { min-height:48px; border:2px ridge #c7a45e; border-radius:20px 3px; background:linear-gradient(#3e4947,#152b31); }
.portrait-game :is(.tower-actions,.chal-actions) .btn-primary { background:linear-gradient(#947439,#48361e); }
.portrait-game #view-tower { --facility-background:linear-gradient(#0f2a24d9,#061714ef),var(--myth-scene) center/cover; }
.portrait-game #view-challenge { --facility-background:linear-gradient(#251b32d9,#111020f5),url('../art/mythic-ui/labyrinth.webp') center/cover; }
.portrait-game #view-tournament { --facility-background:linear-gradient(#322713d9,#101927ee),var(--myth-scene) center/cover; }
.portrait-game #view-demon { --facility-background:linear-gradient(#341b27dd,#120e19f0),url('../art/mythic-ui/labyrinth.webp') center/cover; }
/* 성물 고르기·판매·강화도 글자만 있는 목록 대신 성물 문장을 둔다. */
.portrait-game :is(.rune-pick,.sell-rune,.rune-row,.fragment-row) { position:relative; box-sizing:border-box; padding:16px 12px 16px 72px; border:0; border-bottom:1px solid #b8a06566; border-radius:0; background:linear-gradient(90deg,#51396355,transparent); min-height:82px; line-height:1.65; }
.portrait-game :is(.rune-pick,.sell-rune,.rune-row,.fragment-row)::before { content:''; display:block; position:absolute; left:2px; top:12px; width:60px; height:60px; background:var(--myth-icons) 66.6667% 33.3333%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); }
.portrait-game :is(.rune-pick,.sell-rune,.rune-row).material { outline:2px solid #8af2d9; outline-offset:-2px; }
.portrait-game :is(.rune-pick,.sell-rune,.rune-row)>:is(.dim,small) { white-space:normal; word-break:keep-all; }
.portrait-game #view-daily .quest-row { position:relative; padding:16px 12px 16px 66px; border:0; border-bottom:1px solid #bca67566; border-radius:0; background:linear-gradient(90deg,#5f4e2b44,transparent); box-shadow:none; gap:10px; }
.portrait-game #view-daily .quest-row::before { content:''; position:absolute; left:0; top:12px; width:60px; height:60px; background:var(--myth-icons) 0% 33.3333%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); }
.portrait-game #view-daily .quest-name { line-height:1.6; font-size:14px; word-break:keep-all; }
.portrait-game #view-daily .quest-meta { line-height:1.7; }
.portrait-game #view-daily .quest-row>.btn { align-self:center; min-height:44px; }
.portrait-game #view-tournament .tour-card { overflow:hidden; border:2px ridge #b99a61; border-radius:18px 18px 6px 6px; background:radial-gradient(#374356,#0c1421); }
.portrait-game #view-tournament .tour-card>.card-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.portrait-game #view-tournament .tour-card>:not(.card-art) { position:relative; z-index:1; }
.portrait-game #view-tournament .tour-card .card-name { padding:6px 3px; background:linear-gradient(90deg,#856b39,#e3c58b,#856b39); color:#201b12; text-shadow:none; }
.portrait-game #view-tournament .tour-card.selected { outline:3px solid #80fce1; outline-offset:1px; box-shadow:0 0 12px #5af0c888; }
.portrait-game #view-tournament .tour-card.selected::after { content:'✓'; position:absolute; right:5px; bottom:30px; z-index:3; width:24px; height:24px; line-height:24px; border-radius:50%; text-align:center; background:#80fce1; color:#143d39; }
@media(max-width:359px) {
  .portrait-game #maze-nodes { gap:6px; padding-top:22px; }
  .portrait-game #maze-nodes .node-name { font-size:15px; }
  .portrait-game #maze-nodes .node-desc { font-size:11px; }
  .portrait-game #view-daily .quest-row { flex-wrap:wrap; }
  .portrait-game #view-daily .quest-row>.btn { margin-left:auto; }
}
.portrait-game #ogre-materials { grid-template-columns:repeat(2,minmax(0,1fr)); }
.portrait-game #ogre-materials .ogre-mat::before { width:88px; height:88px; mask-image:radial-gradient(ellipse,#000 55%,transparent 75%); }
.portrait-game #ogre-materials [data-material="BEAST_BONE"]::before { background-image:url('../art/mythic-ui/material-bone.webp'); }
.portrait-game #ogre-materials [data-material="BEAST_FANG"]::before { background-image:url('../art/mythic-ui/material-fang.webp'); }
.portrait-game #view-ogre .ogre-head { position:relative; min-height:68px; padding:16px 16px 16px 80px; border:0; border-radius:0; background:linear-gradient(90deg,#70542c44,transparent); }
.portrait-game #view-ogre .ogre-head::before { content:''; position:absolute; left:0; top:2px; width:64px; height:64px; background:url('../art/mythic-ui/menu-ogre.webp') center/cover; mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); }
.portrait-game #view-daily>.panel { padding:12px 0; border:0; border-radius:0; box-shadow:none; background:none; }
.portrait-game #view-daily .journal-tabs>button:nth-child(1)::before { background-position:0% 100%; }
.portrait-game #view-daily .journal-tabs>button:nth-child(2)::before { background-position:0% 33.3333%; }
.portrait-game #view-daily .journal-tabs>button:nth-child(3)::before { background-position:33.3333% 66.6667%; }
.portrait-game #view-daily .portrait-fold>summary { position:relative; display:flex; align-items:center; min-height:64px; padding:8px 32px 8px 76px; list-style:none; font-size:17px; font-weight:700; background:linear-gradient(90deg,transparent,#6f542b44,transparent); }
.portrait-game #view-daily .portrait-fold>summary::-webkit-details-marker { display:none; }
.portrait-game #view-daily .portrait-fold>summary::before { content:''; position:absolute; left:0; top:0; width:64px; height:64px; background:var(--myth-icons) 0% 33.3333%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); }
.portrait-game #view-daily .portrait-fold>summary::after { content:'⌄'; margin-left:auto; color:#e9c88c; }
.portrait-game #view-daily .portrait-fold[open]>summary::after { content:'⌃'; }
.portrait-game #view-daily .quest-row>.btn { border-radius:50% 50% 8px 8px; min-width:48px; }
/* 소셜 시설의 빈 상태도 입력 폼만 남기지 않고 시설 문장을 앞세운다. */
.portrait-game #guild-none::before,.portrait-game #view-friends .friend-head::before { content:''; display:block; width:108px; height:108px; margin:0 auto 14px; background:var(--myth-icons) 33.3333% 66.6667%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); }
.portrait-game #view-friends .friend-head { display:block; text-align:center; line-height:1.8; }
.portrait-game #view-friends .friend-head::before { background-position:0% 66.6667%; }
.portrait-game :is(#view-guild,#view-friends) .friend-search input:not([type=checkbox]) { border:0; border-bottom:3px double #b59a63; border-radius:0; background:linear-gradient(90deg,#24363acc,#152330aa); box-shadow:inset 0 2px 8px #0005; padding:12px; }
.portrait-game :is(#view-guild,#view-friends) .friend-search .btn { min-height:46px; border-radius:22px 4px; background:linear-gradient(#705c35,#352a1a); }
.portrait-game #coupon-piece { position:relative; padding:18px 8px 18px 68px; min-height:64px; gap:10px; background:linear-gradient(90deg,#63523833,transparent); }
.portrait-game #coupon-piece::before { content:''; position:absolute; top:10px; left:0; width:60px; height:60px; background:var(--myth-icons) 100% 100%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); }
/* 미궁 전투 전리품은 결과창 안의 그림 보상으로 확인한다. */
.portrait-game #result-rewards .reward-icon { flex:0 0 38px; width:38px; height:38px; border:0; border-radius:0; background:var(--myth-icons) 100% 0%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 75%); }
.portrait-game #result-rewards .reward-gold .reward-icon { background-position:66.6667% 100%; }
.portrait-game #result-rewards .reward-essence .reward-icon { background-position:66.6667% 33.3333%; }
.portrait-game #result-rewards .reward-card .reward-icon { background-position:66.6667% 0%; }
.portrait-game #result-rewards .reward-ticket .reward-icon { background-position:100% 100%; }
.portrait-game #result-rewards .reward-exp .reward-icon { background-position:0% 100%; }
.portrait-game #result-rewards .reward-text { min-width:0; overflow-wrap:anywhere; line-height:1.6; }
.portrait-game .battle-result.maze-rewards .result-panel { max-height:none; overflow:visible; }
.portrait-game .battle-result.maze-rewards .result-grid { max-height:62dvh; overflow:auto; }
.portrait-game .battle-result.maze-rewards .reward-chip { padding:4px 0; border:0; border-radius:0; border-bottom:1px solid #b89b5344; background:none; }
/* 같은 차원문 대신 각 신화 지역의 풍경으로 장소를 구분한다. */
.portrait-game #maze-picker .maze-region-art { width:76px; height:76px; object-fit:cover; background:none; border-radius:50% 50% 12% 12%; mask-image:none; border:2px ridge #897046; box-shadow:0 3px 10px #0008; box-sizing:border-box; }
.portrait-game #maze-picker button.active .maze-region-art { border-color:#ffe0a0; box-shadow:0 0 12px #edc57566; }
.portrait-game #maze-picker button:disabled .maze-region-art { filter:grayscale(.6); }
.portrait-game #view-map { --facility-background:linear-gradient(#091b30bb,#071321ee),var(--chapter-scene,var(--myth-scene)) center/cover; }
.portrait-game #chapter-head .chapter-landscape { display:block; width:100%; height:156px; object-fit:cover; object-position:center 48%; border:1px solid #b19861; border-radius:40% 40% 5px 5px / 12% 12% 5px 5px; box-shadow:0 3px 15px #0009; margin-bottom:12px; }
.portrait-game #chapter-head { overflow:hidden; }
.portrait-game #chapter-head>.stars { display:block; margin:10px 0 6px; }
.portrait-game #chapter-head>.dim { display:block; margin:5px 0; }
.portrait-game #chapter-head .chapter-landscape { object-position:center 28%; }

/* 신탁 임무: 신탁 두루마리, 봉인 의뢰, 출석 별자리. */
.portrait-game #view-daily { --facility-background:linear-gradient(#0c1724aa,#080f1be8),url('../art/mythic-ui/regions/chapter-01.webp') center top/cover; }
.portrait-game #view-daily .topbar { justify-content:center; border:0; margin-bottom:0; }
.portrait-game .oracle-intro { display:flex; align-items:center; gap:8px; min-height:100px; padding:0 8px; border-bottom:1px solid #be9c5066; }
.portrait-game .oracle-intro>img { width:92px; height:100px; object-fit:contain; mask-image:radial-gradient(ellipse,#000 36%,transparent 72%); }
.portrait-game .oracle-intro>div { flex:1; min-width:0; }
.portrait-game #journal-summary { color:#ffe5a1; font-size:16px; font-weight:700; line-height:1.7; margin:0 0 6px; }
.portrait-game #journal-period-note { font-size:11px; color:#c2c7c9; line-height:1.6; margin:0; }
.portrait-game #view-daily .oracle-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:12px 0 22px; padding:0; }
.portrait-game #view-daily .oracle-tabs>button { position:relative; display:flex; flex-direction:column; align-items:center; gap:0; min-width:0; min-height:90px; padding:0 0 8px; border:0; border-radius:0; background:none; box-shadow:none; color:#b6b5ad; font-size:13px; }
.portrait-game #view-daily .oracle-tabs>button::before { display:none; }
.portrait-game .oracle-tabs i { display:block; width:62px; height:62px; background:var(--myth-icons) 0% 100%/400% 400%; mask-image:radial-gradient(ellipse,#000 40%,transparent 73%); }
.portrait-game .oracle-tabs>button:nth-child(2) i { background-position:0% 33.3333%; }
.portrait-game .oracle-tabs>button:nth-child(3) i { background-position:33.3333% 66.6667%; }
.portrait-game .oracle-tabs>button:nth-child(4) i { background-position:100% 100%; }
.portrait-game #view-daily .oracle-tabs>button.active { color:#ffe3a0; background:radial-gradient(ellipse at 50% 45%,#c7a05738,transparent 70%); }
.portrait-game .oracle-tabs>button.active::after { content:'◆'; position:absolute; bottom:-10px; color:#efd395; font-size:10px; }
.portrait-game #view-daily .oracle-contracts { gap:18px; }
.portrait-game #view-daily .quest-row { display:grid; grid-template-columns:46px minmax(0,1fr); gap:8px 12px; padding:16px 12px 14px 8px; border:0; border-top:1px solid #c0a26688; border-bottom:1px solid #c0a26644; border-radius:2px 18px 2px 18px; background:linear-gradient(110deg,#463c29e8,#222735ef 48%,#141c2be8); box-shadow:0 5px 16px #0006,inset 3px 0 #ac864155; }
.portrait-game #view-daily .quest-row::before { display:none; }
.portrait-game .oracle-seal { width:48px; height:58px; background:var(--myth-icons) 0% 33.3333%/400% 400%; mask-image:radial-gradient(ellipse,#000 40%,transparent 74%); }
.portrait-game .oracle-seal-STAGE_CLEAR,.portrait-game .oracle-seal-MAZE_BATTLE { background-position:33.3333% 0%; }
.portrait-game .oracle-seal-ARENA_FIGHT,.portrait-game .oracle-seal-DECK_SAVE { background-position:66.6667% 0%; }
.portrait-game .oracle-seal-GACHA_DRAW { background-position:100% 100%; }
.portrait-game .oracle-seal-ENHANCE,.portrait-game .oracle-seal-TEMPLE_MEDITATE { background-position:100% 33.3333%; }
.portrait-game #view-daily .quest-name { font-size:16px; color:#f8e5b7; margin:0 0 4px; }
.portrait-game #view-daily .quest-meta { color:#bcbfca; font-size:12px; }
.portrait-game .oracle-progress { display:flex; align-items:center; gap:10px; margin:10px 0; }
.portrait-game .oracle-progress .quest-bar { flex:1; height:6px; margin:0; background:#030912; border:1px solid #a9905d55; }
.portrait-game .oracle-progress .quest-bar i { display:block; height:100%; background:linear-gradient(90deg,#62868b,#bdd9c2); }
.portrait-game .oracle-progress>span { font-size:11px; color:#d9d9d0; white-space:nowrap; }
.portrait-game .oracle-rewards { display:flex; flex-wrap:wrap; gap:6px 14px; }
.portrait-game .oracle-reward { display:inline-flex; align-items:center; gap:3px; color:#ffdfa1; font-size:13px; }
.portrait-game .oracle-resource { width:28px; height:28px; flex-shrink:0; background:var(--myth-icons) 66.6667% 100%/400% 400%; }
.portrait-game .oracle-resource-crystal { background-position:33.3333% 100%; }
.portrait-game .oracle-resource-ticket,.portrait-game .oracle-resource-card { background-position:100% 100%; }
.portrait-game .oracle-resource-exp { background-position:0% 100%; }
.portrait-game #view-daily .quest-row>.btn { grid-column:2; justify-self:end; min-height:40px; padding:8px 20px; border:1px solid #bd9751; border-radius:3px 14px; background:linear-gradient(#896730,#49341d); color:#ffeab6; font-weight:700; }
.portrait-game #view-daily .quest-row>.btn:disabled { opacity:.5; background:none; border-color:#90837155; }
.portrait-game #view-daily .quest-row.done:not(.claimed) { border-color:#f3ce7b; box-shadow:0 0 18px #cc943521,inset 3px 0 #f1ce7b; background:linear-gradient(110deg,#65502fe8,#282a34ef 70%); }
.portrait-game #view-daily .quest-row.claimed { opacity:.58; }
.portrait-game .oracle-attendance-hero { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:10px; padding:16px 8px; border-top:1px solid #d5b77b; border-bottom:1px solid #d5b77b66; background:radial-gradient(ellipse at top,#bc903342,transparent 80%); }
.portrait-game .oracle-grand-gift { width:72px; height:90px; background:var(--myth-icons) 100% 100%/400% 400%; mask-image:radial-gradient(ellipse,#000 40%,transparent 74%); }
.portrait-game .oracle-attendance-hero p { margin:6px 0; font-size:12px; }
.portrait-game .oracle-attendance-hero strong { color:#ffe4a5; font-size:16px; }
.portrait-game #btn-sign-in-2 { grid-column:1/-1; justify-self:center; width:80%; min-height:46px; border-radius:4px 20px; background:linear-gradient(#9e793b,#5b3c20); border:1px solid #eac17c; color:#fff1ce; }
.portrait-game #view-daily .attendance-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:20px 0; }
.portrait-game #view-daily .att-day { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:10px 2px; min-height:98px; min-width:0; border:1px solid #86765577; border-radius:40% 40% 5px 5px / 15% 15% 5px 5px; background:linear-gradient(#283346,#101b29); color:#e8d1a2; opacity:1; }
.portrait-game #view-daily .att-day.today { border:2px solid #ffe29c; box-shadow:0 0 15px #edbb4944; }
.portrait-game #view-daily .att-day.earned { opacity:.45; }
.portrait-game #view-daily .att-no { font-size:11px; }
.portrait-game #view-daily .att-reward { display:flex; flex-direction:column; gap:6px; font-size:11px; }
.portrait-game #view-daily .att-reward .oracle-reward { flex-direction:column; font-size:11px; gap:0; }
.portrait-game #view-daily .att-mark { position:absolute; top:3px; right:5px; color:#ffe39a; }
.portrait-game #view-daily .att-day.final-reward { border-color:#debd72; background:linear-gradient(#67503b,#291f36); }
@media(max-width:350px) { .portrait-game #view-daily .quest-row { grid-template-columns:34px minmax(0,1fr); gap:8px; }.portrait-game .oracle-seal { width:36px; height:46px; }.portrait-game #journal-summary { font-size:14px; }.portrait-game .oracle-intro>img { width:70px; } }
.portrait-game #view-daily .topbar { min-height:46px; padding:8px 0; }
.portrait-game #view-daily .topbar::after { display:none; }
.portrait-game .oracle-intro { min-height:84px; }
.portrait-game .oracle-intro>img { height:84px; }
.portrait-game #view-daily .quest-row { border-radius:0; clip-path:polygon(0 0,96% 0,100% 12px,100% 100%,4% 100%,0 calc(100% - 12px)); }
.portrait-game #view-daily .oracle-tabs .reward-attention { position:absolute; top:6px; right:10px; }
.portrait-game #result-rewards .reward-bone .reward-icon,.portrait-game #result-rewards .reward-fang .reward-icon { width:46px; height:46px; background-size:contain; background-position:center; background-repeat:no-repeat; }
.portrait-game #result-rewards .reward-bone .reward-icon { background-image:url('../art/mythic-ui/material-bone.webp'); }
.portrait-game #result-rewards .reward-fang .reward-icon { background-image:url('../art/mythic-ui/material-fang.webp'); }
/* 모든 즉시 지급 보상은 확인할 때까지 남는 신화 전리품 창으로 통일한다. */
.reward-receipt { position:fixed; inset:0; z-index:15000; display:flex; align-items:center; justify-content:center; padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom)); background:#030810d9; backdrop-filter:blur(5px); }
.reward-receipt.hidden { display:none; }
.reward-receipt-sheet { width:min(420px,100%); max-height:100%; min-height:280px; display:flex; flex-direction:column; align-items:center; position:relative; padding:22px 18px 18px; box-sizing:border-box; border:2px ridge #d9b976; border-radius:46% 46% 12px 12px / 6% 6% 12px 12px; background:radial-gradient(ellipse at 50% 0,#9c743e66,transparent 50%),linear-gradient(#1b3243,#0a1524); box-shadow:0 0 0 5px #07111ce8,0 0 65px #dfb66b22,inset 0 0 30px #0007; animation:reward-receipt-arrive .28s ease-out; }
.reward-receipt-crest { width:76px; height:68px; flex-shrink:0; background:url('../art/mythic-ui/icons.webp') 33.3333% 66.6667%/400% 400%; mask-image:radial-gradient(ellipse,#000 48%,transparent 75%); }
.reward-receipt h2 { color:#ffe6a7; text-shadow:0 2px 8px #000; font-size:26px; margin:4px 0 18px; }
.reward-receipt-content { width:100%; overflow:auto; overscroll-behavior:contain; min-height:0; max-height:52dvh; }
.reward-receipt-group+.reward-receipt-group { border-top:1px solid #d2b16a66; margin-top:14px; padding-top:14px; }
.reward-receipt-item { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid #c9aa6844; color:#e8e7dc; font-size:15px; }
.reward-receipt-item b { color:#ffe4a1; font-size:20px; }
.reward-receipt-item span,.reward-receipt-note { word-break:keep-all; overflow-wrap:anywhere; line-height:1.65; }
.reward-receipt-icon { width:52px; height:52px; background:url('../art/mythic-ui/icons.webp') 100% 0%/400% 400%; mask-image:radial-gradient(ellipse,#000 50%,transparent 78%); }
.reward-receipt-gold { background-position:66.6667% 100%; }
.reward-receipt-crystal { background-position:33.3333% 100%; }
.reward-receipt-ticket { background-position:100% 100%; }
.reward-receipt-exp,.reward-receipt-stamina { background-position:0% 100%; }
.reward-receipt-card { background-position:66.6667% 0%; }
.reward-receipt-rune,.reward-receipt-essence { background-position:66.6667% 33.3333%; }
.reward-receipt-bone { background:url('../art/mythic-ui/material-bone.webp') center/contain no-repeat; }
.reward-receipt-fang { background:url('../art/mythic-ui/material-fang.webp') center/contain no-repeat; }
.reward-receipt-note { color:#b9c6ce; font-size:13px; text-align:center; white-space:pre-line; margin:14px 0 4px; }
.reward-receipt-confirm { margin-top:22px; flex-shrink:0; min-height:48px; width:70%; border:2px ridge #e4c88b; border-radius:6px 18px; background:linear-gradient(#b48e46,#705028); color:#fff3d0; font-size:17px; font-weight:bold; box-shadow:0 3px 10px #0008,inset 0 0 8px #e9c47d44; }
.reward-receipt-confirm:focus-visible { outline:3px solid #a7f9ff; outline-offset:3px; }
.draw-reward-summary { grid-column:1/-1; color:#ead4a5; text-align:center; line-height:1.6; }
@keyframes reward-receipt-arrive { from { opacity:0; transform:translateY(12px) scale(.94); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .reward-receipt-sheet { animation:none; } }
.portrait-game .reward-receipt { align-items:center; z-index:15000; padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom)); }