/* games.css — public/index.html 에서 분리 (로드 순서가 의존 순서다) */
/* ===== 공용 게임 레이아웃 ===== */
.game-wrap { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.game-wrap h2 { font-size: 18px; color: #7aa2f7; }
.hint { font-size: 13px; color: #9aa0a6; text-align: center; }
textarea, .game-wrap input[type=text] {
background: #2c313a; border: 1px solid #3a4150; color: #e8eaed;
padding: 8px 10px; border-radius: 6px; font-family: inherit; font-size: 14px;
}
canvas { background: #22262e; border-radius: 12px; }
.result-big { font-size: 22px; font-weight: bold; color: #e0af68; min-height: 30px; text-align: center; }
/* 룰렛 */
#roulette-edit { width: 260px; height: 130px; resize: vertical; }
/* 사다리 */
.ladder-row { display: flex; gap: 10px; }
.ladder-row input { width: 100px; text-align: center; }
/* 반응속도 */
#react-box {
width: min(90vw, 400px); height: 220px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: bold; cursor: pointer; user-select: none;
background: #2c313a; transition: background .1s;
}
#react-box.wait { background: #8c4351; }
#react-box.go { background: #33635c; }
/* 숫자야구 */
/* 2048 */
#g2048-board {
display: grid; grid-template-columns: repeat(4, 70px); grid-template-rows: repeat(4, 70px);
gap: 8px; background: #2c313a; padding: 8px; border-radius: 10px;
}
.t2048 {
display: flex; align-items: center; justify-content: center;
border-radius: 6px; font-weight: bold; font-size: 24px; background: #3a4150;
}
/* 캐치마인드 — 채팅 제외 영역을 캔버스가 꽉 채움 (여백 없음) */
#tab-catch .game-wrap { padding: 6px; gap: 5px; overflow: hidden; }
/* 미니맵은 스크롤되는 뷰포트 밖에 둔다 — 안에 두면 그림을 따라 같이 흘러간다 */
#cm-canvas-frame { position: relative; flex: 1; width: 100%; min-height: 0; display: flex; }
#cm-canvas-viewport {
flex: 1; min-width: 0; min-height: 0;
overflow: auto; border: 1px solid #3a4150; border-radius: 10px; background: #fafafa;
}
#cm-minimap {
position: absolute; right: 10px; bottom: 10px; width: 192px; height: 108px;
border: 1px solid #3a4150; border-radius: 6px; background: #fafafa;
box-shadow: 0 3px 12px rgba(0,0,0,.5); pointer-events: none; opacity: .92;
}
#cm-minimap[hidden] { display: none; }
@media (max-width: 620px) { #cm-minimap { width: 116px; height: 65px; right: 6px; bottom: 6px; } }
#cm-canvas-space { position: relative; width: 100%; height: 100%; }
/* sticky 라 스크롤해도 캔버스는 보이는 자리에 붙어 있다 — 내용만 바꿔 그린다 */
#cm-cv { display: block; position: sticky; top: 0; left: 0; background: #fafafa; touch-action: none; }
#cm-zoom-value { min-width: 42px; text-align: center; color: #c0caf5; font-size: 13px; }
.cm-tool {
background: #2c313a; border: 1px solid #3a4150; color: #e8eaed;
padding: 5px 10px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 13px;
}
.cm-tool:hover { background: #3a4150; }
.cm-tool.on { background: #7aa2f7; border-color: #7aa2f7; color: #1a1d23; font-weight: bold; }
#cm-color {
width: 44px; height: 32px; padding: 2px; border: 1px solid #3a4150;
border-radius: 7px; background: #2c313a; cursor: pointer;
}
#cm-status { font-size: 15px; font-weight: bold; color: #e0af68; min-height: 22px; text-align: center; }
#cm-timerbar {
width: min(480px, 90%); height: 6px; background: #2c313a;
border-radius: 3px; overflow: hidden;
}
#cm-timerbar[hidden] { display: none; }
#cm-timerfill {
height: 100%; width: 100%; background: #7aa2f7; border-radius: 3px;
transition: width .25s linear, background-color .3s;
}
#cm-word { font-size: 20px; font-weight: bold; letter-spacing: 4px; color: #9ece6a; min-height: 26px; }
#cm-lobby, #cm-tools, #cm-draw-tools, #cm-zoom, #cm-choices {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center;
}
#cm-tools { width: 100%; }
#cm-players { color: #9ece6a; font-size: 13px; }
#cm-choices[hidden] { display: none; }
#cm-draw-tools[hidden], #cm-guessbar[hidden] { display: none; }
#cm-choices .primary { min-width: 100px; }
#cm-palette { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cm-color {
width: 26px; height: 26px; border-radius: 50%; border: 2px solid #3a4150;
cursor: pointer; transition: transform .12s, border-color .12s;
}
.cm-color.on { border-color: #e8eaed; transform: scale(1.15); box-shadow: 0 0 0 2px #15181e; }
#cm-width-label { min-width: 40px; color: #c0caf5; font-size: 13px; }
#cm-log { font-size: 13px; line-height: 1.7; text-align: center; max-height: 130px; overflow-y: auto; width: min(90vw, 480px); }
#cm-log .ok { color: #9ece6a; font-weight: bold; }
@media (max-width: 650px) {
#cm-tools, #cm-lobby { width: 100%; }
#cm-palette { order: 3; width: 100%; }
#inputbar { flex-wrap: wrap; }
#text { min-width: 150px; }
}
/* 라이어 게임 */
#lg-lobby { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
#lg-guessbar[hidden], #lg-timerbar[hidden] { display: none; }
#lg-status { font-size: 15px; font-weight: bold; color: #e0af68; min-height: 22px; text-align: center; }
/* 좌석 칩: 대기 중엔 참가자, 라운드 중엔 발언 순서 · 투표 단계엔 그대로 투표 버튼이 된다 */
#lg-seats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#lg-seats:empty { display: none; }
.lg-seat {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
background: #2c313a; border: 1px solid #3a4150; color: #c0caf5;
font-size: 13px; font-family: inherit; line-height: 1.4;
transition: transform .12s, border-color .12s, background .12s, opacity .2s;
}
.lg-seat .n { color: #565f89; font-size: 11px; }
.lg-seat.me { color: #e8eaed; font-weight: bold; }
.lg-seat.done { opacity: .4; }
.lg-seat.now {
background: #33406b; border-color: #7aa2f7; color: #e8eaed; opacity: 1;
box-shadow: 0 0 0 3px rgba(122,162,247,.18);
}
.lg-seat.pick { cursor: pointer; }
.lg-seat.pick:hover { border-color: #f7768e; transform: translateY(-1px); }
.lg-seat.chosen, .lg-seat.accused { background: #4a2b35; border-color: #f7768e; color: #ffb3c0; }
.lg-seat .ok { color: #9ece6a; }
.lg-empty { color: #9aa0a6; font-size: 13px; }
#lg-card {
font-size: 20px; font-weight: bold; color: #9ece6a; text-align: center; line-height: 1.35;
padding: 12px 24px; border-radius: 12px; background: #22262e; border: 1px solid #2c313a;
}
#lg-card:empty { display: none; }
#lg-card.liar { color: #f7768e; border-color: #4a2b35; }
#lg-card .sub { display: block; font-size: 12px; font-weight: normal; color: #9aa0a6; margin-top: 5px; }
#lg-timerbar { width: min(480px, 90%); height: 6px; background: #2c313a; border-radius: 3px; overflow: hidden; }
#lg-timerfill {
height: 100%; width: 100%; background: #7aa2f7; border-radius: 3px;
transition: width .25s linear, background-color .3s;
}
#lg-timerbar.warn #lg-timerfill { background: #f7768e; }
#lg-chat {
width: min(90vw, 480px); max-height: 200px; overflow-y: auto; background: #22262e;
border-radius: 10px; padding: 8px 12px; font-size: 14px; line-height: 1.6; text-align: left;
}
#lg-chat:empty { display: none; }
#lg-chat b { color: #7aa2f7; }
#lg-chat .turn { color: #565f89; font-size: 12px; }
#lg-saybar[hidden] { display: none; }
#lg-saybar {
padding: 8px 10px; border-radius: 12px; background: rgba(122,162,247,.1);
box-shadow: 0 0 0 1px #7aa2f7 inset;
}
#lg-say { width: min(70vw, 300px); }
#lg-log { font-size: 13px; line-height: 1.8; text-align: center; max-height: 170px; overflow-y: auto; width: min(90vw, 480px); }
#lg-log .ok { color: #9ece6a; font-weight: bold; }
#lg-log .bad { color: #f7768e; font-weight: bold; }