:root {
  --bg: #1b1528; --panel: #2a2140; --panel2: #3a2e58; --line: #0e0a16;
  --text: #f3eefe; --muted: #a99cc8; --accent: #ffcc4d;
  --red: #e8475f; --blue: #4d9bff; --green: #5fd068; --pink: #ff8fc7; --purple: #b48cff;
  --px: 3;                         /* 집 도트 배율 */
  --cpx: calc(var(--px) * .75);    /* 캐릭터·소품 도트 배율 */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font-family: 'Galmuri11', 'Galmuri9', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 13px; -webkit-font-smoothing: none; overflow: hidden; overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.grow { flex: 1; }
#app { height: 100%; height: 100dvh; }
.screen { height: 100%; display: flex; flex-direction: column; }

/* 공용 */
.box { background: var(--panel); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px var(--panel2); }
.btn {
  background: var(--panel2); border: 3px solid var(--line); padding: 7px 14px; cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .35), inset 3px 3px 0 rgba(255, 255, 255, .12);
  white-space: nowrap; user-select: none; touch-action: manipulation;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .35); transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; filter: none; }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn.big { padding: 11px 20px; font-size: 15px; }
.btn.primary { background: #c9862a; color: #1a1020; }
.btn.on { background: var(--green); color: #102010; }
.input { background: #150f22; border: 3px solid var(--line); padding: 7px 9px; outline: none; min-width: 0; }
.input:focus { border-color: var(--accent); }
.input:disabled { opacity: .5; }
.pill { background: #150f22; padding: 3px 9px; border: 2px solid var(--line); font-size: 12px; color: var(--muted); }
.logo { font-family: 'Galmuri14', 'Galmuri11', sans-serif; font-size: 44px; letter-spacing: 4px; color: var(--red); text-shadow: 4px 4px 0 var(--line); margin: 0; text-align: center; }
.logo small { display: block; font-size: 12px; letter-spacing: 0; color: var(--muted); text-shadow: none; margin-top: 8px; }
.logo.sm { font-size: 22px; letter-spacing: 2px; text-shadow: 2px 2px 0 var(--line); }
.bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 3px solid var(--line); flex-shrink: 0; }
.err { color: var(--red); min-height: 1em; margin: 0; }
img.pix { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.note { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* 로그인 */
#scr-login { align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #2d2350, #140e20); }
.login-box { width: min(420px, 92vw); padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.custom { display: flex; gap: 16px; align-items: center; }
.preview { width: 130px; height: 170px; cursor: pointer; flex-shrink: 0; display: grid; place-items: center; background: repeating-conic-gradient(#2f2548 0 25%, #362b52 0 50%) 0 0/24px 24px; border: 3px solid var(--line); }
.preview img { width: 90px; height: 145px; image-rendering: pixelated; }
.preview-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.opts { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.opt { display: flex; align-items: center; gap: 6px; }
.opt span { flex: 1; text-align: center; color: var(--muted); font-size: 11px; white-space: nowrap; }
.opt .btn { padding: 2px 8px; }

/* 대기실 */
.rooms { margin: 10px 12px 0; padding: 10px; flex-shrink: 0; }
.rooms-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: 32vh; overflow-y: auto; }
.room-card { background: #221a36; border: 3px solid var(--line); padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.room-card:hover { border-color: var(--accent); }
.room-card.playing { opacity: .6; cursor: default; }
.room-card .rt { display: flex; gap: 6px; align-items: center; }
.room-card .no { color: var(--accent); }
.room-card .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-card .meta { display: flex; gap: 6px; font-size: 11px; color: var(--muted); }
.tag { padding: 1px 6px; border: 2px solid var(--line); font-size: 11px; background: #150f22; }
.tag.wait { color: var(--green); }
.tag.play { color: var(--red); }
.empty { color: var(--muted); padding: 18px; text-align: center; grid-column: 1/-1; }
.floor {
  isolation: isolate; flex: 1; margin: 10px 12px 0; position: relative; overflow: hidden; border: 3px solid var(--line); cursor: pointer; min-height: 180px; touch-action: none;
  background:
    linear-gradient(#3d6b3a 0 22%, transparent 22%),
    repeating-conic-gradient(#8a6a4a 0 25%, #7d5f41 0 50%) 0 0/32px 32px;
}
.floor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22%; background: repeating-linear-gradient(90deg, #4b3a6b 0 60px, #43345f 60px 120px); border-bottom: 4px solid #2a2040; }
.floor-hint { position: absolute; right: 8px; top: 6px; font-size: 11px; color: #cfc3ee; opacity: .7; z-index: 1; }
.chatbar { display: flex; gap: 6px; padding: 8px 12px 10px; flex-shrink: 0; }
.chatbar .input { flex: 1; }

/* 엔티티(캐릭터/집/비석) */
.ent { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; transition: left var(--mv, .12s) linear, top var(--mv, .12s) linear, opacity .35s; pointer-events: auto; }
.ent .spr { position: relative; }
.ent .spr img { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.ent .spr img.f1, .ent .spr img.f2 { display: none; }
.ent.walking .spr img.f0 { visibility: hidden; }
.ent.walking .spr img.f1 { display: block; position: absolute; left: 0; top: 0; animation: fa .36s steps(1) infinite; }
.ent.walking .spr img.f2 { display: block; position: absolute; left: 0; top: 0; animation: fb .36s steps(1) infinite; }
@keyframes fa { 50% { opacity: 0; } }
@keyframes fb { 0% { opacity: 0; } 50% { opacity: 1; } }
.ent .name { margin-top: 2px; font-size: 11px; background: rgba(10, 6, 18, .72); padding: 1px 5px; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.ent .name:empty { display: none; }
.ent .name .seat { color: var(--accent); margin-right: 3px; }
.ent.me .name { color: var(--accent); }
.ent.me::before { content: '▼'; position: absolute; top: -14px; color: var(--accent); font-size: 11px; animation: bob 1s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.ent .tags { display: flex; gap: 2px; margin-bottom: 2px; }
.ent .rtag { font-size: 10px; padding: 0 4px; border: 2px solid var(--line); background: #150f22; white-space: nowrap; }
.rtag.mafia { background: var(--red); color: #fff; }
.rtag.citizen { background: var(--blue); color: #fff; }
.rtag.no { background: #555; }
.rtag.host { background: var(--accent); color: #221; }
.rtag.ready { background: var(--green); color: #102010; }
.rtag.off { background: #444; color: #bbb; }
.rtag.here { background: var(--accent); color: #221; }
.ent .badge { position: absolute; top: -6px; right: -12px; min-width: 22px; height: 22px; display: grid; place-items: center; background: var(--red); border: 2px solid var(--line); font-size: 12px; z-index: 3; }
.ent .bubble {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #fff; color: #1a1423; padding: 4px 7px;
  border: 2px solid var(--line); font-size: 12px; max-width: 170px; width: max-content; word-break: break-all; z-index: 5; animation: pop .15s steps(2);
}
.ent .bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--line); }
@keyframes pop { from { transform: translateX(-50%) scale(.6); } }
.ent.dim { opacity: .45; }
.ent.gone { opacity: 0; pointer-events: none; }
.ent.ghost { opacity: .5; }
.ent.ghost .spr { animation: float 1.6s steps(4) infinite; filter: grayscale(.6) brightness(1.3); }
@keyframes float { 50% { transform: translateY(-4px); } }
.ent.anon .name { color: var(--muted); }
.ent.can { cursor: pointer; }
.ent.can .spr { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.ent.near .spr { filter: drop-shadow(3px 0 0 var(--accent)) drop-shadow(-3px 0 0 var(--accent)) drop-shadow(0 3px 0 var(--accent)) drop-shadow(0 -3px 0 var(--accent)) !important; }
.ent.sel .spr { filter: drop-shadow(3px 0 0 var(--red)) drop-shadow(-3px 0 0 var(--red)) drop-shadow(0 3px 0 var(--red)) drop-shadow(0 -3px 0 var(--red)) !important; }
.ent.marked .spr::after { content: '🔪'; position: absolute; top: -4px; left: -12px; font-size: 16px; }
.ent.slot .spr { width: calc(18px * var(--cpx)); height: calc(29px * var(--cpx)); border: 3px dashed rgba(255, 255, 255, .35); display: grid; place-items: center; color: rgba(255, 255, 255, .5); font-size: 11px; }
.ent.house { cursor: pointer; }
.ent.house .name { max-width: 76px; order: -1; margin: 0 0 2px; } /* 이름표를 지붕 위로 → 문 앞은 비워둠 */
.ent.house.dead .spr { filter: grayscale(1) brightness(.6); }
.ent.tomb { pointer-events: none; }

/* 방/스테이지 */
.room-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-box { display: flex; align-items: center; gap: 8px; background: #150f22; border: 3px solid var(--line); padding: 4px 10px; }
.phase-box b { color: var(--accent); min-width: 28px; text-align: right; font-size: 16px; }
.phase-box.hurry b { color: var(--red); }
.time-btns { display: flex; gap: 4px; }
.room-main { flex: 1; display: flex; gap: 10px; padding: 10px 12px 0; min-height: 0; }
.stage-col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.stage { isolation: isolate; flex: 1; position: relative; overflow: hidden; border: 3px solid var(--line); min-height: 240px; transition: background .8s; touch-action: none; user-select: none; -webkit-user-select: none; }
.stage .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; transition: background .8s; }
.stage.day { background: linear-gradient(#7fcaf5, #c6ecff 26%); }
.stage.day .ground { background: repeating-conic-gradient(#78be5f 0 25%, #6db255 0 50%) 0 0/32px 32px; border-top: 4px solid #4d8a3d; }
.stage.vote { background: linear-gradient(#f59a6e, #ffd3a3 26%); }
.stage.vote .ground { background: repeating-conic-gradient(#b99060 0 25%, #ad8656 0 50%) 0 0/32px 32px; border-top: 4px solid #7d5c36; }
.stage.night { background: linear-gradient(#070a22, #1f2656 26%); }
.stage.night .ground { background: repeating-conic-gradient(#25402c 0 25%, #213a28 0 50%) 0 0/32px 32px; border-top: 4px solid #172a1c; }
.stage.room { background: linear-gradient(#5a4a86, #7b68b0 26%); }
.stage.room .ground { background: repeating-conic-gradient(#8a6a4a 0 25%, #7d5f41 0 50%) 0 0/32px 32px; border-top: 4px solid #4e3a26; }
.stage .stars { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; pointer-events: none;
  background-image: radial-gradient(#fff 1px, transparent 1.5px), radial-gradient(#fff 1px, transparent 1.5px);
  background-size: 90px 50px, 130px 60px; background-position: 10px 5px, 50px 20px; }
.stage .stars::after { content: ''; position: absolute; right: 6%; top: 4%; width: 30px; height: 30px; background: #fff3c4; box-shadow: -7px 0 0 0 #070a22 inset; border-radius: 50%; }
.stage.night .stars { opacity: .9; }
.stage .half { display: none; position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; flex-direction: column; align-items: center; justify-content: center; padding-top: 6px; font-size: 13px; z-index: 0; }
.stage .half b { font-size: 16px; text-shadow: 2px 2px 0 var(--line); }
.stage .half span { font-size: 22px; text-shadow: 2px 2px 0 var(--line); }
.stage.court .half { display: flex; }
.half-yes { left: 0; background: rgba(95, 208, 104, .28); border-right: 3px dashed rgba(255, 255, 255, .7); }
.half-no { right: 0; background: rgba(232, 71, 95, .28); }
/* 마을: 광장 + 길 + 단상 */
#map { position: absolute; inset: 0; pointer-events: none; transition: filter .8s; }
#map .plaza { position: absolute; border: 3px solid #5f584b; background: repeating-conic-gradient(#c2baa8 0 25%, #b3ab99 0 50%) 0 0/24px 24px; box-shadow: inset 0 0 0 3px #d6cfbe; }
#map .path { position: absolute; background: repeating-conic-gradient(#b08a5a 0 25%, #a47f51 0 50%) 0 0/16px 16px; border: 2px solid #7d5c36; }
.stage.night #map { filter: brightness(.5) saturate(.8); }
.stage.vote #map { filter: sepia(.35); }
.stage .podium { display: none; position: absolute; left: 50%; top: 72%; width: 86px; height: 20px; transform: translate(-50%, -25%); background: #7d5c36; border: 3px solid var(--line); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .3), 0 4px 0 #4e3a26; pointer-events: none; z-index: 0; }
.stage.town .podium { display: block; }
.stage.town.night .podium { filter: brightness(.5); }
.stage.podium-on .podium { background: #a8323f; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .3), 0 4px 0 #6b1f28; }
.ent.deco { pointer-events: none; }
.ent.lamp.lit::after { content: ''; position: absolute; left: 50%; top: 0; width: 90px; height: 90px; transform: translate(-50%, -30%); background: radial-gradient(circle, rgba(255, 224, 102, .35), transparent 65%); pointer-events: none; }
#ents { position: absolute; inset: 0; z-index: 1; }
.banner { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); background: rgba(10, 6, 18, .85); border: 3px solid var(--line); padding: 5px 12px; z-index: 5000; max-width: 94%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.stage.court .banner { top: auto; bottom: 6px; }
.banner.act { color: var(--accent); }

/* 조작부 */
.controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.joy { display: none; width: 104px; height: 104px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 3px solid var(--line); position: relative; touch-action: none; flex-shrink: 0;
  background-image: linear-gradient(transparent 46%, rgba(255, 255, 255, .12) 46% 54%, transparent 54%), linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .12) 46% 54%, transparent 54%); }
.knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--panel2); border: 3px solid var(--line); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .35), inset 3px 3px 0 rgba(255, 255, 255, .15); pointer-events: none; }
.ctl-mid { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ctl-mid .hint { color: var(--muted); font-size: 11px; }
#btnSide { display: none; }
.act-btn { min-width: 150px; padding: 10px 16px; font-size: 14px; background: #c9862a; color: #1a1020; }
.act-btn:disabled { background: var(--panel2); color: var(--muted); }

/* 사이드 */
.side { width: 270px; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.side h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: normal; }
.info-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 2px solid #231b37; }
.info-row span { color: var(--muted); }
.side .btns { display: flex; flex-direction: column; gap: 6px; }
.role-card { border: 3px solid var(--line); padding: 10px; background: #1d2d52; }
.role-card.mafia { background: #4d1a28; }
.role-card .rn { font-size: 20px; }
.role-card .rt { font-size: 11px; color: var(--muted); }
.role-card p { margin: 8px 0 0; font-size: 12px; line-height: 1.55; }
.known-list { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.known-list li { padding: 3px 0; border-bottom: 2px solid #231b37; display: flex; justify-content: space-between; }
.will-row { display: flex; gap: 4px; }
.will-row .input { flex: 1; padding: 5px 7px; font-size: 12px; }
.composition { display: flex; flex-wrap: wrap; gap: 4px; }
.side-close { display: none; }

/* 채팅 */
.chat { margin: 10px 12px 12px; height: 180px; display: flex; flex-direction: column; flex-shrink: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: 12px; line-height: 1.6; }
.chat-log .m { word-break: break-all; }
.chat-log .m b { margin-right: 4px; }
.chat-log .sys { color: var(--accent); }
.chat-log .ch-mafia { color: #ff8f9f; }
.chat-log .ch-couple { color: var(--pink); }
.chat-log .ch-dead { color: var(--purple); }
.chat-log .ch-mafia.sys, .chat-log .ch-couple.sys, .chat-log .ch-dead.sys { font-style: italic; }
.chat-form { display: flex; gap: 6px; padding: 6px; border-top: 3px solid var(--line); }
.chat-form .input { flex: 1; }
.ch { padding: 6px 8px; background: #150f22; border: 3px solid var(--line); font-size: 12px; white-space: nowrap; }
.ch.mafia { color: var(--red); }
.ch.couple { color: var(--pink); }
.ch.dead { color: var(--purple); }
.ch.off { color: #777; }

/* 오버레이/모달/토스트 */
.overlay, .modal { position: fixed; inset: 0; background: rgba(8, 5, 14, .72); display: grid; place-items: center; z-index: 10000; padding: 16px; }
.card { width: min(440px, 94vw); padding: 18px; display: flex; flex-direction: column; gap: 10px; max-height: 90vh; overflow-y: auto; }
.card h2 { margin: 0; text-align: center; font-size: 22px; }
.card label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.card .row { display: flex; gap: 8px; justify-content: flex-end; }
.pick-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg { display: flex; gap: 4px; }
.seg .btn { flex: 1; }
.intro-card { align-items: center; text-align: center; animation: pop2 .3s steps(3); }
@keyframes pop2 { from { transform: scale(.5); } }
.intro-card .rn { font-size: 34px; margin: 4px 0; }
.intro-card.mafia .rn { color: var(--red); }
.intro-card.citizen .rn { color: var(--blue); }
.result-list { display: flex; flex-direction: column; gap: 4px; }
.result-list .r { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: #221a36; border: 2px solid var(--line); }
.result-list .r.win { background: #2f3f22; }
.result-list img { width: 27px; height: 44px; image-rendering: pixelated; }
.result-list .nm { flex: 1; }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: #150f22; border: 3px solid var(--accent); padding: 8px 14px; z-index: 20000; max-width: 90vw; }
#rotate { display: none; position: fixed; inset: 0; z-index: 30000; background: #140e20; color: var(--text); flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
#rotate .rot-ico { font-size: 56px; animation: rot 1.6s steps(4) infinite; }
@keyframes rot { 50% { transform: rotate(-90deg); } }

/* 터치 기기: 조이스틱, 가로모드 차단 */
@media (pointer: coarse) {
  .joy { display: block; }
  .ctl-mid .hint { display: none; }
}
@media (pointer: coarse) and (orientation: landscape) {
  #rotate { display: flex; }
}

/* 모바일 세로 */
@media (max-width: 820px), (pointer: coarse) and (orientation: portrait) {
  :root { --px: 2; }
  .room-main { flex-direction: column; padding: 6px 6px 0; gap: 6px; }
  .stage { flex: 1 1 auto; min-height: 0; }
  .controls { gap: 8px; }
  .act-btn { min-width: 118px; padding: 14px 10px; font-size: 13px; }
  #btnSide { display: inline-block; }
  .chat { height: 22vh; min-height: 110px; margin: 6px; }
  .bar { padding: 6px 8px; }
  .rooms, .floor { margin: 6px 6px 0; }
  .logo { font-size: 34px; }
  #scr-room.in-game .side { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 70vh; z-index: 9000; transform: translateY(105%); transition: transform .2s steps(4); }
  #scr-room.in-game.side-open .side { transform: none; }
  #scr-room.in-game .side-close { display: block; }
  #scr-room.waiting .side { width: auto; max-height: 34vh; }
  #scr-room.waiting .stage { min-height: 200px; }
}
@media (max-width: 480px) {
  :root { --px: 1.5; }
  .ent .name { font-size: 10px; max-width: 70px; }
  .ent.house .name { max-width: 46px; padding: 1px 3px; }
  .time-btns .btn { padding: 3px 5px; }
  .room-title { display: none; }
  .banner { font-size: 11px; }
}

/* 패드 세로: 모바일 배치 그대로, 도트만 크게 */
@media (pointer: coarse) and (orientation: portrait) and (min-width: 600px) {
  :root { --px: 3; }
  .ent .name { font-size: 13px; max-width: 150px; }
  .ent.house .name { max-width: 110px; }
  .joy { width: 132px; height: 132px; }
  .act-btn, .page-move .act-btn { font-size: 16px; padding: 18px 12px; max-width: 46%; }
  #btnSide { font-size: 14px; padding: 9px 16px; }
  .plist { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .banner { font-size: 15px; }
  .chat { height: 20vh; }
}
@media (pointer: coarse) and (orientation: portrait) and (min-width: 960px) {
  :root { --px: 3.6; }
}

/* 대기 중 숨쉬기 (걷거나 유령일 땐 안 함) */
.ent[data-kind="avatar"]:not(.walking):not(.ghost) .spr { animation: idle 1.6s steps(1) infinite; animation-delay: var(--idle, 0s); }
@keyframes idle { 50% { transform: translateY(calc(-1px * var(--cpx))); } }

/* ───────── 집 내부 ───────── */
.interior { position: absolute; inset: 0; z-index: 4000; overflow: hidden; --ipx: calc(var(--px) * 1.5); }
.int-wall { position: absolute; left: 0; right: 0; top: 0; height: 42%; background: repeating-linear-gradient(90deg, #d9c49a 0 18px, #cfb98d 18px 36px); border-bottom: 10px solid #7a4a2e; box-shadow: inset 0 -14px 0 #a8845a; }
.int-window { position: absolute; left: 14%; top: 18%; width: 64px; height: 56px; background: radial-gradient(circle at 70% 30%, #fff3c4 0 9px, transparent 10px), linear-gradient(#0b1030, #25306a); border: 5px solid #6b4226; box-shadow: inset 0 0 0 2px #3d2616; }
.int-window::before, .int-window::after { content: ''; position: absolute; background: #6b4226; }
.int-window::before { left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; }
.int-window::after { top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px; }
.int-frame { position: absolute; right: 16%; top: 22%; width: 40px; height: 30px; background: linear-gradient(#8fd3ff, #78be5f); border: 4px solid #b08a5a; }
.int-floor { position: absolute; left: 0; right: 0; bottom: 0; top: 42%; background: repeating-linear-gradient(0deg, #9a6b43 0 22px, #8a5e39 22px 24px), #9a6b43; }
.int-rug { position: absolute; left: 50%; top: 42%; width: 46%; height: 44%; transform: translateX(-50%); background: repeating-linear-gradient(90deg, #a8323f 0 10px, #b8434f 10px 20px); border: 4px solid #e0b050; }
.int-bedwrap { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); }
.int-bedwrap img { display: block; image-rendering: pixelated; }
.int-me { position: absolute; left: calc(50% + 70px); top: 48%; image-rendering: pixelated; }
.zzz { position: absolute; right: -18px; top: 10%; color: #fff; font-size: 14px; text-shadow: 2px 2px 0 #1a1024; animation: zz 1.8s steps(3) infinite; }
.zzz i { font-style: normal; font-size: 11px; } .zzz b { font-size: 9px; font-weight: normal; }
@keyframes zz { 0% { transform: translateY(4px); opacity: .5; } 100% { transform: translateY(-8px); opacity: 1; } }
.int-title { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: rgba(10, 6, 18, .85); border: 3px solid var(--line); padding: 5px 12px; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; color: var(--accent); }
.stage.night .interior .int-wall { filter: brightness(.75); }
.stage.night .interior .int-floor { filter: brightness(.7); }

/* ───────── 조작부 페이저 + 플레이어 목록 ───────── */
.controls { flex-direction: column; align-items: stretch; gap: 4px; }
.pager { display: flex; gap: 10px; align-items: center; }
.page { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-move { flex: 0 0 auto; order: 2; }
.page-list { flex: 1; order: 1; min-width: 0; }
.dots, .swipe-hint { display: none; }
.plist { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.pcard { position: relative; flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 3px; background: var(--panel); border: 3px solid var(--line); cursor: default; }
.pcard.can { cursor: pointer; border-color: #8a7ab8; }
.pcard.can:hover { border-color: var(--accent); }
.pcard.sel { border-color: var(--red); background: #3a1a28; }
.pcard.mine { box-shadow: inset 0 0 0 2px var(--accent); }
.pcard.dead { opacity: .45; filter: grayscale(1); }
.pface { width: 36px; height: 30px; overflow: hidden; display: block; background: #1a1424; border: 2px solid var(--line); }
.pface img { display: block; image-rendering: pixelated; margin-top: -2px; }
.pname { font-size: 10px; max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname i { font-style: normal; color: var(--accent); margin-right: 2px; }
.prole .rtag { font-size: 9px; padding: 0 3px; border-width: 1px; }
.pvotes { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; display: grid; place-items: center; background: var(--red); border: 2px solid var(--line); font-size: 11px; }
.pdead { position: absolute; top: 2px; left: 4px; font-size: 11px; color: #bbb; }

@media (max-width: 820px), (pointer: coarse) and (orientation: portrait) {
  .pager { overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pager::-webkit-scrollbar { display: none; }
  .page { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; order: 0; }
  .page-move { justify-content: space-between; }
  .page-list { order: 1; }
  .plist { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; width: 100%; }
  .pcard { width: auto; }
  .dots { display: flex; justify-content: center; gap: 6px; }
  .dots i { width: 7px; height: 7px; background: #4a3f66; cursor: pointer; }
  .dots i.on { background: var(--accent); }
  .swipe-hint { display: inline-block; color: var(--muted); font-size: 11px; cursor: pointer; }
  .int-me { left: calc(50% + 46px); }
}

.stage.inside #banner { display: none; } /* 집 안에선 방 캡션만 */
@media (max-width: 820px), (pointer: coarse) and (orientation: portrait) {
  .swipe-hint { white-space: nowrap; }
  .page-move .ctl-mid { flex: 0 0 auto; }
  .page-move .act-btn { min-width: 0; flex: 1 1 auto; max-width: 52%; overflow: hidden; text-overflow: ellipsis; }
}

/* ───────── 레벨 태그 ───────── */
.lv { display: inline-block; font-size: 9px; padding: 0 3px; margin-right: 3px; background: #6a4fc9; color: #fff; border: 1px solid var(--line); vertical-align: 1px; }
.lv.bot { background: #555; }

/* ───────── 내 정보 ───────── */
.profile { position: fixed; inset: 0; z-index: 9500; background: rgba(8, 5, 14, .75); display: grid; place-items: center; padding: 12px; }
.pf-box { width: min(620px, 100%); max-height: 92vh; display: flex; flex-direction: column; }
.pf-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 3px solid var(--line); }
.pf-head > b { font-size: 15px; }
.pf-tabs { flex: 1; display: flex; gap: 4px; justify-content: center; }
.pf-tabs .btn.on { background: var(--accent); color: #221; }
.pf-body { overflow-y: auto; padding: 12px 14px 16px; }
.pf-body h4 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); font-weight: normal; }
.pf-top { display: flex; gap: 14px; align-items: center; }
.pf-av { background: repeating-conic-gradient(#2f2548 0 25%, #362b52 0 50%) 0 0/16px 16px; border: 3px solid var(--line); padding: 6px 10px; display: grid; place-items: center; flex-shrink: 0; }
.pf-av img, .pf-prev img, .face img { image-rendering: pixelated; display: block; }
.pf-id { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pf-nick { font-size: 18px; }
.pf-nick .lv { font-size: 12px; padding: 1px 5px; }
.expbar { height: 10px; background: #150f22; border: 2px solid var(--line); }
.expbar i { display: block; height: 100%; background: linear-gradient(90deg, #6a4fc9, #b48cff); }
.pf-id small { color: var(--muted); font-size: 11px; }
.pf-rank { color: var(--accent); }
.pf-id .btn { align-self: flex-start; }
.pf-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.pf-cards.sm { grid-template-columns: repeat(3, 1fr); margin: 0; }
.pf-cards div { background: #221a36; border: 2px solid var(--line); padding: 6px 4px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.pf-cards small { color: var(--muted); font-size: 10px; }
.pf-cards b { font-size: 16px; }
.pf-cards b.w { color: var(--green); } .pf-cards b.l { color: var(--red); }
.pf-bar { display: grid; grid-template-columns: 92px 1fr 52px 70px; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
.pf-bar .pf-track { height: 12px; background: #150f22; border: 2px solid var(--line); }
.pf-bar .pf-track i { display: block; height: 100%; }
.pf-bar i.maf { background: var(--red); } .pf-bar i.cit { background: var(--blue); }
.pf-bar small { color: var(--muted); }
.pf-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
.pf-role { display: flex; align-items: center; gap: 6px; background: #221a36; border: 2px solid var(--line); padding: 4px 6px; font-size: 11px; }
.pf-role span { flex: 1; color: var(--muted); }
.pf-recent { display: flex; flex-direction: column; gap: 3px; }
.pf-game { display: flex; align-items: center; gap: 7px; background: #221a36; border: 2px solid var(--line); padding: 4px 7px; font-size: 11px; }
.pf-game > b { width: 30px; text-align: center; padding: 1px 0; border: 2px solid var(--line); }
.pf-game.win > b { background: #3d8b4a; } .pf-game.lose > b { background: #7a2e3a; }
.pf-game span { color: var(--muted); }
.pf-game small { margin-left: auto; color: var(--muted); }
.pf-ranklist { display: flex; flex-direction: column; gap: 4px; }
.pf-rk { display: flex; align-items: center; gap: 8px; background: #221a36; border: 2px solid var(--line); padding: 4px 8px; font-size: 12px; }
.pf-rk.me { border-color: var(--accent); }
.pf-rk .no { width: 26px; text-align: center; font-size: 14px; }
.pf-rk .face { width: 27px; height: 24px; overflow: hidden; background: #150f22; border: 2px solid var(--line); }
.pf-rk .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-rk > span:not(.face):not(.nm) { color: var(--muted); }
.pf-char { display: flex; gap: 16px; align-items: center; }
.pf-prev { background: repeating-conic-gradient(#2f2548 0 25%, #362b52 0 50%) 0 0/24px 24px; border: 3px solid var(--line); padding: 10px 16px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.pf-dirs { display: flex; gap: 6px; }
.pf-opts { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pf-nickrow { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.pf-body .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.uc { align-items: center; text-align: center; }
.uc h2 { font-size: 18px; }
.uc-row { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12px; }
.uc-row span { color: var(--muted); }
.uc-dots { display: flex; gap: 3px; align-items: center; font-size: 11px; color: var(--muted); }
.uc-dots i { width: 10px; height: 10px; border: 1px solid var(--line); }
.uc-dots i.w { background: var(--green); } .uc-dots i.l { background: var(--red); }
#floorEnts .ent { cursor: pointer; }
@media (max-width: 560px) {
  .pf-box { max-height: 96vh; }
  .pf-head > b { display: none; }
  .pf-cards { grid-template-columns: repeat(3, 1fr); }
  .pf-bar { grid-template-columns: 80px 1fr 46px; }
  .pf-bar small { display: none; }
  .pf-char { flex-direction: column; }
  .pf-opts { width: 100%; }
  .pf-game span:last-of-type { display: none; }
}

/* ───────── 꾸미기: 이름 색 / 이름표 / 칭호 ───────── */
.np { display: inline-block; font-size: 11px; background: rgba(10, 6, 18, .72); padding: 1px 5px; white-space: nowrap; line-height: 1.35; }
.nk { color: inherit; }
/* 이름 색 */
.c-sky { color: #8fd3ff; } .c-mint { color: #7ef0c2; } .c-lemon { color: #fff27a; }
.c-peach { color: #ffb38a; } .c-lilac { color: #c9a8ff; } .c-pink { color: #ffb3d1; }
.c-crimson { color: #ff4d5e; } .c-emerald { color: #2ee68a; } .c-sapphire { color: #5f95ff; }
.c-gold { color: #ffcc33; text-shadow: 1px 1px 0 #7a4b00; }
.c-neonpink { color: #ff5fd2; text-shadow: 0 0 4px #ff2fbf, 0 0 8px #ff2fbf; }
.c-neoncyan { color: #5ff6ff; text-shadow: 0 0 4px #1fd8ff, 0 0 8px #1fd8ff; }
.c-flame, .c-aurora, .c-rainbow, .c-shine { -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.c-flame { background-image: linear-gradient(180deg, #ffe066, #ff8a1f 55%, #ff3b3b); }
.c-aurora { background-image: linear-gradient(90deg, #6fffd2, #6fb6ff, #c78cff); }
.c-rainbow { background-image: linear-gradient(90deg, #ff5f6d, #ffc24d, #7dff6a, #4dd8ff, #9a6bff, #ff5f6d); background-size: 200% 100%; animation: rainbow 2.4s linear infinite; }
.c-shine { background-image: linear-gradient(100deg, #c98a00 0 35%, #fff6c4 45%, #ffd23f 55%, #c98a00 65% 100%); background-size: 250% 100%; animation: rainbow 2.2s linear infinite; }
.c-blood { color: #ff2a3d; animation: blood 1.6s ease-in-out infinite; }
@keyframes rainbow { to { background-position: -200% 0; } }
@keyframes blood { 50% { text-shadow: 0 0 6px #ff0022, 0 0 10px #a00018; color: #ff6070; } }

/* 이름표 (.ent .name 과 .np 둘 다) */
.name.p-wood, .np.p-wood { background: #8a5a34; border: 2px solid #4a2c16; box-shadow: inset 0 1px 0 #b07a4a; }
.name.p-stone, .np.p-stone { background: #6b6878; border: 2px solid #34323f; box-shadow: inset 0 1px 0 #9491a3; }
.name.p-navy, .np.p-navy { background: #243a78; border: 2px solid #0f1a3d; border-left: 4px solid #5f7fe0; border-right: 4px solid #5f7fe0; }
.name.p-wine, .np.p-wine { background: #6d1f3a; border: 2px solid #33091a; border-left: 4px solid #c5476f; border-right: 4px solid #c5476f; }
.name.p-sakura, .np.p-sakura { background: #7a3558; border: 2px solid #ffb3d1; }
.name.p-sakura::before, .np.p-sakura::before { content: '🌸'; margin-right: 2px; font-size: .9em; }
.name.p-sprout, .np.p-sprout { background: #2e5a2a; border: 2px solid #7ed36a; }
.name.p-sprout::before, .np.p-sprout::before { content: '🌱'; margin-right: 2px; font-size: .9em; }
.name.p-starry, .np.p-starry { background: #141a3f radial-gradient(#fff 1px, transparent 1.4px) 0 0/9px 7px; border: 2px solid #6a7cff; }
.name.p-heart, .np.p-heart { background: #d9477f; border: 2px solid #ffd1e3; box-shadow: 0 0 0 2px #7a1a42; }
.name.p-heart::before, .name.p-heart::after, .np.p-heart::before, .np.p-heart::after { content: '♥'; color: #ffe0ec; margin: 0 2px; }
.name.p-crown, .np.p-crown { background: #3a2a10; border: 2px solid #ffcc33; }
.name.p-crown::before, .np.p-crown::before { content: '👑'; margin-right: 2px; font-size: .9em; }
.name.p-skull, .np.p-skull { background: #111; border: 2px solid #d8d8d8; }
.name.p-skull::before, .name.p-skull::after, .np.p-skull::before, .np.p-skull::after { content: '💀'; font-size: .85em; margin: 0 2px; }
.name.p-neon, .np.p-neon { background: #0b0418; border: 2px solid #ff4fd8; animation: neon 1.8s ease-in-out infinite; }
@keyframes neon { 0%, 100% { box-shadow: 0 0 4px #ff4fd8, 0 0 8px #ff4fd8; border-color: #ff4fd8; } 50% { box-shadow: 0 0 4px #4ff3ff, 0 0 9px #4ff3ff; border-color: #4ff3ff; } }
.name.p-goldplate, .np.p-goldplate { position: relative; background: linear-gradient(180deg, #4a3000, #221400); border: 2px solid #ffd23f; box-shadow: 0 0 0 1px #3d2600, inset 0 0 0 1px #8a5a00, 0 0 7px rgba(255, 210, 63, .65); overflow: hidden; }
.name.p-goldplate::after, .np.p-goldplate::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 240, 180, .45), transparent); animation: sweep 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { 60%, 100% { left: 120%; } }
.name.p-boss, .np.p-boss { background: #0d0d0d; border: 2px solid #e8475f; box-shadow: 0 0 0 1px #000, 0 0 6px rgba(232, 71, 95, .7); }
.name.p-boss::before, .np.p-boss::before { content: '🎩'; margin-right: 2px; font-size: .9em; }
.name.p-boss::after, .np.p-boss::after { content: '🔪'; margin-left: 2px; font-size: .85em; }
.ent .name[class*=" p-"] { max-width: 150px; }

/* 칭호 · 등급 색 */
.r-common { --rc: #b8b0c8; } .r-rare { --rc: #4da3ff; } .r-epic { --rc: #b86bff; } .r-legend { --rc: #ffb020; } .r-none { --rc: #5c5075; }
.ttl { display: inline-block; font-size: 10px; padding: 0 4px; color: var(--rc); background: rgba(10, 6, 18, .78); border: 1px solid var(--rc); white-space: nowrap; }
.ttl::before { content: '「'; } .ttl::after { content: '」'; }
.ttl.r-legend { color: #ffd66b; box-shadow: 0 0 5px rgba(255, 176, 32, .6); }
.odds span { color: var(--rc); }

/* 대기실 골드 */
.pill.gold { color: var(--accent); }
.pill.gold b { color: #fff; }
.gold-txt { color: var(--accent); }
.pf-btns { display: flex; gap: 5px; flex-wrap: wrap; }

/* ───────── 상점 ───────── */
.shop-top { display: flex; align-items: center; gap: 14px; background: #221a36; border: 2px solid var(--line); padding: 10px 12px; }
.gold-big { font-size: 20px; color: var(--accent); white-space: nowrap; }
.gold-big b { color: #fff; }
.pity { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pity small { color: var(--muted); } .pity b { color: #ffd66b; }
.expbar.leg i { background: linear-gradient(90deg, #ff8a1f, #ffd66b); }
.sboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 6px; }
.sbox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 3px solid var(--line); background: #221a36; text-align: center; }
.sbox-normal { box-shadow: inset 0 0 0 2px #5b4a33; }
.sbox-premium { background: #2b1d4a; box-shadow: inset 0 0 0 2px #8a62e0, 0 0 12px rgba(180, 140, 255, .25); }
.sbox .chest { image-rendering: pixelated; animation: float 2s ease-in-out infinite; }
.sbox .chest.shake { animation: shake .12s linear infinite; }
@keyframes shake { 25% { transform: translateX(-3px) rotate(-4deg); } 75% { transform: translateX(3px) rotate(4deg); } }
.sname { font-size: 15px; }
.sbox-premium .sname { color: #d9c2ff; }
.odds { display: flex; flex-wrap: wrap; gap: 3px 8px; justify-content: center; font-size: 10px; }
.sbtns { display: flex; gap: 6px; width: 100%; }
.sbtns .btn { flex: 1; padding: 6px 4px; font-size: 12px; white-space: nowrap; }
.gold-how { display: flex; flex-wrap: wrap; gap: 5px; }
.gold-how span { background: #221a36; border: 2px solid var(--line); padding: 4px 8px; font-size: 11px; color: var(--muted); }
.gold-how b { color: var(--accent); }

/* 뽑기 결과 */
.gacha { width: min(620px, 100%); }
.gcard .np, .gcard .ttl { font-size: 13px; }
.gacha.best-legend { background: radial-gradient(circle at 50% 30%, #5a3d10, var(--panel) 70%); box-shadow: inset 0 0 0 2px #ffb020, 0 0 30px rgba(255, 176, 32, .5); }
.gacha.best-legend h2 { color: #ffd66b; animation: pop2 .5s; }
.gacha.best-epic h2 { color: #d9a8ff; }
.gcards { display: grid; gap: 8px; }
.gcards.one { grid-template-columns: minmax(0, 200px); justify-content: center; }
.gcards.multi { grid-template-columns: repeat(5, 1fr); }
.gcard { perspective: 600px; min-height: 118px; }
.gin { position: relative; width: 100%; height: 100%; min-height: 118px; transform-style: preserve-3d; animation: flip .45s var(--d) both; }
.gcards.one .gin { min-height: 150px; }
@keyframes flip { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }
.gback, .gfront { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 3px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; text-align: center; }
.gback { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #3a2e58 0 6px, #2a2140 6px 12px); font-size: 26px; color: var(--muted); }
.gfront { background: #1c1530; box-shadow: inset 0 0 0 2px var(--rc); }
.gcard.r-epic .gfront { background: radial-gradient(circle at 50% 40%, #3a2360, #1c1530 75%); }
.gcard.r-legend .gfront { background: radial-gradient(circle at 50% 40%, #5a3d10, #1c1530 75%); box-shadow: inset 0 0 0 2px var(--rc), 0 0 14px rgba(255, 176, 32, .6); }
.gcard.r-legend .gin { animation: flip .45s var(--d) both, glow 1.4s calc(var(--d) + .45s) ease-in-out infinite; }
@keyframes glow { 50% { filter: brightness(1.25); } }
.gr { font-size: 9px; color: var(--rc); }
.gn { font-size: 11px; }
.gprev { min-height: 22px; display: grid; place-items: center; max-width: 100%; overflow: hidden; }
.gnew { color: var(--green); font-size: 10px; }
.gdup { color: var(--muted); font-size: 10px; }

/* ───────── 꾸미기 ───────── */
.dc-stage { display: flex; align-items: center; gap: 16px; background: repeating-conic-gradient(#2f2548 0 25%, #362b52 0 50%) 0 0/24px 24px; border: 3px solid var(--line); padding: 12px 16px; }
.dc-ent { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 110px; }
.dc-ent img { image-rendering: pixelated; }
.dc-ent .np { font-size: 13px; }
.dc-stage .note { background: rgba(10, 6, 18, .6); padding: 6px 8px; margin: 0; }
.dc-stage .note a { color: var(--accent); }
.pf-body h4 small { color: var(--text); margin-left: 4px; }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.dc-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 5px; background: #221a36; border: 2px solid var(--line); box-shadow: inset 0 0 0 2px var(--rc); cursor: pointer; min-width: 0; }
.dc-item small { font-size: 10px; color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dc-item.r-none small { color: var(--muted); }
.dc-item:hover { filter: brightness(1.15); }
.dc-item.on { background: #3d3060; outline: 3px solid var(--accent); outline-offset: -1px; }
.dc-item.on::after { content: '장착중'; font-size: 9px; color: #221; background: var(--accent); padding: 0 4px; }
.dc-item.locked { cursor: default; opacity: .45; box-shadow: inset 0 0 0 2px #3a3050; }
.dc-item.locked .gprev { font-size: 16px; color: var(--muted); }
.dc-item.locked small { color: var(--muted); }
.uc .ttl { align-self: center; }

@media (max-width: 560px) {
  .pf-tabs { gap: 2px; }
  .pf-tabs .btn { padding: 4px 6px; font-size: 11px; }
  .shop-top { flex-direction: column; align-items: stretch; gap: 6px; }
  .gold-big { text-align: center; }
  .sboxes { gap: 6px; }
  .sbtns { flex-direction: column; }
  .gcards.multi { grid-template-columns: repeat(3, 1fr); }
  .gcard, .gin { min-height: 104px; }
  .dc-stage { flex-direction: column; gap: 8px; }
  .dc-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .dc-item { padding: 6px 2px 4px; }
  .dc-item.locked { padding: 3px 2px; }
}

/* ───────── 설정 ───────── */
:root { --cut: 4; }
.btn-set { padding: 4px 8px; }
.set-box .set-vol { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; color: var(--text); font-size: 13px; }
.set-box .set-vol input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.set-box .set-vol b { color: var(--accent); font-weight: normal; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.btn.tgl { min-width: 64px; background: #4a3f66; }
.btn.tgl.on { background: var(--green); color: #102; }
.warn-note { background: #3a2a14; border: 2px solid #8a6a2a; color: #ffd98a; padding: 6px 8px; font-size: 11px; margin: 0; line-height: 1.5; }

/* ───────── 감정표현 ───────── */
.btn-emo { padding: 4px 7px; font-size: 15px; line-height: 1; flex-shrink: 0; }
.emo-pick { position: fixed; z-index: 12000; display: grid; grid-template-columns: repeat(6, 40px); gap: 4px; padding: 6px; background: var(--panel); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px var(--panel2), 0 6px 16px rgba(0, 0, 0, .5); }
.emo-pick button { width: 40px; height: 40px; font-size: 22px; background: #221a36; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.emo-pick button:hover, .emo-pick button:active { background: #3d3060; transform: scale(1.08); }
.emo { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); z-index: 3; font-size: calc(9px * var(--cpx) + 8px); line-height: 1; padding: 4px 6px 5px; background: #fff; border: 3px solid var(--line); animation: emoIn .25s steps(3), emoOut .3s 2.3s steps(3) forwards; pointer-events: none; }
.emo::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--line); }
@keyframes emoIn { from { transform: translateX(-50%) scale(.3) translateY(10px); } }
@keyframes emoOut { to { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
.ent.anon .emo { background: #d8d8e0; }

/* ───────── 공지 / 점검 ───────── */
.sysbar { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 9800; display: flex; flex-direction: column; gap: 4px; width: min(640px, calc(100vw - 16px)); pointer-events: none; }
.sys-notice, .sys-maint { pointer-events: auto; border: 3px solid var(--line); padding: 7px 10px; font-size: 12px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.sys-notice { background: #2c4a8a; color: #fff; animation: pop2 .3s steps(3); }
.sys-notice span { flex: 1; line-height: 1.4; word-break: keep-all; }
.sys-notice .x { background: none; border: 0; color: #cfe0ff; cursor: pointer; font-size: 14px; padding: 0 2px; }
.sys-maint { background: #7a2e3a; color: #fff; justify-content: center; text-align: center; animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { background: #5e2330; } }

/* ───────── 연출 (컷신) ───────── */
.fx { position: absolute; inset: 0; z-index: 5000; pointer-events: none; overflow: hidden; container-type: size; }
.fx:empty { display: none; }
.cut { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 16px; animation: cutIn .35s steps(4), cutOut .3s calc(var(--ms) - 300ms) steps(3) forwards; }
@keyframes cutIn { from { opacity: 0; } }
@keyframes cutOut { to { opacity: 0; } }
.cut-title { font-size: 26px; color: #fff; text-shadow: 3px 3px 0 var(--line); line-height: 1.3; word-break: keep-all; }
.cut-sub { font-size: 13px; color: #e6dcff; text-shadow: 2px 2px 0 var(--line); }
.cut-art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 12px; min-height: calc(29px * var(--cut) + 10px); }
.cut-av { image-rendering: pixelated; display: block; }
.cut-ico { position: absolute; font-size: 34px; right: -26px; top: -8px; }
.cut-tally { font-size: 15px; background: rgba(10, 6, 18, .7); padding: 4px 12px; border: 2px solid var(--line); animation: late .01s 1.2s both; }
.cut-tally .y { color: #7ff09a; } .cut-tally .n { color: #ff8a9a; }
.late { animation: late .3s 1.2s both steps(3); }
@keyframes late { from { opacity: 0; transform: translateY(6px); } }
/* 밤 / 아침 / 재판 카드 */
.cut-night { background: linear-gradient(#050818ee, #120c28ee); animation: curtain .5s steps(5), cutOut .3s calc(var(--ms) - 300ms) steps(3) forwards; }
@keyframes curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.moon-big { width: 64px; height: 64px; border-radius: 50%; background: #fff3c4; box-shadow: -14px -6px 0 0 #120c28 inset, 0 0 30px #fff3c455; animation: float 2s ease-in-out infinite; }
.cut-dawn { background: linear-gradient(#ffb36bcc, #ffe7a8cc 60%, #9fd8ffcc); }
.cut-dawn .cut-title { color: #fff; }
.sun-big { width: 70px; height: 70px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 0 8px #ffe78a88, 0 0 40px #ffd23f; animation: rise .9s steps(6) both; }
@keyframes rise { from { transform: translateY(60px); opacity: 0; } }
.cut-trial { background: rgba(40, 10, 20, .72); }
.cut-trial.sm .cut-title { font-size: 24px; }
/* 새벽 결과 */
.cut-kill { background: radial-gradient(circle at 50% 45%, #5a0f1acc, #12060acc 70%); }
.cut-av.lying { transform: rotate(-90deg); transform-origin: 50% 50%; filter: grayscale(.5) brightness(.8); margin: calc(-5px * var(--cut)) calc(6px * var(--cut)); animation: fall .5s .15s steps(4) both; }
@keyframes fall { from { transform: rotate(0); } }
.blood { position: absolute; bottom: calc(1px * var(--cut)); width: calc(22px * var(--cut)); height: calc(5px * var(--cut)); background: radial-gradient(ellipse, #b0102a 55%, transparent 60%); animation: grow .6s .5s steps(4) both; z-index: -1; }
@keyframes grow { from { transform: scale(0); } }
.cut-ico.pop { animation: pop2 .3s .4s steps(3) both; }
.cut-save { background: radial-gradient(circle at 50% 45%, #1c4a3acc, #0a1a14cc 70%); }
.cut-av.hop { animation: hop .5s .6s steps(3) 2; }
@keyframes hop { 50% { transform: translateY(-14px); } }
.cut-ico.spark { animation: pop2 .3s .6s steps(3) both; }
.sparkles { position: absolute; top: -20px; left: -30px; font-size: 26px; font-style: normal; animation: late .3s .8s both, float 1s .8s infinite; }
.cut-ico.shield { right: auto; left: 50%; top: 20%; transform: translateX(-50%); font-size: 64px; opacity: .9; animation: shieldIn .4s .5s steps(4) both; }
@keyframes shieldIn { from { transform: translateX(-50%) scale(2.2); opacity: 0; } }
.cut-news { background: rgba(10, 6, 18, .75); }
.paper { background: #f4efe0; color: #2a2230; border: 4px solid var(--line); padding: 14px 22px; display: flex; flex-direction: column; gap: 6px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .4); animation: spin .6s steps(6) both; }
.paper b { font-size: 22px; } .paper b .nk { text-shadow: none; }
.paper em { font-style: normal; font-size: 30px; color: #c0283e; }
.paper small { color: #6a5f70; }
@keyframes spin { from { transform: rotate(-540deg) scale(.1); } }
.cut-quiet { background: rgba(14, 18, 40, .7); }
.cut-ico.float { position: static; font-size: 54px; animation: float 1.6s ease-in-out infinite; }
/* 처형 */
.cut-exec { background: rgba(6, 4, 10, .86); }
.spot { position: absolute; left: 50%; top: 0; width: 60%; height: 100%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 55%, rgba(255, 244, 200, .28), transparent 60%); animation: blink .12s steps(1) 6; }
.cut-av.doomed { animation: shake .1s linear 10, doom .8s 1.2s steps(6) forwards; }
@keyframes doom { to { filter: grayscale(1) brightness(1.6); opacity: .25; transform: translateY(-30px); } }
.cut-av.doomed.now { animation: doom .8s .2s steps(6) forwards; }
.cut-av.saved-late { animation: shake .1s linear 10, hop .4s 1.3s steps(3) 2; }
.stamp { white-space: nowrap; position: absolute; left: 50%; top: 40%; transform: translateX(-50%) rotate(-12deg); font-size: 34px; padding: 2px 14px; border: 5px solid currentColor; background: rgba(0, 0, 0, .35); letter-spacing: 4px; animation: stamp .25s 1.1s steps(3) both; }
.stamp.red { color: #ff3b52; } .stamp.green { color: #5fe07a; } .stamp.gold { color: #ffcc33; }
@keyframes stamp { from { transform: translateX(-50%) rotate(-12deg) scale(3); opacity: 0; } }
.cut-ico.late { animation: late .3s 1.3s both steps(3); }
.cut-boom { background: radial-gradient(circle, #ffb020cc, #7a1a0acc 55%, #12060acc); }
.flash { position: absolute; inset: 0; background: #fff; animation: cutOut .4s steps(3) forwards; --ms: 400ms; }
.cut-art.duo { gap: 20px; }
.cut-ico.boom { right: auto; left: 50%; top: 10%; transform: translateX(-50%); font-size: 80px; animation: pop2 .3s steps(3) both; }

@media (max-width: 820px), (pointer: coarse) and (orientation: portrait) {
  :root { --cut: 3; }
  .cut-title { font-size: 20px; }
  .cut-trial.sm .cut-title { font-size: 19px; }
  .cut-sub { font-size: 11px; }
  .sysbar { top: 46px; }
  .emo-pick { grid-template-columns: repeat(6, 38px); }
  .emo-pick button { width: 38px; height: 38px; }
}
@media (max-width: 480px) {
  :root { --cut: 2.5; }
  .cut-title { font-size: 17px; }
  .stamp { font-size: 26px; }
  .paper em { font-size: 24px; }
}
@media (pointer: coarse) and (orientation: portrait) and (min-width: 600px) {
  :root { --cut: 4; }
  .cut-title { font-size: 28px; }
}

/* 스테이지가 낮을 때(휴대폰) 컷신 압축 */
@container (max-height: 420px) {
  .cut { --cut: 2.2; gap: 6px; padding: 8px; }
  .cut-title { font-size: 17px; }
  .cut-sub { font-size: 11px; }
  .cut-tally { font-size: 12px; padding: 2px 8px; }
  .cut-ico { font-size: 22px; right: -18px; top: -4px; }
  .cut-ico.float { font-size: 36px; }
  .cut-ico.shield { font-size: 40px; }
  .cut-ico.boom { font-size: 46px; }
  .stamp { font-size: 20px; border-width: 3px; padding: 0 8px; top: 30%; letter-spacing: 2px; }
  .paper { padding: 6px 14px; gap: 2px; }
  .paper b { font-size: 15px; } .paper em { font-size: 20px; } .paper small { font-size: 10px; }
  .moon-big, .sun-big { width: 40px; height: 40px; }
  .sparkles { font-size: 18px; }
}
@container (max-height: 260px) {
  .cut { --cut: 1.7; }
  .cut-title { font-size: 15px; }
  .cut-sub { display: none; }
}

/* ───────── 디스코드 로그인 ───────── */
.dc-box { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.btn.discord { background: #5865f2; color: #fff; text-align: center; text-decoration: none; display: block; }
.btn.discord::before { content: '🎮 '; }
.dc-user { text-align: center; font-size: 12px; color: var(--muted); }
.dc-user b { color: var(--text); }
.dc-user a { color: var(--accent); }
.login-box.need-login .custom, .login-box.need-login #btnRandom, .login-box.need-login #nickInput, .login-box.need-login #btnEnter { display: none; }
.logo { letter-spacing: 2px; }

/* 게스트 */
.btn.guest { background: #3a2e58; width: 100%; }
.guest-note { text-align: center; margin: 0; }
.guest-note a { color: var(--accent); }
.lv.guest { background: #4a6a5a; }
.guest-panel { text-align: center; padding: 26px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.guest-panel .big-ico { font-size: 46px; }
.guest-panel .btn.discord { display: inline-block; }

/* ───────── 디스코드 초대 ───────── */
.dc-logo { display: inline-block; width: 28px; height: 22px; flex-shrink: 0; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127 96'%3E%3Cpath fill='%23fff' d='M107.7 8.1A105 105 0 0 0 81.5 0a72 72 0 0 0-3.4 6.9 97.7 97.7 0 0 0-29.1 0A72 72 0 0 0 45.6 0a105.9 105.9 0 0 0-26.3 8.1C2.8 32.7-1.7 56.6.5 80.2a105.7 105.7 0 0 0 32.2 16.2 77.7 77.7 0 0 0 6.9-11.1 68.4 68.4 0 0 1-10.9-5.2l2.7-2.1a75.6 75.6 0 0 0 64.3 0l2.7 2.1a68.7 68.7 0 0 1-10.9 5.2 77 77 0 0 0 6.9 11.1 105.3 105.3 0 0 0 32.2-16.2c2.6-27.4-4.4-51.1-18.9-72.1ZM42.5 65.7c-6.3 0-11.4-5.8-11.4-12.9s5-12.9 11.4-12.9 11.5 5.8 11.4 12.9-5 12.9-11.4 12.9Zm42.2 0c-6.3 0-11.4-5.8-11.4-12.9s5-12.9 11.4-12.9 11.5 5.8 11.4 12.9-5 12.9-11.4 12.9Z'/%3E%3C/svg%3E"); }
.btn.dc-join { text-decoration: none; display: flex; align-items: center; gap: 10px; background: #5865f2; color: #fff; text-align: left; padding: 10px 12px; }
.btn.dc-join span { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.btn.dc-join small { font-size: 10px; color: #dfe2ff; }
.btn.dc-join b { font-size: 20px; }


/* 대기실 윗줄: 한글 로고 길어져서 좁은 화면 정리 */
.bar .logo.sm, .bar .pill, .bar .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .bar .logo.sm { font-size: 16px; letter-spacing: 0; text-shadow: 2px 2px 0 var(--line); }
  #lobbyCount { display: none; }
  #scr-lobby .bar { gap: 5px; }
  #scr-lobby .bar .btn.sm { padding: 5px 7px; font-size: 12px; }
  #scr-lobby .bar .pill { padding: 3px 6px; }
}
@media (max-width: 360px) {
  #btnShop, #btnProfile, #btnHome { font-size: 0 !important; }
  #btnShop::first-letter, #btnProfile::first-letter, #btnHome::first-letter { font-size: 15px; }
}

/* 남의 집 안에서 걸어다니기 (발 기준 위치) */
.interior .int-me { transform: translate(-50%, -100%); z-index: 2; }

/* 집 안 손님 실루엣 */
#intGhosts { position: absolute; inset: 0; pointer-events: none; }
.int-ghost { position: absolute; transform: translate(-50%, -100%); image-rendering: pixelated; transition: left .12s linear, top .12s linear; z-index: 1; }
/* 직업 메모 */
.rtag.memo { opacity: .9; border-style: dashed; }
.rtag.memo.sus { background: #6a4a1a; color: #ffd98a; }
.rtag.memo.okk { background: #1f5a3a; color: #aef0c4; }
.pcard .pface { cursor: pointer; position: relative; }
.pcard .pface::after { content: '📝'; position: absolute; right: -4px; bottom: -4px; font-size: 10px; opacity: .75; }
.memo-box { width: min(420px, 100%); }
.memo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.memo-pick { padding: 8px 4px; font-size: 13px; }
.memo-pick.mafia { background: #6a2030; } .memo-pick.citizen { background: #22407a; }
.memo-pick.sus { background: #6a4a1a; } .memo-pick.okk { background: #1f5a3a; }
.memo-pick.on { outline: 3px solid var(--accent); outline-offset: -2px; }
.will-view { margin: 4px 0; font-size: 12px; color: var(--text); word-break: keep-all; }

.memo-grid { grid-template-columns: repeat(4, 1fr); max-height: 52vh; overflow-y: auto; }
@media (max-width: 480px) { .memo-grid { grid-template-columns: repeat(3, 1fr); } }

/* ───────── 펫 ───────── */
.pet { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.pet img { display: block; image-rendering: pixelated; }
.pet.lying img { filter: brightness(.85); }
.pet.lying::after { content: 'z'; position: absolute; right: -4px; top: -6px; font-size: 10px; color: #cfd8ff; animation: zz 1.6s steps(4) infinite; }
.emo.pet-emo { font-size: calc(6px * var(--cpx) + 6px); padding: 2px 4px 3px; border-width: 2px; }
.pet-prev { width: 42px; height: 42px; image-rendering: pixelated; }
.dc-with-pet { display: flex; align-items: flex-end; gap: 4px; }
.dc-pet { width: 42px; height: 42px; image-rendering: pixelated; }
/* 상점 탭 · 아이템 */
.shop-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0 8px; }
.shop-tabs .btn.on { background: var(--accent); color: #221; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; background: #221a36; border: 2px solid var(--line); box-shadow: inset 0 0 0 2px var(--rc); text-align: center; }
.shop-item b { font-size: 12px; }
.shop-item small.r { font-size: 10px; color: var(--rc); }
.shop-item .btn { width: 100%; padding: 4px; font-size: 11px; }
.shop-item.have { background: #2a2244; }
.dc-item { position: relative; }
.dc-item .ach-mark { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 11px; }
.dc-item.locked.ach { opacity: .75; }
.dc-item.locked.ach small { white-space: normal; line-height: 1.3; }
.dc-item .prog { color: var(--accent) !important; }
@media (max-width: 560px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } .shop-tabs .btn { padding: 4px 6px; font-size: 11px; } }


/* ───────── 집 내부: 꾸민 방 (캔버스) ───────── */
.interior { background: #120c1c; container-type: size; }
.room-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100cqw, 133.33cqh); aspect-ratio: 4 / 3; --rpx: calc(min(100cqw, 133.33cqh) / 192); }
.room-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.room-box .int-me { position: absolute; transform: translate(-50%, -100%); image-rendering: pixelated; z-index: 2; }
#intZzz { position: absolute; transform: translate(-50%, -100%); z-index: 3; pointer-events: none; }
.room-box #intGhosts { position: absolute; inset: 0; pointer-events: none; }

/* ───────── 가구 상점 ───────── */
.home-open { display: block; width: 100%; margin: 4px 0 8px; }
.shop-tabs.sub { flex-wrap: wrap; gap: 4px; }
.shop-tabs.sub .btn { font-size: 12px; padding: 4px 7px; }
.shop-item.furn .gprev { height: 60px; display: grid; place-items: center; }
.fimg { image-rendering: pixelated; display: block; }

/* ───────── 내 방 꾸미기 편집기 ───────── */
.home-ed { position: fixed; inset: 0; z-index: 9600; background: rgba(8, 5, 14, .86); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 8px; }
.he-card { min-width: 0; width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 4px solid var(--line); padding: 8px; box-shadow: 0 0 0 3px #4a3f66; }
.he-top { display: flex; align-items: center; gap: 6px; }
.he-title { flex: 1; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-stage { background: #120c1c; border: 3px solid var(--line); display: grid; place-items: center; flex: 0 1 auto; min-height: 0; }
.he-stage canvas { width: min(100%, calc(60vh * 4 / 3)); height: auto; aspect-ratio: 4 / 3; image-rendering: pixelated; touch-action: none; cursor: pointer; display: block; }
.he-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.he-tools .btn.on { background: #4a3f66; }
.he-hint { font-size: 12px; color: var(--muted); flex: 1; min-width: 160px; }
.he-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.he-tabs .btn { white-space: nowrap; font-size: 12px; padding: 4px 8px; flex: none; }
.he-inv { display: grid; align-content: start; grid-auto-rows: min-content; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; overflow-y: auto; min-height: 96px; max-height: 26vh; padding: 2px; }
.he-it { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; background: #1f1830; border: 3px solid var(--line); color: var(--text); font: inherit; font-size: 11px; padding: 4px 2px 3px; cursor: pointer; min-height: 84px; }
.he-it .fimg { margin: auto 0; }
.he-it span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.he-it i { font-style: normal; font-size: 10px; background: #3a2e58; padding: 0 4px; }
.he-it i.buy { background: #e8a33a; color: #221; }
.he-it i.on { background: #3fa37a; }
.he-it i.zero { background: #5a2a3a; }
.he-it.none { opacity: .75; }
.he-it.used { opacity: .5; }
.he-it.picking { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.he-it.r-rare { border-color: #3a6fd0; } .he-it.r-epic { border-color: #9a5cc9; } .he-it.r-legend { border-color: #e8a33a; }
.he-it.picking.r-rare, .he-it.picking.r-epic, .he-it.picking.r-legend { border-color: var(--accent); }
@media (max-width: 560px) {
  .home-ed { padding: 0; }
  .he-card { height: 100%; border-width: 0; box-shadow: none; }
  .he-inv { max-height: none; flex: 1; }
  .he-stage canvas { width: min(100%, calc(46vh * 4 / 3)); }
  .he-top .pill { display: none; }
}
#intZzz { right: auto; }