/* 방구야구 — 레트로 도트 스타일 */
:root {
  --bg: #141a33;
  --bg2: #1d2547;
  --card: #26305c;
  --card2: #303b70;
  --ink: #0b0e1e;
  --line: #4a5899;
  --text: #f4f1e6;
  --muted: #9aa6d6;
  --accent: #ffd23f;
  --accent2: #e8a317;
  --red: #ff5a5f;
  --green: #46d27a;
  --away: #ff7330;
  --home: #3a7bff;
  --px: 3px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: "Galmuri11", "Galmuri9", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px; line-height: 1.5;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.025) 2px, transparent 2px);
  background-size: 24px 24px;
  min-height: 100vh;
}
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
#app { max-width: 560px; margin: 0 auto; padding: 12px 16px 40px; }
.view { display: none; }
.view.on { display: block; }
.hidden { display: none !important; }
h1 { margin: 6px 0; font-family: "Galmuri14", "Galmuri11", sans-serif; font-size: 40px; letter-spacing: 1px; color: var(--accent); text-shadow: 3px 3px 0 #b5361d, 6px 6px 0 var(--ink); }
h2 { margin: 0 0 10px; font-size: 16px; color: var(--accent); }
h3 { margin: 4px 0 8px; font-size: 14px; color: var(--accent); }
.muted { color: var(--muted); font-size: 12px; }
.hint { color: var(--muted); font-size: 12px; margin: 6px 0; }
.err { color: var(--red); min-height: 1.2em; font-size: 13px; }
.center { text-align: center; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }

/* 픽셀 테두리: 모서리를 깎은 두꺼운 외곽선 */
.card, .panel, .board, .tabs button, .btn, input, .pc, .taunts button, .field-wrap, .seg, .drag-ghost {
  border: none;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
    0 calc(var(--px) * 2) 0 0 rgba(0,0,0,.35);
}

.hero { text-align: center; padding: 26px 0 10px; }
.hero-sprites { display: flex; justify-content: center; gap: 4px; }
.spr canvas { width: 104px; height: 112px; image-rendering: pixelated; }
.sub { color: var(--muted); }

.card { background: var(--card); padding: 16px; margin: 16px 0; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
input {
  display: block; width: 100%; margin-top: 6px; padding: 11px; font: inherit; font-size: 16px;
  background: var(--ink); color: var(--text); border-radius: 0;
}
input:focus { outline: none; box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent); }

.btn {
  font: inherit; font-weight: 700; background: var(--card2); color: var(--text);
  padding: 11px 14px; cursor: pointer; border-radius: 0; position: relative; top: 0;
}
.btn:active { top: 3px; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: #2a1a05; }
.btn.primary::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent2); }
.btn.ghost { background: transparent; }
.btn.tiny { padding: 4px 8px; font-size: 11px; font-weight: 400; }
.btn.wide { width: 100%; margin-top: 8px; }
.btn.big { font-size: 17px; padding: 16px 22px; margin: 14px 0; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 14px; gap: 8px; flex-wrap: wrap; }
.pts { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.pts b { color: var(--accent); font-size: 17px; }
.coin { width: 12px; height: 12px; background: var(--accent); box-shadow: inset -3px -3px 0 var(--accent2), 0 0 0 2px var(--ink); display: inline-block; margin-right: 4px; }
.tabs { display: flex; gap: 8px; padding: 3px; }
.tabs button { flex: 1; font: inherit; font-size: 13px; padding: 9px 2px; white-space: nowrap; cursor: pointer; background: var(--bg2); color: var(--muted); border-radius: 0; }
.tabs button.on { background: var(--accent); color: #2a1a05; font-weight: 700; }
.opt { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; }
.seg { display: inline-flex; background: var(--ink); padding: 0; }
.seg button { font: inherit; border: 0; background: transparent; color: var(--muted); padding: 7px 12px; cursor: pointer; }
.seg button.on { background: var(--accent); color: #2a1a05; font-weight: 700; }
#in-code { text-align: center; font-size: 22px; letter-spacing: 8px; margin: 0; }
#in-code::placeholder { letter-spacing: 0; font-size: 14px; }

/* 선수 카드 */
.rar { font-size: 10px; font-weight: 700; padding: 0 4px; margin-right: 3px; background: #4a5068; color: #e5ecf6; }
.rar.R, .r-R { color: #7fd3ff; } .rar.R { background: #164a6b; }
.rar.SR, .r-SR { color: #e9a6ff; } .rar.SR { background: #5a1f78; }
.rar.UR, .r-UR { color: #ffd84d; } .rar.UR { background: #a0522d; color: #fff3b0; }
.odds { font-size: 12px; color: var(--muted); }

.team-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.lineup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 3px; }
.bench-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; max-height: 560px; overflow-y: auto; padding: 3px 6px 6px 3px; }
.pc {
  position: relative; background: var(--card); padding: 6px 4px 5px; text-align: center; cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.bench-list .pc { touch-action: pan-y; }
.pc .ord { position: absolute; left: 0; top: 0; background: var(--ink); color: var(--accent); font-size: 10px; padding: 0 4px; }
.pc .ovr { position: absolute; right: 2px; top: 0; font-size: 12px; font-weight: 700; }
.pc .face { width: 44px; height: 52px; margin: 4px auto 2px; background: #2f8a3a; box-shadow: inset 0 -6px 0 #2a7a34; }
.pc .face canvas { width: 44px; height: 52px; display: block; image-rendering: pixelated; }
.pc .nm { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .nm .rar { font-size: 9px; }
.pc .st { font-size: 10px; color: var(--muted); display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.pc .st b { color: var(--text); margin-left: 1px; }
.pc.pitcher { grid-column: 1 / -1; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; text-align: left; align-items: center; column-gap: 8px; padding: 8px 10px; }
.pc.pitcher .face { grid-row: 1 / 3; margin: 0; }
.pc.pitcher .st { justify-content: flex-start; font-size: 11px; }
.pc.pitcher .ord { background: var(--home); color: #fff; }
.pc.bench .rel { margin-top: 4px; width: 100%; font-size: 10px; padding: 3px; }
.pc.sel { background: #4b4290; box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent); }
.pc.can { background: #2b4f45; }
.pc.over { background: #3f7a4d; transform: scale(1.04); box-shadow: 0 -3px 0 0 var(--green), 0 3px 0 0 var(--green), -3px 0 0 0 var(--green), 3px 0 0 0 var(--green); }
.pc.dragging { opacity: .35; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; background: var(--card2); padding: 4px 6px;
  text-align: center; font-size: 11px; opacity: .92;
}
.drag-ghost canvas { width: 48px; height: 57px; display: block; margin: 0 auto; image-rendering: pixelated; }

/* 뽑기 */
#gacha-result .reveal { font-family: "Galmuri14", sans-serif; font-size: 24px; margin-top: 8px; animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.gacha-hero { margin: 4px auto; width: 130px; height: 140px; }
.gacha-hero canvas { width: 130px; height: 140px; image-rendering: pixelated; }
.glow-SR, .glow-UR { background: radial-gradient(circle, rgba(255,210,63,.35), transparent 65%); }
.gacha-card { max-width: 150px; margin: 8px auto; }
.gacha-box { width: 48px; height: 48px; margin: 20px auto; background: var(--accent); box-shadow: inset -6px -6px 0 var(--accent2), 0 0 0 3px var(--ink); position: relative; }
.gacha-box::after { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 8px; background: var(--red); }
.shake { animation: shake .12s steps(2) infinite; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }
@keyframes shake { 50% { transform: translateX(3px) rotate(4deg); } }

/* 대기실 */
.bigcode { font-family: "Galmuri14", sans-serif; font-size: 60px; letter-spacing: 10px; color: var(--accent); margin: 6px 0 10px; text-shadow: 4px 4px 0 var(--ink); }
.wait-spr { margin: 10px auto 0; width: 104px; }

/* 경기 */
.board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: var(--ink); padding: 6px 12px; }
.team-score { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-score.home { justify-content: flex-end; }
.team-score b { font-family: "Galmuri14", sans-serif; font-size: 30px; }
.team-score.away b { color: var(--away); }
.team-score.home b { color: var(--home); }
.tname { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mid { text-align: center; }
#g-inning { font-size: 13px; color: var(--accent); }
.count { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); margin-top: 2px; }
.count span { margin-left: 4px; }
.dot { width: 8px; height: 8px; background: #2a3048; display: inline-block; }
.dot.b.on { background: var(--green); }
.dot.s.on { background: var(--accent); }
.dot.o.on { background: var(--red); }
.matchup { font-size: 11.5px; color: var(--muted); text-align: center; margin: 10px 0 8px; min-height: 1.2em; line-height: 1.9; }
.matchup b { color: var(--text); }
.mface { display: inline-block; vertical-align: middle; width: 20px; height: 24px; margin-right: 3px; }
.mface canvas { width: 20px; height: 24px; image-rendering: pixelated; display: block; }

.field-wrap { position: relative; overflow: hidden; aspect-ratio: 1 / 1; margin: 6px 3px; background: #1d3a24; }
#field { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#fx { position: absolute; inset: 0; pointer-events: none; }
#banner {
  position: absolute; left: 0; right: 0; top: 40%; text-align: center; pointer-events: none;
  font-family: "Galmuri14", sans-serif; font-size: 38px; color: #fff; opacity: 0;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 4px 4px 0 var(--ink);
}
#banner.show { animation: banner 1.6s steps(12) forwards; }
#banner.hr { color: var(--accent); font-size: 48px; }
@keyframes banner {
  0% { opacity: 0; transform: scale(2); }
  15% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px); }
}

.panel { background: var(--card); padding: 12px; margin: 14px 3px 0; text-align: center; }
.role { font-size: 15px; color: var(--accent); }
.timer { font-size: 12px; color: var(--muted); min-height: 1.4em; }
.timer.hot { color: var(--red); font-size: 20px; animation: blink .3s steps(2) infinite; }
@keyframes blink { 50% { opacity: .4; } }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; padding: 3px; }
.choices button {
  font: inherit; font-family: "Galmuri14", "Galmuri11", sans-serif; font-size: 18px; padding: 16px 6px 14px; border: 0; cursor: pointer; color: #fff; position: relative; top: 0;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -5px 0 rgba(0,0,0,.3);
}
.choices button:active { top: 3px; }
.choices button:disabled { opacity: .3; }
.choices .c1 { background: #e0442a; }
.choices .c2 { background: #2a6fe0; }
.choices small { display: block; font-family: "Galmuri9", sans-serif; font-size: 10px; opacity: .85; margin-top: 2px; }
.status { min-height: 1.3em; margin-top: 8px; font-size: 12.5px; color: #c9d6ea; }
.taunts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; padding: 3px; }
.taunts button { font: inherit; padding: 6px 0 3px; background: var(--bg2); color: var(--text); cursor: pointer; border-radius: 0; position: relative; top: 0; }
.taunts button:active { top: 3px; }
.taunts button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px; }
.taunts i { display: block; width: 39px; height: 42px; }
.taunts i canvas { width: 39px; height: 42px; image-rendering: pixelated; }
.taunts span { font-size: 12px; color: var(--text); text-align: left; }
.log { margin-top: 14px; font-size: 11.5px; color: var(--muted); max-height: 150px; overflow: auto; }
.log div { padding: 3px 0; border-bottom: 2px dotted #2e3a6a; }
.log div:first-child { color: var(--text); }
.foot { margin-top: 12px; }

.overlay { position: fixed; inset: 0; background: rgba(8, 10, 24, .82); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.overlay .card { width: 100%; max-width: 360px; }
.res-spr { width: 104px; margin: 0 auto; }
.pts-gain { color: var(--accent); font-size: 20px; }

/* 경기장 위 말풍선·판정 */
.fxi { position: absolute; transform: translate(-50%, -50%); pointer-events: none; text-align: center; }
.fxi .say {
  display: inline-block; background: #fff; color: #1a1420; font-size: 12px; padding: 2px 8px; white-space: nowrap;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
}
.fxi .call { font-family: "Galmuri14", sans-serif; font-size: 18px; padding: 0 6px; color: #fff; }
.fxi .call.out { background: var(--red); box-shadow: 0 0 0 3px var(--ink); }
.fxi .call.safe { background: var(--green); box-shadow: 0 0 0 3px var(--ink); color: #0b2a14; }
.fx-pop { animation: fxpop 1.4s steps(10) forwards; }
@keyframes fxpop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff;
  padding: 10px 16px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 60;
  max-width: calc(100% - 32px); box-shadow: 0 0 0 3px var(--accent);
}
#toast.on { opacity: 1; }

@media (max-width: 400px) {
  .team-layout { gap: 10px; }
  .pc .face, .pc .face canvas { width: 38px; height: 45px; }
  .lineup-grid { gap: 8px; }
}

/* 놀리기 모음 */
.taunt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 3px; }
.tc { position: relative; background: var(--card); padding: 6px 4px; text-align: center; cursor: pointer;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 6px 0 0 rgba(0,0,0,.35); }
.tc .spr { width: 52px; height: 56px; margin: 0 auto; }
.tc .spr canvas { width: 52px; height: 56px; }
.tc .nm { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc.locked { opacity: .45; cursor: default; }
.tc.locked .spr { background: #1a2140; box-shadow: inset 0 0 0 3px #2e3a6a; }
.tc.on { background: #4b4290; box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent); }
.tc .eq { position: absolute; top: 0; left: 0; background: var(--accent); color: #2a1a05; font-size: 10px; padding: 0 4px; }
.say-big { font-size: 15px; color: #fff; margin: 4px 0; }

/* ---------- 내 팀 (카드 + 교체 창) ---------- */
.lineup-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 3px; margin-bottom: 18px; }
.lc, .bc, .row-p, .chip {
  font: inherit; color: var(--text); border: 0; cursor: pointer; position: relative; top: 0;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 6px 0 0 rgba(0,0,0,.35);
}
.lc:active, .bc:active, .row-p:active, .chip:active { top: 3px; }
.lc { background: linear-gradient(#2f3d75 0 58%, var(--card) 58%); padding: 6px 6px 8px; text-align: center; }
.lc.rar-R { background: linear-gradient(#1f5a7d 0 58%, var(--card) 58%); }
.lc.rar-SR { background: linear-gradient(#5a2f86 0 58%, var(--card) 58%); }
.lc.rar-UR { background: linear-gradient(#8a5a1a 0 58%, var(--card) 58%); }
.lc .ord { position: absolute; left: 0; top: 0; background: var(--ink); color: var(--accent); font-size: 11px; padding: 1px 5px; }
.lc .ovr, .bc .ovr { position: absolute; right: 4px; top: 1px; font-family: "Galmuri14", sans-serif; font-size: 16px; text-shadow: 2px 2px 0 var(--ink); }
.lc .spr { width: 65px; height: 70px; margin: 6px auto 0; }
.lc .spr canvas { width: 65px; height: 70px; image-rendering: pixelated; display: block; }
.lc .nm { font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc .sp { font-size: 10px; color: var(--muted); }
.bars { margin-top: 4px; display: grid; gap: 2px; }
.bar { display: grid; grid-template-columns: 26px 1fr 18px; align-items: center; gap: 3px; font-size: 9px; }
.bar i { font-style: normal; color: var(--muted); text-align: left; }
.bar b { display: block; height: 5px; background: var(--accent); box-shadow: 0 0 0 1px var(--ink); }
.bar em { font-style: normal; text-align: right; }
.lc.pitcher { grid-column: 1 / -1; display: grid; grid-template-columns: 70px 1fr 1fr; align-items: center; text-align: left; column-gap: 10px;
  background: linear-gradient(90deg, #2f3d75 0 92px, var(--card) 92px); }
.lc.pitcher .spr { margin: 4px 0 0; grid-row: 1 / 4; }
.lc.pitcher .nm { font-size: 14px; }
.lc.pitcher .bars { grid-column: 3; grid-row: 1 / 4; }
.lc.pitcher .ord { background: var(--home); color: #fff; }
.bench-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 3px; }
.bc { background: var(--card); padding: 6px 2px 5px; text-align: center; }
.bc .ovr { font-size: 13px; right: 2px; }
.bc .face { width: 36px; height: 43px; margin: 4px auto 2px; }
.bc .face canvas { width: 36px; height: 43px; image-rendering: pixelated; display: block; }
.bc .nm { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc .sp { font-size: 9px; color: var(--muted); }

.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(8,10,24,0); display: flex; align-items: flex-end; justify-content: center; transition: background .18s; }
.sheet.open { background: rgba(8,10,24,.7); }
.sheet-panel { width: 100%; max-width: 560px; max-height: 82vh; overflow-y: auto; background: var(--bg2); padding: 14px 16px 22px;
  box-shadow: 0 -4px 0 0 var(--accent), 0 -8px 0 0 var(--ink); transform: translateY(100%); transition: transform .18s steps(6); }
.sheet.open .sheet-panel { transform: translateY(0); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 16px; color: var(--accent); }
.sheet-head .btn { flex: 0 0 auto; }
.sheet-sub { margin: 16px 0 8px; font-size: 13px; color: var(--accent); }
.sheet-cur { font-size: 12px; color: var(--muted); }
.row-p { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; width: 100%; background: var(--card); padding: 6px 10px; margin: 0 0 12px; text-align: left; }
.row-p[disabled] { cursor: default; background: #2b2f55; margin-top: 6px; }
.row-p .face { width: 36px; height: 43px; }
.row-p .face canvas { width: 36px; height: 43px; image-rendering: pixelated; display: block; }
.row-p .nm { font-size: 13px; }
.row-p .ovr { font-family: "Galmuri14", sans-serif; font-size: 20px; }
.dfs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; margin-top: 2px; color: var(--muted); }
.dfs b { color: var(--text); }
.df small { margin-left: 2px; font-size: 10px; }
.df.up { color: var(--green); }
.df.down { color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 3px; }
.chip { background: var(--card); padding: 6px 10px; font-size: 13px; }
.chip small { color: var(--muted); font-size: 10px; margin-left: 2px; }
.btn.danger { color: var(--red); margin-top: 14px; }

/* ---------- 내 전적 ---------- */
.rec-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rate { display: flex; align-items: baseline; gap: 2px; }
.rate b { font-family: "Galmuri14", sans-serif; font-size: 44px; color: var(--accent); text-shadow: 3px 3px 0 var(--ink); line-height: 1; }
.rate small { font-size: 18px; color: var(--accent); }
.rate span { margin-left: 8px; color: var(--muted); font-size: 12px; }
.wld { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.wld b { font-family: "Galmuri14", sans-serif; font-size: 22px; color: var(--text); margin-right: 2px; }
.wld b.w { color: var(--green); }
.wld b.l { color: var(--red); }
.rec-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
.rec-row b { color: var(--text); }
.dots { display: flex; gap: 4px; }
.dots i { width: 12px; height: 12px; display: inline-block; box-shadow: 0 0 0 2px var(--ink); }
.dots i.win { background: var(--green); }
.dots i.lose { background: var(--red); }
.dots i.draw { background: #8a90b0; }
.hot { color: #ff9a3c; }
.cold { color: #7fd3ff; }
.rec-last { margin-top: 10px; font-size: 11px; color: var(--muted); border-top: 2px dotted #3a4680; padding-top: 8px; }
@media (max-width: 400px) {
  .lineup-cards { gap: 9px; }
  .lc .spr, .lc .spr canvas { width: 56px; height: 60px; }
  .bench-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 이름 바꾸기 */
.btn.rename { margin: 8px 0 0; }

/* 경기 시작 소개 */
.intro { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: center; padding: 16px;
  background: linear-gradient(90deg, rgba(120,40,10,.94) 0 50%, rgba(15,40,120,.94) 50% 100%); transition: opacity .4s; }
.intro.out { opacity: 0; }
.ititle { text-align: center; font-family: "Galmuri14", sans-serif; font-size: 32px; color: var(--accent); text-shadow: 3px 3px 0 var(--ink); margin-bottom: 14px; animation: pop .5s steps(6); }
.icols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; max-width: 560px; width: 100%; margin: 0 auto; }
.ihead { font-size: 15px; text-align: center; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ihead small { color: var(--accent); }
.irow { display: grid; grid-template-columns: 40px 16px 1fr 24px; align-items: center; gap: 4px; background: rgba(0,0,0,.35); margin-bottom: 6px; padding: 0 4px; font-size: 13px; opacity: 0; animation-fill-mode: forwards; animation-duration: .35s; animation-timing-function: steps(5); }
.icol.away .irow { animation-name: slideL; }
.icol.home .irow { animation-name: slideR; }
.irow .spr { width: 40px; height: 43px; }
.irow .spr canvas { width: 40px; height: 43px; image-rendering: pixelated; display: block; }
.irow .o { color: var(--accent); }
.irow .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.irow .v { text-align: right; }
.vs { font-family: "Galmuri14", sans-serif; font-size: 30px; color: #fff; text-shadow: 3px 3px 0 var(--red), 6px 6px 0 var(--ink); animation: pop .6s steps(6) .9s both; }
.isub { text-align: center; margin-top: 14px; font-size: 13px; color: #fff; animation: blink .5s steps(2) infinite; }
@keyframes slideL { from { opacity: 0; transform: translateX(-120%); } to { opacity: 1; transform: none; } }
@keyframes slideR { from { opacity: 0; transform: translateX(120%); } to { opacity: 1; transform: none; } }

/* ---------- 야구 퀴즈 ---------- */
.quiz { position: fixed; inset: 0; z-index: 45; background: rgba(8,10,24,.9); display: flex; align-items: center; justify-content: center; padding: 12px; }
.quiz-panel { width: 100%; max-width: 480px; max-height: 96vh; overflow-y: auto; background: var(--bg2); padding: 14px 16px 18px;
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent), 0 9px 0 0 var(--ink); }
.quiz-top { display: flex; justify-content: space-between; align-items: center; color: var(--accent); font-size: 16px; margin-bottom: 10px; }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.ladder div { background: var(--ink); text-align: center; padding: 5px 0; font-size: 11px; color: var(--muted); }
.ladder div b { display: block; font-family: "Galmuri14", sans-serif; font-size: 16px; color: var(--text); }
.ladder div.done { background: #1f5a3a; color: #bff0cf; }
.ladder div.now { background: var(--accent); color: #2a1a05; animation: blink .6s steps(2) infinite; }
.ladder div.now b { color: #2a1a05; }
.quiz-body { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; min-height: 80px; }
.quiz-spr canvas { width: 65px; height: 70px; image-rendering: pixelated; display: block; }
.quiz-q { font-size: 15px; line-height: 1.6; background: #fff; color: #1a1420; padding: 10px 12px; position: relative;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.quiz-q small { display: block; color: #6a5a7a; font-size: 11px; }
.quiz-timer { height: 8px; background: var(--ink); margin: 14px 0 10px; }
.quiz-timer i { display: block; height: 100%; width: 100%; background: var(--green); }
.quiz-timer i.low { background: var(--red); }
.quiz-choices { display: grid; gap: 10px; padding: 3px; }
.quiz-choices button { font: inherit; font-size: 14px; text-align: left; padding: 11px 12px; background: var(--card); color: var(--text); border: 0; cursor: pointer; position: relative; top: 0;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 6px 0 0 rgba(0,0,0,.35); }
.quiz-choices button:active { top: 3px; }
.quiz-choices button b { color: var(--accent); margin-right: 8px; }
.quiz-choices button.right { background: #1f7a45; }
.quiz-choices button.wrong { background: #9a2a34; }
.quiz-choices button:disabled { cursor: default; }
.quiz-res { margin-top: 12px; text-align: center; }
.quiz-res .big { font-family: "Galmuri14", sans-serif; font-size: 26px; text-shadow: 3px 3px 0 var(--ink); }
.quiz-res .big.ok { color: var(--green); }
.quiz-res .big.no { color: var(--red); }
.quiz-res .ex { font-size: 12px; color: var(--muted); margin: 6px 0 10px; }
.quiz-res .row { gap: 10px; }
.quiz-rules { font-size: 13px; line-height: 1.8; }

/* ---------- 공 피하기 ---------- */
.dodge { position: fixed; inset: 0; z-index: 45; background: rgba(8,10,24,.92); display: flex; align-items: center; justify-content: center; padding: 10px; }
.dodge-panel { width: 100%; max-width: 420px; max-height: 98vh; overflow-y: auto; background: var(--bg2); padding: 12px 14px 16px;
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent), 0 9px 0 0 var(--ink); }
.dg-hud { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.dg-time { font-size: 12px; color: var(--muted); }
.dg-time b { font-family: "Galmuri14", sans-serif; font-size: 30px; color: var(--accent); text-shadow: 3px 3px 0 var(--ink); }
.dg-wrap { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 160 / 220; box-shadow: 0 0 0 3px var(--ink); }
#dg-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; }
#dg-msg { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: "Galmuri14", sans-serif; font-size: 26px; color: var(--accent); opacity: 0; pointer-events: none;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink); }
#dg-msg.show { animation: banner 1.4s steps(10) forwards; }
.dg-rules { text-align: center; font-size: 13px; margin: 10px 0; }
.dg-res { text-align: center; font-family: "Galmuri14", sans-serif; font-size: 26px; margin-top: 10px; text-shadow: 3px 3px 0 var(--ink); }
.dg-res.ok { color: var(--green); }
.dg-res.no { color: var(--red); }
.dg-pts { text-align: center; font-size: 16px; color: var(--accent); margin: 4px 0; }
#dg-panel .row { gap: 10px; margin-top: 8px; }

/* ---------- 10연속 뽑기 ---------- */
.gacha-btns { gap: 10px; }
.gacha-btns .btn.big { font-size: 14px; padding: 14px 6px; }
.g10 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 10px 0; padding: 3px; }
.g10c { background: var(--card); padding: 4px 2px; text-align: center; opacity: 0; animation: g10pop .45s steps(5) forwards;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink); }
.g10c.rar-R { background: #1f5a7d; }
.g10c.rar-SR { background: #5a2f86; }
.g10c.rar-UR { background: #8a5a1a; box-shadow: 0 0 0 2px var(--accent); }
.g10c .spr canvas { width: 100%; max-width: 46px; image-rendering: pixelated; display: block; margin: 0 auto; }
.g10c .nm { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g10c .nm .rar { font-size: 8px; padding: 0 2px; }
.g10c .sp { font-size: 9px; color: var(--muted); }

#banner.cele { font-size: 30px; }


@keyframes g10pop { from { opacity: 0; transform: scale(.3) rotate(-15deg); } to { opacity: 1; transform: none; } }

/* 확대 막기: 두 번 탭 확대 끄기 */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, select, textarea { font-size: 16px; }

/* 여러 명 방출 */
.bench-head { display: flex; justify-content: space-between; align-items: center; }
.bench-head .btn { flex: 0 0 auto; }
.release-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin: 4px 0 12px; padding: 3px; }
.release-tools .chip { padding: 4px 8px; font-size: 12px; }
.bench-grid.picking .bc { opacity: .7; }
.bench-grid.picking .bc.pick { opacity: 1; background: #7a2a34; box-shadow: 0 0 0 3px var(--red), 0 6px 0 0 rgba(0,0,0,.35); }
.bench-grid.picking .bc.pick::after { content: '✓'; position: absolute; left: 4px; top: 2px; color: #fff; font-size: 14px; }
.relbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; gap: 10px; align-items: center; justify-content: center;
  background: var(--ink); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -3px 0 0 var(--red); }
.relbar span { flex: 1; color: #fff; font-size: 13px; }
.relbar .btn { flex: 0 0 auto; }
.g10c.dup { filter: grayscale(.6); }

/* SSR 등급 */
.rar.SSR { background: linear-gradient(90deg, #ff5a5f, #ffd23f, #46d27a, #4da3ff, #b06bff); color: #fff; text-shadow: 1px 1px 0 #000; }
.r-SSR { background: linear-gradient(90deg, #ff5a5f, #ffd23f, #46d27a, #4da3ff, #b06bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tc .rar.SSR, .g10c .rar.SSR { font-size: 8px; }
.g10c.rar-SSR { background: linear-gradient(135deg, #5a2f86, #1f5a7d); box-shadow: 0 0 0 2px #fff, 0 0 12px #ffd23f; }
.taunts button.used { opacity: .4; }

/* 상대 화면 방해 (터치는 그대로 통과) */
#jam { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.jam-item { position: absolute; pointer-events: none; }
.jam-banner { left: 0; right: 0; top: 18%; text-align: center; animation: jamban 2.2s steps(12) forwards; }
@keyframes jamban { 0% { opacity: 0; transform: scale(1.8); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.jam-text { display: inline-block; background: var(--red); color: #fff; font-family: "Galmuri14", sans-serif; font-size: 18px; padding: 4px 12px; box-shadow: 0 0 0 3px var(--ink); }
.jam-poop { animation: splat 2.5s steps(8) forwards; }
.jam-poop canvas { width: 72px; height: 66px; image-rendering: pixelated; display: block; }
@keyframes splat { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 12% { transform: scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
.jam-fog { inset: 0; background: radial-gradient(circle at 50% 55%, rgba(170, 220, 90, .15) 0 18%, rgba(140, 200, 60, .55) 45%); animation: fog 2.2s ease-out forwards; }
@keyframes fog { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.jam-butt { right: -10px; top: 30%; animation: buttpeek 2.1s steps(10) forwards; }
.jam-butt canvas { width: 150px; height: 125px; image-rendering: pixelated; display: block; }
@keyframes buttpeek { 0% { transform: translateX(100%); } 20% { transform: translateX(0) rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-6deg); } 80% { transform: translateX(0); } 100% { transform: translateX(110%); } }
body.quake #app { animation: quake .12s steps(2) infinite; }
@keyframes quake { 50% { transform: translate(4px, -3px); } }
.choices.wobble button { animation: wob .25s ease-in-out infinite alternate; }
.choices.wobble button:nth-child(2) { animation-delay: .12s; }
@keyframes wob { from { transform: translate(-5px, 2px) rotate(-3deg); } to { transform: translate(5px, -2px) rotate(3deg); } }

/* 전설 선수 */
.rar.SSSR { background: linear-gradient(90deg, #ffd23f, #ff8fc0, #ffd23f); color: #6a1a3a; text-shadow: none; animation: shine 1s steps(4) infinite; }
.r-SSSR { color: #ffd23f; text-shadow: 0 0 6px #ff8fc0; }
@keyframes shine { 50% { filter: brightness(1.4); } }
.lc.rar-SSR { background: linear-gradient(#6a2f8a 0 58%, var(--card) 58%); box-shadow: 0 0 0 3px #ff8fc0, 0 6px 0 0 rgba(0,0,0,.35); }
.lc.rar-SSSR { background: linear-gradient(#a8741a 0 58%, var(--card) 58%); box-shadow: 0 0 0 3px #ffd23f, 0 0 14px #ff8fc0, 0 6px 0 0 rgba(0,0,0,.35); }
.bc.rar-SSR { background: #4a2a66; box-shadow: 0 0 0 3px #ff8fc0; }
.bc.rar-SSSR { background: #6a4a14; box-shadow: 0 0 0 3px #ffd23f, 0 0 10px #ff8fc0; }
.g10c.rar-SSSR { background: linear-gradient(135deg, #a8741a, #6a2f8a); box-shadow: 0 0 0 3px #ffd23f; }
.glow-SSR, .glow-SSSR { background: radial-gradient(circle, rgba(255,143,192,.5), transparent 65%); }
body.legend-flash::after { content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none; background: #fff; animation: lflash 1.6s steps(8) forwards; }
@keyframes lflash { 0% { opacity: .9; } 30% { opacity: 0; background: #ffd23f; } 45% { opacity: .5; } 100% { opacity: 0; } }

/* SSR 놀리기 쿨타임 */
.taunts button.cool { opacity: .5; position: relative; }
.taunts button.cool::after { content: attr(data-cool); position: absolute; right: 6px; top: 2px; font-size: 11px; color: var(--accent); }

/* 출석·미션 */
.att-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 10px; }
.att-days i { font-style: normal; text-align: center; padding: 6px 0; background: var(--ink); color: var(--muted); font-size: 12px; }
.att-days i.on { background: var(--green); color: #0b2a14; }
.att-days i.big { color: var(--accent); }
.att-days i.big.on { background: var(--accent); color: #2a1a05; }
.missions { margin-top: 12px; display: grid; gap: 8px; }
.ms { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: var(--bg2); padding: 8px 10px; }
.ms.done { opacity: .5; }
.ms-t { font-size: 13px; }
.ms-t small { margin-left: 6px; color: var(--muted); }
.ms-bar { height: 5px; background: var(--ink); margin-top: 4px; }
.ms-bar b { display: block; height: 100%; background: var(--green); }
.ms-r { font-size: 12px; color: var(--accent); }

/* 로비 훈련장 */
.lobby-wrap { position: relative; margin: 14px 3px 4px; aspect-ratio: 200 / 96; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 0 rgba(0,0,0,.35); overflow: hidden; }
#lobby-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.lb-title { position: absolute; left: 6px; bottom: 4px; font-size: 11px; color: #fff; background: rgba(11,14,30,.7); padding: 1px 6px; }
.lb-say { position: absolute; transform: translate(-50%, -100%); background: #fff; color: #1a1420; font-size: 10px; padding: 1px 6px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink); animation: fxpop 1.8s steps(10) forwards; }

/* 내 전적 작게 */
.card.record.compact { padding: 10px 12px; margin: 12px 0; }
.compact .rate b { font-size: 28px; }
.compact .rate small { font-size: 13px; }
.compact .rate span { font-size: 11px; margin-left: 4px; }
.compact .wld b { font-size: 16px; }
.compact .wld { gap: 10px; font-size: 11px; }
.compact .rec-row { margin-top: 6px; font-size: 11px; }
.compact .rec-last { display: none; }
.compact .dots i { width: 9px; height: 9px; }

/* 출석·미션 버튼·팝업 */
.me-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.daily-btn { position: relative; background: var(--accent); color: #2a1a05; font-weight: 700; }
.daily-btn .nd { position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; background: var(--red); box-shadow: 0 0 0 2px var(--ink); animation: blink .6s steps(2) infinite; }
.pop { position: fixed; inset: 0; z-index: 46; background: rgba(8,10,24,.85); display: flex; align-items: center; justify-content: center; padding: 14px; }
.pop-panel { width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; background: var(--bg2); padding: 14px 16px 18px;
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent), 0 9px 0 0 var(--ink); animation: g10pop .3s steps(4); }

/* 탭 5개 */
.tabs button { font-size: 12px; padding: 9px 1px; }

/* 놀리기 장착 4칸 */
.eq-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 3px; margin-bottom: 14px; }
.tslot { position: relative; background: var(--card); text-align: center; padding: 6px 2px; cursor: pointer; min-height: 92px;
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent); }
.tslot.empty { background: var(--ink); box-shadow: 0 -3px 0 0 #3a4680, 0 3px 0 0 #3a4680, -3px 0 0 0 #3a4680, 3px 0 0 0 #3a4680; cursor: default; }
.tslot .sn { position: absolute; left: 0; top: 0; background: var(--accent); color: #2a1a05; font-size: 10px; padding: 0 4px; }
.tslot .spr { width: 42px; height: 45px; margin: 4px auto 0; }
.tslot .spr canvas { width: 42px; height: 45px; image-rendering: pixelated; }
.tslot .nm { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tslot .empty-t { margin-top: 30px; font-size: 11px; color: var(--muted); }

/* 꾸미기 */
.cos-stage { display: flex; justify-content: center; gap: 8px; }
.cos-stage .spr canvas { width: 104px; height: 112px; image-rendering: pixelated; }
.cos-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 4px; padding: 3px; }
.cslot { font: inherit; font-size: 12px; color: var(--text); background: var(--bg2); border: 0; padding: 6px 4px; cursor: pointer;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.cslot small { display: block; color: var(--accent); font-size: 10px; }
.cslot.empty { color: var(--muted); }
.cos-filter { display: flex; gap: 8px; margin-bottom: 10px; }
.cos-filter button { font: inherit; font-size: 12px; background: var(--bg2); color: var(--muted); border: 0; padding: 5px 10px; cursor: pointer; }
.cos-filter button.on { background: var(--accent); color: #2a1a05; }
.tc .sp { font-size: 9px; }
.g10.one { grid-template-columns: minmax(0, 120px); justify-content: center; }

.g10c .spr canvas { height: auto; aspect-ratio: 26 / 28; }


/* 꾸미기 물건 아이콘 */
.tc .spr canvas.item-ic, .g10c .spr canvas.item-ic { width: 100%; max-width: 68px; height: auto; aspect-ratio: 34 / 18; margin-top: 16px; }

/* 랭킹 */
.rank-card #ranking{display:flex;flex-direction:column;gap:4px}
.rk{display:flex;align-items:center;gap:6px;padding:4px 6px;border:2px solid transparent;background:rgba(0,0,0,.18)}
.rk.mine{border-color:#ffd84a;background:rgba(255,216,74,.15)}
.rk-no{width:22px;text-align:center;font-weight:bold}
.rk .spr{width:39px;height:42px;flex:none;overflow:hidden}
.rk .spr canvas{width:39px;height:42px}
.rk-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-wld{font-size:11px;opacity:.8}
.rk-rate{width:40px;text-align:right;color:#ffd84a}

/* ---------- 미니게임 ---------- */
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-btn { background: var(--ink); color: var(--text); border: 0; padding: 10px 6px; font-family: inherit; cursor: pointer; text-align: center;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), 0 0 0 2px var(--accent); }
.mini-btn b { display: block; font-size: 14px; color: var(--accent); margin-bottom: 3px; }
.mini-btn small { font-size: 10px; color: var(--muted); }
.mini-btn:active { transform: translateY(2px); }
.mg-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; }
.mg-msg { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-family: "Galmuri14", sans-serif; font-size: 22px; color: #fff; opacity: 0; pointer-events: none;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink); }
.mg-msg.gold { color: var(--accent); }
.mg-msg.red { color: #ff6a6a; }
.mg-msg.show { animation: banner 1.4s steps(10) forwards; }
.hd-outs { font-size: 11px; margin-top: 2px; }
.hd-outs i { display: inline-block; width: 9px; height: 9px; margin-left: 3px; background: var(--ink); box-shadow: 0 0 0 1px #ff6a6a; }
.hd-outs i.on { background: #ff6a6a; }
.hd-swing { margin-top: 10px; font-size: 18px; padding: 14px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#bt-ladder div:last-child b { font-size: 14px; }
.cu-wrap { position: relative; height: min(60vh, 520px); aspect-ratio: 1 / 2; margin: 0 auto; box-shadow: 0 0 0 3px var(--ink); }
.cu-hud { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; font-size: 12px; }
.cu-hud:empty { display: none; }
.cu-map { grid-column: 1 / -1; text-align: center; color: var(--accent); }
.cu-side { background: var(--ink); padding: 5px 6px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.cu-side.on { box-shadow: 0 0 0 2px var(--accent); }
.cu-side i { width: 8px; height: 8px; flex: none; }
.cu-side span { margin-left: auto; letter-spacing: -1px; }
.cu-timer { text-align: center; font-size: 13px; min-height: 2.6em; margin: 8px 0; }
#cu-panel .btn.wide { margin-top: 8px; }
.cu-join { gap: 8px; margin-top: 10px; }
.cu-join input { flex: 1; min-width: 0; }

/* 랭킹(절반) + 방 만들기 나란히 */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; margin: 20px 0 14px; } /* 위 스토리 버튼 그림자(6px)와 안 겹치게 */
.split2 > .card { margin: 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
.create-card { display: flex; flex-direction: column; }
.create-card .btn { margin-top: auto; padding: 14px 6px; line-height: 1.4; }
/* 방 만들기 옵션: 기본 / 초스피드 */
.mode-pick { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 10px; }
.mode-pick button { font: inherit; text-align: left; border: 2px solid var(--line, #3a4670); background: var(--ink); color: var(--muted); padding: 6px 8px; cursor: pointer; line-height: 1.3; }
.mode-pick button b { display: block; font-size: 13px; color: var(--text, #fff); }
.mode-pick button small { display: block; font-size: 11px; }
.mode-pick button.on { border-color: var(--accent); background: rgba(255, 200, 60, .14); }
.mode-pick button.on b { color: var(--accent); }
.mode-pick button[data-v="fast"].on { border-color: #ff6a3d; background: rgba(255, 106, 61, .16); }
.mode-pick button[data-v="fast"].on b { color: #ff8a5c; }
.fast-tag { color: #ff8a5c; }
.rank-card h2 { font-size: 14px; }
.rank-card .rk { gap: 3px; padding: 2px 3px; font-size: 11px; }
.rank-card .rk-no { width: 14px; font-size: 11px; }
.rank-card .rk .spr, .rank-card .rk .spr canvas { width: 20px; height: 22px; }
.rank-card .rk-wld { display: none; }
.rank-card .rk-rate { width: 30px; font-size: 11px; }
.rank-card .rk-name .hot { display: none; }
.mini-btn.soon { opacity: .45; cursor: default; box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), 0 0 0 2px var(--muted); }
.mini-btn.soon b { color: var(--muted); margin: 0; }

/* ---------- 스토리 모드 ---------- */
.story-enter { display: block; width: 100%; margin: 12px 0 0; border: 0; cursor: pointer; font-family: inherit; text-align: left; padding: 14px 16px;
  background: linear-gradient(90deg, #8a2a4a, #3a2a8a); color: #fff; box-shadow: 0 0 0 3px var(--accent), 0 6px 0 0 var(--ink); }
.story-enter b { display: block; font-family: "Galmuri14", sans-serif; font-size: 20px; color: var(--accent); text-shadow: 2px 2px 0 var(--ink); }
.story-enter small { color: #ffd8e8; font-size: 12px; }
.story-enter:active { transform: translateY(3px); }
.sy-total { color: var(--accent); font-size: 13px; }
#sy-tabs button.lock { opacity: .5; }
.sy-banner { display: flex; gap: 12px; align-items: center; margin: 12px 0; padding: 12px; background: linear-gradient(135deg, #3a1a4a, #1a2a5a); box-shadow: 0 0 0 3px var(--ink); position: relative; }
.sy-boss { width: 72px; height: 86px; flex: none; background: rgba(0,0,0,.25); }
.sy-boss canvas { width: 72px; height: 86px; image-rendering: pixelated; display: block; }
.sy-banner small { color: var(--muted); }
.sy-banner h2 { margin: 2px 0 4px; font-size: 20px; }
.sy-banner p { margin: 0; font-size: 12px; color: #d8dcff; }
.sy-clear { position: absolute; right: 10px; top: 8px; color: var(--accent); font-family: "Galmuri14", sans-serif; transform: rotate(8deg); text-shadow: 2px 2px 0 var(--ink); }
.sy-path { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 20px; }
.sy-node { display: flex; align-items: center; gap: 10px; width: 88%; border: 0; cursor: pointer; font-family: inherit; color: var(--text); text-align: left; padding: 10px; background: var(--bg2); box-shadow: 0 0 0 2px #3a4270, 0 5px 0 0 var(--ink); }
.sy-node.r { align-self: flex-end; }
.sy-node:active { transform: translateY(3px); }
.sy-node.now { box-shadow: 0 0 0 3px var(--accent), 0 5px 0 0 var(--ink); animation: syPulse 1s steps(2) infinite; }
@keyframes syPulse { 50% { box-shadow: 0 0 0 3px #fff, 0 5px 0 0 var(--ink); } }
.sy-node.boss { background: linear-gradient(90deg, #5a1a2a, var(--bg2)); }
.sy-node.lock { opacity: .45; }
.sy-no { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--accent); font-size: 12px; font-weight: 700; }
.sy-node.boss .sy-no { background: var(--red); color: #fff; }
.sy-t { flex: 1; min-width: 0; }
.sy-t b { display: block; font-size: 14px; }
.sy-t small { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-st { color: var(--accent); letter-spacing: 1px; white-space: nowrap; }
.sy-st i, .sy-res-st i { color: #3a4270; font-style: normal; }
.sy-sheet h3 { margin: 2px 0; }
.sy-sh-top { display: flex; gap: 10px; align-items: center; }
.mface.big { width: 48px; height: 58px; } .mface.big canvas { width: 48px; height: 58px; }
.sy-rule { background: var(--ink); padding: 8px; font-size: 13px; margin: 10px 0; }
.sy-ms { display: grid; gap: 4px; font-size: 13px; margin-bottom: 8px; }
.sy-ms div { color: var(--accent); }
.sy-ms.res div { color: var(--muted); text-align: left; }
.sy-ms.res div.ok { color: var(--green); }
.sy-res-st { font-size: 30px; color: var(--accent); letter-spacing: 4px; text-shadow: 2px 2px 0 var(--ink); }
.sy-say { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--ink); padding: 8px; margin-top: 10px; font-size: 12px; }
.sy-say b { color: var(--accent); }
/* 대화: 카톡처럼 거의 전체 화면, 한 마디씩 말풍선이 쌓임 (2026-10-26) */
.talk { position: fixed; inset: 0; z-index: 60; background: #b8c8dc; display: flex; flex-direction: column; cursor: pointer; padding-bottom: env(safe-area-inset-bottom); }
.tk-head { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: #a8b8cc; color: #1a1a2a; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.tk-head b { flex: 1; font-family: "Galmuri14", sans-serif; font-size: 16px; }
#talk-skip { color: #1a1a2a; box-shadow: 0 0 0 2px #1a1a2a; }
.tk-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.tk-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; animation: tkIn .18s ease-out both; }
.tk-msg.right { flex-direction: row-reverse; }
.tk-face { width: 44px; height: 44px; flex: none; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 2px rgba(0,0,0,.1); }
.tk-face canvas { width: 44px; height: 52px; image-rendering: pixelated; display: block; }
.tk-msg.cont .tk-face { visibility: hidden; height: 0; }
.tk-msg.cont b { display: none; }
.tk-msg > div:last-child { min-width: 0; max-width: calc(100% - 60px); }
.tk-msg b { display: block; font-size: 12px; color: #2a2a3a; margin: 0 0 3px 2px; }
.tk-msg p { margin: 0; display: inline-block; background: #fff; color: #1a1a2a; padding: 8px 11px; border-radius: 4px 14px 14px 14px; font-size: 15px; line-height: 1.5; word-break: keep-all; }
.tk-msg.right p { background: #ffe94a; border-radius: 14px 4px 14px 14px; }
.tk-msg.right > div:last-child { text-align: right; }
.tk-msg.coach p { background: #fff4d8; }
.tk-typing p { color: #8a8aa0; letter-spacing: 2px; }
.tk-foot { padding: 12px; text-align: center; font-size: 13px; color: #2a2a3a; background: #a8b8cc; }
.tk-foot.go { background: var(--accent); color: #2a1a05; font-family: "Galmuri14", sans-serif; font-size: 16px; animation: none; }
@keyframes tkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sy-speed { background: var(--bg2); color: var(--muted); }
.sy-speed.on { background: var(--accent); color: #2a1a05; font-weight: 700; }

/* SSR 놀리기 강화 (2026-10-15): 3.5초, 더 크고 진하게 */
.jam-banner { animation-duration: 3.5s; top: 14%; }
.jam-text { font-size: 26px; padding: 8px 16px; }
.jam-poop { animation-duration: 3.5s; }
.jam-poop canvas { width: 110px; height: 100px; }
.jam-fog { background: radial-gradient(circle at 50% 55%, rgba(170, 220, 90, .35) 0 12%, rgba(120, 180, 40, .88) 40%); animation-duration: 3.5s; }
.jam-fog.light { background: radial-gradient(circle at 30% 50%, rgba(170, 220, 90, .5) 0 20%, rgba(140, 200, 60, 0) 55%); }
.jam-butt { right: auto; left: 50%; top: 22%; margin-left: -140px; animation: buttbig 3.5s steps(14) forwards; }
.jam-butt canvas { width: 280px; height: 233px; }
@keyframes buttbig { 0% { transform: translateX(120%); } 15% { transform: translateX(0) rotate(-8deg); } 30% { transform: rotate(8deg) scale(1.08); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(8deg) scale(1.08); } 85% { transform: none; } 100% { transform: translateX(-140%); } }
body.quake-big #app { animation: quakebig .1s steps(2) infinite; }
@keyframes quakebig { 50% { transform: translate(10px, -8px) rotate(1deg); } }
.choices.swap { direction: rtl; } .choices.swap button { direction: ltr; }
.choices.wobble button { animation: wob2 .2s ease-in-out infinite alternate; }
@keyframes wob2 { from { transform: translate(-10px, 4px) rotate(-6deg); } to { transform: translate(10px, -4px) rotate(6deg); } }

/* ---------- 후원 문의 버튼·팝업 (픽셀 반짝이) ---------- */
.donate-btn { position: relative; display: block; width: 100%; margin: 16px 0 6px; padding: 16px 10px 12px; border: 0; cursor: pointer; overflow: hidden;
  font-family: "Galmuri14", sans-serif; color: #2a1a05; text-align: center;
  background: linear-gradient(90deg, #ffd23f, #ff8fc0, #b38bff, #7fd3ff, #9dffb0, #ffd23f); background-size: 400% 100%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink), 0 9px 0 0 var(--ink);
  animation: dnShift 3s steps(24) infinite, dnGlow 1s steps(2) infinite; }
.donate-btn b { position: relative; display: block; font-size: 20px; text-shadow: 2px 2px 0 #fff; }
.donate-btn small { position: relative; display: block; font-size: 12px; margin-top: 4px; color: #4a2a6a; }
.donate-btn:active { transform: translateY(4px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink), 0 5px 0 0 var(--ink); }
@keyframes dnShift { to { background-position: 400% 0; } }
@keyframes dnGlow { 50% { box-shadow: 0 0 0 3px #ffd23f, 0 0 0 6px var(--ink), 0 9px 0 0 var(--ink), 0 0 18px 6px rgba(255, 210, 63, .7); } }
.dn-shine { position: absolute; top: -20px; bottom: -20px; left: -40%; width: 22%; background: rgba(255,255,255,.75); transform: skewX(-20deg); animation: dnSweep 1.8s steps(14) infinite; }
@keyframes dnSweep { 0% { left: -40%; } 60%, 100% { left: 130%; } }
.dn-sp { position: absolute; font-style: normal; color: #fff; font-size: 16px; text-shadow: 0 0 0 #fff, 2px 2px 0 var(--ink); animation: dnTwinkle .9s steps(3) infinite; }
.dn-sp.s1 { left: 8px; top: 4px; } .dn-sp.s2 { right: 10px; top: 6px; animation-delay: .3s; }
.dn-sp.s3 { left: 16%; bottom: 3px; animation-delay: .6s; } .dn-sp.s4 { right: 18%; bottom: 2px; animation-delay: .45s; }
@keyframes dnTwinkle { 0% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(.4); } }
.dn-panel { max-width: 380px; box-shadow: 0 0 0 3px #ffd23f, 0 0 0 6px var(--ink), 0 10px 0 0 var(--ink); }
.dn-hero { display: flex; justify-content: center; gap: 10px; margin: 4px 0 6px; padding: 8px 0; background: repeating-linear-gradient(45deg, #2a2f5a 0 6px, #232850 6px 12px); }
.dn-hero .spr { width: 52px; height: 56px; } .dn-hero .spr canvas { width: 52px; height: 56px; }
.dn-lead { text-align: center; font-size: 14px; line-height: 1.6; margin: 8px 0 12px; }
.dn-lead b { color: var(--accent); }
.dn-tier { background: var(--ink); padding: 10px 12px; margin-bottom: 10px; box-shadow: inset 4px 0 0 #ff8fc0; }
.dn-tier.sssr { box-shadow: inset 4px 0 0 #ffd23f, 0 0 0 2px #ffd23f; }
.dn-tt { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.dn-tt b { margin-left: auto; color: var(--accent); font-family: "Galmuri14", sans-serif; font-size: 16px; }
.dn-tier ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: #d8dcff; }
.dn-mail { text-align: center; background: #fff; color: #1a1a2a; padding: 8px; margin: 6px 0 10px; box-shadow: 0 0 0 3px var(--ink); }
.dn-mail span { display: block; font-size: 11px; color: #6a6a8a; }
.dn-mail b { font-family: "Galmuri14", sans-serif; font-size: 16px; }
.dn-row { gap: 10px; }
.dn-row .btn { flex: 1; text-align: center; text-decoration: none; }

/* ---------- 전설 대사 말풍선·끝판왕 등장 ---------- */
.legsay { position: relative; white-space: nowrap; background: #fff; color: #1a1a2a; font-size: 12px; font-weight: 700; padding: 4px 8px;
  box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px rgba(0,0,0,.35); }
.legsay::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -3px; width: 6px; height: 6px; background: #fff; box-shadow: 2px 2px 0 0 var(--ink); }
.ileg { margin-top: 6px; font-size: 11px; background: rgba(255,255,255,.12); padding: 4px 6px; color: #ffe9a8; opacity: 0; animation: ilegIn .4s steps(4) forwards; }
@keyframes ilegIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ileg b { color: var(--accent); }
.sssr-in { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sssr-flash { position: absolute; inset: 0; background: #fff; animation: sssrFlash .9s steps(6) forwards; }
@keyframes sssrFlash { 0% { opacity: .95; } 30% { opacity: 0; } 45% { opacity: .7; } 100% { opacity: 0; } }
.sssr-band { position: relative; width: 100%; text-align: center; padding: 10px 0; background: linear-gradient(90deg, rgba(255,210,63,0), #ffd23f 20%, #ff8fc0 50%, #ffd23f 80%, rgba(255,210,63,0));
  color: #2a0a2a; animation: sssrBand 2.6s steps(16) forwards; }
.sssr-band small { display: block; font-size: 12px; font-weight: 700; }
.sssr-band b { display: block; font-family: "Galmuri14", sans-serif; font-size: 30px; text-shadow: 3px 3px 0 #fff; }
@keyframes sssrBand { 0% { transform: translateX(-110%) skewX(-12deg); } 18% { transform: translateX(0) skewX(-12deg); } 80% { transform: translateX(0) skewX(-12deg); opacity: 1; } 100% { transform: translateX(110%) skewX(-12deg); opacity: 0; } }
.dn-note { font-size: 12px; line-height: 1.6; text-align: center; background: #3a1428; color: #ffd0e0; padding: 8px 10px; margin: 0 0 10px; box-shadow: inset 0 0 0 2px #ff8fc0; }
.dn-tier.shine { box-shadow: inset 4px 0 0 #9dffb0; }
.dn-tier.shine .dn-tt b { color: #9dffb0; }

/* ---------- 훈련장 (구경 + 꾸미기 뽑기) ---------- */
#lobby-wrap { cursor: pointer; }
.lb-enter { font-size: 10px; color: var(--accent); margin-left: 4px; animation: blink 1s steps(2) infinite; }
.camp-wrap { position: relative; width: 100%; aspect-ratio: 200 / 150; margin: 10px 0 6px; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 0 var(--ink); overflow: hidden; }
#camp-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.camp-wrap .lb-say { font-size: 11px; }
.cp-log { min-height: 58px; font-size: 12px; background: var(--ink); padding: 6px 8px; line-height: 1.5; margin-bottom: 4px; }
.cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 30px; }
.cp-item { position: relative; background: var(--ink); border: 0; padding: 4px; color: var(--text); font-family: inherit; font-size: 10px; cursor: pointer; text-align: center; box-shadow: 0 0 0 2px #3a4270; }
.cp-item img { width: 100%; aspect-ratio: 4 / 3; display: block; image-rendering: pixelated; margin-bottom: 3px; }
.cp-item.on { box-shadow: 0 0 0 3px var(--accent); }
.cp-item.locked { opacity: .45; cursor: default; }
.cp-item em { position: absolute; top: 6px; left: 6px; background: var(--accent); color: #2a1a05; font-style: normal; font-size: 9px; padding: 0 3px; }
.cp-q { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; font-family: "Galmuri14", sans-serif; font-size: 22px; color: #3a4270; background: #141830; margin-bottom: 3px; }
.cp-item.rar-SSR:not(.locked), .cp-r.rar-SSR { box-shadow: 0 0 0 2px #ff8fc0, 0 0 10px 2px rgba(255, 143, 192, .5); }
.cp-item.rar-UR:not(.locked), .cp-r.rar-UR { box-shadow: 0 0 0 2px #ffd84d; }
.cp-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
.cp-r { position: relative; background: var(--ink); padding: 4px; font-size: 10px; opacity: 0; animation: g10pop .35s steps(4) forwards; }
.cp-r img { width: 100%; aspect-ratio: 4 / 3; display: block; image-rendering: pixelated; margin-bottom: 3px; }
.cp-r em { display: block; font-style: normal; color: var(--muted); }
.cp-r em.new { color: var(--green); }
.cp-r.dup { opacity: .7; }

/* ---------- 앱 설치 안내 ---------- */
.ins-card { display: flex; align-items: stretch; margin: 12px 0 0; box-shadow: 0 0 0 3px #7fd3ff, 0 6px 0 0 var(--ink); background: linear-gradient(90deg, #1e4a7a, #2a3a8a); }
.ins-card.hidden, .ins-entry.hidden { display: none; }
.ins-card-btn { flex: 1; border: 0; background: none; color: #fff; font-family: inherit; text-align: left; padding: 10px 14px; cursor: pointer; }
.ins-card-btn b { display: block; font-size: 15px; color: #bfe8ff; }
.ins-card-btn small { font-size: 11px; color: #cfd8ff; }
.ins-x { border: 0; background: rgba(0,0,0,.25); color: #cfd8ff; font-size: 14px; width: 36px; cursor: pointer; }
#v-login .ins-entry { margin-top: 12px; }
.ins-panel { max-width: 380px; box-shadow: 0 0 0 3px #7fd3ff, 0 0 0 6px var(--ink), 0 10px 0 0 var(--ink); }
.ins-hero { display: flex; gap: 12px; align-items: center; background: var(--ink); padding: 10px; margin-bottom: 10px; }
.ins-hero img { width: 64px; height: 64px; image-rendering: pixelated; display: block; border-radius: 14px; box-shadow: 0 0 0 2px #fff; }
.ins-hero b { display: block; font-family: "Galmuri14", sans-serif; font-size: 18px; color: var(--accent); }
.ins-hero small { font-size: 11px; color: var(--muted); line-height: 1.5; }
.ins-tabs { margin-bottom: 10px; }
.ins-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.ins-steps li { display: flex; gap: 10px; align-items: center; background: var(--ink); padding: 10px; font-size: 14px; line-height: 1.6; }
.ins-steps li b { color: var(--accent); }
.ins-steps small { color: var(--muted); font-size: 11px; }
.ins-no { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #2a1a05; font-weight: 700; }
.ins-ic { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 22px; height: 22px; background: #fff; color: #1a6ae8; font-style: normal; font-weight: 700; box-shadow: 0 0 0 2px var(--ink); margin: 0 2px; }
.ins-share { position: relative; }
.ins-share b { position: absolute; left: 6px; top: 8px; width: 10px; height: 9px; border: 2px solid #1a6ae8; border-top-color: transparent; box-sizing: border-box; }
.ins-share::before { content: ''; position: absolute; left: 10px; top: 3px; width: 2px; height: 10px; background: #1a6ae8; }
.ins-share::after { content: ''; position: absolute; left: 7px; top: 3px; width: 4px; height: 4px; border-left: 2px solid #1a6ae8; border-top: 2px solid #1a6ae8; transform: rotate(45deg); transform-origin: center; left: 8px; }
.ins-warn { background: #3a1428; color: #ffd0e0; padding: 10px; font-size: 13px; line-height: 1.6; text-align: center; box-shadow: inset 0 0 0 2px #ff8fc0; }
#install-pop .btn.wide { display: block; text-align: center; text-decoration: none; margin: 8px 0 10px; }

/* 한국어는 단어 중간에서 줄바꿈하지 않기 (예: "비었어 / 요" 방지) */
body, button, input, textarea { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 선수 뽑기: 전설 실루엣 · 확률 팝업 ---------- */
.leg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.leg-head b { color: var(--accent); font-size: 14px; }
.leg-sil { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.sil { background: var(--ink); padding: 4px 2px 5px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 0 0 2px #3a4270; }
.sil canvas { width: 45px; height: 42px; image-rendering: pixelated; filter: drop-shadow(0 0 2px rgba(255,255,255,.35)); }
.sil.SSSR { box-shadow: 0 0 0 2px #ffd23f; }
.sil.SSSR canvas { filter: drop-shadow(0 0 3px rgba(255,210,63,.9)); }
.sil b { font-size: 10px; white-space: nowrap; }
.sil .rar { font-size: 8px; margin: 0; }
.odds-tb { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 14px; }
.odds-tb td { padding: 7px 4px; border-top: 1px solid #2a3060; }
.odds-tb td:last-child { text-align: right; font-weight: 700; color: var(--accent); }

/* ---------- 전체 랭킹 팝업 ---------- */
.rank-card { cursor: pointer; }
.rank-panel { max-width: 400px; }
.rkf { display: flex; align-items: center; gap: 8px; background: var(--ink); padding: 6px 8px; margin-bottom: 5px; opacity: 0; animation: rkIn .35s steps(5) forwards; }
@keyframes rkIn { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
.rkf.mine { box-shadow: 0 0 0 2px var(--accent); }
.rkf.top0 { background: linear-gradient(90deg, #5a4a10, var(--ink)); } .rkf.top1 { background: linear-gradient(90deg, #4a4a5a, var(--ink)); } .rkf.top2 { background: linear-gradient(90deg, #5a3a1a, var(--ink)); }
.rkf-no { width: 26px; text-align: center; font-size: 16px; font-weight: 700; }
.rkf .spr { width: 39px; height: 42px; flex: none; } .rkf .spr canvas { width: 39px; height: 42px; }
.rkf-mid { flex: 1; min-width: 0; } .rkf-mid b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rkf-mid small { font-size: 11px; color: var(--muted); }
.rkf-rate { font-family: "Galmuri14", sans-serif; font-size: 18px; color: var(--accent); }

/* ---------- 커뮤니티 ---------- */
.comm-btn { grid-column: 1 / -1; box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), 0 0 0 2px #7fd3ff; }
.comm-btn b { color: #bfe8ff; }
.comm-panel { max-width: 420px; }
.comm-write { background: var(--ink); padding: 8px; margin-bottom: 10px; }
.comm-cats { display: flex; gap: 4px; margin-bottom: 6px; }
.comm-cats button { flex: 1; font-family: inherit; font-size: 11px; padding: 6px 2px; border: 0; background: var(--bg2); color: var(--muted); cursor: pointer; }
.comm-cats button.on { background: var(--accent); color: #2a1a05; font-weight: 700; }
#comm-text { width: 100%; font-family: inherit; font-size: 14px; padding: 8px; border: 0; background: #fff; color: #1a1a2a; resize: none; }
.comm-row { justify-content: space-between; align-items: center; margin-top: 6px; }
.comm-filter { margin-bottom: 8px; }
.cm { display: flex; gap: 8px; background: var(--ink); padding: 8px; margin-bottom: 6px; }
.cm.mine { box-shadow: inset 3px 0 0 var(--accent); }
.cm .mface { width: 30px; height: 36px; flex: none; } .cm .mface canvas { width: 30px; height: 36px; }
.cm-body { flex: 1; min-width: 0; }
.cm-top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.cm-top small { margin-left: auto; color: var(--muted); font-size: 10px; }
.cm-cat { font-size: 10px; padding: 0 4px; background: #2a3060; } .cm-cat.game { background: #1f5a3a; } .cm-cat.bug { background: #6a1f2a; }
.cm p { margin: 4px 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.cm-act { display: flex; gap: 6px; }
.cm-act button { font-family: inherit; font-size: 11px; border: 0; padding: 3px 8px; background: var(--bg2); color: var(--muted); cursor: pointer; }
.cm-like.on { background: #6a1f3a; color: #ffb0c8; }

/* 놀리기 SSR 효과 미리보기 버튼 */
.tc { position: relative; }
.tc-prev { display: block; width: 100%; margin-top: 4px; font-family: inherit; font-size: 10px; border: 0; padding: 4px 0; cursor: pointer; color: #fff; background: linear-gradient(90deg, #ff5a5f, #b06bff); }
.fx-say { animation: fxsay 2.6s steps(16) forwards; }
@keyframes fxsay { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 88% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -70%); } }

/* 10연속 뽑기 카드: 뚝뚝 끊기는 계단식 대신 부드럽게 (버벅여 보이던 문제) */
.g10c { animation: g10smooth .4s cubic-bezier(.2, 1.4, .5, 1) forwards; will-change: transform, opacity; }
@keyframes g10smooth { from { opacity: 0; transform: translateY(14px) scale(.6); } to { opacity: 1; transform: none; } }

/* 커뮤니티 후원자 표시: 픽셀 방구 아이콘 / 반짝이 닉네임 */
.fart-ic { width: 18px; height: 14px; image-rendering: pixelated; vertical-align: -1px; margin-left: 2px; animation: fartBob 1.2s steps(2) infinite; }
@keyframes fartBob { 50% { transform: translateY(-1px); } }
.shine-name { background: linear-gradient(90deg, #ffd23f, #ff8fc0, #7fd3ff, #9dffb0, #ffd23f); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shineName 2s linear infinite; text-shadow: none; }
@keyframes shineName { to { background-position: 300% 0; } }
.nm-spark { font-style: normal; color: #fff8b0; font-size: 10px; margin-left: 1px; animation: dnTwinkle .9s steps(3) infinite; }

/* 2026-10-21 2차: 전설 실루엣 SSSR/SSR 구분, 놀리기 미리보기, 새 필살 놀리기 */
.leg-sil { display: block; }
.sil-head { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 2px 5px; }
.sil-head b { font-size: 13px; }
.sil-head.SSSR b { color: #ffd23f; text-shadow: 0 0 6px rgba(255,210,63,.7); }
.sil-head.SSR b { color: #ff8fc0; }
.sil-head small { font-size: 10px; opacity: .7; }
.sil-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.sil-row.SSSR { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .sil-row.SSSR .sil { width: calc((100% - 16px) / 3); max-width: 130px; }
.sil-row.SSSR .sil { padding: 6px 4px 7px; background: radial-gradient(circle at 50% 40%, #3a2e10, var(--ink) 70%); animation: sssrGlow 1.6s ease-in-out infinite alternate; }
.sil-row.SSSR .sil canvas { width: 80px; height: 75px; }
.sil-row.SSSR .sil b { font-size: 12px; color: #ffd23f; }
.sil.SSR { box-shadow: 0 0 0 2px #ff8fc0; }
@keyframes sssrGlow { from { box-shadow: 0 0 0 2px #ffd23f, 0 0 6px rgba(255,210,63,.4); } to { box-shadow: 0 0 0 2px #ffd23f, 0 0 18px rgba(255,210,63,.9); } }
#tprev-field { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.tprev-fx { position: absolute; inset: 0; pointer-events: none; }
.tprev-panel .field-wrap { margin: 8px 0 4px; }
.tprev-ch { pointer-events: none; margin-bottom: 6px; }
#tprev-note { font-size: 11px; margin: 4px 0 10px; }
.tc-prev { pointer-events: auto; }
#field-wrap, #tprev-wrap { transition: transform .35s steps(5); }
.jam-flip { transform: rotate(180deg); }
.jam-gull { left: 0; top: 0; }
.jam-gull svg { width: 55px; height: 30px; display: block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
body.quake #tprev-wrap, body.quake #tprev-ch { animation: quake .12s steps(2) infinite; }
body.quake-big #tprev-wrap, body.quake-big #tprev-ch { animation: quakebig .1s steps(2) infinite; }
/* 2026-10-21 3차: 놀리기·꾸미기 목록 한 줄에 5칸 (작게) */
.taunt-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.taunt-grid .tc { padding: 4px 1px 3px; }
.taunt-grid .tc .spr, .taunt-grid .tc .spr canvas { width: 40px; height: 43px; }
.taunt-grid .tc .spr canvas.item-ic { width: 100%; max-width: 54px; height: auto; margin-top: 12px; }
.taunt-grid .tc .nm { font-size: 9px; line-height: 1.25; }
.taunt-grid .tc .nm .rar { display: block; width: fit-content; margin: 1px auto; font-size: 7px; }
.taunt-grid .tc .eq { font-size: 8px; padding: 0 2px; }
.taunt-grid .tc .sp { font-size: 8px; }
.taunt-grid .tc-prev { font-size: 9px; padding: 3px 0; }
/* 응원 팀 표시 (팀 이름 글자만) */
.fan-tag { display: inline-block; font-size: 9px; line-height: 1; padding: 2px 4px; margin-left: 4px; background: #2a3360; color: #cfd8ff; box-shadow: 0 0 0 1px #4a5590; vertical-align: middle; }
.fan-pick { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 12px; }
.fan-pick select { flex: 1; font: inherit; font-size: 12px; padding: 5px 6px; background: var(--card); color: var(--text); border: 0; box-shadow: 0 0 0 2px var(--ink); }
/* 관리자 공지 (admin.html에서 올림) */
#site-notice { position: fixed; left: 8px; right: 8px; top: 8px; z-index: 60; display: flex; gap: 8px; align-items: flex-start; background: #ffd23f; color: #2a1a05; padding: 8px 10px; font-size: 12px; line-height: 1.45; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 rgba(0,0,0,.35); max-width: 520px; margin: 0 auto; }
#site-notice span { flex: 1; }
#site-notice button { border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; color: #2a1a05; padding: 0 2px; }
/* 커뮤니티 크게 (2026-10-22) + 댓글 */
#comm-pop { padding: 6px; }
.comm-panel { max-width: 680px; width: 100%; height: calc(100dvh - 12px); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.comm-panel #comm-list { flex: 1; overflow-y: auto; min-height: 0; padding-right: 2px; }
.comm-panel .cm { padding: 10px; margin-bottom: 8px; }
.comm-panel .cm p { font-size: 15px; }
.cm-cbtn.on { background: #2a4a80; color: #cfe4ff; }
.cm-cmts { margin-top: 8px; padding: 8px 0 0 10px; border-left: 3px solid #2e3a6a; }
.cmt { padding: 4px 0 6px; border-bottom: 1px dashed #2a3360; }
.cmt .cm-top { font-size: 11px; }
.cmt p { font-size: 13px !important; margin: 3px 0 0; }
.cmt-del { border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; padding: 0 2px; }
.cmt-write { display: flex; gap: 6px; margin-top: 8px; align-items: flex-end; }
.cmt-write textarea { flex: 1; font-family: inherit; font-size: 13px; padding: 7px 8px; border: 0; background: #fff; color: #1a1a2a; resize: none; min-height: 34px; }
.cmt-write .btn { padding: 8px 12px; font-size: 12px; }
.odds { line-height: 1.6; }
/* SSR 옛날 흑백 TV (2026-10-22): 색 빠짐 + 가로줄 + 깜빡임, 글자·버튼은 그대로 보임 */
body.jam-oldtv #app, body.jam-oldtv #tprev-wrap, body.jam-oldtv #tprev-ch { filter: grayscale(1) contrast(1.2) brightness(1.05); }
.jam-tv { inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 2px, transparent 2px 4px); animation: tvflick .12s steps(2) infinite; }
.jam-tv .tv-roll { position: absolute; left: 0; right: 0; height: 70px; background: linear-gradient(transparent, rgba(255,255,255,.16), transparent); animation: tvroll 1.3s linear infinite; }
@keyframes tvflick { 50% { opacity: .7; } }
@keyframes tvroll { from { top: -70px; } to { top: 100%; } }
/* 우편함 (2026-10-22) */
#v-lobby .me-line { flex: 1 1 100%; }
.mail-btn { margin-left: auto; position: relative; padding-top: 7px; padding-bottom: 7px; }
.mail-btn.has { background: var(--accent); color: #2a1a05; animation: mailbob 1.2s ease-in-out infinite; }
@keyframes mailbob { 50% { transform: translateY(-2px); } }
.mail-n { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-style: normal; font-size: 10px; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--ink); }
.mail-panel { max-width: 460px; }
.mail { background: var(--ink); padding: 10px; margin-bottom: 8px; box-shadow: inset 3px 0 0 var(--accent); }
.mail.got { opacity: .55; box-shadow: none; }
.mail-top { display: flex; align-items: baseline; gap: 8px; }
.mail-top small { margin-left: auto; color: var(--muted); font-size: 10px; white-space: nowrap; }
.mail p { margin: 6px 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.mail-gifts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.gift { display: inline-flex; align-items: center; gap: 4px; background: var(--bg2); padding: 4px 8px; font-size: 12px; }
.gift.leg .spr { width: 30px; height: 32px; display: inline-block; }
.gift.leg .spr canvas { width: 30px; height: 32px; }
.mail .btn.small { padding: 6px 14px; font-size: 12px; }
/* 후원 팝업 FAIRY (2026-10-22): 짧게 보이고 혜택은 접기 */
.dn-price { display: flex; justify-content: center; gap: 14px; margin: 0 0 10px; font-family: "Galmuri14", sans-serif; font-size: 15px; color: var(--accent); }
.dn-price i { font-style: normal; margin-right: 4px; }
.dn-how { background: #fff; color: #1a1a2a; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 0 0 3px var(--ink); }
.dn-how > b { display: block; font-size: 13px; margin-bottom: 6px; color: #b0306a; }
.dn-field { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px dashed #d8d0e0; font-size: 13px; }
.dn-field span { flex: none; width: 78px; color: #6a6a8a; font-size: 12px; }
.dn-field p { margin: 0; font-weight: 700; }
.dn-field em { font-style: normal; color: #2a6fe0; }
.dn-how small { display: block; font-size: 11px; line-height: 1.5; color: #6a6a8a; margin: 6px 0 8px; }
.dn-how .btn { width: 100%; }
.dn-go { display: block; text-align: center; text-decoration: none; font-size: 16px; padding: 12px; }
.dn-mailnote { text-align: center; font-size: 12px; margin: 8px 0 4px; }
.dn-mailnote b { color: var(--accent); }
.dn-more { display: block; width: 100%; margin: 6px 0 0; padding: 8px; border: 0; background: var(--bg2); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.dn-detail { margin-top: 10px; }
/* 후원 팝업 2차 (2026-10-22) */
.dn-panel .dn-note { margin-top: 4px; }
.dn-price { flex-wrap: wrap; }
.dn-price small { flex-basis: 100%; text-align: center; font-family: "Galmuri11", sans-serif; font-size: 11px; color: #ffb0c8; }
.dn-field p i { font-style: normal; font-weight: 400; font-size: 11px; color: #8a8aa0; }
.dn-field span { width: 92px; }
.dn-how small u { color: #b0306a; text-decoration: none; font-weight: 700; }
.dn-more { background: #ff8fc0; color: #3a0a20; font-weight: 700; font-size: 14px; padding: 10px; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 #b0406a; animation: dnMoreGlow 1.4s ease-in-out infinite alternate; }
@keyframes dnMoreGlow { from { filter: brightness(1); } to { filter: brightness(1.15); } }
/* 커뮤니티 버튼 훈련장 위로 + 바구니 넣기 (2026-10-22) */
.comm-top { display: block; width: 100%; margin: 0 0 10px; text-align: left; }
.toss-btn { grid-column: 1 / -1; }
.ts-canvas { touch-action: none; cursor: crosshair; }
.ts-ammo { display: flex; gap: 2px; margin-top: 4px; min-height: 8px; }
.ts-ammo i { width: 6px; height: 6px; border-radius: 50%; background: #3a4270; box-shadow: 0 0 0 1px var(--ink); }
.ts-ammo i.on { background: #ffffff; box-shadow: 0 0 0 1px var(--ink), inset -1px 0 0 #d63a52; }
.ts-reload { font-size: 10px; color: var(--accent); animation: tsBlink .4s steps(2) infinite; }
@keyframes tsBlink { 50% { opacity: .3; } }
.ts-tip { text-align: center; }
/* 2026-10-22: 커뮤니티 버튼이 탭에 붙어 보이던 것, 바구니 넣기 버전 고르기 */
.comm-top { margin-top: 14px; }
.ts-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.ts-modes .btn { display: flex; flex-direction: column; gap: 3px; padding: 10px 6px; }
.ts-modes b { font-size: 15px; }
.ts-modes small { font-size: 10px; font-weight: 400; line-height: 1.35; }
/* 스토리 v2 (2026-10-22): 날씨·힌트·거짓말 예고 */
.field-wrap.w-rain::after, .field-wrap.w-night::after, .field-wrap.w-wind::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.field-wrap.w-rain::after { background: repeating-linear-gradient(105deg, rgba(180,210,255,.0) 0 9px, rgba(180,210,255,.35) 9px 10px); background-size: 40px 40px; animation: wRain .35s linear infinite; }
@keyframes wRain { to { background-position: -12px 40px; } }
.field-wrap.w-night::after { background: radial-gradient(circle at 50% 70%, rgba(10,12,40,.15), rgba(6,8,30,.62) 70%); }
.field-wrap.w-wind::after { background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.18) 22px 23px); background-size: 120px 46px; animation: wWind .6s linear infinite; }
@keyframes wWind { to { background-position: 120px 0; } }
.fxi .say.liar { background: #fff3a0; color: #3a2a00; box-shadow: 0 0 0 2px #21182a; }
.sy-hint { background: #1d2a4a; color: #cfe0ff; font-size: 12px; line-height: 1.5; padding: 8px 10px; margin: 6px 0 10px; box-shadow: inset 3px 0 0 #ffd23f; }
#banner.rule { color: #ffd23f; }
/* 스토리 장 버튼: 옆으로 밀지 않게 한 줄 5칸 × 3줄, 모두 같은 크기 (2026-10-23) */
#sy-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 3px; }
#sy-tabs button { flex: none; width: 100%; min-width: 0; padding: 8px 0; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 2px; }
#sy-tabs button i { font-style: normal; font-size: 10px; }
/* 시험판 미니게임 (2026-10-23) */
.mini-btn.try { position: relative; }
.try-tag { position: absolute; top: -7px; right: 4px; font-style: normal; font-size: 9px; padding: 1px 5px; background: #ff5a8a; color: #fff; box-shadow: 0 0 0 2px var(--ink); }
.mn-canvas { touch-action: none; }
.try-tag.new { background: #ffd23f; color: var(--ink); }
.mn-sub { display: flex; gap: 3px; margin-top: 4px; min-height: 8px; }
.mn-sub i { width: 8px; height: 8px; background: #3a4270; box-shadow: 0 0 0 1px var(--ink); }
.mn-sub i.on { background: #ff5a8a; }
.mini-grid > .mini-btn:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 미니게임이 홀수 개면 마지막 칸을 가로로 꽉 */
.tk-msg p { white-space: pre-line; }
/* 팝업이 열려 있으면 뒤 화면은 안 움직임 (팝업 안에서만 스크롤) */
html.noscroll, html.noscroll body { overflow: hidden; overscroll-behavior: none; }
.pop, .pop-panel, .sheet, .dodge, .dodge-panel { overscroll-behavior: contain; }
/* 내 닉네임 = 기록 보기 버튼 */
.me-btn { border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; display: inline-flex; align-items: baseline; gap: 4px; }
.me-btn i { font-style: normal; font-size: 12px; }
#rec-pop .record { margin: 0; }
/* 훈련장 잠금 */
.lobby-wrap.locked canvas { filter: grayscale(.85) brightness(.55); }
.lobby-wrap.locked .lb-enter { display: none; }
.lb-lock:empty { display: none; }
.lb-lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(10,12,30,.85); color: #fff; padding: 8px 12px; font-size: 13px; text-align: center; white-space: nowrap; box-shadow: 0 0 0 2px var(--accent); }
.lb-lock b { color: var(--accent); }
/* 커뮤니티: 관리자에게만 */
.comm-private { margin: 6px 0; padding: 6px 10px; font-size: 12px; background: #3a2a10; color: #ffd890; box-shadow: inset 3px 0 0 var(--accent); }
/* 뽑기 버튼 아래 빈 공간 없애기: 비어 있는 오류 줄·결과 칸은 자리 차지 안 함 */
#gacha-err:empty, #taunt-err:empty, #cos-err:empty, #gacha-result:empty, #taunt-result:empty, #cos-result:empty { display: none; }
.card .leg-head { margin-bottom: 10px; }
#cp-result:empty { display: none; }
/* 대화창 2차 (2026-10-26): 뒤 화면이 비치는 큰 창 · 게임 색 · 말풍선 크게 · 우리 편 오른쪽 */
.talk { background: rgba(8,10,24,.55); padding: calc(14px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom)); align-items: center; justify-content: center; }
.tk-panel { width: 100%; max-width: 560px; height: 100%; max-height: 760px; display: flex; flex-direction: column; background: rgba(29,37,70,.93); box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px var(--ink), 0 10px 0 6px rgba(0,0,0,.35); }
.tk-head { background: none; color: var(--text); padding: 12px 14px 10px; box-shadow: inset 0 -2px 0 rgba(255,255,255,.08); }
.tk-head b { color: var(--accent); font-size: 17px; }
#talk-skip { color: var(--text); box-shadow: 0 0 0 2px var(--muted); }
.tk-log { gap: 10px; padding: 16px 12px 10px; }
.tk-face { width: 58px; height: 58px; border-radius: 18px; }
.tk-face canvas { width: 58px; height: 69px; }
.tk-msg > div:last-child { max-width: calc(100% - 72px); }
.tk-msg b { font-size: 13px; color: #d8dcff; }
.tk-msg p { font-size: 17px; line-height: 1.55; padding: 10px 13px; }
.tk-msg.right p { background: #ffe94a; }
.tk-msg.coach p { background: #fff4d8; }
.tk-foot { background: none; color: var(--muted); box-shadow: inset 0 2px 0 rgba(255,255,255,.08); }
.tk-foot.go { background: var(--accent); color: #2a1a05; }
/* 튜토리얼: 진짜 화면 위에 비추는 구멍 + 방구코치 말풍선 */
.tut { position: fixed; inset: 0; z-index: 80; cursor: pointer; touch-action: none; }
.tut-hole { position: fixed; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(5,7,18,.74); outline: 3px solid var(--accent); outline-offset: 2px; transition: left .25s, top .25s, width .25s, height .25s; animation: tutPulse 1s ease-in-out infinite alternate; pointer-events: none; }
@keyframes tutPulse { from { outline-color: var(--accent); } to { outline-color: #fff6b0; } }
.tut-box { position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 420px; display: flex; gap: 10px; align-items: flex-start; background: var(--bg2); padding: 12px; box-shadow: 0 0 0 3px var(--accent), 0 6px 0 3px var(--ink); transition: top .25s; }
.tut-face { width: 60px; height: 60px; flex: none; background: #fff4d8; border-radius: 16px; overflow: hidden; }
.tut-face canvas { width: 60px; height: 72px; image-rendering: pixelated; display: block; }
.tut-say { flex: 1; min-width: 0; }
.tut-say b { color: var(--accent); font-size: 13px; }
.tut-say p { margin: 4px 0 6px; font-size: 15px; line-height: 1.55; white-space: pre-line; }
.tut-say small { color: var(--muted); font-size: 11px; }
.tut-skip { position: absolute; right: 8px; bottom: 8px; }
.tut-say small { display: block; padding-right: 76px; }
.tut .tut-skip { position: fixed; top: auto; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); height: auto; }
.tut-say small { padding-right: 0; }
/* 픽셀 아이콘 (picons.js) — 이모지 대신 */
.pi { display: inline-block; line-height: 0; vertical-align: -0.14em; }
.pi svg { height: 1.05em; width: auto; display: block; image-rendering: pixelated; }
.rk-no .pi svg { height: 1.2em; }
.tk-head #talk-exit { flex: none; color: var(--text); box-shadow: 0 0 0 2px var(--muted); }
/* 훈련장 구경·좋아요 (2026-10-27) */
#v-camp.visiting .card, #v-camp.visiting > h3, #v-camp.visiting #cp-filter, #v-camp.visiting > .hint:not(.cp-tip), #v-camp.visiting #cp-grid, #v-camp.visiting .cp-pts-box { display: none; }
.cp-like { background: #2a3a6a; color: #fff; }
.cp-like.on { background: var(--accent); color: #2a1a05; }
.cp-likes-badge { position: absolute; right: 6px; top: 6px; background: rgba(10,12,30,.8); color: #fff; font-size: 12px; padding: 3px 7px; box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }
.cp-likes-badge:empty { display: none; }
.cp-likes-badge b { color: var(--accent); }
.cp-tip { margin: 2px 0 6px; font-size: 11px; }
#camp-wrap { cursor: pointer; }
.rk[data-visit] { cursor: pointer; }
.cp-board { background: var(--card); padding: 10px 12px; margin: 0 0 10px; box-shadow: 0 0 0 2px var(--ink); }
.cp-board b { display: block; font-size: 13px; color: var(--accent); margin-bottom: 6px; }
.cp-board .row { gap: 8px; }
.cp-board input { flex: 1; min-width: 0; }
.pts .cp-like b { color: inherit; font-size: inherit; }
/* 방명록 (2026-10-27) */
.cp-gb { background: var(--card); padding: 10px 12px; margin: 0 0 10px; box-shadow: 0 0 0 2px var(--ink); }
.cp-gb-title { display: block; font-size: 14px; color: var(--accent); margin-bottom: 8px; }
.cp-gb-title small { color: var(--muted); font-size: 11px; margin-left: 4px; }
.cp-gb-write { gap: 8px; margin-bottom: 8px; }
.cp-gb-write input { flex: 1; min-width: 0; }
#cp-gb-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
.gb-e { background: var(--bg2); padding: 7px 9px; box-shadow: inset 3px 0 0 #7fd3ff; }
.gb-e.mine { box-shadow: inset 3px 0 0 var(--accent); }
.gb-top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.gb-top b { color: #d8dcff; }
.gb-top small { color: var(--muted); font-size: 10px; margin-right: auto; }
.gb-e p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; word-break: keep-all; }
.gb-rep, .gb-del, .cm-rep { border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; padding: 2px 4px; }
.gb-rep:hover, .cm-rep:hover { color: #ff8a8a; }
#v-camp.visiting .cp-gb { display: block; }
.tut-btn { background: #3a2a6a; color: #ffd8ff; }
.tut-hole, .tut-box { transition: none; } /* 위치를 매 프레임 맞추니 애니메이션은 끔 (따라가다 늦어 보임) */

/* ---------- 상점 (2026-10-27) ---------- */
.tabs button.shop-tab { color: var(--accent); }
.tabs button.shop-tab.on { color: #2a1a05; }
.shop-sub { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0 0 10px; }
.shop-sub button { font: inherit; font-size: 12px; background: var(--bg2, #1c2348); color: var(--muted); border: 0; padding: 8px 2px; cursor: pointer; box-shadow: inset 0 0 0 2px var(--line); display: flex; align-items: center; justify-content: center; gap: 2px; }
.shop-sub button.on { background: var(--accent); color: #2a1a05; box-shadow: none; font-weight: 700; }
.shop-sub button.sh-donate { color: #ff8fc0; }
.shop-sub button.sh-donate.on { background: #ff8fc0; color: #3a1428; }
.shop-pane > .btn.wide { margin-top: 8px; }
.shop-link { margin: 0 0 12px; }
.dn-card { padding-bottom: 6px; }
.shop-item { background: var(--card); box-shadow: inset 0 0 0 2px var(--line); padding: 12px; margin: 10px 0; }
.shop-item.ssr { box-shadow: inset 0 0 0 2px #ff9a3c; }
.shop-item.sssr { box-shadow: inset 0 0 0 2px #ffd23f; background: linear-gradient(180deg, #3a3060, var(--card)); }
.shop-item.cheer { box-shadow: inset 0 0 0 2px #ff8fc0; }
.si-top { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.si-top b { flex: 1; }
.si-top em { font-style: normal; font-weight: 700; color: var(--accent); font-size: 16px; }
.shop-item.cheer .si-top .pi { color: #ff8fc0; }
.shop-item ul { margin: 8px 0 10px; padding-left: 18px; font-size: 12px; line-height: 1.6; color: var(--text); }
.od-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--card); padding: 8px 10px; margin: 6px 0; box-shadow: inset 0 0 0 2px var(--line); }
.od-row > div:first-child { flex: 1; min-width: 0; }
.od-row small { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; }
.od-row small em { font-style: normal; color: var(--accent); font-weight: 700; }
.od-st { font-size: 11px; padding: 2px 6px; background: var(--ink); color: var(--accent); }
.od-row.paid .od-st { color: var(--green); }
.od-acts { width: 100%; display: flex; gap: 6px; justify-content: flex-end; }
.od-lead { text-align: center; line-height: 1.6; margin: 4px 0 12px; }
.od-f { display: block; font-size: 13px; margin: 0 0 10px; }
.od-f small { color: var(--muted); }
.od-f input { display: block; width: 100%; margin-top: 4px; }
.od-code { text-align: center; background: var(--ink); padding: 10px; margin: 0 0 10px; }
.od-code small { display: block; color: var(--muted); font-size: 12px; }
.od-code b { font-size: 40px; color: var(--accent); letter-spacing: 6px; }
.od-steps { margin: 0 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.od-steps li { margin-bottom: 6px; }
.od-steps small { color: var(--muted); }
.od-toss { display: block; text-align: center; text-decoration: none; margin-bottom: 8px; }
.nm-heart { display: inline-flex; vertical-align: middle; margin-left: 3px; color: #ff6fa8; }
.nm-heart .pi, .nm-heart svg { width: 11px; height: 11px; }
/* 성장 (내 팀 선수 창) */
.grow-box { display: flex; align-items: center; gap: 10px; background: var(--ink); padding: 8px 10px; margin: 8px 0; box-shadow: inset 0 0 0 2px var(--green); }
.grow-info { flex: 1; }
.grow-info b { color: var(--green); }
.grow-info small { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; }
.grow-box .btn { display: flex; flex-direction: column; align-items: center; line-height: 1.3; padding: 6px 12px; }
.grow-box .btn small { font-size: 10px; opacity: .8; }
.grow-res { text-align: center; color: var(--green); font-weight: 700; padding: 6px; animation: growPop .6s ease-out; }
@keyframes growPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
/* 송금 선택: 카카오페이 / 토스 */
.od-owner { text-align: center; font-size: 13px; line-height: 1.5; background: var(--ink); padding: 8px; margin: 0 0 10px; }
.od-owner small { color: var(--muted); }
.od-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.od-pays .btn { display: block; text-align: center; text-decoration: none; line-height: 1.35; padding: 12px 4px; font-weight: 700; }
.od-kakao { background: #fee500 !important; color: #191600 !important; }
.od-tossb { background: #3182f6 !important; color: #fff !important; }
/* 송금 보내는 이름 안내 + 송금 완료 버튼 */
.od-note { font-size: 11px; color: var(--muted); line-height: 1.5; margin: -4px 0 12px; }
.od-sent { margin-top: 10px; }
/* 상점 후원 탭: 광장 가기 버튼 + 광장 안내 */
.plaza-go { display: block; text-align: center; text-decoration: none; margin: 0 0 10px; background: linear-gradient(90deg, #7e3470, #d0566a, #f8a060); color: #fff; font-weight: 700; padding: 12px 8px; box-shadow: 0 4px 0 #3a1a3a; }
.dn-plaza { font-size: 13px; line-height: 1.7; margin: 8px 0 10px; color: var(--text); }
.dn-plaza b { color: var(--accent); }
/* 훈련장 전광판 문구: 그림 위 진짜 글씨로 흘러감 (그림 속 도트 글씨는 흐려서) */
.cp-board-txt { position: absolute; left: 4%; top: 14.67%; width: 23%; height: 13.33%; overflow: hidden; display: flex; align-items: center; pointer-events: none; }
.cp-board-txt span { display: inline-block; white-space: nowrap; padding-left: 100%; color: #ffd23f; font-family: 'Galmuri11', monospace; font-weight: 700; font-size: clamp(11px, 3.6vw, 16px); text-shadow: 0 0 4px rgba(255, 210, 63, .7); animation: cpMarquee 8s linear infinite; }
@keyframes cpMarquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* 필수 약관 동의 창 + 로그인 화면 약관 링크 */
.agree { position: fixed; inset: 0; z-index: 90; background: rgba(8, 10, 24, .82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.agree-panel { width: 100%; max-width: 360px; background: var(--card); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); padding: 16px; }
.agree-title { display: block; font-size: 16px; line-height: 1.5; color: var(--accent); margin-bottom: 12px; text-align: center; }
.ag-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; }
.ag-row span { flex: 1; }
.ag-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.ag-row a { color: var(--muted); font-size: 12px; text-decoration: underline; }
.ag-all { font-weight: 700; font-size: 14px; background: var(--ink); border: 0; margin-bottom: 4px; padding: 10px 8px; }
.agree-panel .btn { margin-top: 8px; }
.agree-panel .btn:disabled { opacity: .45; }
.legal-links { display: flex; justify-content: center; gap: 14px; margin: 14px 0 0; font-size: 12px; }
.legal-links a { color: var(--muted); }
/* 카카오 로그인 버튼 + 처음 온 사람 창 */
a.btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.btn.kakao { background: #fee500; color: #191600; margin: 0 0 4px; font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
.btn.kakao .pi { vertical-align: -2px; }
.btn.google { background: #fff; color: #1f1f1f; margin: 8px 0 4px; font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
.btn.google .pi { vertical-align: -2px; }
#login-err:empty { display: none; }
.or-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin: 10px 0 4px; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.15); }
#sns-pop .agree-panel { max-height: 92dvh; overflow-y: auto; }
.sns-box { background: rgba(255,255,255,.06); padding: 10px 12px 12px; margin-bottom: 10px; font-size: 13px; }
.sns-box > b { display: block; color: var(--accent); margin-bottom: 6px; }
.sns-box p { margin: 0 0 6px; font-size: 12px; line-height: 1.5; }
.sns-box label { display: block; margin-top: 6px; }
.sns-box input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
/* 시안 게임 모드 (2026-10-31): banggu-yagu-test 사이트에서만 */
.lab-only { text-align: center; margin-bottom: 14px; padding: 12px; border: 2px dashed #ffd23f; border-radius: 10px; }
.lab-only b { color: #ffd23f; font-size: 16px; }
.lab-only p { margin: 6px 0 10px; font-size: 12px; opacity: .85; }
.lab-only .btn { margin-top: 6px; }
html.lab body::after { content: '시안 모드'; position: fixed; left: 6px; bottom: 6px; z-index: 9999; padding: 3px 7px; border-radius: 6px; background: #ffd23f; color: #141a33; font-size: 11px; font-weight: bold; pointer-events: none; opacity: .9; }html.lab #b-kakao, html.lab #b-google { display: none; }
/* 설정 창 (2026-10-31 시안) */
.set-btn { position: relative; padding-top: 7px; padding-bottom: 7px; margin-left: 6px; }
#b-tut, #v-lobby .top .b-bgm, #b-logout { display: none; }
.set-panel { max-width: 360px; }
.set-group { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.set-row + .set-row { border-top: 1px solid rgba(255,255,255,.08); }
.set-tg { min-width: 64px; }
.set-links { display: flex; flex-direction: column; gap: 8px; }
.set-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.set-links small { opacity: .7; }
.set-out { margin-top: 14px; color: #ff8f8f; }/* 대표 캐릭터 (2026-10-31 시안) */
.rep-box { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid #ffd23f; }
.rep-box .rep-face { width: 52px; height: 56px; flex: none; }
.rep-box .rep-face canvas { width: 52px; height: 56px; }
.rep-mid { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-mid b { font-size: 15px; color: #ffd23f; }
.rep-panel { max-width: 420px; max-height: 86dvh; display: flex; flex-direction: column; }
.rep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; overflow-y: auto; padding: 4px 2px; }
.rep-c { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; background: rgba(255,255,255,.06); border: 2px solid transparent; color: inherit; font: inherit; font-size: 11px; }
.rep-c.on { border-color: #ffd23f; }
.rep-c .spr { width: 40px; height: 44px; }
.rep-c .spr canvas { width: 40px; height: 44px; }
.rep-c b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gb-face { margin-right: 4px; }/* 꾸미기 개편 시안 (2026-10-31, 시안 모드만): 미리보기를 위에 붙여 두고 목록만 스크롤 */
html:not(.lab) .lab-btn { display: none; }
.cos-dock { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: 6px 0 8px; box-shadow: 0 8px 10px -8px rgba(0,0,0,.7); }
.cos-dock .cos-preview { margin-bottom: 6px; padding: 8px 8px 6px; }
.cos-dock .hint { display: none; }
.cos-dock .cos-stage .spr canvas { width: 80px; height: 86px; }
.cos-dock .cos-slots { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 0; }
.cos-dock .cslot { font-size: 11px; padding: 5px 2px; }
.cos-dock h3 { margin: 6px 0 4px; }
.cos-dock .cos-filter { margin: 0; }
.cos-preview.flash { animation: cosFlash .35s; }
@keyframes cosFlash { 0% { box-shadow: 0 0 0 3px #ffd23f; } 100% { box-shadow: 0 0 0 0 transparent; } }.cos-dock .dress-tg { display: block; margin: 6px auto 0; font-size: 11px; }
.cos-dock .dress-tg b { color: #ffd23f; }
.cos-dock .dress-tg.ghost b { color: inherit; opacity: .7; }/* 꾸미기 상점식 화면 (2026-11-01 시안): 탭 전체가 화면 높이에 딱 맞고, 위 = 큰 캐릭터·착용 칸(고정), 아래 = 목록만 스크롤 */
#t-cos:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
#t-cos .rep-box { flex: none; margin-bottom: 6px; padding: 6px 10px; }
#t-cos .rep-box .rep-face, #t-cos .rep-box .rep-face canvas { width: 40px; height: 44px; }
#t-cos .cos-dock { flex: none; position: static; box-shadow: none; padding: 0; }
#t-cos .cos-dock .cos-stage { gap: 18px; }
#t-cos .cos-dock .cos-stage .spr canvas { width: 124px; height: 134px; }
#t-cos #cos-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 40px; align-content: start; box-shadow: inset 0 10px 10px -10px rgba(0,0,0,.8); }#t-cos .rep-box .rep-mid small.muted { display: none; }
#t-cos .rep-box .rep-mid b { font-size: 14px; }
#t-cos .rep-box .btn { padding: 6px 10px; }
#t-cos .cos-dock > h3 { display: none; }
#t-cos .cos-dock .cos-preview { padding: 4px 8px 6px; }
#t-cos .cos-dock .cos-stage .spr canvas { width: 108px; height: 116px; }
#t-cos .cos-dock .cos-filter { margin-top: 2px; }/* 목록 스크롤바 숨김 (2026-11-01 사용자 요청) — 스크롤은 그대로 됨 */
#t-cos #cos-list { scrollbar-width: none; }
#t-cos #cos-list::-webkit-scrollbar { display: none; }/* 리그 (2026-11-01 시안 사이트만) — 운영에선 리그 카드·습관 칸 숨김, 시안에선 랭킹 대신 리그 */
.rank-card { display: none; } /* 2026-11-02 운영에도 전설의 리그 카드가 랭킹 자리 */
.league-card { font: inherit; color: var(--text); text-align: left; cursor: pointer; border: 2px solid #ffd23f; display: flex; flex-direction: column; gap: 6px; }
.league-card h2 { margin: 0; color: #ffd23f; }
.league-card p { margin: 0; font-size: 12px; line-height: 1.5; opacity: .9; }
.league-card .lg-go, .lg-card .lg-go { font-size: 12px; color: #ffd23f; margin-top: auto; }
.league-panel { max-width: 460px; height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; }
.league-panel .quiz-top { gap: 6px; }
.league-panel .quiz-top b { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lg-body { flex: 1; overflow-y: auto; scrollbar-width: none; padding-bottom: 30px; }
#lg-body::-webkit-scrollbar { display: none; }
#lg-body h3 { margin: 16px 0 6px; }
#lg-body .btn.wide { margin-top: 8px; }
.lg-card { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; font: inherit; color: var(--text); background: rgba(255,255,255,.06); border: 0; border-left: 4px solid #7fd3ff; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; }
.lg-card small { font-size: 11px; opacity: .85; }
.lg-c-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lg-st { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: #3a7bff; color: #fff; white-space: nowrap; }
.lg-st.live { background: #46c24a; } .lg-st.done { background: #6a6a82; }
.lg-lbl { display: block; margin: 14px 0 6px; font-size: 13px; color: #ffd23f; }
#lg-name { width: 100%; box-sizing: border-box; }
.lg-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lg-seg.two { grid-template-columns: 1fr 1fr; }
.lg-seg button { font: inherit; font-size: 13px; padding: 8px 4px; background: var(--bg); color: var(--text); border: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lg-seg button small { font-size: 10px; opacity: .75; }
.lg-seg button.on { border-color: #ffd23f; color: #ffd23f; }
.lg-info { margin: 14px 0 4px; padding: 10px 12px; background: rgba(255,255,255,.06); font-size: 12px; line-height: 1.55; }
.lg-info p { margin: 0 0 6px; }
.lg-head { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: rgba(255,255,255,.06); }
.lg-head small { font-size: 11px; line-height: 1.5; }
.lg-prize { font-size: 13px; }
.lg-prize b { color: #ffd23f; }
.lg-prize div { display: flex; gap: 10px; margin-top: 4px; font-size: 12px; }
.lg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 8px; }
.lg-tabs button { font: inherit; font-size: 13px; padding: 8px 0; background: var(--bg); color: var(--muted); border: 0; cursor: pointer; }
.lg-tabs button.on { background: #ffd23f; color: #2a1a05; }
.lg-table { display: flex; flex-direction: column; gap: 3px; }
.lg-row { display: grid; grid-template-columns: 34px 1fr 40px 62px 34px; align-items: center; gap: 4px; padding: 5px 6px; background: rgba(255,255,255,.05); font-size: 12px; cursor: pointer; }
.lg-row.h { background: none; font-size: 10px; color: var(--muted); cursor: default; }
.lg-row.mine { box-shadow: inset 3px 0 0 #ffd23f; }
.lg-row > span:not(.lg-nm), .lg-row > b { text-align: center; }
.lg-nm { display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-tip { font-size: 11px; margin-top: 8px; }
.lg-warn { font-size: 12px; line-height: 1.5; padding: 8px 10px; background: rgba(232,64,58,.15); margin: 0 0 8px; }
.lg-game { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(255,255,255,.05); margin-bottom: 4px; }
.lg-game b { flex: 1; }
.lg-r { font-size: 13px; font-weight: bold; } .lg-r.win { color: #46c24a; } .lg-r.lose { color: #ff8f8f; } .lg-r.draw { color: #ffd23f; }
.lg-write { display: flex; gap: 6px; margin-bottom: 8px; }
.lg-write input { flex: 1; min-width: 0; }
.lg-post { background: rgba(255,255,255,.05); padding: 7px 9px; margin-bottom: 5px; }
.lg-post p { margin: 3px 0 0; font-size: 13px; word-break: keep-all; }
/* 내 습관 통계 */
.habit-box h3 { margin: 0 0 4px; }
.hb-tip { font-size: 11px; margin: 0 0 8px; line-height: 1.5; }
.hb-sec { margin: 10px 0 4px; font-size: 13px; }
.hb-row { display: grid; grid-template-columns: 72px 1fr 38px 40px; align-items: center; gap: 6px; font-size: 12px; margin: 4px 0; }
.hb-bar { height: 8px; background: rgba(255,255,255,.1); }
.hb-bar i { display: block; height: 100%; background: #ffd23f; }
.hb-row b { text-align: right; } .hb-row small { color: var(--muted); font-size: 10px; }.lg-pw { width: 100%; box-sizing: border-box; margin-top: 8px; letter-spacing: 6px; text-align: center; font-size: 18px; }
.hb-reset { margin-top: 10px; font-size: 12px; }
.hb-reset small { font-size: 10px; opacity: .75; }
/* 2026-10-31 운영: 후원은 출시 전까지 숨김 (시안 사이트에선 보임). 광장 가는 길은 꾸미기 대표 캐릭터 칸으로 */

.rep-plaza { font-size: 11px; color: #7fd3ff; text-decoration: none; margin-top: 2px; }/* 미니게임 위쪽 숫자 칸 폭 고정 (2026-11-01 사용자 요청): 시간·개수 숫자가 바뀌어도 옆 보상 칸(100P·200P…)이 안 움직이게 */
.dg-hud { grid-template-columns: 112px 1fr; }
.dg-time { white-space: nowrap; overflow: hidden; }
.dg-time b { display: inline-block; min-width: 2.7em; text-align: right; font-variant-numeric: tabular-nums; }/* 전설의 리그 = 랭크전 (2026-11-01 시안) */
#res-pts { white-space: pre-line; }
.lg-tabs.two { grid-template-columns: 1fr 1fr; }
.rk-tier { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.08); white-space: nowrap; }
.rk-tier .pi svg { height: 1.3em; }
.rk-tier.big { font-size: 18px; padding: 6px 12px; }
.rk-tier.big .pi svg { height: 1.6em; }
.rk-tier.bronze { color: #e0a070; } .rk-tier.silver { color: #d0d0dc; } .rk-tier.gold { color: #ffd23f; } .rk-tier.plat { color: #5ad8c8; }
.rk-tier.dia { color: #9cc2ff; } .rk-tier.master { color: #c89aff; } .rk-tier.gm { color: #ff7a7a; } .rk-tier.chal { color: #fff6a0; text-shadow: 0 0 6px #ffd23f; }
.rk-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; background: rgba(255,255,255,.06); text-align: center; margin-top: 4px; }
.rk-pts b { font-family: "Galmuri14", sans-serif; font-size: 34px; color: var(--accent); }
.rk-card small { font-size: 12px; line-height: 1.5; opacity: .85; }
.rk-go { font-size: 18px; padding: 14px; margin-top: 10px; }
.rk-tip { font-size: 11px; line-height: 1.5; margin: 8px 0 0; }
.rk-h { display: grid; grid-template-columns: 26px 1fr auto 44px; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(255,255,255,.05); margin-bottom: 4px; font-size: 13px; }
.rk-h small { color: var(--muted); }
.rk-d { text-align: right; font-weight: bold; } .rk-d.up { color: #46c24a; } .rk-d.down { color: #ff8f8f; }
.rk-top { display: flex; flex-direction: column; gap: 3px; }
.rk-row { display: grid; grid-template-columns: 24px 24px 1fr auto 42px; align-items: center; gap: 5px; padding: 5px 6px; background: rgba(255,255,255,.05); font-size: 12px; cursor: pointer; }
.rk-row.mine { box-shadow: inset 3px 0 0 #ffd23f; }
.rk-row b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rk-no { text-align: center; color: var(--muted); } .rk-r { text-align: right; font-weight: bold; }
.rk-lock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 12px; text-align: center; }
.rk-lock .pi svg { height: 40px; }
.rk-lock p { margin: 0; line-height: 1.6; }
.rk-prog { width: 80%; height: 10px; background: rgba(255,255,255,.1); }
.rk-prog i { display: block; height: 100%; background: #ffd23f; }
.rk-found { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 12px; text-align: center; }
.rk-found .spr canvas { width: 120px; height: 130px; }
.rk-found b { font-size: 20px; }/* 앱으로만 + 구단 이름으로 시작 (2026-11-02) */
.gate, .start-box { display: flex; flex-direction: column; gap: 10px; }
.gate.hidden, .start-box.hidden { display: none; }
.gate-title { font-family: "Galmuri14", sans-serif; font-size: 18px; color: var(--accent); text-align: center; line-height: 1.4; }
.gate-sub { text-align: center; font-size: 13px; margin: 0; line-height: 1.5; }
#team-name { font-size: 18px; text-align: center; padding: 12px; }
.start-agree { font-size: 12px; line-height: 1.5; align-items: flex-start; }
.start-agree a { color: #7fd3ff; }
.old-login { margin-top: 6px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.15); text-align: center; display: flex; flex-direction: column; gap: 6px; }
.old-login small { opacity: .75; }
.old-login .row { justify-content: center; gap: 6px; }
.old-login .btn { flex: 1; font-size: 12px; padding: 8px 4px; }
.set-hint { font-size: 11px; margin: 4px 0 0; opacity: .75; }/* 로비 전설의 리그 카드: 엠블럼 + 점수·티어 + 승률 (2026-11-02) */
.rk-em { image-rendering: pixelated; display: inline-block; vertical-align: middle; }
.rk-em.sm { width: 22px; height: 22px; }
.rk-em.big { width: 120px; height: 120px; }
.rk-em.lob { width: 78px; height: 78px; flex: none; position: relative; z-index: 1; }
.rk-lob-em { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.rk-lob-em .spr { width: 52px; height: 56px; flex: none; margin: 0 -10px 0; }
.rk-lob-em .spr canvas { width: 52px; height: 56px; }
.rk-lob-em .flip { transform: scaleX(-1); }
/* 광장은 임시로 뺌 (2026-11-02) — 링크만 숨김, /plaza-hq 페이지는 남아 있음 */
.rep-plaza, .plaza-go { display: none !important; }
.rk-tier .rk-em.sm { margin: -4px 0; }
.rk-tier.big { flex-direction: column; background: none; font-size: 18px; gap: 2px; }
.rk-lob { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.rk-lob-pt { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 6px; }
.rk-lob-pt b { font-family: "Galmuri14", sans-serif; font-size: 24px; color: var(--accent); line-height: 1; }
.rk-lob-pt small { font-size: 12px; margin-left: -4px; }
.rk-lob-pt .rk-tier { align-self: center; }
.rk-lob-rate { font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; }
.rk-lob-rate b { color: #46c24a; font-size: 18px; }
.rk-lob-rate small { font-size: 12px; opacity: .8; }
.rk-lob-lock { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; opacity: .85; }
/* 앱 설치하기 버튼 반짝이 + 버튼으로 안 될 때 순서 반짝 (2026-11-02) */
.ins-go { position: relative; overflow: hidden; animation: insPulse 1.6s ease-in-out infinite; }
.ins-go::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); animation: insShine 2.2s linear infinite; pointer-events: none; }
.ins-go:disabled { animation: none; opacity: .7; }
@keyframes insShine { 0% { left: -40%; } 55%, 100% { left: 130%; } }
@keyframes insPulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.03); filter: brightness(1.15); } }
.ins-steps.ins-flash li { animation: insFlash .5s steps(2) 4; }
@keyframes insFlash { 50% { box-shadow: 0 0 0 3px var(--accent); } }

/* 아이폰 설치 안내 (2026-11-03, 시안 ios-install-sample에서 확정) */
.ins-steps.ios li > div:not(.im) { flex: 1; font-size: 13px; line-height: 1.5; }
.im { flex: none; width: 112px; background: #f2f2f7; border-radius: 10px; padding: 6px; color: #111; font-family: -apple-system, "Apple SD Gothic Neo", sans-serif; font-size: 10px; line-height: 1.3; }
.im-bar { display: flex; align-items: center; gap: 4px; }
.im-url { flex: 1; height: 18px; background: #fff; border-radius: 9px; font-size: 9px; color: #666; display: grid; place-items: center; }
.im-dots { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: bold; font-size: 12px; letter-spacing: -1px; }
.im-dots svg, .im-row svg, .im-tool svg { width: 12px; height: 12px; display: block; }
.im-row { display: flex; align-items: center; gap: 5px; padding: 4px 5px; border-radius: 6px; }
.im-row + .im-row { border-top: 1px solid #ddd; }
.im-row b { color: #111; }
.im-row:not(.im-hl) { color: #999; }
.im-tool { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.im-tool i { width: 14px; height: 14px; display: grid; place-items: center; color: #0a84ff; font-style: normal; font-size: 12px; font-weight: bold; }
.im-tool i.im-sh { width: 22px; height: 22px; border-radius: 6px; background: #fff; }
.im-hl { outline: 3px solid var(--red); outline-offset: 1px; animation: imBlink 1s steps(2) infinite; }
.im-row.im-hl { background: #fff; }
@keyframes imBlink { 50% { outline-color: var(--accent); } }
.ins-lay { display: flex; align-items: center; gap: 8px; background: var(--bg2); box-shadow: 0 0 0 2px #3a4270; padding: 8px 10px; margin-bottom: 10px; font-size: 12px; line-height: 1.5; text-align: left; }
.ins-lay div { flex: 1; }
.ins-lay b { color: var(--accent); }
.ins-lay button { flex: none; font: inherit; font-size: 12px; padding: 8px; border: 0; background: #7fd3ff; color: #0b2030; box-shadow: 0 0 0 2px var(--ink); cursor: pointer; }
.ins-brw { background: #3a1d3f; box-shadow: 0 0 0 3px var(--ink); padding: 14px 12px; margin-bottom: 10px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.ins-brw p { margin: 0; font-size: 14px; line-height: 1.6; }
.ins-brw b { color: var(--accent); }
.ins-brw .big { font-family: "Galmuri14", sans-serif; font-size: 19px; }
.ins-brw .btn { text-decoration: none; text-align: center; }
.ins-brw a.ins-go { font-size: 19px; padding: 16px; background: var(--accent); color: #2a1a05; }
.ins-brw .ins-sky { background: #7fd3ff; color: #0b2030; }
.ins-brw small { font-size: 11px; color: var(--muted); line-height: 1.5; }
.ins-brw small.after-go { margin: -2px 0 6px; }
.ins-point { position: fixed; right: 10px; bottom: 10px; z-index: 9000; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; animation: insBob .7s ease-in-out infinite alternate; }
.ins-point.hidden { display: none; }
.ins-point .bub { background: var(--accent); color: #2a1a05; font-family: "Galmuri14", sans-serif; font-size: 15px; padding: 8px 10px; box-shadow: 0 0 0 3px var(--ink); text-align: center; line-height: 1.35; margin-bottom: 4px; }
.ins-point svg { width: 54px; height: 54px; margin-right: 6px; image-rendering: pixelated; }
@keyframes insBob { from { transform: translateY(-10px); } to { transform: translateY(4px); } }
.ins-point.mid { right: auto; left: 50%; align-items: center; animation-name: insBobMid; }
.ins-point.mid svg { margin-right: 0; }
@keyframes insBobMid { from { transform: translate(-50%, -10px); } to { transform: translate(-50%, 4px); } }
/* ☰ 자리: 사파리 아래 막대는 왼쪽부터 크기가 정해진 순서(뒤로 동그라미 → 주소창 안 ☰)라 폰 너비와 상관없이
   ☰ 가운데가 화면 왼쪽에서 약 112px (2026-11-10 사용자 아이폰 캡처로 잼). 화살표 가운데를 거기에 맞춤 */
.ins-point.left { right: auto; left: 12px; bottom: 6px; align-items: flex-start; }
.ins-point.left svg { margin-right: 0; margin-left: calc(112px - 12px - 27px); }
.ins-point.left .bub { margin-left: calc(112px - 12px - 60px); }
.ins-point.top { bottom: auto; top: 10px; flex-direction: column-reverse; animation-name: insBobUp; }
.ins-point.top svg { transform: rotate(180deg); margin-bottom: 4px; }
.ins-point.top .bub { margin-bottom: 0; }
@keyframes insBobUp { from { transform: translateY(10px); } to { transform: translateY(-4px); } }
/* 설치 안내 화면 맨 아래가 말풍선에 안 가리게 */
#v-login { padding-bottom: 120px; }
.ins-steps .im-row b { color: #111; }
.ins-brw .btn { background: var(--accent); color: #2a1a05; }

/* 삼성 인터넷 등 '다크 모드'가 게임 색을 다시 칠하지 않게 (2026-11-03: 안드로이드에서 노랑이 갈색으로 보였음)
   원래 어두운 화면이라고 알려 줌 — index.html 등 head의 <meta name="color-scheme" content="dark only">와 같이 */
:root { color-scheme: dark only; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark only; } }

/* 아이폰 따라 하기 움짤 (2026-11-03, install.js iaHtml/iaStart) */
.ia { margin: 0 0 12px; }
.ia-phone { width: 190px; height: 330px; margin: 0 auto; background: #111; border-radius: 28px; padding: 8px; box-shadow: 0 0 0 3px #555, 0 6px 0 0 var(--ink); }
.ia-scr { position: relative; width: 100%; height: 100%; border-radius: 21px; overflow: hidden; background: #f2f2f7; font-family: -apple-system, "Apple SD Gothic Neo", sans-serif; color: #111; font-size: 10px; }
.ia-pg { position: absolute; inset: 0; }
.ia-pg.hidden { display: none; }
.ia-site { position: absolute; inset: 0 0 40px; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ia-site img { width: 54px; height: 54px; image-rendering: pixelated; }
.ia-site b { font-family: "Galmuri14", sans-serif; color: var(--accent); font-size: 16px; }
.ia-sbar, .ia-tbar { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: #f2f2f7; display: flex; align-items: center; padding: 0 8px; gap: 6px; }
.ia-tbar { justify-content: space-around; }
.ia-url { flex: 1; height: 22px; border-radius: 11px; background: #fff; color: #666; font-size: 9px; display: grid; place-items: center; }
.ia-dots { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: bold; font-size: 12px; letter-spacing: -1px; }
.ia-tbar i { width: 22px; height: 22px; display: grid; place-items: center; color: #0a84ff; font-style: normal; font-weight: bold; font-size: 12px; border-radius: 6px; }
.ia-tbar svg, .ia-row svg { width: 14px; height: 14px; display: block; }
.ia-sheet { position: absolute; left: 5px; right: 5px; bottom: 5px; background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 -4px 18px rgba(0, 0, 0, .25); transform: translateY(115%); transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.ia-sheet.up { transform: none; }
.ia-row { display: flex; align-items: center; gap: 6px; padding: 7px 6px; font-size: 11px; border-radius: 6px; }
.ia-row + .ia-row { border-top: 1px solid #e5e5ea; }
.ia-st { font-size: 9px; color: #888; text-align: center; padding: 2px 0 4px; }
.ia-tap { background: #e5e5ea !important; }
.ia-top { display: flex; justify-content: space-between; padding: 12px 10px 6px; font-size: 11px; }
.ia-top span { color: #0a84ff; }
.ia-top .ok { font-weight: bold; }
.ia-card { margin: 6px 10px; background: #fff; border-radius: 10px; padding: 8px; display: flex; gap: 8px; align-items: center; }
.ia-card img { width: 38px; height: 38px; border-radius: 9px; image-rendering: pixelated; }
.ia-home { background: linear-gradient(160deg, #3b2a7a, #c0577b 60%, #f2a65a); display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 4px; padding: 24px 8px; align-content: start; }
.ia-home.hidden { display: none; }
.ia-app { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font-size: 7px; }
.ia-app span { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .35); display: block; }
.ia-app img { width: 32px; height: 32px; border-radius: 8px; image-rendering: pixelated; }
.ia-app.new { animation: iaPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes iaPop { from { transform: scale(0); } to { transform: scale(1); } }
.ia-finger { position: absolute; width: 28px; height: 33px; z-index: 9; transition: left .6s ease, top .6s ease; pointer-events: none; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .35)); image-rendering: pixelated; }
.ia-finger.press { animation: iaPress .3s; }
@keyframes iaPress { 50% { transform: scale(.82); } }
.ia-ripple { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid var(--red); z-index: 8; animation: iaRip .5s ease-out forwards; pointer-events: none; }
@keyframes iaRip { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ia-cap { text-align: center; margin-top: 10px; min-height: 42px; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 14px; line-height: 1.5; }
.ia-cap b { color: var(--accent); }

/* 아이폰 설치 안내는 한 화면에 (2026-11-03): 스크롤하면 사파리 아래 막대가 줄어 ⋯가 숨어서 따라 하며 누를 수가 없었음 */
.gate-ios #v-login .hero { display: none; }
.gate-ios #v-login { padding-top: 8px; padding-bottom: 0; }
.gate-ios #f-login.card { padding: 10px; margin-top: 0; }
.gate-ios .gate { gap: 6px; }
.gate-ios .gate-title { font-size: 16px; line-height: 1.3; }
.gate-ios .gate-title br { display: none; }
.gate-ios .gate-sub { display: none; }
.gate-ios .ins-tabs button { padding: 6px; }
.gate-ios .ins-lay { margin-bottom: 6px; padding: 6px 8px; font-size: 11px; }
.gate-ios .ins-lay button { padding: 6px; font-size: 11px; }
/* 움짤(왼쪽) + 순서(오른쪽) 나란히, 순서는 글자만 */
.gate-ios .ios-row { display: flex; gap: 8px; align-items: flex-start; }
.gate-ios .ios-row .ia { flex: none; margin: 0; }
.gate-ios .ia-phone { width: 140px; height: 248px; border-radius: 22px; padding: 6px; }
.gate-ios .ia-scr { border-radius: 17px; }
.gate-ios .ia-cap { font-size: 12px; min-height: 36px; margin-top: 6px; }
.gate-ios .ios-row .ins-steps { flex: 1; margin: 0; gap: 6px; }
.gate-ios .ios-row .ins-steps li { padding: 7px 6px; gap: 6px; font-size: 12px; line-height: 1.45; }
.gate-ios .ios-row .ins-steps li > div:not(.im) { font-size: 12px; }
.gate-ios .ios-row .ins-steps .im { display: none; }
.gate-ios .ios-row + .hint { margin: 6px 0 0; font-size: 11px; }
.gate-ios .legal-links { margin-top: 4px; }