/* css/screens.css — 화면별 스타일 */
/* 날짜 */
.datebox{display:flex; align-items:stretch; gap:6px; padding:6px 8px;}
.datebox .dl{display:flex; flex-direction:column; justify-content:center; gap:2px; padding:2px 6px; border-right:2px solid var(--gold-dk); font-size:13px; color:var(--gold-lt);}
.datebox .dl .yr{color:var(--parch); font-size:12px;} .datebox .dl .wd{color:#ffb0d0;}
.datebox .big{flex:1; display:flex; align-items:center; justify-content:center; gap:4px; font-size:44px; color:var(--gold-lt); text-shadow:0 2px 0 #000, 0 0 8px rgba(227,196,106,.4);}
.datebox .big small{font-size:14px; color:var(--parch-dk); align-self:flex-end; margin-bottom:8px;}
/* 3순 달력 */
.cal .caltitle{text-align:center; color:var(--gold-lt); font-size:13px; padding:2px 0 6px;}
.calrow{display:grid; grid-template-columns:40px 22px 1fr; align-items:center; gap:4px; padding:5px 6px; margin:3px 0; background:#2a0a18; border:1px solid #4a1a30; border-radius:3px; font-size:12px;}
.calrow .cp{color:var(--gold-lt);} .calrow.past{opacity:.5;} .calrow.cur{border-color:var(--gold); box-shadow:0 0 6px var(--gold);}
/* 원이 메시지 */
.msg{display:flex; gap:8px; min-height:120px; align-items:stretch;}
.msg .portrait{flex:0 0 70px; align-self:flex-end; border:2px solid var(--gold-dk); border-radius:3px; background:#12040a; overflow:hidden; height:86px;}
.msg .portrait svg{display:block; width:100%; height:100%;}
.msg .mtext{flex:1; background:linear-gradient(180deg,#1e0812,#12040a); border:1px solid var(--gold-dk); border-radius:3px; padding:8px 10px; font-size:12px; line-height:1.7; color:#ffeede; overflow:auto; max-height:240px;}
.msg .mtext .who{color:var(--gold-lt); font-size:11px;} .msg .mtext .ev{color:#ffd0e0;}
.fxl{margin-top:4px; font-size:11px; line-height:1.6;}
.fairy-portrait{width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; background:radial-gradient(circle,#5a2a6a,#1a0820);}
.fairy-portrait .fz{font-size:34px; color:#ffe6a0; text-shadow:0 0 10px #ff9ef0;} .fairy-portrait .fs{position:absolute; top:6px; right:8px; color:#fff;}
.npc-fb{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:30px; background:#3a2040; color:#fff;}
/* 오른쪽 */
.top{display:grid; grid-template-columns:1fr auto; gap:6px 10px; padding:8px 10px; align-items:center;}
.top .nameplate{grid-column:1/3; text-align:center; color:var(--gold-lt); font-size:15px; border-bottom:2px solid var(--gold-dk); padding-bottom:4px;}
.top .nameplate .title{color:#ffb0d0; font-size:11px; display:block;}
.top .agebox{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--parch-dk);}
.top .agebox .star{width:32px; height:32px; border:2px solid var(--gold-dk); border-radius:50%; background:radial-gradient(circle,#3a1028,#1a0610); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--gold-lt);}
.top .agebox .an{font-size:22px; color:var(--gold-lt);}
.top .goldbox{justify-self:end; background:#1a0610; border:2px solid var(--gold-dk); border-radius:3px; padding:4px 10px; color:var(--gold-lt); font-size:15px;}
.top .goldbox small{color:var(--parch-dk); font-size:10px;}
.top .slots{grid-column:1/3; display:flex; gap:4px; justify-content:center; align-items:center;}
.top .slot{width:28px; height:28px; border:2px solid var(--gold-dk); border-radius:3px; background:#12040a; display:flex; align-items:center; justify-content:center; font-size:14px; filter:grayscale(1); opacity:.4;}
.top .slot.on{filter:none; opacity:1; box-shadow:0 0 6px var(--gold);}
.top .mini{font-size:14px; min-width:20px;}
.top .catch{grid-column:1/3; text-align:center; background:#1a0610; border:1px solid var(--gold-dk); border-radius:3px; padding:3px; color:#ffe4b0; font-size:12px;}
.statpanel{padding:7px 8px;}
.statpanel h4{color:var(--gold-lt); font-size:12px; text-align:center; padding-bottom:5px; margin-bottom:5px; border-bottom:1px solid var(--gold-dk);}
.statpanel summary{color:var(--gold-lt); font-size:12px; margin:6px 0 4px; cursor:pointer;}
.srow{display:grid; grid-template-columns:64px 32px 1fr auto; align-items:center; gap:3px; margin:3px 0;}
.srow .lab{background:linear-gradient(180deg,var(--parch),var(--parch-dk)); color:var(--inkred); font-size:10.5px; text-align:center; border:1px solid var(--gold-dk); border-radius:2px; padding:1px 0; white-space:nowrap; overflow:hidden;}
.srow .num{background:#1a0610; color:var(--gold-lt); font-size:12px; text-align:right; padding:1px 3px; border:1px solid #3a1020; border-radius:2px;}
.srow .num.warn{color:#ff7a7a;} .srow .rk{font-size:11px; color:var(--gold-lt); width:12px;}
/* 무대 장식 */
.room-window{position:absolute; top:8%; right:8%; width:16%; height:28%; background:linear-gradient(180deg,#bfe8ff,#fff0f8); border:5px solid #f0d8e8; border-radius:4px; z-index:1; display:flex; align-items:center; justify-content:center; font-size:24px; opacity:.9;}
.room-frame{position:absolute; top:10%; left:8%; width:12%; height:20%; border:5px solid #6a3a1a; background:#fff6ec; box-shadow:0 0 0 2px #c09a5a; z-index:1; display:flex; align-items:center; justify-content:center; font-size:22px;}
.pcls{position:absolute; inset:0; z-index:4; pointer-events:none;}
.pcl{position:absolute; bottom:10%; font-size:20px; animation:floatUp 1.8s linear infinite;}
@keyframes floatUp{0%{transform:translateY(20px) scale(.5);opacity:0}25%{opacity:1}100%{transform:translateY(-160px) scale(1.15);opacity:0}}
.sbob{animation:sbob 1.1s ease-in-out infinite;} @keyframes sbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
.sbreathe{animation:sbreathe 2.4s ease-in-out infinite;} @keyframes sbreathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.02)}}
.popup{display:inline-block; background:rgba(26,6,16,.85); border:1px solid var(--gold); border-radius:4px; padding:4px 10px; font-size:13px; animation:pop .45s ease-out;}
@keyframes pop{0%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:1}}
/* 메뉴 */
.menu-bar{padding:8px;}
.menu-grid{display:grid; grid-template-columns:repeat(9,1fr); gap:4px;}
.mi{background:linear-gradient(180deg,#2a0a18,#1a0610); border:1px solid var(--gold-dk); border-radius:3px; color:var(--parch); font-size:12px; padding:6px 2px; display:flex; flex-direction:column; align-items:center; gap:2px;}
.mi .mic{font-size:20px;} .mi:hover{background:linear-gradient(180deg,#7a1e40,#4a1028); color:var(--gold-lt);}
.autobar{margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--gold-lt);}
.autobar select{background:#1a0610; color:var(--gold-lt); border:1px solid var(--gold-dk); padding:3px;}
.daystrip{display:flex; gap:3px; flex-wrap:wrap; justify-content:center;}
.dcell{width:46px; height:52px; border:1px solid var(--gold-dk); border-radius:3px; background:#1a0610; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px;}
.dcell .dn{color:var(--gold-lt);} .dcell .dw.sun{color:#ff8a8a;} .dcell .dw.sat{color:#8ab6ff;} .dcell .dt{font-size:15px; height:18px;}
.dcell.cur{box-shadow:0 0 8px var(--gold);} .dcell.t-ok{background:#1c3a2a;} .dcell.t-fail{background:#4a1418;} .dcell.t-slack{background:#3a2a44;} .dcell.t-closed{background:#3a3020;}
.pbtns{display:flex; gap:6px; justify-content:center; align-items:center; margin-top:8px;}
/* 모달·대화창 */
.modal-layer{position:fixed; inset:0; background:rgba(8,2,6,.72); z-index:200; display:none; align-items:center; justify-content:center; padding:12px;}
.modal-layer.show{display:flex;}
.modal-box{width:min(620px,100%); max-height:94vh; overflow:auto; padding:14px;}
.modal-box.plan-box{width:min(760px,100%);}
.modal-box.dlg-box{width:min(680px,100%); cursor:pointer;}
.m-title{color:var(--gold-lt); font-size:16px; text-align:center; border-bottom:2px solid var(--gold-dk); padding-bottom:6px; margin-bottom:10px;}
.m-body{font-size:13px; line-height:1.7;} .m-body h4{color:var(--gold-lt); font-size:13px; margin:8px 0 4px;}
.m-foot{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:12px;}
.m-list{display:flex; flex-direction:column; gap:4px;}
.li{text-align:left; background:#1e0812; color:var(--parch); border:1px solid #5a2a40; border-radius:3px; padding:7px 10px; font-size:13px; display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.li:hover:not(:disabled){border-color:var(--gold); background:#3a1024;} .li.sel{border-color:var(--mint); box-shadow:0 0 6px var(--mint);}
.li:disabled{opacity:.45;} .li small{width:100%; color:#e8c9a0; font-size:11px;}
.li .c{margin-left:auto; font-size:12px;} .c.earn{color:var(--plus);} .c.spend{color:#ffb0a0;}
.li .lv{font-size:11px; color:var(--gold-lt); min-width:58px; text-align:right;} .li .lk{font-size:11px; color:#c08a8a;}
.dlg{display:flex; gap:10px; align-items:stretch;}
.dlg-portrait{flex:0 0 96px; height:118px; border:2px solid var(--gold-dk); border-radius:3px; background:#12040a; overflow:hidden;}
.dlg-portrait svg{width:100%; height:100%; display:block;}
.dlg-body{flex:1; display:flex; flex-direction:column; gap:6px;}
.dlg-name{color:var(--gold-lt); font-size:13px;}
.dlg-text{background:#160610; border:1px solid var(--gold-dk); border-radius:4px; padding:10px 12px; font-size:14px; line-height:1.75; color:#ffeede; min-height:70px; flex:1;}
.dlg-next{text-align:right; font-size:11px; color:var(--gold); animation:blink 1s steps(2) infinite;} @keyframes blink{50%{opacity:0}}
.choices{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px;}
/* 계획 */
.pslots{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px;}
.pslot{background:#1e0812; border:2px solid #5a2a40; border-radius:4px; color:var(--parch); padding:6px; display:flex; flex-direction:column; gap:2px; font-size:12px;}
.pslot .pp{color:var(--gold-lt);} .pslot.sel{border-color:var(--gold); box-shadow:0 0 8px var(--gold);} .pslot.off{opacity:.4;}
.tabs{display:flex; gap:4px; margin-bottom:6px;}
.tab{flex:1; background:#2a0a18; border:1px solid var(--gold-dk); color:var(--parch); padding:6px; border-radius:3px 3px 0 0; font-size:13px;}
.tab.on{background:linear-gradient(180deg,#8a2a50,#4a1028); color:var(--gold-lt);}
.plist{max-height:300px; overflow:auto;}
.lgroup{font-size:12px; color:var(--gold-lt); padding:4px 2px 2px; border-bottom:1px dashed #5a2a40; margin:4px 0 2px;}
.ct-tabs{display:flex; gap:4px; margin:4px 0 6px;} .ct-tabs .tab{flex:1;}
.pdesc{margin-top:8px; background:#160610; border:1px solid var(--gold-dk); border-radius:4px; padding:8px 10px; font-size:12px; line-height:1.6; min-height:40px;}
.pdesc .who{color:var(--gold-lt);}
.pfoot{display:flex; flex-wrap:wrap; gap:12px; font-size:12px; margin-top:8px; color:var(--parch-dk);} .pfoot b{color:var(--gold-lt);}
.pwarn{margin-top:6px; color:#ffd0a0; font-size:12px; line-height:1.6;}
/* 능력치·프로필 */
.sgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:4px;}
.sgrid .sc{display:flex; justify-content:space-between; background:#1e0812; border:1px solid #4a1a30; padding:3px 8px; border-radius:3px; font-size:12px;}
.sgrid .sc b{color:var(--gold-lt);} .sgrid.sm .sc{font-size:11px;}
.prof{display:flex; gap:12px;} .prof-hero{flex:0 0 120px; height:220px;} .prof-hero svg,.prof-hero canvas{height:100%; width:auto; image-rendering:pixelated;}
.prof-info{display:flex; flex-direction:column; gap:4px; font-size:13px;}
.opt{margin:8px 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px;}
/* 타이틀·생성·엔딩 */
.title-screen{position:relative; min-height:90vh; display:flex; align-items:center; justify-content:center;}
.title-bg{position:fixed; inset:0; background-size:cover; background-position:center; z-index:-1; opacity:.55;}
.center-card{padding:22px; text-align:center; width:min(680px,100%); margin:0 auto;}
.center-card h1{color:var(--gold-lt); font-size:26px; margin-bottom:6px; text-shadow:0 2px 0 #000;}
.center-card h1 small{display:block; color:#ffb0d0; font-size:14px; margin-top:4px;}
.center-card p{color:#ffe4c8; font-size:13px; line-height:1.9; margin:10px auto;}
.title-hero{height:240px; display:flex; justify-content:center;} .title-hero svg,.title-hero canvas{height:100%; width:auto; image-rendering:pixelated;}
.nrow{margin:14px 0; display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap;}
.nrow.col{flex-direction:column;}
.form{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; text-align:left; margin:14px 0;}
.form label{display:flex; flex-direction:column; gap:4px; color:var(--gold-lt); font-size:12px;}
.form input,.form select{font-size:14px; padding:7px 10px; background:#1a0610; color:var(--gold-lt); border:2px solid var(--gold-dk); border-radius:3px;}
.form label select + select{margin-top:4px;}
.form .hint{grid-column:1/3; background:#160610; border:1px solid var(--gold-dk); border-radius:4px; padding:8px; font-size:12px; line-height:1.6;}
.form .err{grid-column:1/3; color:#ff9a9a; font-size:12px; min-height:16px;}
.end-cg{position:relative; aspect-ratio:16/9; border:2px solid var(--gold-dk); border-radius:4px; overflow:hidden; margin-bottom:10px;}
.cg .cg-bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.cg .cg-hero{position:absolute; transform:translate(-50%,-100%); z-index:2;}
.cg .cg-hero svg,.cg .cg-hero canvas{height:100%; width:auto; display:block; image-rendering:pixelated;}
.cg .cg-tint{position:absolute; inset:0; z-index:3; pointer-events:none;}
.etag{color:#ffb0d0; font-size:13px;} .etag .new{background:#ff4f8f; color:#fff; padding:1px 6px; border-radius:3px; font-size:11px;}
.etitle{font-size:22px; color:#ffcf6a; margin:6px 0;} .ebond{color:#ffd0e8; font-size:14px;}
.efairy{font-size:13px;}
.score{font-size:13px; margin-top:8px;} .score b{color:var(--gold-lt); font-size:18px;}
#ending .rank{font-size:52px; color:var(--gold-lt); text-shadow:0 0 14px var(--gold);}
.fstats{display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:8px 0;}
.fstats .fs{background:#1a0610; border:1px solid var(--gold-dk); border-radius:3px; padding:4px 8px; font-size:12px;} .fstats .fs b{color:var(--gold-lt);}
@media(max-width:900px){ .menu-grid{grid-template-columns:repeat(5,1fr);} .form{grid-template-columns:1fr;} .form .hint,.form .err{grid-column:1;} }

/* 실제 배경 이미지가 있으면 방 장식(폴백용)은 숨긴다 */
.stage:has(.st-bg:not(.asset-fb)) .room-window,.stage:has(.st-bg:not(.asset-fb)) .room-frame{display:none;}

/* ── 단계 2: 거리·상점·소지품·방송국·프로필·세이브 */
.modal-box.shop-box,.modal-box.inv-box,.modal-box.ct-box,.modal-box.town-box,.modal-box.sv-box{width:min(760px,100%);}
.shop-head{position:relative; height:110px; border:2px solid var(--gold-dk); border-radius:4px; overflow:hidden; margin-bottom:8px;}
.shop-bg,.tc-bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.shop-bg .asset-icon,.tc-bg .asset-icon{position:absolute; right:10px; top:6px; font-size:34px; opacity:.6;}
.shop-greet{position:absolute; left:8px; right:8px; bottom:6px; background:rgba(26,6,16,.85); border:1px solid var(--gold-dk); border-radius:3px; padding:5px 8px; font-size:12px; line-height:1.5;}
.shop-greet b{color:var(--gold-lt); margin-right:6px;}
.shop-main,.inv-main{display:flex; gap:10px;} .shop-hero,.inv-hero{flex:0 0 110px; height:230px;}
.shop-hero svg,.inv-hero svg{height:100%; width:auto;}
.shop-list,.inv-side{flex:1; min-width:0;} .shop-list .m-list{max-height:300px; overflow:auto;}
.shop-msg{min-height:20px; font-size:12px; margin-top:6px; color:var(--gold-lt);}
.money{margin-right:auto; font-size:12px; align-self:center;} .money b{color:var(--gold-lt);}
.own{font-size:10px; background:var(--mint); color:#123; padding:0 5px; border-radius:8px;}
.cos-row{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0;} .sw{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; border:1px solid #fff;}
.town-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.town-card{position:relative; height:120px; border:2px solid var(--gold-dk); border-radius:4px; overflow:hidden; padding:0; background:#1e0812; cursor:pointer;}
.town-card:hover{border-color:var(--gold);}
.tc-lab{position:absolute; left:0; right:0; bottom:0; background:rgba(26,6,16,.86); color:var(--parch); padding:4px 6px; text-align:left; font-size:12px;}
.tc-lab small{display:block; font-size:10px; color:#e8c9a0;}
.eqgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-bottom:8px;}
.eqslot{background:#1e0812; border:1px solid #5a2a40; border-radius:3px; padding:4px 6px; font-size:12px; display:flex; flex-direction:column; gap:2px;}
.eqslot .eqk{font-size:10px; color:var(--gold-lt);} .eqslot small{font-size:10px; color:#e8c9a0;}
.igrid{display:grid; grid-template-columns:repeat(8,1fr); gap:4px;}
.icell{position:relative; aspect-ratio:1; background:#1e0812; border:1px solid #5a2a40; border-radius:3px; font-size:20px; display:flex; align-items:center; justify-content:center; padding:0;}
.icell.empty{opacity:.4;} .icell.sel{border-color:var(--mint); box-shadow:0 0 6px var(--mint);}
.icell .in{position:absolute; right:2px; bottom:0; font-size:10px; color:var(--gold-lt);}
.idet{margin-top:8px; background:#1e0812; border:1px solid var(--gold-dk); border-radius:3px; padding:6px 8px; font-size:12px;}
.idet .nrow{margin:6px 0 0; justify-content:flex-start;} .lk{font-size:11px; color:#c08a8a;}
.ct-list{display:flex; flex-direction:column; gap:4px; max-height:56vh; overflow:auto;}
.ct-row{display:flex; gap:8px; align-items:center; text-align:left; background:#1e0812; color:var(--parch); border:1px solid #5a2a40; border-radius:3px; padding:4px 6px; cursor:pointer;}
.ct-row:hover:not(:disabled){border-color:var(--gold);} .ct-row:disabled{opacity:.5;}
.ct-por{flex:0 0 48px; height:56px; border-radius:3px; overflow:hidden;}
.ct-body{flex:1; font-size:12px; display:flex; flex-direction:column; gap:2px;} .ct-body b{color:var(--gold-lt);} .ct-acc{font-size:11px;}
.npc-img{width:100%; height:100%; background-size:cover; background-position:center top; position:relative; background-color:#3a2040;}
.npc-fbk{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:24px; color:#fff;}
.npc-fbk small{font-size:9px;} .npc-img:not(.asset-fb) .npc-fbk{display:none;} .npc-img .asset-icon{display:none;}
.pmeter{display:flex; gap:6px; align-items:center; font-size:12px;} .pmeter .bar{flex:1;} .pmeter span{width:56px;}
.cmdrow{display:flex; flex-wrap:wrap; gap:4px;} .cmdchip{font-size:11px; padding:2px 8px; border-radius:10px; background:var(--mint); color:#123;}
.cmdchip.used{background:#4a2a3a; color:#c8a8b8;}
.sv-list{display:flex; flex-direction:column; gap:4px; max-height:52vh; overflow:auto; margin-top:8px;}
.sv-slot{display:flex; gap:8px; align-items:center; background:#1e0812; border:1px solid #5a2a40; border-radius:3px; padding:4px 8px; font-size:12px; min-height:52px;}
.sv-slot.empty{opacity:.7;} .sv-no{width:36px; color:var(--gold-lt);} .sv-empty{flex:1; color:#a08890;}
.sv-thumb{flex:0 0 40px; height:48px;} .sv-thumb svg{height:100%; width:auto;}
.sv-info{flex:1;} .sv-info small{color:#e8c9a0;} .sv-btns{display:flex; gap:4px; flex-wrap:wrap;}
.sv-fairy{margin-bottom:4px;}
@media(max-width:520px){ .town-grid{grid-template-columns:repeat(2,1fr);} .igrid{grid-template-columns:repeat(4,1fr);} .shop-hero,.inv-hero{display:none;} .eqgrid{grid-template-columns:1fr;} }

/* ── 단계 3: 이벤트 CG 띠 · 방 벽 작품 · 갤러리 */
.dlg-cg{position:relative; aspect-ratio:16/7; border:2px solid var(--gold-dk); border-radius:4px; margin-bottom:8px; background-size:cover; background-position:center; overflow:hidden;}
.room-art{position:absolute; top:9%; left:7%; width:13%; aspect-ratio:5/4; border:5px solid #8a5a2a; box-shadow:0 0 0 2px #e0b870, 0 3px 6px rgba(0,0,0,.35); z-index:2; background:#fff;}
.room-art svg{width:100%; height:100%; display:block;}
.room-art.t5{border-color:#c09020; box-shadow:0 0 0 2px #ffe080, 0 0 12px #ffd700;}
.modal-box.gal-box{width:min(820px,100%);}
.gal-body{max-height:58vh; overflow:auto; padding-right:4px;}
.gal-sub{color:var(--gold-lt); font-size:13px; margin:6px 0 4px;}
.gal-grid{display:grid; gap:6px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.gal-grid.end{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
.gal-grid.vac{grid-template-columns:repeat(4,1fr);}
.gcell{background:#1e0812; border:1px solid #5a2a40; border-radius:4px; padding:4px; display:flex; flex-direction:column; gap:3px; color:var(--parch); font-size:11px; text-align:center;}
button.gcell{cursor:pointer; font-family:inherit;} button.gcell:hover{border-color:var(--gold);}
.gcell.on{border-color:var(--gold-dk);}
.gcell small{color:#e8c9a0; font-size:10px;}
.gq{aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; font-size:24px; color:#6a3a50; background:#12040a; border-radius:3px;}
.gimg{position:relative; aspect-ratio:16/10; background-size:cover; background-position:center; border-radius:3px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.gimg .gic{font-size:26px; position:relative; z-index:2; text-shadow:0 1px 3px rgba(0,0,0,.4);}
.gimg .asset-icon{font-size:30px;}
.gcg{position:relative; aspect-ratio:16/10; border-radius:3px; overflow:hidden;}
.gart{aspect-ratio:5/4; border:3px solid #8a5a2a; background:#fff;} .gart svg{width:100%; height:100%; display:block;}
.gal-view{position:relative; aspect-ratio:16/9; border:2px solid var(--gold-dk); border-radius:4px; overflow:hidden;}
@media (max-width:520px){ .gal-grid.vac{grid-template-columns:repeat(2,1fr);} .room-art{width:18%;} }

/* ── 단계 4: 탐험 화면 ── */
.ex-bg{opacity:.55; filter:saturate(1.1);}
.ex-root{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;}
.ex-map{position:absolute; inset:0; display:grid; grid-template-columns:repeat(15,1fr); grid-template-rows:repeat(9,1fr);
  box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 24px rgba(0,0,0,.6);}
.ex-wrap{position:relative; height:100%; aspect-ratio:15/9;}
.ex-hero{position:absolute; height:16%; transform:translate(-50%,-78%); z-index:4; pointer-events:none; transition:left .1s linear, top .1s linear; left:50%; top:50%;}
.ex-hero svg,.ex-hero canvas{height:100%; width:auto; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));}
.xc{position:relative; display:flex; align-items:center; justify-content:center; font-size:clamp(10px,2.1vw,22px); line-height:1; cursor:pointer; overflow:hidden;}
.xc .xi{position:relative; z-index:1; filter:drop-shadow(0 1px 0 rgba(0,0,0,.5));}
.t-void{background:#0c0610;}
.t-path{background:#d8c89a; box-shadow:inset 0 0 0 1px rgba(120,90,40,.15);}
.th-forest .t-path{background:#b8cf8a;} .th-marsh .t-path{background:#c8d4a0;} .th-quarry .t-path{background:#d0c4b0;} .th-coast .t-path{background:#e4e8ee;}
.t-wall{background:#2f5a34; color:#183a1c;}
.th-marsh .t-wall{background:#5f7a3a;} .th-quarry .t-wall{background:#6a6058;} .th-coast .t-wall{background:#4a5260;}
.t-water{background:linear-gradient(180deg,#3a7ac8,#2a5aa8); animation:wave 3s ease-in-out infinite;}
.th-coast .t-water{background:linear-gradient(180deg,#2a4a80,#1a3060);}
.t-cliff{background:radial-gradient(circle at 50% 30%,#2a2030,#0a0610);}
.t-sparkle .xi{color:#fff8c0; font-size:.8em; animation:twinkle 1.4s ease-in-out infinite;}
.t-shallow{background:linear-gradient(180deg,#8ad0f0,#6ab8e0); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}
.t-mud{background:radial-gradient(circle at 30% 40%,#7a5a3a 0 12%,transparent 13%),radial-gradient(circle at 70% 70%,#7a5a3a 0 10%,transparent 11%),#9a7a52;}
.th-quarry .t-mud{background:radial-gradient(circle at 30% 40%,#8a8070 0 14%,transparent 15%),radial-gradient(circle at 70% 70%,#8a8070 0 12%,transparent 13%),#a89a88;}
.t-bridge{background:repeating-linear-gradient(90deg,#a87a4a 0 22%,#7a5230 22% 26%); box-shadow:inset 0 3px 0 #5a3a20, inset 0 -3px 0 #5a3a20;}
.t-sunk .xi{opacity:.6;}
/* 한국 탐험: 거제도(sea) 몽돌·물때 바닷길 / 수원(fortress) 성문·야간 개방 성곽길 */
.th-sea .t-path{background:#f0e6c8;} .th-sea .t-wall{background:#6a7a6a;} .th-sea .t-water{background:linear-gradient(180deg,#3aa0c8,#1a6aa0);}
.th-sea .t-mud{background:radial-gradient(circle at 25% 35%,#3a3a40 0 16%,transparent 17%),radial-gradient(circle at 70% 65%,#4a4a52 0 15%,transparent 16%),radial-gradient(circle at 65% 20%,#2a2a30 0 10%,transparent 11%),#8a8a90;}
.t-tidal{background:repeating-linear-gradient(135deg,#e8d8a8 0 18%,#c8b888 18% 24%); box-shadow:inset 0 0 0 2px rgba(80,160,200,.45);}
.th-fortress .t-path{background:#e0d4bc;} .th-fortress .t-wall{background:repeating-linear-gradient(0deg,#8a8070 0 30%,#6a6050 30% 34%),#8a8070;}
.th-fortress .t-water{background:linear-gradient(180deg,#4a8aa0,#2a6070);}
.t-gate{background:#b04040; box-shadow:inset 0 0 0 3px #6a2020;} .t-gate.t-closed{background:#5a2020;}
.t-wallwalk{background:repeating-linear-gradient(90deg,#9a9080 0 45%,#7a7060 45% 50%); opacity:.85;}
.t-wallwalk.t-lit{background:radial-gradient(circle,#ffe0a0 0,#c89a50 70%); opacity:1;}
.ex-hud .tide{margin-left:6px; font-size:.85em; color:#bfe8ff;}
.t-stairs{background:#e0e0e8;}
.t-start{background:#ffe6a8 !important;}
.t-tunnel .xi{filter:brightness(.8);}
.t-obj .xi{animation:bob 1.6s ease-in-out infinite;}
.t-obj.s-open .xi,.t-obj.s-done .xi,.t-obj.s-cleared .xi{animation:none; opacity:.45; filter:grayscale(.8);}
.t-obj.o-B.s-active{background:radial-gradient(circle,#ff6080 0,#a02040 70%);}
.t-obj.o-E.s-event,.t-obj.o-T.s-event{background-image:radial-gradient(circle,rgba(255,240,150,.75),rgba(255,240,150,0) 65%);}
.xc:hover{outline:2px solid rgba(255,255,255,.6); outline-offset:-2px; z-index:2;}
.ex-night{position:absolute; inset:0; pointer-events:none; z-index:5; transition:background .6s;}
.ex-hud{position:absolute; left:6px; top:6px; z-index:7; background:rgba(26,6,16,.82); border:1px solid var(--gold); border-radius:4px; padding:4px 8px; font-size:12px; color:var(--gold-lt); max-width:62%;}
.ex-hud .stars{color:#ffd040;} .ex-hud .day{display:block; color:var(--parch);}
.tickbar{display:flex; gap:1px; margin-top:3px;} .tickbar i{display:block; width:7px; height:6px; background:#ffe080;} .tickbar i.n{background:#4050a0;}
.tickbar i.past{opacity:.35;} .tickbar i.now{outline:1px solid #fff; transform:scaleY(1.6);}
.ex-msg{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:7; background:rgba(26,6,16,.9); border:2px solid var(--gold); color:var(--gold-lt);
  padding:4px 12px; border-radius:4px; font-size:12px; opacity:0; transition:opacity .2s; pointer-events:none; max-width:92%; text-align:center;}
.ex-msg.show{opacity:1;}
.ex-panel{display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:6px 10px; align-items:center;}
.ex-bars{display:flex; flex-direction:column; gap:3px; min-width:0;}
.exbar{display:flex; align-items:center; gap:6px; font-size:12px;} .exbar .lab{width:30px;} .exbar .bar{flex:1;} .exbar .num{width:62px; text-align:right; font-size:11px;}
.ex-sum{font-size:11px; color:var(--parch-dk);}
.ex-btns{grid-column:1; display:flex; flex-wrap:wrap; gap:4px;}
.dpad{grid-row:1 / span 2; grid-column:2; display:grid; grid-template-columns:repeat(3,38px); grid-template-rows:repeat(3,34px); gap:2px;}
.dpad button{background:linear-gradient(180deg,#8a2a50,#4a1028); color:var(--gold-lt); border:2px solid var(--gold); border-radius:6px; font-size:15px;}
.dpad button:active{transform:translateY(2px);}
.dpad .up{grid-column:2; grid-row:1;} .dpad .lf{grid-column:1; grid-row:2;} .dpad .rt{grid-column:3; grid-row:2;} .dpad .dn{grid-column:2; grid-row:3;}
@keyframes wave{50%{filter:brightness(1.15);}}
@keyframes twinkle{50%{opacity:.35;}}
@keyframes bob{50%{transform:translateY(-12%);}}

/* ── 단계 4: 배틀 화면 ── */
.bt-bg{filter:brightness(.8);}
.bt-root{position:absolute; inset:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; padding:4% 4% 13%; z-index:3;}
.bt-side{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end;}
.bt-bars{width:min(220px,90%); background:rgba(26,6,16,.82); border:1px solid var(--gold); border-radius:4px; padding:4px 6px;}
.bt-bars .exbar .num{width:36px;}
.bt-fig{height:66%;} .bt-fig svg,.bt-fig canvas{height:100%; width:auto; display:block; filter:drop-shadow(0 4px 5px rgba(0,0,0,.6));}
.bt-vs{align-self:center; font-size:22px; color:var(--gold-lt); text-shadow:0 2px 0 #000; padding:0 8px;}
.bt-card{width:min(190px,80%); height:66%; background:rgba(26,6,16,.75); border:2px solid var(--gold); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,.6);}
.bt-card.k-boss,.bt-card.k-bounty{border-color:#ff6080; box-shadow:0 0 18px rgba(255,60,100,.7);}
.bt-img{position:relative; flex:1; background-size:cover; background-position:center;}
.bt-fbk{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:64px;}
.bt-img:not(.asset-fb) .bt-fbk{display:none;}
.bt-img.asset-fb .asset-icon{display:none;}
.bt-name{text-align:center; font-size:12px; color:var(--gold-lt); padding:3px; background:rgba(0,0,0,.4);}
.bt-pop{position:absolute; top:22%; left:50%; transform:translateX(-50%); z-index:6; pointer-events:none;}
.dmg{display:inline-block; font-size:28px; font-weight:bold; color:#fff; text-shadow:0 2px 0 #a01050, 0 0 6px #000; animation:dmgpop .55s ease-out forwards;}
.dmg.crit{font-size:36px; color:#ffe040; text-shadow:0 2px 0 #c03000, 0 0 10px #ff4000;}
.dmg.aura{color:#d0b0ff; text-shadow:0 2px 0 #5020a0, 0 0 8px #a060ff;}
.dmg.miss{font-size:20px; color:#c0c0d0;} .dmg.heal{color:#7be08a; text-shadow:0 2px 0 #106030;}
@keyframes dmgpop{0%{transform:translateY(10px) scale(.6); opacity:0;} 25%{transform:translateY(-6px) scale(1.2); opacity:1;} 100%{transform:translateY(-28px) scale(1); opacity:0;}}
.shake{animation:shake .3s;}
@keyframes shake{20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);}}
.bt-flash{position:absolute; inset:0; z-index:8; pointer-events:none; background:#fff; opacity:0; transition:opacity .25s;}
.bt-flash.on{opacity:.55;}
.bt-title{position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:7; background:rgba(26,6,16,.85); border:1px solid var(--gold); padding:3px 12px; border-radius:4px; font-size:12px; color:var(--gold-lt);}
.bt-log{position:absolute; left:3%; right:3%; bottom:6px; z-index:7; background:rgba(26,6,16,.78); border:1px solid var(--gold-dk); border-radius:4px; padding:3px 8px; font-size:11px; line-height:1.5; min-height:3.2em;}
.bt-banner{position:absolute; left:50%; top:38%; transform:translate(-50%,-50%) scale(.5); z-index:9; font-size:44px; color:#fff; opacity:0; transition:.35s; pointer-events:none;
  text-shadow:0 3px 0 #a01050, 0 0 14px #ff4f8f;}
.bt-banner.show{opacity:1; transform:translate(-50%,-50%) scale(1);}
.bt-banner.lose{text-shadow:0 3px 0 #303050, 0 0 14px #6060a0;} .bt-banner.flee{font-size:32px; text-shadow:0 3px 0 #305050, 0 0 14px #60a0a0;}
.bt-cmds{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.bt-keys{text-align:center;}
@media(max-width:520px){ .dpad{grid-template-columns:repeat(3,34px); grid-template-rows:repeat(3,30px);} .bt-cmds .pm-btn{padding:8px 12px; font-size:13px;} .dmg{font-size:22px;} }
/* 스프라이트 주인공·원이(생성 일러스트) */
.st-hero img.hero-sprite,.cg-hero img.hero-sprite{filter:drop-shadow(0 6px 6px rgba(0,0,0,.45));}
.ex-hero img.hero-sprite{filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));}
.dlg-portrait img,.msg .portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block;}
.msg .portrait img.npc-portrait,.dlg-portrait img.npc-portrait{background:linear-gradient(#3a1a2c,#12040a);}
.bt-root{grid-template-rows:minmax(0,1fr);}
.bt-side{min-height:0;}
.bt-fig{min-height:0; width:100%;}
.bt-fig img.hero-sprite,.prof-hero img.hero-sprite,.shop-hero img.hero-sprite,.inv-hero img.hero-sprite,.title-hero img.hero-sprite{max-height:100%; filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));}

/* ── 단계 6: 엔딩 시퀀스 + 엔딩 도감 */
.ending-card{width:min(760px,100%);}
.end-cg{transition:filter .5s;} .end-cg.dim{filter:brightness(.55) saturate(.8);}
.end-cg .cg-hero{animation:endHero .9s ease-out both;}
@keyframes endHero{from{opacity:0; transform:translate(-50%,-96%);} to{opacity:1; transform:translate(-50%,-100%);}}
.end-cap .etitle{animation:endTitle .8s ease-out both;}
@keyframes endTitle{from{opacity:0; letter-spacing:.4em;} to{opacity:1; letter-spacing:normal;}}
.end-panel{min-height:150px; display:flex; flex-direction:column; justify-content:center; animation:fadeUp .45s ease-out both;}
#ending[data-step] .end-panel{animation-name:fadeUp;}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.end-lead{color:#ffd0e8 !important; font-size:14px !important;}
.end-panel .epi{word-break:keep-all; font-size:15px !important; line-height:1.9; color:#fff2dc !important; max-width:600px;}
.tier{display:inline-block; margin:0 auto; padding:2px 14px; border-radius:12px; font-size:13px; font-weight:bold; border:1px solid var(--gold-dk);}
.tier.t0{background:#3a2030; color:#d8b8c8;} .tier.t1{background:#2f4a3a; color:#c8ffd8;} .tier.t2{background:linear-gradient(90deg,#ff6fb0,#ffcf6a); color:#3d0d1e; box-shadow:0 0 12px #ffcf6a;}
.ebond{font-size:17px !important; color:#ffd0e8; margin-bottom:4px;}
.care{color:#ffe8a8 !important; font-size:12px !important;}
.misses{border-top:1px dashed #6a3a50; margin-top:6px; padding-top:4px;}
.misses p{color:#d8b8c8 !important; font-size:12px !important; margin:3px auto !important; font-style:italic;}
.fairy-box{display:flex; gap:12px; align-items:center; text-align:left; background:#1e0812; border:1px solid var(--gold-dk); border-radius:6px; padding:10px 14px; max-width:600px; margin:0 auto;}
.fairy-box .fz{font-size:40px; filter:drop-shadow(0 0 8px #ffcf6a); animation:twinkle 1.6s ease-in-out infinite alternate;}
.fairy-box b{color:var(--gold-lt);} .fairy-box p{margin:4px 0 !important; font-size:14px !important;}
@keyframes twinkle{from{transform:scale(1);} to{transform:scale(1.12);}}
.roll-sec{margin:2px 0;} .roll-h{font-size:11px; color:#ffb0d0; letter-spacing:.1em;}
.roll-sec .fstats{margin:3px 0;} .fs.roll i{font-style:normal; margin-right:2px;} .fs.roll em{color:#ffb0d0; font-style:normal;}
.hidden-rev{animation:fadeUp .5s ease-out 1.1s both;} .hidden-rev .fs{border-color:var(--pink);}
.score-tbl{max-width:520px; margin:0 auto; width:100%;}
.sc-row{display:grid; grid-template-columns:90px 1fr 70px; gap:8px; align-items:baseline; padding:3px 6px; border-bottom:1px solid #4a1a30; font-size:13px; text-align:left; animation:fadeUp .4s ease-out both;}
.sc-row small{color:#c8a8b8; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .sc-row b{text-align:right; color:var(--gold-lt);}
.sc-total{font-size:15px; margin-top:6px; animation:fadeUp .4s ease-out both;} .sc-total b{font-size:26px; color:var(--gold-lt);}
.grade-stamp{animation:stamp .5s cubic-bezier(.3,1.6,.6,1) both;}
.end-panel.instant .sc-row,.end-panel.instant .sc-total,.end-panel.instant .grade-stamp{animation-delay:0s !important;}
@keyframes stamp{from{opacity:0; transform:scale(2.6) rotate(-12deg);} to{opacity:1; transform:none;}}
.grade-stamp.g-S{color:#ffe36a; text-shadow:0 0 18px #ff6fb0,0 0 6px #fff;} .grade-stamp.g-E{color:#9a8aa0; text-shadow:none;}
.end-dots{display:flex; gap:6px; justify-content:center; margin-top:6px;} .end-dots i{width:8px; height:8px; border-radius:50%; background:#4a1a30;} .end-dots i.on{background:var(--pink);}
.dex-reg{font-size:16px; color:var(--gold-lt);} .dex-reg b{font-size:22px;}
.dex-new{display:flex; flex-direction:column; gap:4px; margin:8px 0; font-size:14px;}
i.new{font-style:normal; background:#ff4f8f; color:#fff; padding:1px 6px; border-radius:3px; font-size:11px; animation:twinkle .7s ease-in-out infinite alternate; display:inline-block;}
.score-mini{font-size:13px;} .score-mini b{color:var(--gold-lt);}
.dex-box{width:min(900px,100%) !important;}
.dex-tabs{flex-wrap:wrap;} .dex-tabs .tab{flex:0 0 auto; padding:4px 8px; font-size:12px;}
.dex-bar{margin:4px 0 8px;}
.dex-grid{display:grid; gap:6px; grid-template-columns:repeat(auto-fill,minmax(122px,1fr));}
.dexc{width:100%; min-width:0; background:#1e0812; border:1px solid #5a2a40; border-radius:4px; padding:4px; display:flex; flex-direction:column; gap:2px; color:var(--parch); font-size:11px; text-align:center; cursor:pointer; font-family:inherit;}
.dexc:hover{border-color:var(--gold);} .dexc.on{border-color:var(--gold-dk);} .dexc.hl{box-shadow:0 0 0 2px var(--pink),0 0 12px var(--pink);}
.dthumb{width:100%; position:relative; aspect-ratio:16/9; border-radius:3px; overflow:hidden; background:#12040a; display:flex; align-items:center; justify-content:center;}
.dthumb .dic{font-size:26px;}
.dthumb.sil{background:radial-gradient(circle at 50% 40%,#3a1428,#12040a);}
.dthumb.sil .dic{color:#6a3a50; font-weight:bold;}
.sil-hero{position:absolute; left:50%; bottom:0; height:92%; transform:translateX(-50%); filter:brightness(0) opacity(.75); pointer-events:none;}
.sil-hero img,.sil-hero svg,.sil-hero canvas{height:100%; width:auto; display:block;}
.dname{font-weight:bold; min-height:2.4em; display:flex; align-items:center; justify-content:center; line-height:1.2;}
.dexc small{color:#e8c9a0; font-size:10px;} .dexc.lock .dname{color:#8a6a78;} .dhint{color:#a08890 !important; line-height:1.3;}
.dex-view{margin:6px 0;} .dex-hint{color:#e8c9a0; font-size:12px;} .dex-lock{color:#c8a8b8;}
@media (max-width:520px){ .dex-grid{grid-template-columns:repeat(2,1fr);} .sc-row{grid-template-columns:70px 1fr 56px;} .end-panel .epi{font-size:14px !important;} }
#ending[data-step="stats"] .end-cg,#ending[data-step="score"] .end-cg,#ending[data-step="fairy"] .end-cg{aspect-ratio:auto; height:clamp(90px,18vh,170px);}
#ending[data-step="stats"] .end-cg .cg-hero,#ending[data-step="score"] .end-cg .cg-hero,#ending[data-step="fairy"] .end-cg .cg-hero{animation:none;}
.misses p,.fairy-box p,.dex-hint,.dhint{word-break:keep-all;}
/* 단계 8: 업적 */
.ach-box{max-width:760px;}
.ach-bar{margin:4px 0 8px;}
.ach-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px; max-height:60vh; overflow:auto; padding-right:4px;}
.ach-card{display:flex; gap:8px; align-items:center; padding:6px 8px; border:1px solid rgba(255,210,120,.25); border-radius:6px; background:rgba(0,0,0,.25); opacity:.62;}
.ach-card.on{opacity:1; border-color:var(--gold); background:rgba(255,190,90,.12);}
.ach-ic{font-size:24px; width:32px; text-align:center;}
.ach-tx{display:flex; flex-direction:column; font-size:12px; line-height:1.3;}
.ach-tx small{opacity:.8;}
.ach-at{font-size:10px; color:var(--gold-lt);}
@media (max-width:420px){ .ach-grid{grid-template-columns:1fr;} }
.opt-body .opt{margin:6px 0; display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.opt-body input[type=range]{width:110px;}
body[data-font="s"] .dlg-text, body[data-font="s"] .m-body, body[data-font="s"] .side-msg{font-size:12px;}
body[data-font="l"] .dlg-text, body[data-font="l"] .m-body, body[data-font="l"] .side-msg{font-size:17px;}
/* 음성 대사(ui/voice.js) — 상점 첫 구매 한마디·엔딩 한마디 */
.shop-voice{margin-top:4px; color:var(--pink, #ff8fc0); font-weight:600; word-break:keep-all;}
.end-panel .end-voice{word-break:keep-all; font-size:14px; line-height:1.8; color:#ffd6ea; max-width:600px; margin-top:10px;}
.end-panel .end-voice b{color:#fff; margin-right:6px;}

/* ── 3D 그래픽(ui/g3): 탐험 디오라마·3D 배틀 ── */
.g3-host{position:absolute; inset:0; z-index:2; overflow:hidden; touch-action:manipulation; cursor:pointer;}
.g3-host.bt3{cursor:default;}
.g3-canvas{position:absolute; inset:0; width:100% !important; height:100% !important; display:block;}
.g3-ov{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:3;}
.g3-bill{position:absolute; left:0; top:0; width:auto; max-width:none; transform-origin:50% 100%; filter:drop-shadow(0 3px 3px rgba(0,0,0,.55)); will-change:transform;}
.g3-bill.card{border:2px solid var(--gold); border-radius:10px; background:rgba(26,6,16,.6); box-shadow:0 0 18px rgba(255,95,160,.55);}
.g3-mini{position:absolute; right:6px; top:6px; z-index:7; width:clamp(90px,19%,150px); height:auto; image-rendering:pixelated; border:1px solid var(--gold); border-radius:3px;
  background:rgba(26,6,16,.7); box-shadow:0 2px 6px rgba(0,0,0,.5); cursor:pointer; opacity:.92;}
.stage:has(.g3-host.ex3) .ex-hud{max-width:58%;}
.bt3-ui{position:absolute; left:0; right:0; top:6px; z-index:7; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; padding:0 8px; pointer-events:none; gap:6px;}
.bt3-side{display:flex; flex-direction:column; gap:2px;} .bt3-side.foe{align-items:flex-end;}
.bt3-side .bt-bars{width:min(220px,100%);}
.bt3-name{font-size:12px; color:var(--gold-lt); text-shadow:0 1px 0 #000, 0 0 6px rgba(0,0,0,.8);}
.bt3-vs{font-size:18px; color:var(--gold-lt); text-shadow:0 2px 0 #000; padding-top:10px;}
.stage:has(.bt3-ui) .bt-title{top:auto; bottom:calc(3.2em + 18px);}
@media(max-width:520px){
  .bt3-side .bt-bars{width:min(150px,100%); padding:2px 4px;} .bt3-side .exbar{font-size:10px; gap:3px;} .bt3-side .exbar .lab{width:24px;} .bt3-side .exbar .num{width:30px; font-size:10px;}
  .bt3-name{font-size:10px;} .bt3-vs{font-size:14px; padding-top:4px;}
  .stage:has(.g3-host.ex3) .ex-hud{font-size:10px; padding:2px 5px;} .stage:has(.g3-host.ex3) .tickbar i{width:4px; height:4px;}
}