/* 과학 방탈출 화면 모양: 레벨마다 바뀌는 색(--ui, --accent)을 받아 전체를 칠한다 */
:root { --ui: #e8edf3; --ui-ink: #1d2a38; --accent: #2f7de1; --panel: #ffffff; --r: 14px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  background: var(--ui); color: var(--ui-ink); overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
body[data-level="home"] { background: radial-gradient(circle at 30% 10%, #2c4a72, #101826 70%); color: #eef3fa; --panel: #18243a; --ui-ink: #eef3fa; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; }
.muted { opacity: .65; }

.screen { display: none; height: 100%; overflow-y: auto; padding: 16px; }
.screen.on { display: block; }
#game.screen.on { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

/* 공통 */
.card { background: var(--panel); border-radius: var(--r); padding: 20px; max-width: 640px; margin: 0 auto; box-shadow: 0 10px 30px #0003; }
.card h3 { margin: 6px 0 12px; }
.big { display: block; width: 100%; padding: 15px; border-radius: 12px; font-size: 18px; font-weight: 800; margin-top: 16px; }
.pri { background: var(--accent); color: #fff; }
.ghost { padding: 8px 14px; border-radius: 10px; background: #ffffff22; border: 1px solid #ffffff33; }
body:not([data-level="home"]) .ghost { background: #0000000d; border-color: #00000020; }
.top { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto 14px; }
.who { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.who small { opacity: .7; }
.av { display: inline-block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.av svg { width: 100%; height: 100%; display: block; }
.av.sm { width: 32px; height: 32px; }
.av.big { width: 96px; height: 96px; }
.stitle { text-align: center; margin: 4px 0 18px; }

/* 시작 */
.hero { text-align: center; padding: 6vh 0 3vh; }
.logo { font-size: clamp(40px, 9vw, 78px); font-weight: 900; letter-spacing: -2px; }
.logo span { color: #5fd4ff; text-shadow: 0 0 24px #5fd4ff88; }
.sub { opacity: .75; margin-top: 6px; }
.sub2 { margin-top: 2px; font-size: .95em; }
.proflist { display: grid; gap: 10px; }
.prof { display: flex; gap: 6px; }
.profgo { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #ffffff10; border: 1px solid #ffffff22; text-align: left; }
.profgo:hover { background: #ffffff1c; }
.profgo small { margin-left: auto; opacity: .7; }
.profdel { width: 44px; border-radius: 12px; background: #ffffff0c; opacity: .6; font-size: 20px; }
.profdel:hover { opacity: 1; background: #e2504c55; }
.ver { text-align: center; opacity: .45; font-size: 13px; margin-top: 20px; }

/* 만들기 */
.avgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avbtn { padding: 8px; border-radius: 14px; border: 2px solid transparent; background: #ffffff0c; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; }
.avbtn svg { width: 72px; height: 72px; }
.avbtn.on { border-color: #5fd4ff; background: #5fd4ff22; }
#nameIn { width: 100%; font-size: 20px; padding: 12px 14px; border-radius: 12px; border: 2px solid #ffffff33; background: #0b1424; color: #fff; outline: none; }
#nameIn:focus { border-color: #5fd4ff; }
#nameIn.bad { border-color: #ff5a5a; animation: shake .4s; }

/* 레벨 */
.lvlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; }
.lvcard { text-align: left; padding: 18px; border-radius: 16px; background: linear-gradient(160deg, var(--bg), var(--bg2)); color: var(--ink); display: grid; gap: 6px; box-shadow: 0 8px 24px #0005; border: 3px solid transparent; transition: transform .15s; }
.lvcard:not(:disabled):hover { transform: translateY(-3px); border-color: var(--c); }
.lvcard:disabled { opacity: .45; filter: grayscale(.4); }
.lvname { font-size: 26px; font-weight: 900; }
.lvdiff { color: var(--c); letter-spacing: 2px; }
.lvdesc { font-size: 14px; opacity: .8; min-height: 2.6em; }
.lvprog { font-weight: 700; }
.bar { height: 8px; border-radius: 4px; background: #0002; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--c); }

/* 단계 */
.rmlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; max-width: 1100px; margin: 0 auto; }
.rmcard { padding: 18px; border-radius: 14px; background: var(--panel); display: grid; gap: 6px; text-align: center; box-shadow: 0 6px 18px #0002; border: 3px solid transparent; }
.rmcard:not(:disabled):hover { border-color: var(--accent); }
.rmcard:disabled { opacity: .5; }
.rmcard.done { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.rmno { font-size: 13px; opacity: .7; }
.rmcard b { font-size: 19px; }
.rmcard .stars { color: #f2b30a; font-size: 20px; }
.rmcard small { opacity: .65; min-height: 1.2em; }

/* 게임 */
.gbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); box-shadow: 0 2px 10px #0002; z-index: 2; flex: none; }
.rname { font-weight: 700; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 8px; }
.grow { flex: 1; }
.timer { font-variant-numeric: tabular-nums; opacity: .8; white-space: nowrap; }
.gbtn { padding: 8px 12px; border-radius: 10px; background: #0000000f; font-weight: 700; white-space: nowrap; }
.gbtn:hover { background: #0000001c; }
.gbtn.off { opacity: .4; }
#stageWrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; background: #0000002a; }
#stage { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc((100vh - 170px) * 16 / 9)); max-height: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 40px #0006; background: #000; }
#scene, .scenesvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.spot { position: absolute; border-radius: 10px; }
@media (hover: hover) { .spot:hover { background: #ffffff1a; box-shadow: 0 0 0 2px #ffffff66 inset; } }
.scenename { position: absolute; left: 12px; top: 10px; font-size: 13px; padding: 4px 10px; border-radius: 20px; background: #0006; color: #fff; pointer-events: none; }
.nav { position: absolute; background: #0007; color: #fff; font-size: 20px; border-radius: 12px; padding: 12px 14px; opacity: .75; }
.nav:hover { opacity: 1; background: #000a; }
.navl { left: 8px; top: 50%; transform: translateY(-50%); }
.navr { right: 8px; top: 50%; transform: translateY(-50%); }
.navb { left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 15px; padding: 8px 18px; }
.say { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); width: min(92%, 760px); display: flex; gap: 12px; align-items: center; background: #fffffff2; color: #1d2a38; border-radius: 16px; padding: 10px 16px; box-shadow: 0 8px 24px #0005; cursor: pointer; animation: pop .2s; }
.say p { margin: 0; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.45; }
.say[hidden] { display: none; }
.cursoritem { position: absolute; left: 0; top: 0; width: 54px; height: 54px; pointer-events: none; filter: drop-shadow(0 4px 6px #0007); z-index: 5; }
.cursoritem svg { width: 100%; height: 100%; }
.invbar { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--panel); flex: none; box-shadow: 0 -2px 10px #0002; }
.hand { width: 190px; font-size: 13px; flex: none; }
.hand b { display: block; font-size: 15px; }
.hand button { margin-top: 4px; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: #0000001a; }
.inv { display: flex; gap: 8px; overflow-x: auto; flex: 1; padding: 2px; }
.slot { flex: none; width: 70px; height: 70px; border-radius: 12px; background: #0000000f; border: 2px solid #00000018; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; }
.slot svg { width: 44px; height: 44px; }
.slot span { font-size: 10px; line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot.empty { opacity: .45; }
.slot.held { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); transform: translateY(-3px); }

/* 창 */
.modal { position: fixed; inset: 0; background: #0009; display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; animation: fade .15s; }
.mbox { background: var(--panel); color: var(--ui-ink); border-radius: 18px; padding: 22px; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: 0 20px 60px #0008; }
.mbox.wide { width: min(820px, 100%); }
.mbox h2, .mbox h3 { margin: 0 0 12px; }
.mbox p { line-height: 1.6; }
.mbtns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.mbtns button { padding: 11px 20px; border-radius: 10px; background: #00000012; font-weight: 700; }
body[data-level="home"] .mbtns button { background: #ffffff18; }
.mbtns button.pri { background: var(--accent); color: #fff; }
.introbox { display: flex; gap: 16px; align-items: center; }
.intro { font-size: 16px; }
.tip { font-size: 13px; opacity: .7; border-top: 1px dashed #8885; padding-top: 10px; }
.insp { display: flex; justify-content: center; }
.insp svg { width: 160px; height: 160px; }
.hint { display: flex; gap: 10px; align-items: flex-start; }
.hint b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.clue { border: 1px solid #8884; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.clue h4 { margin: 0 0 6px; }
.clue svg { max-width: 100%; height: auto; display: block; }
.win { text-align: center; }
.win h2 { font-size: 34px; }
.bigstars { font-size: 46px; color: #f2b30a; letter-spacing: 6px; }
.bigstars i { font-style: normal; opacity: .35; }
.outro { text-align: left; background: #0000000c; border-radius: 12px; padding: 10px 14px; margin-top: 10px; }
.outro p { margin: 4px 0 0; }
.lvdone { font-weight: 800; color: var(--accent); }

/* 숫자판 */
.kpd { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kdisp { display: flex; gap: 8px; }
.kdisp span { width: 46px; height: 58px; border-radius: 10px; background: #1a2430; color: #6dffb0; font: 700 32px Consolas, monospace; display: flex; align-items: center; justify-content: center; }
.kkeys { display: grid; grid-template-columns: repeat(5, 58px); gap: 8px; }
.kkeys.four { grid-template-columns: repeat(5, 58px); }
.k { height: 54px; border-radius: 10px; background: #00000014; font-size: 22px; font-weight: 800; }
.k:active { transform: scale(.94); }
.kdel { font-size: 15px; }

/* 퍼즐 창에서 쓰는 공통 조각 */
.pz svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.pzrow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.dial { width: 110px; padding: 10px; border-radius: 14px; background: #00000010; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; }
.dial i { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #0003; display: block; }
.tog { width: 96px; height: 96px; border-radius: 16px; font-size: 26px; font-weight: 900; background: #00000014; border: 3px solid #0002; }
.tog.on { background: var(--accent); color: #fff; box-shadow: 0 0 18px var(--accent); }
.msgline { text-align: center; min-height: 1.5em; font-weight: 700; }

/* 알림 */
.toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; z-index: 30; pointer-events: none; }
.toast { background: #1d2a38ee; color: #fff; padding: 9px 16px; border-radius: 22px; font-weight: 700; font-size: 14px; animation: pop .2s; transition: opacity .4s, transform .4s; }
.toast.out { opacity: 0; transform: translateY(-8px); }
.bump { animation: bump .5s; }
.shake { animation: shake .4s; }
@keyframes pop { from { transform: translateX(-50%) scale(.9); opacity: 0; } }
.toast { animation-name: tpop; }
@keyframes tpop { from { transform: scale(.9); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes bump { 30% { transform: scale(1.08); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.rotate { display: none; }
@media (max-width: 700px) {
  .rname, #gName, .timer { display: none; }
  .hand { width: 92px; font-size: 11px; }
  .slot { width: 58px; height: 58px; }
  .slot svg { width: 36px; height: 36px; }
  .avgrid { grid-template-columns: repeat(4, 1fr); }
  .avbtn svg { width: 54px; height: 54px; }
  .kkeys, .kkeys.four { grid-template-columns: repeat(4, 54px); }
  #stage { width: 100%; }
  .nav { padding: 8px 10px; font-size: 16px; }
}
@media (max-height: 500px) {
  .gbar { padding: 4px 10px; }
  .invbar { padding: 4px 10px; }
  .slot { width: 52px; height: 52px; }
  .slot span { display: none; }
  #stage { width: min(100%, calc((100vh - 120px) * 16 / 9)); }
}

/* 가로로 눕힌 휴대폰: 가방을 오른쪽 세로 줄로 옮겨 방 그림을 크게 */
@media (max-height: 500px) and (orientation: landscape) {
  #game.screen.on { display: grid; grid-template-columns: 1fr 76px; grid-template-rows: auto 1fr; }
  .gbar { grid-column: 1 / 3; }
  #stageWrap { grid-column: 1; grid-row: 2; padding: 4px; }
  .invbar { grid-column: 2; grid-row: 2; flex-direction: column; padding: 4px; overflow-y: auto; overflow-x: hidden; box-shadow: -2px 0 10px #0002; min-height: 0; }
  .inv { flex-direction: column; overflow-y: auto; overflow-x: hidden; align-items: center; }
  .hand { width: 100%; font-size: 10px; text-align: center; }
  .hand .muted { display: none; }
  .hand b { font-size: 11px; }
  #stage { width: min(100%, calc((100vh - 56px) * 16 / 9)); }
  .nav { padding: 6px 9px; font-size: 14px; }
  .navb { font-size: 12px; padding: 5px 12px; }
  .say { bottom: 40px; padding: 6px 10px; }
  .say .av { width: 30px; height: 30px; }
}

/* ===== 2판 다듬기: 유리 느낌 판, 빛나는 제목, 카드 아이콘 ===== */
body[data-level="home"] {
  background:
    radial-gradient(1200px 600px at 20% -10%, #3b6fb3aa, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #5b3fa6aa, transparent 60%),
    linear-gradient(160deg, #0c1424, #101c33 50%, #0b1220);
}
body[data-level="home"]::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 32% 78%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 14%, #fff, transparent), radial-gradient(1px 1px at 76% 62%, #fff, transparent),
    radial-gradient(2px 2px at 88% 30%, #9fe6ff, transparent), radial-gradient(1px 1px at 44% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 6% 70%, #cdb8ff, transparent), radial-gradient(1px 1px at 66% 88%, #fff, transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { to { opacity: .25; } }
.logo-icon { font-size: 54px; filter: drop-shadow(0 0 18px #5fd4ffaa); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.logo { background: linear-gradient(180deg, #ffffff, #b9d6ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px #3a7bd588); }
.logo span { background: linear-gradient(90deg, #5fd4ff, #a78bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
body[data-level="home"] .card { background: #ffffff0f; border: 1px solid #ffffff22; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pri { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent)); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 #ffffff55; }
.big.pri:hover { filter: brightness(1.08); }
.lvcard { position: relative; overflow: hidden; box-shadow: 0 12px 30px #0006, inset 0 1px 0 #ffffff55; }
.lvcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff40 45%, transparent 60%); transform: translateX(-100%); transition: transform .6s; pointer-events: none; }
.lvcard:not(:disabled):hover::after { transform: translateX(100%); }
.lvicon { position: absolute; right: 14px; top: 10px; font-size: 44px; opacity: .9; filter: drop-shadow(0 4px 8px #0004); }
.rmcard { box-shadow: 0 8px 22px #0002, inset 0 1px 0 #ffffff80; }
.gbar { background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #0000001a; }
.gbtn { border: 1px solid #0000001a; box-shadow: inset 0 1px 0 #ffffff66; }
#stageWrap { background: radial-gradient(circle at 50% 40%, #00000010, #00000040); }
#stage { border-radius: 14px; box-shadow: 0 18px 50px #0007, 0 0 0 1px #ffffff22; }
.nav { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: #0a101a8c; border: 1px solid #ffffff2a; }
.say { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: #ffffffe8; border: 1px solid #ffffff; }
.invbar { background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid #0000001a; }
.slot { background: linear-gradient(180deg, #ffffff, #eef2f6); border: 1px solid #00000018; box-shadow: inset 0 -3px 0 #0000000d, 0 2px 6px #0000001a; transition: transform .12s; }
.slot:not(.empty):hover { transform: translateY(-2px); }
.slot.empty { background: #0000000a; box-shadow: inset 0 2px 6px #00000014; }
.mbox { box-shadow: 0 30px 80px #000a, inset 0 1px 0 #ffffff80; animation: mpop .18s ease-out; }
@keyframes mpop { from { transform: scale(.94); opacity: 0; } }
.k { background: linear-gradient(180deg, #ffffff, #e6ebf0); border: 1px solid #00000018; box-shadow: 0 3px 0 #00000022; }
.k:active { transform: translateY(2px); box-shadow: 0 1px 0 #00000022; }
.kdisp span { box-shadow: inset 0 2px 8px #000a; text-shadow: 0 0 10px #6dffb0; }

/* 3판: 가방 칸, 물건 메뉴, 손에 든 것 띠 */
.invbar { gap: 14px; padding: 10px 16px; border-top: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.baglabel { flex: none; display: flex; flex-direction: column; font-weight: 800; font-size: 16px; color: var(--ui-ink); }
.baglabel small { font-weight: 500; font-size: 11px; opacity: .65; margin-top: 2px; white-space: nowrap; }
.slot { width: 76px; height: 76px; border: 2px solid #00000022; cursor: pointer; }
.slot.empty { border-style: dashed; cursor: default; }
.slot span { font-size: 11px; font-weight: 700; }
.slot.mixing { border-color: #e0a020; box-shadow: 0 0 0 3px #e0a02066; transform: translateY(-3px); }
.slot.pickable { animation: pick 1s ease-in-out infinite; }
@keyframes pick { 50% { box-shadow: 0 0 0 4px #e0a02055; } }
.itemmenu { position: fixed; z-index: 15; display: flex; flex-direction: column; gap: 6px; min-width: 150px; padding: 10px; border-radius: 14px; background: var(--panel); color: var(--ui-ink); box-shadow: 0 10px 30px #0006; border: 1px solid #0000001a; animation: mpop .15s; }
.itemmenu[hidden] { display: none; }
.itemmenu b { font-size: 14px; text-align: center; padding-bottom: 4px; border-bottom: 1px solid #0000001a; }
.itemmenu button { padding: 9px 12px; border-radius: 10px; font-size: 15px; font-weight: 700; background: #0000000d; text-align: left; }
.itemmenu button:hover { background: #0000001a; }
.itemmenu button.pri { background: var(--accent); color: #fff; }
.holdbar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; max-width: 92%; padding: 6px 8px 6px 10px; border-radius: 14px; background: #fffffff2; color: #1d2a38; box-shadow: 0 6px 20px #0005; border: 2px solid var(--accent); animation: pop .2s; }
.holdbar[hidden] { display: none; }
.holdbar svg { width: 38px; height: 38px; flex: none; }
.holdbar p { margin: 0; font-size: clamp(13px, 1.4vw, 16px); line-height: 1.35; }
.holdbar button { flex: none; padding: 7px 12px; border-radius: 10px; font-weight: 700; background: #1d2a38; color: #fff; }
@media (max-height: 500px) {
  .baglabel small { display: none; }
  .slot { width: 56px; height: 56px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .baglabel { font-size: 12px; text-align: center; }
}
@media (max-width: 1000px) { .baglabel small { display: none; } }

/* ===== 4판: 첫 화면, 과목, 레벨 고르기 화면을 밝게 ===== */
body[data-level="home"] {
  background:
    radial-gradient(1200px 600px at 15% -10%, #cfe6ff, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #e6dcff, transparent 60%),
    linear-gradient(160deg, #f6f9ff, #eef4fb 50%, #f7f3ff);
  color: #1d2a38; --panel: #ffffff; --ui-ink: #1d2a38;
}
body[data-level="home"]::before { display: none; }
body[data-level="home"] .card { background: #ffffffd9; border: 1px solid #00000014; box-shadow: 0 10px 30px #1d2a3814; }
body[data-level="home"] .ghost { background: #ffffff; border-color: #00000020; }
body[data-level="home"] .profgo { background: #f3f7fc; border-color: #00000018; }
body[data-level="home"] .profgo:hover { background: #e6eff9; }
body[data-level="home"] .profdel { background: #f3f7fc; }
body[data-level="home"] .avbtn { background: #f3f7fc; }
body[data-level="home"] .avbtn.on { border-color: #2f7de1; background: #2f7de11a; }
body[data-level="home"] #nameIn { background: #ffffff; color: #1d2a38; border-color: #00000025; }
body[data-level="home"] #nameIn:focus { border-color: #2f7de1; }
body[data-level="home"] .mbtns button { background: #00000012; }
body[data-level="home"] .logo { background: linear-gradient(180deg, #1d2a38, #2f5d9a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px #2f7de133); }
body[data-level="home"] .logo span { background: linear-gradient(90deg, #1e8fd8, #7a5ae0); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-level="home"] .logo-icon { filter: drop-shadow(0 6px 14px #2f7de155); }
body[data-level="home"] .lvcard, body[data-level="home"] .sbcard { box-shadow: 0 8px 22px #1d2a3822, inset 0 1px 0 #ffffff80; }

/* ===== 첫 화면 저장 안내와 제작 정보 ===== */
.savenote { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #2f7de112; font-size: 13px; line-height: 1.55; color: #3a4a5c; }
.credit { max-width: 640px; margin: 18px auto 0; text-align: center; font-size: 13px; line-height: 1.7; color: #4a5a6c; }
.credit p { margin: 0; }
.credit a { color: #2f7de1; text-decoration: none; }
.credit a:hover { text-decoration: underline; }

/* ===== 0.6.0 점수판 ===== */
.rank { max-width: 640px; margin: 16px auto 0; background: #ffffffd9; border: 1px solid #00000014; border-radius: var(--r); padding: 14px 16px; box-shadow: 0 10px 30px #1d2a3814; }
.rank:empty { display: none; }
.rankhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ghost.sm { padding: 6px 10px; font-size: 13px; }
.rankbtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.board tr.mine td { background: #fff4cc; }
#nickIn { width: 100%; font-size: 18px; padding: 10px 12px; border: 2px solid #c9d6e6; border-radius: 10px; box-sizing: border-box; }
.ranklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ranklist li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #f3f7fc; }
.ranklist li:first-child { background: linear-gradient(90deg, #fff4cc, #f3f7fc); }
.ranklist li.mine { outline: 2px solid #f0b400; }
.ranklist li.muted { background: none; justify-content: center; }
.ranklist small { opacity: .7; }
.ranklist em { margin-left: auto; font-style: normal; font-weight: 900; color: #2f7de1; }
.rno { width: 22px; text-align: center; font-weight: 900; color: #8a6a00; }
.board { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 10px; }
.board th, .board td { padding: 7px 6px; border-bottom: 1px solid #0000001a; text-align: left; vertical-align: middle; }
.board th { font-size: 12px; opacity: .7; white-space: nowrap; }
.board td.pts { font-weight: 900; color: #2f7de1; white-space: nowrap; }
.board .av.sm { vertical-align: middle; }
.small { font-size: 13px; }
.gain { font-size: 22px; font-weight: 900; color: #e08a00; margin: 6px 0; }
.gain small { display: block; font-size: 13px; font-weight: 600; color: inherit; opacity: .7; }

/* ===== 0.6.0 천장 보기, 크게 보기 ===== */
.navu { left: 50%; top: 10px; transform: translateX(-50%); font-size: 15px; padding: 8px 18px; }
.zoomx { position: absolute; right: 10px; top: 10px; z-index: 7; padding: 10px 14px; border-radius: 12px; background: #1d2a38e6; color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 4px 14px #0006; }
#stage.zoomed { box-shadow: 0 0 0 3px var(--accent), 0 18px 50px #0007; }
#stage.zoomed .scenename { display: none; }

/* ===== 0.6.0 휴대폰 ===== */
/* 세로로 든 휴대폰: 게임 중에는 돌려 달라는 화면 */
@media (orientation: portrait) and (max-width: 560px) {
  #game.on ~ .rotate { display: flex; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; background: #eef4fbf2; color: #1d2a38; text-align: center; padding: 24px; }
  .rotbox b { display: block; font-size: 22px; margin: 12px 0 6px; }
  .rotbox p { margin: 0; opacity: .75; }
  .rotphone { font-size: 64px; animation: rot 1.8s ease-in-out infinite; }
}
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
/* 가로로 눕힌 휴대폰: 방 그림을 화면 높이 가득, 단추와 가방은 오른쪽 줄 */
@media (max-height: 560px) and (orientation: landscape) {
  #game.screen.on { display: grid; grid-template-columns: 1fr 92px; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; }
  .gbar { grid-column: 2; grid-row: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-bottom: 1px solid #0000001a; box-shadow: none; }
  .gbar .av, .gbar .grow, .rname, #gName, .timer { display: none; }
  .gbtn { padding: 6px 0; width: 40px; font-size: 17px; text-align: center; }
  .gbtn span { display: none; }
  #stageWrap { grid-column: 1; grid-row: 1 / 3; padding: 0; background: #0000; }
  .invbar { grid-column: 2; grid-row: 2; }
  #stage { width: min(100%, calc(100dvh * 16 / 9)); border-radius: 0; box-shadow: none; }
  .zoomx { padding: 7px 10px; font-size: 13px; }
  .navu { top: 6px; font-size: 12px; padding: 5px 12px; }
  .baglabel { display: none; }
}
.profgo b, .ranklist b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.profgo small { white-space: nowrap; }
.visits { text-align: center; font-size: 14px; font-weight: 700; color: #4a5a6c; margin: 14px 0 0; }
.lvtop { font-size: 13px; font-weight: 800; opacity: .85; }
.mbox h4 { margin: 14px 0 4px; }
.landnote { display: inline-block; max-width: 640px; margin: 14px 16px 0; padding: 10px 14px; border-radius: 12px; background: #fff4d6; border: 1px solid #f0c66a; color: #5a4210; font-size: 14px; line-height: 1.5; }
#stage.holding .navu { top: 74px; }

/* 0.6.2: 창 안 안내문, 휴대폰 가로에서 창을 화면 높이에 맞춘다 */
.mmsg { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: #fff4d6; border: 1px solid #f0c66a; color: #5a4210; font-weight: 700; text-align: center; line-height: 1.45; }
@media (max-height: 560px) and (orientation: landscape) {
  .modal { padding: 6px; }
  .mbox { width: min(760px, 100%); max-height: calc(100dvh - 12px); padding: 10px 16px 0; border-radius: 14px; }
  .mbox h3 { margin: 0 0 4px; font-size: 16px; }
  .mbox p:not([class]) { margin: 4px 0; line-height: 1.4; font-size: 14px; }
  .mbtns { position: sticky; bottom: 0; margin-top: 8px; padding: 8px 0 10px; background: var(--panel); }
  .mbtns button { padding: 8px 18px; }
  .mmsg { margin-top: 6px; padding: 5px 10px; font-size: 14px; }
  .kpd { flex-direction: row; justify-content: center; align-items: center; gap: 16px; }
  .kdisp span { width: 36px; height: 44px; font-size: 24px; }
  .kkeys, .kkeys.four { grid-template-columns: repeat(6, 46px); gap: 5px; }
  .k { height: 40px; font-size: 18px; }
  .kdel { font-size: 13px; }
}

/* 0.9.1: 선생님 관리 모드의 줄 지우기 단추, 비밀번호 칸 */
.admdel { padding: 4px 8px; border-radius: 8px; background: #d6453d22; font-size: 16px; }
#admIn { width: 100%; padding: 10px 12px; font-size: 18px; border-radius: 10px; border: 2px solid #0002; }
/* 0.9.1: 손가락으로 할 때 든 도구를 방 안에 크게 띄운다 */
.cursoritem.touch { pointer-events: auto; cursor: pointer; width: 72px; height: 72px; padding: 8px; border-radius: 50%; background: #ffffffe8; border: 3px solid var(--accent); box-shadow: 0 6px 16px #0006; transition: transform .15s; }
.cursoritem.touch::after { content: '✋'; position: absolute; right: -10px; bottom: -8px; font-size: 26px; }
/* 0.9.1: 과목 카드는 위아래를 줄인다 */
.sbcard { padding: 10px 14px; gap: 2px; }
.sbcard .lvname { font-size: 21px; }
.sbcard .lvdesc { font-size: 13px; min-height: 0; }
.sbcard .lvicon { font-size: 32px; top: 8px; }
.sbcard .bar { height: 6px; margin-top: 2px; }

/* 학교 서버 판: 로그인 칸, 복구 코드, 관리 표 */
.slogin { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin: 0 auto; }
.slogin h3 { margin: 0 0 4px; }
.slogin input, .mbox input[type="password"], .mbox #uNick, .mbox #rNick, .mbox #rCode { width: 100%; box-sizing: border-box; margin: 4px 0; }
.srow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0 0; }
.scode { font-size: 2rem; font-weight: 800; letter-spacing: .15em; text-align: center; margin: 10px 0; user-select: all; }
.slink { word-break: break-all; font-size: .9rem; user-select: all; }
.sgrid { max-height: 220px; overflow-y: auto; }
.aacts { white-space: nowrap; }
.aacts button { font-size: .8rem; padding: 4px 6px; margin: 1px; }
.slogin input, #uNick, #uPw, #uPw2, #rNick, #rCode, #rPw, #lPw, #lPw2, #aPw, #cOld, #cNew { font-size: 18px; padding: 10px 12px; border: 2px solid #c9d6e6; border-radius: 10px; background: #fff; color: #1d2a38; }