/* 탈세 시뮬레이터 웹 HTS — 다크 전용 (HTS 관례). 상승 #f6465d / 하락 #4c8dff, 검증 통과 */
:root{
  --bg:#0b0e14; --surface:#10141c; --card:#151a24; --line:#1c2230;
  --ink:#e6e9ef; --ink2:#9aa3b2; --ink3:#5c6675;
  --up:#f6465d; --down:#4c8dff; --accent:#e8b33d;
  --topbar-h:calc(53px + env(safe-area-inset-top));
}
*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{background:var(--bg); color:var(--ink);
  font:14px/1.5 Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
#topbar{height:var(--topbar-h); flex:0 0 var(--topbar-h); display:flex; align-items:center; gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  background:var(--surface); border-bottom:1px solid var(--line)}
.brand{font-weight:800; font-size:16px}
.brand .yr{color:var(--accent)}
.spacer{flex:1}
.badge{padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600}
.badge.open{background:#12351f; color:#4ade80}
.badge.closed{background:#252a35; color:var(--ink2)}
.badge.tier{background:#2a2331; color:#c4a7e7}
.btn{border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:6px 12px; border-radius:8px; cursor:pointer}
.btn.primary{background:var(--accent); border:none; color:#1a1508; font-weight:700}
.btn.ghost:hover{border-color:var(--ink3)}

#layout{display:grid; grid-template-columns:270px 1fr 300px; gap:1px;
  background:var(--line); height:calc(100vh - var(--topbar-h));
  height:calc(100dvh - var(--topbar-h))}
#listPane,#chartPane,#orderPane{background:var(--bg); overflow-y:auto}

.paneHead{display:flex; gap:8px; padding:10px; position:sticky; top:0; background:var(--bg); z-index:2}
.paneHead input,.paneHead select{background:var(--card); border:1px solid var(--line);
  color:var(--ink); border-radius:8px; padding:7px 10px}
.paneHead input{flex:1; min-width:0}
#stockList{list-style:none}
#stockList li{display:flex; justify-content:space-between; gap:8px; padding:9px 12px;
  cursor:pointer; border-left:2px solid transparent}
#stockList li:hover{background:var(--surface)}
#stockList li.sel{background:var(--surface); border-left-color:var(--accent)}
#stockList .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#stockList .sec{color:var(--ink3); font-size:11px}
#stockList .px{text-align:right; font-variant-numeric:tabular-nums}
.chg{font-size:12px; font-variant-numeric:tabular-nums}
.chg.up{color:var(--up)} .chg.down{color:var(--down)} .chg.flat{color:var(--ink2)}

#stockHead{display:flex; align-items:baseline; gap:12px; padding:12px 16px 6px}
#shName{font-size:18px; font-weight:800}
#shPrice{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}
#shSub{margin-left:auto}
.tfBtns{display:flex; gap:4px; margin-left:10px}
.tf{padding:3px 10px; border-radius:6px; border:1px solid var(--line); background:var(--card);
  color:var(--ink2); cursor:pointer; font-size:12px}
.tf.on{background:#2a2331; border-color:#8b6fc0; color:#c4a7e7; font-weight:700}
.sub{color:var(--ink2); font-size:12px}
#chartWrap{position:relative; height:calc(100% - 60px); min-height:320px; padding:0 8px 8px}
#chart{width:100%; height:100%; display:block}
.tooltip{position:absolute; pointer-events:none; background:#1b2230ee; border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; font-size:12px; color:var(--ink);
  font-variant-numeric:tabular-nums; z-index:5; white-space:nowrap}
.tooltip b{font-weight:700}

#orderPane{padding:10px; display:flex; flex-direction:column; gap:10px}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px}
.cardTitle{font-weight:700; margin-bottom:8px}
.sideTabs{display:flex; gap:6px; margin-bottom:10px}
.side{flex:1; padding:8px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink2); font-weight:700; cursor:pointer}
.side.buy.on{background:#3a1520; border-color:var(--up); color:var(--up)}
.side.sell.on{background:#12233f; border-color:var(--down); color:var(--down)}
.fld{display:block; color:var(--ink2); font-size:12px; margin-bottom:6px}
.fld input{width:100%; margin-top:4px; background:var(--surface); border:1px solid var(--line);
  color:var(--ink); border-radius:8px; padding:8px; font-size:15px; font-variant-numeric:tabular-nums}
.qtyBtns{display:flex; gap:6px; margin-bottom:10px}
.qtyBtns button{flex:1; padding:5px; background:var(--surface); border:1px solid var(--line);
  color:var(--ink2); border-radius:6px; cursor:pointer}
.est{border-top:1px dashed var(--line); padding-top:8px; margin-bottom:10px; font-size:13px}
.est>div{display:flex; justify-content:space-between; padding:2px 0}
.est span{color:var(--ink2)} .est b{font-variant-numeric:tabular-nums}
.est .tot b{color:var(--accent); font-size:15px}
.orderBtn{width:100%; padding:11px; border:none; border-radius:10px; font-size:15px;
  font-weight:800; cursor:pointer; color:#fff}
.orderBtn.buy{background:var(--up)} .orderBtn.sell{background:var(--down)}
.orderBtn:disabled{background:#2a3040; color:var(--ink3); cursor:not-allowed}
.note{margin-top:8px; font-size:12px; color:var(--ink2); min-height:16px}
.acct{display:flex; justify-content:space-between; padding:3px 0}
.acct span{color:var(--ink2)} .acct b{font-variant-numeric:tabular-nums}
#holdings{list-style:none; margin-top:8px; border-top:1px dashed var(--line); padding-top:6px}
#holdings li{display:flex; justify-content:space-between; font-size:13px; padding:3px 0;
  font-variant-numeric:tabular-nums}
#holdings .hn{color:var(--ink)}
#holdings .hv{text-align:right}
#tradeHistory{list-style:none; font-size:12px; font-variant-numeric:tabular-nums}
#tradeHistory li{display:flex; justify-content:space-between; padding:2px 0; color:var(--ink2)}
#tradeHistory .buy{color:var(--up)} #tradeHistory .sell{color:var(--down)}

.modal{position:fixed; inset:0; background:#000a; display:flex; align-items:center;
  justify-content:center; z-index:50}
.modalBox{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:22px; width:320px}
.modalBox h3{margin-bottom:6px}
.modalBox input{width:100%; margin:12px 0; padding:12px; font-size:22px; text-align:center;
  letter-spacing:8px; background:var(--surface); border:1px solid var(--line);
  color:var(--ink); border-radius:10px}
.modalBtns{display:flex; gap:8px}
.modalBtns .btn{flex:1; padding:10px}
.err{color:var(--up); font-size:12px; margin-top:8px; min-height:16px}
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#1b2230; border:1px solid var(--line); padding:10px 18px; border-radius:10px;
  z-index:60; font-size:13px}
.userbox .uname{color:var(--accent); font-weight:700}

@media (max-width: 980px){
  #layout{grid-template-columns:1fr; height:auto}
  #chartWrap{height:46vh}
  #listPane{max-height:38vh}
}

/* 호가창 — ±10호가, 잔량 막대. 상승색=매수(빨강)/하락색=매도(파랑) 관례 유지 */
#obRows{font-variant-numeric:tabular-nums; font-size:12px}
.obRow{position:relative; display:flex; justify-content:space-between;
  padding:2px 6px; overflow:hidden; border-radius:4px}
.obRow .obBar{position:absolute; right:0; top:0; bottom:0; opacity:.14; border-radius:4px}
.obRow.ask .obBar{background:var(--down)} .obRow.bid .obBar{background:var(--up)}
.obRow.ask .obP{color:var(--down)} .obRow.bid .obP{color:var(--up)}
.obRow .obP,.obRow .obQ{position:relative}
.obRow .obQ{color:var(--ink2)}
.obNow{text-align:center; font-weight:800; padding:4px 0; margin:2px 0;
  border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); color:var(--accent)}

/* 가입(초대 코드) 모드 — 6자리 코드용 대문자 스타일 해제 */
#regFields input{font-size:15px; letter-spacing:normal; text-align:left;
  margin:6px 0; padding:10px}
.authAlt{margin-top:10px; text-align:center}
.authAlt a{color:var(--accent); text-decoration:none}

/* 서비스 메뉴 드로어 (#98 해금 상점) — 우측에서 슬라이드 */
#menuBtn{white-space:nowrap}
#menuOverlay{position:fixed; inset:0; background:#0009; z-index:39}
#menuDrawer{position:fixed; top:0; right:0; bottom:0; width:min(320px, 88vw);
  background:var(--card); border-left:1px solid var(--line); z-index:40;
  transform:translateX(105%); transition:transform .25s ease; display:flex; flex-direction:column}
#menuDrawer.open{transform:translateX(0)}
.drawerHead{display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--line); font-weight:800; font-size:16px}
#serviceList{list-style:none; flex:1; overflow-y:auto; padding:8px}
#serviceList li{display:flex; align-items:center; gap:12px; padding:13px 12px;
  border-radius:10px; cursor:pointer; border:1px solid transparent}
#serviceList li:hover{background:var(--surface)}
#serviceList li.active{background:var(--surface); border-color:var(--accent)}
#serviceList .svcIcon{font-size:20px; width:26px; text-align:center}
#serviceList .svcBody{flex:1; min-width:0}
#serviceList .svcName{font-weight:700}
#serviceList .svcDesc{font-size:11px; color:var(--ink3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
#serviceList .svcRight{text-align:right; font-size:12px; white-space:nowrap}
#serviceList li.locked{opacity:.75}
#serviceList li.locked .svcName::after{content:" 🔒"}
#serviceList .svcPriceTag{color:var(--accent); font-variant-numeric:tabular-nums}
#serviceList .svcSoon{display:inline-block; margin-top:2px; padding:1px 6px;
  border-radius:999px; background:#252a35; color:var(--ink2); font-size:10px}
.drawerNote{padding:12px 16px; border-top:1px solid var(--line)}

/* 서비스 패널 (지도 등) — 주식 레이아웃 대신 표시 */
#featurePanel{height:calc(100vh - var(--topbar-h));height:calc(100dvh - var(--topbar-h))}
.svcPanel{height:100%}
.estateMapShell{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
#mapFrame{width:100%; height:100%; border:0; display:block; background:#000}
.estateDock{position:absolute;z-index:2;top:14px;right:14px;bottom:14px;width:min(390px,38vw);
  display:flex;flex-direction:column;padding:15px;border:1px solid #ffffff20;border-radius:13px;
  background:#0d1119ee;box-shadow:0 18px 50px #0009;backdrop-filter:blur(12px)}
.estateDockHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.estateDockHead h2{margin:1px 0 0;font-size:21px}.estateEyebrow{color:#d8b24e;font-size:9px;
  font-weight:900;letter-spacing:.15em}.estateDock>.sub{margin:7px 0 11px;line-height:1.45}
.estateTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:9px;
  background:#090c12}.estateTabs button{min-height:34px;border:0;border-radius:7px;background:transparent;
  color:var(--ink3);font-size:11px;font-weight:800;cursor:pointer}.estateTabs button.on{
  background:#252d3a;color:#fff;box-shadow:0 3px 10px #0006}
.estateList{flex:1;min-height:0;overflow-y:auto;list-style:none;margin-top:9px;padding-right:3px}
.estateList li{display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:10px 2px;
  border-bottom:1px solid var(--line)}.estateList .estateMain{min-width:0}.estateList b{font-size:13px}
.estateList small{display:block;margin-top:3px;color:var(--ink3);font-size:10px}
.estateList .estatePrice{text-align:right;font-size:12px;font-variant-numeric:tabular-nums}
.estateList button{grid-column:2;min-width:72px;padding:5px 8px;border:1px solid #47546a;
  border-radius:7px;background:#1a2230;color:#e8edf5;font-size:10px;font-weight:800;cursor:pointer}
.estateList button:disabled{opacity:.48;cursor:not-allowed}.estateSellForm{margin-top:9px;padding:10px;
  border:1px solid #3e4b61;border-radius:9px;background:#121823}.estateSellForm>span{display:block;
  margin-bottom:7px;color:var(--ink2);font-size:11px}.estateSellForm input{width:100%;height:38px;
  padding:0 10px;border:1px solid var(--line);border-radius:7px;background:#0b0f16;color:var(--ink)}
.estateSellForm>div{display:flex;gap:6px;margin-top:7px}.estateSellForm .btn{flex:1}.estateDock .note{
  min-height:18px;margin-top:7px;font-size:11px}
@media (max-width:780px){.estateDock{top:auto;left:8px;right:8px;bottom:8px;width:auto;
  height:min(48vh,430px);padding:12px}.estateDockHead h2{font-size:18px}}
body.mobile-view .estateDock{top:auto;left:6px;right:6px;bottom:6px;width:auto;
  height:min(50vh,420px);padding:11px}
.placeholderBox{height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; text-align:center; padding:20px}
.phIcon{font-size:52px}
.unlockPrice{font-size:26px; font-weight:800; color:var(--accent); text-align:center;
  margin:14px 0; font-variant-numeric:tabular-nums}

/* 카지노 · 광물거래소 패널 */
.svcScroll{height:100%; overflow-y:auto; padding:14px}
.panelGrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:1100px; margin:0 auto}
.panelGrid.three{grid-template-columns:260px 1fr 320px; max-width:1200px}
@media (max-width: 980px){
  .panelGrid, .panelGrid.three{grid-template-columns:1fr}
}
body.mobile-view .panelGrid, body.mobile-view .panelGrid.three{grid-template-columns:1fr}
.hashCode{font-size:10px; word-break:break-all; color:var(--ink3)}
.dicePicks{display:flex; gap:6px; margin:10px 0}
.dicePicks button{flex:1; font-size:26px; padding:6px 0; background:var(--surface);
  border:1px solid var(--line); border-radius:8px; color:var(--ink2); cursor:pointer}
.dicePicks button.on{background:#2a2331; border-color:#8b6fc0; color:#fff}
.resultBox{margin-top:12px; padding:12px; border-radius:10px; background:var(--surface);
  border:1px solid var(--line); font-size:13px}
.resultBox .big{font-size:22px; font-weight:800}
.resultBox .winTxt{color:var(--up)} .resultBox .loseTxt{color:var(--ink2)}
#duelList{list-style:none}
#duelList li{display:flex; align-items:center; gap:10px; padding:8px 6px;
  border-bottom:1px dashed var(--line); font-size:13px}
#duelList .dName{font-weight:700}
#duelList .dPick{padding:1px 8px; border-radius:999px; font-size:11px; background:#2a2331}
#duelList .dStake{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--accent)}
#duelList button{padding:4px 12px; border-radius:6px; border:none; cursor:pointer;
  font-weight:700; background:var(--up); color:#fff}
#duelList button.cancelBtn{background:var(--card); color:var(--ink2); border:1px solid var(--line)}
#mineralList{list-style:none}
#mineralList li{display:flex; justify-content:space-between; padding:9px 10px;
  cursor:pointer; border-left:2px solid transparent; border-radius:6px}
#mineralList li:hover{background:var(--surface)}
#mineralList li.sel{background:var(--surface); border-left-color:var(--accent)}
#mineralList .mnPx{text-align:right; font-variant-numeric:tabular-nums}
#mineralList .mnNpc{font-size:11px; color:var(--ink3)}
#mineralList .mnCirculation{font-size:10px; color:var(--ink3); margin-top:2px}
.mnList{list-style:none; font-size:13px; font-variant-numeric:tabular-nums}
.mnList li{display:flex; justify-content:space-between; gap:8px; padding:4px 0;
  border-bottom:1px dashed var(--line); align-items:center}
.mnList .cxlBtn{padding:2px 8px; font-size:11px; border-radius:6px; cursor:pointer;
  background:var(--card); color:var(--ink2); border:1px solid var(--line)}
.mnFeedTitle{margin-top:16px}
.mnFeed{max-height:230px; overflow:auto}
.mnFeedName{color:var(--ink2)}
.mnBuckets{text-align:right; font-size:12px}
.obRow.npc{outline:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.obNpcGroupLabel{margin:3px 0 2px; padding:3px 6px; color:var(--accent);
  font-size:10px; font-weight:800; letter-spacing:.02em;
  border-bottom:1px dashed color-mix(in srgb,var(--accent) 32%,transparent)}
.npcBadge{font-size:9px; padding:1px 4px; border-radius:999px;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}

/* 디제시스 레이아웃(#88): 야생·미접속에서 노트북이 없으면 — 폰으로 보는 중이니까
   창이 아무리 넓어도 모바일 MTS 폭으로 강제. 노트북(300만원)이 이걸 푼다 */
body.mobile-view #layout{grid-template-columns:1fr; height:auto;
  max-width:430px; margin:0 auto; border-left:1px solid var(--line);
  border-right:1px solid var(--line)}
body.mobile-view #chartWrap{height:44vh}
body.mobile-view #listPane{max-height:34vh}
body.mobile-view #topbar{max-width:430px; margin:0 auto}

/* 카지노 확장 — 로비는 선택에 집중하고 게임 화면은 하나의 작업면만 유지한다 */
.casinoShell{height:100%; min-height:0;
  display:flex; flex-direction:column; overflow:hidden; background:
  radial-gradient(circle at 76% -20%,#33250f55 0,transparent 36%),var(--bg)}
.casinoHeader{height:62px; flex:0 0 62px; display:flex; align-items:center; gap:16px;
  padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));
  border-bottom:1px solid #2a2418;
  background:#0f1117e8; backdrop-filter:blur(12px)}
.casinoBack{min-height:44px; padding:0 12px; border:0; border-radius:8px;
  background:transparent; color:var(--ink2); cursor:pointer; font-weight:700}
.casinoBack:hover{background:#1b1a17; color:var(--ink)}
.casinoHeading{display:flex; flex-direction:column; min-width:0}
.casinoHeading strong{font-size:17px}.casinoHeading .sub{white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.casinoBalance{margin-left:auto; text-align:right; display:flex; flex-direction:column}
.casinoBalance span{font-size:10px; color:var(--ink3); letter-spacing:.08em; text-transform:uppercase}
.casinoBalance b{font-size:17px; color:#f1c75b; font-variant-numeric:tabular-nums}
.casinoTabs{height:48px; flex:0 0 48px; display:flex; gap:3px;
  padding:3px max(18px,env(safe-area-inset-right)) 3px max(18px,env(safe-area-inset-left));
  overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); background:#0d1016}
.casinoTabs::-webkit-scrollbar{display:none}
.casinoTabs button{min-width:max-content; min-height:42px; padding:0 15px; border:0;
  border-bottom:2px solid transparent; background:transparent; color:var(--ink3);
  font-weight:700; cursor:pointer}
.casinoTabs button:hover{color:var(--ink)}
.casinoTabs button.on{color:#f1c75b; border-bottom-color:#e8b33d}
.casinoTabs button:disabled{opacity:.38; cursor:not-allowed}
.casinoViewport{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(20px,4vw,46px) max(18px,env(safe-area-inset-right))
    clamp(20px,4vw,46px) max(18px,env(safe-area-inset-left));
  padding-bottom:calc(30px + env(safe-area-inset-bottom)); scroll-padding-bottom:90px}
.casinoView{width:min(100%,980px); margin:0 auto}
.casinoIntro{display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  padding:4px 2px 24px; border-bottom:1px solid #2a2418}
.casinoEyebrow{display:block; margin-bottom:7px; color:#d3a842; font-size:10px;
  font-weight:800; letter-spacing:.16em}
.casinoIntro h2,.gameSurfaceHead h2{font-size:clamp(24px,3vw,38px); line-height:1.12;
  letter-spacing:-.035em}
.casinoIntro p{margin-top:10px; max-width:580px; color:var(--ink2)}
.casinoLiveMark{display:flex; align-items:center; gap:7px; white-space:nowrap;
  color:var(--ink2); font-size:12px}
.casinoLiveMark span{width:7px; height:7px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 4px #4ade8020}
.casinoGameCards{display:flex; flex-direction:column; margin-top:6px}
.casinoGameCard{position:relative; width:100%; min-height:92px; display:grid;
  grid-template-columns:64px minmax(0,1fr) auto 76px; align-items:center; gap:16px;
  padding:14px 10px; border:0; border-bottom:1px solid var(--line); text-align:left;
  background:transparent; color:var(--ink); cursor:pointer; transition:background .16s ease,
  transform .16s ease}
.casinoGameCard:hover{background:#171711; transform:translateX(3px)}
.casinoGameCard[aria-disabled="true"]{cursor:default}
.casinoGameCard[aria-disabled="true"]:hover{transform:none; background:#12141a}
.gameGlyph{width:54px; height:54px; display:grid; place-items:center; border:1px solid #3a321d;
  border-radius:50%; color:#f1c75b; background:#1c1910; font-size:22px; font-weight:900}
.gameMeta{min-width:0; display:flex; flex-direction:column}.gameMeta b{font-size:17px}
.gameMeta small{margin-top:3px; color:var(--ink2); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.gameReward{color:#f1c75b; font-size:17px; font-weight:850; font-variant-numeric:tabular-nums}
.gameState{justify-self:end; padding:4px 9px; border-radius:999px; background:#252830;
  color:var(--ink2); font-size:11px; font-weight:800}
.gameState.ready{background:#33260f; color:#f1c75b}
.legacyDiceLink{width:100%; min-height:48px; margin-top:18px; display:flex;
  justify-content:space-between; align-items:center; gap:10px; padding:0 14px;
  border:1px dashed #3a321d; border-radius:9px; background:transparent; color:var(--ink2);
  cursor:pointer}.legacyDiceLink span{color:#d3a842;font-weight:700}
.casinoLobbyFoot{display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; padding-top:18px;
  border-top:1px solid var(--line); color:var(--ink3); font-size:12px}
.casinoLobbyFoot b{margin-left:5px; color:var(--ink2); font-variant-numeric:tabular-nums}
.casinoGameSurface{width:min(100%,960px); margin:0 auto}
.gameSurfaceHead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding-bottom:22px; border-bottom:1px solid #2a2418}
.gameSurfaceHead p{max-width:420px; color:var(--ink2); text-align:right}
.duelWorkspace{display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:34px;
  padding-top:26px}.duelBoard{min-width:0}.duelBoard .cardTitle{font-size:15px}
.legacyDiceSurface{max-width:620px}.legacyDiceSurface>.sub{display:block;margin-top:16px}
.legacyDiceSurface>.fld{margin-top:18px}

/* S1 광물 슬롯 — 결과는 서버 상태로 고정하고 transform 연출만 브라우저가 그린다 */
.slotSurface{max-width:820px;padding-bottom:10px}
.slotSurfaceHead{align-items:center}
.slotStatus{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:20px;padding:10px 14px;border:1px solid #302919;border-radius:9px;
  background:#15140f;color:var(--ink2);font-size:13px}
.slotStatus b{color:#f1c75b;font-variant-numeric:tabular-nums;white-space:nowrap}
.slotMachine{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-top:14px;padding:clamp(14px,3vw,24px);overflow:hidden;border:1px solid #40351d;
  border-radius:18px;background:linear-gradient(145deg,#201b10,#111319 48%,#18150e);
  box-shadow:inset 0 1px #ffffff0b,0 18px 50px #0005;isolation:isolate}
.slotMachine::before,.slotMachine::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.slotMachine::before{inset:0;background:linear-gradient(90deg,transparent,#e8b33d0a,transparent)}
.slotMachine::after{left:4%;right:4%;top:50%;height:1px;background:#e8b33d26;box-shadow:0 -52px #e8b33d12,0 52px #e8b33d12}
.slotReel{min-width:0;min-height:190px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;border:1px solid #3a3e48;border-radius:13px;
  background:linear-gradient(180deg,#22262e,#11141a);box-shadow:inset 0 14px 30px #fff2,
  inset 0 -18px 32px #0006;transform:translateZ(0);will-change:transform}
.slotReelGlyph{width:88px;height:88px;display:grid;place-items:center;border-radius:50%;
  border:1px solid #ffffff17;background:#0d0f14;color:#9aa3b2;font-size:58px;font-weight:900;
  line-height:1;filter:drop-shadow(0 8px 15px #0007);transform:translateZ(0)}
.slotReelLabel{min-height:20px;color:var(--ink2);font-size:13px;font-weight:800;letter-spacing:.02em}
.slotReel.spinning{border-color:#776027;box-shadow:inset 0 14px 30px #fff2,inset 0 -18px 32px #0006,
  0 0 0 1px #e8b33d1c}
.slotReel.spinning .slotReelGlyph{animation:slot-reel-pulse .28s linear infinite}
.slotReel.waiting{border-style:dashed}.slotReel.waiting .slotReelGlyph{color:#f1c75b}
.slotReel.fixed{border-color:#4b432d}.slotReel.fixed .slotReelGlyph{animation:slot-lock .24s ease-out}
.slotReel.symbol-coal .slotReelGlyph{color:#777e89;background:#11151b}
.slotReel.symbol-iron .slotReelGlyph{color:#d2d6dc;background:#20242b}
.slotReel.symbol-gold .slotReelGlyph{color:#f1c75b;background:#30260e}
.slotReel.symbol-emerald .slotReelGlyph{color:#55d990;background:#10271c}
.slotReel.symbol-diamond .slotReelGlyph{color:#8ce7f4;background:#10272b}
.slotReel.symbol-netherite .slotReelGlyph{color:#d7a5ec;background:#281a2d}
@keyframes slot-reel-pulse{0%{transform:translate3d(0,-7px,0);filter:blur(.7px)}
  50%{transform:translate3d(0,7px,0);filter:blur(.2px)}100%{transform:translate3d(0,-7px,0);filter:blur(.7px)}}
@keyframes slot-lock{0%{transform:scale(.82)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.slotResult{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;
  padding:14px 16px;border-left:3px solid #e8b33d;border-radius:8px;background:#211b0d}
.slotResult strong{font-size:18px;color:#f1c75b}.slotResult span{font-weight:800;
  font-variant-numeric:tabular-nums}
.slotRewardList{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:16px;
  overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--line)}
.slotRewardList span{display:flex;flex-direction:column;gap:3px;padding:10px;background:#151821;
  color:#f1c75b;font-variant-numeric:tabular-nums}
.slotRewardList b{color:var(--ink2);font-size:11px;font-weight:700}
.slotFairness{margin-top:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.slotFairness summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--ink2);
  font-size:13px;font-weight:700}.slotFairness summary::marker{color:#d3a842}
.slotFairness dl{padding:0 0 12px}.slotFairness dl>div{display:grid;grid-template-columns:120px 1fr;
  gap:12px;padding:5px 0}.slotFairness dt{color:var(--ink3);font-size:12px}
.slotFairness dd{min-width:0;margin:0}.slotFairness code{display:block;overflow-wrap:anywhere}
.slotHistoryBar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.slotHistoryBar .btn{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  background:transparent;color:var(--ink2);cursor:pointer}
.slotHistory{list-style:none;margin-top:8px;border-top:1px solid var(--line)}
.slotHistory li{min-height:48px;display:flex;align-items:center;gap:12px;padding:8px 4px;
  border-bottom:1px dashed var(--line);font-size:13px}.slotHistory li>b{margin-left:auto;color:#f1c75b;
  font-variant-numeric:tabular-nums}.slotHistory li>button{min-width:52px;min-height:44px;border:1px solid #4b432d;
  border-radius:7px;background:#211b0d;color:#f1c75b;cursor:pointer}
.slotBetDock{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(160px,1fr) 1.2fr;gap:10px 16px;margin:22px -2px 0;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));border:1px solid #40351d;
  border-radius:13px;background:#11141af2;box-shadow:0 12px 34px #0004}
.slotBetDock .fld{margin:0}.slotBetDock .fld input{min-height:44px}
.slotBetQuick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-self:end}
.slotBetQuick button{min-height:44px;border:1px solid var(--line);border-radius:8px;background:#191d26;
  color:var(--ink2);cursor:pointer}.slotBetQuick button:hover{border-color:#776027;color:#f1c75b}
.slotBetSummary{grid-column:1/-1;display:flex;justify-content:space-between;gap:14px;padding-top:8px;
  border-top:1px dashed var(--line);color:var(--ink2);font-size:12px}
.slotBetSummary b{margin-left:5px;color:var(--ink);font-variant-numeric:tabular-nums}
.slotBetDock>.orderBtn,.slotBetDock>.note{grid-column:1/-1}.slotBetDock>.note{margin-top:-3px}

/* S2 공동 룰렛 — 바퀴를 중심에 두고 다중 베팅은 한 번에 원자 제출한다 */
.rouletteSurface{max-width:1020px;padding-bottom:16px}
.rouletteSurfaceHead{align-items:center}
.rouletteStatus{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:20px;padding:10px 14px;border:1px solid #352c19;border-radius:9px;
  background:#15140f;color:var(--ink2);font-size:13px}
.rouletteStatus b{color:#f1c75b;font-variant-numeric:tabular-nums;white-space:nowrap}
.rouletteWorkspace{display:grid;grid-template-columns:minmax(360px,1.25fr) minmax(286px,340px);
  align-items:start;gap:clamp(22px,4vw,44px);margin-top:18px}
.rouletteWheelColumn{min-width:0}
.rouletteWheelStage{position:relative;width:min(100%,590px);aspect-ratio:1;margin:0 auto;
  padding:clamp(12px,2.5vw,22px);isolation:isolate}
.rouletteWheelStage::before{content:"";position:absolute;inset:3.4%;z-index:-1;border-radius:50%;
  border:1px solid #58451d;background:radial-gradient(circle,#17191f 0 28%,#0c0e13 29% 53%,
    #2b220f 54% 56%,#0c0e13 57%);box-shadow:0 24px 70px #0009,inset 0 0 45px #e8b33d12}
#rouletteCanvas{width:100%;height:100%;display:block;filter:drop-shadow(0 15px 25px #0008);
  transform:translateZ(0)}
.roulettePointer{position:absolute;z-index:4;left:50%;top:0;
  transform:translateX(-50%) rotate(var(--roulette-pointer-flex,0deg));transform-origin:50% 0;
  width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;
  border-top:32px solid #f1c75b;filter:drop-shadow(0 3px 2px #0009)}
.roulettePointer::after{content:"";position:absolute;left:-5px;top:-31px;width:10px;height:10px;
  border-radius:50%;background:#fff1b8}
.rouletteHub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:29%;aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:50%;
  border:1px solid #51482f;background:radial-gradient(circle at 42% 34%,#272a32,#111318 68%);
  box-shadow:0 8px 25px #000a,inset 0 1px #ffffff17;pointer-events:none;text-align:center}
.rouletteHub span{color:var(--ink3);font-size:9px;font-weight:800;letter-spacing:.08em}
.rouletteHub b{max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#f1c75b;font-size:clamp(11px,2vw,16px)}
.rouletteResult{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:4px;
  padding:14px 16px;border-left:3px solid #e8b33d;border-radius:8px;background:#211b0d}
.rouletteResult>div{display:flex;align-items:center;gap:10px}.rouletteResult span{color:var(--ink2);
  font-size:12px}.rouletteResult strong{font-size:28px;color:#f1c75b;line-height:1}
.rouletteResult p{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.rouletteRewardStrip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:14px;
  overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--line)}
.rouletteRewardStrip span{--roulette-color:#f1c75b;display:flex;align-items:center;justify-content:center;
  gap:7px;min-height:48px;padding:7px 5px;background:#151821;color:var(--roulette-color)}
.rouletteRewardStrip b{font-size:19px}.rouletteRewardStrip small{font-size:10px;color:var(--ink2);
  white-space:nowrap}
.target-1{--roulette-color:#f2dc66}.target-3{--roulette-color:#55c872}
.target-5{--roulette-color:#5e9ee8}.target-10{--roulette-color:#c37ad3}
.target-20{--roulette-color:#ee7651}
.rouletteRecentBlock{margin-top:17px;padding-top:13px;border-top:1px solid var(--line)}
.rouletteSectionTitle{display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--ink2);font-size:12px;font-weight:800}
.rouletteSectionTitle .btn{min-height:44px;padding:7px 11px;background:transparent}
.rouletteHistory{list-style:none;display:flex;gap:8px;margin-top:8px;overflow-x:auto;
  padding:2px 1px 7px;scrollbar-width:thin}
.rouletteHistory li{flex:0 0 auto;min-width:48px;min-height:48px;display:flex;align-items:center;
  justify-content:center;gap:5px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;
  background:#151821;color:var(--roulette-color,var(--ink2));font-weight:900;
  font-variant-numeric:tabular-nums}
.rouletteHistory li small{color:var(--ink3);font-size:9px;font-weight:700}
.rouletteHistory li.sub{min-width:190px;border-radius:8px;font-weight:500}
.rouletteBetPanel{position:sticky;top:0;align-self:start;padding:18px;border:1px solid #352d1d;
  border-radius:14px;background:#11141ae8;box-shadow:0 16px 45px #0005;backdrop-filter:blur(12px)}
.rouletteBetHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rouletteBetHead h3{font-size:19px}.rouletteBetHead .casinoEyebrow{margin-bottom:2px}
.rouletteBetHead .btn{min-height:44px;background:transparent}.rouletteBetPanel>.sub{display:block;margin-top:5px}
.rouletteBetGrid{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--line)}
.rouletteBetRow{--roulette-color:#f1c75b;min-height:58px;display:grid;
  grid-template-columns:82px minmax(0,1fr);align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.rouletteTarget{display:flex;align-items:baseline;gap:7px;color:var(--roulette-color)}
.rouletteTarget b{font-size:21px}.rouletteTarget small{color:var(--ink2);font-size:10px;white-space:nowrap}
.rouletteBetRow input{width:100%;min-height:44px;padding:9px 10px;border:1px solid var(--line);
  border-radius:8px;background:#0d1016;color:var(--ink);font-size:15px;text-align:right;
  font-variant-numeric:tabular-nums}
.rouletteBetRow input:focus{outline:2px solid color-mix(in srgb,var(--roulette-color) 55%,transparent);
  outline-offset:1px;border-color:var(--roulette-color)}
.rouletteBetRow input:disabled{opacity:.52;cursor:not-allowed}
.rouletteAccepted{margin-top:13px;padding:11px 0;border-top:1px dashed #343947;
  border-bottom:1px dashed #343947;color:var(--ink2);font-size:12px}
.rouletteAccepted>span{display:inline-block}.rouletteAccepted>b{float:right;color:var(--ink);
  font-variant-numeric:tabular-nums}
.rouletteAcceptedBreakdown{clear:both;display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.rouletteAcceptedBreakdown span{padding:3px 7px;border-radius:999px;background:#1c2029;
  color:var(--ink3);font-size:10px;font-variant-numeric:tabular-nums}
.rouletteSubmitBar{margin-top:13px}.rouletteBetSummary{display:flex;justify-content:space-between;
  gap:10px;margin-bottom:9px;color:var(--ink2);font-size:11px}
.rouletteBetSummary b{display:block;margin-top:2px;color:var(--ink);font-size:14px;
  font-variant-numeric:tabular-nums}.rouletteSubmitBar .orderBtn{min-height:48px}
.rouletteSubmitBar .note{margin-bottom:0}
.rouletteFairness{margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rouletteFairness summary{min-height:44px;display:flex;align-items:center;cursor:pointer;
  color:var(--ink2);font-size:13px;font-weight:700}.rouletteFairness summary::marker{color:#d3a842}
.rouletteFairness dl{padding:0 0 12px}.rouletteFairness dl>div{display:grid;
  grid-template-columns:120px 1fr;gap:12px;padding:5px 0}.rouletteFairness dt{color:var(--ink3);
  font-size:12px}.rouletteFairness dd{min-width:0;margin:0}.rouletteFairness code{display:block;
  overflow-wrap:anywhere}

/* S3 블랙잭 — 한 장씩 읽히는 테이블과 행동 버튼만 남긴 단일 핸드 화면 */
.blackjackSurface{max-width:920px;padding-bottom:18px}
.blackjackSurfaceHead{align-items:center}.blackjackStatus{min-height:44px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:10px 14px;
  border:1px solid #29453b;border-radius:9px;background:#101b17;color:var(--ink2);font-size:13px}
.blackjackStatus b{color:#70d5a8;font-variant-numeric:tabular-nums;white-space:nowrap}
.blackjackTable{position:relative;min-height:440px;margin-top:16px;padding:28px clamp(16px,5vw,54px);
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  border:1px solid #36584b;border-radius:44px 44px 16px 16px;
  background:radial-gradient(ellipse at 50% 47%,#173d31 0,#102d25 48%,#092019 100%);
  box-shadow:inset 0 0 0 6px #071914,inset 0 0 70px #0007,0 20px 55px #0007}
.blackjackTable::before{content:"";position:absolute;inset:14px;border:1px solid #83c7a52b;
  border-radius:34px 34px 10px 10px;pointer-events:none}
.blackjackSeat{position:relative;z-index:2;min-height:146px}.blackjackSeatHead{display:flex;
  align-items:center;justify-content:space-between;gap:12px;color:#b7dacb;font-size:11px;
  font-weight:900;letter-spacing:.12em}.blackjackSeatHead b{min-width:44px;padding:4px 8px;
  border:1px solid #ffffff20;border-radius:999px;background:#071712b8;color:#e7f4ed;
  text-align:center;font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums}
.blackjackCards{display:flex;align-items:center;justify-content:center;min-height:112px;
  padding-top:10px;perspective:800px}.blackjackCards .blackjackEmpty{color:#a8c4b754;
  font-size:12px;font-weight:800;letter-spacing:.08em}
.blackjackCard{--card-index:0;position:relative;width:clamp(60px,9vw,76px);
  aspect-ratio:.69;flex:0 0 auto;margin-left:clamp(-18px,-2vw,-10px);padding:7px;
  border:1px solid #d8d7ce;border-radius:8px;background:linear-gradient(145deg,#fffef7,#e9e7dc);
  box-shadow:0 8px 18px #0008;color:#171a1f;font-family:Georgia,serif;font-weight:900;
  transform-origin:50% 100%;animation:blackjackDeal .38s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:0ms}
.blackjackCard:first-child{margin-left:0}.blackjackCard.red{color:#b52d36}
.blackjackCard .rank{display:block;font-size:clamp(18px,3vw,25px);line-height:.9}
.blackjackCard .suit{display:block;margin-top:2px;font-size:clamp(15px,2.4vw,21px);line-height:1}
.blackjackCard .centerSuit{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  font-size:clamp(25px,4vw,38px);opacity:.9}
.blackjackCard.hidden{border-color:#8d7043;background:repeating-linear-gradient(45deg,#1c3349 0 6px,
  #c7a458 6px 8px,#13283b 8px 14px);box-shadow:inset 0 0 0 4px #efe2be,
  inset 0 0 0 6px #755e34,0 8px 18px #0008}
.blackjackCard.hidden::after{content:"♠";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:38%;aspect-ratio:1;border-radius:50%;background:#e4d39e;
  color:#172a3b;font-size:18px}
.blackjackTableMark{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;color:#9bc5b04f;font-weight:900;
  letter-spacing:.17em;pointer-events:none}.blackjackTableMark span{font-size:clamp(18px,4vw,34px)}
.blackjackTableMark small{font-size:9px;letter-spacing:.12em}
.blackjackResult{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:12px;
  padding:13px 16px;border-left:3px solid #63c89b;border-radius:8px;background:#10231d}
.blackjackResult>div{display:flex;align-items:center;gap:10px}.blackjackResult span{color:var(--ink2);
  font-size:12px}.blackjackResult strong{color:#88e0b8;font-size:21px}.blackjackResult p{font-weight:800;
  text-align:right;font-variant-numeric:tabular-nums}
.blackjackPayouts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:14px;
  overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--line)}
.blackjackPayouts span{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:58px;padding:8px 5px;background:#151821}.blackjackPayouts b{color:var(--ink2);font-size:10px}
.blackjackPayouts strong{margin-top:2px;color:#e6d178;font-size:16px}
.blackjackStartPanel{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.2fr);
  gap:12px 18px;margin-top:16px;padding:16px;border:1px solid #29453b;border-radius:12px;
  background:#101713}.blackjackStartPanel .fld{margin:0}.blackjackQuickBets{display:grid;
  grid-template-columns:repeat(4,1fr);gap:6px}.blackjackQuickBets button{min-height:44px;border:1px solid var(--line);
  border-radius:8px;background:#191f1c;color:var(--ink2);cursor:pointer}.blackjackQuickBets button:hover{
  border-color:#4d9d7b;color:#8de0ba}.blackjackBetSummary{grid-column:1/-1;display:flex;
  justify-content:space-between;gap:14px;padding-top:8px;border-top:1px dashed var(--line);
  color:var(--ink2);font-size:12px}.blackjackBetSummary b{margin-left:5px;color:var(--ink);
  font-variant-numeric:tabular-nums}.blackjackStartPanel>.orderBtn{grid-column:1/-1;min-height:48px}
.blackjackActionBar{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1.3fr;
  gap:10px;margin-top:14px}.blackjackAction{min-height:58px;border:1px solid;border-radius:10px;
  font-size:16px;font-weight:950;letter-spacing:.07em;cursor:pointer}.blackjackAction:disabled{opacity:.5;
  cursor:not-allowed}.blackjackAction.stand{border-color:#63707b;background:#1b2228;color:#d9e0e6}
.blackjackAction.hit{border-color:#48b486;background:#1d6048;color:#f1fff8;
  box-shadow:0 8px 25px #1e9a6630}.blackjackFairness{margin-top:18px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}.blackjackFairness summary{min-height:44px;display:flex;
  align-items:center;cursor:pointer;color:var(--ink2);font-size:13px;font-weight:700}
.blackjackFairness dl{padding:0 0 12px}.blackjackFairness dl>div{display:grid;
  grid-template-columns:120px 1fr;gap:12px;padding:5px 0}.blackjackFairness dt{color:var(--ink3);
  font-size:12px}.blackjackFairness dd{min-width:0;margin:0}.blackjackFairness code{display:block;
  overflow-wrap:anywhere}.blackjackHistoryBar{display:flex;gap:8px;margin-top:14px}
.blackjackHistory{list-style:none;margin-top:8px}.blackjackHistory li{display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);
  color:var(--ink2);font-size:12px}.blackjackHistory b{color:var(--ink);font-size:13px}
@keyframes blackjackDeal{from{opacity:0;transform:translateY(-24px) rotate(-5deg) scale(.92)}
  to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}

body.mobile-view #featurePanel{max-width:430px; margin:0 auto; border-left:1px solid var(--line);
  border-right:1px solid var(--line)}
body.mobile-view .casinoHeader{padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right))}
body.mobile-view .casinoViewport{padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right))}

@media (max-width:700px){
  .casinoHeader{gap:7px;padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right))}
  .casinoBack{padding:0 7px;font-size:12px}.casinoHeading strong{font-size:15px}
  .casinoHeading .sub{display:none}.casinoBalance b{font-size:14px}
  .casinoTabs{padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right))}
  .casinoViewport{padding:20px max(14px,env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .casinoIntro{align-items:flex-start}.casinoLiveMark{display:none}
  .casinoGameCard{grid-template-columns:48px minmax(0,1fr) auto; gap:10px; min-height:82px;
    padding:12px 4px}.gameGlyph{width:44px;height:44px;font-size:17px}
  .gameMeta b{font-size:15px}.gameReward{font-size:14px;grid-column:2}
  .gameState{grid-row:1;grid-column:3}.duelWorkspace{grid-template-columns:1fr;gap:24px}
  .gameSurfaceHead{align-items:flex-start;flex-direction:column}.gameSurfaceHead p{text-align:left}
  .slotMachine{gap:7px;padding:10px}.slotReel{min-height:150px;gap:10px}
  .slotReelGlyph{width:66px;height:66px;font-size:44px}.slotReelLabel{font-size:11px}
  .slotRewardList{grid-template-columns:1fr 1fr}.slotBetDock{grid-template-columns:1fr;
    margin-left:-4px;margin-right:-4px}
  .slotBetQuick,.slotBetSummary,.slotBetDock>.orderBtn,.slotBetDock>.note{grid-column:1}
  .rouletteSurface{padding-bottom:125px}.rouletteWorkspace{grid-template-columns:1fr;gap:22px}
  .rouletteWheelStage{width:min(100%,520px);padding:9px}.roulettePointer{top:-2px}
  .rouletteBetPanel{position:relative;top:auto;padding:14px}
  .rouletteSubmitBar{position:sticky;z-index:5;bottom:0;
    margin:13px -14px 0;padding:11px 14px calc(13px + env(safe-area-inset-bottom));
    border-top:1px solid #40351d;background:#11141af5;box-shadow:0 -15px 28px #090b10cc;
    backdrop-filter:blur(12px)}
  .blackjackSurface{padding-bottom:118px}.blackjackTable{min-height:390px;border-radius:30px 30px 12px 12px;
    padding:24px 18px}.blackjackSeat{min-height:130px}.blackjackStartPanel{grid-template-columns:1fr;
    margin-left:-4px;margin-right:-4px}.blackjackQuickBets,.blackjackBetSummary,
    .blackjackStartPanel>.orderBtn{grid-column:1}.blackjackActionBar{position:sticky;bottom:0;
    margin:14px -14px 0;padding:11px 14px calc(13px + env(safe-area-inset-bottom));
    border-top:1px solid #29453b;background:#0d1713f5;box-shadow:0 -15px 28px #060b09cc;
    backdrop-filter:blur(12px)}
}
@media (max-width:430px){
  #topbar{height:var(--topbar-h);min-height:var(--topbar-h);
    padding:calc(7px + env(safe-area-inset-top)) max(9px,env(safe-area-inset-right))
      7px max(9px,env(safe-area-inset-left));gap:7px}
  #topbar .brand{font-size:0}#topbar .brand::before{content:"🏦";font-size:18px}
  #sessionBadge,#tierBadge{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #menuBtn{font-size:0;padding:8px}#menuBtn::after{content:"☰";font-size:16px}
  .casinoBalance span{display:none}.casinoLobbyFoot{gap:13px}
  .slotStatus{align-items:flex-start;flex-direction:column;gap:4px}.slotMachine{gap:5px;padding:8px}
  .slotReel{min-height:132px}.slotReelGlyph{width:54px;height:54px;font-size:36px}
  .slotFairness dl>div{grid-template-columns:1fr;gap:2px}.slotHistory li{flex-wrap:wrap}
  .rouletteStatus{align-items:flex-start;flex-direction:column;gap:4px}
  .rouletteRewardStrip{grid-template-columns:repeat(5,minmax(58px,1fr));overflow-x:auto}
  .rouletteRewardStrip span{flex-direction:column;gap:0}.rouletteResult{align-items:flex-start}
  .rouletteResult p{font-size:12px}.rouletteFairness dl>div{grid-template-columns:1fr;gap:2px}
  .blackjackStatus{align-items:flex-start;flex-direction:column;gap:4px}.blackjackTable{min-height:350px;
    padding:20px 10px}.blackjackSeat{min-height:112px}.blackjackCards{min-height:92px}
  .blackjackCard{width:56px;margin-left:-13px;padding:6px}.blackjackPayouts strong{font-size:14px}
  .blackjackResult{align-items:flex-start}.blackjackResult p{font-size:12px}
  .blackjackFairness dl>div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  .casinoGameCard{transition:none}.casinoGameCard:hover{transform:none}
  #menuDrawer{transition:none}
  .slotReel.spinning .slotReelGlyph,.slotReel.fixed .slotReelGlyph{animation:none}
  #rouletteCanvas{transition:none}
  .blackjackCard{animation:none}
}

/* 광물 아이콘 (#130) — 픽셀 아트 SVG, 확대해도 선명하게 */
.mnIcon{width:20px; height:20px; vertical-align:-4px; margin-right:6px;
  image-rendering:pixelated}
.mnName{display:inline-flex; align-items:center}
#mineralList .mnName{font-weight:600}
.obNow .mnIcon{width:18px; height:18px; margin-right:4px}
.mnList .mnIcon{width:16px; height:16px; margin-right:4px}
/* 슬롯 릴용 큰 아이콘 (카지노) */
.reelIcon{width:56px; height:56px; image-rendering:pixelated}

/* 순증 병기 (#136) — 적중이라도 순증 0이면 회색으로 정직하게 */
.netDelta{margin-left:8px; font-weight:800; font-variant-numeric:tabular-nums}
.netDelta.up{color:var(--up)} .netDelta.down{color:var(--down)}
.netDelta.flat{color:var(--ink2)}

/* 슬롯 릴 심볼 — 실제 마크 텍스처 (#142). 픽셀 그대로 확대해 또렷하게 */
.slotReelGlyph .reelIcon{
  width:100%; height:100%; max-width:72px; max-height:72px;
  object-fit:contain; image-rendering:pixelated; display:block; margin:0 auto;
}
.slotReel.spinning .slotReelGlyph .reelIcon{ filter:blur(0.6px) }