/* ============================================================= style.css — 화면 배치와 모양 (v0.0.016 칠판 화면) 모든 위치는 1920x1080 "가상 화면" 기준 픽셀이다. 배치 기준: docs/에셋-목록.md 6장. ui.js의 fitStage()가 이 가상 화면을 창 크기에 맞게 통째로 확대/축소한다. 글씨는 전부 분필 스프라이트 폰트(SixSevensChalk). 또렷하려면 font-size를 25의 배수로 쓴다(f25~f150). ============================================================= */ @font-face { font-family: "SixSevensChalk"; src: url("../fonts/SixSevensChalk.ttf"); } @font-face { font-family: "SixSevensChalkBig"; src: url("../fonts/SixSevensChalkBig.ttf"); } :root { --chalk: #eee8d5; /* 분필 흰색 */ --num: #f1e6bb; /* 칠판 숫자: 살짝 누런 아이보리 (v0.0.068, K10) 🟡 */ --yellow: #ffd75e; /* 노란 분필 (7, DP) */ --ink: #2b1d14; /* 책·주사위 위 글자 */ --board: #1e2a25; /* 칠판 바탕 */ --muted: #9fa89f; /* 흐린 분필 */ --teal: #8fe0c4; --red: #e05a4a; --curse: #c792ff; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; position: fixed; inset: 0; background: #1a100a; /* 화면 비율이 안 맞는 여백(폰의 양옆)도 방 바닥색으로 */ overflow: hidden; touch-action: manipulation; /* 모바일: 두 번 탭 확대 막기 */ -webkit-tap-highlight-color: transparent; overscroll-behavior: none; font-family: "SixSevensChalk", monospace; color: var(--chalk); user-select: none; } img { image-rendering: pixelated; display: block; -webkit-user-drag: none; } /* ---- 1920x1080 가상 화면 ---- */ #stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: #1a100a; } .abs { position: absolute; } .layer { left: 0; top: 0; width: 1920px; height: 1080px; display: none; pointer-events: none; } .layer.show { display: block; } /* 화면 전환 묶음: 지우개 마스크(ui.js startWipe)를 씌우는 칠판 글씨 묶음 */ .wipe-wrap { left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; -webkit-mask-size: 1920px 1080px; mask-size: 1920px 1080px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* v0.0.042: 램프 칸 없는 새 배경을 x1.11 하고 칠판 틀 가운데를 화면 정중앙에 (config.js ROOM_ZOOM과 같은 값) */ #room { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; image-rendering: auto; transform-origin: 0 0; transform: translate(-110px, -43px) scale(1.11); } /* 칠판 글씨 묶음을 새 칠판 가운데로 옮긴다 (config.js BOARD_DX, BOARD_DY와 같은 값). 각 묶음 안 좌표는 옛 칠판 기준 그대로다 */ #board-day, #board-settle, #board-title, #board-ending, #board-panel, #btn-next, #btn-skip { translate: 1px 16px; } /* ---- 분필 글씨 ---- .center: (left, top)이 글자 가운데. 분필 질감(v0.0.078): 속은 꽉 채우고 가장자리만 SVG 필터(#chalk-edge)로 살짝 울퉁불퉁하게 */ .chalk { white-space: nowrap; line-height: 1; color: var(--chalk); } .center { transform: translate(-50%, -50%); text-align: center; } .yellow { color: var(--yellow); } .muted { color: var(--muted); } .f25 { font-size: 25px; filter: url(#chalk-edge); } .f50 { font-size: 50px; filter: url(#chalk-edge); } .f75 { font-size: 75px; filter: url(#chalk-edge); } .f100 { font-size: 100px; filter: url(#chalk-edge); } .f150 { font-size: 150px; filter: url(#chalk-edge); } /* ---- 소품: (x, y)가 그림의 가운데 ---- */ .prop { position: absolute; transform: translate(-50%, -50%); transition: opacity 0.4s; } .prop.pop { animation: prop-pop 0.5s; } @keyframes prop-pop { 40% { scale: 1.15; } } .prop.bump { animation: bump 0.25s; } @keyframes bump { 50% { scale: 1.08; } } /* 색 분필 (대기열 J5): (left, top)이 분필 가운데. 열린 등급 수만큼 보인다 */ #chalks { position: absolute; left: 0; top: 0; } .chalk-stick { position: absolute; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.4s; } .chalk-stick.on { opacity: 1; } .chalk-stick.pop { animation: prop-pop 0.5s; } #book-hit { left: 0; top: 522px; width: 98px; height: 378px; cursor: pointer; } /* 배경 왼쪽 책 더미 (v0.0.041) */ /* ---- 낮 칠판 ---- */ /* v0.0.019: DP를 칠판 위 경계에서 내리고 글씨를 줄임 (150 -> 100) */ /* v0.0.055(대기열 J1): Day는 칠판 왼쪽 위, 지금 DP는 그 밑 (왼쪽 끝을 맞춤). 🟡 자리는 넣어 보고 정현 확인 */ /* v0.0.068(K3): Day 75 -> 50, DP 100 -> 75 (길면 50). 자리는 왼쪽 끝을 그대로 두고 줄 간격만 맞춤 */ #day-text { left: 252px; top: 218px; transform: translate(0, -50%); text-align: left; } #dp-line { left: 252px; top: 276px; transform: translate(0, -50%); text-align: left; color: #f2d04a; } #odds-line { left: 960px; top: 218px; } /* v0.0.084(L12): Day 1부터 늘 보여서 숫자 줄과 겹치지 않게 칠판 위쪽 가운데로 (Day 줄 높이) 🟡 */ #know-line { left: 252px; top: 332px; transform: translate(0, -50%); color: #a9d8ff; } /* v0.0.066: Knowledge 합계, DP 밑 🟡 */ #digits { left: 0; top: 0; width: 1920px; height: 1080px; } .digit { position: absolute; top: 440px; color: var(--num); transform: translate(-50%, -50%); font-family: "SixSevensChalkBig", monospace; font-size: 150px; line-height: 1.4; padding: 0 14px; /* v0.0.077: 글자가 상자(줄 높이) 밖으로 12px쯤 나가서 위아래·옆이 잘렸다 -> 줄 높이·좌우 여백을 키움 */ color: #fffdf2; text-shadow: 0 0 2px #fffdf2cc, 0 0 8px #fffbe055; } /* 구멍 무늬(마스크)를 빼고 진한 흰 분필로 */ .digit span { display: block; } .digit .o { position: absolute; left: 14px; top: 0; opacity: 0; } .digit.spin .d { opacity: 0.35; } .digit.hot .d { color: var(--yellow); } .digit.hot, .digit.cursed, .digit.cause { text-shadow: none; } /* 색 숫자는 흰 빛 없이 */ .digit.cursed .d { color: var(--curse); } /* v0.0.068(K9): 배지 원인 숫자는 밑줄·빛 없이 숫자 색만 그 배지 등급 색으로 (7의 노란 윤곽선은 그대로) */ .digit.cause .d { color: var(--gc); } #cause { left: 0; top: 0; width: 1920px; height: 1080px; } #cause .uline { position: absolute; height: 6px; opacity: 0.9; -webkit-mask-image: var(--noise-2); mask-image: var(--noise-2); animation: uline-in 0.08s steps(4, end) both; } @keyframes uline-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* 확정 윤곽선 (v0.0.084, L24): 속이 찬 누런 덩어리 대신 밝은 테두리만 크게 있다가 빠르게 줄어 숫자에 들어간다 🟡 */ .digit .o { color: transparent !important; -webkit-text-stroke: 3px #fffdf2; text-shadow: none; filter: none; } .digit.lock .o { animation: outline-in 0.16s ease-out; } @keyframes outline-in { 0% { opacity: 1; scale: 1.35; } 100% { opacity: 0; scale: 1; } } /* 아침 횟수 롤: 숫자 자리에 "3 + 5 + 2 = 10", 7 보너스는 그 아래. 끝나면 왼쪽 위 구석에 작게 남는다 */ /* v0.0.068(K1·K2): 가로 전체 띠(마스크가 글씨를 자르지 않게 높이를 줌). 자리 숫자는 메인 롤 자리와 같은 간격의 칸에 고정(left는 ui.js buildCount) */ #count-line { left: 0; top: 340px; width: 1920px; height: 200px; transform: none; color: var(--num); } #count-line .cd { position: absolute; top: 100px; transform: translate(-50%, -50%); } #count-line .lk { opacity: 1; } #count-line .sp { opacity: 0.4; } #count-line .sum { position: absolute; left: 960px; top: 100px; transform: translate(-50%, -50%); visibility: hidden; } #count-line .sum.on { visibility: visible; animation: chalk-write 0.3s steps(8, end) both; } #count-bonus { left: 960px; top: 545px; } #count-head { left: 960px; top: 330px; } /* v0.0.084(L18): 횟수 롤 숫자 위 머리글 🟡 */ #roll-tag { left: 330px; top: 440px; transform: translate(-50%, -50%) rotate(-8deg); } /* 배지: 칠판에 분필 글씨로 써진다 (v0.0.019). 색 = 등급 (config.js TIER_COLORS). v0.0.066: 한 자리에 하나씩 쓰고(chalk-write) 지운다(chalk-erase). 마지막 배지는 남는다 */ #chips { left: 300px; width: 1320px; top: 548px; display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 40px; } .bdg { visibility: hidden; white-space: nowrap; line-height: 1.1; } .bdg small { font-size: 25px; margin-left: 10px; opacity: 0.75; } .bdg.on { visibility: visible; animation: chalk-write var(--wd, 0.25s) steps(10, end) both; } @keyframes chalk-erase { from { clip-path: inset(-20% -2% -20% 0); opacity: 1; } to { clip-path: inset(-20% -2% -20% 100%); opacity: 0.4; } } #know-gain { left: 1640px; top: 575px; transform: translate(-100%, -50%); color: #a9d8ff; opacity: 0.85; } .bdg.big { font-size: 75px; filter: url(#chalk-edge); } .bdg.bounty { text-decoration: underline 4px var(--yellow); text-underline-offset: 8px; } @keyframes chalk-write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -2% -20% 0); } } #roll-text { left: 960px; top: 712px; font-size: 64px; filter: url(#chalk-edge); } /* v0.0.068(K6): 75 -> 64 (약 85%) */ /* v0.0.055(J1): Day가 왼쪽 위로 가서 남은 Roll만 가운데 아래 */ #gain { left: 960px; top: 800px; } #gain.curse { color: var(--curse); } #gain-sub { left: 960px; top: 852px; text-shadow: 2px 2px 0 #000c; -webkit-mask-image: none; mask-image: none; } #bounty { left: 1600px; top: 205px; text-align: right; transform: translateX(-100%); } #bounty.done { color: var(--yellow); } #hint { left: 960px; top: 500px; } #hint.blink { animation: blink 1.2s infinite; } @keyframes blink { 50% { opacity: 0.35; } } .fx-img { display: none; transform: translate(-50%, -50%); } #curse-666 { left: 960px; top: 440px; height: 170px; filter: drop-shadow(0 0 4px #ffd0d0) brightness(1.3); } #curse-smoke { left: 960px; top: 420px; height: 260px; opacity: 0.85; animation: smoke 1.4s ease-in-out infinite; } @keyframes smoke { 50% { translate: 0 -14px; } } #curse-cross { left: 1110px; top: 800px; height: 90px; } .fx-img.show { display: block; } #curse-666.show { animation: stamp 0.25s ease-in; } /* ---- 정산 칠판 ---- */ #board-settle .row { position: absolute; display: flex; justify-content: space-between; } #board-settle .t { position: absolute; } #board-settle .know { color: #a9d8ff; } #board-settle .muted { color: #c2cac2; } /* v0.0.019: 정산 회색 글씨를 조금 밝게 (dim 위에서 잘 안 읽힘) */ .chalk-rule { position: absolute; transform: translate(-50%, -50%); image-rendering: pixelated; } .doodle { position: absolute; transform: translate(-50%, -50%); opacity: 0.9; } /* ---- 밤 노드 화면 = 이공간 (v0.0.052, js/night.js). 화면 정중앙(960, 540) 기준, 칠판 묶음처럼 옮기지 않는다 ---- */ #night { left: 0; top: 0; width: 1920px; height: 1080px; display: none; pointer-events: none; touch-action: none; } #night.show { display: block; pointer-events: auto; } #night.work { cursor: grab; } #night.dragging { cursor: grabbing; } .nt-full { left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; } #nt-dark { background: #000; opacity: 0; } #nt-cam, #nt-sig, .nt-sig2 { transform-origin: 960px 540px; } .nt-sig2 { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } #nt-disc { background: #10171a; } /* 원 안: 칠판보다 어둡고 바깥 어둠보다 아주 약간 밝은 색 */ #nt-view, #nt-rim { overflow: hidden; } #nt-world { left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; } #nt-world * { pointer-events: none; } #night.work #nt-world .nd { pointer-events: auto; } #nt-lines { left: 0; top: 0; overflow: visible; } #nt-lines line { stroke: var(--chalk); stroke-linecap: round; } #nt-lines line.on { stroke-width: 5; opacity: 0.9; } #nt-lines line.off { stroke-width: 4; stroke-dasharray: 10 12; opacity: 0.5; } #nt-lines line.faint { stroke-width: 3; stroke-dasharray: 8 14; opacity: 0.22; } #nt-lines line.hide { display: none; } .nt-root { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--chalk); opacity: 0.8; } .nt-arm { position: absolute; transform: translate(-50%, -50%); color: var(--chalk); opacity: 0.16; letter-spacing: 4px; } #nt-world.near .nt-arm { display: none; } .nd .nm { display: none; } /* 이름은 1.5x 이상 확대했을 때만 (1x에서는 이름끼리 겹친다). 말풍선에는 항상 */ #nt-world.near .nd:not(.small) .nm { display: block; } /* 첫 밤 무료 학자 고르기 (v0.0.084, L16): 공용 노드는 어둡게, 고를 수 있는 학자 묶음 6개는 1x에서도 학자 이름을 쓴다 */ #nt-world.pick .nd:not(.free) { opacity: 0.22; } #nt-world.pick .nd.free .nm { display: block; color: var(--yellow); } #nt-world.pick .nt-arm { opacity: 0.3; } /* 노드: (left, top)이 가운데. 칠 = 가진 정도, 숨쉬는 테두리 + 노란 + = 지금 살 수 있음 (설계 6장) */ .nd { position: absolute; transform: translate(-50%, -50%); } .nd.s-hidden { display: none; } .nd > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); image-rendering: auto; } .nd .glyph { opacity: 0.95; } .nd .abbr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .nd .q, .nd .plus, .nd .star, .nd .shadow-ring { display: none; } .nd .under { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; text-align: center; } .nd .nm { color: var(--muted); white-space: nowrap; } .nd .lv { color: var(--chalk); white-space: nowrap; margin-top: 2px; } .nd.small .nm { display: none; } /* 작은 노드(자리 최댓값, 계열 부스트)는 이름을 말풍선에서만 */ /* 살 수 있음(처음): 밝은 테두리가 숨 쉰다 */ .nd.s-buy .nm { color: var(--chalk); } .nd.s-buy .frame, .nd.s-owned.can .frame { animation: nt-breathe 1.8s ease-in-out infinite; } @keyframes nt-breathe { 50% { filter: brightness(1.45) drop-shadow(0 0 10px #ece8dcaa); } } /* DP 부족(처음): 노드 전체를 흐리게 */ .nd.s-poor { opacity: 0.4; } .nd.s-poor .lv { color: var(--muted); } /* 보유, 지금은 못 삼: 칠이 한 단계 어두운 회색 */ .nd.s-owned:not(.can) .frame { filter: grayscale(1) brightness(0.62); } .nd.s-owned:not(.can) .glyph, .nd.s-owned:not(.can) .abbr { filter: brightness(0.7); } .nd.s-owned:not(.can) .lv { color: var(--muted); } .nd.s-owned.can .nm { color: var(--chalk); } .nd.s-owned.can .lv { color: var(--yellow); } /* 만렙: 노란 칠(틀 그림에 체크 표시가 있다) + MAX */ .nd.s-max .lv { color: var(--yellow); } /* 잠김(보임): 점선 + 자물쇠 (틀 그림), 그림 숨김 */ .nd.s-locked .glyph, .nd.s-locked .abbr, .nd.s-shadow .glyph, .nd.s-shadow .abbr, .nd.s-shadow .frame, .nd.s-shadow .under { display: none; } .nd.s-locked .nm { opacity: 0.6; } /* 그림자: 점선 원 + ? */ .nd.s-shadow .shadow-ring { display: block; position: absolute; inset: 0; border: 4px dashed var(--chalk); border-radius: 50%; opacity: 0.3; } .nd.s-shadow .q { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--chalk); opacity: 0.35; } .nd.small.s-shadow .q { font-size: 25px; } /* 지금 살 수 있음 표시: 오른쪽 위 노란 + */ .nd.can .plus { display: block; position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: var(--yellow); color: #14161a; -webkit-mask-image: none; mask-image: none; } .nd.small.can .plus { right: -14px; top: -14px; } /* 추천 별: 처음 몇 밤, 살 수 있는 것 중 가장 싼 노드 */ .nd.rec, .nd.sel { z-index: 2; } .nd.rec .star { display: block; position: absolute; left: -18px; top: -20px; width: 38px; } .nd.sel .frame, .nd.sel .shadow-ring { filter: brightness(1.6) !important; } .nd.bought { animation: node-stamp 0.3s ease-in; } @keyframes node-stamp { 0% { scale: 1.45; } 100% { scale: 1; } } .nd.shake { animation: nt-shake 0.25s; } @keyframes nt-shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } } .nd.reveal { animation: nt-reveal 0.4s ease-out; } @keyframes nt-reveal { 0% { opacity: 0; scale: 0.6; } } /* CRT 느낌: 얇은 주사선, 천천히 내려가는 어두운 띠, 가장자리 비네팅, 노드 그림·글씨의 빨강/파랑 번짐 (옵션 CRT look으로 끔, 규칙 8장 예외) */ /* 빨강/파랑 번짐 (v0.0.054): 화면 전체 SVG 필터 대신 노드 하나하나에 좌우 색 그림자. 노드마다 따로 그려 두니 드래그해도 다시 계산하지 않아 가볍다. 진입·퇴장 중에는 트리 배율이 매 프레임 바뀌어 다시 그려야 해서 끈다(그때는 원 테두리 잔상이 대신) */ #night.crt.work .nd { filter: drop-shadow(2.5px 0 0 rgba(255,60,60,.4)) drop-shadow(-2.5px 0 0 rgba(60,140,255,.4)); } #nt-scan { opacity: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,.26) 0 1px, rgba(0,0,0,0) 1px 3px); } #nt-band { left: 0; width: 1920px; height: 220px; top: -220px; opacity: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.16), rgba(0,0,0,0)); animation: nt-roll 6s linear infinite; } @keyframes nt-roll { to { top: 1080px; } } #nt-vig { opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); } #nt-fx { left: 0; top: 0; pointer-events: none; } #nt-dot { } /* 분필 원: 170x170칸 스프라이트(칸 4px = 680px)를 가운데에 놓고 night.js가 배율(반지름/280)과 그리기 마스크를 바꾼다 */ #nt-chalk { left: 620px; top: 200px; width: 680px; height: 680px; image-rendering: pixelated; pointer-events: none; transform-origin: 50% 50%; display: none; } /* 겹치는 글씨와 버튼 (트리 위 맨 앞) */ #nt-hud { opacity: 0; } #night.work #nt-hud .chalk-btn { pointer-events: auto; } #nt-title { left: 60px; top: 46px; } #nt-dp { left: 64px; top: 128px; } #nt-know { left: 64px; top: 188px; color: #a9d8ff; } #nt-free { left: 64px; top: 258px; } #nt-hint { left: 960px; top: 1010px; } #nt-center { left: 130px; top: 1010px; } #nt-next { left: 1760px; top: 1010px; } #nt-next.breathe { animation: nt-btn-breathe 1.6s ease-in-out infinite; } @keyframes nt-btn-breathe { 50% { color: var(--yellow); text-shadow: 0 0 10px #ffd75e88; } } /* 말풍선: 노드 옆 */ #nt-tip { display: none; pointer-events: none; padding: 14px 18px 12px; background: #05070a; border: 4px solid rgba(236,232,220,.55); max-width: 640px; } #nt-tip > div { line-height: 1.25; white-space: normal; } #nt-tip .tn { margin-bottom: 6px; white-space: nowrap; } #nt-tip .muted { color: var(--muted); } #nt-tip .need { color: #ff9a8a; } #stage.menu-on #night { visibility: hidden; } /* ---- 메인화면, 옵션, 크레딧 ---- */ #emblem { left: 960px; top: 310px; height: 270px; transform: translate(-50%, -50%); image-rendering: auto; } #title-name { left: 960px; top: 500px; } #title-menu { left: 0; top: 0; width: 1920px; height: 1080px; } .menu-item { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; padding: 4px 18px; } .menu-item.off { color: var(--muted); opacity: 0.5; cursor: default; } .menu-item:hover { color: var(--yellow); } /* v0.0.019: 선택 밑줄 없이 노란 글씨만 */ .credit-link:hover { color: var(--yellow); } .us { display: inline-block; width: 0.5em; height: 0.08em; background: currentColor; vertical-align: baseline; margin: 0 0.04em; } /* 분필 폰트에 없는 "_" 대신 (크레딧) */ #board-panel { pointer-events: none; } #board-panel.show { pointer-events: auto; z-index: 3; } /* 밝기 층과 분필 버튼 위 */ /* 옵션이 열리면 칠판 위 다른 글씨·코인·버튼을 지우고 그 자리에 옵션을 분필로 쓴다 */ #stage.menu-on #board-day, #stage.menu-on #board-settle, #stage.menu-on #fx, #stage.menu-on #coins, #stage.menu-on #btn-next { visibility: hidden; } #board-panel .t { position: absolute; } .slider { position: absolute; height: 40px; cursor: pointer; } .slider .line { position: absolute; left: 0; right: 0; top: 18px; height: 5px; background: var(--chalk); opacity: 0.7; } .slider .fill { position: absolute; left: 0; top: 18px; height: 5px; background: var(--yellow); } .slider .knob { position: absolute; top: 4px; width: 32px; height: 32px; margin-left: -16px; border: 5px solid var(--chalk); border-radius: 50%; background: var(--board); } .icon-btn { cursor: pointer; transform: translate(-50%, -50%); image-rendering: auto; } .icon-btn:hover { filter: brightness(1.2); } /* 칠판 오른쪽 위 구석 안쪽 (v0.0.072: 정현 요청으로 다시 오른쪽 위, 판 안으로 10px 안쪽). v0.0.068에는 오른쪽 아래였음. v0.0.019, 분필 톱니 그림 (v0.0.023, 512px 원본을 줄여 씀). 마우스를 올리면 노란 분필 */ #btn-options { left: 1712px; top: 205px; width: 60px; display: none; opacity: 0.9; } #btn-options:hover, .menu-item:hover .ic, .opt-name:hover .ic { filter: sepia(1) saturate(6) hue-rotate(-8deg) brightness(1.05); opacity: 1; } /* 메뉴 글씨 왼쪽 분필 아이콘 (assets/v3/ui/*_chalk.png) */ .ic { display: inline-block; height: 46px; width: 46px; margin-right: 14px; vertical-align: -6px; image-rendering: auto; } /* ---- 분필 버튼 (정산 뒤 UPGRADES / NEXT DAY, 트리의 START DAY) ---- */ .chalk-btn { display: none; cursor: pointer; transform: translate(-50%, -50%); padding: 6px 16px; } .chalk-btn.show { display: block; pointer-events: auto; } .chalk-btn:hover { color: var(--yellow); } #btn-next { left: 1545px; top: 785px; z-index: 2; } #btn-skip { left: 1545px; top: 850px; z-index: 2; color: var(--muted); } /* v0.0.084(L14): 첫 버튼 밑에 작게, 흐린 분필 🟡 자리 */ #btn-skip:hover { color: var(--yellow); } /* ---- 램프 밝기 (background는 ui.js의 setLight가 정한다) ---- */ #light { left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; } #fx { left: 0; top: 0; pointer-events: none; } /* v0.0.084(L25): 동전(과 착지 동심원)은 낮 칠판 글씨 아래 캔버스에 그려서 Roll X / Y, +DP 글씨를 덮지 않는다. 다른 VFX는 #fx(글씨 위) */ #coins { left: 0; top: 0; pointer-events: none; } /* ---- 책 스탯 창 ---- */ #book { left: 310px; top: 160px; width: 1300px; height: 739px; display: none; cursor: pointer; } #book > img { width: 1300px; height: 739px; } #book .page { position: absolute; top: 90px; width: 470px; color: var(--ink); font-size: 25px; line-height: 1.45; } #book .page.left { left: 120px; } #book .page.right { left: 705px; } #book .page h4 { margin: 0 0 8px; font-size: 50px; font-weight: 400; line-height: 1; } #book .page .row { display: flex; justify-content: space-between; } #book .page .sch { display: grid; grid-template-columns: 1fr 1.18fr; column-gap: 20px; } #book .page .sch b { margin-left: 8px; } /* 학자 7명 두 칸 (v0.0.066) */ #book .page .row.off { opacity: 0.4; } #book .page .ach { font-size: 25px; line-height: 1.35; } #book .page .ach .got { color: #2f6b1f; } #book .close { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-size: 25px; color: var(--ink); opacity: 0.7; } /* ---- 알림, 번쩍임 ---- */ /* v0.0.084(L23): 업적 알림 = 검은 상자 없이 노란 분필 글씨 (칠판 아래 받침 바로 위, 그림자로 받침 위에서도 읽히게) 🟡 자리 */ #toast { left: 960px; top: 965px; transform: translate(-50%, -50%); padding: 4px 12px; color: var(--yellow); text-shadow: 2px 2px 0 #000c, 0 0 6px #000a; display: none; pointer-events: none; } #toast.show { display: block; } #flash { left: 0; top: 0; width: 1920px; height: 1080px; background: #fff; opacity: 0; pointer-events: none; } #flash.go { animation: flash 0.5s; } @keyframes flash { 0% { opacity: 0.8; } 100% { opacity: 0; } } #version { right: 24px; bottom: 8px; font-size: 25px; color: var(--chalk); opacity: 0.5; } /* ---- 낱개 글씨 쓰기·지우기 (v0.0.072, ui.js chalkWrite / chalkErase) ---- 지우기 = 화면 전환과 같은 대각 지우개(오른쪽 위 -> 왼쪽 아래): 글씨 상자를 대각선이 쓸고 지나간다(--p 0 -> 2). 쓰기 = 분필로 왼쪽에서 오른쪽 */ @property --p { syntax: ""; inherits: false; initial-value: 0; } .cerase, #count-line .cd.er { animation: cdiag var(--ed, 0.2s) steps(8, end) both !important; clip-path: polygon( calc(-5% + 110% * min(1, 2 - var(--p))) calc(-20% + 140% * min(1, var(--p))), 105% 120%, -5% 120%, -5% calc(-20% + 140% * max(0, var(--p) - 1)), calc(-5% + 110% * max(0, 1 - var(--p))) calc(-20% + 140% * max(0, var(--p) - 1))); } @keyframes cdiag { from { --p: 0; } to { --p: 2; } } .cwrite { animation: chalk-write var(--wd, 0.3s) steps(10, end) both !important; }