/* 1편(도하네 놀이터) 로블록스 모바일풍 UI를 그대로 이어받은 스타일 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root { --candy1: #ff5fa2; --candy2: #ffb347; --candy3: #ffe14a; --candy4: #5fd16a; --candy5: #4fb3ff; --candy6: #9b7cff; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #a9d2f2; font-family: Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; color: #24251f; user-select: none; -webkit-user-select: none; font-weight: 600; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
.muted { color: #6f705f; }
button { font: inherit; cursor: pointer; }

#hud { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; z-index: 5; }
#hudLeft { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; align-content: flex-start; }
#roomPill { flex-basis: 100%; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 6px; border-radius: 22px; padding: 5px 8px 5px 12px; font-size: 13px; flex-wrap: wrap; border: 3px solid #fff; background: linear-gradient(135deg, #fffaf0, #eef7ff); box-shadow: 0 4px 0 rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.12); max-width: 60vw; }
.pill .code { font-family: ui-monospace, Menlo, monospace; color: #5a4ad1; font-weight: 800; }
.pill .more { display: inline-flex; gap: 6px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #41c464; display: inline-block; }
.mini { white-space: nowrap; border: 0; background: linear-gradient(135deg, #9b7cff, #5a7cff); color: #fff; border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 700; pointer-events: auto; }
#coinPill { pointer-events: auto; border-radius: 999px; padding: 3px 12px; font-size: 15px; font-weight: 800; background: linear-gradient(180deg, #fff6b0, #ffd23a); border: 3px solid #fff; color: #6a4300; box-shadow: 0 4px 0 #d99a00, 0 6px 14px rgba(0,0,0,.15); }
#coinPill.bump { animation: coinBump .5s cubic-bezier(.2,1.6,.4,1); }
#mini { pointer-events: auto; width: min(32vw, 138px); height: min(32vw, 138px); border-radius: 18px; border: 3px solid #fff; background: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,.2); flex: none; }
#mini.big { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(92vw, 80vh); height: min(92vw, 80vh); z-index: 40; }

#phase { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 144px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; background: rgba(20,24,36,.82); color: #fff; padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; pointer-events: none; z-index: 5; white-space: nowrap; border: 2px solid rgba(255,255,255,.6); }
#phaseTime { font-variant-numeric: tabular-nums; font-size: 18px; color: #ffe14a; }
#phaseTeam.cop { color: #8fc7ff; } #phaseTeam.robber { color: #ffb4b4; }

#banner { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 184px); left: 50%; transform: translateX(-50%); padding: 8px 16px; font-weight: 800; font-size: 16px; text-align: center; color: #fff; background: linear-gradient(135deg, #ff5f5f, #ff8a2a); border: 3px solid #fff; border-radius: 18px; box-shadow: 0 6px 0 rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.2); pointer-events: none; z-index: 8; max-width: 92vw; word-break: keep-all; }
#banner.calm { background: linear-gradient(135deg, #4fb3ff, #9b7cff); }
#banner.good { background: linear-gradient(135deg, #36c26b, #1a9d82); }
#toast { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 262px); left: 50%; transform: translateX(-50%) scale(.9); background: linear-gradient(135deg, #ffffff, #fff4fb); border: 3px solid #ff8fd0; color: #3a2440; padding: 10px 16px; border-radius: 20px; font-size: 16px; font-weight: 800; opacity: 0; transition: all .25s; pointer-events: none; box-shadow: 0 6px 0 rgba(255,95,162,.25), 0 10px 26px rgba(0,0,0,.18); z-index: 30; max-width: 90vw; text-align: center; word-break: keep-all; }
#toast.show { opacity: 1; transform: translateX(-50%) scale(1); }

#rescueBar { position: fixed; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 246px); transform: translateX(-50%); width: 220px; height: 26px; background: rgba(0,0,0,.55); border-radius: 13px; overflow: hidden; border: 3px solid #fff; z-index: 7; pointer-events: none; }
#rescueFill { height: 100%; width: 0; background: linear-gradient(90deg, #ffe14a, #5fd16a); }
#rescueTxt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; font-weight: 800; text-shadow: 0 1px 2px #000; }

#stick { position: fixed; left: 20px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 34px); width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.7); touch-action: none; z-index: 6; }
#knob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
#jumpBtn { position: fixed; right: 20px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 30px); width: 78px; height: 78px; border-radius: 50%; font-weight: 800; font-size: 16px; touch-action: none; z-index: 6; background: linear-gradient(180deg, #ffe14a, #ffb347); border: 4px solid #fff; color: #6a4300; box-shadow: 0 5px 0 #d98a00; }
#runBtn { position: fixed; right: 106px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 76px); width: 74px; height: 74px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 14px; touch-action: none; z-index: 6; background: linear-gradient(180deg, #6fd0ff, #4f8bff); border: 4px solid #fff; box-shadow: 0 5px 0 #2f5fc0; }
#runBtn.on { background: linear-gradient(180deg, #ffb347, #ff5f5f); box-shadow: 0 3px 0 #b03030; }
#scanBtn { position: fixed; right: 20px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 192px); padding: 10px 14px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 14px; z-index: 6; background: linear-gradient(180deg, #5b7cff, #2f4fc0); border: 3px solid #fff; box-shadow: 0 4px 0 #1f3390; touch-action: manipulation; }
#scanBtn:disabled { filter: grayscale(.7); opacity: .85; }
#fishBtn { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 182px); z-index: 9; border: 4px solid #fff; border-radius: 999px; padding: 11px 24px; font-size: 19px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #5fc2f0, #2f86d8); box-shadow: 0 5px 0 #1f5f9a, 0 8px 18px rgba(0,0,0,.2); white-space: nowrap; touch-action: manipulation; }
#fishBtn[data-k="wait"] { background: linear-gradient(180deg, #9fb3c8, #6f86a0); box-shadow: 0 5px 0 #4a5d74; }
#fishBtn[data-k="bite"] { background: linear-gradient(180deg, #ff6a6a, #e8283c); box-shadow: 0 5px 0 #9a1020; animation: fishBite .25s ease-in-out infinite alternate; font-size: 24px; }
#emoteBtn { position: fixed; left: 20px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 174px); width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(180deg, #ffffff, #fff1f8); font-size: 24px; z-index: 6; box-shadow: 0 3px 0 rgba(255,95,162,.25); }
#emotes { position: fixed; left: 76px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 174px); display: none; grid-template-columns: repeat(3, auto); gap: 6px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,240,250,.92)); border: 3px solid #fff; padding: 6px; border-radius: 22px; z-index: 7; box-shadow: 0 2px 12px rgba(0,0,0,.1); }
#emotes.open { display: grid; }
#emotes button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(180deg, #ffffff, #fff1f8); font-size: 22px; box-shadow: 0 3px 0 rgba(255,95,162,.25); }

#lobby { position: fixed; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 182px); transform: translateX(-50%); width: min(340px, 92vw); background: linear-gradient(180deg, #ffffff, #fffaf3); border: 4px solid #fff; border-radius: 24px; padding: 10px 14px 12px; z-index: 8; box-shadow: 0 8px 0 rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.2); }
#lobby h2 { margin: 0; text-align: center; font-size: 19px; color: #ff5fa2; }
#lobby p { margin: 2px 0 8px; text-align: center; font-size: 13px; }
.teamRow { justify-content: space-between; }
.teamBtn { flex: 1; padding: 9px 4px; border-radius: 14px; border: 3px solid #e8e2ff; background: #fff; font-weight: 800; color: #5a4ad1; font-size: 14px; }
.teamBtn.on { background: linear-gradient(135deg, #4fb3ff, #9b7cff); color: #fff; border-color: #fff; }
.botRow { justify-content: space-between; margin-top: 8px; font-size: 13px; }
.botRow .ghost { padding: 4px 12px; font-size: 18px; }
.botRow b { min-width: 24px; text-align: center; font-size: 18px; }
#startBtn { margin-top: 8px; padding: 11px; }
.wide { width: 100%; margin-top: 8px; padding: 7px; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; background: radial-gradient(circle at 20% 20%, rgba(255,214,234,.85), transparent 45%), radial-gradient(circle at 80% 30%, rgba(214,236,255,.9), transparent 50%), linear-gradient(160deg, rgba(255,236,170,.85), rgba(190,230,255,.9)); }
.card { border: 5px solid #fff; border-radius: 30px; background: linear-gradient(180deg, #ffffff, #fffaf3); box-shadow: 0 10px 0 rgba(0,0,0,.08), 0 16px 44px rgba(0,0,0,.18); padding: 22px; width: min(380px, 100%); max-height: 92vh; overflow: auto; animation: popIn .45s cubic-bezier(.2,1.4,.4,1); }
.card h1 { margin: 0 0 6px; font-size: 27px; background: linear-gradient(90deg, #ff5f5f, #ffb347, #5fd16a, #4fb3ff, #9b7cff); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.card h2 { color: #ff5fa2; margin: 0 0 8px; }
.card p { line-height: 1.5; margin: 0 0 6px; }
.card label { display: block; font-size: 13px; color: #6f705f; margin: 12px 0 6px; }
.ruleList { padding-left: 20px; margin: 0; font-size: 14px; line-height: 1.55; font-weight: 500; }
.ruleList li { margin-bottom: 5px; }
.row { display: flex; gap: 8px; align-items: center; }
input#nick { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; padding: 10px 12px; border: 3px solid #ffd0e4; border-radius: 14px; background: #fff; color: #333; user-select: text; -webkit-user-select: text; }
input#nick:focus { outline: none; border-color: #ff5fa2; }
.ghost { border: 3px solid #e8e2ff; background: #fff; color: #5a4ad1; font-weight: 800; border-radius: 12px; padding: 10px 12px; white-space: nowrap; }
#colors { display: flex; gap: 8px; flex-wrap: wrap; }
#colors button { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #ddd; }
#colors button.on { box-shadow: 0 0 0 3px #24251f; }
.primary { width: 100%; margin-top: 16px; padding: 13px; border-radius: 14px; color: #fff; font-size: 17px; font-weight: 800; background: linear-gradient(135deg, #ff5f5f, #ff8fd0); border: 3px solid #fff; box-shadow: 0 5px 0 #c0306e; transition: transform .1s; }
.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #c0306e; }
.primary.small { width: auto; margin: 0; padding: 11px 14px; font-size: 15px; background: linear-gradient(135deg, #4fb3ff, #9b7cff); box-shadow: 0 4px 0 #3a5ec0; }
.primary:disabled { filter: grayscale(.6); opacity: .7; }
.or { text-align: center; color: #9a9b8c; font-size: 13px; margin: 14px 0 8px; }
#codeIn { flex: 1; min-width: 0; padding: 11px; border: 1px solid #ddd; border-radius: 12px; font: inherit; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; user-select: text; -webkit-user-select: text; }

#resList { margin: 8px 0; font-size: 14px; }
#resList .r { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #eee; font-weight: 600; }
.dexRow { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #eee; }
.dexRow .e { font-size: 24px; width: 34px; text-align: center; }
.dexRow.none { opacity: .45; filter: grayscale(1); }
.dexRow small { display: block; color: #8a8a7a; font-weight: 500; }

#loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #a9d2f2; color: #1f3a5a; }
.spin { width: 44px; height: 44px; border: 5px solid #fff; border-top-color: #ff5fa2; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes coinBump { 40% { transform: scale(1.25); } }
@keyframes fishBite { to { transform: translateX(-50%) scale(1.08); } }
@media (orientation: landscape) { #roomPill { flex-basis: auto; max-width: 34vw; } #roomPill .more button { display: none; } #phase { top: calc(max(8px, env(safe-area-inset-top)) + 4px); } #banner { top: calc(max(8px, env(safe-area-inset-top)) + 46px); } #toast { top: calc(max(8px, env(safe-area-inset-top)) + 116px); } #lobby { bottom: 8px; width: min(320px, 44vw); padding: 6px 10px; } #lobby h2, #lobby p { display: none; } #fishBtn { bottom: 18px; } #rescueBar { bottom: 70px; } }
#ctxStack { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 240px); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 9; pointer-events: none; }
.ctxBtn { pointer-events: auto; border: 4px solid #fff; border-radius: 999px; padding: 10px 20px; font-size: 17px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #ff8fd0, #ff5fa2); box-shadow: 0 5px 0 #c0306e, 0 8px 18px rgba(0,0,0,.2); white-space: nowrap; touch-action: manipulation; max-width: 86vw; overflow: hidden; text-overflow: ellipsis; }
#shopNear { background: linear-gradient(180deg, #5fd16a, #2f9e55); box-shadow: 0 5px 0 #1f6e3a, 0 8px 18px rgba(0,0,0,.2); }
#exitBtn { background: linear-gradient(180deg, #9fb3c8, #6f86a0); box-shadow: 0 5px 0 #4a5d74, 0 8px 18px rgba(0,0,0,.2); }
#kickBtn { position: fixed; right: 20px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 116px); width: 78px; height: 78px; border-radius: 50%; color: #fff; font-weight: 900; font-size: 15px; z-index: 7; background: linear-gradient(180deg, #7ee787, #2f9e55); border: 4px solid #fff; box-shadow: 0 5px 0 #1f6e3a; touch-action: manipulation; }
#rideBtn { position: fixed; left: 20px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 232px); padding: 10px 14px; border-radius: 999px; color: #fff; font-weight: 900; font-size: 14px; z-index: 6; background: linear-gradient(180deg, #4ad6e8, #2a7fd8); border: 3px solid #fff; box-shadow: 0 4px 0 #1f5f9a; touch-action: manipulation; }
#rideBtn.on { background: linear-gradient(180deg, #ffb347, #ff5f5f); box-shadow: 0 4px 0 #b03030; }
#runBtn.swim { background: linear-gradient(180deg, #4ad6e8, #2a8fd8); box-shadow: 0 5px 0 #1f5f9a; }
#runBtn.swim.on { background: linear-gradient(180deg, #ffe14a, #ff8a2a); box-shadow: 0 3px 0 #b86a10; }
#buffs { position: fixed; left: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 112px); display: flex; flex-direction: column; gap: 4px; z-index: 5; pointer-events: none; max-width: 62vw; }
#buffs span { background: rgba(20,24,36,.78); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 10px; }
#buffs small { font-weight: 600; opacity: .85; } #buffs b { color: #ffe14a; }
#earn { position: fixed; left: 50%; top: 42%; transform: translateX(-50%); font-size: 26px; font-weight: 900; color: #ffd23a; text-shadow: 0 2px 0 #7a4d00, 0 3px 8px rgba(0,0,0,.45); opacity: 0; pointer-events: none; z-index: 7; }
#earn.pop { animation: earnPop .8s ease-out; }
@keyframes earnPop { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.8); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -36px) scale(1); } }
.shopSec { margin: 12px 0 4px; font-weight: 900; color: #2f6e4f; } .shopSec small { font-weight: 600; color: #8a8a7a; font-size: 12px; margin-left: 4px; }
.shopItem { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 6px; border: 0; border-bottom: 1px solid #eee; background: none; text-align: left; }
.shopItem .e { font-size: 24px; width: 32px; text-align: center; flex: none; } .shopItem .t { flex: 1; min-width: 0; } .shopItem .t b { display: block; font-size: 14px; } .shopItem .t small { color: #8a8a7a; font-weight: 500; font-size: 12px; }
.shopItem .p { color: #a06a00; white-space: nowrap; } .shopItem:disabled { opacity: .5; }
#clawCv { display: block; margin: 8px auto; width: min(100%, 320px); height: auto; border-radius: 14px; border: 3px solid #ff8fd0; touch-action: none; }
#clawGo { touch-action: none; }
@media (orientation: landscape) { #ctxStack { bottom: 70px; } #kickBtn { bottom: 116px; } #rideBtn { bottom: 16px; left: 160px; } #buffs { top: 60px; } #clawCv { width: 200px; } }
#lobbyOpen { display: none; }
#lobby.min { width: auto; padding: 0; background: none; border: 0; box-shadow: none; bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 144px); }
#lobby.min > *:not(#lobbyOpen) { display: none; }
#lobby.min #lobbyOpen { display: block; font-size: 15px; padding: 9px 16px; background: linear-gradient(135deg, #ff5f5f, #ff8fd0); border: 3px solid #fff; }