/* 문주의 수학 방탈출 — 어두운 돌방, 그 위에 문제 패널 하나 */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0f1219; color: #eef1f8;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  -webkit-text-size-adjust: 100%;
}
#room { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#hudBtns { position: fixed; top: 10px; right: 12px; z-index: 6; display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .2s; }
body.playing #hudBtns { opacity: 1; pointer-events: auto; }
.iconbtn {
  width: 38px; height: 38px; border-radius: 11px; font-size: 16px; cursor: pointer;
  background: rgba(12,16,28,.75); border: 1px solid rgba(255,255,255,.15); color: #eef1f8;
}
.iconbtn:hover { background: rgba(40,50,80,.9); }

/* 문제 패널 */
#puzzle {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 5;
  width: min(620px, calc(100vw - 24px)); display: none;
  background: rgba(16,20,32,.95); border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px; padding: 16px 18px 18px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
#pRoom { font-size: 11.5px; letter-spacing: .06em; color: #8ea0c8; margin-bottom: 8px; }
#pText { font-size: 19px; line-height: 1.65; font-weight: 600; margin-bottom: 14px; }
#pText b { color: #ffd98a; }

/* 분수 표기 — 6학년 눈에는 3/4 보다 위아래 분수가 훨씬 빨리 읽힌다 */
.frac { display: inline-grid; vertical-align: middle; text-align: center; margin: 0 3px; }
.frac b { font-weight: 700; border-bottom: 2px solid currentColor; padding: 0 5px; line-height: 1.25; color: inherit; }
.frac i { font-style: normal; padding: 0 5px; line-height: 1.25; }

#pInput { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#pInput input {
  width: 128px; font-size: 20px; font-weight: 700; text-align: center; padding: 9px 10px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
}
#pInput input:focus { outline: 2px solid #6ea8ff; border-color: transparent; }
.fracin { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.fracin input { width: 96px; }
.fracin .bar { width: 104px; height: 2px; background: rgba(255,255,255,.6); }
.unit { color: #9fb0d4; font-size: 14px; }

.row { display: flex; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
.bigbtn, .graybtn {
  border: 0; border-radius: 11px; padding: 11px 20px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.bigbtn { background: linear-gradient(180deg, #6ea8ff, #4b7fe0); color: #08101f; }
.graybtn { background: rgba(255,255,255,.09); color: #dce4f5; border: 1px solid rgba(255,255,255,.15); }
.graybtn:hover { background: rgba(255,255,255,.16); }

#pMsg { margin-top: 11px; font-size: 14px; min-height: 20px; }
#pMsg .ok { color: #6fd6a8; font-weight: 700; }
#pMsg .no { color: #ffb2a6; }
.hintline {
  font-size: 13.5px; color: #cfd8ee; background: rgba(110,168,255,.10);
  border-left: 3px solid #6ea8ff; border-radius: 0 8px 8px 0; padding: 7px 11px; margin-top: 7px; line-height: 1.6;
}
.hintline b { color: #9fc4ff; margin-right: 6px; }

/* 화면(메뉴·클리어) */
.screen {
  position: fixed; inset: 0; z-index: 10; display: none;
  flex-direction: column; align-items: center; justify-content: flex-start;
  background: radial-gradient(120% 90% at 50% 0%, #1a2138 0%, #0f1219 70%);
  background-color: #0f1219; padding: 24px 18px; overflow-y: auto; text-align: center;
}
/* ⚠️가운데 정렬만 하면 내용이 길어질 때 위쪽(제목)이 잘리고 스크롤도 안 된다 */
.screen::before, .screen::after { content: ''; display: block; flex: 1 0 8px; }
.screen h1 { font-size: clamp(1.5rem, 4.4vw, 2.4rem); margin: 0 0 4px; font-weight: 800; letter-spacing: -.02em; }
.screen h1 span { display: block; font-size: 12px; letter-spacing: .26em; color: #8ea0c8; font-weight: 600; margin-top: 6px; }
.screen h2 { font-size: 1.45rem; margin: 0 0 8px; }
.lead { color: #9fb0d4; font-size: 14px; margin: 8px 0 18px; max-width: 620px; line-height: 1.65; }

.roomlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 9px; width: min(780px, 96vw); margin-bottom: 16px; }
.roombtn {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 11px; text-align: left;
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11); color: #eef1f8;
}
.roombtn:hover { background: rgba(120,160,255,.16); border-color: rgba(140,180,255,.45); }
.roombtn.done { border-color: rgba(111,214,168,.45); }
.roombtn .no { grid-row: 1 / 4; align-self: center; font-size: 20px; font-weight: 800; color: #6ea8ff; width: 22px; }
.roombtn .nm { font-weight: 700; font-size: 15.5px; }
.roombtn .de { grid-column: 2; font-size: 12px; color: #93a4c8; }
.roombtn .st { grid-column: 2; font-size: 11.5px; color: #6f81a6; margin-top: 3px; }
.roombtn.done .st { color: #6fd6a8; }

.help { color: #8ea0c8; font-size: 12.5px; line-height: 1.9; margin-top: 12px; max-width: 640px; }
.help b { color: #cfe1ff; }
.credit { color: #5d6c8e; font-size: 11px; margin-top: 14px; }
#cStats { color: #b7c4de; font-size: 14px; line-height: 1.9; margin: 6px 0 16px; }

@media (max-width: 560px) {
  .roomlist { grid-template-columns: 1fr; }
  .lead { display: none; }
  #pText { font-size: 17px; }
  #pInput input { width: 108px; }
}