/* 빠른 매칭 대기와 방 화면 — 타이틀의 어두운 테이블/종이 스티커 문법. */
#quickWait,
#room{
  --bg:#0b0c10;
  --table:#14161c;
  --paper:#f4efe6;
  --ink:#14161c;
  --line:#2a3040;
  --dim:#8b93a3;
  --shadow:#07080b;
  --p1:#ff7a1c;
  --p2:#31a8ff;
  --disp:'Lilita One','Arial Black',Impact,sans-serif;
  --kr:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --body:'Gowun Dodum','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  position:fixed;
  inset:0;
  z-index:190;
  width:100vw;
  height:100vh;
  height:100dvh;
  padding:16px;
  overflow:hidden;
  color:var(--ink);
  font-family:var(--body);
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 50% 43%,transparent 0 30%,rgba(0,0,0,.58) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 40px);
  -webkit-font-smoothing:antialiased;
}

#quickWait.screen.on,
#room.screen.on{
  display:grid;
  place-items:center;
}

#quickWait *,
#room *{box-sizing:border-box}

#quickWait button,
#room button{
  font-family:var(--kr);
  font-weight:400;
  cursor:pointer;
  border:2.5px solid var(--ink);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:3px 4px 0 var(--shadow);
  transition:transform .15s cubic-bezier(.2,1.4,.4,1),box-shadow .15s,filter .15s,opacity .15s;
}

#quickWait button:hover:not(:disabled),
#room button:hover:not(:disabled){
  filter:brightness(1.04);
  transform:translate(-1px,-2px);
  box-shadow:5px 6px 0 var(--shadow);
}

#quickWait button:active:not(:disabled),
#room button:active:not(:disabled){
  transform:translate(2px,3px);
  box-shadow:1px 1px 0 var(--shadow);
}

#quickWait button:focus-visible,
#room button:focus-visible,
#room input:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}

#quickWait button:disabled,
#room button:disabled{
  opacity:.48;
  cursor:default;
}

/* 빠른 매칭 대기 */
#quickWait .card{
  width:min(380px,92vw);
  padding:34px 28px 28px;
  overflow:visible;
  text-align:center;
  color:var(--ink);
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:20px;
  box-shadow:9px 11px 0 var(--shadow);
  transform:rotate(-.55deg);
}

#quickWait #quickWaitTitle{
  margin:4px 0 8px;
  font-family:var(--kr);
  font-size:22px;
  font-weight:400;
  line-height:1.3;
}

#quickWait #quickWaitSub{
  min-height:20px;
  color:#626a78;
  font-size:13px;
}

#quickWait .matchDots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:11px;
  margin:27px 0 29px;
}

#quickWait .matchDots i{
  display:block;
  width:15px;
  height:15px;
  border:2px solid var(--ink);
  border-radius:58% 42% 55% 45%/48% 62% 38% 52%;
  background:var(--p1);
  box-shadow:2px 2px 0 var(--shadow);
  animation:roomMatchPulse 1.1s infinite ease-in-out;
}

#quickWait .matchDots i:nth-child(2){
  border-radius:43% 57% 39% 61%/57% 42% 58% 43%;
  background:var(--p2);
  animation-delay:.14s;
}

#quickWait .matchDots i:nth-child(3){
  border-radius:62% 38% 53% 47%/40% 58% 42% 60%;
  animation-delay:.28s;
}

#quickWait #btnCancelQuick{
  width:100%;
  min-height:43px;
  padding:9px 16px;
  font-size:15px;
  background:transparent;
}

#quickWait[data-matched] .card{
  animation:quickMatchedPop .48s cubic-bezier(.2,1.65,.4,1) both;
}

#quickWait [hidden]{display:none!important}
#quickWait .quickWaitTag{display:inline-block;margin:0 0 16px;padding:5px 15px;border:2px solid var(--ink);border-radius:6px;
  background:var(--p2);font:22px var(--disp);box-shadow:3px 3px 0 var(--shadow);transform:rotate(-4deg)}
#quickWait[data-ai-offer] .card{width:min(420px,92vw);border-top:8px solid var(--p2)}
#quickWait[data-ai-offer] #quickWaitTitle{font-size:27px;outline:none}
#quickWait #quickWaitSub{line-height:1.65}
#quickWait #quickAiActions{display:grid;gap:12px;margin:18px 0 12px}
#quickWait #quickAiActions button{width:100%;min-height:48px;font:18px var(--kr);padding:10px 12px}
#quickWait #btnQuickAi{background:var(--p1)}
#quickWait #btnQuickHuman{background:var(--paper)}
#quickWait .quickAiNote{margin:0 0 7px;font-size:12px;line-height:1.6;color:#525967}
#quickWait #quickChoiceStatus{min-height:0;margin:0;font:13px var(--kr);line-height:1.5}
#quickWait #quickChoiceStatus:not(:empty){margin:10px 0}
#quickWait[data-ai-offer] #btnCancelQuick{box-shadow:none;border-color:transparent;font-size:14px}
@media(max-height:540px){#quickWait{overflow:auto}#quickWait .card{margin:auto;padding:20px!important}}

@keyframes roomMatchPulse{
  0%,70%,100%{opacity:.28;transform:translateY(0) scale(.88) rotate(-5deg)}
  35%{opacity:1;transform:translateY(-7px) scale(1.08) rotate(5deg)}
}

@keyframes quickMatchedPop{
  0%{transform:rotate(-.55deg) scale(1)}
  45%{transform:translateY(-9px) rotate(.6deg) scale(1.035)}
  100%{transform:rotate(-.55deg) scale(1)}
}

/* 방 카드와 2열 뼈대 */
#room .card{
  width:min(980px,calc(100vw - 40px));
  height:auto;
  max-height:min(760px,calc(100vh - 32px));
  max-height:min(760px,calc(100dvh - 32px));
  min-height:0;
  padding:20px 22px 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:var(--ink);
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:20px;
  box-shadow:9px 11px 0 var(--shadow);
  transform:rotate(.18deg);
}

#room .room-main{
  min-width:0;
  min-height:0;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
  align-items:start;
  gap:22px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:#697080 transparent;
  scrollbar-width:thin;
}

#room .room-primary{
  min-width:0;
  min-height:0;
  padding:2px 7px 18px 2px;
}

#room .room-side{
  min-width:0;
  min-height:0;
  padding:2px 1px 18px 0;
  display:grid;
  grid-template-rows:auto auto;
}

/* 코드 스티커 */
#room .codebox{
  position:relative;
  margin:0 0 13px;
  padding:13px 14px 12px;
  overflow:hidden;
  text-align:center;
  background:#fffaf2;
  border:3px dashed var(--ink);
  border-radius:15px;
  box-shadow:4px 5px 0 rgba(7,8,11,.22);
}

#room .codebox::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:var(--p1);
  border-right:3px solid var(--ink);
}

#room .codebox #roomKind{
  display:inline-block;
  padding:3px 9px 2px;
  color:var(--paper);
  background:var(--ink);
  border-radius:999px;
  font-family:var(--disp);
  font-size:11px;
  line-height:1.2;
  letter-spacing:1.5px;
}

#room .codebox #roomCode{
  margin:2px 0 4px;
  color:var(--p1);
  font-family:var(--disp);
  font-size:clamp(34px,4vw,44px);
  font-weight:400;
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:.18em;
  text-indent:.18em;
  -webkit-text-stroke:1px var(--ink);
  paint-order:stroke fill;
}

#room #btnCopy{
  min-height:29px;
  color:var(--ink);
  background:var(--paper);
  box-shadow:2px 3px 0 var(--shadow);
}

/* 공개/비공개 토글 */
#room #roomVisibilityOption,
#room #roomMapOption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 13px;
  padding:10px 12px;
  color:var(--ink);
  background:#fffaf2;
  border:2.5px solid var(--ink);
  border-radius:13px;
}

#room #roomVisibilityOption[hidden],
#room #roomMapOption[hidden]{display:none}
#room #roomVisibilityOption .copy,
#room #roomMapOption .copy{min-width:0}

#room #roomVisibilityTitle,
#room #roomMapOption .title{
  font-family:var(--kr);
  font-size:14px;
  line-height:1.2;
}

#room #roomVisibilityDesc,
#room #roomMapDesc{
  margin-top:3px;
  color:#626a78;
  font-size:10.5px;
  line-height:1.35;
}

/* 섬네일은 종이 카드 위에 놓인다 — 테두리·그림자를 카드와 같은 잉크색으로. */
#room #roomMapPeek canvas{
  border-color:var(--ink);
  box-shadow:1.5px 2px 0 rgba(12,14,19,.28);
}

#room .switch{
  position:relative;
  width:48px;
  height:28px;
  flex:none;
  cursor:pointer;
}

#room .switch input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

#room .switch span{
  position:absolute;
  inset:0;
  border:2.5px solid var(--ink);
  border-radius:999px;
  background:#aeb3bd;
  box-shadow:2px 2px 0 var(--shadow);
  transition:background .15s,opacity .15s;
}

#room .switch span::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:17px;
  height:17px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:50%;
  transition:transform .15s cubic-bezier(.2,1.4,.4,1),background .15s;
}

#room .switch input:checked + span{
  background:var(--p2);
  border-color:var(--ink);
}

#room .switch input:checked + span::after{
  transform:translateX(20px);
  background:var(--ink);
}

#room .switch input:disabled + span{
  opacity:.42;
  cursor:default;
}

#room .switch input:focus-visible + span{
  outline:3px solid var(--ink);
  outline-offset:3px;
}

/* 참가자 목록 */
#room #players{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
}

#room #players .pl{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  color:var(--paper);
  background:var(--table);
  border:2px solid var(--ink);
  border-radius:11px;
  font-size:13px;
  box-shadow:3px 3px 0 rgba(7,8,11,.28);
}

#room #players .pl:has(.nm[style*="--dim"]){
  border-style:dashed;
  background:#262a33;
}

#room #players .dot{
  width:12px;
  height:12px;
  flex:none;
  border:2px solid var(--paper);
  border-radius:50%;
  outline:2px solid var(--ink);
}

#room #players .nm{
  min-width:0;
  flex:1;
  overflow:hidden;
  color:var(--paper);
  font-family:var(--kr);
  font-size:13px;
  font-weight:400;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#room #players .nm[style*="--dim"]{color:#aeb4bf!important}

#room #players .st{
  flex:none;
  padding:3px 7px 2px;
  color:#c2c6cf;
  background:#343945;
  border:1px solid #555d6d;
  border-radius:999px;
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
}

#room #players .cq{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--paper);
  font-family:var(--kr);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

#room #players .cq svg{
  width:12px;
  height:12px;
  flex:none;
  display:block;
  overflow:visible;
}

#room .cqHint{
  margin:6px 2px 0;
  color:var(--dim);
  font-family:var(--kr);
  font-size:11px;
  line-height:1.45;
}

#room .cqHint[hidden]{display:none}

#room #players .st.rdy{
  color:#112917;
  background:#5fd97a;
  border-color:#9bf0ad;
  font-weight:700;
}

#room #players .st[style*="255, 107, 107"],
#room #players .st[style*="#ff6b6b"]{
  background:rgba(212,59,59,.2);
  border-color:#ff6b6b;
}

/* 방 설정 */
#room #roomSettings{
  margin-top:14px;
  padding:9px 10px 10px;
  background:#fffaf2;
  border:2px solid var(--ink);
  border-radius:12px;
}

#room #roomSettings[hidden]{display:none}

#room .sec{
  margin:0 0 8px;
  padding:0;
  color:#5f6673;
  border:0;
  font-family:var(--disp);
  font-size:11px;
  line-height:1.3;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

#room #roomSettings > .sec{
  padding-bottom:7px;
  border-bottom:2px dashed #b7b1a6;
  color:var(--ink);
}

#room #paramWrap{
  max-height:185px;
  overflow-y:auto;
  padding-right:5px;
  scrollbar-width:thin;
  scrollbar-color:#7c8390 transparent;
}

#room #paramWrap .sec{
  margin-top:10px!important;
  padding-top:7px;
  border-top:1.5px dashed #aaa397;
}

#room .prm{margin-bottom:9px}

#room .prm .lb{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:3px;
  color:var(--ink);
  font-size:11px;
}

#room .prm .lb b{color:#753914;font-weight:700}
#room .prm .lb b::after{color:#77726a}
#room .prm .lb span{color:#087ab9;font-variant-numeric:tabular-nums}
#room .prm.disabled .lb b,
#room .prm.disabled .lb span{color:#9a9186}

#room .prm input[type=range]{
  width:100%;
  margin:0;
  accent-color:var(--p1);
}

#room .prm input[type=range]:disabled{opacity:.42}

#room .prm .desc{
  margin-top:5px;
  padding:6px 7px;
  color:#535b68;
  background:#e8e1d6;
  border:1px solid #bbb3a7;
  border-radius:7px;
  font-size:10px;
  line-height:1.4;
}

#room .paramActions{
  display:flex;
  gap:7px;
  margin-top:9px;
}

#room .paramActions button{
  flex:1;
  padding:6px 8px;
  font-size:11px;
  box-shadow:2px 2px 0 var(--shadow);
}

/* 채팅 */
#room .room-chat-head{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

#room .room-chat-head .sec{
  margin:0;
  color:var(--ink);
  font-size:13px;
}

#room .chatTools{
  margin:0;
  display:flex;
  justify-content:flex-end;
}

#room #btnMuteRoom{
  min-height:28px;
  padding:4px 9px;
  color:var(--ink);
  background:transparent;
  border-width:2px;
  font-family:var(--kr);
  font-size:10px;
  box-shadow:2px 2px 0 var(--shadow);
}

#room .chat{
  min-width:0;
  min-height:300px;
  max-height:480px;
  height:auto!important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:var(--paper);
  background:var(--table);
  border:3px solid var(--ink);
  border-radius:13px;
  box-shadow:4px 5px 0 rgba(7,8,11,.28);
}

#room .chat .log{
  min-height:0;
  flex:1;
  overflow-y:auto;
  padding:12px 13px;
  color:var(--paper);
  font-size:12.5px;
  line-height:1.55;
  scrollbar-color:#626a78 transparent;
  scrollbar-width:thin;
}

#room .chat .log div{
  margin-bottom:4px;
  word-break:break-word;
}

#room .chat .log div.muted-msg{display:none}

#room .chat .log .sys{
  color:#aeb4bf;
  font-size:11px;
  font-style:italic;
}

#room .chat .log b.p1{color:#ff9b56}
#room .chat .log b.p2{color:#69c2ff}

#room .chat form{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px;
  border-top:2px solid #373d49;
  background:#0e1015;
}

#room .chat #roomChatInput{
  min-width:0;
  flex:1;
  padding:9px 10px;
  color:var(--paper);
  background:#1d2028;
  border:1.5px solid #4d5564;
  border-radius:999px;
  box-shadow:none;
  font-family:var(--body);
  font-size:12px;
  outline:none;
}

#room .chat #roomChatInput::placeholder{color:#858d9c}

#room .chat #roomChatInput:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:-2px;
  border-color:var(--ink);
}

#room .chat form button{
  flex:none;
  min-height:32px;
  padding:5px 12px;
  color:var(--ink);
  background:var(--p2);
  border:2px solid var(--ink);
  border-radius:999px;
  box-shadow:2px 2px 0 #000;
  font-size:11px;
}

/* 카드 전체 폭의 하단 버튼 바 */
#room .room-actions{
  position:relative;
  z-index:2;
  margin:0 -22px;
  padding:13px 22px 9px;
  background:var(--paper);
  border-top:3px solid var(--ink);
}

#room .room-actions .row{
  display:flex;
  gap:10px;
}

#room .room-actions .mt2{margin-top:0}

#room #btnLeave,
#room #btnReady{
  min-height:43px;
  padding:9px 14px;
  font-size:15px;
}

#room #btnLeave{background:transparent}

#room #btnReady.pri{
  color:#1a1206;
  background:var(--p1);
  border-color:var(--ink);
}

#room #btnReady:not(.pri){background:#dad3c8}

#room #roomErr{
  min-height:16px;
  margin-top:5px;
  color:#b32020;
  font-family:var(--kr);
  font-size:11px;
  line-height:1.2;
  text-align:center;
}

@media (max-width:899px){
  #room{padding:12px}

  #room .card{
    width:calc(100vw - 24px);
    max-width:none;
    height:auto;
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    padding:16px 16px 0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:18px;
    box-shadow:7px 9px 0 var(--shadow);
    transform:none;
  }

  #room .room-main{
    min-height:0;
    flex:1 1 auto;
    display:block;
    overflow-y:auto;
  }

  #room .room-primary{
    min-height:auto;
    padding:0;
    overflow:visible;
  }

  #room .room-side{
    min-height:auto;
    padding:16px 0;
    display:block;
  }

  #room .chat{
    min-height:clamp(210px,26vh,230px);
    min-height:clamp(210px,26dvh,230px);
    max-height:320px;
  }

  #room .room-actions{
    flex:none;
    margin:0 -16px;
    padding:12px 16px 8px;
  }
}

@media (max-width:760px){
  #room #players .cq{gap:3px;font-size:10px}
  #room #players .cq svg{width:11px;height:11px}
  #room .cqHint{font-size:10px}
}

@media (max-width:430px){
  #quickWait{padding:12px}
  #quickWait .card{width:calc(100vw - 24px);padding:30px 22px 24px}
  #room .codebox #roomCode{font-size:36px}
  #room #roomVisibilityDesc,
  #room #roomMapDesc{font-size:10px}
  #room #players .pl{gap:8px;padding:9px 8px;font-size:12px}
  #room #players .nm{font-size:12px}
  #room #players .st{padding-inline:6px;font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  #quickWait .matchDots i{animation:none}
  #quickWait[data-matched] .card{animation:none}
  #quickWait button,
  #room button,
  #room .switch span,
  #room .switch span::after{transition:none}
}

/* 맵 표지: 작은 실제 필드 대신 이름·대표 형태·특징을 같은 순서로 읽는다. */
#room #roomMapOption{display:block}
#room #roomMapPeek{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:12px}
#room .roomMapCandidate{min-width:0;text-align:center;padding:7px 2px;background:var(--paper);border:1.5px solid #b8b1a6;border-radius:8px}
#room #roomMapPeek canvas{width:42px;height:42px;display:block;margin:0 auto 4px;border:0;box-shadow:none}
#room .roomMapCandidate strong{display:block;font:14px var(--kr)}
#room .roomMapCandidate small{display:block;margin-top:4px;font-size:10px;line-height:1.4;color:#525967}