:root{
  /* 원작 SUBERUNKER 를 따라 색을 전부 뺐다. 흑백 + 회색 두 단계뿐이다. */
  --바탕:#fff; --판:#fff; --선:#000; --글:#000; --흐림:#666; --연:#d9d9d9;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --폰트:ui-sans-serif,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --모노:ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
/* ★ hidden 을 이기는 display 규칙이 계속 생긴다(.줄{display:flex} 처럼).
   그때마다 짝 규칙을 쓰는 대신 한 줄로 못 박는다. 이미 한 번 이걸로
   서랍이 펼쳐진 채 배포된 적이 있다. */
[hidden]{display:none!important}
html,body{margin:0;background:var(--바탕);color:var(--글);font-family:var(--폰트)}
body{padding:0 16px calc(20px + var(--safe-b));-webkit-text-size-adjust:100%;overscroll-behavior:none}
.bar{display:flex;align-items:baseline;gap:10px;max-width:520px;margin:0 auto;
     padding:calc(12px + var(--safe-t)) 0 10px}
/* 소리 토글. 제목줄 오른쪽 끝에 붙인다 — 찾기 쉬운 자리라야 한다. */
.소리단{margin-left:auto;display:flex;gap:5px}
.소리단 button{font:inherit;font-size:11px;font-family:var(--모노);cursor:pointer;
  border:1px solid var(--선);background:var(--판);color:var(--글);
  border-radius:2px;padding:3px 8px;line-height:1.5;min-height:0}
.소리단 button[aria-pressed="true"]{background:var(--글);color:var(--판);border-color:var(--글)}
.소리단 button:focus-visible{outline:2px solid var(--글);outline-offset:2px}
h1{font-size:17px;margin:0;letter-spacing:-.01em}
.sub{font-family:var(--모노);font-size:11px;color:var(--흐림)}
main{max-width:520px;margin:0 auto}
.모드{display:flex;gap:6px;max-width:520px;margin:0 auto 12px}

/* ── PC 에서는 두 칸. 왼쪽이 게임, 오른쪽이 Jev 속내다.
      원작 창은 520px 를 넘기지 않는다 — 커져 봐야 흰 여백만 는다. */
@media (min-width:980px){
  main{max-width:1180px;display:grid;grid-template-columns:520px minmax(0,1fr);
    gap:20px;align-items:start}
  .왼{position:sticky;top:12px}          /* 오른쪽 로그를 굴려도 게임은 붙어 있게 */
  .오{min-width:0}
  .창,.모드{max-width:none}
  .bar{max-width:1180px}          /* 제목줄도 게임 영역에 맞춘다 — 소리 버튼이 창 끝에 붕 뜨지 않게 */
  .로그{max-height:min(56vh,620px)}      /* 화면이 넓으면 로그를 길게 */
}
.칸{flex:1;min-height:46px;border:1px solid #000;background:#fff;color:#000;
  border-radius:0;font:inherit;font-size:14px;cursor:pointer}
.칸.켜짐{background:#000;color:#fff;font-weight:700}

/* ── 가짜 창틀 ── 단추는 장식이라 <i> 이고 포커스를 받지 않는다 */
.창{max-width:520px;margin:0 auto 12px;border:2px solid #000;background:#fff}
.왼,.오{min-width:0}
.제목줄{display:flex;align-items:center;justify-content:space-between;
  height:24px;padding:0 3px 0 7px;border-bottom:2px solid #000;
  font:700 12px var(--모노);letter-spacing:.09em;-webkit-user-select:none;user-select:none}
.단추들{display:flex;gap:3px}
.단추들 i{display:grid;place-items:center;width:17px;height:15px;border:1px solid #000;
  font:11px var(--모노);font-style:normal;line-height:1}
.판{position:relative;overflow:hidden;background:#fff}
canvas{display:block;width:100%;height:auto;touch-action:none}
.덮개{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;background:rgba(255,255,255,.88);text-align:center;padding:16px}
/* 죽었을 때는 스크림을 걷는다 — DEAD 는 캔버스가 그리므로 가리면 안 된다 */
.덮개.끝{background:transparent;justify-content:flex-end;padding-bottom:9%}
.덮개.끝 .큰,.덮개.끝 .작{display:none}
.덮개[hidden]{display:none}
.큰{font-size:22px;font-weight:600;margin:0}
.작{font-size:13px;color:var(--흐림);margin:0;max-width:30ch;line-height:1.6}
#설명 code{font-family:var(--모노);font-size:.92em;border:1px solid var(--연);
  padding:0 4px;border-radius:2px}
.시작{margin-top:10px;min-height:48px;padding:0 26px;border:2px solid #000;border-radius:0;
  background:#000;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
/* 게임이 끝나면 나오는 "판정 기록 복사". 클립보드가 막히면 아래 textarea 로 떨어진다. */
.기록{margin-top:8px;min-height:38px;padding:0 14px;border:1px solid #000;border-radius:0;
  background:#fff;color:#000;font:inherit;font-size:12.5px;cursor:pointer}
.기록:hover{background:#000;color:#fff}
.기록[hidden]{display:none}
.기록글{width:100%;max-width:420px;height:120px;margin-top:8px;font-family:var(--모노);
  font-size:10px;line-height:1.5;border:1px solid #000;background:#fff;color:#000;padding:6px}
.기록글[hidden]{display:none}
.속{background:#fff;border:1px solid #000;border-radius:0;padding:13px;margin-bottom:12px;font-size:13px;line-height:1.7}
.속[hidden]{display:none}
.속 p{margin:0 0 9px}.속 p:last-child{margin:0}
.속머리{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--모노);font-size:10.5px;letter-spacing:.06em;color:var(--흐림);margin-bottom:9px}
/* 색을 안 쓰므로 반전·밑줄·점선으로 네 상태를 가른다 */
.상태{padding:1px 7px;border:1px solid #000;border-radius:0;color:#000}
.상태.정상{background:#000;color:#fff}
.상태.실패{background:#000;color:#fff;text-decoration:underline}
.상태.판정중{border-style:dashed}
.상태.코드{color:var(--흐림);border-color:var(--흐림)}
/* ── 모델에게 보내는 내용 — 길어서 접을 수 있게 한다. 안 접으면 로그를 밀어낸다 */
.상황판{margin:0 0 11px}
.상황판>summary{cursor:pointer;list-style:none;font-family:var(--모노);font-size:10.5px;
  letter-spacing:.06em;color:var(--흐림);padding:3px 0;-webkit-user-select:none;user-select:none}
.상황판>summary::-webkit-details-marker{display:none}
.상황판>summary::before{content:"▸ "}
.상황판[open]>summary::before{content:"▾ "}
.상황판>summary:hover{color:#000}
.상황판>summary:focus-visible{outline:2px solid #000;outline-offset:2px}
.상황판 .상황{margin:5px 0 0;max-height:240px;overflow-y:auto}
.상황{font-size:11px;font-family:var(--모노);white-space:pre-wrap;color:#000;background:#f4f4f4;border:1px solid var(--연);
  border-radius:0;padding:9px 10px;margin:0 0 11px;line-height:1.65;word-break:keep-all}
.막대들{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
/* 라벨 칸은 "오른쪽조금"(5자) 이 안 잘리는 폭이어야 한다. 자르면 뜻이 사라진다. */
.막{display:grid;grid-template-columns:72px 1fr 40px;gap:8px;align-items:center;font-size:12px}
.막>span{white-space:nowrap}
/* 탈출구는 줄을 하나 띄우고 기울여 둔다 — 나머지와 성격이 다르다 */
.막.탈출{margin-top:4px;padding-top:5px;border-top:1px dotted var(--연)}
.막.탈출>span{font-style:italic;color:var(--흐림)}
.막 i{display:block;height:7px;border-radius:0;background:var(--연);position:relative;overflow:hidden}
.막 i b{position:absolute;inset:0 auto 0 0;background:var(--흐림)}
.막.top i b{background:#000}
.막 u{font-family:var(--모노);font-size:11px;font-variant-numeric:tabular-nums;color:var(--흐림);text-align:right;font-style:normal;text-decoration:none}
.줄{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--흐림);
  padding:5px 0;border-top:1px solid var(--연)}
.줄 b{font-family:var(--모노);color:var(--글);font-variant-numeric:tabular-nums}
.흐림{color:var(--흐림)}
/* ── 직접 플레이 조작 ──
   화면 아래 버튼 바를 없애고 **화면 좌우 절반**을 누르게 했다. 엄지가 게임에
   닿아 있어 시선이 아래로 안 내려간다. 끌면 방향이 바뀐다.
   touch-action:none 이라야 누른 채 끌 때 페이지가 스크롤되지 않는다. */
.터치{position:absolute;inset:0;display:flex;touch-action:none}
.터치[hidden]{display:none}
.터치 .반{flex:1;min-height:0;border:0;padding:0;margin:0;background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background .08s linear}
.터치 .반 i{font-style:normal;font-size:30px;color:rgba(0,0,0,.09)}
.터치 .반.눌림{background:rgba(0,0,0,.06)}
.터치 .반.눌림 i{color:rgba(0,0,0,.28)}
.터치 .반:focus-visible{outline:2px solid #000;outline-offset:-4px}
/* 가운데 경계를 아주 옅게 — 어디서 갈리는지 한 번은 보여야 한다 */
.터치::after{content:"";position:absolute;left:50%;top:14%;bottom:14%;
  border-left:1px dashed var(--연);pointer-events:none}
@media (prefers-reduced-motion:reduce){.터치 .반{transition:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── APM ────────────────────────────────────────── */
.타일들{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:1px;
  background:var(--연);border:1px solid var(--연);margin-bottom:10px}
.타일{background:#fff;padding:6px 8px;display:flex;flex-direction:column;gap:1px}
.타일 u{font-family:var(--모노);font-size:9.5px;letter-spacing:.07em;color:var(--흐림);
  text-decoration:none}
.타일 b{font-family:var(--모노);font-size:17px;font-weight:700;color:#000;
  font-variant-numeric:tabular-nums;line-height:1.15}
.타일 i{font-family:var(--모노);font-size:9.5px;color:var(--흐림);font-style:normal}
.타일.경보 b{background:#000;color:#fff;padding:0 4px;align-self:flex-start}
#성능그래프{display:block;width:100%;height:96px;border:1px solid var(--연);background:#fff}
.범례{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;
  font-family:var(--모노);font-size:9.5px;color:var(--흐림)}
.범례 span{display:inline-flex;align-items:center;gap:5px}
.키{width:14px;height:8px;display:inline-block;flex:none}
.키.채움{background:#d9d9d9;border:1px solid #000;border-width:1px 0 0 0}
.키.선{border-top:2px dashed #000;height:0}
.키.실패{width:2px;height:12px;background:#000}

/* ── 시스템 로그 ────────────────────────────────── */
.로그판{padding-bottom:6px}
.지움{background:none;border:1px solid var(--연);color:var(--흐림);border-radius:0;
  font:inherit;font-size:10px;padding:2px 8px;cursor:pointer;letter-spacing:0}
.로그{display:flex;flex-direction:column;max-height:340px;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* 첫 줄(가장 최근)을 눈에 띄게 — 흐름이 위에서 쌓인다 */
.줄기:first-child>summary{background:#f4f4f4}
.줄기{border-top:1px solid var(--연)}
.줄기>summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline;
  padding:8px 6px;font-family:var(--모노);font-size:11.5px;min-height:36px}
.줄기>summary::-webkit-details-marker{display:none}
.줄기>summary:focus-visible{outline:2px solid #000;outline-offset:-2px}
.줄기 .n{color:#999;min-width:22px}
/* ★ background/min-height/padding 을 여기서 되잡는다. 로그의 "시작" 사건 태그가
   class="tag 시작" 인데 **시작 버튼의 .시작 규칙과 이름이 겹쳐서** 검정 배경에
   48px 높이를 물려받고 있었다(회색 글자 + 검정 배경 = 안 보임). */
.줄기 .tag{padding:0 5px;border-radius:0;font-size:9.5px;letter-spacing:.04em;flex:none;
  background:transparent;min-height:0;line-height:1.7}
.tag.jev{border:1px solid #000;color:#000}
.tag.코드{background:#eee;color:var(--흐림)}
.tag.실패,.tag.피격{background:#000;color:#fff}
.tag.시작,.tag.게임오버{border:1px solid var(--흐림);color:var(--흐림)}
.줄기 .act{color:var(--글);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.줄기 .ms{color:var(--흐림);font-variant-numeric:tabular-nums}
.몸{padding:2px 0 10px}
.몸 h4{margin:8px 0 4px;font-family:var(--모노);font-size:9.5px;letter-spacing:.08em;
  color:var(--흐림);font-weight:500;text-transform:uppercase}
.몸{padding:2px 6px 10px}
.몸 pre{margin:0;background:#f4f4f4;border:1px solid var(--연);border-radius:0;padding:9px 10px;
  font-family:var(--모노);font-size:10.5px;line-height:1.62;color:#000;
  overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch}
.빈로그{color:var(--흐림);font-size:12px;padding:10px 0}

/* ── 로그인 · 순위표 · 공유 ─────────────────────────────── */
.누구단{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-family:var(--모노);font-size:11px;color:var(--흐림)}
.누구단[hidden]{display:none}
.누구단 button{font:inherit;font-size:11px;font-family:var(--모노);cursor:pointer;
  border:1px solid var(--선);background:var(--판);color:var(--글);
  border-radius:2px;padding:3px 7px;line-height:1.5;min-height:0}
.소리단{margin-left:0}                    /* 누구단이 생기면 밀림 기준이 바뀐다 */
.bar .소리단:first-of-type{margin-left:auto}

/* 게임오버 덮개 안 */
.꼬임{font-size:12.5px;color:#000;margin:0 0 2px}
.꼬임 b{font-family:var(--모노)}
.구글{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:280px;
  min-height:44px;border:2px solid #000;background:#000;color:#fff;font:inherit;font-size:14px;
  font-weight:700;cursor:pointer;border-radius:0}
.구글 .지{font-family:var(--모노);font-weight:700}
.구글[hidden]{display:none}
.끝단{display:flex;gap:6px;width:100%;max-width:280px}
.끝단[hidden]{display:none}
.끝단 .시작{flex:1}
.부{flex:1;min-height:44px;border:1px solid #000;background:#fff;color:#000;
  font:inherit;font-size:14px;cursor:pointer;border-radius:0}
.부:active{background:#000;color:#fff}
#시작단독[hidden]{display:none}

.공유칸들{display:flex;gap:6px;width:100%;max-width:300px;margin-top:2px}
.공유칸들[hidden]{display:none}
.공유칸{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  border:1px solid #000;background:#fff;color:#000;padding:7px 3px 5px;cursor:pointer;
  border-radius:0;font:inherit}
.공유칸 svg{width:19px;height:19px;fill:currentColor;display:block}
.공유칸 u{text-decoration:none;font-size:9.5px;font-family:var(--모노);line-height:1}
.공유칸:active{background:#000;color:#fff}
.공유말{font-size:11.5px;font-family:var(--모노);color:#000;margin:2px 0 0;max-width:300px}
.공유말.직접{user-select:all;word-break:break-all;border:1px dashed #999;padding:5px 7px}
.공유말[hidden]{display:none}

/* 순위표 */
.작은칸{display:flex;gap:5px;margin-bottom:10px}
.작은칸 button{flex:1;min-height:32px;border:1px solid var(--선);background:var(--판);
  color:var(--글);font:inherit;font-size:12px;cursor:pointer;border-radius:0}
.작은칸 button.켜짐{background:var(--글);color:var(--판);font-weight:700}
table.순위{border-collapse:collapse;width:100%;font-size:13px}
.순위 th,.순위 td{padding:6px 8px;border-bottom:1px solid var(--연);text-align:right;white-space:nowrap}
.순위 th:nth-child(2),.순위 td:nth-child(2){text-align:left;width:100%}
.순위 thead th{font-family:var(--모노);font-size:10px;color:var(--흐림);
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--선)}
.순위 td.n{font-family:var(--모노);font-variant-numeric:tabular-nums}
.순위 .메달{font-weight:700}
.순위 tr.나{background:var(--글);color:var(--판)}
.순위 tr.나 td{border-bottom-color:var(--글)}
.순위 tr.빈줄 td{text-align:center;color:var(--흐림);font-size:12.5px;padding:18px 8px}
.누구{display:flex;align-items:center;gap:7px}
.얼굴{width:20px;height:20px;border-radius:50%;background:var(--연);border:1px solid var(--선);
  flex:none;display:grid;place-items:center;font-size:10px;font-family:var(--모노)}
tr.나 .얼굴{border-color:var(--판);background:transparent}
#초대링크{font-size:11px}

/* 등장 효과 — 게임의 피격 연출을 그대로. 한 줄씩 툭 떨어지고 그 줄만 반전된다.
   화면 흔들림은 안 쓴다: 게임에서 흔들림은 "맞았다" 라 목록에 쓰면 오류처럼 읽힌다. */
@keyframes 착지 {
  0%   { opacity:0; transform:translateY(-7px) scaleY(.82) }
  35%  { opacity:1; transform:translateY(0)    scaleY(1.08) }
  100% { opacity:1; transform:translateY(0)    scaleY(1) }
}
@keyframes 번쩍 { 0%,60% { filter:invert(1) } 61%,100% { filter:none } }
.순위 tbody tr{animation:착지 .3s steps(5,end) both var(--d,0s),
                        번쩍 .2s steps(1,end) var(--d,0s)}
.순위 tbody tr.나{animation:착지 .3s steps(5,end) both var(--d,0s),
                          번쩍 .2s steps(1,end) var(--d,0s) 3}
@media (prefers-reduced-motion:reduce){
  .순위 tbody tr,.순위 tbody tr.나{animation:none!important;opacity:1}
}

/* 이름 바꾸기 */
.이름칸{border:1px solid var(--선);padding:10px 12px;margin-bottom:10px}
.이름칸.처음{background:var(--글);color:var(--판)}
.이름칸 label{display:block;font-size:11px;font-family:var(--모노);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;opacity:.75}
.이름줄{display:flex;gap:6px}
.이름줄 input{flex:1;min-width:0;font:inherit;font-size:14px;padding:7px 9px;
  border:1px solid var(--선);background:var(--판);color:var(--글);border-radius:0}
.이름칸.처음 .이름줄 input{border-color:var(--판)}
.이름줄 button{font:inherit;font-size:13px;padding:7px 14px;cursor:pointer;
  border:1px solid var(--선);background:var(--판);color:var(--글);border-radius:0;font-weight:600}
.이름칸.처음 .이름줄 button{border-color:var(--판)}
.이름말{font-size:11.5px;font-family:var(--모노);margin:6px 0 0}
#내이름{font:inherit;font-family:var(--모노);font-size:11px;cursor:pointer;
  border:0;background:none;color:var(--흐림);padding:0;text-decoration:underline;
  text-underline-offset:2px}
#내이름:hover{color:var(--글)}

/* 초대 링크 — 줄 전체가 복사 버튼. 모바일에서 글자를 길게 눌러 고르는 건 자주 실패한다. */
.초대{margin:0 0 10px}
.초대판{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  min-height:52px;padding:8px 12px;cursor:pointer;border:1px solid var(--선);
  background:var(--판);color:var(--글);border-radius:0;font:inherit;text-align:left}
.초대판:active{background:var(--글);color:var(--판)}
.초대라벨{font-size:10.5px;font-family:var(--모노);text-transform:uppercase;
  letter-spacing:.06em;opacity:.7}
.초대주소{font-family:var(--모노);font-size:13px;word-break:break-all;line-height:1.35}
.초대말{font-size:11.5px;font-family:var(--모노);margin:5px 0 0}
.초대말.직접{user-select:all;word-break:break-all;border:1px dashed var(--흐림);padding:5px 7px}