/* ════════════════════════════════════════════════════════════ 동물 레이스 — 2000년대 플래시게임 스타일 ════════════════════════════════════════════════════════════ */ :root { /* --sky-1/2 는 흙길 하늘색이 :root 에 남아 있던 것인데 참조하는 곳이 없어 뺐습니다. 하늘색은 테마별 --sky-a/b/c 가 정합니다. */ --grass: #74c142; --grass-dk: #4c9327; --cream: #fffaf0; --cream-2: #ffeec9; --ink: #3a2a18; --ink-soft: #6d5943; --yellow: #ffd23f; --yellow-dk: #ffa41b; --orange: #ff8a3d; --pink: #ff5d8f; --purple: #9b6cf6; --blue: #3aa3ff; --blue-dk: #1d7fe0; --red: #ff4d4d; --panda-ink: #23252d; --runner-w: 64px; --topbar-h: 46px; /* ── 트랙 테마 변수 — 여기에는 '어느 테마의 그림'도 두지 않습니다 ────── 테마마다 갈아끼우는 값들입니다. --track-bg 트랙 바탕색 --track-tex 트랙 표면 무늬 + 위아래 가장자리 (background 를 여러 겹) --dust 달릴 때 뒤로 튀는 입자 색 --deco-1..3 바닥에 서 있는 장식 --amb-1/2 떠다니는 것 (+ 어떤 식으로 움직일지) 아래 값은 **테마가 하나도 안 걸렸을 때만 보이는 중립값**입니다. 예전에는 여기에 흙길 팔레트가 들어 있었는데, 어떤 이유로든 테마 블록이 적용되지 않으면 그 테마가 통째로 흙길로 보였습니다 — 실제로 우주·바다에서 그렇게 됐습니다(팔레트 블록 앞의 주석이 깨져 파서가 블록을 통째로 버렸습니다). 그래서 특정 테마의 색·무늬·이모지를 기본값으로 쓰지 않습니다. 무채색이면 "테마가 안 걸렸다"는 게 화면에서 바로 보이고, 다른 테마로 오해할 일도 없습니다. 실제로는 가 항상 붙어 있어 이 값이 쓰일 일은 없습니다. ------------------------------------------------------------------ */ --track-bg: #c9c9c9; --track-tex: none; --track-tex-size: auto; --track-tex-repeat: repeat; --track-tex-pos: 0 0; --dust: rgba(255, 255, 255, 0.8); --deco-1: ''; --deco-2: ''; --deco-3: ''; --amb-1: ''; --amb-1-anim: ambDrift; --amb-1-size: 0; --amb-1-op: 0; --amb-2: ''; --amb-2-anim: ambRise; --amb-2-size: 0; --amb-2-op: 0; --sky-a: #d8d8d8; --sky-b: #e4e4e4; --sky-c: #eeeeee; --hill-1: #bdbdbd; --hill-2: #a8a8a8; --ray: rgba(255, 255, 255, 0.08); } /* ── 트랙 테마 8종 ──────────────────────────────────────── */ /* ── 잔디 — 화창한 봄날 초원 ────────────────────────────── 단색 초록으로 두면 평면 카펫처럼 보입니다. 초록을 여러 톤 섞고 잔디결을 아주 옅게 깝니다. 꽃·클로버는 가장자리에만 두고 가운데는 결만 남깁니다 — 캐릭터가 가장 강해야 합니다. 연출은 아래 'body[data-track="grass"] …' 규칙들에 이어집니다. */ /* ── 흙길 — 숲속 시골 운동회 (기본 테마) ────────────────── 기본 테마이므로 나머지 일곱보다 얌전하게 갑니다 — 애니메이션은 아주 느린 구름 그림자 하나뿐이고, 트랙 위 반짝임 층은 쓰지 않습니다. 흙길 값은 원래 :root 에 있었는데 :root 는 다른 테마의 폴백이기도 해서, 거기를 고치면 변수를 안 넣은 테마가 같이 흔들립니다. 그래서 여기 따로 둡니다. */ body[data-track="dirt"], .map[data-value="dirt"] { /* 마른 흙. 밝기를 세 번 재고 고른 값입니다(트랙 평균 휘도 182). 146 최악 13.0%(갈색 곰이 흙과 붙음) · 168 최악 2.9%(곰) · 182 최악 1.5% ← 채택 갈색 캐릭터가 갈색 바닥에 묻히지 않으려면 흙을 곰보다 확실히 밝게 띄워야 합니다. */ --track-bg: linear-gradient(180deg, #e8d3ae 0%, #ddc39a 9%, #d2b689 36%, #cfb283 52%, #dcc196 88%, #e8d3ae 100%); --track-line: rgba(255, 250, 236, 0.5); /* 층 순서 = 그리는 순서(앞이 위). 잔디는 가장자리에만, 가운데는 흙결만. */ --track-tex: /* 1·2. 가장자리로 삐져나온 잔디 — 타일 폭 21/29px 을 엇갈리게 겹칩니다 */ radial-gradient(circle 7px at 50% 0, rgba(122, 176, 74, 0.85) 0 100%, transparent 0), radial-gradient(circle 5px at 50% 0, rgba(158, 200, 96, 0.7) 0 100%, transparent 0), radial-gradient(circle 7px at 50% 100%, rgba(112, 166, 68, 0.85) 0 100%, transparent 0), radial-gradient(circle 5px at 50% 100%, rgba(150, 194, 90, 0.7) 0 100%, transparent 0), /* 5·6. 잔디 밑 그늘 */ linear-gradient(180deg, rgba(96, 68, 40, 0.22), rgba(96, 68, 40, 0) 100%), linear-gradient(0deg, rgba(96, 68, 40, 0.20), rgba(96, 68, 40, 0) 100%), /* 7·8. 작은 돌 — 아주 드물게(no-repeat 타일) */ radial-gradient(5px 4px at 50% 50%, rgba(190, 184, 172, 0.8), rgba(140, 132, 120, 0.5) 60%, transparent 76%), radial-gradient(4px 3px at 50% 50%, rgba(162, 152, 138, 0.7), transparent 78%), /* 9~11. 흙 얼룩 — 타일 크기를 서로 배수가 아니게 잡아 격자 반복을 없앱니다 */ radial-gradient(56px 32px at 32% 42%, rgba(206, 176, 130, 0.30), transparent 72%), radial-gradient(36px 22px at 70% 66%, rgba(134, 100, 60, 0.22), transparent 72%), radial-gradient(72px 42px at 15% 76%, rgba(198, 168, 124, 0.22), transparent 74%), /* 12. 미세한 흙결 */ repeating-linear-gradient(174deg, rgba(96, 68, 40, 0.05) 0 1px, transparent 1px 6px); --track-tex-size: 21px 11px, 29px 8px, 21px 11px, 29px 8px, 100% 13%, 100% 12%, 280px 225px, 355px 295px, 97px 83px, 131px 113px, 179px 149px, auto; --track-tex-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat, repeat, repeat, repeat, repeat, repeat; --track-tex-pos: 0 0, 0 0, 0 100%, 0 100%, 0 0, 0 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; --dust: rgba(168, 128, 84, 0.9); --sky-a: #6ecbff; --sky-b: #c9f0ff; --sky-c: #eaf9c9; --hill-1: #74c142; --hill-2: #4c9327; --ray: rgba(255, 255, 255, 0.24); /* 장식은 셋뿐 — 나무 둘, 운동회 깃발 하나 */ --deco-1: '\1F333'; --deco-2: '\1F6A9'; --deco-3: '\1F333'; /* 떠다니는 것은 잎사귀 여섯뿐입니다. 기본 테마라 이것 말고는 안 띄웁니다. --amb-2 는 안 쓰지만 크기·움직임까지 여기서 못 박습니다 — 하나라도 빠뜨리면 그 값만 :root 를 타고 들어와서, 테마가 자기 팔레트를 온전히 소유하지 못합니다. */ --amb-1: '\1F342'; --amb-1-anim: ambDrift; --amb-1-size: 17px; --amb-1-op: 0.45; --amb-2: ''; --amb-2-anim: ambRise; --amb-2-size: 14px; --amb-2-op: 0; } /* ══════════════════════════════════════════════════════════════ 흙길 테마 전용 연출 (기본 테마 — 가장 얌전하게) 전부 body[data-track="dirt"] 안에만 있어서 다른 테마는 한 픽셀도 안 바뀝니다. 다른 테마는 .track-fx 와 .track-glow 를 둘 다 쓰지만 여기는 하나만 씁니다 — 기본 테마는 첫 화면에서 편안해야 하고, 눈에 띄는 움직임이 적을수록 좋습니다. ══════════════════════════════════════════════════════════════ */ /* ── 구름 그림자 ────────────────────────────────────────── 흙길에서 움직이는 것은 이것 하나뿐입니다. 아주 느리고 아주 옅습니다. */ body[data-track="dirt"] .track-fx { display: block; position: absolute; inset: 0; z-index: 0; border-radius: 11px; overflow: hidden; pointer-events: none; background: radial-gradient(300px 150px at 30% 42%, rgba(74, 52, 28, 0.09), transparent 72%), radial-gradient(210px 105px at 76% 64%, rgba(74, 52, 28, 0.06), transparent 74%); background-size: 760px 100%, 560px 100%; animation: dirtShade 58s linear infinite; } @keyframes dirtShade { from { background-position: 0 0, 0 0; } to { background-position: 760px 0, 1120px 0; } } /* .track-glow 는 쓰지 않습니다 — 기본값(display:none)이 그대로 적용됩니다 */ /* ── 나무 울타리 ────────────────────────────────────────── .hills 아래쪽에 낮은 울타리 한 줄만 둡니다. 요소를 새로 만들지 않습니다. */ body[data-track="dirt"] .hills::before { content: ''; position: absolute; left: 0; right: 0; bottom: 52%; height: 26px; background: /* 가로 살 두 줄 */ linear-gradient(rgba(150, 106, 62, 0.55), rgba(150, 106, 62, 0.55)) 0 7px / 100% 4px repeat-x, linear-gradient(rgba(150, 106, 62, 0.55), rgba(150, 106, 62, 0.55)) 0 18px / 100% 4px repeat-x, /* 세로 기둥 */ linear-gradient(rgba(132, 92, 52, 0.6), rgba(132, 92, 52, 0.6)) 0 0 / 5px 100% repeat-x; background-position: 0 7px, 0 18px, 0 0; opacity: 0.5; } /* ── 캐릭터 접지 + 흙먼지 ───────────────────────────────── 입자는 모든 테마가 쓰는 .runner::after 하나뿐입니다. 다른 테마처럼 .ch-sprite::after 에 두 번째 입자를 두지 않습니다 — 기본 테마니까요. */ body[data-track="dirt"] .ch-sprite::before { content: ''; position: absolute; left: 21%; right: 21%; bottom: 0.5%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(72, 48, 24, 0.3), rgba(72, 48, 24, 0)); pointer-events: none; } /* ── 결승선 ─────────────────────────────────────────────── 판정 위치는 engine.js 가 정하고 CSS 를 읽지 않습니다. 기본 체크무늬는 그대로 두고 나무 기둥 느낌만 살짝 얹습니다 — 폭도 안 바꾸므로 --gate-extra 가 필요 없습니다. */ body[data-track="dirt"] .pack-track::after { background: repeating-conic-gradient(#fff 0 25%, #4a3626 0 50%) 0 0 / 12px 12px, linear-gradient(180deg, #a97748, #8a5f36); border-left: 3px solid #6f4a29; box-shadow: -7px 0 12px -8px rgba(90, 62, 34, 0.4); } body[data-track="grass"], .map[data-value="grass"] { /* 밝기를 다섯 번 바꿔 가며 재고 고른 값입니다(트랙 평균 휘도 202). 이 테마는 캐릭터 넷이 좁은 구간에 몰려 있어 어느 밝기로 가도 하나가 손해입니다 — 곰 110 · 용 169 · 오리 172 · 토끼 223. 142(어둡게) 최악 15.1%(곰) · 176(원래) 10.3%(용) · 191 7.4%(용) · 181(민트) 8.4%(용) 202 최악 4.2%(오리) ← 채택 특히 초록 용은 잔디와 색·밝기가 둘 다 비슷해서, 잔디를 용보다 확실히 밝게 띄워야 삽니다. */ --track-bg: linear-gradient(180deg, #c9edac 0%, #b6e394 9%, #a6d982 36%, #a2d67e 52%, #b2e08f 88%, #c9edac 100%); --track-line: rgba(255, 255, 255, 0.7); /* 층 순서 = 그리는 순서(앞이 위). 꽃은 가장자리에만, 가운데는 잔디결만. */ --track-tex: /* 1·2. 위아래 가장자리 풀숲 — 타일 폭 23/31px 을 엇갈리게 겹쳐 되풀이 티를 없앱니다 */ radial-gradient(circle 9px at 50% 0, rgba(86, 158, 60, 0.85) 0 100%, transparent 0), radial-gradient(circle 6px at 50% 0, rgba(122, 190, 78, 0.8) 0 100%, transparent 0), radial-gradient(circle 9px at 50% 100%, rgba(80, 150, 56, 0.85) 0 100%, transparent 0), radial-gradient(circle 6px at 50% 100%, rgba(116, 184, 74, 0.8) 0 100%, transparent 0), /* 5~7. 꽃과 클로버 — 아주 드물게(no-repeat 타일), 서로 배수가 아닌 크기 */ radial-gradient(4px 4px at 50% 50%, #fff6b0, rgba(255, 226, 122, 0.7) 58%, transparent 74%), radial-gradient(4px 4px at 50% 50%, #ffe2ee, rgba(246, 176, 208, 0.65) 58%, transparent 76%), radial-gradient(4px 3px at 50% 50%, rgba(150, 206, 108, 0.9), transparent 76%), /* 8~10. 초록 얼룩 — 톤이 다른 초록을 겹쳐 단색 카펫을 피합니다 */ radial-gradient(58px 34px at 32% 42%, rgba(168, 218, 118, 0.34), transparent 72%), radial-gradient(38px 24px at 70% 66%, rgba(88, 156, 62, 0.24), transparent 72%), radial-gradient(74px 44px at 15% 76%, rgba(186, 226, 130, 0.26), transparent 74%), /* 11·12. 잔디결 — 두 방향을 아주 옅게 겹쳐 '풀이 누운 결'로 보이게 합니다 */ repeating-linear-gradient(84deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 5px), repeating-linear-gradient(96deg, rgba(58, 116, 40, 0.07) 0 1px, transparent 1px 7px); --track-tex-size: 23px 13px, 31px 9px, 23px 13px, 31px 9px, 270px 215px, 350px 290px, 195px 245px, 97px 83px, 131px 113px, 179px 149px, auto, auto; --track-tex-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat; --track-tex-pos: 0 0, 0 0, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; /* 달릴 때 뒤로 튀는 것 — 풀잎입니다 */ --dust: rgba(126, 196, 84, 0.95); --sky-a: #62c2f0; --sky-b: #b4e6fb; --sky-c: #e6f7dd; --hill-1: #a6dc7c; --hill-2: #7cc253; --ray: rgba(255, 252, 210, 0.16); /* 장식은 셋뿐 — 꽃, 나무, 클로버 */ --deco-1: '\1F33C'; --deco-2: '\1F333'; --deco-3: '\1F340'; /* 날리는 잎사귀 여섯, 나비 넷(아주 가끔) */ --amb-1: ''; --amb-1-anim: ambFlutter; --amb-1-size: 8px; --amb-1-op: 0.5; --amb-2: '\1F98B'; --amb-2-anim: ambFlutter; --amb-2-size: 17px; --amb-2-op: 0.75; } /* ── 모래 — 여름 해변 ───────────────────────────────────── 바다 테마는 '해저'(물속·젖은 회색 모래·산호), 여기는 '해변'(물 밖·마른 금빛 모래·파도)입니다. 둘이 헷갈리지 않게 모래 색부터 다르게 잡습니다 — 해저는 채도가 낮고 푸른 쪽(R-B 약 30), 해변은 따뜻하고 금빛(R-B 약 60)입니다. 연출은 아래 'body[data-track="sand"] …' 규칙들에 이어집니다. */ body[data-track="sand"], .map[data-value="sand"] { /* 마른 금빛 모래. 가운데가 살짝 진해 캐릭터가 뜹니다. 너무 밝게 두면 노란 오리와 흰 토끼가 묻힙니다(사탕 테마에서 실측으로 배운 것). */ --track-bg: linear-gradient(180deg, #f3dcaa 0%, #e6c78c 9%, #dcb877 36%, #d8b271 52%, #e4c68d 88%, #f3dcaa 100%); --track-line: rgba(255, 250, 232, 0.7); /* 층 순서 = 그리는 순서(앞이 위). 조개·돌은 가장자리에, 가운데는 모래결만. */ --track-tex: /* 1·2. 위아래 젖은 모래 자국 — 파도가 닿았다 물러난 자리 */ linear-gradient(180deg, rgba(150, 116, 66, 0.28), rgba(150, 116, 66, 0) 100%), linear-gradient(0deg, rgba(150, 116, 66, 0.24), rgba(150, 116, 66, 0) 100%), /* 3~5. 가장자리 조개·불가사리·작은 돌 — 드물게(no-repeat) */ radial-gradient(7px 5px at 50% 50%, rgba(255, 246, 236, 0.95), rgba(232, 186, 176, 0.6) 58%, transparent 74%), radial-gradient(6px 6px at 50% 50%, rgba(246, 154, 118, 0.85), rgba(214, 112, 84, 0.5) 60%, transparent 76%), radial-gradient(5px 4px at 50% 50%, rgba(186, 176, 160, 0.75), rgba(142, 130, 116, 0.5) 60%, transparent 78%), /* 6~8. 모래 굴곡 — 타일 크기를 서로 배수가 아니게 잡아 격자 반복을 없앱니다 */ radial-gradient(56px 32px at 32% 42%, rgba(255, 244, 214, 0.34), transparent 72%), radial-gradient(36px 22px at 70% 66%, rgba(168, 132, 78, 0.20), transparent 72%), radial-gradient(72px 42px at 15% 76%, rgba(255, 240, 206, 0.24), transparent 74%), /* 9. 미세한 모래결 */ repeating-linear-gradient(176deg, rgba(255, 250, 232, 0.20) 0 1px, transparent 1px 5px); --track-tex-size: 100% 15%, 100% 14%, 290px 230px, 370px 310px, 205px 265px, 97px 83px, 131px 113px, 179px 149px, auto; --track-tex-repeat: repeat-x, repeat-x, repeat, repeat, repeat, repeat, repeat, repeat, repeat; --track-tex-pos: 0 0, 0 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; /* 달릴 때 뒤로 튀는 것 — 모래알입니다 */ --dust: rgba(226, 190, 128, 0.95); /* 여름 한낮 하늘. 해저(어두운 청록)와 확실히 다르게 밝은 파랑입니다. */ --sky-a: #3ab0ee; --sky-b: #8fd8f7; --sky-c: #d8f0fb; --hill-1: #4fbfe6; --hill-2: #2e9fd0; --ray: rgba(255, 250, 220, 0.16); /* 장식은 셋뿐 — 야자수, 소라, 꽃게 */ --deco-1: '\1F334'; --deco-2: '\1F41A'; --deco-3: '\1F980'; /* 갈매기 넷, 반짝이는 모래 여섯 */ --amb-1: ''; --amb-1-anim: ambTwinkle; --amb-1-size: 3px; --amb-1-op: 0.8; --amb-2: '\1F426'; --amb-2-anim: ambDrift; --amb-2-size: 13px; --amb-2-op: 0.4; } /* ── 눈길 — 눈 쌓인 설원 ────────────────────────────────── 순백으로 두면 흰 토끼가 통째로 묻힙니다. 그래서 바닥을 흰색이 아니라 '푸른 그림자가 깔린 눈'으로 둡니다 — 가운데가 가장 어둡고 가장자리 눈두둑만 밝습니다. 연출은 아래 'body[data-track="snow"] …' 규칙들에 이어집니다. */ body[data-track="snow"], .map[data-value="snow"] { /* 가운데가 가장 푸르고 어둡습니다. 여기가 흰색이면 캐릭터가 사라집니다. */ --track-bg: linear-gradient(180deg, #eef6fd 0%, #d2e2f0 10%, #b3cade 40%, #adc5da 58%, #cfe0ee 90%, #eef6fd 100%); --track-line: rgba(120, 165, 205, 0.6); /* 층 순서 = 그리는 순서(앞이 위). 밝은 것은 가장자리에만 둡니다. */ --track-tex: /* 1~4. 위아래 쌓인 눈 — 타일 폭 29/41px 을 엇갈리게 겹쳐 되풀이 티를 없앱니다 */ radial-gradient(circle 14px at 50% 0, #fdfeff 0 100%, transparent 0), radial-gradient(circle 10px at 50% 0, #f2f8fe 0 100%, transparent 0), radial-gradient(circle 14px at 50% 100%, #fdfeff 0 100%, transparent 0), radial-gradient(circle 10px at 50% 100%, #f2f8fe 0 100%, transparent 0), /* 5·6. 눈두둑 아래로 지는 푸른 그림자 */ linear-gradient(180deg, rgba(112, 154, 196, 0.40), rgba(112, 154, 196, 0) 100%), linear-gradient(0deg, rgba(112, 154, 196, 0.36), rgba(112, 154, 196, 0) 100%), /* 7. 아주 드물게 반짝이는 눈 결정 */ radial-gradient(circle 1.4px at 50% 50%, rgba(255, 255, 255, 0.95) 0 100%, transparent 0), /* 8~10. 부드러운 눈 굴곡 — 타일 크기를 서로 배수가 아니게 잡아 격자 반복을 없앱니다 */ radial-gradient(58px 34px at 30% 40%, rgba(255, 255, 255, 0.34), transparent 72%), radial-gradient(38px 24px at 72% 66%, rgba(120, 158, 196, 0.30), transparent 72%), radial-gradient(74px 44px at 14% 78%, rgba(255, 255, 255, 0.24), transparent 74%), /* 11. 미세한 눈결 */ repeating-linear-gradient(168deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 7px); --track-tex-size: 29px 16px, 41px 11px, 29px 16px, 41px 11px, 100% 22%, 100% 20%, 167px 139px, 97px 83px, 131px 113px, 179px 149px, auto; --track-tex-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat, repeat, repeat, repeat, repeat; --track-tex-pos: 0 0, 0 0, 0 100%, 0 100%, 0 0, 0 100%, 0 0, 0 0, 0 0, 0 0, 0 0; --dust: rgba(255, 255, 255, 0.95); --sky-a: #8ec6e8; --sky-b: #cbe6f7; --sky-c: #eef7fd; --hill-1: #e6f2fb; --hill-2: #c8dcec; --ray: rgba(255, 255, 255, 0.10); /* 주변 장식은 제한적으로 — 눈사람 하나, 눈 덮인 소나무 둘 */ --deco-1: '\26C4'; --deco-2: '\1F332'; --deco-3: '\1F332'; /* 눈송이 — 크기와 속도를 아래 개별 규칙에서 흩어 놓습니다 */ --amb-1: ''; --amb-1-anim: ambFall; --amb-1-size: 7px; --amb-1-op: 0.85; --amb-2: ''; --amb-2-anim: ambFall; --amb-2-size: 4px; --amb-2-op: 0.6; } /* ── 우주 — 정거장 플랫폼 ──────────────────────────────── 팔레트(변수)만 여기 두고, 별·유성·네온 같은 연출은 아래 'body[data-track="space"] …' 규칙들에 이어집니다. */ body[data-track="space"], .map[data-value="space"] { /* 금속 판 — 가운데가 살짝 밝아 캐릭터가 뜹니다. 순검정으로 두면 가독성이 떨어집니다. */ --track-bg: linear-gradient(102deg, rgba(120, 150, 210, 0.07) 0 18%, transparent 34% 66%, rgba(120, 150, 210, 0.05) 82%), linear-gradient(180deg, #0d1322 0%, #161f36 11%, #1d2740 42%, #1d2740 58%, #161f36 89%, #0d1322 100%); --track-line: rgba(150, 200, 255, 0.5); /* 층 순서 = 그리는 순서(앞이 위). 네온은 가장자리에만 두고, 가운데는 아주 약한 패널 라인만 남깁니다. */ --track-tex: /* 1·2. 위아래 가장자리 금속 띠 */ linear-gradient(#0a0f1c, #0a0f1c), linear-gradient(#0a0f1c, #0a0f1c), /* 3·4. 그 안쪽 네온 에너지 라인 (청록 / 자주) */ linear-gradient(90deg, rgba(90, 226, 255, 0.30) 0 8%, rgba(150, 244, 255, 0.85) 14% 22%, rgba(90, 226, 255, 0.35) 30% 44%, rgba(160, 246, 255, 0.8) 52% 60%, rgba(90, 226, 255, 0.3) 70% 84%, rgba(150, 244, 255, 0.75) 90% 100%), linear-gradient(90deg, rgba(196, 130, 255, 0.28) 0 10%, rgba(226, 176, 255, 0.8) 18% 26%, rgba(196, 130, 255, 0.3) 36% 50%, rgba(230, 184, 255, 0.75) 58% 68%, rgba(196, 130, 255, 0.26) 78% 92%), /* 5·6. 패널 이음매 — 아주 약하게. 여기가 밝아지면 캐릭터가 묻힙니다. */ repeating-linear-gradient(90deg, rgba(150, 190, 240, 0.055) 0 1px, transparent 1px 118px), repeating-linear-gradient(0deg, rgba(150, 190, 240, 0.04) 0 1px, transparent 1px 74px), /* 7. 패널 모서리 리벳 */ radial-gradient(circle 1.2px at 6px 6px, rgba(176, 208, 245, 0.16) 0 100%, transparent 0), /* 8. 금속 결 */ repeating-linear-gradient(97deg, rgba(170, 200, 240, 0.018) 0 1px, transparent 1px 5px); --track-tex-size: 100% 9%, 100% 9%, /* 네온 두 줄은 90deg 그라디언트라 폭이 곧 무늬 주기입니다. 100% 로 두면 월드가 길어질수록 무늬가 통째로 늘어나 버려서, px 주기로 고정해 되풀이시킵니다. 두 줄의 주기를 다르게 잡아 위아래가 같은 자리에서 만나지 않게 했습니다. */ 433px 2.5px, 571px 2.5px, auto, auto, 118px 74px, auto; --track-tex-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat, repeat, repeat, repeat; --track-tex-pos: 0 0, 0 100%, 0 9%, 0 91%, 0 0, 0 0, 0 0, 0 0; /* 달릴 때 뒤로 남는 것 — 먼지가 아니라 별가루입니다 */ --dust: rgba(190, 232, 255, 0.95); --sky-a: #05070f; --sky-b: #0b1024; --sky-c: #131a35; --hill-1: #1a2242; --hill-2: #0c1122; --ray: rgba(140, 180, 255, 0.05); /* 바닥 장식은 쓰지 않습니다 — 행성 하나만 배경에 둡니다(아래 .hills 규칙) */ --deco-1: ''; --deco-2: ''; --deco-3: ''; /* 가까운 별 여섯(반짝임) + 유성 넷(아주 가끔) */ --amb-1: ''; --amb-1-anim: ambTwinkle; --amb-1-size: 3px; --amb-1-op: 0.9; --amb-2: ''; --amb-2-anim: ambDrift; --amb-2-size: 3px; --amb-2-op: 0.9; } /* ── 바다 — 수중 레이스 ───────────────────────────────── 설계 원칙 세 가지입니다. ① **트랙 안이 곧 물이어야 합니다.** 예전에는 가운데가 밝은 모래(#e2dfcd)라 바깥 파란 배경과 따로 놀아서 '수영장 레인'처럼 보였습니다. 지금은 위에서 아래로 밝은 청록 → aqua blue → 조금 깊은 청록으로 내려가고, 맨 아래 7% 만 얕은 모래바닥입니다. 수심이 세로로 읽히는 게 핵심입니다. ② **장식은 위아래 가장자리에만.** 캐릭터가 달리는 가운데는 물빛만 둡니다. 위쪽은 수면과 햇빛, 아래쪽은 모래바닥에 산호·해초·조개·자갈. 예전에 위아래에 같이 깔려 있던 분홍 원(산호)은 지웠습니다 — 천장에 산호가 매달린 꼴이라 바다로 안 읽히고 사탕처럼 보였습니다. ③ 캐릭터 위에는 아무 것도 얹지 않습니다. 연출은 전부 러너보다 뒤에 있습니다. 자세한 연출은 아래 'body[data-track="ocean"] …' 규칙들에 이어집니다. */ body[data-track="ocean"], .map[data-value="ocean"] { /* 수면 바로 아래(밝은 청록) → aqua blue → 깊은 청록 → 얕은 모래바닥. 93~96% 사이의 탁한 색은 물과 모래가 섞이는 자리입니다 — 여기가 없으면 모래가 띠처럼 뚝 끊겨 보입니다. */ --track-bg: linear-gradient(180deg, #b6f2ec 0%, #79dfe2 5%, #45c4da 16%, #2ba7c9 34%, #1e8bb2 50%, #17749d 66%, #14638a 79%, #196279 85%, #4d7a7c 89.5%, #9d8a6b 93.5%, #b09b78 97%, #8e7a58 100%); --track-line: rgba(214, 248, 255, 0.55); /* 층 순서 = 그리는 순서(앞이 위). 타일 높이를 전부 100% 로 두고 '타일 안에서의 Y' 로 높이를 정합니다 — 그래야 트랙이 얇든(레인 26px) 두껍든(팩 400px) 바닥에 그대로 붙습니다. 타일 폭은 서로 배수가 아닌 값으로 잡아 되풀이가 눈에 안 띄게 했습니다. */ --track-tex: /* 1. 조개 — 모래 위에 아주 드물게 */ radial-gradient(9px 6px at 44% 95.4%, rgba(255, 246, 250, 0.92), rgba(236, 180, 202, 0.6) 56%, transparent 70%), /* 2. 자갈 */ radial-gradient(8px 5px at 71% 97%, rgba(196, 214, 220, 0.72), rgba(120, 148, 158, 0.48) 58%, transparent 74%), /* 3~5. 산호 한 그루 — 폭이 같은 세 층이라 늘 같은 자리에 모여 가지가 갈라진 꼴이 됩니다. 반원 하나로 두면 산호가 아니라 물방울이나 사탕으로 보입니다. 뿌리를 99% 에 두어 아래 테두리에 잘리지 않고 모래 위에 서 있게 합니다. */ radial-gradient(9px 40px at 14% 99%, rgba(206, 78, 106, 0.75) 0 100%, transparent 0), radial-gradient(7px 27px at 17.8% 99%, rgba(226, 116, 84, 0.7) 0 100%, transparent 0), radial-gradient(6px 17px at 11% 99%, rgba(188, 66, 98, 0.72) 0 100%, transparent 0), /* 6. 청록 산호 — 폭이 달라 붉은 그루와 엇갈려 섭니다 */ radial-gradient(8px 29px at 62% 99%, rgba(44, 152, 146, 0.7) 0 100%, transparent 0), /* 6b~6d. 두 번째 산호 무리 — **주기를 다르게 한 변주**입니다. 월드가 화면 여섯 개까지 길어지면서, 장식 하나가 한 가지 주기로만 되풀이되면 '같은 배경을 복사해 붙인' 티가 납니다. 같은 종류를 서로 배수가 아닌 주기로 한 벌 더 깔아 두면 두 리듬이 어긋나면서 되풀이가 눈에 안 띕니다. */ radial-gradient(7px 34px at 41% 99%, rgba(178, 74, 122, 0.62) 0 100%, transparent 0), radial-gradient(5px 21px at 45% 99%, rgba(214, 108, 96, 0.58) 0 100%, transparent 0), radial-gradient(6px 24px at 77% 99%, rgba(62, 170, 158, 0.55) 0 100%, transparent 0), /* 6e. 아주 넓은 바닥 명암 — 한 화면에 다 안 들어오는 주기라 '리듬' 으로 안 읽히고 월드를 지나가는 동안 밝기만 느리게 오르내립니다. */ radial-gradient(420px 40px at 50% 100%, rgba(58, 44, 20, 0.16), transparent 76%), /* 7. 해초 한 포기 — 타일을 아주 넓게 잡아 화면에 한두 포기만 보입니다. 가로 반지름만 px 로 두고 세로는 타일 높이에 맡겨서 끝이 뾰족한 잎이 됩니다. 가장자리에서 흔들리는 해초는 .track-glow 가 따로 맡습니다. */ radial-gradient(7px 100% at 31% 100%, rgba(24, 108, 84, 0.5) 0 100%, transparent 0), /* 8~9. 모래 얼룩 — 가로줄이 생기지 않게 넓고 낮은 타원으로만 깝니다 */ radial-gradient(96px 16px at 38% 96%, rgba(122, 100, 68, 0.26), transparent 76%), radial-gradient(128px 13px at 74% 98.6%, rgba(168, 146, 104, 0.24), transparent 78%), /* 10. 마린 스노우 — 물속에 떠 있는 아주 작은 부유물 */ radial-gradient(circle 1.5px at 50% 50%, rgba(228, 252, 255, 0.28), transparent 70%), /* 11. 수면 잔물결 — 위 가장자리에 매달린 밝은 물결 */ radial-gradient(46px 10px at 50% 0, rgba(226, 255, 255, 0.5), transparent 74%); /* 주기는 서로 배수가 아닌 값(소수에 가깝게)으로 잡습니다 — 두 층이 같은 자리에서 다시 만나는 지점이 월드보다 훨씬 멀어야 되풀이가 안 보입니다. */ --track-tex-size: 431px 100%, 337px 100%, 683px 100%, 683px 100%, 683px 100%, 521px 100%, 1013px 100%, 1013px 100%, 877px 100%, 2311px 100%, 757px 26%, 293px 100%, 419px 100%, 137px 119px, 92px 100%; --track-tex-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat, repeat-x; --track-tex-pos: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 100%, 0 0, 0 0, 0 0, 0 0; /* 달릴 때 뒤로 남는 것 — 먼지가 아니라 기포입니다 */ --dust: rgba(236, 252, 255, 0.95); --sky-a: #073d63; --sky-b: #12719b; --sky-c: #3ea8bf; --hill-1: #12617e; --hill-2: #084a66; /* 화면 전체에 내리는 햇빛 — 물속이라는 인상이 트랙 밖까지 이어지게 조금 올렸습니다 */ --ray: rgba(190, 240, 255, 0.11); --deco-1: '\1FAB8'; --deco-2: '\1F41A'; --deco-3: '\1F33F'; /* 배경에 떠다니는 것 — 기포 여섯, 멀리 지나가는 물고기 넷 */ --amb-1: ''; --amb-1-anim: ambRise; --amb-1-size: 7px; --amb-1-op: 0.5; --amb-2: '\1F41F'; --amb-2-anim: ambDrift; --amb-2-size: 15px; --amb-2-op: 0.32; } /* ── 용암 — 화산 지대 ──────────────────────────────────── 설계 원칙 두 가지입니다. ① 캐릭터가 달리는 트랙 중앙은 거의 검게 두고 단순하게 유지합니다. 빛은 전부 위아래 가장자리(암반이 갈라진 이음매)로 몰아 둡니다. 예전에는 --track-bg 한가운데(47%)에 #ff7a2f 밝은 띠가 있어서 캐릭터가 묻혔습니다. ② 화면 전체를 빨갛게 칠하지 않습니다. 붉은 것은 하늘 위쪽·분화구·균열뿐이고 나머지는 검은 현무암입니다. 자세한 연출은 아래 'body[data-track="lava"] …' 규칙들에 이어집니다. */ body[data-track="lava"], .map[data-value="lava"] { /* 가운데가 가장 어둡고 위아래로 갈수록 조금 따뜻해집니다 */ --track-bg: radial-gradient(140% 60% at 50% 50%, #0f0a09 0 46%, rgba(15, 10, 9, 0) 78%), linear-gradient(180deg, #2a1410 0%, #191110 12%, #16100e 42%, #16100e 60%, #191110 88%, #2a1410 100%); --track-line: rgba(255, 170, 90, 0.55); /* 층 순서 = 그리는 순서(앞이 위). 검은 암반(1~4)을 위아래 가장자리에 얹고, 그 '밑에' 발광층(5~6)을 깔았습니다. 그래서 빛이 암반 덩어리 사이사이로 새어 나옵니다 — 이게 '균열에서 빛나는' 모양입니다. 발광층만 lavaFlow 로 옆으로 흘러서 용암이 천천히 흐르는 것처럼 보입니다. */ --track-tex: /* 1·2. 위 암반 — 판판한 띠 + 아래로 불룩한 자갈 */ radial-gradient(circle at 50% 0, #0b0706 0 11px, transparent 12px), /* 1b·3b. 타일 폭이 다른 두 번째 자갈 — 26px 하나만 쓰면 같은 반원이 26px 마다 정확히 되풀이돼 눈에 띕니다(FFT 진폭 63.6 실측). 37px 을 겹쳐 주기를 깨뜨립니다. */ radial-gradient(circle at 50% 0, #0d0908 0 8px, transparent 9px), linear-gradient(#0b0706, #0b0706), /* 3·4. 아래 암반 */ radial-gradient(circle at 50% 100%, #0b0706 0 11px, transparent 12px), radial-gradient(circle at 50% 100%, #0d0908 0 8px, transparent 9px), linear-gradient(#0b0706, #0b0706), /* 5·6. 암반 밑에 깔린 용암 — 심지는 거의 흰색이고 아래로 빠르게 죽습니다. 세로로 빨리 죽여야 빛이 트랙 가운데로 번지지 않습니다(캐릭터가 묻히는 걸 막습니다). */ radial-gradient(54% 96% at 50% 0, #fff2c8 0 12%, #ffc44a 30%, rgba(255, 108, 18, 0.75) 56%, rgba(150, 30, 6, 0) 84%), radial-gradient(58% 96% at 50% 100%, #ffeab4 0 10%, #ffab34 28%, rgba(236, 82, 14, 0.7) 54%, rgba(150, 30, 6, 0) 82%), /* 7~11. 균열 다섯 조각 — 상자 하나에 사선 띠 하나씩 그려 no-repeat 로 흩어 놓습니다. repeating-linear-gradient 로 그리면 트랙을 끝에서 끝까지 가로지르는 무한 직선이 되어 균열이 아니라 레이저처럼 보이고, 무엇보다 캐릭터보다 눈에 띕니다. 심지는 축 길이의 1%(약 2px)뿐이고 양옆에 어두운 어깨를 둡니다 — 어깨가 없으면 통짜 막대기처럼 보이고 '갈라진 틈'으로 안 읽힙니다. */ linear-gradient(104deg, transparent 0 46%, rgba(6,3,2,0.42) 46% 49%, rgba(176,30,6,0.80) 49% 49.6%, rgba(255,118,22,0.90) 49.6% 50%, rgba(255,220,126,0.95) 50% 50.4%, rgba(255,108,18,0.88) 50.4% 50.8%, rgba(168,26,5,0.75) 50.8% 51.4%, rgba(6,3,2,0.4) 51.4% 54%, transparent 54%), linear-gradient(74deg, transparent 0 46%, rgba(6,3,2,0.42) 46% 49%, rgba(176,30,6,0.66) 49% 49.6%, rgba(255,118,22,0.74) 49.6% 50%, rgba(255,220,126,0.78) 50% 50.4%, rgba(255,108,18,0.72) 50.4% 50.8%, rgba(168,26,5,0.61) 50.8% 51.4%, rgba(6,3,2,0.4) 51.4% 54%, transparent 54%), linear-gradient(96deg, transparent 0 46%, rgba(6,3,2,0.42) 46% 49%, rgba(176,30,6,0.74) 49% 49.6%, rgba(255,118,22,0.83) 49.6% 50%, rgba(255,220,126,0.87) 50% 50.4%, rgba(255,108,18,0.81) 50.4% 50.8%, rgba(168,26,5,0.69) 50.8% 51.4%, rgba(6,3,2,0.4) 51.4% 54%, transparent 54%), linear-gradient(118deg, transparent 0 46%, rgba(6,3,2,0.42) 46% 49%, rgba(176,30,6,0.59) 49% 49.6%, rgba(255,118,22,0.67) 49.6% 50%, rgba(255,220,126,0.70) 50% 50.4%, rgba(255,108,18,0.65) 50.4% 50.8%, rgba(168,26,5,0.55) 50.8% 51.4%, rgba(6,3,2,0.4) 51.4% 54%, transparent 54%), linear-gradient(84deg, transparent 0 46%, rgba(6,3,2,0.42) 46% 49%, rgba(176,30,6,0.69) 49% 49.6%, rgba(255,118,22,0.77) 49.6% 50%, rgba(255,220,126,0.82) 50% 50.4%, rgba(255,108,18,0.76) 50.4% 50.8%, rgba(168,26,5,0.65) 50.8% 51.4%, rgba(6,3,2,0.4) 51.4% 54%, transparent 54%), /* 10~11. 암반 얼룩 — 타일 크기를 서로 배수가 아니게 잡아야 물방울무늬 격자가 안 보입니다. */ radial-gradient(46px 27px at 34% 40%, rgba(150, 118, 104, 0.14), transparent 72%), radial-gradient(29px 19px at 71% 67%, rgba(112, 84, 74, 0.16), transparent 72%), radial-gradient(64px 38px at 18% 74%, rgba(96, 62, 50, 0.13), transparent 74%), /* 12. 고운 결 — 주기를 아주 짧게 잡아 '무늬'가 아니라 '거친 질감'으로 읽히게 합니다. */ repeating-linear-gradient(116deg, rgba(255, 158, 96, 0.014) 0 1px, transparent 1px 5px); --track-tex-size: 26px 16px, 37px 11px, 100% 10%, 26px 16px, 37px 11px, 100% 10%, 120px 17%, 132px 17%, /* 균열 다섯은 원래 no-repeat 이라 트랙에 한 번씩만 그려졌습니다. 트랙이 화면 하나였을 때는 그게 맞았지만, 월드가 화면 여섯 개로 길어지면 왼쪽 끝에만 남고 나머지는 민무늬 현무암이 됩니다. 서로 배수가 아닌 넓은 주기로 되풀이시켜 월드 전체에 흩습니다. */ 709px 52px, 941px 44px, 1153px 38px, 827px 58px, 1289px 34px, 97px 83px, 131px 113px, 179px 149px, auto; --track-tex-repeat: repeat-x, repeat-x, no-repeat, repeat-x, repeat-x, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat, repeat, repeat, repeat; /* 균열은 이제 되풀이되므로 가로 값은 '위상' 입니다 — 서로 다른 px 로 어긋나게 둡니다. 세로 값(34~78%)은 그대로라 균열이 트랙 아래위 여러 높이에 흩어집니다. */ --track-tex-pos: 0 10%, 0 10%, 0 0, 0 90%, 0 90%, 0 100%, 0 0, 0 100%, 37px 34%, 211px 62%, 463px 28%, 89px 58%, 617px 78%, 0 0, 0 0, 0 0, 0 0; /* 달릴 때 뒤로 튀는 것 — 재가 아니라 불티입니다 */ --dust: rgba(255, 168, 62, 0.95); /* 검붉은 하늘. 위쪽만 어둡고 지평선 근처가 달아오릅니다 */ --sky-a: #150913; --sky-b: #451613; --sky-c: #1d0d0b; --hill-1: #2a1310; --hill-2: #170c0a; --ray: rgba(255, 120, 50, 0.10); /* 장식은 이모지 대신 연기 기둥으로 그립니다(아래 .deco 규칙) */ --deco-1: ''; --deco-2: ''; --deco-3: ''; /* 떠다니는 것도 이모지가 아니라 발광하는 불티 점입니다. 개수는 기존 10개 그대로. */ /* .amb 여섯은 위로 오르는 불티, .amb2 넷은 천천히 내려앉는 화산재입니다. 개수는 다른 테마와 같은 10개 그대로이고 늘리지 않습니다. */ --amb-1: ''; --amb-1-anim: ambRise; --amb-1-size: 5px; --amb-1-op: 0.75; --amb-2: ''; --amb-2-anim: ambFall; --amb-2-size: 4px; --amb-2-op: 0.4; } /* ── 사탕 — Candy Land ──────────────────────────────────── 여덟 테마 중 가장 화려한 쪽이지만, 화려한 것은 전부 '가장자리와 배경'에만 둡니다. 달리는 바닥은 분홍이 아니라 웨하스/쿠키 길입니다 — 분홍 바탕에 노란 오리·흰 토끼를 올리면 캐릭터가 묻힙니다. 연출은 아래 'body[data-track="candy"] …' 규칙들에 이어집니다. */ body[data-track="candy"], .map[data-value="candy"] { /* 웨하스 — 밝기를 세 번 바꿔 가며 재고 고른 값입니다(트랙 평균 휘도 190). 더 밝게(201) 하면 흰 토끼·노란 오리가 묻히고(최악 5.6%), 더 어둡게(166) 하면 갈색 곰이 묻힙니다(최악 7.8%). 190 이 세 캐릭터를 동시에 살리는 지점입니다(최악 2.7%). */ --track-bg: linear-gradient(180deg, #5c3620 0%, #e8caa4 8%, #dbb68c 34%, #d7b087 52%, #e3c39c 88%, #5c3620 100%); --track-line: rgba(255, 246, 232, 0.7); /* 층 순서 = 그리는 순서(앞이 위). 사탕은 가장자리에만, 가운데는 웨하스 결만. */ --track-tex: /* 1·2. 위아래 가장자리 사탕 — 빨강·흰 소용돌이(페퍼민트) */ repeating-radial-gradient(circle at 50% 0, #ef5f77 0 3px, #fff3f6 3px 6px, #ef5f77 6px 9px, transparent 9px), repeating-radial-gradient(circle at 50% 100%, #6fc9a8 0 3px, #fff8ee 3px 6px, #f2a13f 6px 9px, transparent 9px), /* 3·4. 그 안쪽 초콜릿 테두리 */ linear-gradient(#5d3620, #5d3620), linear-gradient(#5d3620, #5d3620), /* 5·6. 초콜릿 밑에서 배어 나오는 크림 */ linear-gradient(180deg, rgba(255, 246, 226, 0.55), rgba(255, 246, 226, 0) 100%), linear-gradient(0deg, rgba(255, 246, 226, 0.5), rgba(255, 246, 226, 0) 100%), /* 7~9. 초코칩과 쿠키 부스러기 — 아주 드물게, 타일을 서로 배수가 아니게 */ radial-gradient(5px 4px at 50% 50%, rgba(92, 54, 30, 0.55), transparent 74%), radial-gradient(3px 3px at 50% 50%, rgba(120, 74, 42, 0.45), transparent 76%), radial-gradient(4px 3px at 50% 50%, rgba(255, 246, 226, 0.5), transparent 76%), /* 10·11. 웨하스 격자 — 아주 옅게. 여기가 진해지면 캐릭터가 묻힙니다. */ repeating-linear-gradient(90deg, rgba(120, 76, 44, 0.09) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, rgba(120, 76, 44, 0.07) 0 1px, transparent 1px 26px), /* 12. 구운 결 */ repeating-linear-gradient(102deg, rgba(120, 76, 44, 0.05) 0 1px, transparent 1px 6px); --track-tex-size: 18px 11px, 18px 11px, 100% 7%, 100% 7%, 100% 17%, 100% 15%, 233px 197px, 151px 127px, 311px 263px, auto, auto, auto; --track-tex-repeat: repeat-x, repeat-x, no-repeat, no-repeat, repeat-x, repeat-x, repeat, repeat, repeat, repeat, repeat, repeat; --track-tex-pos: 0 0, 0 100%, 0 0, 0 100%, 0 7%, 0 93%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; /* 달릴 때 뒤로 남는 것 — 먼지가 아니라 설탕가루입니다 */ --dust: rgba(255, 246, 252, 0.98); --sky-a: #ffc2e2; --sky-b: #ffe6f4; --sky-c: #fff3dd; --hill-1: #ffd8ec; --hill-2: #f6b0d4; --ray: rgba(255, 255, 255, 0.14); /* 장식은 셋뿐입니다 — 막대사탕·컵케이크·젤리 */ --deco-1: '\1F36D'; --deco-2: '\1F9C1'; --deco-3: '\1F36C'; /* 설탕가루 반짝임 — 크기를 아래 개별 규칙에서 흩어 놓습니다 */ --amb-1: ''; --amb-1-anim: ambTwinkle; --amb-1-size: 5px; --amb-1-op: 0.9; --amb-2: ''; --amb-2-anim: ambTwinkle; --amb-2-size: 3px; --amb-2-op: 0.75; } /* 어두운 하늘 위에 놓이는 카드 밖 텍스트는 밝게 뒤집습니다 */ body[data-track="space"] .race-unit, body[data-track="space"] .race-target { color: #cfc2ff; } body[data-track="lava"] .race-unit, body[data-track="lava"] .race-target { color: #ffcda8; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } /* hidden 속성은 브라우저 기본 스타일의 [hidden]{display:none} 으로 동작하는데, 클래스 선택자가 우선순위에서 이깁니다. 실제로 .countdown{display:grid} 때문에 GO! 오버레이가 영원히 안 사라지는 버그가 있었습니다. 전역으로 못을 박습니다. */ [hidden] { display: none !important; } body { background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 55%, var(--sky-c) 100%); background-attachment: fixed; transition: background 0.4s ease; color: var(--ink); font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } button { font-family: inherit; } /* ── 배경 ───────────────────────────────────────────────── */ .sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .sunburst { position: absolute; top: -40vh; left: 50%; width: 160vmax; height: 160vmax; transform: translateX(-50%); background: repeating-conic-gradient( from 0deg, var(--ray) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 14deg); animation: spin 90s linear infinite; } @keyframes spin { to { transform: translateX(-50%) rotate(360deg); } } .cloud { position: absolute; width: 150px; height: 46px; background: #fff; border-radius: 999px; opacity: 0.9; filter: drop-shadow(0 6px 0 rgba(58, 42, 24, 0.08)); animation: float 46s linear infinite; } .cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; } .cloud::before { width: 66px; height: 66px; top: -28px; left: 22px; } .cloud::after { width: 46px; height: 46px; top: -18px; left: 78px; } .c1 { top: 12%; left: -20%; animation-duration: 52s; } .c2 { top: 28%; left: -30%; transform: scale(0.7); animation-duration: 70s; animation-delay: -20s; } .c3 { top: 6%; left: -40%; transform: scale(1.2); animation-duration: 88s; animation-delay: -45s; opacity: 0.7; } @keyframes float { to { left: 130%; } } /* ── 테마 장식 (바닥에 서 있는 것) ──────────────────────── 내용은 CSS 변수로만 들어옵니다. 테마를 바꾸면 나무 → 선인장 → 산호 → 화산으로 바뀝니다. */ .deco { position: absolute; bottom: 2%; font-size: 90px; opacity: 0.55; line-height: 1; animation: sway 5s ease-in-out infinite; } .deco::before { content: var(--deco); } .d1 { left: 2%; --deco: var(--deco-1); animation-delay: -1s; } .d2 { left: 91%; --deco: var(--deco-2); animation-delay: -3s; font-size: 118px; } .d3 { left: 77%; --deco: var(--deco-3); animation-delay: -2s; font-size: 64px; opacity: 0.4; } @keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } } /* ── 떠다니는 배경 ──────────────────────────────────────── 바다에서는 물고기가 지나가고 기포가 오르고, 우주에서는 별이 흐르고, 눈길에서는 눈이 내리고, 용암에서는 기포가 뽁 하고 터집니다. .amb = 테마 주역(--amb-1), .amb2 = 보조(--amb-2) 움직이는 방식도 테마가 정합니다(--amb-*-anim). */ .ambient { position: absolute; inset: 0; overflow: hidden; } .amb, .amb2 { position: absolute; font-style: normal; line-height: 1; will-change: transform, opacity; } .amb::before { content: var(--amb-1); } .amb2::before { content: var(--amb-2); } .amb { font-size: var(--amb-1-size, 20px); opacity: var(--amb-1-op, 0.6); animation: var(--amb-1-anim, ambDrift) 26s linear infinite; } .amb2 { font-size: var(--amb-2-size, 14px); opacity: var(--amb-2-op, 0.5); animation: var(--amb-2-anim, ambRise) 14s linear infinite; } /* 같은 것들이 한 줄로 몰려 보이지 않게 출발 위치와 시간을 흩습니다 */ .a1 { top: 14%; animation-duration: 24s; animation-delay: -2s; } .a2 { top: 31%; animation-duration: 33s; animation-delay: -11s; } .a3 { top: 48%; animation-duration: 28s; animation-delay: -19s; } .a4 { top: 62%; animation-duration: 38s; animation-delay: -6s; } .a5 { top: 74%; animation-duration: 30s; animation-delay: -24s; } .a6 { top: 22%; animation-duration: 43s; animation-delay: -15s; } .amb2.b1 { left: 12%; animation-duration: 11s; animation-delay: -3s; } .amb2.b2 { left: 38%; animation-duration: 15s; animation-delay: -8s; } .amb2.b3 { left: 63%; animation-duration: 13s; animation-delay: -1s; } .amb2.b4 { left: 86%; animation-duration: 17s; animation-delay: -6s; } /* 오른쪽 → 왼쪽으로 흘러갑니다 (물고기·별·낙엽·사탕) */ @keyframes ambDrift { from { transform: translateX(102vw); } to { transform: translateX(-12vw); } } /* 팔랑팔랑 (나비) */ @keyframes ambFlutter { 0% { transform: translate(102vw, 0) rotate(-6deg); } 25% { transform: translate(76vw, -26px) rotate(8deg); } 50% { transform: translate(50vw, 10px) rotate(-8deg); } 75% { transform: translate(24vw, -20px) rotate(6deg); } 100% { transform: translate(-12vw, 4px) rotate(-6deg); } } /* 위에서 아래로 (눈) — 옆으로도 조금 흘립니다 */ @keyframes ambFall { from { transform: translate(0, -12vh) rotate(0deg); } to { transform: translate(-14vw, 106vh) rotate(220deg); } } /* 아래에서 위로 (기포·연기) */ @keyframes ambRise { from { transform: translate(0, 104vh) scale(0.7); opacity: 0; } 15% { opacity: inherit; } 85% { opacity: inherit; } to { transform: translate(18px, -10vh) scale(1.15); opacity: 0; } } /* 뽁 하고 터집니다 (용암 기포) */ @keyframes ambPop { 0% { transform: translate(0, 96vh) scale(0.25); opacity: 0; } 55% { transform: translate(4px, 62vh) scale(1); opacity: 0.9; } 70% { transform: translate(4px, 58vh) scale(1.5); opacity: 0.55; } 75%, 100% { transform: translate(4px, 58vh) scale(1.9); opacity: 0; } } /* 제자리에서 반짝 (사탕) */ @keyframes ambTwinkle { 0%, 100% { transform: translateY(70vh) scale(0.4); opacity: 0; } 35% { transform: translateY(52vh) scale(1); opacity: 0.9; } 70% { transform: translateY(34vh) scale(0.5); opacity: 0; } } .hills { position: absolute; left: -5%; right: -5%; bottom: -60px; height: 220px; background: radial-gradient(70% 100% at 20% 100%, var(--hill-1) 60%, transparent 61%), radial-gradient(60% 100% at 70% 100%, var(--hill-2) 60%, transparent 61%), radial-gradient(80% 100% at 100% 100%, var(--hill-1) 60%, transparent 61%); opacity: 0.55; } /* ── 상단바 ─────────────────────────────────────────────── */ /* 로고를 뺀 뒤로는 소리 버튼만 남아서, 여기가 두꺼우면 본문이 통째로 아래로 밀립니다. 높이를 고정하고 main 의 min-height 계산에도 같은 값을 씁니다. */ .topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--topbar-h); max-width: 1360px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 36px); } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; } .topbar-left { min-width: 0; flex-wrap: wrap; } /* 배속·중단은 레이스 화면에서만. 레이스 머리(.race-head)에 두면 상단바 바로 아래에 버튼 줄이 하나 더 생겨 두 줄로 보입니다 — 상단바 오른쪽에 붙여 한 줄로 만듭니다. */ .topbar-race { display: none; align-items: center; gap: 8px; } body[data-screen="screen-race"] .topbar-race { display: inline-flex; } /* ── 미니게임 홈으로 돌아가기 ──────────────────────────── 레이스 중에는 감춥니다. 실수로 누르면 한 판이 통째로 날아가는데, 그 자리에는 이미 [중단] 이 있습니다 — 그만두려면 그쪽을 쓰는 게 맞습니다. .btn 이