/* ============ 오늘도 파딱은 운다 — style ============ */
:root {
  --dc: #3b4890;
  --dc-dark: #29367c;
  --dc-light: #eef0f8;
  --line: #d9dbe6;
  --blue: #6fa8ff;
  --blue2: #9cc8ff;
  --sky: #cfe6ff;
  --orange: #ff9a3c;
  --mint: #4fd8b8;
  --red: #ff5a6a;
  --green: #39c07a;
  --yellow: #ffd23c;
  --ink: #1d2233;
  --muted: #7a8196;
  --vn-bg: rgba(14, 22, 46, 0.86);
  --font: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --font-cute: 'Jua', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-soft: 'Gowun Dodum', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05070d; overflow: hidden; }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; }
button { font-family: inherit; cursor: pointer; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#game { position: relative; width: 1280px; height: 720px; overflow: hidden; background: #0b1020; transform-origin: center center; flex: none; }
.layer { position: absolute; inset: 0; }
#overlay { pointer-events: none; }
#overlay > * { pointer-events: auto; }
.hidden { display: none !important; }

/* ---------- scene / VN ---------- */
#bg { position: absolute; inset: 0; background: #000 center/cover no-repeat; transition: opacity .6s; }
#bg .bgimg { position: absolute; inset: 0; background: center/cover no-repeat; transition: opacity .7s; }
#sprites { position: absolute; inset: 0; pointer-events: none; }
.sprite { position: absolute; bottom: -8px; height: 700px; transform: translateX(-50%); transition: left .5s ease, opacity .4s, filter .3s, transform .3s; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.sprite.dim { filter: brightness(.62) saturate(.8) drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.sprite.enter { opacity: 0; transform: translateX(-50%) translateY(18px); }
.sprite.bounce { animation: sprBounce .35s ease; }
@keyframes sprBounce { 0%{transform:translateX(-50%) translateY(0)} 40%{transform:translateX(-50%) translateY(-14px)} 100%{transform:translateX(-50%) translateY(0)} }
#cg { position: absolute; inset: 0; background: #000 center/cover no-repeat; opacity: 0; pointer-events: none; transition: opacity .8s; }
#cg.on { opacity: 1; }

#vnbox { position: absolute; left: 40px; right: 40px; bottom: 22px; height: 170px; background: var(--vn-bg); border: 2px solid rgba(160, 200, 255, .35); border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 30px rgba(100,160,255,.08); color: #eef4ff; padding: 30px 36px 20px 36px; cursor: pointer; backdrop-filter: blur(4px); }
#vnbox.hasface { padding-left: 160px; }
#vn-face { position: absolute; left: 18px; bottom: 16px; width: 126px; height: 126px; border-radius: 16px; background: #223 center/cover; border: 2px solid rgba(160,200,255,.45); display: none; }
#vnbox.hasface #vn-face { display: block; }
#vn-name { position: absolute; top: -20px; left: 30px; background: linear-gradient(135deg, #5e8fe8, #7fb6ff); color: #fff; font-weight: 700; font-size: 20px; padding: 5px 22px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.35); letter-spacing: .5px; }
#vnbox.hasface #vn-name { left: 150px; }
#vn-name:empty { display: none; }
#vn-name small { font-size: 12px; font-weight: 500; opacity: .85; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.2); }
#vn-text { font-size: 23px; line-height: 1.6; white-space: pre-wrap; word-break: keep-all; font-family: var(--font-soft); font-weight: 700; }
#vn-text.nar { color: #d7deef; font-style: normal; font-weight: 400; }
#vn-text.think { color: #9fd0ff; font-style: italic; }
#vn-next { position: absolute; right: 26px; bottom: 16px; font-size: 16px; color: #9cc8ff; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
#vn-tools { position: absolute; right: 18px; top: -30px; display: flex; gap: 6px; }
#vn-tools button { background: rgba(14,22,46,.8); color: #bcd3ff; border: 1px solid rgba(160,200,255,.35); border-radius: 8px; font-size: 11px; padding: 4px 9px; letter-spacing: 1px; }
#vn-tools button.on { background: #5e8fe8; color: #fff; }
#vn-tools button:hover { color: #fff; }

#hud { position: absolute; left: 14px; top: 12px; display: flex; gap: 10px; align-items: center; z-index: 5; pointer-events: none; }
#hud .date { background: rgba(10,16,34,.78); color: #dbe7ff; padding: 6px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; border: 1px solid rgba(160,200,255,.3); }
#hud .bars { background: rgba(10,16,34,.78); padding: 6px 12px; border-radius: 10px; display: flex; gap: 12px; border: 1px solid rgba(160,200,255,.3); }
.mbar { display: flex; align-items: center; gap: 5px; color: #cfe0ff; font-size: 12px; font-weight: 700; }
.mbar .track { width: 64px; height: 8px; background: rgba(255,255,255,.14); border-radius: 5px; overflow: hidden; }
.mbar .fill { height: 100%; border-radius: 5px; transition: width .6s; }
.warnicons { color: #ff6b6b; font-size: 13px; letter-spacing: 2px; }

/* choices */
.choices { position: absolute; left: 0; right: 0; top: 0; bottom: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 30; }
.choice { min-width: 520px; max-width: 800px; background: rgba(245, 249, 255, .95); color: #1d2a4d; border: 2px solid #9cc8ff; border-radius: 14px; padding: 15px 28px; font-size: 20px; font-weight: 700; box-shadow: 0 8px 26px rgba(0,0,0,.35); transition: transform .12s, background .12s; font-family: var(--font-soft); animation: popIn .3s ease backwards; }
.choice:hover { transform: scale(1.03); background: #fff; border-color: #5e8fe8; }
.choice:nth-child(2) { animation-delay: .06s; } .choice:nth-child(3) { animation-delay: .12s; } .choice:nth-child(4) { animation-delay: .18s; }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* phone overlay */
.dim-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 20; animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } }
.phone { position: absolute; right: 150px; top: 24px; width: 380px; height: 672px; background: #111; border-radius: 42px; padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 2px #333; z-index: 21; animation: phoneIn .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes phoneIn { from { transform: translateY(80px) rotate(4deg); opacity: 0; } }
.phone .screen { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; background: #b2c7da; }
.phone .notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: #111; border-radius: 12px; z-index: 3; }
.phone .status { height: 36px; display: flex; justify-content: space-between; align-items: center; padding: 8px 26px 0; font-size: 12px; font-weight: 700; color: #222; }
.phone .apphead { padding: 10px 16px; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.phone.kakao .screen { background: #bacee0; }
.phone.kakao .apphead { background: #bacee0; color: #1b1b1b; }
.phone.dc .screen, .phone.mail .screen { background: #f3f4f8; }
.phone.dc .apphead, .phone.mail .apphead { background: var(--dc); color: #fff; }
.phone.sms .screen { background: #fff; }
.phone.sms .apphead { background: #f6f6f6; color: #222; border-bottom: 1px solid #ddd; }
.phone .msgs { flex: 1; overflow-y: auto; padding: 12px 12px 30px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.phone .msgs::-webkit-scrollbar { width: 0; }
.pm { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; animation: msgIn .25s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.pm .av { width: 38px; height: 38px; border-radius: 14px; background: #8aa center/cover; flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; font-weight: 700; }
.pm .who { font-size: 12px; color: #444; margin-bottom: 3px; }
.pm .bub { background: #fff; padding: 8px 12px; border-radius: 4px 14px 14px 14px; font-size: 14.5px; line-height: 1.45; max-width: 250px; white-space: pre-wrap; word-break: break-all; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.pm.me { justify-content: flex-end; }
.pm.me .bub { background: #fee500; border-radius: 14px 4px 14px 14px; }
.phone.sms .pm.me .bub { background: #3d8bff; color: #fff; }
.phone.sms .pm .bub { background: #e9e9eb; }
.phone.dc .pm .bub, .phone.mail .pm .bub { border: 1px solid var(--line); border-radius: 8px; max-width: 290px; }
.phone.dc .pm.me .bub, .phone.mail .pm.me .bub { background: #e6efff; }
.pm .typing { background: #fff; padding: 8px 14px; border-radius: 14px; font-size: 18px; letter-spacing: 3px; color: #999; }
.phone .hint { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 11px; color: #555; opacity: .8; }

/* board (post view) */
.board { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: 820px; max-height: 640px; background: #fff; border-radius: 10px; overflow: hidden; z-index: 21; box-shadow: 0 20px 60px rgba(0,0,0,.55); display: flex; flex-direction: column; animation: popIn .3s; }
.board .ghead { background: var(--dc); color: #fff; padding: 10px 18px; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.board .ghead .logo { font-family: var(--font-cute); font-size: 18px; letter-spacing: .5px; }
.board .content { padding: 18px 24px 16px; overflow-y: auto; }
.post-title { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 8px; line-height: 1.35; }
.post-title .head { color: var(--dc); font-weight: 700; margin-right: 6px; }
.post-meta { font-size: 13px; color: #666; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.post-meta .nick { color: #222; font-weight: 700; }
.post-meta .ip { color: #888; font-weight: 400; }
.gonik { display: inline-block; width: 13px; height: 13px; border-radius: 3px; background: #5b6db8; vertical-align: -1px; margin-left: 3px; position: relative; }
.gonik::after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 9px; text-align: center; line-height: 13px; }
.gonik.half { background: #9aa6cf; }
.gonik.mgr { background: var(--orange); }
.gonik.sub { background: var(--blue); }
.post-body { font-size: 15.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-all; color: #222; min-height: 60px; }
.post-img { margin: 12px 0; background: repeating-linear-gradient(45deg, #eef0f6, #eef0f6 10px, #e4e7f0 10px, #e4e7f0 20px); border: 1px dashed #b8bfd6; border-radius: 8px; padding: 22px 16px; text-align: center; color: #56607d; font-size: 14px; }
.post-img img { max-width: 100%; max-height: 260px; display: block; margin: 0 auto 6px; border-radius: 6px; }
.post-rec { display: flex; justify-content: center; gap: 14px; margin: 16px 0 6px; }
.post-rec span { border: 1px solid var(--line); border-radius: 20px; padding: 6px 18px; font-size: 13px; color: #555; }
.post-rec .up b { color: var(--dc); }
.post-rec .down b { color: #999; }
.cmts { border-top: 2px solid var(--dc); margin-top: 12px; }
.cmts .ctitle { font-size: 13px; font-weight: 700; padding: 8px 0; color: #333; }
.cmt { display: flex; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #eef0f5; font-size: 14px; }
.cmt .cn { width: 150px; flex: none; color: #333; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmt .cn .ip { color: #999; font-weight: 400; }
.cmt .ct { flex: 1; color: #222; word-break: break-all; }
.board .foot { padding: 10px; text-align: center; border-top: 1px solid var(--line); background: #fafbfd; }
.btn { background: var(--dc); color: #fff; border: none; border-radius: 8px; padding: 9px 26px; font-weight: 700; font-size: 15px; box-shadow: 0 2px 0 var(--dc-dark); }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.ghost { background: #fff; color: var(--dc); border: 1px solid var(--dc); box-shadow: none; }
.btn.red { background: #e04858; box-shadow: 0 2px 0 #a8303e; }
.btn.green { background: #2fae6c; box-shadow: 0 2px 0 #1f7d4c; }
.btn.orange { background: #f08a2c; box-shadow: 0 2px 0 #b8631b; }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn:disabled { opacity: .4; cursor: default; filter: none; }

/* fx: toast, popups, flash, chapter */
#fx { pointer-events: none; z-index: 100; }
.toast { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); background: rgba(20, 30, 60, .94); color: #fff; padding: 11px 26px; border-radius: 30px; font-weight: 700; font-size: 16px; border: 1px solid rgba(160,200,255,.5); box-shadow: 0 8px 28px rgba(0,0,0,.45); animation: toastIn .35s ease, toastOut .4s ease 2.2s forwards; white-space: nowrap; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -20px); } }
@keyframes toastOut { to { opacity: 0; transform: translate(-50%, -20px); } }
.popups { position: absolute; right: 16px; top: 60px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.pop { padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 15px; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); animation: popSlide .35s ease, popFade .5s ease 2.2s forwards; }
.pop.up { background: linear-gradient(135deg, #2fae6c, #45cf8c); }
.pop.down { background: linear-gradient(135deg, #d8384c, #f05a6c); }
.pop.aff { background: linear-gradient(135deg, #e86aa6, #ff8fc0); }
@keyframes popSlide { from { opacity: 0; transform: translateX(40px); } }
@keyframes popFade { to { opacity: 0; transform: translateY(-10px); } }
.flash { position: absolute; inset: 0; animation: flash .5s ease forwards; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
.shake { animation: shake .45s; }
@keyframes shake { 10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(4px,-2px)} 30%,50%,70%{transform:translate(-7px,2px)} 40%,60%{transform:translate(7px,-1px)} }
.chapter { position: absolute; inset: 0; background: #05070d; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; z-index: 90; pointer-events: auto; animation: fadeIn .8s; }
.chapter .c1 { font-family: var(--font-cute); letter-spacing: 8px; color: var(--blue2); font-size: 26px; margin-bottom: 14px; animation: popIn 1s ease .2s backwards; }
.chapter .c2 { font-family: var(--font-cute); font-size: 58px; animation: popIn 1s ease .6s backwards; text-shadow: 0 0 30px rgba(111,168,255,.5); }
.chapter .line { width: 0; height: 2px; background: var(--blue); margin-top: 22px; animation: lineGrow 1.2s ease 1s forwards; }
@keyframes lineGrow { to { width: 420px; } }
.daycard { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #16233f 0%, #05070d 75%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; z-index: 90; pointer-events: auto; animation: fadeIn .5s; }
.daycard .dnum { font-family: var(--font-cute); font-size: 30px; color: var(--blue2); letter-spacing: 4px; }
.daycard .ddate { font-size: 44px; font-weight: 900; margin: 8px 0; }
.daycard .dtitle { font-family: var(--font-soft); font-size: 26px; color: #cfe0ff; }
.daycard .dchap { position: absolute; bottom: 40px; font-size: 13px; color: #6b7aa0; letter-spacing: 3px; }

/* ---------- title ---------- */
#title { background: #05070d; z-index: 50; }
#title .tbg { position: absolute; inset: 0; background: center/cover no-repeat; animation: slowZoom 30s ease-in-out infinite alternate; }
@keyframes slowZoom { from { transform: scale(1.0); } to { transform: scale(1.06); } }
#title .tshade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,20,.92) 0%, rgba(5,8,20,.7) 38%, rgba(5,8,20,0) 70%); }
#title .logo { position: absolute; left: 70px; top: 90px; color: #fff; }
#title .logo .l1 { font-family: var(--font-cute); font-size: 22px; color: var(--blue2); letter-spacing: 3px; }
#title .logo .l2 { font-family: var(--font-cute); font-size: 76px; line-height: 1.05; margin-top: 8px; text-shadow: 0 4px 0 #2b3f86, 0 0 40px rgba(111,168,255,.6); }
#title .logo .l2 .b { color: var(--blue); }
#title .logo .l3 { font-size: 15px; color: #aebbdc; margin-top: 16px; letter-spacing: 1px; }
#title .menu { position: absolute; left: 76px; top: 360px; display: flex; flex-direction: column; gap: 12px; }
#title .menu button { width: 260px; text-align: left; background: rgba(20,32,70,.6); color: #e6eeff; border: 1px solid rgba(160,200,255,.3); border-radius: 12px; padding: 13px 22px; font-size: 18px; font-weight: 700; transition: all .15s; font-family: var(--font-soft); }
#title .menu button:hover { background: rgba(94,143,232,.85); transform: translateX(8px); border-color: #fff; }
#title .menu button:disabled { opacity: .35; transform: none; background: rgba(20,32,70,.6); }
#title .ver { position: absolute; right: 16px; bottom: 12px; font-size: 11px; color: #56617f; }
#title .press { position: absolute; left: 0; right: 0; bottom: 60px; text-align: center; color: #cfe0ff; font-size: 18px; animation: blink 1.4s infinite; font-family: var(--font-soft); }

/* modal window */
.modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #f7f9ff; border-radius: 16px; z-index: 60; box-shadow: 0 20px 70px rgba(0,0,0,.6); overflow: hidden; animation: popIn .25s; }
.modal .mh { background: var(--dc); color: #fff; padding: 12px 20px; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; align-items: center; }
.modal .mh .x { background: none; border: none; color: #fff; font-size: 20px; }
.modal .mb { padding: 18px 22px; max-height: 540px; overflow-y: auto; }
.setrow { display: flex; align-items: center; gap: 14px; margin: 14px 0; font-weight: 700; }
.setrow label { width: 130px; }
.setrow input[type=range] { width: 260px; }
.log-line { padding: 6px 0; border-bottom: 1px solid #e3e7f2; font-size: 14px; line-height: 1.5; }
.log-line b { color: var(--dc); margin-right: 8px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 200px); gap: 12px; }
.gallery-grid .g { width: 200px; height: 125px; border-radius: 8px; background: #223 center/cover; border: 2px solid #ccd; cursor: pointer; position: relative; }
.gallery-grid .g.locked { background: #2a3050; display: flex; align-items: center; justify-content: center; color: #6b7aa0; font-size: 28px; cursor: default; }
.gallery-grid .g .cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 3px 6px; }
.endlist { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.endlist div { padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.endlist div.lock { color: #aab; }
.cgview { position: absolute; inset: 0; z-index: 80; background: #000 center/contain no-repeat; cursor: pointer; }

/* ---------- report ---------- */
.report { position: absolute; inset: 0; z-index: 40; background: linear-gradient(135deg, #0f1a38, #1a2a55); display: flex; gap: 20px; padding: 28px 34px; color: #eaf1ff; animation: fadeIn .4s; }
.report .left { width: 470px; display: flex; flex-direction: column; gap: 12px; }
.report .right { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.report h2 { margin: 0; font-family: var(--font-cute); font-size: 34px; font-weight: 400; color: #fff; }
.report h2 small { font-size: 16px; color: #9cb4e8; margin-left: 10px; font-family: var(--font); }
.card { background: rgba(255,255,255,.07); border: 1px solid rgba(160,200,255,.22); border-radius: 14px; padding: 14px 18px; }
.card h3 { margin: 0 0 8px; font-size: 14px; color: #9cc8ff; letter-spacing: 1px; }
.grade { font-family: var(--font-cute); font-size: 96px; line-height: 1; text-align: center; animation: stamp .6s cubic-bezier(.2,1.6,.4,1) .3s backwards; }
@keyframes stamp { from { transform: scale(2.4) rotate(-12deg); opacity: 0; } }
.grade.S { color: #ffd23c; text-shadow: 0 0 30px rgba(255,210,60,.6); }
.grade.A { color: #6fe0a0; } .grade.B { color: #7fb6ff; } .grade.C { color: #ffb070; } .grade.D { color: #ff6b7a; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; font-size: 14.5px; }
.kv .v { font-weight: 700; text-align: right; }
.kv .v.bad { color: #ff8a96; } .kv .v.good { color: #7fe0a8; }
.statrow { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 5px 0; }
.statrow .nm { width: 64px; font-weight: 700; }
.statrow .track { flex: 1; height: 12px; background: rgba(255,255,255,.12); border-radius: 7px; overflow: hidden; position: relative; }
.statrow .fill { height: 100%; border-radius: 7px; transition: width 1s ease .4s; }
.statrow .dv { width: 70px; text-align: right; font-weight: 700; }
.mist { font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); line-height: 1.45; }
.mist .mt { color: #fff; font-weight: 700; }
.mist .mw { color: #ffb4bd; }
.mist .my { color: #9cb4e8; }
.reacts .cmt { border-color: rgba(255,255,255,.08); font-size: 13.5px; }
.reacts .cmt .cn { color: #cfe0ff; width: 120px; }
.reacts .cmt .ct { color: #eef3ff; }

/* ---------- desk ---------- */
#desk { background: #e9ecf4; z-index: 10; display: flex; flex-direction: column; }
.dk-head { height: 50px; background: var(--dc); color: #fff; display: flex; align-items: center; padding: 0 14px; gap: 14px; flex: none; }
.dk-head .glogo { font-family: var(--font-cute); font-size: 19px; white-space: nowrap; }
.dk-head .glogo .m { display: inline-block; background: #fff; color: var(--dc); border-radius: 4px; font-size: 12px; padding: 0 4px; margin-left: 6px; font-family: var(--font); font-weight: 900; vertical-align: 2px; }
.dk-head .clock { margin-left: auto; font-family: var(--font-cute); font-size: 22px; background: rgba(0,0,0,.2); padding: 2px 14px; border-radius: 8px; min-width: 132px; text-align: center; }
.dk-head .clock small { font-size: 13px; opacity: .8; margin-right: 6px; font-family: var(--font); }
.dk-stats { display: flex; gap: 12px; }
.dk-stats .mbar .track { width: 70px; }
.dk-head .hbtn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 13px; }
.dk-head .hbtn:hover { background: rgba(255,255,255,.28); }
.dk-head .hbtn.new { animation: glow 1s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px rgba(255,210,60,.8); } }
.dk-main { flex: 1; display: flex; min-height: 0; }
.dk-left { width: 790px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); min-height: 0; }
.dk-tabs { display: flex; border-bottom: 2px solid var(--dc); flex: none; background: #f6f7fb; }
.dk-tabs button { border: none; background: none; padding: 9px 16px; font-weight: 700; font-size: 14px; color: #555; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.dk-tabs button.on { color: var(--dc); border-bottom-color: var(--dc); background: #fff; }
.dk-tabs .cnt { display: inline-block; background: #e04858; color: #fff; border-radius: 10px; font-size: 11px; padding: 0 6px; margin-left: 4px; }
.dk-tabs .cnt:empty { display: none; }
.dk-tabs .tools { margin-left: auto; display: flex; gap: 6px; align-items: center; padding-right: 8px; }
.dk-tabs .tools button { padding: 4px 9px; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; margin: 0; }
.dk-tabs .tools button.on { background: #ffe9a8; border-color: #e0b84a; color: #6b4a00; }
.dk-list { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.dk-list::-webkit-scrollbar { width: 8px; } .dk-list::-webkit-scrollbar-thumb { background: #c8cde0; border-radius: 4px; }
table.gl { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
table.gl th { position: sticky; top: 0; background: #f6f7fb; color: #555; font-weight: 700; padding: 6px 4px; border-bottom: 1px solid var(--line); z-index: 1; font-size: 12px; }
table.gl td { padding: 0 4px; height: 29px; border-bottom: 1px solid #eef0f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.gl tr.row { cursor: pointer; transition: background .15s; }
table.gl tr.row:hover { background: #f0f4ff; }
table.gl tr.row.sel { background: #dde8ff; }
table.gl tr.row.fresh { animation: rowIn .6s ease; }
@keyframes rowIn { from { background: #fff6c8; } }
table.gl tr.row.done td { color: #aab; }
table.gl tr.row.done .ttl { text-decoration: none; }
table.gl tr.row.gone { animation: rowOut .45s ease forwards; }
@keyframes rowOut { to { opacity: 0; transform: translateX(-40px); } }
table.gl td.no { color: #888; text-align: center; font-size: 11.5px; }
table.gl td.hd { text-align: center; color: #666; font-size: 12px; }
table.gl td.ttl { color: #222; }
table.gl td.ttl .cc { color: #e04858; font-size: 11.5px; margin-left: 3px; font-weight: 700; }
table.gl td.ttl .ico { font-size: 12px; margin-left: 3px; }
table.gl td.ttl .rep { background: #ffe1e5; color: #d0304a; border-radius: 4px; font-size: 10.5px; padding: 0 4px; margin-left: 4px; font-weight: 700; }
table.gl td.ttl .hot { background: #fff0c8; color: #b07000; border-radius: 4px; font-size: 10.5px; padding: 0 4px; margin-left: 4px; font-weight: 700; }
table.gl td.au { color: #333; font-size: 12.5px; }
table.gl td.au .ip { color: #999; font-size: 11px; }
table.gl td.tm, table.gl td.vw, table.gl td.rc { text-align: center; color: #777; font-size: 11.5px; }
table.gl tr.notice td { background: #f7f8fc; }
table.gl tr.notice td.hd { color: var(--dc); font-weight: 700; }
table.gl .check { color: var(--green); font-weight: 900; margin-right: 3px; }
table.gl .tagged { color: #9b59b6; font-weight: 900; margin-right: 3px; }
.dk-right { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }
.dk-view { flex: 1; overflow-y: auto; padding: 14px 18px; min-height: 0; }
.dk-view .empty { color: #99a; text-align: center; margin-top: 150px; font-size: 14px; line-height: 1.8; }
.dk-view .post-title { font-size: 17px; }
.dk-view .post-body { font-size: 14.5px; line-height: 1.65; }
.dk-view .cmt { font-size: 13px; }
.dk-view .cmt .cn { width: 118px; }
.dk-acts { flex: none; border-top: 1px solid var(--line); padding: 10px 12px; background: #f6f7fb; display: flex; flex-direction: column; gap: 8px; }
.dk-acts .r1 { display: flex; gap: 8px; }
.dk-acts .r1 .btn { flex: 1; padding: 9px 4px; font-size: 14px; }
.dk-acts .r2 { display: flex; gap: 5px; align-items: center; font-size: 12px; color: #555; }
.dk-acts .r2 .btn { padding: 5px 0; flex: 1; font-size: 12.5px; }
.dk-acts .r2 .lbl { font-weight: 700; margin-right: 2px; white-space: nowrap; }
.dk-acts .banleft { font-size: 11px; color: #888; text-align: right; }
.dk-bottom { height: 128px; flex: none; display: flex; background: #1a2442; color: #eaf1ff; }
.dk-hanul { width: 420px; position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,.1); }
.dk-hanul .face { position: absolute; left: 10px; bottom: 0; width: 120px; height: 128px; background: center top/cover no-repeat; }
.dk-hanul .bubble { position: absolute; left: 138px; top: 14px; right: 12px; background: #fff; color: #223; border-radius: 14px; padding: 10px 14px; font-size: 14px; line-height: 1.45; font-family: var(--font-soft); font-weight: 700; min-height: 44px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.dk-hanul .bubble::before { content: ''; position: absolute; left: -9px; top: 18px; border: 6px solid transparent; border-right: 6px solid #fff; border-right-width: 10px; }
.dk-hanul .bubble.pulse { animation: popIn .3s; }
.dk-hanul .combo { position: absolute; left: 138px; bottom: 8px; font-size: 12px; color: #9cc8ff; font-weight: 700; }
.dk-chat { flex: 1; display: flex; flex-direction: column; padding: 8px 14px; min-width: 0; }
.dk-chat .ch { font-size: 12px; color: #9cb4e8; font-weight: 700; margin-bottom: 4px; display: flex; justify-content: space-between; }
.dk-chat .lines { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.dk-chat .ln { font-size: 13.5px; line-height: 1.35; animation: msgIn .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-chat .ln b { margin-right: 6px; }
.dk-chat .ln.sys { color: #ffd98a; }
.dk-fb { position: absolute; font-weight: 900; font-size: 18px; pointer-events: none; animation: fbUp 1.1s ease forwards; z-index: 50; white-space: nowrap; text-shadow: 0 2px 4px rgba(0,0,0,.25); }
.dk-fb.ok { color: var(--green); } .dk-fb.bad { color: #e04858; } .dk-fb.meh { color: #e0a030; }
@keyframes fbUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }
.dk-sleep { position: absolute; inset: 0; pointer-events: none; z-index: 45; background: #000; opacity: 0; transition: opacity .5s; }
.dk-pause { position: absolute; inset: 0; background: rgba(8,12,26,.72); z-index: 55; display: flex; align-items: center; justify-content: center; }
.tip { position: absolute; z-index: 70; background: #fffbe6; color: #3b3000; border: 2px solid #f0c040; border-radius: 12px; padding: 12px 16px; width: 330px; font-size: 14.5px; line-height: 1.55; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-weight: 500; animation: popIn .3s; }
.tip b { color: #b05a00; }
.tip .tbtn { margin-top: 8px; text-align: right; }
.tip-hl { position: absolute; z-index: 69; border: 3px solid #f0c040; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; transition: all .3s; }
.rulebook { width: 760px; }
.rulebook .rule { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: flex-start; }
.rulebook .rule .code { background: var(--dc); color: #fff; border-radius: 6px; font-weight: 700; font-size: 12px; padding: 2px 7px; flex: none; margin-top: 1px; }
.rulebook .rule .txt { flex: 1; line-height: 1.5; }
.rulebook .rule .txt small { color: #777; display: block; }
.rulebook .rule .act { flex: none; font-weight: 700; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: #eef0f8; }
.rulebook .rule.new { background: #fff8d8; }
.rulebook .rule.new .code::after { content: ' NEW'; color: #ffd23c; }
.act.pass { color: #2f8f5c; } .act.del { color: #c0392b; } .act.ban { color: #8e1b2b; } .act.tag { color: #8e44ad; }
.mailitem { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.mailitem .mf { font-size: 12px; color: #777; }
.mailitem .mt { font-weight: 700; margin: 2px 0 6px; }
.mailitem .mbd { font-size: 14px; white-space: pre-wrap; line-height: 1.5; margin-bottom: 8px; }
.mailitem .mc { display: flex; gap: 6px; flex-wrap: wrap; }
.mailitem.done { opacity: .55; }
.modlog-row { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-bottom: 1px solid #eef0f5; font-size: 13px; }
.modlog-row .who { font-weight: 700; width: 80px; }
.modlog-row .what { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modlog-row .dur { width: 74px; flex: none; white-space: nowrap; color: #c0392b; font-weight: 700; }
.iplist .ipi { font-size: 13px; padding: 5px 0; border-bottom: 1px solid #eee; }

/* ---------- minigames ---------- */
#mini { z-index: 30; background: #0d1428; color: #eaf1ff; }
.mg-top { position: absolute; left: 0; right: 0; top: 0; height: 56px; background: rgba(8,12,26,.85); display: flex; align-items: center; padding: 0 18px; gap: 16px; z-index: 5; border-bottom: 1px solid rgba(160,200,255,.2); }
.mg-top .mt { font-family: var(--font-cute); font-size: 22px; color: #fff; }
.mg-top .ms { font-size: 13px; color: #9cb4e8; }
.mg-top .timer { margin-left: auto; font-family: var(--font-cute); font-size: 24px; color: #ffd98a; }
.mg-top .score { font-weight: 700; font-size: 15px; }
.mg-intro { position: absolute; inset: 0; z-index: 20; background: rgba(5,8,20,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.mg-intro h2 { font-family: var(--font-cute); font-size: 44px; font-weight: 400; margin: 0; color: #fff; }
.mg-intro .desc { font-size: 17px; line-height: 1.75; color: #cfe0ff; max-width: 760px; white-space: pre-line; font-family: var(--font-soft); font-weight: 700; }
.mg-intro .keys { font-size: 13px; color: #8ea3d0; }
.mg-result { position: absolute; inset: 0; z-index: 25; background: rgba(5,8,20,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; animation: fadeIn .4s; }
.mg-result h2 { font-family: var(--font-cute); font-size: 50px; font-weight: 400; margin: 0; }
.mg-result .rd { font-size: 17px; color: #cfe0ff; line-height: 1.7; white-space: pre-line; }
/* stealth */
.st-scene { position: absolute; inset: 0; background: center/cover no-repeat; }
.st-watch { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); width: 360px; text-align: center; }
.st-watch .wimg { height: 330px; display: block; margin: 0 auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); transition: transform .15s; }
.st-watch.warn .wimg { animation: turnWarnImg .15s infinite; }
.st-watch.look .wimg { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(255,60,90,.8)); }
@keyframes turnWarnImg { 50% { transform: translateX(6px) rotate(1deg); } }
.st-watch .fig { width: 160px; height: 200px; margin: 0 auto; border-radius: 80px 80px 20px 20px; background: #2a2f45; position: relative; transition: background .2s; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.st-watch .fig .head { position: absolute; left: 50%; top: -70px; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%; background: #3a3f58; }
.st-watch .fig .eyes { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); font-size: 28px; opacity: 0; transition: opacity .15s; }
.st-watch.look .fig .eyes { opacity: 1; }
.st-watch.look .fig, .st-watch.look .fig .head { background: #6a3040; }
.st-watch.warn .fig .head { animation: turnWarn .15s infinite; }
@keyframes turnWarn { 50% { transform: translateX(-46%); } }
.st-watch .lbl { margin-top: 10px; font-weight: 900; font-size: 18px; background: rgba(0,0,0,.6); border-radius: 10px; padding: 4px 10px; display: inline-block; }
.st-watch.look .lbl { background: #c0304a; }
.st-watch.warn .lbl { background: #d08a20; }
.st-phone { position: absolute; left: 50%; bottom: -380px; transform: translateX(-50%); width: 400px; height: 470px; background: #111; border-radius: 30px; padding: 12px; transition: bottom .18s ease; box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
.st-phone.up { bottom: -30px; }
.st-phone .scr { background: #fff; border-radius: 20px; height: 100%; color: #222; padding: 12px; overflow: hidden; display: flex; flex-direction: column; }
.st-phone .scr .ph { background: var(--dc); color: #fff; margin: -12px -12px 8px; padding: 8px 12px; font-weight: 700; font-size: 13px; border-radius: 20px 20px 0 0; }
.st-phone .pt { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.st-phone .pa { font-size: 12px; color: #888; margin-bottom: 6px; }
.st-phone .pb { font-size: 14px; line-height: 1.55; white-space: pre-wrap; flex: 1; overflow: hidden; }
.st-phone .pbtn { display: flex; gap: 8px; margin-top: 8px; }
.st-phone .pbtn .btn { flex: 1; }
.st-hint { position: absolute; bottom: 104px; left: 0; right: 0; text-align: center; font-weight: 700; color: #fff; text-shadow: 0 2px 6px #000; font-size: 16px; }
.st-caught { position: absolute; inset: 0; background: rgba(200,30,60,.35); display: flex; align-items: center; justify-content: center; font-family: var(--font-cute); font-size: 52px; color: #fff; text-shadow: 0 4px 12px #000; z-index: 10; animation: fadeIn .2s; }
/* spamfilter */
.sp-wrap { position: absolute; left: 20px; right: 20px; top: 70px; bottom: 20px; display: flex; gap: 16px; }
.sp-list { flex: 1; background: #fff; border-radius: 10px; overflow: hidden; color: #222; position: relative; }
.sp-list .row { display: flex; gap: 8px; padding: 0 10px; height: 30px; align-items: center; border-bottom: 1px solid #eef0f5; font-size: 13px; cursor: pointer; animation: rowIn .5s; }
.sp-list .row:hover { background: #ffecec; }
.sp-list .row .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-list .row .a { width: 120px; color: #777; font-size: 12px; }
.sp-list .row.kill { animation: rowOut .35s forwards; background: #ffd9de; }
.sp-side { width: 360px; display: flex; flex-direction: column; gap: 12px; }
.sp-side .card { color: #eaf1ff; }
.sp-input { display: flex; gap: 8px; }
.sp-input .btn { white-space: nowrap; padding: 9px 14px; }
.sp-input input { flex: 1; min-width: 0; font-size: 18px; padding: 10px 12px; border-radius: 8px; border: 2px solid #5e8fe8; font-family: var(--font); }
.sp-words span { display: inline-block; background: #3a4a80; border-radius: 8px; padding: 3px 9px; margin: 3px; font-size: 13px; }
.sp-words span.badw { background: #9a2f40; }
.sp-meter { height: 18px; background: rgba(255,255,255,.12); border-radius: 9px; overflow: hidden; }
.sp-meter .f { height: 100%; background: linear-gradient(90deg, #ff9a3c, #e04858); transition: width .3s; }
.sp-peek { font-size: 13px; line-height: 1.6; color: #cfe0ff; white-space: pre-wrap; max-height: 170px; overflow: hidden; }
/* reply battle */
.rb-wrap { position: absolute; inset: 56px 0 0 0; }
.rb-opp { position: absolute; left: 60px; top: 30px; width: 520px; }
.rb-opp .name { font-weight: 900; font-size: 20px; margin-bottom: 8px; }
.rb-opp .ang { height: 16px; background: rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.rb-opp .ang .f { height: 100%; background: linear-gradient(90deg, #ffb070, #e04858); transition: width .5s; }
.rb-opp .said { background: #fff; color: #222; border-radius: 4px 18px 18px 18px; padding: 16px 20px; font-size: 18px; line-height: 1.6; min-height: 90px; box-shadow: 0 6px 20px rgba(0,0,0,.35); font-family: var(--font-soft); font-weight: 700; white-space: pre-wrap; }
.rb-hanul { position: absolute; right: 30px; bottom: 0; height: 560px; }
.rb-opts { position: absolute; left: 60px; top: 300px; width: 640px; display: flex; flex-direction: column; gap: 10px; }
.rb-opts button { text-align: left; background: rgba(240,246,255,.95); color: #1d2a4d; border: 2px solid #9cc8ff; border-radius: 12px; padding: 12px 18px; font-size: 16px; font-weight: 700; font-family: var(--font-soft); animation: popIn .25s backwards; }
.rb-opts button:hover { background: #fff; border-color: #5e8fe8; transform: translateX(6px); }
.rb-timer { position: absolute; left: 60px; top: 270px; width: 640px; height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.rb-timer .f { height: 100%; background: #ffd98a; }
.rb-mental { position: absolute; left: 60px; bottom: 30px; width: 400px; }
/* notice composer */
.nc-wrap { position: absolute; inset: 70px 20px 20px 20px; display: flex; gap: 18px; }
.nc-slots { width: 560px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.nc-slot .lab { font-weight: 700; color: #9cc8ff; font-size: 13px; margin-bottom: 4px; }
.nc-slot .opts { display: flex; flex-direction: column; gap: 5px; }
.nc-slot .opts button { text-align: left; background: rgba(255,255,255,.08); color: #eaf1ff; border: 1px solid rgba(160,200,255,.25); border-radius: 8px; padding: 7px 12px; font-size: 13.5px; font-family: var(--font); }
.nc-slot .opts button.on { background: #5e8fe8; border-color: #fff; color: #fff; }
.nc-prev { flex: 1; background: #fff; color: #222; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.nc-prev .ghead { background: var(--dc); color: #fff; padding: 8px 14px; font-weight: 700; font-size: 14px; }
.nc-prev .content { padding: 14px 18px; overflow-y: auto; flex: 1; }
.nc-prev .post-body { font-size: 14.5px; }
/* forensics */
.fz-wrap { position: absolute; inset: 70px 20px 20px 20px; display: flex; gap: 18px; }
.fz-cap { width: 400px; background: #bacee0; border-radius: 12px; overflow: hidden; position: relative; color: #222; }
.fz-cap .kh { background: #bacee0; padding: 10px 14px; font-weight: 700; border-bottom: 1px solid rgba(0,0,0,.08); display: flex; justify-content: space-between; }
.fz-cap .kb { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.fz-hot { cursor: crosshair; border-radius: 6px; transition: box-shadow .15s; position: relative; }
.fz-hot:hover { box-shadow: 0 0 0 2px rgba(255,90,106,.6); }
.fz-hot.found { box-shadow: 0 0 0 3px #e04858; }
.fz-hot.found::after { content: '!'; position: absolute; right: -8px; top: -8px; background: #e04858; color: #fff; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; font-weight: 900; text-align: center; line-height: 18px; }
.fz-ref { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.fz-ref .card { font-size: 14px; line-height: 1.6; }
.fz-miss { position: absolute; font-size: 22px; pointer-events: none; animation: fbUp .8s forwards; color: #ffd98a; font-weight: 900; }
/* detective */
.dt-wrap { position: absolute; inset: 70px 20px 20px 20px; display: flex; gap: 16px; }
.dt-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; overflow-y: auto; }
.dt-card { background: #fff; color: #222; border-radius: 10px; padding: 10px 12px; font-size: 13px; cursor: pointer; border: 3px solid transparent; transition: transform .1s; min-height: 118px; }
.dt-card:hover { transform: translateY(-2px); }
.dt-card.sel { border-color: #e04858; background: #fff3f4; }
.dt-card .dh { font-size: 11.5px; color: #888; display: flex; justify-content: space-between; margin-bottom: 4px; }
.dt-card .dtl { font-weight: 700; margin-bottom: 4px; font-size: 13.5px; }
.dt-card .dbd { line-height: 1.5; white-space: pre-wrap; color: #333; }
.dt-card.res-ok { border-color: #2fae6c; }
.dt-card.res-bad { border-color: #e0a030; }
.dt-side { width: 300px; display: flex; flex-direction: column; gap: 12px; }
.dt-side .clue { font-size: 14px; line-height: 1.8; }
/* contest */
.ct-wrap { position: absolute; inset: 70px 20px 20px 20px; display: flex; gap: 16px; }
.ct-entries { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; }
.ct-e { background: #fff; color: #222; border-radius: 10px; overflow: hidden; border: 3px solid transparent; cursor: pointer; }
.ct-e img { width: 100%; height: 150px; object-fit: cover; display: block; background: #ddd; }
.ct-e .ci { padding: 6px 10px; font-size: 12.5px; }
.ct-e .ci b { display: block; font-size: 13.5px; }
.ct-e.dq { opacity: .45; filter: grayscale(1); }
.ct-e.win { border-color: #ffd23c; }
.ct-e.sel { border-color: #5e8fe8; }
.ct-side { width: 380px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.ct-side .card { font-size: 13.5px; line-height: 1.6; }
.ct-log { font-family: monospace; font-size: 12px; background: rgba(0,0,0,.3); border-radius: 8px; padding: 8px; max-height: 190px; overflow-y: auto; line-height: 1.5; }
/* ending */
.ending { position: absolute; inset: 0; z-index: 95; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; animation: fadeIn 1.5s; }
.ending .ebg { position: absolute; inset: 0; background: center/cover; opacity: .35; }
.ending .ec { position: relative; }
.ending .et1 { font-size: 16px; letter-spacing: 6px; color: #9cc8ff; }
.ending .et2 { font-family: var(--font-cute); font-size: 64px; margin: 10px 0 18px; text-shadow: 0 0 30px rgba(111,168,255,.6); }
.ending .et3 { font-size: 17px; color: #cfe0ff; line-height: 1.8; max-width: 760px; white-space: pre-line; font-family: var(--font-soft); }
.ending .stats { margin-top: 20px; font-size: 14px; color: #9cb4e8; }
.credits { position: absolute; inset: 0; z-index: 96; background: #05070d; overflow: hidden; color: #cfe0ff; }
.credits .roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; animation: roll 38s linear forwards; font-size: 18px; line-height: 2.2; font-family: var(--font-soft); }
.credits .roll h3 { font-family: var(--font-cute); font-size: 34px; color: #fff; font-weight: 400; margin: 40px 0 10px; }
@keyframes roll { to { transform: translateY(calc(-100% - 720px)); } }

/* ===== culture update: 매니저탭 / 방명록 / 신문고 미처리 / 똥짤 ===== */
.dk-chat .ch small { font-weight: 400; opacity: .7; }
.dk-chat .ln .rp { color: #6b7aa0; margin-right: 4px; }
.dk-chat .ln .tx { margin-left: 6px; }
.mtb { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 0 4px; margin-left: 3px; vertical-align: 1px; color: #fff; }
.mtb.mgr { background: #f08a2c; } .mtb.sub { background: #4f86e8; }
.dk-acts .r1 .skipbtn { flex: .9; font-size: 12.5px; }
.repbar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #fff7df; border-bottom: 1px solid #f0dca0; font-size: 12px; color: #6b5200; }
.repbar span { flex: 1; }
.funnyimg { position: relative; padding: 16px; }
.funnyimg .big { font-size: 64px; line-height: 1; animation: funnyBob 1.2s ease-in-out infinite; display: inline-block; }
.funnyimg .cap { font-weight: 700; margin-top: 6px; }
.funnyimg.poop { background: repeating-linear-gradient(45deg, #f7efe2, #f7efe2 10px, #efe3cf 10px, #efe3cf 20px); border-color: #c8a26a; color: #7a4f1a; }
.funnyimg.poop .flies { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 16px; animation: flyAround 2s linear infinite; }
.funnyimg.gore { background: #2a2230; color: #f0c8d8; border-color: #6a4060; }
.funnyimg.gore .mosaic { position: absolute; inset: 10px; background-image: linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%), linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; pointer-events: none; border-radius: 6px; }
@keyframes funnyBob { 50% { transform: translateY(-6px) rotate(-6deg); } }
@keyframes flyAround { 0% { transform: translateX(-80%) translateY(0); } 50% { transform: translateX(-20%) translateY(-6px); } 100% { transform: translateX(-80%) translateY(0); } }
.gbhead { padding: 9px 14px; background: #f3f5fb; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: #33406e; }
.gbhead small { font-weight: 400; color: #888; margin-left: 8px; }
.mailitem.gb { border-radius: 6px; border-color: #e1e4ee; }
.mailitem.gb .mf b { color: #222; }
.mailitem.gb .secret { background: #eef0f8; color: #5b6db8; border-radius: 4px; padding: 0 5px; font-size: 11px; margin-left: 4px; }
.mailitem.gb .gbreply { margin: 6px 0 0 14px; padding: 6px 10px; background: #f6f8ff; border-left: 3px solid #9cb8ff; font-size: 13px; }
.mailitem.gb .gbhint { font-size: 11.5px; color: #888; align-self: center; margin-right: 2px; }
.mailitem.mugyu { opacity: 1 !important; background: #fffaf0; border-style: dashed; }
.mailitem.mugyu .mbd { font-family: var(--font-cute); font-size: 17px; color: #8a6a2a; letter-spacing: 1px; }
/* phone: 매니저탭 */
.phone.mtab .screen { background: #eef0f6; }
.phone.mtab .apphead { background: #29367c; color: #fff; font-size: 14px; }
.phone.mtab .apphead small { display: block; font-size: 11px; font-weight: 400; opacity: .8; }
.phone.mtab .msgs { gap: 0; padding: 0 0 30px; }
.mt-post { background: #fff; padding: 12px 14px; border-bottom: 2px solid #3b4890; animation: msgIn .25s ease; }
.mt-post .mh { font-size: 12px; color: #555; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.mt-post .mh .av, .mt-cmt .av { width: 22px; height: 22px; border-radius: 6px; background: #8aa center/cover; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 700; }
.mt-post .mbody { font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; color: #222; }
.mt-cmt { display: flex; gap: 7px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #e6e8f0; font-size: 13.5px; line-height: 1.45; animation: msgIn .25s ease; }
.mt-cmt .who { font-weight: 700; white-space: nowrap; color: #222; font-size: 12.5px; }
.mt-cmt .tx { white-space: pre-wrap; word-break: break-all; color: #222; flex: 1; }
.mt-cmt.me { background: #f2f6ff; }
.mt-cmt .rp { color: #99a; }
/* phone: 방명록 */
.phone.guestbook .screen { background: #f6f3ea; }
.phone.guestbook .apphead { background: #5b6db8; color: #fff; font-size: 14px; }
.phone.guestbook .msgs { gap: 8px; }
.gb-e { background: #fff; border: 1px solid #e3dccb; border-radius: 8px; padding: 9px 11px; animation: msgIn .25s ease; }
.gb-e .gh { font-size: 12px; color: #666; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.gb-e .gh b { color: #222; }
.gb-e .gt { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; color: #222; }
.gb-e.reply { margin-left: 18px; background: #f3f6ff; border-color: #cfd8f5; }
.gb-e .secret { background: #eef0f8; color: #5b6db8; border-radius: 4px; padding: 0 5px; font-size: 10.5px; }
.gb-e.mugyu .gt { font-family: var(--font-cute); font-size: 16px; color: #8a6a2a; }