:root {
  --ink: #3d2c3e;
  --ink-soft: #7a6a7b;
  --paper: #fffdf6;
  --paper-2: #fff4dc;
  --sky-1: #7ccbff;
  --sky-2: #d9f2ff;
  --yellow: #ffd84d;
  --pink: #ff8fb1;
  --mint: #6fd6a8;
  --blue: #5aa9ff;
  --red: #ff6b6b;
  --purple: #a48bff;
  --orange: #ffad5a;
  --shadow: 0 5px 0 rgba(61, 44, 62, .22);
  --radius: 18px;
  font-family: 'Jua', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 70%, #eafbe9 100%);
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: normal; }

/* 하늘 배경 */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cloud {
  position: absolute; width: 180px; height: 56px; background: #fff; border-radius: 60px; opacity: .85;
  animation: drift 60s linear infinite;
}
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 80px; height: 80px; left: 25px; top: -40px; }
.cloud::after { width: 60px; height: 60px; left: 90px; top: -28px; }
.c1 { top: 8%; left: -200px; }
.c2 { top: 28%; left: -200px; animation-delay: -22s; animation-duration: 80s; transform: scale(.7); }
.c3 { top: 62%; left: -200px; animation-delay: -45s; animation-duration: 70s; transform: scale(1.2); }
@keyframes drift { to { left: 110%; } }

#app {
  position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 12px 16px;
  height: 100vh; display: flex; flex-direction: column; gap: 12px;
}
#main { flex: 1; min-height: 0; display: flex; }
.screen { display: none; flex: 1; min-height: 0; }
.screen.active { display: flex; }

/* 공통 */
.panel {
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px; min-width: 0;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.panel-head h2 { font-size: 22px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.center { justify-content: center; }
.btn {
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 16px; cursor: pointer;
  box-shadow: 0 4px 0 var(--ink); transition: transform .05s, box-shadow .05s; white-space: nowrap; font-size: 16px;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--ink); }
.btn.small { padding: 5px 11px; font-size: 14px; border-radius: 11px; box-shadow: 0 3px 0 var(--ink); }
.btn.big { padding: 12px 26px; font-size: 22px; }
.btn.yellow { background: var(--yellow); }
.btn.mint { background: var(--mint); }
.btn.pink { background: var(--pink); }
.btn.blue { background: var(--blue); color: #fff; }
.btn.red { background: var(--red); color: #fff; }
.btn.purple { background: var(--purple); color: #fff; }
.icon-btn { background: none; border: 0; cursor: pointer; font-size: 20px; padding: 2px 6px; }
input[type=text], input:not([type]) {
  border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; background: #fff; outline: none; min-width: 0;
}
input:not([type]):focus { box-shadow: 0 0 0 4px rgba(255, 216, 77, .7); }
.coin::before { content: '🪙 '; }
.logo { font-size: 26px; color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); letter-spacing: 1px; }
.logo b { color: var(--yellow); font-weight: normal; }
.logo.big { font-size: 52px; text-shadow: 0 5px 0 var(--ink); -webkit-text-stroke: 2.5px var(--ink); }

/* 로그인 */
#scr-login { align-items: center; justify-content: center; }
.login-card { width: min(440px, 100%); text-align: center; padding: 30px 28px; }
.login-card .sub { color: var(--ink-soft); margin: 8px 0 0; }
.login-avatar { width: 150px; margin: 14px auto 6px; animation: bob 1.6s ease-in-out infinite; }
#login-form { display: flex; flex-direction: column; gap: 12px; }
#login-form input { text-align: center; font-size: 20px; }
.err { color: #d33; min-height: 1.2em; margin: 8px 0 0; }
.hint { color: var(--ink-soft); font-size: 13px; margin: 6px 0 0; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* 상단바 */
#topbar {
  display: flex; align-items: center; gap: 16px; background: rgba(255, 253, 246, .85); border: 3px solid var(--ink);
  border-radius: var(--radius); padding: 8px 14px; box-shadow: var(--shadow); flex-wrap: wrap;
}
#topbar nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.nav-btn { background: none; border: 3px solid transparent; border-radius: 12px; padding: 6px 12px; cursor: pointer; font-size: 17px; }
.nav-btn:hover { background: var(--paper-2); }
.nav-btn.on { background: var(--yellow); border-color: var(--ink); }
.me-chip { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.me-avatar { width: 40px; height: 40px; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.me-avatar svg { width: 46px; }
.me-chip .coin { background: var(--yellow); border: 2px solid var(--ink); border-radius: 20px; padding: 2px 10px; }

/* 로비 */
.lobby-grid {
  flex: 1; display: grid; gap: 12px; min-height: 0;
  grid-template-columns: 1fr 290px; grid-template-rows: minmax(0, 1fr) 230px;
}
.rooms-panel { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; }
.users-panel { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-height: 0; }
.lobby-chat { grid-column: 1; grid-row: 2; }
.room-list { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-content: start; padding: 4px; }
.room-card {
  border: 3px solid var(--ink); border-radius: 16px; padding: 12px; cursor: pointer; background: #fff;
  box-shadow: 0 4px 0 var(--ink); display: flex; gap: 12px; align-items: center; text-align: left; transition: transform .1s;
}
.room-card:hover { transform: translateY(-2px); }
.room-card .ricon { font-size: 34px; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; border: 2px solid var(--ink); flex: none; }
.room-card .rinfo { min-width: 0; flex: 1; }
.room-card .rtitle { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-card .rmeta { color: var(--ink-soft); font-size: 14px; display: flex; gap: 8px; margin-top: 3px; }
.room-card.playing { opacity: .65; }
.badge { display: inline-block; border: 2px solid var(--ink); border-radius: 10px; padding: 0 7px; font-size: 13px; background: var(--paper-2); }
.badge.playing { background: var(--pink); }
.badge.waiting { background: var(--mint); }
.badge.ok { background: var(--mint); }
.empty { color: var(--ink-soft); text-align: center; padding: 30px 10px; grid-column: 1 / -1; }
.user-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 12px; }
.user-row:hover { background: var(--paper-2); }
.user-row .ua { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--sky-2); border: 2px solid var(--ink); overflow: hidden; display: grid; place-items: center; }
.user-row .ua svg { width: 48px; }
.user-row .un { font-size: 16px; }
.user-row .uw { font-size: 12px; color: var(--ink-soft); }

/* 채팅 */
.chat-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.chat-log { flex: 1; overflow-y: auto; font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.5; padding-right: 4px; word-break: break-all; }
.chat-log .m b { font-family: 'Jua', sans-serif; font-weight: normal; margin-right: 6px; }
.chat-log .m.mine b { color: #d2691e; }
.chat-log .m.sys { color: var(--ink-soft); font-size: 13px; }
.chat-log .m.good { color: #1f9d5b; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; padding: 6px 10px; }

/* 게임방 */
.room-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; min-height: 0; }
.stage-panel { display: flex; flex-direction: column; padding: 10px; min-height: 0; }
.room-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; flex-wrap: wrap; }
.room-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; }
#room-controls { order: 3; width: 100%; }
#room-controls:empty { display: none; }
.room-title h2 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-badge { border: 2px solid var(--ink); border-radius: 12px; padding: 2px 10px; background: var(--yellow); white-space: nowrap; }
#stage {
  flex: 1; position: relative; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; min-height: 440px;
  background: linear-gradient(180deg, #fff9e8 0%, #fff9e8 62%, #f5deb3 62%, #ecd09c 100%);
}
.room-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.players-panel { padding: 10px; max-height: 46%; overflow: auto; flex: none; }
.room-side .chat-panel { flex: 1; }
.pl-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 10px; }
.pl-row.me { background: #fff3c4; }
.pl-row .pa { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); background: var(--sky-2); display: grid; place-items: center; flex: none; }
.pl-row .pa svg { width: 42px; }
.pl-row .pn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row .ps { background: var(--yellow); border: 2px solid var(--ink); border-radius: 10px; padding: 0 8px; min-width: 32px; text-align: center; }
.pl-row .kick { background: none; border: 0; cursor: pointer; color: var(--ink-soft); font-size: 14px; }
.tag-bot { font-size: 11px; background: var(--sky-2); border: 1.5px solid var(--ink); border-radius: 6px; padding: 0 4px; margin-left: 4px; }

/* 캐릭터 */
.actor { position: absolute; width: 66px; transform: translate(-50%, -94%); transition: left .12s linear, top .12s linear; pointer-events: none; }
.actor svg { width: 100%; display: block; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .12)); }
.actor .tag {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; white-space: nowrap;
  background: #fff; border: 2px solid var(--ink); border-radius: 8px; font-size: 12px; padding: 0 6px; line-height: 1.4;
}
.actor.me .tag { background: var(--yellow); }
.actor.out { filter: grayscale(1); opacity: .45; }
.actor.static { position: relative; transform: none; left: auto; top: auto; }
.bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; z-index: 50;
  background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 3px 9px; font-size: 13px;
  font-family: 'Malgun Gothic', sans-serif; width: max-content; max-width: 170px; text-align: center; word-break: break-all;
  animation: pop .2s ease-out; box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.bubble::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.bubble.strike { text-decoration: line-through; color: #c33; }
.bubble.big { font-family: 'Jua', sans-serif; font-size: 17px; }
@keyframes pop { from { transform: translateX(-50%) scale(.5); opacity: 0; } }

/* 대기실 */
.waiting { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 18px; gap: 12px; }
.mode-card { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 14px 20px; max-width: 560px; text-align: center; box-shadow: var(--shadow); }
.mode-card .mc-icon { font-size: 44px; }
.mode-card h3 { font-size: 26px; margin: 2px 0 6px; }
.mode-card p { margin: 0; font-family: 'Malgun Gothic', sans-serif; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.wait-floor { margin-top: auto; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; align-items: flex-end; padding: 30px 10px 34px; }
.wait-floor .actor { width: 78px; }
.wait-floor .crown { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 20px; }
.wait-tip { color: var(--ink-soft); font-size: 15px; }
.mode-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.mode-pick .btn.on { background: var(--yellow); }

/* 타이머 바 */
.timer { height: 12px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; overflow: hidden; width: 100%; }
.timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--mint), var(--yellow)); }
.timer.hurry i { background: var(--red); }

/* OX */
.ox { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ox-q { background: #fff; border-bottom: 3px solid var(--ink); padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.ox-qline { display: flex; gap: 10px; align-items: center; }
.ox-no { background: var(--purple); color: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 1px 10px; white-space: nowrap; }
.ox-text { font-size: 22px; flex: 1; }
.ox-field { flex: 1; position: relative; display: flex; cursor: pointer; }
.ox-side { flex: 1; display: grid; place-items: center; transition: background .3s; }
.ox-side span { font-size: 170px; line-height: 1; opacity: .2; -webkit-text-stroke: 4px var(--ink); color: transparent; pointer-events: none; }
.ox-side.o { background: #e3f3ff; }
.ox-side.x { background: #ffe8ec; }
.ox-side.o span { color: var(--blue); }
.ox-side.x span { color: var(--red); }
.ox-side.right { background: #c9f5d6; }
.ox-side.right span { opacity: .55; }
.ox-side.wrong { background: #ddd; }
.ox-line { width: 6px; background: repeating-linear-gradient(180deg, var(--ink) 0 14px, transparent 14px 24px); }
.ox-actors { position: absolute; inset: 22px 20px 26px 20px; pointer-events: none; }
.ox-exp { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(92%, 640px); z-index: 60; }
.exp-card { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); text-align: center; animation: rise .3s; }
.exp-card .ans { font-size: 24px; }
.exp-card p { margin: 4px 0 0; font-family: 'Malgun Gothic', sans-serif; font-size: 14px; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }

/* 공용 오버레이 */
.overlay-msg {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 80; font-size: 46px; color: #fff;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); white-space: nowrap; animation: zoom .4s ease-out; pointer-events: none;
}
@keyframes zoom { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }

/* 쿵쿵따 */
.kung { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 14px; gap: 10px; background: linear-gradient(180deg, #fff3f8, #ffe9c9); }
.kung-chain { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 36px; }
.kung-chain .w { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 2px 10px; font-size: 17px; }
.kung-chain .w.last { background: var(--yellow); font-size: 20px; animation: pop2 .3s; }
.kung-chain .arrow { align-self: center; color: var(--ink-soft); }
@keyframes pop2 { from { transform: scale(.4); } }
.kung-need { display: flex; gap: 10px; align-items: center; }
.kung-need .ch { font-size: 64px; width: 96px; height: 96px; display: grid; place-items: center; background: #fff; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); }
.kung-need .or { font-size: 18px; color: var(--ink-soft); }
.kung-chant { font-size: 40px; height: 50px; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); letter-spacing: 6px; }
.kung-chant span { display: inline-block; animation: hop .25s ease-out; }
@keyframes hop { from { transform: translateY(-16px) scale(1.4); } }
.kung-msg { min-height: 24px; font-size: 18px; text-align: center; }
.kung-msg.bad { color: #d33; }
.kung .timer { max-width: 380px; }
.kung-ring { margin-top: auto; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; align-items: flex-end; padding: 26px 0 24px; }
.kung-ring .actor { width: 70px; transition: transform .2s; }
.kung-ring .actor.turn { transform: translateY(-12px) scale(1.12); }
.kung-ring .actor.turn::before { content: '▼'; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); color: var(--red); font-size: 18px; animation: bob 0.6s infinite; }
.kung-input { display: flex; gap: 8px; }
.kung-input input { font-size: 24px; width: 180px; text-align: center; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-5px); } }
.vote-box { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 16px; text-align: center; box-shadow: var(--shadow); }
.vote-box .vw { font-size: 26px; color: #d2691e; }

/* 노래 맞추기 */
.melody { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px; background: radial-gradient(circle at 50% 40%, #fff6d6, #ffd9e6 70%, #e2d4ff); }
.round-line { display: flex; gap: 10px; align-items: center; width: min(520px, 100%); }
.round-line .rn { white-space: nowrap; background: var(--purple); color: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 1px 10px; }
.record { width: 170px; height: 170px; border-radius: 50%; border: 4px solid var(--ink); background: repeating-radial-gradient(circle, #333 0 3px, #222 3px 6px); position: relative; box-shadow: var(--shadow); }
.record::after { content: '♪'; position: absolute; inset: 52px; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink); display: grid; place-items: center; font-size: 30px; color: #fff; }
.record.spin { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.notes-fly { position: absolute; font-size: 28px; animation: fly 2s ease-out forwards; pointer-events: none; }
@keyframes fly { to { transform: translate(var(--dx), -120px) rotate(20deg); opacity: 0; } }
.mel-hint { font-size: 22px; min-height: 30px; background: #fff; border: 2px dashed var(--ink); border-radius: 12px; padding: 4px 14px; }
.mel-hint:empty { visibility: hidden; }
.mel-answer { font-size: 28px; min-height: 40px; text-align: center; }
.mel-tip { color: var(--ink-soft); }

/* 노래방 */
.sing { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: linear-gradient(180deg, #2c2049, #4a2d6b); color: #fff; }
.sing-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sing-head .st { font-size: 24px; flex: 1; text-shadow: 0 2px 0 #000; }
.sing canvas { width: 100%; flex: 1; min-height: 180px; background: #1d1533; border: 3px solid #000; border-radius: 14px; }
.sing-bottom { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.sing-score { background: #fff; color: var(--ink); border: 3px solid #000; border-radius: 14px; padding: 6px 16px; text-align: center; min-width: 120px; }
.sing-score b { display: block; font-size: 36px; font-weight: normal; }
.sing-live { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.live-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.live-row .ln { width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-row .lb { flex: 1; height: 12px; background: rgba(255,255,255,.15); border-radius: 8px; overflow: hidden; }
.live-row .lb i { display: block; height: 100%; background: linear-gradient(90deg, #ff8fb1, #ffd84d); transition: width .4s; }
.live-row .lv { width: 40px; text-align: right; }
.sing-keys { font-size: 13px; opacity: .85; }
.sing-keys kbd { background: #fff; color: var(--ink); border-radius: 5px; padding: 0 5px; border: 1.5px solid #000; margin: 0 1px; font-family: inherit; }
.sing .btn { color: var(--ink); }

/* 타자 */
.typing { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: linear-gradient(180deg, #eaf7ff, #f4fff0); }
.ty-sentence { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 14px 18px; font-size: 26px; line-height: 1.6; font-family: 'Malgun Gothic', sans-serif; letter-spacing: .5px; min-height: 64px; }
.ty-sentence span.ok { color: #1f9d5b; }
.ty-sentence span.bad { color: #fff; background: var(--red); border-radius: 3px; }
.ty-sentence span.cur { border-bottom: 3px solid var(--blue); }
.ty-input { font-size: 22px !important; font-family: 'Malgun Gothic', sans-serif !important; width: 100%; }
.ty-tracks { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow: auto; }
.track { position: relative; height: 54px; border-bottom: 2px dashed rgba(61,44,62,.25); margin: 0 40px 0 30px; }
.track .actor { width: 44px; top: 100%; transition: left .3s linear; }
.track .actor .tag { display: none; }
.track .tn { position: absolute; left: -30px; bottom: 4px; font-size: 12px; width: 70px; color: var(--ink-soft); }
.track .flag { position: absolute; right: -34px; bottom: 2px; font-size: 24px; }
.track .rk { position: absolute; right: -2px; top: 2px; font-size: 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; padding: 0 6px; }

/* 결과 표 */
.result-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.result-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 4px 10px; }
.result-row.first { background: #fff3c4; }
.result-row .rr { font-size: 22px; width: 36px; text-align: center; }
.result-row .ra { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); display: grid; place-items: center; background: var(--sky-2); }
.result-row .ra svg { width: 46px; }
.result-row .rn { flex: 1; }
.result-row .rs { color: var(--ink-soft); }
.result-row .rc { color: #b8860b; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.mini-table td { padding: 4px 10px; border-bottom: 1px solid #eee; }

/* 꾸미기 */
.dress-grid { flex: 1; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; min-height: 0; }
.dress-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mirror { width: 230px; height: 290px; border: 4px solid var(--ink); border-radius: 120px 120px 20px 20px; background: radial-gradient(circle at 50% 35%, #ffffff, #d7f0ff); display: grid; place-items: center; padding: 10px 20px 0; box-shadow: inset 0 -20px 0 #f1d9a8; }
.mirror svg { width: 180px; }
.dress-unowned { font-size: 14px; color: #c0392b; text-align: center; min-height: 20px; }
.dress-shop { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { border: 3px solid var(--ink); border-radius: 12px; padding: 5px 12px; background: #fff; cursor: pointer; }
.tab.on { background: var(--yellow); }
.dress-filter { font-size: 14px; color: var(--ink-soft); }
.item-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; align-content: start; padding: 4px; }
.item-card { border: 3px solid var(--ink); border-radius: 14px; background: #fff; padding: 8px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; position: relative; }
.item-card:hover { transform: translateY(-2px); }
.item-card.on { background: #fff3c4; box-shadow: 0 0 0 3px var(--yellow); }
.item-card .thumb { width: 84px; height: 84px; border-radius: 12px; background: var(--sky-2); display: grid; place-items: center; overflow: hidden; }
.item-card .thumb svg { width: 84px; height: 84px; }
.item-card .iname { font-size: 15px; }
.item-card .iprice { font-size: 13px; }
.item-card .owned { color: #1f9d5b; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer; }
.swatch.on { box-shadow: 0 0 0 4px var(--yellow); }
.color-section { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; }

/* 알바 */
#scr-job { justify-content: center; }
.job-panel { flex: 1; max-width: 1100px; display: flex; flex-direction: column; min-height: 0; overflow: auto; background: linear-gradient(180deg, #fff9ef, #fdebd3); }
.job-intro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; }
.job-intro h2 { font-size: 34px; }
.job-intro p { margin: 0; font-family: 'Malgun Gothic', sans-serif; color: var(--ink-soft); line-height: 1.7; }
.job-hud { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.job-hud .hud { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 3px 12px; font-size: 18px; }
.job-hud .hud.time { background: var(--yellow); }
.counter { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0; padding: 14px 12px 0; border-radius: 16px; background: linear-gradient(180deg, #ffe7c2 0%, #ffe7c2 70%, #a86f45 70%, #8d5a36 100%); border: 3px solid var(--ink); min-height: 230px; }
.cust-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; position: relative; }
.cust { display: flex; flex-direction: column; align-items: center; animation: walkin .4s ease-out; }
.cust.leave-happy { animation: leave .5s forwards; }
.cust.leave-angry { animation: leave .5s forwards; filter: hue-rotate(-30deg) saturate(1.6); }
@keyframes walkin { from { transform: translateX(60px); opacity: 0; } }
@keyframes leave { to { transform: translateX(-60px); opacity: 0; } }
.cust svg { width: 92px; }
.order-bubble { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 4px 10px; font-size: 17px; text-align: center; margin-bottom: 4px; white-space: nowrap; }
.order-bubble .oi { font-size: 26px; display: block; }
.patience { width: 90px; height: 9px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: #fff; margin-bottom: 6px; }
.patience i { display: block; height: 100%; background: var(--mint); }
.patience i.mid { background: var(--yellow); }
.patience i.low { background: var(--red); }
.slot-key { position: absolute; bottom: 6px; right: 8px; font-size: 12px; background: #fff; border: 1.5px solid var(--ink); border-radius: 5px; padding: 0 5px; }
.workbench { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: start; }
.cup-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cup { width: 110px; height: 140px; border: 4px solid var(--ink); border-top: 0; border-radius: 0 0 26px 26px; background: rgba(255,255,255,.7); display: flex; flex-direction: column-reverse; overflow: hidden; position: relative; }
.cup .layer { flex: 1; max-height: 26px; border-top: 2px solid rgba(0,0,0,.08); animation: fill .2s; display: grid; place-items: center; font-size: 14px; }
@keyframes fill { from { max-height: 0; } }
.cup-label { font-size: 13px; color: var(--ink-soft); min-height: 18px; text-align: center; }
.ing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ing { border: 3px solid var(--ink); border-radius: 14px; background: #fff; padding: 6px 4px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); display: flex; flex-direction: column; align-items: center; position: relative; }
.ing:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.ing .ie { font-size: 28px; }
.ing .ik { position: absolute; top: 2px; left: 6px; font-size: 11px; color: var(--ink-soft); }
.recipes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 13px; }
.recipe { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 3px 8px; font-family: 'Malgun Gothic', sans-serif; }
.recipe b { font-family: 'Jua', sans-serif; font-weight: normal; }
.recipe.locked { opacity: .35; }
.float-money { position: absolute; font-size: 22px; color: #1f9d5b; -webkit-text-stroke: 1px #fff; animation: up 1s forwards; pointer-events: none; z-index: 10; }
.float-money.bad { color: #d33; }
@keyframes up { to { transform: translateY(-50px); opacity: 0; } }

/* 모달 & 토스트 */
.modal { position: fixed; inset: 0; background: rgba(40, 30, 50, .45); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal-box { width: min(480px, 100%); max-height: 90vh; overflow: auto; animation: rise .25s; }
.modal-box h2 { font-size: 26px; text-align: center; margin-bottom: 8px; }
.modal-box .field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.modal-box .field input { width: 100%; }
.mode-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.mode-opt { border: 3px solid var(--ink); border-radius: 12px; padding: 8px; background: #fff; cursor: pointer; text-align: center; }
.mode-opt.on { background: var(--yellow); }
.mode-opt .mi { font-size: 26px; display: block; }
#toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; }
.toast { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 18px; box-shadow: var(--shadow); animation: rise .25s; font-size: 16px; }
.toast.good { background: #e3ffef; }
.toast.bad { background: #ffe8e8; }

/* 모바일 */
@media (max-width: 900px) {
  #app { height: auto; min-height: 100vh; }
  .lobby-grid, .room-grid, .dress-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .rooms-panel, .users-panel, .lobby-chat { grid-column: auto; grid-row: auto; }
  .rooms-panel { min-height: 300px; }
  .users-panel { max-height: 260px; }
  .lobby-chat { height: 260px; }
  .room-side .chat-panel { height: 280px; }
  .players-panel { max-height: none; }
  #stage { min-height: 480px; }
  .logo.big { font-size: 40px; }
  .workbench { grid-template-columns: 1fr; }
  .ox-text { font-size: 18px; }
  .ox-side span { font-size: 110px; }
}

/* ── 일러스트 아바타 이미지 ── */
img.avatar { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.actor img.avatar { filter: drop-shadow(0 4px 2px rgba(60, 30, 60, .18)); }
.actor { width: 84px; }
.wait-floor .actor { width: 104px; }
.kung-ring .actor { width: 90px; }
.track .actor { width: 52px; }
.me-avatar img.avatar, .user-row .ua img.avatar, .pl-row .pa img.avatar, .result-row .ra img.avatar { width: 100%; margin: 0; }
.mirror { width: 250px; height: 350px; padding: 8px 6px 0; overflow: hidden; }
.mirror img.avatar { width: 205px; }
.item-card .thumb img.avatar { width: 92px; }
.cust img.avatar { width: 110px; }
.login-avatar { width: 170px; }

/* ── 광장 ── */
#scr-plaza { min-height: 0; }
.plaza-wrap { flex: 1; position: relative; padding: 0; overflow: hidden; min-height: 460px; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.plaza-help { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(60, 36, 70, .72); color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 13px; pointer-events: none; white-space: nowrap; }
.plaza-help b { color: var(--yellow); font-weight: normal; }
.plaza-chat { position: absolute; left: 12px; bottom: 12px; width: min(380px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 6px; }
.plaza-chat .chat-log { max-height: 150px; background: rgba(255, 253, 246, .82); border: 2px solid var(--ink); border-radius: 12px; padding: 6px 8px; }
.plaza-chat .chat-log:empty { display: none; }
.plaza-chat .chat-form input { background: rgba(255, 255, 255, .92); }

/* ── 점포 ── */
.modal-box.wide { width: min(760px, 100%); }
.town-head { position: relative; text-align: center; padding: 30px 10px 10px; margin: -14px -14px 6px; border-bottom: 3px solid var(--ink); background: #fff8ee; border-radius: 15px 15px 0 0; overflow: hidden; }
.town-head .awning { position: absolute; top: 0; left: 0; right: 0; height: 20px; background: repeating-linear-gradient(90deg, var(--c) 0 26px, #fff 26px 52px); border-bottom: 2px solid rgba(0, 0, 0, .15); }
.town-head h2 { margin: 4px 0 2px; }
.town-head .sub { color: var(--ink-soft); font-size: 14px; }
.town-vacant > p { text-align: center; font-family: 'Malgun Gothic', sans-serif; font-size: 14px; }
.deal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deal-card { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.deal-card h3 { font-size: 20px; }
.deal-card p { margin: 0; font-family: 'Malgun Gothic', sans-serif; font-size: 14px; }
.intro { text-align: center; font-family: 'Malgun Gothic', sans-serif; color: var(--ink-soft); }
.goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.good { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.good.off { opacity: .55; }
.good-img { width: 110px; background: radial-gradient(circle, #fff, #ffe9f3); border-radius: 12px; }
.good input[type=number] { width: 70px; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 4px; }
.good .owned { color: #1f9d5b; }
.town input:not([type]), .town input[type=number] { border: 3px solid var(--ink); border-radius: 12px; padding: 6px 10px; }

/* ── 디자인 공방 ── */
.workshop h2 { text-align: center; }
.ws-body { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; align-items: flex-start; }
.ws-grid { display: grid; grid-template-columns: repeat(8, 34px); grid-template-rows: repeat(6, 34px); gap: 2px; background: var(--ink); border: 3px solid var(--ink); border-radius: 8px; padding: 2px; touch-action: none; user-select: none; }
.ws-grid i { background: #fff; border-radius: 3px; cursor: crosshair; }
.ws-palette { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 10px 0; max-width: 300px; }
.ws-palette button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer; }
.ws-palette button.on { box-shadow: 0 0 0 4px var(--yellow); }
.ws-side { width: 220px; }
.ws-preview { width: 200px; margin: 0 auto; background: radial-gradient(circle, #fff, #ffe9f3); border: 3px solid var(--ink); border-radius: 16px; }
.workshop input { width: 100%; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 10px; }
@media (max-width: 700px) { .deal { grid-template-columns: 1fr; } }

/* ── 서울 도심 업데이트 ── */
#topbar nav { align-items: center; }
.where { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 20px; padding: 3px 12px; font-size: 16px; margin-right: 6px; }
.job-wrap { flex: 1; display: flex; flex-direction: column; gap: 8px; max-width: 1100px; margin: 0 auto; min-height: 0; width: 100%; }
.job-wrap .out-btn { align-self: flex-start; }
.shop-note { color: var(--ink-soft); font-size: 14px; }
#scr-dress[data-mode="cash"] .dress-shop { background: linear-gradient(180deg, #fff6fb, #f3e8ff); }
#scr-dress[data-mode="cash"] #dress-title { color: #b0379a; }
.item-card .dual { display: flex; flex-direction: column; line-height: 1.25; }
.item-card .dual b { color: #b0379a; font-weight: normal; font-size: 15px; }
.item-card .dual small { color: #a07a2a; font-size: 12px; }
.item-card.r-rare { border-color: #4f8fe0; }
.item-card.r-epic { border-color: #9b5be0; box-shadow: 0 0 0 2px #e6d6ff; }
.item-card.r-legend { border-color: #e0a020; box-shadow: 0 0 0 3px #ffe9a8; background: linear-gradient(180deg, #fffdf2, #fff3d0); }
.item-card .row.center { gap: 4px; }
.fullmap h2 { text-align: center; }
.fm-img { position: relative; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
.fm-img img { display: block; width: 100%; }
.fm-pin { position: absolute; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .92); border: 2px solid var(--ink); border-radius: 12px; padding: 2px 10px; text-align: center; white-space: nowrap; font-size: 15px; }
.fm-pin i { display: block; font-style: normal; font-size: 12px; color: #c0392b; }
.fm-pin.here { background: var(--yellow); animation: bob 1.2s ease-in-out infinite; z-index: 2; }
.fm-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: 10px 0 4px; }
.fm-legend div { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 8px; font-size: 13px; }
.fm-legend div.here { background: #fff3c4; }
.fm-legend b { display: block; font-weight: normal; font-size: 15px; }
.fm-legend span { color: var(--ink-soft); font-family: 'Malgun Gothic', sans-serif; }

/* ── 채팅 채널 · 파티 · 음성 ── */
.chatbox { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; }
.chat-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ctab { border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 1px 9px; font-size: 13px; cursor: pointer; }
.ctab.on { background: var(--yellow); }
.chatbox .chat-log { flex: 1; min-height: 60px; }
.chatbox .chat-form { display: flex; gap: 6px; }
.chatbox .ch-input { flex: 1; padding: 6px 10px; }
.chatbox .wh-to { width: 92px; padding: 6px 8px; }
.ch-pick { border: 2px solid var(--ink); border-radius: 10px; padding: 0 10px; cursor: pointer; white-space: nowrap; font-size: 14px; }
.tag-ch { font-size: 11px; border: 1.5px solid currentColor; border-radius: 6px; padding: 0 4px; margin-right: 5px; opacity: .8; font-family: 'Jua', sans-serif; }
.chat-log b[data-nick] { cursor: pointer; }
.plaza-chat { width: min(460px, calc(100% - 24px)); }
.plaza-chat .chatbox { background: rgba(255, 253, 246, .88); border: 2px solid var(--ink); border-radius: 12px; padding: 6px; }
.plaza-chat .chat-log { max-height: 150px; }
.plaza-tools { justify-content: flex-start; }
.lobby-chat .chatbox { height: 100%; }
.voice-btn.on { background: var(--mint); }
.voice-btn.muted { background: #ddd; }
.party-box { position: absolute; left: 12px; top: 50px; width: 210px; padding: 8px; background: rgba(255, 253, 246, .92); z-index: 5; }
.pb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pb-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.pb-row .pa { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid #1f9d5b; flex: none; background: var(--sky-2); }
.pb-row .pa img { width: 120%; margin: 6% 0 0 -10%; }
.pb-row .pn { flex: 1; display: flex; flex-direction: column; font-size: 14px; line-height: 1.1; min-width: 0; }
.pb-row .pn small { color: var(--ink-soft); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-row .kick { background: none; border: 0; cursor: pointer; color: var(--ink-soft); }
.pmenu { position: fixed; z-index: 300; display: flex; flex-direction: column; gap: 4px; padding: 8px; min-width: 160px; }
.pmenu b { font-weight: normal; font-size: 16px; text-align: center; }
.pmenu button { border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 4px 10px; cursor: pointer; text-align: left; font-size: 14px; }
.pmenu button:hover { background: var(--yellow); }
.invite-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; animation: rise .25s; }

/* ── 로그인 ── */
.continue-card { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; }
.cc-avatar { width: 150px; animation: bob 1.6s ease-in-out infinite; }
.linkish { background: none; border: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font-size: 14px; }
.login-tabs { justify-content: center; margin-top: 12px; }
.social-row { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.btn.social { display: block; text-decoration: none; text-align: center; }
.s-kakao { background: #fee500 !important; color: #191919 !important; }
.s-naver { background: #03c75a !important; color: #fff !important; }
.s-google { background: #fff !important; color: #3c4043 !important; }
#login-form input[type=password] { text-align: center; font-size: 20px; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; }
.chat-log .m { position: relative; }
.chat-log .m .acts { display: none; position: absolute; right: 0; top: -2px; background: #fff; border: 1.5px solid var(--ink); border-radius: 8px; padding: 0 2px; gap: 1px; }
.chat-log .m:hover .acts { display: inline-flex; }
.chat-log .acts button { background: none; border: 0; cursor: pointer; font-size: 13px; padding: 1px 3px; border-radius: 6px; }
.chat-log .acts button:hover { background: var(--yellow); }
.report-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; font-family: 'Malgun Gothic', sans-serif; font-size: 14px; }
.modal-box textarea { width: 100%; border: 3px solid var(--ink); border-radius: 12px; padding: 8px; font-family: 'Malgun Gothic', sans-serif; resize: vertical; }

/* ── 프로필 ── */
.profile h2 { margin-bottom: 4px; }
.pf-top { display: flex; gap: 14px; align-items: flex-start; }
.pf-av { width: 130px; flex: none; background: linear-gradient(#fff6fb, #ffe3f1); border: 3px solid var(--ink); border-radius: 16px; padding: 4px; }
.pf-av svg { width: 100%; height: auto; display: block; }
.pf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-info h2 { text-align: left; }
.pf-status { font-size: 15px; color: #6b4a7a; }
.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-sec { margin: 10px 0; background: #fff8fc; border: 2px dashed #e7b9d3; border-radius: 12px; padding: 8px 10px; }
.pf-sec p { margin: 4px 0 0; line-height: 1.5; word-break: break-all; }
.muted { color: #a99; }
.pf-rec .row { align-items: center; flex-wrap: wrap; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #e74c3c; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.me-avatar { cursor: pointer; }
.win-banner { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(#fff7c2, #ffd36b); border: 4px solid var(--ink); border-radius: 24px; padding: 10px 26px 14px; box-shadow: 0 8px 0 rgba(0,0,0,.15);
  animation: winpop .5s cubic-bezier(.2,1.6,.4,1); pointer-events: none; }
.win-banner b { font-size: 26px; }
.wb-av { width: 120px; animation: hop .6s ease-in-out infinite alternate; }
.wb-av svg { width: 100%; height: auto; display: block; }
@keyframes winpop { from { transform: translateX(-50%) scale(.3); opacity: 0; } }
@keyframes hop { to { transform: translateY(-10px); } }
@media (max-width: 520px) { .pf-top { flex-direction: column; align-items: center; } .pf-av { width: 110px; } }
@media (max-width: 1100px) { .nav-btn { padding: 6px 8px; font-size: 15px; } #topbar nav { gap: 2px; } .logo { font-size: 22px; } }

/* ── 미니게임 아바타 (관객석·동작) ── */
.crowd { display: flex; gap: 10px; justify-content: center; align-items: flex-end; flex-wrap: wrap; margin-top: auto; padding: 18px 0 20px; }
.crowd .actor { width: 78px; transition: transform .2s; }
.mel-crowd { width: 100%; background: linear-gradient(transparent, rgba(255,255,255,.55)); border-radius: 0 0 16px 16px; }
.sing-crowd { padding: 8px 0 18px; background: radial-gradient(ellipse at 50% 100%, rgba(255,230,120,.35), transparent 70%); }
.sing-crowd .actor { width: 70px; }
.sing-crowd .actor .tag { color: var(--ink); }
.sing-crowd .actor::after { content: '🎤'; position: absolute; right: -6px; top: 42%; font-size: 20px; }
.actor.warm svg, .actor.warm img.avatar { filter: drop-shadow(0 0 6px #ffe27a); }
.actor.hot svg, .actor.hot img.avatar { filter: drop-shadow(0 0 10px #ffd400) drop-shadow(0 0 18px #ff8ad8); }
.actor.hot::before { content: '✨'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 20px; animation: bob .5s infinite; }
.grooving .crowd .actor:not(.cheer) { animation: groove .5s ease-in-out infinite alternate; }
.grooving .crowd .actor:nth-child(2n) { animation-delay: .25s; }
@keyframes groove { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-6px) rotate(3deg); } }
.actor.cheer { animation: cheer .45s ease-out 3; }
.track .actor.cheer { animation: cheer-run .45s ease-out 3; }
@keyframes cheer { 40% { transform: translateY(-26px) scale(1.08); } }
@keyframes cheer-run { 40% { transform: translate(-50%, calc(-94% - 18px)); } }
.track { height: 82px; }
.track .actor { width: 66px; }
.track .tn { bottom: 26px; }

/* ── 결과 시상대 ── */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 18px 0 8px; }
.pod { display: flex; flex-direction: column; align-items: center; width: 130px; }
.pod-av { position: relative; width: 104px; animation: rise .5s both; }
.pod.p1 .pod-av { width: 124px; animation: rise .5s both, hop .6s .5s ease-in-out infinite alternate; }
.pod.p2 .pod-av { animation-delay: .15s; }
.pod.p3 .pod-av { animation-delay: .3s; }
.pod-av svg, .pod-av img.avatar { width: 100%; height: auto; display: block; }
.pod-crown { position: absolute; top: -18px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 30px; z-index: 2; }
.pod-name { font-size: 15px; margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pod.me .pod-name { background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; padding: 0 6px; }
.pod-step { width: 100%; border: 3px solid var(--ink); border-bottom: none; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; font-size: 13px; }
.pod-step b { font-size: 28px; font-weight: normal; line-height: 1.1; }
.pod.p1 .pod-step { height: 104px; background: linear-gradient(#ffe680, #ffc93c); }
.pod.p2 .pod-step { height: 76px; background: linear-gradient(#f2f4f8, #c9cfdb); }
.pod.p3 .pod-step { height: 56px; background: linear-gradient(#ffd7b0, #e7a46a); }
.pod-step .rc { color: #8a5a00; }
.result-modal .result-list:empty { display: none; }
@media (max-width: 520px) { .pod { width: 96px; } .pod-av { width: 80px; } .pod.p1 .pod-av { width: 96px; } }
.track .tn { display: none; }
.track .actor .tag { display: block; font-size: 11px; padding: 0 5px; }
.ty-tracks { padding-bottom: 14px; }

/* ── 쿵쿵따 단어 추천 ── */
.kung-suggest { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; background: #e9fff3; border: 3px dashed #3fb27f; border-radius: 14px; padding: 6px 10px; }
.kung-suggest.pop { animation: pop-in .35s cubic-bezier(.2, 1.6, .4, 1); }
.kung-suggest input { width: 110px; text-align: center; }
.ks-label { font-size: 14px; color: #1d7a52; }
.kung-tips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 0; }
.tip-chip { border: 3px solid var(--ink); background: #fffbe0; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 18px; cursor: pointer; animation: pop-in .35s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 3px 0 var(--ink); }
.tip-chip:hover { transform: translateY(-2px); background: #fff3a8; }
.tip-chip small { font-size: 11px; color: var(--ink-soft); }
.bubble.tip { background: #e9fff3; border-color: #3fb27f; }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } }

/* ── 영화 맞추기 ── */
.movie { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: radial-gradient(circle at 50% 0%, #4a2a55, #1f1530 75%); color: #fff; }
.movie .round-line .rn { color: var(--ink); }
.mv-screen { display: flex; align-items: stretch; background: #fffdf5; color: var(--ink); border: 4px solid #000; border-radius: 16px; overflow: hidden; box-shadow: 0 0 40px rgba(255, 230, 160, .35); min-height: 210px; }
.mv-reel { width: 22px; flex: none; background: repeating-linear-gradient(#222 0 10px, #fff 10px 16px, #222 16px 26px); background-size: 100% 26px; opacity: .9; }
.mv-reel.l { border-right: 3px solid #000; } .mv-reel.r { border-left: 3px solid #000; }
.rolling .mv-reel { animation: reel 0.6s linear infinite; }
@keyframes reel { to { background-position: 0 26px; } }
.mv-body { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.mv-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mv-tags span { background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; padding: 0 10px; font-size: 14px; animation: pop-in .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.mv-tags span:nth-child(2) { animation-delay: .08s; } .mv-tags span:nth-child(3) { animation-delay: .16s; }
.mv-hints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mv-hint { display: flex; gap: 8px; align-items: baseline; font-size: 17px; line-height: 1.45; animation: slide-in .35s ease-out; }
.mv-hint b { flex: none; background: var(--pink); color: #fff; border-radius: 8px; padding: 0 7px; font-size: 13px; font-weight: normal; }
.mv-hint i { margin-left: auto; flex: none; font-style: normal; font-size: 12px; color: var(--ink-soft); }
.mv-hint.cho .tx { font-size: 22px; letter-spacing: 3px; color: #8a3cc7; }
.mv-answer:empty { display: none; }
.mv-answer { margin-top: auto; text-align: center; background: #fff3c4; border: 3px solid var(--ink); border-radius: 12px; padding: 6px; animation: pop-in .4s cubic-bezier(.2, 1.6, .4, 1); }
.mv-title { font-size: 26px; }
.mv-tip { text-align: center; font-size: 13px; opacity: .85; }
.mv-crowd .actor .tag { color: var(--ink); }
.revealed .mv-screen { box-shadow: 0 0 60px rgba(255, 220, 120, .7); }
@keyframes slide-in { from { transform: translateX(-16px); opacity: 0; } }

/* ── 정시 OX 대회 ── */
.ox-pill { border: 3px solid var(--ink); border-radius: 999px; background: #eaf5ff; padding: 3px 12px; font: inherit; font-size: 14px; cursor: default; white-space: nowrap; }
.ox-pill small { color: var(--ink-soft); font-size: 12px; }
.ox-pill.open { background: var(--yellow); cursor: pointer; animation: ox-pulse 1.2s ease-in-out infinite; }
.ox-pill.playing { background: #ffd9e6; }
.ox-pill .ox-join { background: var(--red, #ff6b81); color: #fff; border-radius: 999px; padding: 0 8px; margin-left: 4px; }
@keyframes ox-pulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(255, 216, 77, .35); } }
.ox-card { border-style: dashed; background: linear-gradient(90deg, #eaf5ff, #fff); }
.ox-card.open { border-style: solid; background: linear-gradient(90deg, #fff3a8, #fff); animation: ox-pulse 1.6s ease-in-out infinite; }
.ox-card .rtitle small { font-size: 12px; color: var(--ink-soft); margin-left: 6px; }
.ox-wait { background: radial-gradient(circle at 50% 20%, #eaf5ff, #cfe8ff 70%); overflow: auto; }
.ox-wait-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ox-big { font-size: 44px; letter-spacing: 12px; animation: hop .7s ease-in-out infinite alternate; }
.ox-count-box { font-size: 20px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 4px 18px; box-shadow: 0 4px 0 var(--ink); }
.ox-count-box b { font-size: 34px; color: #e2445c; font-weight: normal; margin-left: 6px; }
.ox-floor { flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.ox-floor .actor { width: 70px; }
.ox-invite { background: #fff8d8; }
.actor .bubble { color: var(--ink); }

/* ═════════════ 전체 애니메이션 ═════════════ */
/* 화면 전환: 살짝 아래에서 떠오르며 나타남 */
.screen.active { animation: scr-in .38s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes scr-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
#topbar:not([hidden]) { animation: drop-in .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes drop-in { from { transform: translateY(-30px); opacity: 0; } }
/* 버튼: 올리면 통통, 누르면 꾹 */
.btn, .nav-btn, .icon-btn, .room-card, .mode-opt, .tip-chip { transition: transform .15s cubic-bezier(.2, 1.6, .4, 1), filter .15s, box-shadow .15s; }
.btn:not(:disabled):hover, .room-card:hover, .mode-opt:hover { transform: translateY(-2px) scale(1.02); }
.nav-btn:hover, .icon-btn:hover { transform: translateY(-2px) rotate(-2deg); }
.btn:not(:disabled):active, .room-card:active { transform: translateY(2px) scale(.96); }
/* 모달 · 알림 */
.modal:not([hidden]) { animation: fade-in .2s ease-out; }
.modal-box { animation: modal-pop .38s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes modal-pop { from { transform: scale(.7) translateY(20px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
.toast, .invite-card { animation: toast-in .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes toast-in { from { transform: translateY(-24px) scale(.8); opacity: 0; } }
/* 채팅 줄이 옆에서 미끄러져 들어옴 */
.chat-log .m, #room-log > * { animation: slide-in .28s ease-out; }
/* 방 목록 · 접속자 목록 차례로 튀어나오기 */
.room-list > * { animation: pop-in .35s cubic-bezier(.2, 1.5, .4, 1) both; }
.room-list > *:nth-child(2) { animation-delay: .04s; } .room-list > *:nth-child(3) { animation-delay: .08s; }
.room-list > *:nth-child(4) { animation-delay: .12s; } .room-list > *:nth-child(5) { animation-delay: .16s; }
.room-list > *:nth-child(n+6) { animation-delay: .2s; }
.user-row, .pl-row, .pb-row { animation: slide-in .3s ease-out both; }
/* 대기실·관객석 아바타: 각자 다른 박자로 숨쉬듯 들썩 */
.wait-floor .actor, .crowd .actor:not(.cheer):not(.turn), .kung-ring .actor:not(.turn):not(.cheer):not(.out) { animation: idle 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.wait-floor .actor:nth-child(3n+1), .crowd .actor:nth-child(3n+1), .kung-ring .actor:nth-child(3n+1) { animation-delay: -.9s; }
.wait-floor .actor:nth-child(3n+2), .crowd .actor:nth-child(3n+2), .kung-ring .actor:nth-child(3n+2) { animation-delay: -1.7s; }
@keyframes idle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985) translateY(1px); } }
.grooving .crowd .actor:not(.cheer) { animation: groove .5s ease-in-out infinite alternate; }
.kung-ring .actor.turn { animation: turn-bob .8s ease-in-out infinite alternate; }
@keyframes turn-bob { from { transform: translateY(-12px) scale(1.12); } to { transform: translateY(-18px) scale(1.14); } }
.kung-ring .actor.cheer { animation: cheer .45s ease-out 2; }
.kung-ring .actor.out { animation: knocked .6s ease-in both; }
@keyframes knocked { 30% { transform: rotate(-12deg) translateY(-6px); } 100% { transform: rotate(0) translateY(4px); } }
/* 쿵쿵따 글자·단어가 튀어나오기 */
.kung-need .ch { animation: pop-in .4s cubic-bezier(.2, 1.8, .4, 1); }
.kung-chain .w.last { animation: flip-in .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes flip-in { from { transform: rotateX(90deg) scale(.6); opacity: 0; } }
.kung-chant span { display: inline-block; animation: chant .26s cubic-bezier(.2, 2, .4, 1); }
@keyframes chant { from { transform: scale(2.2) rotate(-10deg); opacity: 0; } }
/* OX: 맞힌 사람 점프, 탈락자 쓰러짐, 정답 도장 */
.ox .actor.cheer { animation: cheer-run .45s ease-out 2; }
.ox .actor.out { transition: filter .5s, opacity .5s; }
.fx-stamp { position: absolute; left: 50%; top: 42%; font-size: 150px; pointer-events: none; z-index: 30; transform: translate(-50%, -50%);
  animation: stamp 1.6s cubic-bezier(.2, 1.4, .4, 1) both; text-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
@keyframes stamp { 0% { transform: translate(-50%, -50%) scale(3) rotate(-20deg); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(.9) rotate(-8deg); opacity: 1; }
  26% { transform: translate(-50%, -50%) scale(1.05) rotate(-8deg); } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 0; } }
/* 옷 갈아입기: 펑! 반짝 */
.mirror { position: relative; }
.mirror svg, .mirror img { animation: sway 3.2s ease-in-out infinite; transform-origin: 50% 95%; }
@keyframes sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg) translateY(-2px); } }
.mirror.poof::after { content: '✨'; position: absolute; left: 50%; top: 35%; font-size: 64px; transform: translate(-50%, -50%); animation: poof .6s ease-out forwards; pointer-events: none; }
@keyframes poof { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
/* 결과 시상대 · 결과 줄 */
.result-row { animation: slide-in .35s ease-out both; }
.result-row:nth-child(2) { animation-delay: .1s; } .result-row:nth-child(3) { animation-delay: .2s; } .result-row:nth-child(n+4) { animation-delay: .3s; }
.pod-step { animation: grow-up .6s cubic-bezier(.2, 1.3, .4, 1) both; transform-origin: 50% 100%; }
.pod.p2 .pod-step { animation-delay: .1s; } .pod.p3 .pod-step { animation-delay: .2s; }
@keyframes grow-up { from { transform: scaleY(0); } }
/* 골드 · 색종이 */
.fx-float { position: fixed; z-index: 200; transform: translateX(-50%); font-size: 16px; pointer-events: none; animation: float-up 1.4s ease-out forwards; -webkit-text-stroke: .5px rgba(0,0,0,.2); }
.fx-float.up { color: #e0a800; } .fx-float.down { color: #e2445c; }
@keyframes float-up { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -6px) scale(1.15); opacity: 1; } to { transform: translate(-50%, -40px); opacity: 0; } }
.fx-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden; }
.fx-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
/* 로고·말풍선·배지 */
.logo { display: inline-block; animation: logo-bounce 4s ease-in-out infinite; }
@keyframes logo-bounce { 0%, 90%, 100% { transform: none; } 94% { transform: translateY(-4px) rotate(-2deg); } 97% { transform: translateY(0) rotate(1deg); } }
.bubble { animation: bubble-pop .32s cubic-bezier(.2, 1.8, .4, 1); transform-origin: 50% 100%; }
@keyframes bubble-pop { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); } }
#me-coins { display: inline-block; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ── 거래소 ── */
.ex-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.25fr); gap: 14px; height: 100%; min-height: 0; }
.ex-side, .ex-detail { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.ex-side h2 { font-size: 22px; }
.ex-tabs { gap: 6px; }
.ex-cats { flex-wrap: wrap; }
.ex-filter { gap: 6px; flex-wrap: wrap; align-items: center; }
.ex-filter input[type=text], #ex-search { flex: 1; min-width: 120px; }
.ex-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 4px; }
#ex-market { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
#ex-market[hidden], #ex-mine-list[hidden] { display: none; }
.ex-row { display: grid; grid-template-columns: 50px 1fr auto auto; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 4px 8px; text-align: left; font: inherit; cursor: pointer; }
.ex-row.on { background: #fff3c4; box-shadow: 0 0 0 3px var(--yellow); }
.ex-th { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--sky-2); display: grid; place-items: center; }
.ex-th img { width: 100%; }
.ex-nm { display: flex; flex-direction: column; min-width: 0; }
.ex-nm b { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-nm small { color: var(--ink-soft); font-size: 11px; } .ex-nm i { color: #1f9d5b; font-style: normal; }
.ex-px { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; } .ex-px b { font-weight: normal; } .ex-px em { color: #b9a; font-style: normal; font-size: 12px; }
.ex-ob { display: flex; flex-direction: column; font-size: 11px; align-items: flex-end; }
.ex-ask { color: #e2445c; } .ex-bid { color: #2a6db5; }
.ex-up { color: #e2445c; font-size: 12px; } .ex-down { color: #2a6db5; font-size: 12px; } .ex-flat { color: #998; font-size: 12px; }
.ex-hello { margin: auto; text-align: center; line-height: 1.6; }
.ex-big { font-size: 64px; animation: hop .8s ease-in-out infinite alternate; }
.ex-head { display: flex; gap: 12px; align-items: center; }
.ex-pv { width: 110px; flex: none; background: linear-gradient(#f2fbff, #dcefff); border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
.ex-pv img { width: 100%; display: block; }
.ex-info h3 { font-size: 24px; }
.ex-price { font-size: 26px; }
.ex-meta { font-size: 12px; color: var(--ink-soft); }
#ex-chart { width: 100%; height: 130px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; flex: none; }
.ex-trade { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; min-height: 0; overflow: auto; }
.ex-book { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ob-title { font-size: 14px; } .ob-title small { color: var(--ink-soft); font-size: 11px; }
.ob { position: relative; display: flex; justify-content: space-between; padding: 2px 8px; border-radius: 6px; cursor: pointer; overflow: hidden; }
.ob i { position: absolute; right: 0; top: 0; bottom: 0; opacity: .18; }
.ob.ask i { background: #e2445c; } .ob.bid i { background: #2a6db5; }
.ob.ask span:first-of-type { color: #e2445c; } .ob.bid span:first-of-type { color: #2a6db5; }
.ob:hover { background: #fff6d6; }
.ob.none { color: #b9a; cursor: default; justify-content: center; }
.ob-mid { text-align: center; background: #fff3c4; border-radius: 6px; padding: 2px; font-size: 12px; }
.ex-forms { display: flex; flex-direction: column; gap: 8px; }
.ex-form { display: grid; grid-template-columns: 40px 1fr auto; gap: 6px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 6px 8px; }
.ex-form small { grid-column: 1 / -1; font-size: 11px; color: var(--ink-soft); }
.ex-form.buy b { color: #2a6db5; font-weight: normal; } .ex-form.sell b { color: #e2445c; font-weight: normal; }
.ex-form input { width: 100%; }
.ex-mine, #ex-mine-list { font-size: 13px; }
.ex-my { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px dashed #e5d5e5; cursor: pointer; flex-wrap: wrap; }
.ex-my .btn { margin-left: auto; }
.ex-my small { color: var(--ink-soft); font-size: 11px; margin-left: auto; }
#ex-mine-list h3 { margin: 8px 0 4px; font-size: 16px; }
.mail-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin: 8px 0; }
.mail-row { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 6px 10px; animation: slide-in .3s ease-out both; }
.mail-row small { color: var(--ink-soft); font-size: 11px; }
@media (max-width: 860px) { .ex-grid { grid-template-columns: 1fr; height: auto; } .ex-list { max-height: 50vh; } .ex-trade { grid-template-columns: 1fr; } }

/* ── 레벨·출석·퀘스트·업적·랭킹 ── */
.lv-chip { display: flex; align-items: center; gap: 5px; border: 2px solid var(--ink); border-radius: 999px; background: #efe7ff; padding: 1px 9px; font: inherit; font-size: 13px; cursor: pointer; position: relative; }
.lv-chip b { font-weight: normal; color: #6a45c8; }
.lv-bar { width: 46px; height: 7px; background: #fff; border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; display: inline-block; }
.lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a98bff, #ff8ad8); }
.lv-bar.big { width: 200px; height: 11px; vertical-align: middle; }
.lv-dot { position: absolute; top: -7px; right: -7px; background: #ff6b81; color: #fff; border-radius: 999px; font-size: 11px; min-width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid #fff; animation: ox-pulse 1.4s infinite; }
.prog-tabs { justify-content: center; }
.prog-lv { text-align: center; margin: 6px 0; font-size: 18px; }
.prog-body { max-height: 60vh; overflow: auto; padding: 2px; }
.prog-body h3 { margin: 10px 0 6px; font-size: 17px; } .prog-body h3 small { color: var(--ink-soft); font-size: 12px; }
.att-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.att { background: #fff; border: 2px solid var(--ink); border-radius: 10px; text-align: center; padding: 4px 2px; display: flex; flex-direction: column; font-size: 12px; }
.att b { font-size: 20px; font-weight: normal; }
.att.got { background: #fff3a8; } .att.got::after { content: '✔'; color: #1f9d5b; }
.att.big { background: linear-gradient(#fff, #ffe0f0); } .att.now { animation: pop-in .5s cubic-bezier(.2, 1.8, .4, 1); box-shadow: 0 0 0 3px #ff8ad8; }
.quest, .ach { display: grid; grid-template-columns: 1fr 120px 70px; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 5px 9px; margin-bottom: 5px; font-size: 14px; }
.quest.done, .ach.done { background: #eafff2; }
.quest.bonus { grid-template-columns: 1fr 70px; }
.ach b { font-weight: normal; }
.qbar { position: relative; height: 14px; background: #f3eef7; border-radius: 7px; overflow: hidden; }
.qbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7ad9a8, #3fb27f); }
.qbar em { position: relative; font-style: normal; font-size: 11px; display: block; text-align: center; line-height: 14px; }
.qr { text-align: right; color: #b8860b; font-size: 13px; }
.titles { display: flex; flex-wrap: wrap; gap: 5px; }
.rank-list { display: flex; flex-direction: column; gap: 4px; }
.rank-row { display: grid; grid-template-columns: 34px 40px 1fr auto; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 3px 9px; }
.rank-row.me { background: #fff3c4; }
.rk-n { font-size: 18px; text-align: center; }
.rk-a { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); background: var(--sky-2); display: grid; place-items: center; }
.rk-a img { width: 100%; margin: 0; }
.rk-nm small { display: block; font-size: 10px; color: #9a5a00; } .rk-nm em { font-style: normal; font-size: 11px; color: #6a45c8; }
.rank-row b { font-weight: normal; }
.lvup { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 160; text-align: center; display: flex; flex-direction: column; pointer-events: none; animation: winpop .5s cubic-bezier(.2, 1.6, .4, 1); }
.lvup b { font-size: 54px; color: #fff; -webkit-text-stroke: 2.5px #6a45c8; paint-order: stroke fill; text-shadow: 0 5px 0 #6a45c8; letter-spacing: 2px; }
.lvup span { font-size: 34px; color: #ffd84d; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.lvup small { font-size: 16px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; margin: 4px auto 0; }
.ach-pop { position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%); z-index: 160; background: linear-gradient(#fff8d8, #ffe39a); border: 3px solid var(--ink); border-radius: 18px; padding: 8px 22px; text-align: center; display: flex; flex-direction: column; box-shadow: 0 6px 0 rgba(0,0,0,.15); animation: toast-in .5s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
.ach-pop b { font-size: 24px; font-weight: normal; } .ach-pop small { color: #7a5a00; }
.attend-pop { text-align: center; } .attend-pop p { margin: 8px 0; }
@media (max-width: 600px) { .quest, .ach { grid-template-columns: 1fr 80px; } .quest .qr, .ach .qr { grid-column: 2; } .att-row { gap: 2px; } }

/* ── 친구 ── */
#friends-btn { position: relative; } #friends-btn small { color: #1f9d5b; font-size: 12px; }
.friends h3 { margin: 10px 0 5px; font-size: 16px; } .friends h3 small { color: var(--ink-soft); font-size: 12px; }
.fr-add input, .fr-invite input { flex: 1; }
.fr-list { display: flex; flex-direction: column; gap: 4px; max-height: 38vh; overflow: auto; }
.fr-row { display: flex; align-items: center; gap: 6px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 3px 8px; }
.fr-row.on { background: #f1fff6; }
.fr-nm { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.fr-nm small { color: #9a5a00; font-size: 10px; } .fr-nm em { font-style: normal; color: #6a45c8; font-size: 11px; } .fr-nm i { font-style: normal; font-size: 11px; color: var(--ink-soft); }
.fr-invite { margin-top: 8px; background: #fff0f7; border: 2px dashed #e7a0c4; border-radius: 12px; padding: 6px 10px; }
.fr-invite p { font-size: 13px; margin: 4px 0; }

/* ═════════════ 휴대폰 화면 ═════════════ */
.touch-only { display: none; }
body.touch .touch-only { display: inline; } body.touch .pc-only { display: none; }
.nav-btn i { font-style: normal; }
@media (max-width: 700px) {
  #app { padding: 6px; gap: 6px; }
  #topbar { flex-wrap: nowrap; gap: 4px; padding: 4px 6px; border-width: 2px; border-radius: 14px; }
  #topbar .logo { display: none; }
  #topbar nav { flex: 1; flex-wrap: nowrap; overflow-x: auto; gap: 0; scrollbar-width: none; }
  #topbar nav::-webkit-scrollbar { display: none; }
  .nav-btn { padding: 4px 6px; font-size: 18px; border-width: 2px; flex: none; }
  .nav-btn .lbl { display: none; }
  .where { display: none; }
  .ox-pill { font-size: 11px; padding: 2px 7px; flex: none; }
  .ox-pill small, .ox-pill .ox-join { font-size: 10px; }
  .me-chip { gap: 4px; font-size: 13px; flex: none; }
  .me-chip .me-nick, #mute-btn { display: none; }
  .me-avatar { width: 30px; height: 30px; }
  .me-chip .coin { padding: 1px 6px; font-size: 12px; }
  .lv-chip { padding: 1px 6px; font-size: 11px; } .lv-chip .lv-bar { width: 26px; }
  .icon-btn { font-size: 16px; padding: 2px; }
  .plaza-help { font-size: 11px; max-width: 60%; }
  .modal { padding: 6px; } .modal-box { max-height: 94vh; }
  .modal-box.wide { width: 100%; }
  #toasts { left: 8px; right: 8px; transform: none; }
  .toast { font-size: 14px; }
}
@media (max-width: 900px) {
  .room-side { display: flex; flex-direction: column; }
  .room-side .chat-panel { order: -1; }                 /* 휴대폰: 게임 화면 바로 아래에 채팅 (정답 입력) */
  .room-side .chat-panel .chat-log { max-height: 120px; }
}

/* ── 처음 안내 ── */
.tut-ring { position: fixed; z-index: 180; border: 4px solid #ffd84d; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(30, 20, 40, .45), 0 0 18px #ffd84d; pointer-events: none; transition: all .35s cubic-bezier(.2, 1.2, .4, 1); animation: tut-pulse 1.4s ease-in-out infinite; }
@keyframes tut-pulse { 50% { border-color: #ff8ad8; } }
.tut-box { position: fixed; left: 50%; transform: translateX(-50%); z-index: 181; width: min(440px, calc(100vw - 24px)); padding: 12px 16px; animation: toast-in .4s cubic-bezier(.2, 1.6, .4, 1); }
.tut-n { font-size: 12px; color: var(--ink-soft); text-align: right; }
.tut-text { font-size: 16px; line-height: 1.55; margin: 4px 0 10px; }

/* ── 행운 상자 ── */
.lucky { text-align: center; }
.lucky-box { font-size: 110px; margin: 10px auto; display: inline-block; }
.lucky-box.shaking { animation: shake-box .18s ease-in-out infinite; }
@keyframes shake-box { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } }
.lucky-reveal { position: relative; width: 200px; margin: 6px auto; animation: pop-in .5s cubic-bezier(.2, 1.8, .4, 1); }
.lucky-reveal img { position: relative; width: 100%; display: block; z-index: 1; }
.lucky-rays { position: absolute; inset: -30px; border-radius: 50%; background: repeating-conic-gradient(var(--rc) 0 10deg, transparent 10deg 20deg); opacity: .35; animation: spin 6s linear infinite; }
.lucky-name { font-size: 22px; margin: 4px 0; }
.lucky-rare { color: #fff; border-radius: 999px; padding: 0 10px; font-size: 14px; vertical-align: middle; }

/* ── 낚시 ── */
#fish-btn { animation: ox-pulse 1.6s ease-in-out infinite; }
.fish-panel { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 30; width: min(380px, calc(100% - 24px)); padding: 10px 14px; text-align: center; animation: toast-in .35s cubic-bezier(.2, 1.6, .4, 1); }
.fish-msg { font-size: 15px; line-height: 1.5; margin-bottom: 6px; }
.fish-bite { font-size: 60px; color: #e2445c; animation: chant .3s cubic-bezier(.2, 2, .4, 1), bob .3s infinite; }
.fish-hook { font-size: 20px; }
.fish-game { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.fish-track { position: relative; width: 52px; height: 190px; background: linear-gradient(#bfe6ff, #3d8fd1); border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
.fish-zone { position: absolute; left: 0; right: 0; background: rgba(255,255,255,.45); border-top: 3px solid #fff; border-bottom: 3px solid #fff; }
.fish-fish { position: absolute; left: 50%; transform: translateX(-50%); font-size: 22px; transition: none; }
.fish-prog { position: relative; width: 16px; height: 190px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; }
.fish-prog i { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(#7ad9a8, #3fb27f); }
.fish-reel { user-select: none; touch-action: none; font-size: 17px; }
.fish-catch { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.fc-icon { font-size: 64px; animation: pop-in .5s cubic-bezier(.2, 1.8, .4, 1); filter: drop-shadow(0 0 10px var(--rc)); }
.fc-new { background: #ff6b81; color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; animation: ox-pulse 1s infinite; }
.fish-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 10px 0; }
.fb { background: #fff; border: 3px solid var(--rc); border-radius: 12px; padding: 6px; text-align: center; display: flex; flex-direction: column; }
.fb.none { opacity: .55; border-style: dashed; }
.fb-i { font-size: 36px; } .fb small { font-size: 11px; color: var(--ink-soft); }

/* ── 표정 메뉴 ── */
.emo-menu { position: fixed; z-index: 120; display: flex; gap: 2px; padding: 4px; animation: pop-in .25s cubic-bezier(.2, 1.6, .4, 1); }
.emo-menu button { display: flex; flex-direction: column; align-items: center; background: none; border: 0; font-size: 24px; cursor: pointer; padding: 2px 6px; border-radius: 10px; }
.emo-menu button:hover { background: #fff3c4; transform: translateY(-3px) scale(1.15); }
.emo-menu small { font-size: 10px; font-family: inherit; }

/* 상점·거래소 작은 칸에서 전신 그림(탈것·펫)은 통째로 보이게 */
.item-card .thumb img.avatar.crop-full { width: auto; height: 82px; } .ex-th img.avatar.crop-full { width: auto; height: 46px; }

.ref-note { background: #fff0f7; border: 2px dashed #e7a0c4; border-radius: 12px; padding: 6px 10px; margin: 6px 0; font-size: 14px; text-align: center; animation: pop-in .4s cubic-bezier(.2, 1.6, .4, 1); }

/* 프로필 사진(얼굴 가운데 정사각형)은 동그란 칸을 꽉 채움 */
img.avatar.crop-head { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 광고: 위쪽 막대의 보상형 광고 버튼 · 테스트용 가짜 광고 */
.ad-btn { border: 2px solid var(--ink); border-radius: 999px; background: #e9f7ff; font: inherit; font-size: 14px; padding: 3px 10px; cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.ad-btn:hover:not(:disabled) { background: #d2efff; transform: translateY(-1px); }
.ad-btn:disabled { opacity: .6; cursor: default; }
.ad-fake { position: fixed; inset: 0; z-index: 9999; background: rgba(20, 16, 30, .82); display: grid; place-items: center; }
.ad-fake .ad-box { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 28px 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 280px; }
.ad-fake .ad-box small { color: #8a7f95; }
.ad-fake .ad-box b { font-size: 24px; }
.ad-fake .ad-count { font-size: 40px; color: #b0379a; }
@media (max-width: 700px) { .ad-btn { font-size: 12px; padding: 2px 7px; } }
/* 배너 광고 칸 (오락실·상점·게임 결과) */
.ad-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px auto 0; max-width: 100%; overflow: hidden; }
.ad-slot[hidden] { display: none; }
.ad-slot iframe { border: 0; max-width: 100%; display: block; }
.ad-slot .ad-label { font-size: 11px; color: var(--ink-soft); align-self: flex-start; }
.ad-fake-banner { max-width: 100%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #f4eefa, #f4eefa 10px, #ece3f6 10px, #ece3f6 20px); border: 2px dashed #b9a7cc; border-radius: 8px; color: #7a6a8b; font-size: 13px; }
.legal-links a { color: var(--ink-soft); }