/* 땅따먹기 모험: screens added on top of the arena game's style.css */
#titleScreen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: radial-gradient(ellipse at center, rgba(255,255,255,0.12), rgba(30,60,70,0.4)); }
.tips { display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #3a4f58; }
.tips div { background: #f3f7f9; border-radius: 12px; padding: 8px 12px; }
.tips small { display: block; color: #6b7f88; font-size: 13px; margin-top: 2px; }

/* Map */
#mapScreen { display: flex; flex-direction: column; align-items: center; background: linear-gradient(#2f5552ee, #3f6663ee); padding-top: calc(10px + env(safe-area-inset-top)); }
.runbar { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: rgba(255,255,255,0.92); border-radius: 99px; box-shadow: 0 4px 0 rgba(20,40,50,0.25); max-width: calc(100% - 24px); }
.runbar .lvl { font-size: 18px; white-space: nowrap; }
.perkrow { display: flex; flex-wrap: wrap; gap: 2px; font-size: 20px; }
.perkrow span { position: relative; }
.perkrow i { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 10px; background: #24343c; color: #fff; border-radius: 6px; padding: 0 3px; }
.perkrow.small { font-size: 16px; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.8)); }
.perkrow.big { font-size: 26px; justify-content: center; }
.mapscroll { flex: 1; width: 100%; overflow-y: auto; touch-action: pan-y; display: flex; justify-content: center; padding: 12px 0 30px; }
.mapbox { position: relative; flex: none; }
.mapbox svg { position: absolute; inset: 0; }
.mapbox line { stroke: rgba(255,255,255,0.28); stroke-width: 4; stroke-dasharray: 2 8; stroke-linecap: round; }
.mapbox line.lit { stroke: #ffd24a; stroke-dasharray: none; }
.mnode { position: absolute; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; background: #e9eff2; box-shadow: 0 5px 0 rgba(20,40,50,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #4a5d66; opacity: 0.55; }
.mnode span { font-size: 26px; line-height: 1; }
.mnode small { font-size: 12px; }
.mnode.elite { background: #f3e1e4; } .mnode.rest { background: #ddf3e5; } .mnode.boss { width: 78px; height: 78px; background: #fff1c2; }
.mnode.open { opacity: 1; animation: nodeGlow 1.1s ease-in-out infinite alternate; outline: 4px solid #ffd24a; }
.mnode.done { opacity: 0.9; background: #c9d6dc; }
.mnode:disabled { cursor: default; }
@keyframes nodeGlow { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.08); } }
.maphint { color: #fff; font-size: 15px; padding: 6px 0 calc(10px + env(safe-area-inset-bottom)); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* Stage card, rest, results */
#stageScreen, #restScreen, #resultScreen, #overScreen, #levelScreen { display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,40,50,0.45); }
.stagecard h2, .restcard h2, .result h2 { margin: 0; text-align: center; font-weight: 400; font-size: 30px; }
.stagecard > small { text-align: center; color: #6b7f88; }
.goalline { background: #fff7d6; border-radius: 14px; padding: 10px 12px; text-align: center; font-size: 18px; }
.goalline small { display: block; color: #8a7a40; font-size: 13px; margin-top: 2px; }
.stinfo { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.stinfo span { background: #eef3f6; border-radius: 99px; padding: 4px 10px; font-size: 14px; }
.enemies { display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow-y: auto; }
.enemies div { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: #f6f8fa; border-radius: 12px; padding: 6px 10px; }
.enemies span { grid-row: span 2; font-size: 26px; text-align: center; }
.enemies b { font-weight: 400; font-size: 16px; }
.enemies small { color: #6b7f88; font-size: 12px; }
.restcard .opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 16px; background: #eef3f6; text-align: left; box-shadow: 0 4px 0 rgba(20,40,50,0.15); }
.restcard .opt b { font-weight: 400; font-size: 20px; }
.restcard .opt small { color: #6b7f88; font-size: 14px; }
.restcard .opt:disabled { opacity: 0.45; }
.resrows { display: flex; flex-direction: column; gap: 6px; }
.resrows div { background: #f3f7f9; border-radius: 12px; padding: 8px 12px; font-size: 17px; }

/* Level-up cards */
.levelup { width: min(420px, 100%); text-align: center; color: #fff; }
.levelup h2 { margin: 0; font-weight: 400; font-size: 34px; -webkit-text-stroke: 5px #24343c; paint-order: stroke fill; }
.levelup p { margin: 4px 0 12px; font-size: 16px; }
.perkcards { display: flex; flex-direction: column; gap: 10px; }
.pcard { position: relative; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 6px 0 rgba(20,40,50,0.3); border: 4px solid #e1e8ec; animation: cardIn .3s ease-out backwards; }
.pcard:nth-child(2) { animation-delay: .06s; } .pcard:nth-child(3) { animation-delay: .12s; }
.pcard .pe { grid-row: span 2; font-size: 38px; text-align: center; }
.pcard b { font-weight: 400; font-size: 20px; color: #24343c; }
.pcard b em { font-style: normal; font-size: 13px; color: #fff; background: #4fb4ff; border-radius: 8px; padding: 1px 6px; vertical-align: middle; }
.pcard small { color: #4a5d66; font-size: 14px; line-height: 1.3; }
.pcard i { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 11px; color: #8a98a0; }
.pcard.rare { border-color: #4fb4ff; } .pcard.rare i { color: #2f8bd6; }
.pcard.epic { border-color: #a77bff; background: linear-gradient(#fff, #f5efff); } .pcard.epic i { color: #7a4fe0; }
.pcard:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(20,40,50,0.3); }
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(.95); } }

/* HUD extras */
.xpbar { position: relative; width: 150px; height: 18px; border-radius: 9px; background: rgba(30,50,60,0.35); overflow: hidden; }
#xpFill { position: absolute; inset: 0; background: linear-gradient(90deg, #8fe3a8, #3fbf6a); transform-origin: left; transform: scaleX(0); transition: transform .25s; }
.xpbar b { position: relative; display: block; font-weight: 400; color: #fff; font-size: 13px; line-height: 18px; padding-left: 8px; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.minimap.full { width: 150px; height: 150px; }
.focuswarn { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); background: #ff4d5a; color: #fff; border-radius: 16px; padding: 6px 16px; text-align: center; box-shadow: 0 4px 0 #c93a45; pointer-events: none; animation: pop2 .45s ease-in-out infinite alternate; }
.focuswarn b { font-weight: 400; font-size: 20px; display: block; }
.focuswarn small { font-size: 13px; }
body.focus #vignette { box-shadow: inset 0 0 120px 30px rgba(255,60,80,0.45); }
.toast.good { background: #3fa866; color: #fff; }
/* The objective sits top-right on phones (bottom-left is the boost button). */
@media (max-width: 640px) {
  #hud .goalbar { top: calc(12px + env(safe-area-inset-top)); bottom: auto; left: auto; right: 10px; transform: none; flex-direction: column; align-items: flex-end; gap: 4px; }
  #hud .gtrack { width: 150px; }
  .focuswarn { top: 96px; }
}
/* Short screens: the cards scroll inside instead of being cut off. */
.stagecard, .result, .restcard { max-height: calc(100dvh - 32px); overflow-y: auto; touch-action: pan-y; }
.stagecard { gap: 9px; }
.enemies { max-height: none; overflow: visible; }
#stageScreen, #resultScreen, #overScreen, #restScreen { align-items: safe center; }

/* Skill buttons (right of the boost button); the ring fills as the cooldown runs out. */
.skillbtns { position: absolute; left: 104px; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.skillbtn { position: relative; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.9); box-shadow: 0 4px 0 rgba(20,40,50,0.25); padding: 0; touch-action: none; }
.skillbtn i { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(#ff5a1f calc(var(--p, 1) * 360deg), rgba(30,50,60,0.18) 0); -webkit-mask: radial-gradient(circle, transparent 29px, #000 30px); mask: radial-gradient(circle, transparent 29px, #000 30px); }
.skillbtn span { font-size: 26px; line-height: 60px; display: block; }
.skillbtn small { position: absolute; left: 0; right: 0; bottom: -16px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.skillbtn.cool span { opacity: 0.35; }
.skillbtn:active { transform: scale(0.92); }
@media (pointer: coarse) { .skillbtn small { display: none; } .skillbtns { left: 112px; } }

/* Lobby: chapter picker and the permanent-upgrade shop */
.chapter { display: flex; align-items: center; gap: 8px; }
.chapter .icon-btn.dark { background: #eef3f6; color: #24343c; flex: none; }
.chapter .icon-btn:disabled { opacity: 0.3; }
.chbody { flex: 1; text-align: center; display: flex; flex-direction: column; }
.chbody small { color: #6b7f88; }
.chbody b { font-weight: 400; font-size: 24px; }
.chbody span { font-size: 13px; color: #6b7f88; min-height: 16px; }
.chbody.locked b { color: #a0adb4; }
#openShop small { color: #3fa866; font-size: 13px; }
#shopScreen { display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,40,50,0.45); }
.shop { max-height: calc(100dvh - 32px); }
.shophead { display: flex; align-items: center; justify-content: space-between; }
.shophead h2 { margin: 0; font-weight: 400; font-size: 26px; }
.coin.light { background: #24343c; }
.shoplist { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; touch-action: pan-y; }
.up { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; background: #f3f7f9; border-radius: 14px; padding: 8px 10px; }
.up > span { font-size: 28px; text-align: center; }
.up b { font-weight: 400; font-size: 17px; }
.up b em { font-style: normal; font-size: 12px; color: #6b7f88; margin-left: 4px; }
.up small { display: block; color: #6b7f88; font-size: 13px; }
.up button { font-size: 15px; padding: 8px 10px; border-radius: 12px; background: #ffc929; color: #5a3b00; box-shadow: 0 3px 0 #d99a00; white-space: nowrap; }
.up button:disabled { background: #e1e8ec; color: #8a98a0; box-shadow: none; }
.lives span { position: relative; }
.lives span i { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--f, 0)) * 100%) 0 0 0); }
.lives span i svg { fill: #ff9fb2; }
.focusnext { color: #fff; background: rgba(255,77,90,0.85); border-radius: 10px; padding: 1px 8px; font-size: 12px; white-space: nowrap; }
.coin-ic.sm { width: 14px; height: 14px; vertical-align: -2px; }

/* Wave card and the growth tree */
#waveScreen { display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,40,50,0.35); }
.wavecard { max-height: calc(100dvh - 32px); overflow-y: auto; animation: cardIn .3s ease-out; }
.wavecard > small { text-align: center; color: #6b7f88; }
.wavecard h2 { margin: 0; text-align: center; font-weight: 400; font-size: 30px; }
.wvnotes { display: flex; flex-direction: column; gap: 6px; }
.wvnotes > div { border-radius: 12px; padding: 7px 11px; font-size: 15px; }
.wvnotes .mapnote { background: #eef3f6; color: #3a4f58; }
.wvnotes .tip { background: #eef7ff; color: #2b5a80; }
.wvnotes .newitem { background: #fff3d6; color: #7a5a10; }
.wvnotes .newbot { background: #f6f0f2; color: #5a3b44; }
.wvnotes .newbot b { font-weight: 400; }
.wvnotes small { display: block; color: #8a7a80; font-size: 12px; }
.waveno { color: #fff; background: rgba(30,50,60,0.45); border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.branch { margin: 6px 0 0; font-weight: 400; font-size: 17px; color: #3a4f58; }
.up.locked { opacity: 0.6; }
.up .need { color: #b0475a; }

.pausebtn { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(30,50,60,0.45); color: #fff; font-size: 18px; padding: 0; }
#pauseScreen { display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,40,50,0.5); }
#pauseQuit small { color: #8a98a0; font-size: 12px; }
@media (min-width: 641px) { .pausebtn { top: 52px; } }