@font-face {
  font-family: "Galmuri11";
  src: url("./assets/fonts/Galmuri11.woff2") format("woff2");
  font-display: swap;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; background:#0a0712; overflow:hidden;
  font-family: "Galmuri11", "Segoe UI", monospace; color:#e8e3f5;
  -webkit-user-select:none; user-select:none; touch-action:none;
  -webkit-touch-callout:none;
  -webkit-font-smoothing:none; image-rendering:pixelated; }
#wrap { position:fixed; inset:0; }
canvas#game { display:block; width:100%; height:100%; background:#1a1330; image-rendering:pixelated; }

.hidden { display:none !important; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; pointer-events:none; }
#topbar { position:absolute; top:max(8px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(620px,92vw); }
#xpbar { position:relative; height:20px; background:#120d24; border:3px solid #0a0712;
  border-radius:0; overflow:hidden; image-rendering:pixelated; }
#xpfill { position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(180deg,#8ee6ff 0,#8ee6ff 45%,#46a0e0 45%,#3a7ad0 100%); transition:width .12s linear; }
#xptext { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; text-shadow:0 1px 2px #000; letter-spacing:.5px; }

#leftpanel { position:absolute; top:34px; left:10px; width:230px; }
#hpbar { position:relative; height:18px; background:#120d24; border:3px solid #0a0712;
  border-radius:0; overflow:hidden; image-rendering:pixelated; }
#hpfill { position:absolute; left:0; top:0; bottom:0; width:100%;
  background:linear-gradient(180deg,#ff9a9a 0,#ff9a9a 45%,#e0455a 45%,#c0354a 100%); transition:width .12s linear; }
#hptext { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; text-shadow:0 1px 2px #000; }
#stats { display:flex; gap:14px; margin-top:6px; font-size:14px; font-weight:700;
  text-shadow:0 1px 3px #000; }
#timer { color:#ffe08a; }
#kills { color:#c9b9ff; }

#skillrow { pointer-events:auto; position:absolute; bottom:max(10px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:96vw; }
.skillicon { position:relative; width:42px; height:42px; border-radius:8px;
  background:#1d1633cc; border:2px solid #4a3d75; box-shadow:0 0 6px #0006; }
.skillicon img { width:100%; height:100%; image-rendering:pixelated; }
.skillicon .lv { position:absolute; right:-3px; bottom:-5px; font-size:11px; font-weight:800;
  background:#2a1f47; border:1px solid #6b5aa0; border-radius:6px; padding:0 4px;
  text-shadow:0 1px 1px #000; }
.skillicon.passive { border-color:#3d6b57; }

/* ---------- 일시정지 버튼 + 나가기 오버레이 ---------- */
.pausebtn { position:absolute; top:max(8px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); pointer-events:auto; cursor:pointer;
  width:40px; height:40px; font-size:16px; color:#e8e3f5; image-rendering:pixelated;
  background:#1d1633dd; border:3px solid #0a0712; border-radius:3px;
  box-shadow:0 4px 0 #0a0712, inset 2px 2px 0 #ffffff22; display:flex; align-items:center; justify-content:center; }
.pausebtn:active { transform:translateY(3px); box-shadow:0 1px 0 #0a0712, inset 2px 2px 0 #ffffff22; }
#pause { z-index:45; }

/* ---------- 호버/탭 툴팁 (스킬·아티팩트 아이콘 설명) ---------- */
#tooltip { position:fixed; z-index:60; pointer-events:none; max-width:240px;
  background:#0c0a18f0; border:2px solid #6b5aa0; border-radius:4px; padding:7px 10px;
  font-size:12px; line-height:1.45; color:#cdc4ec; box-shadow:0 4px 16px #000c; text-align:left; }
#tooltip b { color:#ffe08a; font-size:13px; display:block; margin-bottom:3px; }

/* ---------- 인게임 아티팩트 표시(장착 + 상자 획득) ---------- */
#artRow { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; max-width:230px; pointer-events:auto; }
.artchip { position:relative; width:28px; height:28px; border-radius:3px;
  background:#16122acc; border:2px solid var(--rc,#5a4a8c); box-shadow:0 0 5px #0006; }
.artchip img { width:100%; height:100%; image-rendering:pixelated; }
.artchip.eq { box-shadow:inset 0 0 6px var(--rc,#9a7fff), 0 0 5px #0008; }   /* 장착 = 안쪽 글로우 */
.artchip .n { position:absolute; right:-3px; bottom:-4px; font-size:10px; font-weight:800;
  background:#2a1f47; border:1px solid #6b5aa0; border-radius:5px; padding:0 3px; text-shadow:0 1px 1px #000; }

/* ---------- Overlays ---------- */
.overlay { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center;
  overflow-y:auto; padding-top:14px; padding-bottom:14px; box-sizing:border-box;
  justify-content:safe center;   /* 콘텐츠가 스테이지보다 길 때 위아래 잘림 방지 (미지원시 center 폴백) */
  background:radial-gradient(ellipse at center, #160f2ecc, #08050feb); backdrop-filter:blur(2px);
  z-index:10; }
/* 메타/오프라인 팝업 + 아웃게임 패널은 다른 오버레이(게임오버·메뉴) 위에 떠야 클릭이 먹힘 */
#metaPanel, #offlinePopup, #charSelect, #zoneSelect, #artifacts, #shop { z-index:40; }
.overlay h1 { font-size:54px; font-weight:900; letter-spacing:3px; line-height:.95;
  color:#bfa6ff; text-shadow:0 0 24px #6a4bd0, 0 3px 0 #2a1f47; }
.overlay h1 span { display:block; font-size:30px; color:#7adcff; letter-spacing:8px;
  text-shadow:0 0 18px #1f8fd0; }
.overlay h2 { font-size:40px; font-weight:900; letter-spacing:2px; color:#ffd86a;
  text-shadow:0 0 18px #b07a1a; }
.overlay .sub { font-size:15px; color:#b6acd6; max-width:560px; line-height:1.5; }
.overlay .zoneinfo { font-size:12px; color:#7e74a0; }
.overlay button { pointer-events:auto; cursor:pointer; font-size:19px; font-weight:800;
  letter-spacing:1px; color:#0a0712; background:linear-gradient(180deg,#9cf2ff,#5aa0ff);
  border:3px solid #0a0712; padding:12px 40px; border-radius:0;
  box-shadow:0 5px 0 #0a0712, inset 3px 3px 0 #ffffff66, inset -3px -3px 0 #0000003a;
  image-rendering:pixelated; transition:transform .06s; }
.overlay button:active { transform:translateY(4px);
  box-shadow:0 1px 0 #0a0712, inset 3px 3px 0 #ffffff66, inset -3px -3px 0 #0000003a; }

#goStats { font-size:18px; line-height:1.7; color:#ddd5f5; font-weight:600; }
#goStats b { color:#ffd86a; }

/* ---------- Level up cards ---------- */
#cards { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.card { pointer-events:auto; cursor:pointer; width:190px; min-height:230px;
  background:linear-gradient(180deg,#241a40,#19122e); border:2px solid #5a4a8c;
  border-radius:14px; padding:16px 14px; display:flex; flex-direction:column;
  align-items:center; gap:10px; box-shadow:0 8px 20px #0009; transition:transform .1s, border-color .1s; }
.card:hover { transform:translateY(-6px); border-color:#9c8aff; box-shadow:0 12px 26px #000b,0 0 18px #6a4bd0aa; }
.card .ico { width:64px; height:64px; border-radius:12px; background:#0e0a1c;
  display:flex; align-items:center; justify-content:center; border:2px solid #4a3d75; }
.card .ico img { width:56px; height:56px; image-rendering:pixelated; }
.card .tag { font-size:11px; font-weight:800; letter-spacing:1px; padding:2px 10px;
  border-radius:20px; text-transform:uppercase; }
.card .tag.new { background:#1f5a3d; color:#9bffcf; }
.card .tag.up { background:#3a2f5e; color:#cdbcff; }
.card .tag.passive { background:#5a4a1f; color:#ffe6a0; }
.card .name { font-size:17px; font-weight:800; color:#fff; }
.card .lvtxt { font-size:13px; font-weight:700; color:#8fd8ff; }
.card .eff { font-size:12.5px; color:#bdb3da; line-height:1.45; flex:1; }
.card .key { font-size:11px; color:#6f6593; margin-top:auto; }

/* ---------- Button variants (meta / ads / iap) ---------- */
.overlay button.ghost { font-size:15px; letter-spacing:1px; padding:10px 26px;
  color:#dcd5f5; background:linear-gradient(180deg,#3a2f5e,#241a40);
  box-shadow:0 4px 0 #1a1330,0 0 14px #4a3d7588; }
.overlay button.ghost:active { box-shadow:0 1px 0 #1a1330; }
.overlay button.primary { background:linear-gradient(180deg,#9fffc0,#46c97a); box-shadow:0 6px 0 #1f6b3d,0 0 18px #4ad07aaa; }
.overlay button.ad { background:linear-gradient(180deg,#ffd86a,#ff9b3a); color:#1a1008;
  box-shadow:0 6px 0 #8a5a1a,0 0 18px #ffb84aaa; }
.overlay button.ad:active { box-shadow:0 3px 0 #8a5a1a; }
.overlay button.iap { font-size:13px; letter-spacing:.5px; padding:8px 16px;
  color:#cdbcff; background:linear-gradient(180deg,#2e2450,#1c1436);
  box-shadow:0 3px 0 #120c26; }
.row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
#iapRow { display:flex; gap:10px; margin-top:6px; }

/* ---------- Gem tag ---------- */
.gemtag { position:absolute; top:18px; right:20px; font-size:18px; font-weight:800;
  color:#9fffe0; background:#10243acc; border:2px solid #2a5a6a; border-radius:20px;
  padding:6px 16px; box-shadow:0 0 14px #1a4a5a88; text-shadow:0 1px 2px #000; }
.gemtag.big { position:static; font-size:22px; }

/* ---------- SPIN reel (casino hook) ---------- */
.spintitle { color:#ffd86a !important; text-shadow:0 0 18px #b07a1a, 0 0 40px #ff9b3a55 !important; }
#spinReelWrap { position:relative; width:min(560px,92vw); height:120px; overflow:hidden;
  background:linear-gradient(180deg,#0e0a1c,#181030); border:3px solid #5a4a8c;
  border-radius:14px; box-shadow:inset 0 0 30px #000a, 0 8px 24px #000b; }
#spinReelWrap::before, #spinReelWrap::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:3; pointer-events:none; }
#spinReelWrap::before { left:0;  background:linear-gradient(90deg,#11091fee,transparent); }
#spinReelWrap::after  { right:0; background:linear-gradient(270deg,#11091fee,transparent); }
#spinStrip { position:absolute; top:12px; left:0; height:96px; display:flex; gap:0;
  will-change:transform; }
.spincell { width:96px; height:96px; flex:0 0 96px; display:flex; align-items:center; justify-content:center; }
.spincell img { width:72px; height:72px; image-rendering:pixelated;
  border-radius:14px; background:#0c0a18; padding:6px;
  border:3px solid var(--bord,#5a4a8c); box-shadow:0 0 14px var(--glow,#333) inset, 0 0 10px var(--glow,#3338); }
#spinMarker { position:absolute; top:0; bottom:0; left:50%; width:4px; transform:translateX(-50%);
  background:linear-gradient(180deg,#fff,#ffd86a,#fff); z-index:4;
  box-shadow:0 0 14px #ffd86a, 0 0 30px #ff9b3a; border-radius:2px; }
#spinMarker::before, #spinMarker::after { content:''; position:absolute; left:50%; transform:translateX(-50%);
  border:8px solid transparent; }
#spinMarker::before { top:-2px; border-top-color:#ffd86a; }
#spinMarker::after  { bottom:-2px; border-bottom-color:#ffd86a; }

/* landed-result card with rarity border/glow */
.spinresult { width:230px; padding:16px 16px 18px; border-radius:16px;
  background:linear-gradient(180deg,#241a40,#160f2c);
  border:3px solid var(--bord,#5a4a8c); box-shadow:0 0 26px var(--glow,#444), 0 10px 24px #000b;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:popin .28s cubic-bezier(.2,1.4,.5,1); }
@keyframes popin { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }
.spinresult .rtier { font-size:13px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }
.spinresult .rico { width:84px; height:84px; border-radius:14px; background:#0e0a1c;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bord,#4a3d75);
  box-shadow:0 0 18px var(--glow,#333) inset; }
.spinresult .rico img { width:72px; height:72px; image-rendering:pixelated; }
.spinresult .rname { font-size:19px; font-weight:800; color:#fff; }
.spinresult .rsub { font-size:13px; font-weight:700; color:#bdb3da; }
.spinresult button { margin-top:6px; font-size:18px; padding:10px 38px; }
#spinBtns { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.spin .hint, #spin .hint { font-size:12px; color:#7e74a0; }

/* ---------- META tree ---------- */
#metaTree { display:flex; flex-direction:column; gap:10px; width:min(560px,94vw);
  max-height:60vh; overflow-y:auto; padding:4px; }
.metanode { display:flex; align-items:center; gap:14px; text-align:left;
  background:linear-gradient(180deg,#241a40,#19122e); border:2px solid #5a4a8c;
  border-radius:12px; padding:10px 14px; }
.metanode.maxed { border-color:#4a7a5a; opacity:.85; }
.metanode .mico { width:48px; height:48px; flex:0 0 48px; border-radius:10px; background:#0e0a1c;
  display:flex; align-items:center; justify-content:center; border:2px solid #4a3d75; }
.metanode .mico img { width:40px; height:40px; image-rendering:pixelated; }
.metanode .minfo { flex:1; }
.metanode .mname { font-size:16px; font-weight:800; color:#fff; }
.metanode .mname .mlv { font-size:12px; font-weight:700; color:#8fd8ff; margin-left:6px; }
.metanode .mdesc { font-size:12.5px; color:#bdb3da; margin-top:2px; }
.metanode .mbuy { pointer-events:auto; cursor:pointer; flex:0 0 auto; font-size:15px; font-weight:800;
  color:#1a1008; background:linear-gradient(180deg,#9fffe0,#46c9a0); border:none;
  padding:9px 16px; border-radius:10px; box-shadow:0 4px 0 #1f6b5a; }
.metanode .mbuy:disabled { filter:grayscale(.7) brightness(.7); cursor:default; box-shadow:0 2px 0 #1f6b5a; }
.metanode .mbuy:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 #1f6b5a; }

/* ---------- offline / misc ---------- */
.bigtext { font-size:18px; line-height:1.6; color:#ddd5f5; }
.bigtext b { color:#9fffe0; }
#goStats .earn { color:#9fffe0; font-weight:800; }

/* ---------- toast ---------- */
#toast { position:absolute; bottom:64px; left:50%; transform:translateX(-50%) translateY(20px);
  z-index:30; background:#10243aee; border:2px solid #2a5a6a; color:#dff7ff;
  font-size:15px; font-weight:700; padding:12px 22px; border-radius:12px;
  box-shadow:0 6px 20px #000b; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:640px){
  .overlay h1 { font-size:40px; }
  .card { width:142px; min-height:200px; }
  .card .eff { font-size:11px; }
  .spincell { width:80px; flex-basis:80px; height:80px; }
  .spincell img { width:60px; height:60px; }
  #spinReelWrap { height:104px; }
  #spinStrip { height:80px; }
}

/* === 생성(codeb) UI 아이콘 === */
.gi { width:1.05em; height:1.05em; vertical-align:-0.18em; margin-right:2px; }
.bi { width:20px; height:20px; vertical-align:-5px; margin-right:6px; }
.bigicon { width:120px; height:120px; display:block; margin:0 auto 8px; filter:drop-shadow(0 4px 14px #000a); }
.tierico { width:18px; height:18px; vertical-align:-4px; margin-right:4px; }
button.iap img.bi, button.ad img.bi { margin-right:5px; }

/* === 카지노 휠 (스핀 시각) === */
#spinReelWrap { position:relative; width:300px; height:300px; max-width:82vw; max-height:82vw; margin:8px auto 6px; overflow:visible; background:none; border:none; box-shadow:none; }
#spinStrip, #spinMarker, #spinReelWrap::before, #spinReelWrap::after { display:none !important; }
#spinWheel { position:absolute; inset:0; width:100%; height:100%; transform-origin:50% 50%; will-change:transform; filter:drop-shadow(0 8px 22px #000b); image-rendering:auto; }
#spinPointer { position:absolute; left:50%; top:-10px; width:50px; height:50px; transform:translateX(-50%); z-index:3; filter:drop-shadow(0 3px 6px #000b); }
@media (max-width:640px){ #spinReelWrap{ width:240px; height:240px; } #spinPointer{ width:42px; height:42px; } }

/* =====================================================================
   OUT-GAME (메타/로비) — hub, currency bar, character/zone/artifact/shop
   ===================================================================== */
/* currency bar (top of every out-game panel) */
.curbar { position:absolute; top:max(16px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; font-size:18px; font-weight:800;
  color:#ffe9b0; background:#160f2ccc; border:2px solid #4a3d75; border-radius:22px;
  padding:7px 20px; box-shadow:0 0 14px #0008; text-shadow:0 1px 2px #000; white-space:nowrap; z-index:2; }
.cur { font-size:17px; vertical-align:-1px; }
.cur.gold { filter:drop-shadow(0 0 3px #ffc24a88); }
.cur.rp { filter:drop-shadow(0 0 3px #7adcff88); }

/* hub layout */
.overlay.hub { gap:16px; justify-content:center; }
.overlay.hub h1 { margin-top:10px; }
.hubloadout { font-size:14px; color:#bdb3da; line-height:1.6; min-height:1.6em; }
.hubloadout b { color:#9fdcff; }
.hubnav { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:560px; }
.hubnav button.ghost { font-size:15px; padding:11px 22px; }

/* generic out-game panel: leave room for the curbar + scrolls if tall */
.overlay.panel { justify-content:flex-start; padding:64px 12px 20px; gap:14px; overflow-y:auto; }
.overlay.panel h2 { margin-top:4px; }

/* card grid (characters / zones / artifacts) */
.cardgrid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  width:min(820px,96vw); }
.ogcard { position:relative; width:172px; min-height:158px; cursor:pointer; pointer-events:auto;
  background:linear-gradient(180deg,#241a40,#19122e); border:2px solid #5a4a8c; border-radius:14px;
  padding:12px 10px; display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:0 6px 16px #0009; transition:transform .1s, border-color .1s; text-align:center; }
.ogcard:hover { transform:translateY(-4px); border-color:#9c8aff; }
.ogcard.selected { border-color:#9fffe0; box-shadow:0 0 18px #4ad0a0aa, 0 6px 16px #0009; }
.ogcard.locked { opacity:.78; }
.ogcard .ico { width:60px; height:60px; border-radius:12px; background:#0e0a1c;
  display:flex; align-items:center; justify-content:center; border:2px solid #4a3d75; }
.ogcard .ico img { width:50px; height:50px; image-rendering:pixelated; }
.ogcard .nm { font-size:15px; font-weight:800; color:#fff; }
.ogcard .ds { font-size:11.5px; color:#bdb3da; line-height:1.4; flex:1; }
.ogcard .badge { position:absolute; top:6px; right:6px; font-size:10px; font-weight:800;
  padding:2px 7px; border-radius:10px; text-transform:uppercase; letter-spacing:.5px; }
.ogcard .badge.sel { background:#1f5a3d; color:#9bffcf; }
.ogcard .badge.eq  { background:#1f4a5a; color:#9fe8ff; }
.ogcard .act { pointer-events:auto; cursor:pointer; font-size:13px; font-weight:800; margin-top:2px;
  color:#1a1008; background:linear-gradient(180deg,#9fffe0,#46c9a0); border:none;
  padding:7px 14px; border-radius:9px; box-shadow:0 3px 0 #1f6b5a; }
.ogcard .act.buy { background:linear-gradient(180deg,#ffd86a,#ff9b3a); box-shadow:0 3px 0 #8a5a1a; }
.ogcard .act:disabled { filter:grayscale(.6) brightness(.7); cursor:default; }
.ogcard .act:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #1f6b5a; }
/* rarity-tinted artifact borders */
.ogcard.r-rare { border-color:#4aa3ff; }
.ogcard.r-epic { border-color:#b47aff; }
.ogcard.r-legendary { border-color:#ffd24a; }
.ogcard .rar { font-size:10px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }

/* artifact equipped slots row */
.artslots { display:flex; gap:10px; justify-content:center; }
.artslot { width:56px; height:56px; border-radius:12px; background:#120c26;
  border:2px dashed #4a3d75; display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto; }
.artslot.filled { border-style:solid; border-color:#9fe8ff; }
.artslot img { width:44px; height:44px; image-rendering:pixelated; }
.artslot .empty { font-size:22px; color:#4a3d75; }

/* endless toggle */
.endless { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700;
  color:#ddd5f5; background:#19122e; border:2px solid #5a4a8c; border-radius:12px; padding:8px 16px; cursor:pointer; pointer-events:auto; }
.endless input { width:18px; height:18px; accent-color:#9fffe0; }

/* shop */
.shopbody { display:flex; flex-direction:column; gap:14px; width:min(620px,96vw); }
.shopsec { background:linear-gradient(180deg,#241a40,#19122e); border:2px solid #5a4a8c;
  border-radius:14px; padding:12px 14px; }
.shopsec h3 { font-size:16px; color:#ffd86a; margin-bottom:10px; font-weight:800; letter-spacing:1px; }
.shoprow { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.shopitem { pointer-events:auto; cursor:pointer; min-width:120px; font-size:14px; font-weight:800;
  color:#0a0712; background:linear-gradient(180deg,#9cf2ff,#5aa0ff); border:none;
  padding:10px 16px; border-radius:11px; box-shadow:0 4px 0 #2a4b80; display:flex; flex-direction:column; gap:3px; align-items:center; }
.shopitem small { font-size:11px; font-weight:700; opacity:.85; }
.shopitem.gold { background:linear-gradient(180deg,#ffe08a,#ffb24a); box-shadow:0 4px 0 #8a5a1a; }
.shopitem.ad { background:linear-gradient(180deg,#9fffc0,#46c97a); box-shadow:0 4px 0 #1f6b3d; color:#0a1a10; }
.shopitem.iap { background:linear-gradient(180deg,#2e2450,#1c1436); color:#cdbcff; box-shadow:0 3px 0 #120c26; }
.shopitem:disabled { filter:grayscale(.6) brightness(.7); cursor:default; }
.shopitem:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 #2a4b80; }

/* ===================== 픽셀 UI (블록형 버튼/카드/패널) ===================== */
.overlay button.ghost { box-shadow:0 5px 0 #0a0712, inset 3px 3px 0 #ffffff1c, inset -3px -3px 0 #00000044; border-color:#0a0712 !important; }
.overlay button.ghost:active { transform:translateY(4px); box-shadow:0 1px 0 #0a0712, inset 3px 3px 0 #ffffff1c, inset -3px -3px 0 #00000044; }
.overlay button.primary { box-shadow:0 5px 0 #0a0712, inset 3px 3px 0 #ffffff66, inset -3px -3px 0 #0000003a; }
.overlay button.ad { box-shadow:0 5px 0 #0a0712, inset 3px 3px 0 #ffffff66, inset -3px -3px 0 #0000003a; }
.overlay button.iap { box-shadow:0 4px 0 #0a0712, inset 2px 2px 0 #ffffff1c, inset -2px -2px 0 #00000044; }
.card,.ogcard,.metanode,.shopsec,.shopitem,.curbar,.gemtag,.endless,.artslot,#spinReelWrap,.skillicon { border-radius:3px !important; }
.shopitem { border:3px solid #0a0712; box-shadow:0 4px 0 #14304f, inset 2px 2px 0 #ffffff55, inset -2px -2px 0 #00000033; }
.shopitem.gold { box-shadow:0 4px 0 #8a5a1a, inset 2px 2px 0 #ffffff66, inset -2px -2px 0 #00000033; }
.shopitem.ad { box-shadow:0 4px 0 #1f6b3d, inset 2px 2px 0 #ffffff66, inset -2px -2px 0 #00000033; }
/* 픽셀 폰트 또렷하게(브라우저별 best-effort) */
.overlay h1, .overlay h2, .overlay button, .curbar, #xptext, #hptext, #stats { -webkit-font-smoothing:none; font-smooth:never; }

/* game-over reward row + zone tag */
.gozone { font-size:14px; color:#9fdcff; font-weight:800; margin-bottom:6px; letter-spacing:1px; }
.goreward { display:flex; gap:16px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
.goreward .earn { font-size:17px; }
.gi, .cur { display:inline-block; }

/* ===================== 스킬 쿨다운 스윕 + 스핀 롤링 ===================== */
.skillicon .lv { z-index:3; }
.skillicon .cdmask { position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:3px;
  background:conic-gradient(from 0deg, rgba(6,4,14,.72) calc(var(--cd,0)*360deg), transparent 0deg); }
.spinresult { min-height:352px; justify-content:center; }   /* 롤링↔정착 높이 고정(수락+넘기기 버튼 포함) */

@media (max-width:640px){
  .curbar { font-size:15px; padding:6px 14px; gap:2px; }
  .ogcard { width:138px; min-height:148px; }
  .ogcard .ds { font-size:11px; }
  .hubnav button.ghost { font-size:13px; padding:9px 16px; }
}

/* ===================== 일지/데일리 + 언어 토글 ===================== */
#journal { z-index:40; }
.langtoggle { position:absolute; top:max(16px, env(safe-area-inset-top)); left:max(20px, env(safe-area-inset-left)); z-index:3;
  font-size:14px !important; font-weight:800; padding:7px 16px !important; letter-spacing:1px;
  color:#dcd5f5 !important; background:linear-gradient(180deg,#3a2f5e,#241a40) !important;
  border:3px solid #0a0712 !important; border-radius:3px !important;
  box-shadow:0 4px 0 #1a1330, inset 2px 2px 0 #ffffff1c, inset -2px -2px 0 #00000044 !important; }
.langtoggle:active { transform:translateY(3px); }

.journalbody { display:flex; flex-direction:column; gap:16px; width:min(640px,96vw); }
.journalsec { background:linear-gradient(180deg,#241a40,#19122e); border:2px solid #5a4a8c;
  border-radius:3px; padding:12px 14px; }
.journalsec h3 { font-size:16px; color:#ffd86a; margin-bottom:4px; font-weight:800; letter-spacing:1px;
  display:flex; justify-content:space-between; align-items:baseline; }
.journalsec h3 .sub { font-size:11px; color:#7e74a0; font-weight:700; letter-spacing:0; }

/* a single daily/journal mission row */
.jrow { display:flex; align-items:center; gap:12px; padding:9px 4px; border-top:1px solid #2a2148; }
.jrow:first-of-type { border-top:none; }
.jrow .jinfo { flex:1; min-width:0; }
.jrow .jname { font-size:14px; font-weight:800; color:#fff; }
.jrow .jname.done { color:#9fffc0; }
.jbar { position:relative; height:13px; margin-top:5px; background:#100b22; border:2px solid #0a0712;
  border-radius:3px; overflow:hidden; }
.jbar > i { position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(180deg,#8ee6ff,#46a0e0); transition:width .2s; }
.jbar.done > i { background:linear-gradient(180deg,#9fffc0,#46c97a); }
.jbar > span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#e8e3f5; text-shadow:0 1px 1px #000; }
.jreward { font-size:12px; font-weight:800; color:#ffe9b0; white-space:nowrap; }
.jclaim { pointer-events:auto; cursor:pointer; flex:0 0 auto; font-size:13px; font-weight:800;
  color:#1a1008; background:linear-gradient(180deg,#9fffe0,#46c9a0); border:none;
  padding:8px 14px; border-radius:3px; box-shadow:0 3px 0 #1f6b5a; }
.jclaim:disabled { filter:grayscale(.7) brightness(.7); cursor:default; box-shadow:0 2px 0 #1f6b5a; }
.jclaim:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #1f6b5a; }
.jclaim.claimed { background:linear-gradient(180deg,#3a4a44,#2a3530); color:#8fb8a8; box-shadow:0 2px 0 #1a2520; }

@media (max-width:640px){
  .langtoggle { font-size:12px !important; padding:6px 12px !important; }
  .jrow .jname { font-size:12.5px; }
}


/* ===================== OUT-GAME POLISH (hub revamp) ===================== */
/* hub background: generated arcane-lab art + readability gradient */
.overlay.hub {
  background:
    linear-gradient(to bottom, rgba(10,7,18,.30) 0%, rgba(10,7,18,.10) 30%, rgba(10,7,18,.55) 72%, rgba(10,7,18,.88) 100%),
    url('assets/bg/hub_bg.png') center top / cover no-repeat,
    #0a0712;
}
/* panel enter animation (all overlays incl. hub/panels/gameover) */
@keyframes ogFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.overlay:not(.hidden) { animation: ogFadeUp .22s ease-out; }
/* global button press feedback */
.overlay button:active { transform: translateY(2px) scale(.97); filter: brightness(1.15); }
/* start button: breathing glow */
@keyframes ogPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(122,220,255,.55), 0 6px 0 #1d4a66; }
  50%     { box-shadow: 0 0 22px 6px rgba(122,220,255,.30), 0 6px 0 #1d4a66; }
}
.overlay.hub #startBtn { animation: ogPulse 2.2s ease-in-out infinite; }

/* --- rich loadout (character card + zone chip + artifacts) --- */
.hubloadout { display:flex; gap:10px; align-items:stretch; justify-content:center;
  width:min(480px, 92vw); min-height:0; }
.hl-char { flex:1.25; display:flex; align-items:center; gap:10px; cursor:pointer;
  background:rgba(20,14,38,.82); border:1px solid #3a3058; border-radius:12px;
  padding:10px 12px; text-align:left; transition: border-color .15s, transform .15s; }
.hl-char:hover { border-color:#7adcff; transform:translateY(-1px); }
.hl-port { width:64px; height:64px; image-rendering:pixelated; flex:none;
  filter: drop-shadow(0 0 8px rgba(122,220,255,.35)); }
.hl-info { min-width:0; }
.hl-name { font-size:16px; color:#eef; font-weight:bold; margin-bottom:4px; white-space:nowrap; }
.hl-skill { font-size:12px; color:#9fdcff; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.hl-skill img { width:18px; height:18px; image-rendering:pixelated; }
.hl-edit { margin-left:auto; color:#5a5380; font-size:18px; }
.hl-side { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.hl-zone { flex:1; min-height:46px; border-radius:12px; border:1px solid #3a3058; cursor:pointer;
  background-size:cover; background-position:center; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; transition: border-color .15s, transform .15s; }
.hl-zone:hover { border-color:#7adcff; transform:translateY(-1px); }
.hl-zone::before { content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,6,16,.85) 18%, rgba(8,6,16,.15) 70%); }
.hl-zone span { position:relative; padding:5px 9px; font-size:12px; color:#dff; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.hl-art { background:rgba(20,14,38,.82); border:1px solid #3a3058; border-radius:12px;
  padding:7px 9px; font-size:12px; color:#cdc4ea; cursor:pointer; text-align:center;
  transition: border-color .15s; }
.hl-art:hover { border-color:#caa6ff; }
@media (max-width:420px) {
  .hl-name { font-size:14px; }
  .hl-port { width:52px; height:52px; }
}


/* --- nav button icons (CSS ::before so i18n textContent swaps don't wipe them) --- */
.hubnav button.ghost { display:inline-flex; align-items:center; gap:8px; }
.hubnav button.ghost::before { content:''; width:20px; height:20px; flex:none;
  image-rendering:pixelated; background-size:contain; background-repeat:no-repeat; background-position:center; }
#navChar::before      { background-image:url('assets/icons/char_mage.png'); }
#navZone::before      { background-image:url('assets/icons/zone_lab.png'); }
#navResearch::before  { background-image:url('assets/icons/meta_atk.png'); }
#navArtifacts::before { background-image:url('assets/icons/artifact_ring_power.png'); }
#navShop::before      { background-image:url('assets/icons/gem.png'); }
#navJournal::before   { background-image:url('assets/icons/offline_box.png'); }

/* --- game over: NEW BEST badge --- */
@keyframes recPop { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.25); opacity:1; } 100% { transform:scale(1); } }
@keyframes recGlow { 0%,100% { box-shadow:0 0 4px rgba(255,207,106,.55); } 50% { box-shadow:0 0 14px rgba(255,207,106,.95); } }
.newrec { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px;
  background:linear-gradient(180deg,#ffd87a,#e8a93e); color:#3a2403; font-size:11px; font-weight:900;
  letter-spacing:.5px; vertical-align:middle; transform-origin:center;
  animation: recPop .45s cubic-bezier(.2,1.6,.4,1) both, recGlow 1.6s ease-in-out .45s infinite; }

/* --- hub: floating mana particles --- */
.hubfx { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hubfx i { position:absolute; bottom:-14px; border-radius:50%; opacity:0; will-change:transform,opacity;
  background:radial-gradient(circle, rgba(170,230,255,.95) 0%, rgba(122,160,255,.35) 45%, rgba(122,160,255,0) 70%);
  animation: hubFloat 9s linear infinite; }
@keyframes hubFloat {
  0%   { transform:translate3d(0,0,0) scale(.7); opacity:0; }
  10%  { opacity:.85; }
  85%  { opacity:.5; }
  100% { transform:translate3d(var(--dx,18px),-104vh,0) scale(1.2); opacity:0; }
}
.hubfx i:nth-child(1)  { left:6%;  width:5px; height:5px; animation-duration:10s;  animation-delay:0s;   --dx:22px; }
.hubfx i:nth-child(2)  { left:16%; width:7px; height:7px; animation-duration:12s;  animation-delay:2.4s; --dx:-18px; }
.hubfx i:nth-child(3)  { left:27%; width:4px; height:4px; animation-duration:8.5s; animation-delay:5s;   --dx:14px; }
.hubfx i:nth-child(4)  { left:38%; width:6px; height:6px; animation-duration:11s;  animation-delay:1.2s; --dx:-24px;
  background:radial-gradient(circle, rgba(210,160,255,.95) 0%, rgba(160,110,255,.35) 45%, rgba(160,110,255,0) 70%); }
.hubfx i:nth-child(5)  { left:50%; width:5px; height:5px; animation-duration:9s;   animation-delay:6.8s; --dx:10px; }
.hubfx i:nth-child(6)  { left:61%; width:8px; height:8px; animation-duration:13s;  animation-delay:3.6s; --dx:-14px;
  background:radial-gradient(circle, rgba(210,160,255,.9) 0%, rgba(160,110,255,.3) 45%, rgba(160,110,255,0) 70%); }
.hubfx i:nth-child(7)  { left:72%; width:4px; height:4px; animation-duration:8s;   animation-delay:.8s;  --dx:20px; }
.hubfx i:nth-child(8)  { left:83%; width:6px; height:6px; animation-duration:10.5s;animation-delay:4.4s; --dx:-12px; }
.hubfx i:nth-child(9)  { left:91%; width:5px; height:5px; animation-duration:11.5s;animation-delay:7.6s; --dx:-20px;
  background:radial-gradient(circle, rgba(210,160,255,.9) 0%, rgba(160,110,255,.3) 45%, rgba(160,110,255,0) 70%); }
.hubfx i:nth-child(10) { left:45%; width:3px; height:3px; animation-duration:7.5s; animation-delay:8.6s; --dx:8px; }

/* spin skip (거부권) — 수락 아래 작은 고스트 버튼 */
.spinresult .skipbtn { display:block; margin:8px auto 0; font-size:13px; padding:7px 18px; opacity:.85; }

/* artifact upgrade */
.ogcard .act.up { margin-top:4px; font-size:11px; background:#1f3a2a; border-color:#3a6a4a; }
.ogcard .act.up:disabled { opacity:.55; }
.ogcard .rar .artlv { color:#ffd87a; margin-left:3px; }

/* 일지: 받기↔수령 완료 텍스트 변화로 행이 안 밀리게 버튼 폭 고정 */
.jclaim { min-width:167px; text-align:center; }


/* ===================== MOBILE (≤430px) — 기본 타깃이 폰임 ===================== */
@media (max-width: 430px) {
  .overlay h1 { font-size: 34px; letter-spacing: 2px; }
  .overlay h1 span { font-size: 19px; letter-spacing: 5px; }
  .overlay h2 { font-size: 24px; }
  .curbar { font-size: 13px; padding: 5px 10px; gap: 4px; max-width: 94vw;
    white-space: nowrap; overflow: hidden; }
  .langtoggle { font-size: 11px !important; padding: 5px 9px !important; top: max(10px, env(safe-area-inset-top)) !important; left: 10px !important; }
  #muteToggle { top: calc(max(10px, env(safe-area-inset-top)) + 38px) !important; left: 10px !important; }
  .overlay.hub { gap: 10px; }
  .hubloadout { width: 94vw; gap: 7px; }
  .hl-char { padding: 8px 9px; gap: 7px; }
  .hl-port { width: 46px; height: 46px; }
  .hl-name { font-size: 13px; }
  .hl-skill { font-size: 11px; }
  .hl-zone span { font-size: 11px; }
  .hl-art { font-size: 11px; padding: 6px 7px; }
  #startBtn { font-size: 18px; padding: 12px 34px; }
  .hubnav { gap: 7px; max-width: 94vw; }
  .hubnav button.ghost { font-size: 12px; padding: 8px 11px; }
  .hubnav button.ghost::before { width: 16px; height: 16px; }
  /* 카드 그리드: 고정 칼럼 → 2열 자동 맞춤 */
  .cardgrid { gap: 8px; width: 94vw; }
  .cardgrid .ogcard { flex: 0 0 calc(50% - 4px); max-width: calc(50% - 4px); }
  .ogcard { padding: 8px 7px; }
  .ogcard .nm { font-size: 13px; }
  .ogcard .ds { font-size: 10.5px; }
  .spinresult { width: 210px; min-height: 330px; }
  .shopbody, .journalbody { width: 94vw; }
  .jclaim { min-width: 120px; font-size: 12px; }
}


/* ===================== 버튼 정렬/크기 통일 패스 ===================== */
/* 허브 네비: flex-wrap의 들쭉날쭉(5+1 줄바꿈, 글자수별 폭 차이) → 3x2 그리드 균일 */
.hubnav { display:grid !important; grid-template-columns: repeat(3, 1fr); gap:10px;
  width:min(420px, 94vw); max-width:none; }
.hubnav button.ghost { display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:11px 4px; font-size:14px; white-space:nowrap; }

/* 일시정지: 세로 단일 칼럼, 동일 폭 */
#pause button { width:min(280px, 78vw); box-sizing:border-box; }

/* 게임오버: 줄 안 버튼 동일 폭, 줄 간 정렬 */
#gameover .row button { flex:1 1 0; min-width:0; max-width:200px; }
#gameover .row { width:min(420px, 92vw); }
#goMetaBtn { width:min(420px, 92vw); box-sizing:border-box; margin-top:2px; }
#iapRow { justify-content:center; flex-wrap:wrap; }
#iapRow .iap { flex:1 1 0; min-width:110px; max-width:140px; white-space:nowrap; }

/* 오프라인 팝업: 받기/2배 동일 폭 + 닫기 정렬 */
#offlinePopup .row button { flex:1 1 0; min-width:120px; max-width:220px; }
#offlinePopup .row { width:min(440px, 92vw); }
#offlineClose { width:min(200px, 60vw); }

/* 뒤로/닫기 버튼: 패널 전체 동일 크기 */
.backBtn, #metaClose { width:min(220px, 64vw); box-sizing:border-box; }

/* 스핀 리롤 두 버튼 동일 폭 */
#spinBtns { display:flex; gap:10px; justify-content:center; width:min(440px, 92vw); margin-left:auto; margin-right:auto; }
#spinBtns button { flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important; padding-left:8px !important; padding-right:8px !important; white-space:nowrap; box-sizing:border-box; }

@media (max-width: 430px) {
  .hubnav { width:94vw; gap:7px; }
  .hubnav button.ghost { font-size:12px; padding:9px 2px; gap:5px; }
}


/* ===================== 아티팩트 카드 프레임 통일 ===================== */
/* 버튼 1개(미보유 가격) vs 2개(장착+강화) 카드의 높이가 달라 행이 어긋났음.
   높이를 고정하고 버튼 블록을 바닥 정렬해 모든 카드 프레임을 동일하게. */
#artGrid .ogcard { min-height: 248px; }
#artGrid .ogcard .ds { flex: 0 0 auto; }
#artGrid .ogcard .act { margin-top: auto; }            /* 첫 버튼이 바닥으로 — 카드 구조 정렬 */
#artGrid .ogcard .act.up { margin-top: 4px; white-space: nowrap; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; padding-right: 6px; font-size: 10.5px; }
#artGrid .ogcard .act:only-of-type { margin-top: auto; }
@media (max-width: 430px) {
  #artGrid .ogcard { min-height: 224px; }
  #artGrid .ogcard .act.up { font-size: 10px; }
}


/* ===================== 허브: 루프 영상 배경 + 로고 이미지 ===================== */
.overlay.hub .hubvid { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:.92; pointer-events:none; }
/* 영상 위 가독성: 콘텐츠/파티클은 영상 위 레이어로.
   주의: position을 일괄 변경하면 curbar/langtoggle의 absolute 배치가 깨진다 —
   비positioned 요소에만 relative를 입히고, absolute 요소는 z-index만 보강. */
.overlay.hub > *:not(.hubvid):not(.curbar):not(.langtoggle):not(.hubfx) { position:relative; z-index:1; }
.overlay.hub > .curbar, .overlay.hub > .langtoggle { z-index:3; }   /* absolute 유지 (원좌표) */
.overlay.hub > .hubfx { z-index:1; }                                /* absolute 파티클 레이어 유지 */
.overlay.hub h1.logoh { margin:6px 0 2px; padding:0; background:none; }
.overlay.hub h1.logoh img { width:min(78%, 340px); height:auto; display:block; margin:0 auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }


/* ===================== 허브 내비 레드닷 + 구역 칩 중앙 정렬 ===================== */
.hubnav button { position:relative; }
.hubnav button.reddot::after { content:''; position:absolute; top:5px; right:7px;
  width:9px; height:9px; border-radius:50%; background:#ff4757;
  border:2px solid #1b1530; box-shadow:0 0 7px rgba(255,71,87,.8);
  animation: dotpulse 1.6s ease-in-out infinite; }
@keyframes dotpulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.25); } }
/* 구역 칩: 이름이 좌하단에 쏠려 있었음 — 정중앙 + 또렷하게 */
.hl-zone { align-items:center !important; justify-content:center; }
.hl-zone::before { background:rgba(8,6,16,.5) !important; }
.hl-zone span { font-size:13px; font-weight:800; letter-spacing:.04em;
  text-shadow:0 1px 4px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.6); }


/* ===================== 품질 패스: 터치 타겟 / 게임오버 넛지 ===================== */
.ogcard .act { min-height: 38px; }
#artGrid .ogcard .act.up { min-height: 34px; margin-top: 6px; font-size: 11px; }
#artGrid .ogcard { min-height: 260px; }
.pausebtn { width: 44px !important; height: 44px !important; }
.gonudge { margin-top: 10px; padding: 7px 12px; border-radius: 9px; background: rgba(60,46,110,.45);
  border: 1px solid #5a4a8a; color: #d8ccf5; font-size: 13px; font-weight: 800; }


/* ===================== 폴더블/와이드 화면 대응 ===================== */
/* 풀스크린(레터박스 없음)일 때: safe-area 앵커 정합 */
#leftpanel { top:calc(max(8px, env(safe-area-inset-top)) + 26px) !important; }  /* XP바(topbar) 아래 */
.gemtag { top:max(18px, calc(env(safe-area-inset-top) + 6px)); }
.overlay.panel { padding-top:calc(max(16px, env(safe-area-inset-top)) + 48px); }  /* 재화바 아래에서 시작 */
/* boxed(레터박스 스테이지): 노치 inset은 검은 띠가 흡수 — env() 무시하고 고정 오프셋 */
#stage.boxed #topbar { top:8px; }
#stage.boxed #leftpanel { top:32px !important; }
#stage.boxed .pausebtn { top:8px; right:10px; }
#stage.boxed #skillrow { bottom:10px; }
#stage.boxed .curbar { top:12px; }
#stage.boxed .langtoggle { top:12px !important; }
#stage.boxed #muteToggle { top:52px !important; left:12px !important; }
#stage.boxed #bossBar { top:44px !important; }
#stage.boxed .gemtag { top:12px; }
#stage.boxed .overlay.panel { padding-top:60px; }
/* short: 스테이지 높이 < 660px — 세로 공간 압축 */
#stage.short .overlay { gap:10px; }
#stage.short .overlay h1 { font-size:38px; }
#stage.short .overlay h1 span { font-size:22px; letter-spacing:5px; }
#stage.short .overlay h2 { font-size:22px; margin:4px 0; }
#stage.short .overlay.hub h1.logoh img { width:min(60%, 240px); }
#stage.short .gemtag { top:8px; right:10px; font-size:14px; padding:4px 8px; }
#stage.short .spintitle { margin-top:30px; }   /* 피티줄+잼태그 공간 확보 */
#stage.short #gameover h2 { margin-top:26px; }
#stage.short .ogcard { min-height:0; }
#stage.short #artGrid .ogcard { min-height:236px; }
#stage.short .hubnav button { padding:10px 8px; font-size:13px; }
#stage.short #startBtn { padding:12px 30px; font-size:18px; }
#stage.short .journalbody, #stage.short .shopbody, #stage.short #metaTree { max-height:none; }
#stage.short #leftpanel { top:30px; }


/* 좁은 화면: 일지 행 라벨이 한 글자씩 세로로 꺾이는 것 방지 */
.jrow .jinfo, .jrow .jname { word-break:keep-all; overflow-wrap:break-word; text-align:left; }
.jclaim { flex:0 0 auto; }


/* 일지 버튼: .overlay button 통일 패스(19px/12px40px)가 jclaim을 덮어
   좁은 화면에서 라벨이 한 글자씩 꺾였음 — 전 해상도에서 jclaim 크기 자체 규칙 우선 */
.overlay button.jclaim { font-size: 13px; padding: 9px 12px; }
@media (max-width: 430px) {
  .jrow { gap: 8px; }
  .jrow .jname { font-size: 12.5px; }
  .jreward { font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
  .overlay button.jclaim { min-width: 92px !important; font-size: 12px; padding: 8px 8px; }
}