/* style.css — 번개 카트 공통 스타일 (UI 에이전트 소유) 구성: 1 토큰·바탕 2 부품(버튼·칩·세그·토글·슬라이더·막대·그림) 3 화면 뼈대·전환 4 화면별 5 창·알림 6 HUD 7 반응형 크기는 거의 rem — 루트 글자 크기가 화면 크기를 따라가서 1280×720·1920×1080 이 같은 모양으로 보인다. */ /* ═════════ 1. 토큰·바탕 ═════════ */ :root { --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; --ink: #1a1036; --navy: #141a4a; --navy2: #0b0f33; --blue: #2f6bff; --cyan: #19d3ff; --yellow: #ffd21f; --orange: #ff8a1f; --pink: #ff4fa3; --green: #3ddc5a; --red: #ff3b4f; --purple: #8e5cff; --line: rgba(255, 255, 255, .16); --glass1: rgba(44, 58, 160, .78); --glass2: rgba(16, 20, 74, .86); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --ease-in: cubic-bezier(.55, 0, .75, .2); --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --tap: 44px; } /* 화면이 커지면 글자도 커진다 (16:9 기준 1280×720 ≈ 16px, 1920×1080 ≈ 24px) */ html { font-size: clamp(13px, min(1.45vw, 2.25vh), 28px); } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--navy2); color: #fff; } body { font-family: var(--font); line-height: 1.4; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none; } *, *::before, *::after { box-sizing: border-box; } button, input, textarea, select { font: inherit; color: inherit; } input, textarea { -webkit-user-select: text; user-select: text; } canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } #hud { z-index: 10; } #ui { z-index: 20; } [hidden] { display: none !important; } /* 부팅 화면 (index.html) */ .boot { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; text-align: center; gap: .6rem; background: radial-gradient(ellipse at 50% 30%, #2f5bff 0%, #141a4a 60%, #0b0f33 100%); transition: opacity .5s ease, visibility .5s; } .boot.gone { opacity: 0; visibility: hidden; pointer-events: none; } .boot-title { font-size: 3rem; font-weight: 900; letter-spacing: -.03em; color: #ffe14d; text-shadow: 0 .12em 0 var(--ink), 0 0 1.2em rgba(255, 210, 31, .45); animation: bootPulse 1.4s ease-in-out infinite; } .boot-sub { opacity: .8; font-weight: 700; } @keyframes bootPulse { 50% { transform: scale(1.04); } } /* 스크롤 막대 (스크롤 상자 안) */ .ui-root ::-webkit-scrollbar { width: .55rem; height: .55rem; } .ui-root ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 999px; border: .15rem solid transparent; background-clip: padding-box; } .ui-root ::-webkit-scrollbar-track { background: transparent; } /* ── 외곽선 큰 글씨: ::before = 굵은 테두리(뒤), 본문 = 단색, ::after = 그라디언트(위) ── */ .otext { --g1: #ffffff; --g2: #ffe680; --st: var(--ink); --sw: .2em; position: relative; display: inline-block; isolation: isolate; color: var(--g1); font-weight: 900; letter-spacing: -.02em; line-height: 1.12; white-space: pre-wrap; } .otext::before, .otext::after { content: attr(data-text); position: absolute; inset: 0; white-space: inherit; pointer-events: none; } .otext::before { z-index: -1; color: var(--st); -webkit-text-fill-color: var(--st); -webkit-text-stroke: var(--sw) var(--st); text-shadow: 0 .09em 0 var(--st), 0 .14em .22em rgba(0, 0, 0, .38); } .otext::after { background: linear-gradient(180deg, var(--g1) 28%, var(--g2) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* 아이콘 */ .ico { display: inline-flex; width: 1.2em; height: 1.2em; flex: none; align-items: center; justify-content: center; } .ico svg { width: 100%; height: 100%; display: block; } /* 키 모양 */ .key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.6em; padding: 0 .45em; border-radius: .38em; font: 800 .78em/1 var(--font); color: var(--ink); white-space: nowrap; background: linear-gradient(#ffffff, #d9def0); box-shadow: 0 .16em 0 #8a93b8, 0 .2em .4em rgba(0, 0, 0, .3); margin: 0 .12em; vertical-align: .05em; } /* ═════════ 2. 부품 ═════════ */ /* 유리판 (패널) */ .glass, .my-card, .opt-panel, .set-card, .help-card, .lb-room, .chat-panel, .code-box, .cn-card, .pz-card, .modal-card, .room-list, .sg-preview, .pf-preview, .gr-detail, .lb-mybar, .rf-col, .res-table, .tech-card, .item-card { background: linear-gradient(180deg, var(--glass1), var(--glass2)); border: 2px solid var(--line); border-radius: 1.2rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 .55rem 1.5rem rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sec-title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; font-size: 1rem; font-weight: 900; letter-spacing: -.01em; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); } .sec-title .ico { color: var(--yellow); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); } .sec-title small, .room-count { padding: .05rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .15); font-size: .72rem; font-weight: 800; } /* ── 버튼 ── */ .btn { --b1: #5aa2ff; --b2: #2f5bff; --bd: #1a2c9a; --fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: max(var(--tap), 2.75rem); padding: .5rem 1.25rem; border: 0; border-radius: .95rem; font-weight: 900; font-size: 1rem; line-height: 1.1; color: var(--fg); white-space: nowrap; cursor: pointer; background: linear-gradient(180deg, var(--b1), var(--b2)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .16), 0 .28rem 0 var(--bd), 0 .5rem 1rem rgba(0, 0, 0, .3); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); transition: transform .16s var(--ease-back), box-shadow .14s ease, filter .14s ease; -webkit-tap-highlight-color: transparent; outline: none; } .btn::before { content: ''; position: absolute; left: .35rem; right: .35rem; top: .2rem; height: 46%; border-radius: .75rem .75rem .5rem .5rem; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; } .btn .ico { width: 1.25em; height: 1.25em; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); } .btn-label { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem; position: relative; } .btn-sub { font-size: .66em; font-weight: 700; opacity: .85; text-shadow: none; } .btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08) saturate(1.05); } .btn:active:not(:disabled) { transform: translateY(.22rem); filter: brightness(.96); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .16), 0 .06rem 0 var(--bd), 0 .2rem .4rem rgba(0, 0, 0, .3); } .btn:disabled { cursor: not-allowed; filter: grayscale(.7) brightness(.75); opacity: .85; } .btn-yellow { --b1: #fff06b; --b2: #ffb21f; --bd: #b85f00; --fg: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } .btn-blue { --b1: #5aa2ff; --b2: #2f5bff; --bd: #182a92; } .btn-green { --b1: #7cf08f; --b2: #1fb548; --bd: #0e6e2c; } .btn-red { --b1: #ff8593; --b2: #e5243b; --bd: #8a0c1f; } .btn-pink { --b1: #ff93d4; --b2: #ff3fa0; --bd: #9c1259; } .btn-purple { --b1: #b896ff; --b2: #7a45ff; --bd: #4219a8; } .btn-glass { --b1: rgba(255, 255, 255, .24); --b2: rgba(255, 255, 255, .08); --bd: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .26), inset 0 2px 0 rgba(255, 255, 255, .3), 0 .28rem 0 var(--bd), 0 .5rem 1rem rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn-glass::before { opacity: .45; } .btn-sm { min-height: max(var(--tap), 2.3rem); padding: .35rem .9rem; font-size: .88rem; border-radius: .8rem; } .btn-lg { min-height: max(var(--tap), 3.3rem); padding: .55rem 1.6rem; font-size: 1.18rem; border-radius: 1.1rem; } .btn-xl { min-height: max(var(--tap), 3.9rem); padding: .6rem 2.2rem; font-size: 1.5rem; border-radius: 1.25rem; letter-spacing: -.02em; } .btn-xl .ico { width: 1.1em; height: 1.1em; } .btn-icon { padding: 0; width: max(var(--tap), 2.75rem); min-width: max(var(--tap), 2.75rem); border-radius: .9rem; } .btn-back { --b1: rgba(255, 255, 255, .22); --b2: rgba(255, 255, 255, .06); --bd: rgba(0, 0, 0, .38); padding: .35rem 1.1rem .35rem .7rem; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3), 0 .24rem 0 var(--bd), 0 .4rem .9rem rgba(0, 0, 0, .25); } .btn-back::before { opacity: .4; border-radius: 999px; } .btn-back:hover .ico { animation: nudgeL .5s ease; } @keyframes nudgeL { 40% { transform: translateX(-.25rem); } } .btn.pulse { animation: btnPulse 1.5s ease-in-out infinite; } @keyframes btnPulse { 0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .16), 0 .28rem 0 var(--bd), 0 .5rem 1rem rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 230, 80, .55); } 50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .16), 0 .28rem 0 var(--bd), 0 .5rem 1rem rgba(0, 0, 0, .3), 0 0 0 .55rem rgba(255, 230, 80, 0); } } .btn-refresh.spin .ico { animation: spin .8s linear infinite; } /* 포커스 고리 — 키보드·게임패드로 움직일 때만 (마우스 클릭엔 안 보이게) */ .ui-root :focus { outline: none; } .ui-root.kbd :focus-visible, .ui-root.kbd :focus { outline: .2rem solid #fff; outline-offset: .2rem; box-shadow: 0 0 0 .42rem rgba(255, 210, 31, .85), 0 0 1.4rem .3rem rgba(255, 210, 31, .5); } .ui-root.kbd .btn:focus { transform: translateY(-2px) scale(1.03); } .ui-root.kbd .btn:focus::after, .ui-root.kbd .tile:focus::after, .ui-root.kbd .char-card:focus::after, .ui-root.kbd .kart-card:focus::after, .ui-root.kbd .track-card:focus::after { content: ''; position: absolute; left: -.55rem; top: 50%; width: 0; height: 0; transform: translate(-100%, -50%); border: .45rem solid transparent; border-left: .6rem solid #ffd21f; filter: drop-shadow(0 2px 0 var(--ink)); animation: caret .7s ease-in-out infinite; } @keyframes caret { 50% { transform: translate(-60%, -50%); } } /* ── 칩 ── */ .chip { display: inline-flex; align-items: center; gap: .3em; padding: .22em .65em; border-radius: 999px; white-space: nowrap; font-size: .78rem; font-weight: 800; line-height: 1.2; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 2px 0 rgba(0, 0, 0, .2); } .chip .ico { width: 1.05em; height: 1.05em; } .chip-yellow { background: linear-gradient(#ffe95c, #ffb21f); color: var(--ink); border-color: #fff3a6; } .chip-green { background: linear-gradient(#6fe885, #20b247); border-color: #b5ffc2; } .chip-red { background: linear-gradient(#ff7b8a, #e5243b); border-color: #ffc2ca; } .chip-pink { background: linear-gradient(#ff8fd0, #ff3fa0); border-color: #ffd0ec; } .chip-blue { background: linear-gradient(#5ce1ff, #2f6bff); border-color: #c4f3ff; } .chip-purple { background: linear-gradient(#b896ff, #7a45ff); border-color: #e2d4ff; } .chip-team { background: linear-gradient(90deg, #ff4d4d 50%, #3d8bff 50%); border-color: rgba(255, 255, 255, .5); } button.chip { cursor: pointer; min-height: max(36px, 2rem); transition: transform .15s var(--ease-back), background .15s; border: 1px solid rgba(255, 255, 255, .25); } button.chip:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .26); } button.chip:active { transform: translateY(1px); } .color-dot { display: inline-block; width: .85em; height: .85em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); vertical-align: -.08em; flex: none; } /* ── 세그먼트 ── */ .seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .25rem; border-radius: 999px; background: rgba(5, 8, 35, .45); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .12); isolation: isolate; } .seg-thumb { position: absolute; z-index: -1; top: .25rem; bottom: .25rem; left: .25rem; width: calc((100% - .5rem) / var(--n, 2)); transform: translateX(calc(100% * var(--i, 0))); border-radius: 999px; background: linear-gradient(#fff06b, #ffb21f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 .18rem 0 #b85f00, 0 .3rem .6rem rgba(0, 0, 0, .3); transition: transform .32s var(--ease-back), background .2s; } .seg-opt { appearance: none; border: 0; background: none; cursor: pointer; color: #fff; font-weight: 800; font-size: .9rem; white-space: nowrap; min-height: max(40px, 2.4rem); padding: .3rem .95rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; transition: color .2s; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); } .seg-opt .ico { width: 1.1em; height: 1.1em; } .seg-opt.on { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } .seg-opt:not(.on):hover { color: #ffe680; } .seg-sm .seg-opt { min-height: max(38px, 2.1rem); padding: .2rem .75rem; font-size: .82rem; } .seg.readonly { opacity: .7; } .seg.readonly .seg-opt { cursor: default; } .seg-team:has(.seg-opt[data-value="red"].on) .seg-thumb { background: linear-gradient(#ff8593, #e5243b); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 .18rem 0 #8a0c1f; } .seg-team:has(.seg-opt[data-value="blue"].on) .seg-thumb { background: linear-gradient(#7ab8ff, #2f5bff); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 .18rem 0 #182a92; } .seg-team .seg-opt.on { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); } /* ── 숫자 올리고 내리기 ── */ .stepper { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem; border-radius: 999px; background: rgba(5, 8, 35, .45); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .12); } .step-btn { appearance: none; border: 0; cursor: pointer; width: max(40px, 2.3rem); height: max(40px, 2.3rem); border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(#6aa8ff, #2f5bff); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 .16rem 0 #182a92; transition: transform .14s var(--ease-back), filter .14s; } .step-btn .ico { width: 1.1rem; height: 1.1rem; } .step-btn:hover:not(:disabled) { transform: scale(1.08); filter: brightness(1.1); } .step-btn:active:not(:disabled) { transform: translateY(2px) scale(.96); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 .04rem 0 #182a92; } .step-btn:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; } .step-val { min-width: 4.6em; text-align: center; font-weight: 900; font-size: 1.02rem; font-variant-numeric: tabular-nums; display: inline-block; } .step-val.bump { animation: bump .32s var(--ease-back); } .stepper.readonly { opacity: .7; } @keyframes bump { 40% { transform: scale(1.25); color: #ffe14d; } } /* ── 켜고 끄기 ── */ .tog { appearance: none; border: 0; background: none; cursor: pointer; padding: .1rem; display: inline-flex; align-items: center; gap: .6rem; min-height: var(--tap); color: #fff; font-weight: 800; font-size: .86rem; } .tog-track { position: relative; flex: none; width: 3.5rem; height: 1.95rem; border-radius: 999px; background: rgba(5, 8, 35, .55); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .2); transition: background .25s; } .tog-knob { position: absolute; top: .22rem; left: .22rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: linear-gradient(#fff, #d6dcef); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); transition: transform .3s var(--ease-back); } .tog.on .tog-track { background: linear-gradient(#64e57c, #1fae46); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 2px rgba(180, 255, 195, .6), 0 0 .8rem rgba(61, 220, 90, .45); } .tog.on .tog-knob { transform: translateX(1.55rem); } .tog:active .tog-knob { width: 1.8rem; } .tog.on:active .tog-knob { transform: translateX(1.25rem); } .tog-txt { opacity: .92; text-align: left; } /* ── 슬라이더 ── */ .sld { display: flex; align-items: center; gap: .7rem; width: 100%; min-width: 9rem; } .sld-rail { flex: 1; display: flex; align-items: center; height: max(36px, 2.1rem); } .sld-input { -webkit-appearance: none; appearance: none; width: 100%; height: .72rem; margin: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, var(--cyan), #5aa2ff 50%, var(--yellow)) 0 0 / var(--p, 50%) 100% no-repeat, rgba(5, 8, 35, .55); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .18); } .sld-input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.55rem; height: 1.55rem; border-radius: 50%; border: .2rem solid var(--ink); background: radial-gradient(circle at 35% 30%, #fff, #ffe14d 60%, #ffb21f); box-shadow: 0 .15rem 0 rgba(0, 0, 0, .35); transition: transform .15s var(--ease-back); } .sld-input::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: .2rem solid var(--ink); background: #ffe14d; } .sld-input:hover::-webkit-slider-thumb, .sld-input:focus::-webkit-slider-thumb { transform: scale(1.18); } .ui-root.kbd .sld-input:focus { outline-offset: .45rem; } .sld-val { min-width: 3.2em; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; font-size: .92rem; } /* ── 입력칸 ── */ .field { display: flex; flex-direction: column; gap: .35rem; } .field-lbl { display: flex; align-items: center; gap: .4rem; font-weight: 900; font-size: .88rem; } .field-lbl .ico { color: var(--yellow); } .field-row { position: relative; display: flex; gap: .5rem; align-items: center; } .field-input { flex: 1; min-width: 0; min-height: max(var(--tap), 2.8rem); padding: .55rem 1rem; border: 0; border-radius: .95rem; outline: none; font-size: 1.15rem; font-weight: 800; color: var(--ink); background: linear-gradient(#ffffff, #e9eeff); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .07), 0 0 0 3px rgba(255, 255, 255, .28), 0 .25rem 0 rgba(0, 0, 0, .28); transition: box-shadow .2s; } .field-input::placeholder { color: #8b93b8; font-weight: 700; } .field-input:focus { box-shadow: inset 0 3px 0 rgba(0, 0, 0, .07), 0 0 0 3px var(--yellow), 0 0 1rem rgba(255, 210, 31, .5), 0 .25rem 0 rgba(0, 0, 0, .28); } .field-input.pop { animation: bump .35s var(--ease-back); } .scr-profile .field-input { padding-right: 3.6rem; } .field-count { position: absolute; right: calc(max(var(--tap), 2.75rem) + 1.2rem); font-size: .78rem; font-weight: 800; color: #6b7399; pointer-events: none; } .field-err { margin: 0; min-height: 1.1em; font-size: .8rem; font-weight: 800; color: #ffb3bd; } .field.bad .field-input { box-shadow: 0 0 0 3px var(--red), 0 0 1rem rgba(255, 59, 79, .5); } .shake { animation: shake .42s ease; } @keyframes shake { 15%, 55% { transform: translateX(-.4rem); } 35%, 75% { transform: translateX(.4rem); } } /* ── 능력 막대 ── */ .stats { display: grid; gap: .42rem; width: 100%; } .stat { display: grid; grid-template-columns: 5.4em 1fr 2.6em; align-items: center; gap: .6rem; font-size: .84rem; } .stat-lbl { font-weight: 800; opacity: .92; white-space: nowrap; } .stat-bar { position: relative; height: .78rem; border-radius: 999px; background: rgba(5, 8, 35, .55); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); } .stat-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(5, 8, 35, .55) calc(10% - 2px) 10%); } .stat-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--c) * 100%); border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 55%), linear-gradient(90deg, var(--cyan), var(--blue)); transform-origin: left; animation: growX .7s var(--ease-out) both; } .stat-delta { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); animation: growX .7s .15s var(--ease-out) both; transform-origin: left; } .stat-delta.up { background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 55%), linear-gradient(90deg, #6fe885, #1fb548); } .stat-delta.down { background: repeating-linear-gradient(-45deg, rgba(255, 79, 99, .85) 0 3px, rgba(160, 15, 35, .7) 3px 6px); } .stat-num { font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .stat-num small { margin-left: .15em; font-size: .78em; } .stat-num small.up { color: #7dff95; } .stat-num small.down { color: #ff8a9a; } .stats.compact { gap: .1rem; } .stats.compact .stat { font-size: .64rem; line-height: 1.3; grid-template-columns: 4.6em 1fr 1.3em; gap: .4rem; } .stats.compact .stat-bar { height: .45rem; } @keyframes growX { from { transform: scaleX(0); } } .stars { display: inline-flex; gap: .05em; letter-spacing: 0; white-space: nowrap; } .stars i { font-style: normal; color: rgba(255, 255, 255, .25); text-shadow: 0 1px 0 rgba(0, 0, 0, .4); } .stars i.on { color: #ffd21f; text-shadow: 0 1px 0 #8a4b00, 0 0 .4em rgba(255, 210, 31, .55); } /* ── 그림 상자 (그림이 오면 대체 그림 위로 서서히) ── */ .pic { position: relative; overflow: hidden; } .pic > .pic-fb, .pic > .pic-img, .pic > .logo-fb { position: absolute; inset: 0; width: 100%; height: 100%; } .pic-img { display: block; object-fit: contain; opacity: 0; transition: opacity .4s ease; -webkit-user-drag: none; } .pic-cover .pic-img { object-fit: cover; } .pic.has-img .pic-img { opacity: 1; } /* 대체 그림은 클래스가 제각각이라(.pic-fb·.logo-fb) 그림이 아닌 자식을 모두 감춘다 */ .pic.has-img > :not(.pic-img) { opacity: 0; transition: opacity .4s ease; } .pic-fb svg { width: 100%; height: 100%; display: block; } .pic-char { container-type: size; } .fb-char { display: grid; place-items: center; border-radius: inherit; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--c1) 55%, white), var(--c1) 50%, color-mix(in srgb, var(--c1) 70%, black)); } .fb-glyph { font-size: 52cqmin; line-height: 1; filter: drop-shadow(0 .06em 0 rgba(0, 0, 0, .3)); } .fb-kart { display: grid; place-items: center; } .fb-item { padding: 6%; } .bg-pic { position: absolute; inset: 0; } /* 카트 그림 칠하기: 흰 차체 × 고른 색 (검정 바퀴·그림자는 그대로 어둡다) */ .pic-kart { isolation: isolate; } .kart-tint { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; background: var(--kc, #ff3b3b); mix-blend-mode: multiply; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background-color .35s ease; } .pic.pic-kart.has-img.tint-ready > .kart-tint { display: block; opacity: 1; } /* 차체 가면으로 칠할 때: 흰 차체에 곱하면 색이 그대로 나오지만 그늘진 면이 칙칙해진다 — 살짝 밝게 */ .pic.pic-kart.paint-mask > .kart-tint { filter: saturate(1.08); } /* 격자 칸이 안쪽 내용 때문에 화면보다 넓어지지 않게 (휴대폰에서 오른쪽이 잘리던 문제) */ .lb-left, .lb-right, .on-left, .on-right, .sg-left, .sg-right, .pf-right, .gr-right, .gr-detail, .res-left, .res-right, .set-col, .set-card, .rf-col, .help-col, .my-card, .menu-tiles { min-width: 0; } /* ═════════ 3. 화면 뼈대·전환 ═════════ */ .ui-root { position: fixed; inset: 0; pointer-events: none; font-family: var(--font); } /* 한글은 낱말 가운데서 줄을 바꾸지 않는다('어렵/다.', '기/회!' 같은 끊김 방지). overflow-wrap:anywhere 는 한 줄에 다 안 들어가는 긴 낱말만 끊고, 칸 최소 너비(min-content)는 예전처럼 한 글자로 둬서 띄어쓰기 없는 긴 방 이름·채팅이 격자·flex 칸을 넓혀 화면 밖으로 밀지 않게 한다 */ .ui-root, .hud-root, .subs { word-break: keep-all; overflow-wrap: anywhere; } .ui-screens { position: absolute; inset: 0; overflow: hidden; } .scr { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; isolation: isolate; overflow: hidden; padding: var(--sat) var(--sar) var(--sab) var(--sal); pointer-events: auto; } .scr.leave { pointer-events: none; animation: scrOut .34s var(--ease-in) both; z-index: 0; } .scr.enter { z-index: 1; } .scr.enter > .scr-head { animation: inTop .55s var(--ease-out) both; } .scr.enter > .scr-body { animation: inRight .6s .05s var(--ease-out) both; } .scr.enter.from-left > .scr-body { animation-name: inLeft; } .scr.enter > .scr-foot { animation: inBottom .55s .1s var(--ease-out) both; } .scr.enter > .scr-bg { animation: fadeIn .4s ease both; } @keyframes scrOut { to { opacity: 0; transform: scale(1.04); filter: blur(2px); } } @keyframes inTop { from { opacity: 0; transform: translateY(-1.5rem); } } @keyframes inBottom { from { opacity: 0; transform: translateY(1.5rem); } } @keyframes inRight { from { opacity: 0; transform: translateX(3rem) skewX(-4deg); } } @keyframes inLeft { from { opacity: 0; transform: translateX(-3rem) skewX(4deg); } } @keyframes fadeIn { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } } @keyframes popIn { from { opacity: 0; transform: scale(.85) translateY(1rem); } } @keyframes rise { from { opacity: 0; transform: translateY(1rem) scale(.96); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes floaty { 50% { transform: translateY(-.35rem); } } /* 화면 배경: 진한 남색 + 사선 띠 + 번개 빛 */ .scr-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 85% -5%, rgba(80, 150, 255, .75), transparent 70%), radial-gradient(ellipse 60% 55% at -5% 105%, rgba(255, 79, 163, .45), transparent 70%), radial-gradient(ellipse 50% 45% at 105% 100%, rgba(25, 211, 255, .35), transparent 70%), linear-gradient(160deg, #2440b8 0%, #172072 45%, #0d1142 100%); } .scr-bg .bg-pic { opacity: .9; animation: kenburns 40s ease-in-out infinite alternate; } .scr-bg.has-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 14, 60, .55) 0%, rgba(10, 14, 60, .15) 30%, rgba(10, 14, 60, .25) 70%, rgba(6, 8, 35, .8) 100%); } .bg-stripes { position: absolute; inset: -50%; pointer-events: none; opacity: .9; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2.2rem, transparent 2.2rem 4.4rem); animation: stripesMove 24s linear infinite; } .bg-bands { position: absolute; inset: 0; pointer-events: none; } .bg-bands::before, .bg-bands::after { content: ''; position: absolute; transform: skewX(-24deg); } .bg-bands::before { right: -6rem; top: -2rem; width: 22rem; height: 5.5rem; background: linear-gradient(90deg, transparent, rgba(255, 210, 31, .5) 30%, rgba(255, 138, 31, .55)); box-shadow: -3rem 6.5rem 0 -2rem rgba(25, 211, 255, .35); } .bg-bands::after { left: -8rem; bottom: 3rem; width: 26rem; height: 1.6rem; background: linear-gradient(90deg, rgba(255, 79, 163, .45), transparent); box-shadow: 4rem 2.4rem 0 -.3rem rgba(255, 210, 31, .35); } .bg-glow { position: absolute; left: 50%; top: 40%; width: 70vmax; height: 70vmax; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(120, 170, 255, .18), transparent 60%); animation: glowPulse 6s ease-in-out infinite; } @keyframes stripesMove { to { transform: translateX(8.8rem); } } @keyframes glowPulse { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.1); } } @keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1%, -1%); } } /* 머리 */ .scr-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.5rem .55rem; min-height: 4.4rem; } .head-gap { width: .1rem; } .head-title { min-width: 0; display: flex; align-items: center; gap: 1rem; } .head-right { display: flex; align-items: center; gap: .75rem; justify-content: flex-end; min-width: 0; } .title-banner { position: relative; margin: 0; padding: .1em .9em .14em .65em; font-size: 2.05rem; line-height: 1.15; white-space: nowrap; flex: none; } .title-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-14deg); border-radius: .45rem; background: linear-gradient(180deg, #4d8dff, #2440d0 60%, #1a2a9e); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset .5rem 0 0 #ffd21f, 0 .22rem 0 #0d1556, 0 .5rem 1rem rgba(0, 0, 0, .3); } .title-banner::after { content: ''; position: absolute; right: -.25em; top: -.3em; width: .7em; height: .95em; transform: rotate(14deg); background: linear-gradient(#fff6a0, #ffd21f 45%, #ff9d1f); clip-path: polygon(58% 0, 8% 56%, 42% 56%, 30% 100%, 92% 38%, 56% 38%); filter: drop-shadow(0 2px 0 var(--ink)); animation: boltWiggle 3s ease-in-out infinite; } .title-banner .otext { --g2: #ffe14d; } @keyframes boltWiggle { 0%, 80%, 100% { transform: rotate(14deg) scale(1); } 85% { transform: rotate(4deg) scale(1.2); } 90% { transform: rotate(20deg) scale(1.1); } } .scr-sub { margin: 0; font-size: .9rem; font-weight: 700; opacity: .88; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 몸통·발 */ .scr-body { min-height: 0; overflow: auto; padding: .45rem 1.5rem .6rem; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; } .scr-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1.5rem .95rem; background: linear-gradient(180deg, transparent, rgba(5, 8, 35, .55)); } .foot-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; } .hints { display: flex; gap: .4rem 1.1rem; flex-wrap: wrap; font-size: .8rem; font-weight: 700; opacity: .85; } .hint { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; } /* 화면 전환 사선 닦기 */ .ui-wipe { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; } .ui-wipe i { position: absolute; top: -20%; bottom: -20%; left: -75vw; width: 62vw; transform: skewX(-18deg); visibility: hidden; } .ui-wipe i:nth-child(1) { background: linear-gradient(90deg, #ffb21f, #ffe14d); } .ui-wipe i:nth-child(2) { background: linear-gradient(90deg, #1a2a9e, #2f6bff); } .ui-wipe i:nth-child(3) { background: var(--ink); width: 58vw; } .ui-wipe i:nth-child(3)::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7rem; height: 9rem; transform: translate(-50%, -50%) skewX(18deg); background: linear-gradient(#fff6a0, #ffd21f 45%, #ff9d1f); clip-path: polygon(58% 0, 8% 56%, 42% 56%, 30% 100%, 92% 38%, 56% 38%); } .ui-wipe.go i { visibility: visible; animation: wipe .8s cubic-bezier(.75, 0, .25, 1) both; } .ui-wipe.go i:nth-child(2) { animation-delay: .05s; } .ui-wipe.go i:nth-child(3) { animation-delay: .1s; } @keyframes wipe { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(260vw) skewX(-18deg); } } /* 카피라이트 (wonrae-copyright 고정 스타일) */ .copyright-wrap { position: absolute; bottom: calc(6px + var(--sab)); left: 50%; transform: translateX(-50%); z-index: 40; pointer-events: none; max-width: calc(100% - 16px); text-align: center; } .copyright { /* flex 금지 — 아이콘 양옆 공백( )이 사라진다 */ display: inline-block; font-size: 12px; font-weight: 500; white-space: nowrap; letter-spacing: 0; color: rgba(255, 255, 255, .95); background: rgba(0, 0, 0, .45); border-radius: 999px; padding: 4px 12px; user-select: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .copyright__mail { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* 좁은 화면: 1단계로 All rights reserved. 를 뺀다 (wonrae-copyright 짧은 형태). 그래도 넘치면 줄바꿈 허용 */ @media (max-width: 520px) { .cr-arr { display: none; } } @media (max-width: 300px) { .copyright { white-space: normal; } } /* ═════════ 4. 화면별 ═════════ */ /* ── 타이틀 ── */ .scr-title { display: block; cursor: pointer; } .title-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #2f9bff; } .title-scene, .title-keyart { position: absolute; inset: 0; } .title-scene svg { width: 100%; height: 100%; display: block; } .title-keyart { animation: kenburns 30s ease-in-out infinite alternate; } .art-rays { animation: spin 90s linear infinite; } .art-clouds { animation: cloudDrift 60s linear infinite alternate; } .art-dash { animation: dashRun .5s linear infinite; } .art-curb { animation: curbRun .5s linear infinite; } .art-speed { animation: speedLine 1.6s linear infinite; } @keyframes cloudDrift { to { transform: translateX(-12%); } } @keyframes dashRun { to { stroke-dashoffset: -130; } } @keyframes curbRun { to { stroke-dashoffset: -80; } } @keyframes speedLine { from { transform: translateX(-30%); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(40%); opacity: 0; } } .title-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(8, 12, 50, .55) 100%); pointer-events: none; } .title-bands { position: absolute; inset: 0; pointer-events: none; } .title-bands::before, .title-bands::after { content: ''; position: absolute; transform: skewX(-24deg); } .title-bands::before { left: -4rem; bottom: 0; width: 30%; height: 2.2rem; background: linear-gradient(90deg, #ffd21f, #ff8a1f 70%, transparent); } .title-bands::after { right: -4rem; top: 0; width: 30%; height: 2rem; background: linear-gradient(270deg, #2f6bff, #19d3ff 70%, transparent); } .title-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; } .scr-title.starting .title-flash { animation: flashOut .8s ease-out; } .scr-title.starting .title-logo { animation: logoZoom .9s var(--ease-in) forwards; } @keyframes flashOut { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } } @keyframes logoZoom { to { transform: scale(1.18); opacity: .4; } } /* 키아트의 주인공 얼굴이 화면 가운데 위(가로 48%·세로 32%)에 있다 — 로고는 그 위 하늘 띠에, '시작하기'는 아래 길 위에 두어 얼굴을 가리지 않는다 */ .title-center { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: min(94vw, 62rem); display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; padding: max(2.2vh, calc(var(--sat) + .4rem)) 0 calc(5.4rem + var(--sab)); } .logo { aspect-ratio: 16 / 7; } .title-logo { flex: none; width: min(86vw, 40rem, 25vh * 16 / 7); animation: logoDrop 1s var(--ease-back) both, floaty 4s 1s ease-in-out infinite; filter: drop-shadow(0 .8rem 1.2rem rgba(10, 20, 80, .45)); } @keyframes logoDrop { from { opacity: 0; transform: translateY(-3rem) scale(.7) rotate(-4deg); } } /* 로고 대체 그림 (그림 파일이 없을 때) */ .logo-fb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; font-size: min(7.5vw, 4.8rem); } .logo-en { display: flex; align-items: center; gap: .1em; transform: rotate(-4deg) skewX(-8deg); } .logo-word { --g1: #fff7b0; --g2: #ffc21f; --st: #0d2a9e; --sw: .26em; font-size: 1.6em; font-style: italic; letter-spacing: -.04em; } .logo-boltwrap { width: 1.4em; height: 1.4em; display: inline-block; } .logo-boltwrap svg { width: 100%; height: 100%; } .logo-ko { display: flex; align-items: center; gap: .3em; font-size: .62em; } .logo-ko-txt { --g2: #bfe8ff; --st: #0d2a9e; } .logo-slash { width: 1.6em; height: .22em; background: linear-gradient(90deg, transparent, #ffd21f); transform: skewX(-30deg); border-radius: .1em; } .logo-slash:last-child { background: linear-gradient(90deg, #ffd21f, transparent); } .title-tag { margin: auto 0 0; } .title-tag span { display: inline-block; padding: .35rem 1.4rem; font-size: 1.15rem; font-weight: 900; transform: skewX(-12deg); background: linear-gradient(90deg, rgba(13, 21, 86, .85), rgba(36, 64, 208, .85)); border-radius: .4rem; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), .35rem .35rem 0 rgba(255, 210, 31, .9); animation: rise .7s .4s var(--ease-out) both; } .title-start { appearance: none; border: 0; background: none; cursor: pointer; margin-top: .2rem; padding: .6rem 2.2rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; position: relative; border-radius: 1.2rem; animation: rise .7s .6s var(--ease-out) both; } .title-start::before { content: ''; position: absolute; left: -10%; right: -10%; top: 12%; height: 3.2rem; transform: skewX(-18deg); z-index: -1; background: linear-gradient(90deg, transparent, rgba(13, 21, 86, .7) 20%, rgba(13, 21, 86, .7) 80%, transparent); } /* 깜빡임: 투명도를 깊게 내리면 짙은 외곽선이 비쳐 글자가 흙빛이 된다 — 살짝만 낮추고 빛무리로 숨 쉬게 한다 */ .ts-label { font-size: 2.7rem; animation: startBlink 1.3s ease-in-out infinite; } @keyframes startBlink { 0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 .9rem rgba(255, 210, 31, .75)); } 50% { opacity: .7; transform: scale(.96); filter: drop-shadow(0 0 0 rgba(255, 210, 31, 0)); } } .ts-label .otext { --g2: #ffd21f; --sw: .22em; } .ts-sub { font-size: .92rem; font-weight: 800; text-shadow: 0 1px 0 var(--ink), 0 0 .6rem rgba(0, 0, 0, .6); } .title-start:hover .ts-label, .ui-root.kbd .title-start:focus .ts-label { animation-duration: .5s; } .ui-root.kbd .title-start:focus { box-shadow: none; outline: none; } @keyframes blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.96); } } .title-badges { position: absolute; left: 50%; bottom: calc(2.9rem + var(--sab)); transform: translateX(-50%); display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 94vw; } .tbadge { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 800; background: rgba(13, 21, 86, .65); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: rise .6s var(--ease-out) both; } .tbadge:nth-child(2) { animation-delay: .1s; } .tbadge:nth-child(3) { animation-delay: .2s; } .tbadge .ico { color: var(--yellow); } .title-ver { position: absolute; top: calc(.9rem + var(--sat)); right: 1.2rem; font-size: .75rem; font-weight: 800; opacity: .8; padding: .15rem .55rem; border-radius: 999px; background: rgba(0, 0, 0, .3); } /* ── 메뉴 ── */ .menu-head { grid-template-columns: auto 1fr; padding-top: .7rem; } .menu-logo { width: 13.5rem; filter: drop-shadow(0 .4rem .6rem rgba(0, 0, 0, .35)); animation: floaty 5s ease-in-out infinite; } .menu-logo .logo-fb { font-size: 2rem; } .hello { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem 1rem; border-radius: 999px; font-weight: 700; background: rgba(13, 21, 86, .6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); } .hello b { color: #ffe14d; } .scr-menu .scr-foot { padding-bottom: calc(2.2rem + var(--sab)); } .menu-body { display: grid; grid-template-columns: minmax(0, 1fr) 18.5rem; gap: 1.2rem; overflow: hidden; } .menu-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; gap: .9rem; min-height: 0; } .tile { --t1: #5aa2ff; --t2: #2f5bff; --tl: #182a92; appearance: none; border: 0; position: relative; overflow: hidden; cursor: pointer; text-align: left; color: #fff; padding: 0; border-radius: 1.35rem; background: linear-gradient(150deg, var(--t1), var(--t2)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .24), inset 0 3px 0 rgba(255, 255, 255, .35), 0 .4rem 0 var(--tl), 0 .8rem 1.6rem rgba(0, 0, 0, .35); transition: transform .22s var(--ease-back), filter .2s, box-shadow .2s; animation: rise .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); } .tile::after { pointer-events: none; } .tile:hover { transform: translateY(-.3rem); filter: brightness(1.07) saturate(1.06); } .tile:active { transform: translateY(.25rem); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .24), 0 .12rem 0 var(--tl), 0 .3rem .6rem rgba(0, 0, 0, .3); } .ui-root.kbd .tile:focus { transform: translateY(-.3rem) scale(1.02); } .tile-big { grid-column: span 2; min-height: 12rem; } .tile-small { grid-column: span 1; display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; min-height: 4.6rem; } .tile-single { --t1: #ffc21f; --t2: #ff5a1f; --tl: #a33508; } .tile-online { --t1: #39d7ff; --t2: #2f4dff; --tl: #16248f; } .tile-garage { --t1: #6fe885; --t2: #12a07a; --tl: #0b5e48; } .tile-settings { --t1: #b896ff; --t2: #6a3bf0; --tl: #3b1a96; } .tile-help { --t1: #ff8fd0; --t2: #ee3f8f; --tl: #8f124e; } .tile-profile { --t1: #5ce1ff; --t2: #1f8fe0; --tl: #0d4e8a; } .tile-art { position: absolute; inset: 0; pointer-events: none; } .tile-trackpic { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(100deg, transparent 22%, #000 70%); mask-image: linear-gradient(100deg, transparent 22%, #000 70%); opacity: .95; transition: transform .6s var(--ease-out); } .tile:hover .tile-trackpic { transform: scale(1.06); } .tile-single .tile-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .1) 0 1rem, transparent 1rem 3rem), linear-gradient(90deg, rgba(255, 90, 31, .6), transparent 60%); } .art-online { display: block; position: absolute; inset: 0; } .tile-onlinepic { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 66%); mask-image: linear-gradient(100deg, transparent 18%, #000 66%); opacity: .95; transition: transform .6s var(--ease-out); } .tile-onlinepic .pic-img { object-position: 62% 60%; } .tile:hover .tile-onlinepic { transform: scale(1.06); } .tile-online .art-online::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .1) 0 1rem, transparent 1rem 3rem), linear-gradient(90deg, rgba(47, 77, 255, .65), transparent 62%); } .tile-onlinepic.has-img ~ .net-globe { color: rgba(255, 255, 255, .16); } .net-globe { position: absolute; right: -1.5rem; top: 50%; transform: translateY(-55%); width: 13rem; height: 13rem; color: rgba(255, 255, 255, .28); animation: spin 40s linear infinite; } .net-globe .ico, .net-globe svg { width: 100%; height: 100%; } .net-dot { position: absolute; width: .9rem; height: .9rem; border-radius: 50%; background: #ffe14d; box-shadow: 0 0 0 .3rem rgba(255, 225, 77, .3), 0 0 1rem #ffe14d; right: calc(2rem + var(--i) * 2.6rem); top: calc(22% + var(--i) * 13%); animation: netPing 2s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); } @keyframes netPing { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } } .tile-shine { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; } .tile-shine::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 35%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transition: none; } .tile:hover .tile-shine::before, .ui-root.kbd .tile:focus .tile-shine::before { left: 130%; transition: left .7s ease; } .tile-txt { position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .tile-big .tile-txt { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.15rem; } .tile-big .tile-label { font-size: 2.35rem; } .tile-big .tile-label .otext { --g2: #fff3a6; } .tile-desc { font-size: .84rem; font-weight: 800; opacity: .96; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); } .tile-small .tile-label { font-size: 1.12rem; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); } .tile-small .tile-desc { font-size: .72rem; font-weight: 700; opacity: .9; } .tile-ico { flex: none; width: 2.7rem; height: 2.7rem; border-radius: .85rem; display: grid; place-items: center; color: var(--tl); background: linear-gradient(#fff, #e3e9ff); box-shadow: 0 .2rem 0 rgba(0, 0, 0, .25), inset 0 -2px 0 rgba(0, 0, 0, .08); } .tile-ico .ico { width: 1.5rem; height: 1.5rem; } .tile-big .tile-ico { position: absolute; left: 0; top: -3.6rem; width: 3rem; height: 3rem; transform: rotate(-8deg); } .tile-small:hover .tile-ico { animation: wobble .5s ease; } @keyframes wobble { 30% { transform: rotate(-10deg) scale(1.1); } 60% { transform: rotate(8deg); } } .tile-live { position: absolute; right: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 800; background: rgba(10, 14, 60, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); } .live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #5fff7d; box-shadow: 0 0 0 0 rgba(95, 255, 125, .7); animation: livePing 1.6s infinite; } @keyframes livePing { 70% { box-shadow: 0 0 0 .5rem rgba(95, 255, 125, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 255, 125, 0); } } .my-card { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .9rem 1rem 1rem; min-height: 0; overflow: hidden; animation: rise .6s .2s var(--ease-out) both; } /* overflow:hidden 인 글자 칸은 세로 flex 에서 0 까지 줄어들어 초상에 가려진다 — 초상만 줄어들게 */ .my-card > :not(.mc-portrait) { flex-shrink: 0; } .mc-head { align-self: stretch; display: flex; } .mc-tag { padding: .15rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 900; color: var(--ink); background: linear-gradient(#ffe95c, #ffb21f); transform: skewX(-10deg); } .mc-portrait { position: relative; width: min(11rem, 100%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex: 0 1 auto; min-height: 0; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c1) 60%, white), var(--c1) 55%, color-mix(in srgb, var(--c2) 70%, black)); box-shadow: inset 0 0 0 .3rem rgba(255, 255, 255, .55), 0 .4rem 1rem rgba(0, 0, 0, .35); } .mc-rays { position: absolute; inset: -30%; background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 10deg, transparent 10deg 20deg); animation: spin 30s linear infinite; } .mc-pic { position: absolute; inset: 6% 4% 0; } .mc-name { font-size: 1.55rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-sub { display: flex; flex-direction: column; align-items: center; font-size: .78rem; opacity: .92; text-align: center; } .mc-sub b { font-size: .95rem; } .mc-kart { align-self: stretch; display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border-radius: .9rem; background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 35%, transparent), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } .mc-kartpic { width: 5.6rem; aspect-ratio: 200 / 120; flex: none; } .mc-kart-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .mc-kart-txt small { font-size: .68rem; opacity: .8; font-weight: 700; } .mc-kart-txt b { font-size: 1.05rem; } .mc-kart-txt .color-dot { margin-top: .2rem; } .mc-edit { align-self: stretch; } /* 남는 세로 공간은 이름 아래로 — 카트 칸·꾸미기 단추가 카드 바닥(왼쪽 작은 칸 줄과 같은 높이)에 붙는다 */ .mc-kart { margin-top: auto; } /* ── 프로필 ── */ .pf-layout { display: grid; grid-template-columns: minmax(15rem, .85fr) minmax(0, 1.6fr); gap: 1.2rem; height: 100%; min-height: 0; } .pf-preview { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 0; background: linear-gradient(170deg, color-mix(in srgb, var(--c1) 70%, #1a2a9e), color-mix(in srgb, var(--c2) 35%, #10164f) 75%); } .pf-preview.swap .pv-pic { animation: charIn .5s var(--ease-back); } .pf-preview.swap .pv-info > * { animation: rise .4s var(--ease-out) both; } .pf-preview.swap .pv-info > :nth-child(2) { animation-delay: .04s; } .pf-preview.swap .pv-info > :nth-child(3) { animation-delay: .08s; } .pf-preview.swap .pv-info > :nth-child(4) { animation-delay: .12s; } @keyframes charIn { from { opacity: 0; transform: translateX(-1.5rem) scale(.9); } } .pv-stage { position: relative; flex: 1 1 auto; min-height: 9rem; overflow: hidden; } .pv-rays { position: absolute; left: 50%; top: 45%; width: 160%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255, 255, 255, .16) 0 9deg, transparent 9deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); mask-image: radial-gradient(circle, #000 20%, transparent 65%); animation: spinC 40s linear infinite; } @keyframes spinC { to { transform: translate(-50%, -50%) rotate(360deg); } } .pv-floor { position: absolute; left: 12%; right: 12%; bottom: 3%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%); } .pv-pic { position: absolute; inset: 4% 6% 0; filter: drop-shadow(0 .6rem .8rem rgba(0, 0, 0, .35)); } .pv-info { position: relative; padding: .7rem 1.1rem 1rem; background: linear-gradient(180deg, rgba(10, 14, 60, .3), rgba(10, 14, 60, .75)); display: flex; flex-direction: column; gap: .3rem; } .pv-species { align-self: flex-start; font-size: .72rem; font-weight: 900; padding: .1rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .2); } .pv-name { margin: 0; font-size: 2.2rem; line-height: 1.1; } .pv-desc { margin: 0; font-size: .86rem; font-weight: 700; opacity: .95; line-height: 1.45; } .pv-bonus { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; } .pv-bonus-lbl { font-size: .75rem; font-weight: 800; opacity: .8; } .pf-right { display: flex; flex-direction: column; gap: .5rem; min-height: 0; } .pf-right .field { flex: none; } .pf-right .sec-title { margin: .2rem 0 0; } .char-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(8.5rem, 1fr); gap: .7rem; flex: 1; min-height: 0; padding: .3rem; } .char-card { appearance: none; border: 0; padding: 0; cursor: pointer; color: #fff; position: relative; overflow: hidden; border-radius: 1.1rem; background: linear-gradient(160deg, var(--c1), color-mix(in srgb, var(--c2) 55%, var(--c1))); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 .3rem 0 rgba(0, 0, 0, .35), 0 .5rem 1rem rgba(0, 0, 0, .25); transition: transform .2s var(--ease-back), box-shadow .2s, filter .2s; animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); display: flex; flex-direction: column; justify-content: flex-end; } .cc-bg { position: absolute; inset: 0; background: repeating-linear-gradient(125deg, rgba(255, 255, 255, .12) 0 .7rem, transparent .7rem 1.6rem), radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .45), transparent 60%); } .cc-pic { position: absolute; left: 4%; right: 4%; top: 4%; bottom: 1.6rem; transition: transform .3s var(--ease-back); } .char-card:hover .cc-pic, .ui-root.kbd .char-card:focus .cc-pic { transform: scale(1.08) translateY(-.2rem); } .char-card:hover { transform: translateY(-.25rem); filter: brightness(1.06); } .char-card:active { transform: translateY(.15rem); } .cc-name { position: relative; display: block; padding: .3rem .4rem .1rem; text-align: center; font-weight: 900; font-size: 1.02rem; background: linear-gradient(180deg, transparent, rgba(10, 14, 60, .78) 40%); text-shadow: 0 2px 0 var(--ink); } .cc-bonus { position: relative; display: flex; align-items: center; justify-content: center; gap: .2rem; padding: 0 .3rem .35rem; font-size: .66rem; font-weight: 800; color: #ffe680; background: rgba(10, 14, 60, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-bonus .ico { width: .9rem; height: .9rem; } .cc-check { position: absolute; right: .4rem; top: .4rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: linear-gradient(#fff06b, #ffb21f); box-shadow: 0 .14rem 0 #b85f00; transform: scale(0); transition: transform .3s var(--ease-back); z-index: 2; } .cc-check .ico { width: 1rem; height: 1rem; } .is-selected > .cc-check { transform: scale(1); } .char-card.is-selected, .kart-card.is-selected, .track-card.is-selected { box-shadow: inset 0 0 0 3px #fff, 0 0 0 .25rem #ffd21f, 0 .3rem 0 .25rem #b85f00, 0 .5rem 1.4rem rgba(255, 210, 31, .5); } .char-grid.small { grid-auto-rows: 7.8rem; flex: none; } .char-grid.small .cc-pic { bottom: 1.5rem; } /* ── 차고 ── */ .gr-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; height: 100%; min-height: 0; } .gr-detail { display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .gr-detail.swap .gr-pic { animation: kartIn .55s var(--ease-back); } .gr-detail.swap .gr-info { animation: rise .45s var(--ease-out); } @keyframes kartIn { from { opacity: 0; transform: translateX(-3rem) skewX(-8deg); } 70% { transform: translateX(.4rem); } } .gr-stage { position: relative; flex: 1 1 auto; min-height: 8rem; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 50% 100%, color-mix(in srgb, var(--kc) 40%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .06), transparent); } .gr-stage::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3rem), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3rem); -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); } .gr-spot { position: absolute; left: 50%; top: -20%; width: 70%; height: 130%; transform: translateX(-50%); background: conic-gradient(from 160deg at 50% 0, transparent, rgba(255, 255, 255, .16) 20deg, transparent 40deg); } .gr-floor { position: absolute; left: 14%; right: 14%; bottom: 7%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%); } .gr-pic { position: absolute; inset: 8% 7% 6%; animation: idleBob 2.4s ease-in-out infinite; } @keyframes idleBob { 50% { transform: translateY(-.25rem); } } /* 색을 바꾸면 칠해진 큰 카트가 살짝 튄다 (그림이 없을 때는 대체 그림이) */ .gr-pic.splash > .pic-img, .gr-pic.splash > .kart-tint, .gr-pic.splash > .pic-fb { animation: paintPop .45s var(--ease-back); } @keyframes paintPop { 40% { transform: scale(1.04) rotate(-1deg); filter: brightness(1.18); } } .gr-info { padding: .8rem 1.15rem 1rem; display: flex; flex-direction: column; gap: .5rem; background: rgba(10, 14, 60, .35); } .gr-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .gr-title h2 { margin: 0 .3rem 0 0; font-size: 2rem; line-height: 1.1; } .gr-desc { margin: 0; font-size: .86rem; font-weight: 700; opacity: .95; } .gr-cmp { margin: 0; display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; opacity: .85; flex-wrap: wrap; } .gr-cmp i { display: inline-block; width: .9rem; height: .5rem; border-radius: 999px; } .gr-cmp i.up { background: #3ddc5a; } .gr-cmp i.down { background: #ff4f63; margin-left: .4rem; } .gr-right { display: flex; flex-direction: column; gap: .35rem; min-height: 0; overflow: auto; padding-right: .2rem; } .kart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; padding: .3rem; } .kart-card { appearance: none; border: 0; cursor: pointer; color: #fff; position: relative; overflow: hidden; text-align: left; padding: .45rem .55rem .55rem; border-radius: 1rem; display: flex; flex-direction: column; gap: .3rem; background: linear-gradient(170deg, rgba(90, 120, 255, .45), rgba(20, 26, 90, .75)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 .28rem 0 rgba(0, 0, 0, .35), 0 .45rem .9rem rgba(0, 0, 0, .25); transition: transform .2s var(--ease-back), box-shadow .2s, filter .2s; animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); } .kart-card:hover { transform: translateY(-.25rem); filter: brightness(1.08); } .kart-card:active { transform: translateY(.15rem); } .kc-art { position: relative; display: block; aspect-ratio: 200 / 70; border-radius: .7rem; background: radial-gradient(ellipse at 50% 90%, rgba(255, 255, 255, .25), transparent 70%); } .kc-pic { position: absolute; inset: 0; transition: transform .3s var(--ease-back); } .kart-card:hover .kc-pic { transform: translateX(.3rem) scale(1.05); } .kc-head { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem; } .kc-name { font-size: 1rem; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); } .kc-shape { font-size: .66rem; font-weight: 800; opacity: .8; white-space: nowrap; } .kart-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } .palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(38px, 2.2rem), 1fr)); gap: .45rem; padding: .3rem; justify-items: center; } .swatch { appearance: none; cursor: pointer; position: relative; width: 100%; max-width: 2.9rem; aspect-ratio: 1; height: auto; min-width: 38px; border-radius: 50%; padding: 0; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sw) 55%, white), var(--sw) 60%, color-mix(in srgb, var(--sw) 75%, black)); border: .2rem solid rgba(255, 255, 255, .6); box-shadow: 0 .2rem 0 rgba(0, 0, 0, .35); display: grid; place-items: center; color: #fff; transition: transform .22s var(--ease-back), border-color .2s; } .swatch i { display: none; } .swatch .ico { width: 1.3rem; height: 1.3rem; transform: scale(0); transition: transform .25s var(--ease-back); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); } .swatch:hover { transform: translateY(-.2rem) scale(1.06); } .swatch.on { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 0 .22rem #ffd21f, 0 .25rem 0 .22rem #b85f00; } .swatch.on .ico { transform: scale(1); } .swatch[data-color="#ffffff"] .ico, .swatch[data-color="#ffd21f"] .ico { color: var(--ink); filter: none; } /* ── 혼자 달리기 ── */ .sg-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.2rem; height: 100%; min-height: 0; } .sg-left { display: flex; flex-direction: column; min-height: 0; } .track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(9rem, 1fr); gap: .7rem; flex: 1; min-height: 0; padding: .3rem; } .track-card { appearance: none; border: 0; cursor: pointer; color: #fff; padding: 0; position: relative; overflow: hidden; text-align: left; border-radius: 1rem; display: flex; flex-direction: column; background: linear-gradient(180deg, #24308e, #141a5a); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 .28rem 0 rgba(0, 0, 0, .38), 0 .45rem .9rem rgba(0, 0, 0, .25); transition: transform .2s var(--ease-back), box-shadow .2s, filter .2s; animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); } .track-card:hover { transform: translateY(-.25rem); filter: brightness(1.08); } .track-card:active { transform: translateY(.15rem); } .tc-art { position: relative; display: block; flex: 1 1 auto; min-height: 4.5rem; overflow: hidden; } .tc-pic { position: absolute; inset: 0; transition: transform .5s var(--ease-out); } .track-card:hover .tc-pic, .track-card.is-selected .tc-pic { transform: scale(1.06); } .tc-diff { position: absolute; left: .4rem; top: .4rem; padding: .1rem .4rem; border-radius: 999px; background: rgba(10, 14, 60, .7); font-size: .72rem; } .tc-body { display: flex; flex-direction: column; gap: .05rem; padding: .4rem .6rem .5rem; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)); } .tc-name { font-size: .92rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-meta { font-size: .66rem; font-weight: 700; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-best { display: flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 800; color: #ffe680; font-variant-numeric: tabular-nums; } .tc-best .ico { width: .95rem; height: .95rem; } .track-card.theme-city { background: linear-gradient(180deg, #2a1660, #120a36); } .track-grid.compact { grid-auto-rows: minmax(6.5rem, 1fr); } .track-grid.compact .tc-body { padding: .3rem .5rem .4rem; } .track-grid.compact .tc-name { font-size: .8rem; } .sg-right { display: flex; flex-direction: column; gap: .8rem; min-height: 0; } .sg-preview { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .sg-preview.swap .sg-pic { animation: fadeZoom .5s var(--ease-out); } .sg-preview.swap .sg-info { animation: rise .4s var(--ease-out); } @keyframes fadeZoom { from { opacity: 0; transform: scale(1.12); } } .sg-art { position: relative; flex: 1 1 auto; min-height: 6rem; overflow: hidden; } .sg-pic { position: absolute; inset: 0; } .sg-theme { position: absolute; left: .7rem; bottom: .6rem; padding: .15rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 800; background: rgba(10, 14, 60, .7); } .sg-info { padding: .6rem 1rem .8rem; display: flex; flex-direction: column; gap: .3rem; } .sg-name { margin: 0; font-size: 1.6rem; line-height: 1.15; } .sg-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; } .sg-lbl { font-weight: 800; opacity: .8; } .sg-best { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; } .sg-best b { color: #ffe14d; font-variant-numeric: tabular-nums; } .sg-best .ico { color: #ffd21f; } .sg-desc { margin: 0; font-size: .82rem; font-weight: 700; opacity: .9; line-height: 1.45; } .opt-panel { padding: .55rem 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; flex: none; } .opt-panel .opt { border-bottom: 0; } .opt-panel .opt-inline { flex-direction: column; align-items: flex-start; } .opt { display: flex; flex-direction: column; gap: .4rem; padding: .5rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); } .opt:last-child { border-bottom: 0; } .opt-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .opt-lbl { display: flex; align-items: center; gap: .4rem; font-weight: 900; font-size: .88rem; } .opt-lbl .ico { color: var(--yellow); } .opt-note { font-size: .74rem; font-weight: 700; opacity: .8; display: flex; align-items: center; gap: .3rem; } .opt .seg { align-self: flex-start; } /* 오른쪽 칸이 좁으면(1024 창·낮은 가로 화면) 두 칸 배치에서 '아이템전|스피드전' 이 옆 칸 바퀴 단추 밑으로 파고든다 — 칸 너비를 보고(컨테이너 쿼리) 한 줄에 하나씩, 이름은 왼쪽·조절기는 오른쪽으로 바꾼다 */ .sg-right { container: sgr / inline-size; } @container sgr (max-width: 33rem) { .opt-panel { grid-template-columns: minmax(0, 1fr); padding-block: .3rem; } .opt-panel .opt, .opt-panel .opt-inline { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .8rem; row-gap: .2rem; padding: .32rem 0; } .opt-panel .opt + .opt { border-top: 1px dashed rgba(255, 255, 255, .12); } .opt-panel .opt > .seg, .opt-panel .opt > .stepper { justify-self: end; align-self: center; } .opt-panel .opt-note { grid-column: 1 / -1; justify-self: end; } } /* ── 온라인 ── */ .srv-status { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 800; background: rgba(10, 14, 60, .6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); white-space: nowrap; } .srv-status b { padding-left: .5rem; border-left: 1px solid rgba(255, 255, 255, .25); color: #ffe14d; } .srv-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #ffd21f; } .srv-status.ok .srv-dot { background: #5fff7d; animation: livePing 1.6s infinite; } .srv-status.wait .srv-dot { animation: blink 1s infinite; } .srv-status.bad .srv-dot { background: #ff4f63; } .on-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.2rem; height: 100%; min-height: 0; } .on-left { display: flex; flex-direction: column; gap: .55rem; min-height: 0; } .on-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .on-bar .sec-title { margin: 0 auto 0 0; } .room-list { flex: 1; min-height: 8rem; overflow: auto; padding: .45rem; } .room-row { appearance: none; border: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.3fr) minmax(0, 2.3fr) minmax(4.5rem, .9fr) minmax(5.5rem, 1fr); align-items: center; gap: .7rem; padding: .5rem .85rem; margin-bottom: .35rem; min-height: 3.5rem; border-radius: .95rem; color: #fff; text-align: left; cursor: pointer; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .18s var(--ease-back), background .18s; animation: rise .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); } .room-list.no-anim .room-row { animation: none; } .room-row:not(.room-headrow):hover { background: linear-gradient(90deg, rgba(255, 210, 31, .25), rgba(255, 255, 255, .08)); transform: translateX(.25rem); } .room-row:not(.room-headrow):active { transform: translateX(.25rem) scale(.99); } .room-row.full, .room-row.playing { opacity: .72; } .room-headrow { position: sticky; top: -.45rem; z-index: 2; min-height: 0; padding: .4rem .85rem; margin-bottom: .3rem; cursor: default; font-size: .72rem; font-weight: 900; opacity: 1; color: rgba(255, 255, 255, .75); background: rgba(16, 20, 74, .95); box-shadow: none; animation: none; border-radius: .7rem; } .room-row > span { min-width: 0; display: flex; align-items: center; gap: .4rem; } .rc-name b { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-name .ico { color: #ffe14d; } .rc-code { flex: none; font: 800 .7rem/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; padding: .2rem .4rem; border-radius: .35rem; background: rgba(0, 0, 0, .35); color: #bfe8ff; } .rc-mode { flex-wrap: wrap; } .rc-mode .chip { font-size: .7rem; } .rc-track span { font-size: .82rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-track small { font-weight: 700; opacity: .75; } .rc-thumb { flex: none; width: 3.6rem; height: 2.1rem; border-radius: .45rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); } .rc-n { flex-direction: column; align-items: flex-start !important; gap: .2rem !important; } .rc-n b { font-variant-numeric: tabular-nums; font-size: .95rem; } .nbar { display: block; width: 100%; height: .35rem; border-radius: 999px; background: rgba(0, 0, 0, .4); overflow: hidden; position: relative; } .nbar::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f)); background: linear-gradient(90deg, #5fff7d, #ffd21f, #ff8a1f); border-radius: inherit; } .state-pill { padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 900; white-space: nowrap; background: rgba(95, 255, 125, .22); color: #8dffa2; box-shadow: inset 0 0 0 1px rgba(95, 255, 125, .5); } .state-pill.st-race, .state-pill.st-loading { background: rgba(255, 138, 31, .22); color: #ffc08a; box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .5); } .state-pill.st-results { background: rgba(142, 92, 255, .25); color: #d4c0ff; box-shadow: inset 0 0 0 1px rgba(142, 92, 255, .5); } .state-pill.st-full { background: rgba(255, 59, 79, .25); color: #ffb3bd; box-shadow: inset 0 0 0 1px rgba(255, 59, 79, .55); } .room-row.skeleton { cursor: default; pointer-events: none; animation: none; } .room-row.skeleton i { display: block; height: .9rem; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; animation-delay: calc(var(--i) * 100ms); } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .room-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; } .room-empty b { font-size: 1.15rem; } .room-empty small { font-size: .85rem; opacity: .8; font-weight: 700; } .room-empty.bad > .ico { width: 3rem; height: 3rem; color: #ff8a9a; } .empty-art { width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); animation: floaty 3s ease-in-out infinite; } .empty-art .ico { width: 2rem; height: 2rem; color: #ffe14d; } .on-right { display: flex; flex-direction: column; gap: .8rem; min-height: 0; overflow: auto; padding: .2rem .2rem .6rem; } .on-right > .btn { justify-content: flex-start; width: 100%; min-height: 4.4rem; padding-left: 1.2rem; } .on-right > .btn .ico { width: 1.7rem; height: 1.7rem; } .on-right > .btn .btn-label { font-size: 1.3rem; } .code-box { padding: .75rem .9rem .9rem; display: flex; flex-direction: column; gap: .5rem; } .code-input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .3em; text-transform: uppercase; text-align: center; font-size: 1.4rem; padding: .4rem .6rem; } .on-tip { margin: 0; display: flex; gap: .4rem; font-size: .74rem; font-weight: 700; opacity: .78; line-height: 1.45; } .on-tip .ico { flex: none; color: #ffe14d; } /* ── 방 만들기 ── */ .room-form { display: grid; grid-template-columns: minmax(17rem, 1fr) minmax(0, 1.35fr); gap: 1.2rem; min-height: 100%; align-items: start; } .rf-col { padding: .7rem 1.1rem .8rem; display: flex; flex-direction: column; } .rf-col .field { padding-bottom: .5rem; border-bottom: 1px dashed rgba(255, 255, 255, .14); } .rf-tracks { gap: .5rem; align-self: stretch; } .rf-tracks .track-grid { flex: 1; grid-auto-rows: minmax(6.5rem, 1fr); } .room-card .rf-tracks .track-grid { flex: none; } /* 무작위 트랙 단추: 켜지면 노란 불, 카드들은 한발 물러난다 */ .rf-trackhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .rf-rand { font-size: .84rem; } .rf-rand.on { --b1: #ffe36a; --b2: #ffb21f; --bd: #b86a00; --fg: var(--ink); text-shadow: none; } .rf-rand.on .ico { animation: diceRoll .5s var(--ease-back); } @keyframes diceRoll { from { transform: rotate(-200deg) scale(.6); } } /* 혼자 달리기 트랙 머리: 제목 + 무작위 단추 */ .sg-trackhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .sg-trackhead .sec-title { margin: 0; } .sg-rand { font-size: .8rem; min-height: 2rem; padding-block: .2rem; } .sg-q { font-weight: 900; letter-spacing: .2em; color: #9fe2ff; } .track-grid.is-random .track-card { opacity: .5; filter: saturate(.6); } .track-grid.is-random .track-card:hover, .track-grid.is-random .track-card:focus-visible { opacity: .85; filter: none; } .room-form .tog-txt { font-size: .8rem; } /* ── 대기실 ── */ .lb-code { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem .3rem .9rem; border-radius: 1.1rem; background: rgba(10, 14, 60, .6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); } .lb-code > small { font-size: .72rem; font-weight: 900; opacity: .85; writing-mode: horizontal-tb; } .code-tiles { display: flex; gap: .25rem; } .code-tile { width: 2.15rem; height: 2.6rem; display: grid; place-items: center; border-radius: .5rem; font: 900 1.55rem/1 ui-monospace, Consolas, monospace; color: var(--ink); background: linear-gradient(#fffbe0, #ffe14d 60%, #ffc21f); box-shadow: inset 0 2px 0 #fff, 0 .2rem 0 #b85f00; animation: tileFlip .5s var(--ease-back) both; } .code-tile:nth-child(2) { animation-delay: .06s; } .code-tile:nth-child(3) { animation-delay: .12s; } .code-tile:nth-child(4) { animation-delay: .18s; } @keyframes tileFlip { from { transform: rotateX(90deg); opacity: 0; } } .lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.1rem; height: 100%; min-height: 0; } .lb-left { display: flex; flex-direction: column; gap: .7rem; min-height: 0; } .lb-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(9.5rem, 1fr)); gap: .65rem; flex: 1; min-height: 0; padding: .25rem; } .slot { appearance: none; border: 0; cursor: pointer; color: #fff; position: relative; overflow: hidden; padding: .55rem .5rem .5rem; border-radius: 1.1rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .25rem; text-align: center; min-width: 0; background: linear-gradient(170deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), 0 .25rem 0 rgba(0, 0, 0, .3); transition: transform .2s var(--ease-back), box-shadow .25s, background .25s; animation: rise .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); } .slot:hover:not(:disabled) { transform: translateY(-.2rem); } .slot:active:not(:disabled) { transform: translateY(.1rem); } .slot-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(170deg, color-mix(in srgb, var(--c1) 70%, #1a2a9e), color-mix(in srgb, var(--c2) 30%, #10164f) 85%); } .slot-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(125deg, rgba(255, 255, 255, .08) 0 .6rem, transparent .6rem 1.4rem); } .slot { isolation: isolate; } .slot-num { position: absolute; left: .5rem; top: .35rem; font-size: .72rem; font-weight: 900; opacity: .7; } .slot-portrait { position: relative; width: min(5.2rem, 62%); aspect-ratio: 1; flex: 0 1 auto; min-height: 0; margin-top: .2rem; } .slot-ring { position: absolute; inset: -.18rem; border-radius: 50%; background: conic-gradient(#5fff7d calc(var(--lvl, 0) * 360deg), transparent 0); opacity: 0; transition: opacity .15s; } .slot-pic { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 70%); box-shadow: inset 0 0 0 .2rem rgba(255, 255, 255, .6), 0 .2rem .5rem rgba(0, 0, 0, .35); } .slot.speaking .slot-ring { opacity: 1; animation: speakRing .45s ease-in-out infinite alternate; } .slot.speaking .slot-pic { box-shadow: inset 0 0 0 .2rem #5fff7d, 0 0 calc(.4rem + var(--lvl, 0) * 1.4rem) rgba(95, 255, 125, .9); } @keyframes speakRing { to { transform: scale(1.06); } } .slot-badges { position: absolute; right: .4rem; top: .35rem; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; } .sb { display: inline-flex; align-items: center; gap: .15rem; padding: .08rem .4rem; border-radius: 999px; font-size: .62rem; font-weight: 900; line-height: 1.3; } .sb .ico { width: .95rem; height: .95rem; } .sb-crown { color: #ffd21f; background: rgba(10, 14, 60, .75); padding: .15rem .3rem; filter: drop-shadow(0 0 .3rem rgba(255, 210, 31, .6)); animation: crownBob 2s ease-in-out infinite; } @keyframes crownBob { 50% { transform: translateY(-.15rem) rotate(-6deg); } } .sb-bot { background: #6a7bb0; color: #fff; } .sb-me { background: linear-gradient(#fff06b, #ffb21f); color: var(--ink); } .slot-voice { position: absolute; left: .45rem; top: 1.45rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 14, 60, .75); } .slot-voice .ico { width: .9rem; height: .9rem; } .slot-voice.on { color: #5fff7d; } .slot-voice.muted { color: #ff8a9a; } .slot-voice.off { color: rgba(255, 255, 255, .45); } .slot-info { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; line-height: 1.2; } .slot-name { font-size: .98rem; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slot-kart { display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; font-weight: 800; opacity: .9; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .slot-state { margin-top: auto; display: inline-flex; align-items: center; gap: .2rem; padding: .18rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 900; white-space: nowrap; } .slot-state .ico { width: .95rem; height: .95rem; } .st-wait { background: rgba(10, 14, 60, .6); color: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } .st-ready { background: linear-gradient(#7cf08f, #1fb548); box-shadow: 0 .14rem 0 #0e6e2c; animation: readyPop .4s var(--ease-back); } .st-host { background: linear-gradient(#fff06b, #ffb21f); color: var(--ink); box-shadow: 0 .14rem 0 #b85f00; } .st-spec { background: rgba(142, 92, 255, .5); } @keyframes readyPop { from { transform: scale(.6); } } .slot.ready { box-shadow: inset 0 0 0 2px rgba(124, 240, 143, .7), 0 .25rem 0 rgba(0, 0, 0, .3); } .slot.me { box-shadow: inset 0 0 0 3px #ffd21f, 0 0 0 .15rem rgba(255, 210, 31, .4), 0 .25rem 0 rgba(0, 0, 0, .3), 0 0 1.2rem rgba(255, 210, 31, .35); } .slot.team-red::before, .slot.team-blue::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .32rem; background: var(--team); z-index: 1; } .slot.team-red .slot-bg { background: linear-gradient(170deg, rgba(255, 77, 77, .55), #26114a 85%); } .slot.team-blue .slot-bg { background: linear-gradient(170deg, rgba(61, 139, 255, .6), #10164f 85%); } .slot.bot .slot-pic { filter: saturate(.85); } .slot.spectator { opacity: .7; } .slot.empty { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .0); justify-content: center; } .slot.empty::after { content: ''; position: absolute; inset: .3rem; border-radius: .9rem; border: 2px dashed rgba(255, 255, 255, .25); pointer-events: none; } .slot-empty { display: flex; flex-direction: column; align-items: center; gap: .2rem; opacity: .85; } .slot-empty .ico { width: 2rem; height: 2rem; padding: .35rem; border-radius: 50%; background: rgba(255, 255, 255, .12); } .slot-empty b { font-size: .92rem; } .slot-empty small { font-size: .66rem; font-weight: 700; opacity: .8; } .slot.empty:hover .slot-empty .ico { background: rgba(255, 210, 31, .9); color: var(--ink); animation: wobble .5s ease; } .slot.closed { background: rgba(0, 0, 0, .3); cursor: not-allowed; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); justify-content: center; animation: none; opacity: .75; } .slot-closed { display: flex; flex-direction: column; align-items: center; gap: .2rem; opacity: .55; font-weight: 800; } .slot-closed .ico { width: 1.6rem; height: 1.6rem; } .lb-mybar { display: flex; align-items: center; gap: .7rem 1rem; flex-wrap: wrap; padding: .55rem .8rem; flex: none; } .lb-team { display: flex; align-items: center; gap: .5rem; } .lb-voice { display: flex; flex-direction: column; gap: .3rem; margin-left: auto; min-width: 0; } .lb-voice.is-off { flex-direction: row; align-items: center; gap: .7rem; } .voice-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .voice-hint { font-size: .72rem; font-weight: 700; opacity: .85; display: inline-flex; align-items: center; gap: .25rem; max-width: 14rem; } .voice-err { font-size: .72rem; font-weight: 800; color: #ffb3bd; display: inline-flex; align-items: center; gap: .25rem; } .voice-note { font-size: .72rem; font-weight: 800; color: #bfe8ff; display: inline-flex; align-items: center; gap: .25rem; } /* 내 소리가 실제로 나가는 중 (눌러서 말하기를 누르고 있거나 계속 켜기에서 말하는 중) */ .lb-voice.is-sending .my-meter { box-shadow: 0 0 0 2px #5fff7d, 0 0 .7rem rgba(95, 255, 125, .7); } .lb-voice.is-sending .voice-hint { color: #7dff95; } .my-meter { position: relative; width: 4.5rem; height: .5rem; border-radius: 999px; background: rgba(0, 0, 0, .45); overflow: hidden; } .my-meter i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--lvl, 0)); background: linear-gradient(90deg, #5fff7d, #ffd21f, #ff4f63); transition: transform .08s linear; } .lb-voice.is-on .btn-glass:first-child { --b1: rgba(95, 255, 125, .35); } .lb-right { display: flex; flex-direction: column; gap: .7rem; min-height: 0; } .lb-room { overflow: hidden; flex: none; } .lr-art { position: relative; aspect-ratio: 21 / 8; } .lr-pic { position: absolute; inset: 0; } .lr-chips { position: absolute; left: .5rem; bottom: .45rem; display: flex; gap: .3rem; } .lr-chips .chip:not([class*="chip-"]) { background: rgba(10, 14, 60, .78); } .lr-info { padding: .55rem .8rem .7rem; display: flex; flex-direction: column; gap: .35rem; } .lr-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .lr-title b { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lr-meta { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .74rem; font-weight: 800; opacity: .9; } .lr-meta span { display: inline-flex; align-items: center; gap: .2rem; } .lr-meta .ico { color: #bfe8ff; width: 1rem; height: 1rem; } .lr-edit { align-self: flex-start; } .lr-note { font-size: .72rem; font-weight: 700; opacity: .8; display: inline-flex; align-items: center; gap: .25rem; } .lr-note .ico { color: #ffd21f; } .lb-status { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 800; flex-wrap: wrap; } .lb-status > .ico { width: 1.4rem; height: 1.4rem; color: #ffe14d; } .ready-count { padding: .25rem .7rem; border-radius: 999px; background: rgba(10, 14, 60, .6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); white-space: nowrap; } .ready-count b { font-size: 1.05rem; color: #ffe14d; font-variant-numeric: tabular-nums; } .ready-count.ok { box-shadow: inset 0 0 0 2px #5fff7d; } .ready-count.ok b { color: #5fff7d; } .lb-main { min-width: 11rem; } .scr-lobby .foot-actions { flex: 1; justify-content: flex-end; } .scr-lobby .scr-foot .hints { flex: none; } /* ── 채팅 (대기실 창) ── */ .chat { display: flex; flex-direction: column; min-height: 0; } .chat-panel { flex: 1; min-height: 9rem; padding: .55rem .6rem .6rem; gap: .45rem; } .chat-head { display: flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 900; padding: 0 .2rem; } .chat-head .ico { color: var(--yellow); } .chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .28rem; padding: .2rem; -webkit-user-select: text; user-select: text; } .msg { font-size: .84rem; line-height: 1.38; word-break: break-word; overflow-wrap: anywhere; } .chat-panel .msg { padding: .25rem .55rem; border-radius: .7rem; background: rgba(255, 255, 255, .07); align-self: flex-start; max-width: 100%; } .chat-panel .msg.me { background: rgba(255, 210, 31, .16); } .msg.new { animation: msgIn .3s var(--ease-out); } @keyframes msgIn { from { opacity: 0; transform: translateY(.5rem); } } .msg .who { margin-right: .35rem; font-weight: 900; } .msg .who::after { content: ''; } .msg.sys { color: #bfe8ff; font-weight: 800; font-size: .78rem; background: none !important; display: flex; align-items: center; gap: .3rem; } .msg-ico { width: 1rem; height: 1rem; color: #ffd21f; } .chat-quick { display: flex; gap: .35rem; overflow-x: auto; padding: .1rem 1.2rem .25rem .1rem; scrollbar-width: none; flex: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .chat-quick::-webkit-scrollbar { display: none; } .chat-quick .chip { flex: none; font-size: .74rem; } .chat-form { display: flex; gap: .4rem; flex: none; } .chat-input { flex: 1; min-width: 0; min-height: max(var(--tap), 2.5rem); padding: .4rem .8rem; border: 0; border-radius: .8rem; outline: none; font-size: .9rem; font-weight: 700; color: var(--ink); background: linear-gradient(#fff, #eef2ff); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .07), 0 0 0 2px rgba(255, 255, 255, .25); } .chat-input:focus { box-shadow: 0 0 0 3px var(--yellow); } .chat-send { width: max(var(--tap), 2.5rem); min-height: max(var(--tap), 2.5rem); } /* ── 불러오는 중 ── */ .scr-loading { display: block; } .ld-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 40% 55%, #2f5bff, #10164f 70%); } /* 속도선 그림: 소실점(그림 가운데 조금 위)으로 빨려 들어가듯 천천히 다가간다 */ .ld-speed { position: absolute; inset: 0; transform-origin: 50% 54%; animation: ldRush 7s cubic-bezier(.3, 0, .7, 1) both; } .ld-speed .pic-img { object-position: 50% 54%; } @keyframes ldRush { from { transform: scale(1); } to { transform: scale(1.22); } } /* 트랙 그림은 오른쪽을 사선으로 잘라 얹는다 — 왼쪽 속도선 위에 제목, 오른쪽에 갈 곳 */ .ld-art { position: absolute; inset: 0; clip-path: polygon(36% 0, 100% 0, 100% 100%, 16% 100%); animation: ldArtIn .75s var(--ease-out) both; } .ld-pic { position: absolute; inset: 0; left: 10%; animation: kenburns 18s ease-in-out infinite alternate; } .ld-edge { position: absolute; inset: 0; pointer-events: none; clip-path: polygon(35.2% 0, 36.4% 0, 16.4% 100%, 15.2% 100%); background: linear-gradient(#fff6a0, #ffd21f 45%, #ff9d1f); filter: drop-shadow(0 0 .6rem #ffd21f); animation: ldArtIn .75s var(--ease-out) both; } @keyframes ldArtIn { from { transform: translateX(14%); opacity: 0; } } .ld-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 50, .55) 0%, transparent 25%, transparent 45%, rgba(8, 12, 50, .9) 85%), linear-gradient(90deg, rgba(8, 12, 50, .7), rgba(8, 12, 50, .25) 40%, transparent 60%); } .ld-rand { animation: popIn .4s var(--ease-back) both; } .scr-loading.is-random .ld-name .otext { --g2: #9fe2ff; } .scr-loading.is-random .ld-pic { left: 16%; animation: none; } .ld-bg .bg-stripes { opacity: .5; } .ld-top { position: absolute; left: 1.5rem; top: calc(1.2rem + var(--sat)); display: flex; gap: .45rem; animation: inTop .5s var(--ease-out) both; } .ld-top .chip { font-size: .85rem; padding: .3rem .8rem; } .ld-main { position: absolute; left: 1.5rem; right: 1.5rem; bottom: calc(7.6rem + var(--sab)); display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .ld-title { max-width: 40rem; animation: inLeft .6s var(--ease-out) both; } .ld-theme { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; font-weight: 800; padding: .2rem .7rem; border-radius: 999px; background: rgba(10, 14, 60, .65); } .ld-name { margin: .35rem 0 .2rem; font-size: 3.4rem; line-height: 1.1; } .ld-name .otext { --g2: #ffe14d; } .ld-desc { margin: 0; font-size: 1rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); } .ld-tip { position: relative; width: min(26rem, 42vw); min-height: 7.4rem; flex: none; } .tip-in { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1.1rem 1rem; border-radius: 1.1rem; animation: tipIn .5s var(--ease-out) both; background: linear-gradient(180deg, rgba(36, 64, 208, .88), rgba(16, 20, 74, .92)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), .45rem .45rem 0 rgba(255, 210, 31, .85); } .tip-in.tip-out { animation: tipOut .4s var(--ease-in) forwards; } @keyframes tipIn { from { opacity: 0; transform: translateX(2rem) rotate(2deg); } } @keyframes tipOut { to { opacity: 0; transform: translateX(-2rem) rotate(-2deg); } } .tip-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; font-weight: 900; padding: .1rem .55rem; border-radius: 999px; color: var(--ink); background: linear-gradient(#fff06b, #ffb21f); } .tip-tag .ico { width: .95rem; height: .95rem; } .tip-in p { margin: .45rem 0 0; font-size: .98rem; font-weight: 800; line-height: 1.5; } .ld-bottom { position: absolute; left: 1.5rem; right: 1.5rem; bottom: calc(1.2rem + var(--sab)); display: flex; flex-direction: column; gap: .45rem; } .ld-players { display: flex; gap: .35rem; flex-wrap: wrap; } .ld-player { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem .15rem .15rem; border-radius: 999px; background: rgba(10, 14, 60, .65); font-size: .74rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: box-shadow .3s; } .ld-player.ok { box-shadow: inset 0 0 0 2px #5fff7d; } .ld-ppic { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255, 255, 255, .2); } .ld-player i { display: inline-flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; color: #5fff7d; font-style: normal; } .ld-spin { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #ffd21f; animation: spin .8s linear infinite; } .ld-barwrap { display: flex; align-items: center; gap: .7rem; } .ld-bolt { width: 2.4rem; height: 2.4rem; flex: none; animation: boltZap 1s ease-in-out infinite; } .ld-bolt svg { width: 100%; height: 100%; } @keyframes boltZap { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.12); filter: drop-shadow(0 0 .5rem #ffe14d); } } .ld-bar { position: relative; flex: 1; height: 1.35rem; border-radius: 999px; overflow: hidden; background: rgba(5, 8, 35, .7); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 255, 255, .25); transform: skewX(-14deg); } .ld-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .22) 0 .6rem, transparent .6rem 1.2rem), linear-gradient(90deg, #ffb21f, #ffe14d 60%, #fffbd0); } .ld-gloss { position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(rgba(255, 255, 255, .35), transparent); } .ld-pct { min-width: 3.2em; text-align: right; font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--ink); } .ld-status { font-size: .86rem; font-weight: 800; opacity: .9; padding-left: 3.1rem; } /* ── 결과 ── */ /* 배경 그림(results_bg): 보랏빛 하늘 아래 가운데 결승 아치, 양옆 관중석, 아래 절반은 색종이 깔린 길(시상대 없음). 아치가 표와 시상대 사이 틈에 오도록 가운데를 맞추고, 시상대가 서는 아래(길)는 어둡게 눌러 시상대 색이 산다. 아주 느리게 다가가 정지 화면처럼 보이지 않게 한다 */ .scr-results .scr-bg .bg-pic { transform-origin: 50% 45%; animation: resDrift 24s ease-in-out infinite alternate; } .scr-results .scr-bg .bg-pic .pic-img { object-position: 50% 42%; } @keyframes resDrift { to { transform: scale(1.06); } } .scr-results .scr-bg.has-bg::after { background: radial-gradient(ellipse 60% 45% at 50% 42%, transparent, rgba(10, 14, 60, .25) 70%), linear-gradient(180deg, rgba(40, 14, 90, .4) 0%, rgba(10, 14, 60, .06) 28%, rgba(10, 14, 60, .3) 62%, rgba(6, 8, 35, .88) 100%); } .res-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.2rem; height: 100%; min-height: 0; } .res-left { display: flex; flex-direction: column; align-items: center; gap: .7rem; min-height: 0; } .res-headline { font-size: 2.1rem; text-align: center; animation: popIn .6s .2s var(--ease-back) both; } .res-headline.mood-win .otext { --g2: #ffd21f; } .res-headline.mood-good .otext { --g2: #9fe2ff; } .res-headline.mood-sad .otext { --g2: #c9c9e0; } .res-headline.mood-win { animation: popIn .6s .2s var(--ease-back) both, winGlow 1.6s 1s ease-in-out infinite; } @keyframes winGlow { 50% { filter: drop-shadow(0 0 .8rem rgba(255, 210, 31, .8)); } } .res-record { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem 1rem .3rem .45rem; border-radius: 999px; font-weight: 900; color: var(--ink); position: relative; overflow: hidden; background: linear-gradient(#fff06b, #ffb21f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 .22rem 0 #b85f00, 0 0 1.4rem rgba(255, 210, 31, .55); animation: popIn .55s .5s var(--ease-back) both; } .res-record::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%) 0 0 / 250% 100%; animation: sweep 1.8s 1.1s linear infinite; } .res-record .ico { width: 1.7rem; height: 1.7rem; padding: .25rem; border-radius: 50%; background: var(--ink); color: #ffd21f; } .res-record b { font-size: 1.15rem; } .res-record span { font-variant-numeric: tabular-nums; font-weight: 800; } .team-score { display: flex; align-items: center; gap: .8rem; animation: rise .5s .3s var(--ease-out) both; } .ts { display: flex; flex-direction: column; align-items: center; padding: .3rem 1.2rem .4rem; border-radius: 1rem; min-width: 6.5rem; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3), 0 .25rem 0 rgba(0, 0, 0, .3); } .ts small { font-size: .74rem; font-weight: 900; } .ts b { font-size: 2rem; line-height: 1.1; } .ts-red { background: linear-gradient(#ff7b7b, #c9182b); } .ts-blue { background: linear-gradient(#6aa8ff, #1f45c9); } .ts-vs { font-weight: 900; font-size: 1.1rem; opacity: .9; } .team-score.win-red .ts-red, .team-score.win-blue .ts-blue { transform: scale(1.1); box-shadow: inset 0 0 0 2px #fff, 0 0 0 .2rem #ffd21f, 0 0 1.2rem rgba(255, 210, 31, .6); } .team-score.win-red .ts-blue, .team-score.win-blue .ts-red { opacity: .7; } .podium { flex: 1; min-height: 0; width: 100%; max-width: 30rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .5rem; padding-top: 1rem; } .pod { display: flex; flex-direction: column; align-items: center; min-width: 0; animation: podUp .7s var(--ease-back) both; animation-delay: calc(.35s + var(--i, 0) * .22s); } @keyframes podUp { from { opacity: 0; transform: translateY(3rem); } } .pod-who { display: flex; flex-direction: column; align-items: center; gap: .1rem; position: relative; min-width: 0; max-width: 100%; } .pod-pic { width: 5.8rem; height: 5.8rem; border-radius: 50%; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c1) 50%, white), var(--c1) 70%); box-shadow: inset 0 0 0 .22rem rgba(255, 255, 255, .7), 0 .3rem .7rem rgba(0, 0, 0, .35); } .pod-1 .pod-pic { width: 7.2rem; height: 7.2rem; box-shadow: inset 0 0 0 .25rem #ffe14d, 0 0 1.5rem rgba(255, 210, 31, .6); } .pod-crown { position: absolute; top: -1.35rem; z-index: 2; color: #ffd21f; filter: drop-shadow(0 2px 0 var(--ink)); animation: crownBob 1.8s ease-in-out infinite; } .pod-crown .ico { width: 2.2rem; height: 2.2rem; } .pod-name { font-size: .95rem; font-weight: 900; text-shadow: 0 2px 0 var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pod.me .pod-name { color: #ffe14d; } .pod-time { font-size: .74rem; font-weight: 800; opacity: .9; font-variant-numeric: tabular-nums; } .pod-block { width: 100%; margin-top: .35rem; border-radius: .7rem .7rem .2rem .2rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: .35rem; position: relative; overflow: hidden; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -.4rem 0 rgba(0, 0, 0, .18), 0 .5rem 1rem rgba(0, 0, 0, .3); } .pod-block::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .12) 0 .8rem, transparent .8rem 2rem); } .pod-block.gold { height: 8.5rem; background: linear-gradient(#ffe95c, #ffb21f 60%, #e08a00); } .pod-block.silver { height: 6.2rem; background: linear-gradient(#f2f5ff, #b9c3dc 60%, #8d97b5); } .pod-block.bronze { height: 4.8rem; background: linear-gradient(#ffc08a, #e0803a 60%, #a8541c); } .pod-num { font-size: 2.6rem; line-height: 1; } .pod-block small { position: relative; z-index: 1; font-size: .78rem; font-weight: 900; color: var(--ink); } .pod-block[style*="--team"] { box-shadow: inset 0 .35rem 0 var(--team), inset 0 -.4rem 0 rgba(0, 0, 0, .18), 0 .5rem 1rem rgba(0, 0, 0, .3); } .pod-empty { visibility: hidden; } .res-right { min-height: 0; display: flex; flex-direction: column; } .res-table { padding: .45rem; overflow: auto; min-height: 0; } .res-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 6.4rem 6.4rem 3.2rem; align-items: center; gap: .6rem; padding: .32rem .7rem; border-radius: .8rem; margin-bottom: .25rem; animation: rise .4s var(--ease-out) both; animation-delay: calc(.5s + var(--i, 0) * 60ms); background: rgba(255, 255, 255, .06); } .res-row > span { min-width: 0; } .res-head { position: sticky; top: -.45rem; z-index: 2; background: rgba(16, 20, 74, .96); font-size: .72rem; font-weight: 900; opacity: 1; color: rgba(255, 255, 255, .75); animation: none; } .res-row.me { background: linear-gradient(90deg, rgba(255, 210, 31, .4), rgba(255, 138, 31, .15)); box-shadow: inset 0 0 0 2px rgba(255, 210, 31, .7); } .res-row.retired { opacity: .7; } .res-row.team-red, .res-row.team-blue { box-shadow: inset .3rem 0 0 var(--team); } .res-row.me.team-red, .res-row.me.team-blue { box-shadow: inset .3rem 0 0 var(--team), inset 0 0 0 2px rgba(255, 210, 31, .7); } .res-rank { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; font-weight: 900; background: rgba(0, 0, 0, .3); } .res-rank.gold { background: linear-gradient(#ffe95c, #e0a000); color: var(--ink); box-shadow: 0 .14rem 0 #8a5a00; } .res-rank.silver { background: linear-gradient(#ffffff, #a9b3cc); color: var(--ink); box-shadow: 0 .14rem 0 #5d6680; } .res-rank.bronze { background: linear-gradient(#ffc08a, #c4692a); color: var(--ink); box-shadow: 0 .14rem 0 #6e3510; } .res-who { display: flex; align-items: center; gap: .45rem; } .res-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; } .res-pic { width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none; background: rgba(255, 255, 255, .18); } .res-time, .res-best { font-variant-numeric: tabular-nums; font-weight: 800; font-size: .9rem; display: flex; align-items: center; gap: .2rem; } .res-best { opacity: .85; } .res-best.fastest { color: #c58bff; opacity: 1; } .res-best .ico { width: 1rem; height: 1rem; } .res-pts { font-weight: 900; font-size: 1.05rem; text-align: right; color: #ffe14d; } .res-auto { font-size: .86rem; font-weight: 800; opacity: .85; margin-right: auto; } .scr-results .foot-actions { flex: 1; } .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; } .confetti i { position: absolute; top: -5%; left: var(--x); width: calc(.55rem * var(--s)); height: calc(.9rem * var(--s)); border-radius: 2px; opacity: .95; animation: confettiFall var(--d) linear infinite; animation-delay: var(--dl); } .confetti i:nth-child(3n) { border-radius: 50%; height: calc(.55rem * var(--s)); } @keyframes confettiFall { from { transform: translate3d(0, -5vh, 0) rotate(var(--r)); } 50% { transform: translate3d(var(--sw), 50vh, 0) rotate(calc(var(--r) + 360deg)); } to { transform: translate3d(0, 108vh, 0) rotate(calc(var(--r) + 720deg)); } } /* ── 설정 ── */ .set-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; } .set-col { display: flex; flex-direction: column; gap: 1rem; } .set-card { padding: .8rem 1.2rem .6rem; animation: rise .5s var(--ease-out) both; } .set-col .set-card:nth-child(2) { animation-delay: .08s; } /* 줄 높이 2.75rem: 3.1rem 이면 1280×720·1366×768 에서 오른쪽 칸(화면+음성) 맨 아래 '자막' 줄이 발 밑으로 잘린다 */ .set-row { display: grid; grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr); align-items: center; gap: .9rem; padding: .28rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .13); min-height: 2.75rem; } .set-row:last-child { border-bottom: 0; } .set-row > :last-child { justify-self: end; } .set-row > .sld { justify-self: stretch; } .set-row:has(> .sld) { grid-template-columns: 11.8rem minmax(0, 1fr); } .set-lbl { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; align-items: center; font-weight: 800; font-size: .9rem; } .set-lbl .ico { color: var(--yellow); } .set-lbl small { grid-column: 2; font-size: .7rem; font-weight: 700; opacity: .72; line-height: 1.25; } /* 낮은 16:9 창(1280×720): 버튼·토글이 최소 40px 이라 줄 높이가 rem 보다 커서 위 줄 높이만으로는 모자란다 — 카드 여백을 줄인다 */ @media (max-height: 760px) and (min-width: 641px) { .set-col { gap: .65rem; } .set-card { padding: .55rem 1.1rem .35rem; } .set-row { padding-block: .18rem; } } /* ── 도움말 ── */ .help-tabs .seg-opt { padding: .3rem 1rem; } .help-body { min-height: 100%; } .help-pane { animation: rise .4s var(--ease-out) both; } .help-card { padding: .8rem 1rem .9rem; } .help-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .pane-keys { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .kb-wrap { display: flex; flex-direction: column; gap: .8rem; } .kb { display: flex; gap: .9rem; align-items: flex-end; padding: .7rem; border-radius: 1rem; background: rgba(5, 8, 35, .45); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5); } .kb-main { flex: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .kb-row { display: flex; gap: .3rem; } .kb-key { flex: var(--w, 1) 1 0; min-width: 0; height: 2.15rem; border-radius: .42rem; display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: rgba(255, 255, 255, .55); background: linear-gradient(#3a4590, #262e6e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 .18rem 0 #121852; white-space: nowrap; overflow: hidden; } .kb-key.act { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); background: linear-gradient(color-mix(in srgb, var(--kc) 70%, white), var(--kc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 .18rem 0 color-mix(in srgb, var(--kc) 55%, black), 0 0 .7rem color-mix(in srgb, var(--kc) 55%, transparent); animation: keyGlow 2.4s ease-in-out infinite; } .kb-key.gap { visibility: hidden; } @keyframes keyGlow { 50% { filter: brightness(1.15); } } .kb-arrows { width: 7.2rem; flex: none; display: flex; flex-direction: column; gap: .3rem; } .kb-arrows .kb-key { font-size: 1rem; } .kb-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .76rem; font-weight: 800; } .kb-lg { display: inline-flex; align-items: center; gap: .35rem; } .kb-lg i { width: .8rem; height: .8rem; border-radius: .25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .key-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .8rem; } .key-list li { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; min-width: 0; } .kl-keys { display: inline-flex; flex: none; } .help-note { margin: .5rem 0 0; font-size: .76rem; font-weight: 700; opacity: .8; } .touch-demo { display: flex; justify-content: center; } .td-screen { position: relative; width: 100%; max-width: 22rem; aspect-ratio: 19 / 9; border-radius: 1.1rem; background: linear-gradient(#5fc8ff, #9fe2ff 50%, #5cc56b 51%, #3fae54); box-shadow: inset 0 0 0 .35rem #1a1f3b, 0 .3rem .8rem rgba(0, 0, 0, .35); overflow: hidden; } /* 실제 터치 버튼(input.js: 오른쪽 262×250 묶음)의 비율 그대로 줄인 그림 */ .td-screen { container-type: inline-size; } .td-btn { position: absolute; display: grid; place-items: center; border-radius: 50%; font-size: 3.1cqi; line-height: 1.05; font-weight: 900; color: #fff; text-align: center; white-space: pre-line; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); background: rgba(20, 24, 48, .45); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 2px 4px rgba(0, 0, 0, .25); } .td-left { position: absolute; left: 4%; bottom: 7%; width: 30%; height: 34%; } .td-left .td-btn { bottom: 0; width: 45%; aspect-ratio: 1; font-size: 5cqi; } .td-left .td-btn:last-child { left: 52%; } .td-right { position: absolute; right: 4%; bottom: 7%; width: 40%; aspect-ratio: 262 / 250; } .td-gas { right: 0; bottom: 0; width: 42.7%; aspect-ratio: 1; background: rgba(46, 204, 113, .62); } .td-brake { right: 48.9%; bottom: 0; width: 28.2%; aspect-ratio: 1; background: rgba(231, 76, 60, .6); font-size: 2.6cqi; letter-spacing: -.04em; white-space: nowrap; } /* 작은 단추라 '브레이크'가 두 줄로 쪼개지지 않게 */ .td-drift { right: 42.7%; bottom: 33.6%; width: 35.1%; aspect-ratio: 1; background: rgba(52, 152, 219, .65); } .td-use { right: 5.3%; bottom: 50.4%; width: 32%; aspect-ratio: 1; background: rgba(255, 138, 31, .7); } .td-swap { right: 76.3%; bottom: 72.8%; width: 22%; aspect-ratio: 1; font-size: 2.6cqi; } .td-top { position: absolute; right: 4%; top: 8%; display: flex; gap: 2cqi; } .td-mini { position: relative; width: 7.5cqi; aspect-ratio: 1; } .td-mini .ico { width: 55%; height: 55%; } .pane-tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .tech-card { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1rem; padding: .9rem 1rem; align-items: center; } .tech-art { height: 7rem; display: grid; place-items: center; border-radius: .9rem; background: rgba(5, 8, 35, .45); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45); overflow: hidden; } .tech-txt h3 { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 900; color: #ffe14d; text-shadow: 0 2px 0 var(--ink); } .tech-txt ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; font-weight: 700; line-height: 1.45; } .tech-txt li::marker { color: #ffd21f; } .art-drift { width: 100%; height: 100%; } .art-drift svg { width: 100%; height: 100%; } .art-instant { width: 90%; display: flex; flex-direction: column; gap: .4rem; } .ib-bar { display: flex; height: 1.4rem; border-radius: .4rem; overflow: hidden; font-size: .62rem; font-weight: 900; } .ib-seg { display: grid; place-items: center; } .ib-drift { flex: 3; background: linear-gradient(90deg, #ff4fa3, #ff8fd0); } .ib-win { flex: 1.1; background: linear-gradient(90deg, #ffe14d, #ffb21f); color: var(--ink); animation: blink .8s infinite; } .ib-after { flex: 1.2; background: rgba(255, 255, 255, .15); } .ib-marks { display: flex; justify-content: space-between; font-size: .64rem; font-weight: 800; } .ib-press { display: inline-flex; align-items: center; gap: .2rem; color: #ffe14d; } .art-nitro { display: flex; align-items: center; gap: .3rem; width: 90%; } .an-slot { width: 1.8rem; height: 2.9rem; opacity: .35; filter: grayscale(1); } .an-slot.on { opacity: 1; filter: none; animation: floaty 1.6s ease-in-out infinite; } .an-slot svg { width: 100%; height: 100%; } .an-gauge { flex: 1; height: 1rem; border-radius: 999px; background: rgba(0, 0, 0, .45); overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); } .an-gauge i { display: block; height: 100%; width: 72%; background: linear-gradient(90deg, #1b4fd8, #2fb8ff, #b8f4ff); animation: gaugeDemo 2.6s ease-in-out infinite; transform-origin: left; } @keyframes gaugeDemo { 0% { transform: scaleX(.1); } 80%, 100% { transform: scaleX(1.39); } } .art-more .ico { width: 3.6rem; height: 3.6rem; color: #ffe14d; animation: spin 8s linear infinite; } .pane-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } .item-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .7rem .8rem; text-align: center; animation: rise .4s var(--ease-out) both; } .item-card:nth-child(2) { animation-delay: .04s; } .item-card:nth-child(3) { animation-delay: .08s; } .item-card:nth-child(4) { animation-delay: .12s; } .item-card:nth-child(5) { animation-delay: .16s; } .item-card:nth-child(6) { animation-delay: .2s; } .item-card:nth-child(7) { animation-delay: .24s; } .item-card:nth-child(8) { animation-delay: .28s; } .ic-art { width: 4.6rem; height: 4.6rem; border-radius: 1.1rem; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05) 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); } .ic-pic { width: 82%; height: 82%; } .item-card:hover .ic-pic { animation: wobble .5s ease; } .ic-txt { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; } .ic-head { display: flex; flex-direction: column; align-items: center; gap: .2rem; } .ic-head b { font-size: 1rem; } .ic-head .chip { font-size: .64rem; } .ic-txt p { margin: 0; font-size: .74rem; font-weight: 700; line-height: 1.4; opacity: .92; } .ic-txt small { display: inline-flex; align-items: flex-start; gap: .2rem; font-size: .68rem; font-weight: 800; color: #ffe680; line-height: 1.35; text-align: left; } .ic-txt small .ico { width: .9rem; height: .9rem; flex: none; margin-top: .05rem; } .pane-online { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; } .help-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; font-weight: 700; line-height: 1.5; } .help-list li::marker { color: #ffd21f; } .points-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; } .pt { display: flex; flex-direction: column; align-items: center; padding: .3rem 0; border-radius: .6rem; background: rgba(255, 255, 255, .08); } .pt small { font-size: .66rem; font-weight: 800; opacity: .8; } .pt b { font-size: 1.2rem; color: #ffe14d; } .pt:first-child { background: linear-gradient(#ffe95c, #e0a000); color: var(--ink); } .pt:first-child b { color: var(--ink); } /* ── 일시정지 ── */ .scr-pause { display: grid; place-items: center; grid-template-rows: none; padding: 1rem; } .pz-dim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(10, 14, 60, .55), rgba(6, 8, 30, .82)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: fadeIn .25s ease both; } .scr-pause.leave .pz-dim { animation: fadeOut .3s ease both; } .pz-card { width: min(27rem, 100%); padding: 1.3rem 1.5rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; animation: popIn .4s var(--ease-back) both; max-height: 100%; overflow: auto; } .pz-title { display: flex; align-items: center; justify-content: center; gap: .6rem; } .pz-title h1 { margin: 0; font-size: 2.3rem; } .pz-ico { width: 2.6rem; height: 2.6rem; padding: .45rem; border-radius: .8rem; color: var(--ink); background: linear-gradient(#fff06b, #ffb21f); box-shadow: 0 .2rem 0 #b85f00; } .pz-info { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; } .pz-warn { margin: 0; display: flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: .8rem; font-size: .8rem; font-weight: 800; background: rgba(255, 138, 31, .22); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .55); } .pz-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .pz-btns .btn:first-child { grid-column: 1 / -1; } .pz-btns .btn:last-child { grid-column: 1 / -1; } .pz-card .hints { justify-content: center; font-size: .74rem; } /* ── 서버 깨우는 중 ── */ .scr-connecting { display: grid; place-items: center; grid-template-rows: none; padding: 1rem; } .cn-card { width: min(34rem, 100%); padding: 1.1rem 1.5rem 1.3rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; animation: popIn .45s var(--ease-back) both; max-height: 100%; overflow: auto; } .cn-road { position: relative; width: 100%; height: 6.2rem; border-radius: 1rem; overflow: hidden; background: linear-gradient(#7fd0ff, #c8ecff 55%, #55606f 56%, #3d4552); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); } .cn-lines { position: absolute; left: 0; right: 0; bottom: 1.25rem; height: .3rem; background: repeating-linear-gradient(90deg, #ffe14d 0 2rem, transparent 2rem 3.6rem); animation: roadRun .6s linear infinite; } @keyframes roadRun { to { background-position: -3.6rem 0; } } .cn-kart { position: absolute; left: 50%; bottom: .45rem; width: 8rem; transform: translateX(-50%); animation: kartIdle .35s ease-in-out infinite alternate; } .cn-kart svg { width: 100%; height: auto; display: block; } @keyframes kartIdle { to { transform: translateX(-50%) translateY(-.12rem) rotate(-.6deg); } } .cn-zz { position: absolute; left: calc(50% + 2.6rem); top: .3rem; font-weight: 900; font-size: 1.3rem; color: #fff; text-shadow: 0 2px 0 var(--ink); } .cn-zz small { font-size: .8em; margin-left: .1em; } .cn-zz, .cn-zz small { display: inline-block; animation: zz 2s ease-in-out infinite; } .cn-zz small:nth-child(1) { animation-delay: .3s; } .cn-zz small:nth-child(2) { animation-delay: .6s; } @keyframes zz { 0% { opacity: 0; transform: translate(0, .5rem) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(.6rem, -.9rem) scale(1.1); } } .cn-title { margin: .3rem 0 0; font-size: 2.1rem; } .cn-time { display: flex; align-items: baseline; gap: .4rem; font-weight: 800; } .cn-bolt { width: 1.7rem; height: 1.7rem; align-self: center; animation: boltZap 1s ease-in-out infinite; } .cn-bolt svg { width: 100%; height: 100%; } .cn-sec { font-size: 2.6rem; line-height: 1; color: #ffe14d; font-variant-numeric: tabular-nums; text-shadow: 0 .1em 0 var(--ink); min-width: 1.4em; } .cn-bar { position: relative; width: 100%; height: .9rem; border-radius: 999px; overflow: hidden; background: rgba(5, 8, 35, .6); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .2); } .cn-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); transition: transform .25s linear; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .25) 0 .5rem, transparent .5rem 1rem), linear-gradient(90deg, #19d3ff, #5aa2ff, #ffe14d); background-size: 2.2rem 100%, 100% 100%; animation: barStripes .6s linear infinite; } @keyframes barStripes { to { background-position: 2.2rem 0, 0 0; } } .cn-steps { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; gap: .4rem; align-items: center; font-size: .78rem; font-weight: 800; } .cn-steps li { display: inline-flex; align-items: center; gap: .3rem; opacity: .55; } .cn-steps li + li::before { content: ''; width: 1.2rem; height: 2px; background: rgba(255, 255, 255, .35); margin-right: .1rem; } .cn-dot { width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; background: rgba(255, 255, 255, .2); } .cn-steps li.now { opacity: 1; } .cn-steps li.now .cn-dot { background: linear-gradient(#fff06b, #ffb21f); color: var(--ink); animation: btnPulse 1.4s infinite; --bd: transparent; } .cn-steps li.done { opacity: 1; } .cn-steps li.done .cn-dot { background: #3ddc5a; } .cn-status { margin: .1rem 0 0; font-size: .95rem; font-weight: 800; } .cn-status.bad { color: #ffb3bd; } .cn-guide { margin: 0; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 800; background: rgba(255, 210, 31, .16); box-shadow: inset 0 0 0 1px rgba(255, 210, 31, .5); } .cn-guide .ico { color: #ffe14d; } .cn-fact { margin: 0; min-height: 2.8em; font-size: .8rem; font-weight: 700; opacity: .85; line-height: 1.45; } .cn-fact.in { animation: rise .45s var(--ease-out); } /* ═════════ 5. 창·알림 ═════════ */ .ui-modals { position: absolute; inset: 0; pointer-events: none; z-index: 10; } .modal { position: absolute; inset: 0; display: grid; place-items: center; padding: max(1rem, var(--sat)) max(1rem, var(--sar)) max(1rem, var(--sab)) max(1rem, var(--sal)); background: rgba(6, 8, 30, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: auto; animation: fadeIn .2s ease both; } .modal.out { animation: fadeOut .22s ease forwards; pointer-events: none; } .modal.out .modal-card { animation: popOut .22s var(--ease-in) forwards; } @keyframes popOut { to { opacity: 0; transform: scale(.9); } } .modal-card { width: min(30rem, 100%); max-height: 100%; overflow: auto; padding: 1.3rem 1.4rem 1.2rem; animation: popIn .38s var(--ease-back) both; position: relative; } .modal-wide .modal-card { width: min(60rem, 100%); } .modal-title { margin: 0 0 .8rem; font-size: 1.6rem; text-align: center; } .modal-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.1rem; flex-wrap: wrap; } .confirm-card { text-align: center; width: min(25rem, 100%); } .confirm-card .modal-actions { justify-content: center; } .confirm-card .modal-actions .btn { min-width: 8rem; } .confirm-ico { width: 4rem; height: 4rem; margin: .1rem auto .8rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#6aa8ff, #2f5bff); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 .25rem 0 #182a92; animation: popIn .5s .1s var(--ease-back) both; } .confirm-ico .ico { width: 2.1rem; height: 2.1rem; } .confirm-ico.danger { background: linear-gradient(#ff8593, #e5243b); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 .25rem 0 #8a0c1f; } .confirm-text { margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.5; } .slot-menu { width: min(24rem, 100%); background: linear-gradient(170deg, color-mix(in srgb, var(--c1) 45%, #1a2a9e), var(--glass2) 70%); } .sm-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; } .sm-head b { display: block; font-size: 1.3rem; } .sm-head small { font-size: .8rem; font-weight: 700; opacity: .85; } .sm-pic { width: 4rem; height: 4rem; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 .2rem rgba(255, 255, 255, .6); } .sm-items { display: flex; flex-direction: column; gap: .6rem; } .sm-items > .btn { width: 100%; } .loadout-card .seg { display: grid; width: 100%; margin-bottom: .8rem; } .lo-body { min-height: 17rem; max-height: 55vh; overflow: auto; padding: .2rem; } .lo-body .palette { justify-content: center; padding: 1.5rem .5rem; } .room-card .room-form { min-height: 0; } .room-card .rf-col { background: rgba(255, 255, 255, .05); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .ui-toasts { position: absolute; top: calc(4.9rem + var(--sat)); left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; width: max-content; max-width: calc(100vw - 2rem); } /* 알림은 화면 머리(제목 띠) 아래에 — 위 가운데에 두면 좁은 화면에서 제목·부제와 겹친다. 레이스 중(화면 없음)에는 아이템 칸 아래로 */ .ui-root:not(.on) .ui-toasts { top: calc(8.6rem + var(--sat)); } .toast { --tc: #2f6bff; display: flex; align-items: center; gap: .6rem; padding: .45rem 1.1rem .45rem .45rem; border-radius: 999px; font-size: .92rem; font-weight: 800; background: rgba(14, 18, 62, .94); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), 0 .5rem 1.2rem rgba(0, 0, 0, .4); animation: toastIn .45s var(--ease-back) both; max-width: 100%; } .toast.out { animation: toastOut .35s var(--ease-in) forwards; } .toast-ico { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--tc); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4); } .toast-ico .ico { width: 1.1rem; height: 1.1rem; } .toast-ok { --tc: #1fb548; } .toast-warn { --tc: #ff9d1f; } .toast-error { --tc: #e5243b; } .toast-info .toast-ico { color: #ffe14d; } @keyframes toastIn { from { opacity: 0; transform: translateY(-1rem) scale(.9); } } @keyframes toastOut { to { opacity: 0; transform: translateY(-.8rem) scale(.95); } } /* ═════════ 6. HUD ═════════ */ .hud-root { position: fixed; inset: 0; pointer-events: none; display: none; overflow: hidden; color: #fff; font-family: var(--font); --pad: max(.9rem, var(--sat)); --edge: 1rem; } .hud-root.on { display: block; } .hud-wrap { position: absolute; inset: 0; } .hud-root .otext { --sw: .22em; } .hud-txt, .h-lap, .hr-u, .hr-t, .ht-time, .spd-n, .hrt-n { text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 0 .2rem .5rem rgba(0, 0, 0, .45); } .hud-tl { position: absolute; left: calc(var(--edge) + var(--sal)); top: var(--pad); display: flex; flex-direction: column; gap: .5rem; } .h-rankbox { display: flex; align-items: flex-end; gap: .7rem; } .h-rank { display: flex; align-items: baseline; font-weight: 900; line-height: .9; transform-origin: left bottom; } .hr-num { font-size: 5rem; line-height: .95; --g2: #ffe14d; } .hr-u { font-size: 1.8rem; font-weight: 900; margin-left: .1rem; } .hr-t { font-size: 1.55rem; font-weight: 900; opacity: .95; margin-left: .15rem; } .h-rank.first .hr-num { --g1: #fffbd0; --g2: #ffb21f; } .h-rank.first .hr-num::after { animation: goldShine 2.4s ease-in-out infinite; background-size: 100% 200%; } @keyframes goldShine { 50% { filter: brightness(1.25); } } /* 순위가 오를 때 커지며(1.28배) 옆 LAP 상자 밑으로 들어가 '/8' 이 가려졌다 — 튀는 동안은 위에 그린다 */ .h-rank.up, .h-rank.down { position: relative; z-index: 2; } .h-rank.up { animation: rankUp .5s var(--ease-back); } .h-rank.down { animation: rankDown .5s ease; } @keyframes rankUp { 40% { transform: scale(1.28) rotate(-4deg); filter: drop-shadow(0 0 .7rem #5fff7d); } } @keyframes rankDown { 20%, 60% { transform: translateX(-.3rem); filter: drop-shadow(0 0 .6rem #ff4f63); } 40%, 80% { transform: translateX(.3rem); } } .h-lap { display: flex; align-items: baseline; gap: .2rem; margin-bottom: .45rem; padding: .25rem .8rem .3rem; border-radius: .8rem; position: relative; background: rgba(10, 14, 60, .6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); font-weight: 900; } .h-lap small { font-size: .7rem; letter-spacing: .08em; opacity: .85; margin-right: .2rem; } .h-lap b { font-size: 1.7rem; line-height: 1; } .h-lap span { font-size: 1rem; opacity: .9; } .h-final { display: none; position: absolute; left: 50%; top: -.75rem; transform: translateX(-50%); font-style: normal; font-size: .62rem; letter-spacing: .1em; padding: .05rem .45rem; border-radius: 999px; background: #ff3b4f; text-shadow: none; animation: blink .8s infinite; } .final-lap .h-lap { background: linear-gradient(rgba(255, 59, 79, .85), rgba(160, 15, 35, .85)); box-shadow: inset 0 0 0 2px #ffb3bd, 0 0 1rem rgba(255, 59, 79, .55); } .final-lap .h-final { display: block; } .h-lap.pop { animation: bump .5s var(--ease-back); } .h-stand { position: relative; width: 13.5rem; height: calc(var(--n, 0) * 2.1rem); transition: height .3s; } .hs-row { position: absolute; left: 0; right: 0; top: 0; height: 2.1rem; padding-bottom: .22rem; display: flex; align-items: center; gap: .4rem; transition: transform .5s var(--ease-out); will-change: transform; } .hs-row::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: .22rem; z-index: -1; border-radius: .55rem; background: linear-gradient(90deg, rgba(10, 14, 60, .78), rgba(10, 14, 60, .45)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .3s; } .hs-row { isolation: isolate; } .hs-pos { width: 1.6rem; text-align: center; font-weight: 900; font-size: .95rem; text-shadow: 0 1px 0 var(--ink); flex: none; } .hs-pic { width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); } .hs-name { flex: 1; min-width: 0; font-size: .8rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); } .hs-flag { display: none; width: 1.1rem; height: 1.1rem; margin-right: .3rem; color: #5fff7d; } .hs-flag .ico { width: 100%; height: 100%; } .hs-row.done .hs-flag { display: inline-flex; } .hs-row.lead .hs-pos { color: #ffd21f; } .hs-row.me::before { background: linear-gradient(90deg, #ffe14d, #ff9d1f); box-shadow: inset 0 0 0 2px #fff6b0, 0 0 .8rem rgba(255, 210, 31, .5); } .hs-row.me .hs-name, .hs-row.me .hs-pos { color: var(--ink); text-shadow: none; } .hs-row[style*="--team"]::after { content: ''; position: absolute; left: 0; top: .25rem; bottom: .47rem; width: .25rem; border-radius: 999px; background: var(--team); } .hs-row.moved-up::before { background: linear-gradient(90deg, rgba(61, 220, 90, .85), rgba(10, 14, 60, .45)); } .hs-row.moved-down::before { background: linear-gradient(90deg, rgba(255, 59, 79, .8), rgba(10, 14, 60, .45)); } .hs-row.me.moved-up::before, .hs-row.me.moved-down::before { background: linear-gradient(90deg, #ffe14d, #ff9d1f); } .hud-tc { position: absolute; left: 50%; top: var(--pad); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; } .h-items { display: flex; align-items: flex-start; gap: .55rem; } .h-islot { --s: 5.6rem; position: relative; width: var(--s); height: var(--s); border-radius: 1.15rem; background: radial-gradient(circle at 50% 30%, rgba(90, 130, 255, .55), rgba(16, 20, 74, .85) 70%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .4), inset 0 -.35rem 0 rgba(0, 0, 0, .25), 0 .3rem 0 rgba(0, 0, 0, .35), 0 .5rem 1rem rgba(0, 0, 0, .3); } .h-islot.second { --s: 3.9rem; margin-top: .35rem; border-radius: .9rem; opacity: .92; } .hi-ring { position: absolute; inset: -.25rem; border-radius: 1.35rem; pointer-events: none; opacity: 0; } .h-islot.second .hi-ring { border-radius: 1.1rem; } .h-islot.rolling .hi-ring, .h-islot.filled.first .hi-ring { opacity: 1; background: conic-gradient(from var(--ang, 0deg), #ffe14d, #ff4fa3, #19d3ff, #5fff7d, #ffe14d); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: .2rem; animation: ringSpin 1.2s linear infinite; } .h-islot.filled.first .hi-ring { animation-duration: 3s; opacity: .85; } @property --ang { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes ringSpin { to { --ang: 360deg; } } .hi-inner { position: absolute; inset: .5rem; display: grid; place-items: center; } .hi-pic { width: 100%; height: 100%; filter: drop-shadow(0 .2rem .2rem rgba(0, 0, 0, .35)); } .h-islot.pop .hi-pic { animation: itemPop .55s var(--ease-back); } .h-islot.shift .hi-pic { animation: itemShift .35s var(--ease-out); } @keyframes itemPop { 0% { transform: scale(.2) rotate(-25deg); } 60% { transform: scale(1.25) rotate(6deg); } } @keyframes itemShift { from { transform: translateX(80%) scale(.7); opacity: .4; } } .hi-name { position: absolute; left: 50%; top: calc(100% + .1rem); transform: translateX(-50%); white-space: nowrap; font-size: .8rem; font-weight: 900; padding: .1rem .55rem; border-radius: 999px; background: linear-gradient(#fff06b, #ffb21f); color: var(--ink); box-shadow: 0 .14rem 0 #b85f00; animation: nameTag 1.6s ease forwards; } @keyframes nameTag { 0% { opacity: 0; transform: translate(-50%, -.4rem) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, .2rem); } } .hi-reel { position: absolute; inset: .4rem; overflow: hidden; display: none; border-radius: .8rem; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); } .h-islot.rolling .hi-reel { display: block; } .hi-strip { display: flex; flex-direction: column; animation: reel .55s linear infinite; } .hi-reel-i { flex: none; height: calc(var(--s) - .8rem); padding: .3rem; display: grid; place-items: center; filter: blur(.6px); } .hi-reel-i svg { width: 100%; height: 100%; } @keyframes reel { to { transform: translateY(-50%); } } .h-islot.rolling { animation: slotShake .12s linear infinite; } @keyframes slotShake { 50% { transform: translateY(1px); } } .hi-key { position: absolute; right: -.35rem; bottom: -.35rem; font-size: .6rem; font-weight: 900; padding: .08rem .35rem; border-radius: .35rem; color: var(--ink); background: linear-gradient(#fff, #d9def0); box-shadow: 0 .12rem 0 #8a93b8; } /* 새 아이템 이름표가 뜨는 동안 키 표시는 잠깐 숨는다 (같은 자리에 겹친다) */ .h-islot.pop .hi-key { animation: keyHide 1.6s ease both; } @keyframes keyHide { 0%, 85% { opacity: 0; } 100% { opacity: 1; } } .h-islot:not(.filled):not(.rolling) .hi-inner::before { content: '?'; font-size: 2rem; font-weight: 900; color: rgba(255, 255, 255, .18); } .h-islot.second:not(.filled):not(.rolling) .hi-inner::before { font-size: 1.3rem; } .mode-speed .h-items, .mode-speed .hud-tc .h-items { display: none; } .mode-item .h-nitro { display: none; } .h-retire { display: none; align-items: baseline; gap: .35rem; padding: .3rem 1rem .35rem; border-radius: 999px; font-weight: 900; background: linear-gradient(rgba(255, 59, 79, .92), rgba(160, 15, 35, .92)); box-shadow: inset 0 0 0 2px #ffb3bd, 0 .3rem 1rem rgba(0, 0, 0, .35); } .h-retire.on { display: flex; animation: popIn .4s var(--ease-back); } .h-retire small { font-size: .8rem; } .hrt-n { font-size: 2rem; line-height: 1; min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums; } .hrt-n.tick { animation: bump .45s var(--ease-back); } .h-retire.urgent { animation: urgent .5s ease-in-out infinite alternate; } @keyframes urgent { to { transform: scale(1.08); box-shadow: inset 0 0 0 2px #fff, 0 0 1.6rem rgba(255, 59, 79, .85); } } .hud-tr { position: absolute; right: calc(var(--edge) + var(--sar)); top: var(--pad); display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; } .h-time { min-width: 11.5rem; padding: .45rem .8rem .5rem; border-radius: 1rem; background: linear-gradient(rgba(10, 14, 60, .72), rgba(10, 14, 60, .5)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); font-variant-numeric: tabular-nums; } .ht-row { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; } .ht-row small { font-size: .62rem; font-weight: 900; letter-spacing: .12em; opacity: .7; } .ht-time { font-size: 1.7rem; font-weight: 900; line-height: 1.1; } .ht-cur { font-size: 1rem; font-weight: 800; color: #bfe8ff; } .ht-laps { list-style: none; margin: .2rem 0 0; padding: .2rem 0 0; font-size: .74rem; font-weight: 800; border-top: 1px solid rgba(255, 255, 255, .14); } .ht-laps:empty { display: none; } .ht-laps li { display: flex; align-items: center; gap: .4rem; opacity: .8; } .ht-laps li small { width: 1.2rem; opacity: .7; } .ht-laps li span { margin-left: auto; } .ht-laps li .ico { width: .9rem; height: .9rem; color: #5fff7d; } .ht-laps li.best { color: #7dff95; opacity: 1; } .ht-laps li.last { opacity: 1; animation: lapIn .6s var(--ease-back); } @keyframes lapIn { from { transform: translateX(1rem); opacity: 0; } } .ht-best { display: flex; justify-content: space-between; align-items: baseline; font-size: .74rem; font-weight: 900; color: #ffe14d; margin-top: .15rem; } .ht-best small { font-size: .6rem; letter-spacing: .12em; opacity: .85; } .h-map { width: 11.5rem; height: 11.5rem; border-radius: 1.2rem; background: radial-gradient(circle, rgba(16, 22, 80, .55), rgba(10, 14, 60, .35)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 .3rem 1rem rgba(0, 0, 0, .25); } .h-map-c { width: 100%; height: 100%; display: block; } .hud-br { position: absolute; right: calc(var(--edge) + var(--sar)); bottom: calc(var(--edge) + var(--sab)); display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; } .h-speedo { position: relative; width: 12.5rem; height: 12.5rem; } .spd-svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; overflow: visible; } .spd-back { fill: rgba(10, 14, 60, .62); } .spd-lbl { font: 800 11px var(--font); fill: #fff; fill-opacity: .82; } .spd-needle { transform-origin: 100px 100px; transform: rotate(150deg); transition: transform .1s linear; } .spd-arc, .spd-arc-boost { transition: stroke-dasharray .1s linear; } .spd-arc-boost { opacity: 0; transition: opacity .25s, stroke-dasharray .1s linear; } .boosting .spd-arc-boost { opacity: 1; } .spd-num { position: absolute; z-index: 2; left: 0; right: 0; top: 57%; display: flex; flex-direction: column; align-items: center; line-height: .9; } .spd-n { font-size: 2.7rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.03em; transition: color .2s; } .spd-num small { font-size: .68rem; font-weight: 900; letter-spacing: .08em; opacity: .85; margin-top: .15rem; } .boosting .spd-n { color: #ffe14d; } .spd-flame { position: absolute; inset: -9%; z-index: 0; border-radius: 50%; opacity: 0; transition: opacity .2s; pointer-events: none; background: conic-gradient(from 210deg, transparent, rgba(255, 138, 31, .0) 10deg, rgba(255, 138, 31, .75) 60deg, rgba(255, 59, 47, .85) 150deg, rgba(255, 225, 77, .8) 240deg, rgba(255, 138, 31, 0) 290deg, transparent); -webkit-mask: radial-gradient(circle, transparent 54%, #000 58%, #000 66%, transparent 71%); mask: radial-gradient(circle, transparent 54%, #000 58%, #000 66%, transparent 71%); filter: blur(3px); } .boosting .spd-flame { opacity: 1; animation: flame .18s ease-in-out infinite alternate; } @keyframes flame { to { transform: scale(1.05) rotate(4deg); filter: blur(4px) brightness(1.3); } } .h-speedo.instant { animation: instantKick .5s var(--ease-back); } @keyframes instantKick { 30% { transform: scale(1.12); filter: drop-shadow(0 0 1rem #19d3ff); } } .drifting .spd-back { fill: rgba(80, 20, 90, .62); } .h-irdy { position: absolute; z-index: 3; left: -1.2rem; top: 18%; display: none; flex-direction: column; align-items: center; gap: .1rem; font-size: .7rem; font-weight: 900; color: #ffe14d; text-shadow: 0 1px 0 var(--ink); } .h-irdy .key { font-size: 1.2rem; animation: keyTap .3s ease-in-out infinite alternate; } @keyframes keyTap { to { transform: translateY(.2rem); box-shadow: 0 .04em 0 #8a93b8; } } .instant-ready .h-irdy { display: flex; } .h-shieldmark { position: absolute; z-index: 3; right: -.2rem; top: -.2rem; width: 2.4rem; height: 2.4rem; display: none; filter: drop-shadow(0 0 .5rem rgba(25, 211, 255, .9)); animation: floaty 1.4s ease-in-out infinite; } .h-shieldmark svg { width: 100%; height: 100%; } .shielded .h-shieldmark { display: block; } .h-tags { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; margin-right: 1rem; } .h-tag { font-size: 1.35rem; animation: tagIn 1.3s var(--ease-out) forwards; } .tag-instant .otext { --g2: #5ce1ff; } .tag-pad .otext { --g2: #7dff95; } .tag-shield .otext { --g2: #9fdcff; } @keyframes tagIn { 0% { opacity: 0; transform: translateX(2rem) scale(.8); } 15% { opacity: 1; transform: translateX(0) scale(1.08); } 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-.8rem); } } .hud-bc { position: absolute; left: 50%; bottom: calc(var(--edge) + var(--sab)); transform: translateX(-50%); } .h-nitro { display: flex; align-items: center; gap: .7rem; padding: .5rem .9rem .5rem .6rem; border-radius: 1.2rem; background: linear-gradient(rgba(10, 14, 60, .7), rgba(10, 14, 60, .45)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); } .hn-slots { display: flex; gap: .25rem; } .hn-slot { width: 1.9rem; height: 3rem; opacity: .28; filter: grayscale(1) brightness(.8); transition: opacity .25s, filter .25s; } .hn-slot svg { width: 100%; height: 100%; display: block; } .hn-slot.on { opacity: 1; filter: none; } .hn-slot.gain { animation: gain .6s var(--ease-back); } @keyframes gain { 0% { transform: scale(.3) translateY(1rem); } 60% { transform: scale(1.35) rotate(-8deg); filter: drop-shadow(0 0 .8rem #5ce1ff); } } .hn-gauge { --g: 0; position: relative; width: 19rem; height: 1.55rem; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .5); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 255, 255, .3); transform: skewX(-14deg); } .hn-fill { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--g) * 100%) 0 0); transition: clip-path .12s linear; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .2) 0 .45rem, transparent .45rem .9rem), linear-gradient(90deg, #1b4fd8, #2fb8ff 65%, #b8f4ff); background-size: 1.8rem 100%, 100% 100%; animation: barStripes .5s linear infinite; } .hn-shine { position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(rgba(255, 255, 255, .35), transparent); pointer-events: none; } .hn-ticks { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(25% - 1px), rgba(255, 255, 255, .35) 0 calc(25% + 1px), transparent 0 calc(50% - 1px), rgba(255, 255, 255, .35) 0 calc(50% + 1px), transparent 0 calc(75% - 1px), rgba(255, 255, 255, .35) 0 calc(75% + 1px), transparent 0); } .hn-pct { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%) skewX(14deg); font-size: .78rem; font-weight: 900; text-shadow: 0 1px 0 var(--ink), 0 0 .3rem var(--ink); font-variant-numeric: tabular-nums; } .hn-key { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 800; opacity: .85; white-space: nowrap; } .h-nitro.full .hn-gauge { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4), 0 0 0 2px #fff, 0 0 1.2rem #5ce1ff; animation: fullGlow .45s ease-in-out infinite alternate; } .h-nitro.full .hn-shine { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8) 45%, transparent 60%) 0 0 / 250% 100%; height: 100%; animation: sweep 1s linear infinite; } @keyframes fullGlow { to { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4), 0 0 0 2px #fff, 0 0 2rem #b8f4ff; } } @keyframes sweep { from { background-position: 150% 0; } to { background-position: -100% 0; } } .h-nitro.burst { animation: bump .5s var(--ease-back); } .h-nitro.maxed .hn-slots { filter: drop-shadow(0 0 .5rem rgba(92, 225, 255, .8)); } .boosting .h-nitro { box-shadow: inset 0 0 0 2px #ffe14d, 0 0 1rem rgba(255, 138, 31, .6); } .hud-bl { position: absolute; left: calc(var(--edge) + var(--sal)); bottom: calc(var(--edge) + var(--sab)); display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; width: min(24rem, 38vw); } .h-speak { display: flex; flex-direction: column; gap: .3rem; } .hsp { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .7rem .18rem .2rem; border-radius: 999px; font-size: .8rem; font-weight: 800; background: rgba(16, 140, 80, .82); box-shadow: inset 0 0 0 2px rgba(150, 255, 185, .6); animation: hspIn .3s var(--ease-back); } .hsp.me { background: rgba(255, 170, 31, .85); } .hsp-ico { width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .25); animation: micBeat .35s ease-in-out infinite alternate; } .hsp-ico .ico { width: .85rem; height: .85rem; } .hsp-pic { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255, 255, 255, .25); } @keyframes hspIn { from { opacity: 0; transform: translateX(-1rem); } } @keyframes micBeat { to { transform: scale(1.18); } } .h-chat { display: none; width: 100%; } .chat-on .h-chat { display: block; } .chat-hud .chat-log { max-height: 9.5rem; overflow: hidden; gap: .22rem; justify-content: flex-end; padding: 0; } .chat-hud .msg { align-self: flex-start; max-width: 100%; padding: .2rem .6rem; border-radius: .65rem; font-size: .84rem; background: rgba(10, 14, 60, .62); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); transition: opacity .8s ease; } .chat-hud .msg.me { background: rgba(120, 90, 10, .6); } .chat-hud .msg.old { opacity: 0; } .chat-typing .chat-hud .msg.old { opacity: .9; } .chat-hud .chat-form { display: none; margin-top: .35rem; pointer-events: auto; } .chat-hud.typing .chat-form { display: flex; animation: rise .25s var(--ease-out); } .chat-hud .chat-send { pointer-events: auto; } .h-chathint { display: inline-flex; align-items: center; gap: .25rem; margin-top: .3rem; font-size: .68rem; font-weight: 800; opacity: .65; text-shadow: 0 1px 0 var(--ink); } .chat-typing .h-chathint, .touch .h-chathint { display: none; } .h-chatbtn { display: none; } .touch.chat-on .h-chatbtn { display: grid; place-items: center; position: absolute; pointer-events: auto; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; color: #fff; cursor: pointer; left: calc(var(--edge) + var(--sal) + 14.5rem); top: var(--pad); background: rgba(20, 24, 48, .5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); } .h-chatbtn .ico { width: 1.4rem; height: 1.4rem; } /* 가운데 알림·카운트다운·역주행·결승 */ .hud-center { position: absolute; inset: 0; pointer-events: none; } .h-flashes { position: absolute; inset: 0; } /* 같은 층에 새 알림이 오면 앞 것은 0.4초 동안 사라지며 남는다 — flex 면 둘이 옆으로 나란히 밀려('순간 부스터 순간 부스터!') 가운데에서 벗어난다. 격자 한 칸에 겹쳐 쌓는다 */ .fl-layer { position: absolute; left: 0; right: 0; display: grid; justify-items: center; } .fl-layer > .fl { grid-area: 1 / 1; } .fl-layer-lap, .fl-layer-final { top: 21%; } .fl-layer-big { top: 33%; } .fl-layer-warn { top: 45%; } .fl-layer-info { top: 57%; } .fl-layer-item { top: 66%; } .fl { position: relative; display: flex; align-items: center; justify-content: center; gap: .6rem; white-space: nowrap; } .fl.out { animation: flOut .4s var(--ease-in) forwards !important; } @keyframes flOut { to { opacity: 0; transform: scale(1.15) translateY(-.6rem); } } .fl-lap, .fl-final { width: min(76vw, 58rem); padding: .5rem 0 .6rem; animation: bandIn .55s var(--ease-out) both; } .fl-band { position: absolute; inset: 0; z-index: -1; transform: skewX(-16deg); background: linear-gradient(90deg, transparent, rgba(24, 48, 180, .9) 14%, rgba(24, 48, 180, .9) 86%, transparent); } .fl-band::before, .fl-band::after { content: ''; position: absolute; left: 8%; right: 8%; height: .28rem; background: linear-gradient(90deg, transparent, #ffd21f 20%, #ffd21f 80%, transparent); } .fl-band::before { top: -.4rem; } .fl-band::after { bottom: -.4rem; } .fl-lap .otext { font-size: 3.2rem; --g2: #9fe2ff; } .fl-final .fl-band { background: linear-gradient(90deg, transparent, rgba(220, 20, 50, .92) 14%, rgba(220, 20, 50, .92) 86%, transparent); animation: finalFlash .35s ease-in-out 4 alternate; } .fl-final .otext { font-size: 3.8rem; --g2: #ffe14d; } @keyframes bandIn { from { opacity: 0; transform: translateX(-30%) skewX(-20deg); } 60% { transform: translateX(2%); } } @keyframes finalFlash { to { filter: brightness(1.35); } } .fl-big .otext { font-size: 4.2rem; --g2: #ffd21f; } .fl-big { animation: bigPop .55s var(--ease-back) both; } @keyframes bigPop { 0% { opacity: 0; transform: scale(2.2); filter: blur(6px); } 60% { opacity: 1; transform: scale(.94); filter: none; } } .fl-warn { padding: .4rem 1.3rem .45rem .7rem; border-radius: 999px; background: linear-gradient(rgba(255, 59, 79, .92), rgba(160, 15, 35, .92)); box-shadow: inset 0 0 0 2px #ffc2ca, 0 .4rem 1rem rgba(0, 0, 0, .35); animation: popIn .35s var(--ease-back) both, shake .45s .1s ease; } .fl-warn .otext { font-size: 1.7rem; --g2: #ffe0e4; } .fl-ico { width: 2rem; height: 2rem; } .fl-info { animation: infoRise .45s var(--ease-out) both; } .fl-info .otext { font-size: 2.2rem; --g2: #7fe8ff; } @keyframes infoRise { from { opacity: 0; transform: translateY(1.2rem) scale(.9); } } .fl-item { padding: .25rem 1rem .3rem; border-radius: 999px; background: rgba(10, 14, 60, .7); box-shadow: inset 0 0 0 2px rgba(255, 210, 31, .7); animation: popIn .3s var(--ease-back) both; } .fl-item .otext { font-size: 1.35rem; --g2: #ffe680; --sw: .18em; } /* 카운트다운 숫자·GO!(가운데 큰 글자)와 같은 순간에 뜬 알림은 그 아래(화면 70% 남짓)로 비킨다 — hud.flash 가 붙인다 */ .fl-layer-lap .fl.below-cd, .fl-layer-final .fl.below-cd { translate: 0 49vh; } .fl-layer-big .fl.below-cd { translate: 0 37vh; } .fl-layer-warn .fl.below-cd { translate: 0 25vh; } .fl-layer-info .fl.below-cd { translate: 0 13vh; } .fl-layer-item .fl.below-cd { translate: 0 6vh; } .h-wrong { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 1rem; padding: .7rem 1.6rem .75rem 1.1rem; border-radius: 1.3rem; background: repeating-linear-gradient(-45deg, #ff3b4f 0 1.1rem, #cc0f2a 1.1rem 2.2rem); box-shadow: 0 0 0 .3rem #fff, 0 0 0 .55rem var(--ink), 0 1rem 2rem rgba(0, 0, 0, .4); } .wrong .h-wrong { display: flex; animation: wrongIn .4s var(--ease-back), wrongBlink .8s .4s ease-in-out infinite; } @keyframes wrongIn { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } } @keyframes wrongBlink { 50% { filter: brightness(1.25); transform: translate(-50%, -50%) scale(1.04); } } .hw-ico { width: 3.2rem; height: 3.2rem; flex: none; animation: uturn 1.2s ease-in-out infinite; } .hw-ico svg { width: 100%; height: 100%; } @keyframes uturn { 50% { transform: scaleX(-1); } } .hw-txt { display: flex; flex-direction: column; } .hw-txt .otext { font-size: 2.7rem; --g2: #ffe14d; } .hw-txt small { font-size: .82rem; font-weight: 800; text-shadow: 0 1px 0 var(--ink); } .hud-root.wrong::before { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 6rem rgba(255, 30, 60, .55); animation: wrongEdge .8s ease-in-out infinite alternate; } @keyframes wrongEdge { to { box-shadow: inset 0 0 3rem rgba(255, 30, 60, .3); } } .h-count { position: absolute; inset: 0; display: grid; place-items: center; } .cd { position: absolute; display: grid; place-items: center; } .cd .otext { font-size: 12rem; line-height: 1; --sw: .16em; } .cd-n { animation: cdPop 1s var(--ease-out) forwards; } .cd-3 .otext { --g1: #fff; --g2: #ff5a6a; } .cd-2 .otext { --g1: #fff; --g2: #ffb21f; } .cd-1 .otext { --g1: #fff; --g2: #ffe14d; } @keyframes cdPop { 0% { opacity: 0; transform: scale(2.6); } 18% { opacity: 1; transform: scale(.9); } 30% { transform: scale(1.04); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.7); } } .cd-ring { position: absolute; width: 14rem; height: 14rem; border-radius: 50%; border: .5rem solid rgba(255, 255, 255, .85); animation: ringOut .8s var(--ease-out) forwards; } @keyframes ringOut { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } } .cd-go .otext { font-size: 13rem; --g1: #fff; --g2: #5fff7d; } .cd-go { animation: goPop 1.3s var(--ease-out) forwards; } @keyframes goPop { 0% { opacity: 0; transform: scale(.3) rotate(-10deg); } 20% { opacity: 1; transform: scale(1.15) rotate(3deg); } 35% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } } .cd-burst { position: absolute; width: 40rem; height: 40rem; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 230, 80, .55) 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%); mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%); animation: burst 1s var(--ease-out) forwards; } @keyframes burst { from { transform: scale(.3) rotate(0); opacity: 1; } to { transform: scale(1.5) rotate(25deg); opacity: 0; } } .h-goflash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(95, 255, 125, .2) 50%, transparent 75%); } .go-flash .h-goflash { animation: flashOut .5s ease-out; } /* 결승 묶음(띠·순위·기다림 알약)은 처음엔 화면 가운데, 2.5초 뒤(hud.js 가 .small) 작게 줄어 위 가장자리로 올라간다 — 가운데 하늘에 터지는 불꽃놀이·꽃가루를 가리지 않게. 위쪽 기준(transform-origin 50% 0)으로 줄여 높이를 몰라도 위에 붙는다. 띠가 skewY(-4deg) 라 오른쪽 끝이 폭의 약 3.5% 만큼 솟는다 — 그만큼(1.4vw) 내려 둔다 */ .h-finish { --fs: .32; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; transform-origin: 50% 0; display: none; flex-direction: column; align-items: center; gap: .6rem; transition: top .7s var(--ease-out), translate .7s var(--ease-out), scale .7s var(--ease-out); } .h-finish.on { display: flex; } .h-finish.small { top: calc(var(--pad) + 1.4vw); translate: 0 0; scale: var(--fs); } /* 알약은 함께 줄면 읽을 수 없다 — 위쪽 기준으로 되키워 순위 글자 아래에 둔다 */ .h-finish.small .fin-wait { scale: calc(.8 / var(--fs)); transform-origin: 50% 0; } .fin-band { position: relative; width: 120vw; display: flex; align-items: center; justify-content: center; gap: 2rem; padding: .6rem 0 .8rem; transform: skewY(-4deg); animation: finIn .7s var(--ease-back) both; background: linear-gradient(90deg, transparent, rgba(10, 14, 60, .88) 15%, rgba(10, 14, 60, .88) 85%, transparent); box-shadow: 0 -.3rem 0 #ffd21f, 0 .3rem 0 #ffd21f; } @keyframes finIn { from { opacity: 0; transform: skewY(-4deg) scaleX(.2); } } .fin-band .otext { font-size: 7rem; --g2: #ffd21f; transform: skewY(4deg); animation: finText 1.2s .3s ease-in-out infinite alternate; } @keyframes finText { to { filter: drop-shadow(0 0 1rem rgba(255, 210, 31, .7)); } } .fin-check { width: 9rem; height: 3.6rem; flex: none; border-radius: .3rem; box-shadow: 0 0 0 .2rem #fff; background: conic-gradient(#fff 25%, #1a1036 0 50%, #fff 0 75%, #1a1036 0) 0 0 / 1.2rem 1.2rem; animation: flagWave .6s ease-in-out infinite alternate; } .fin-check.r { animation-delay: .3s; } @keyframes flagWave { to { transform: skewY(6deg) translateY(-.2rem); } } .fin-rank { display: flex; align-items: baseline; gap: .2rem; animation: popIn .5s .5s var(--ease-back) both; } .fin-rank .otext { font-size: 3.6rem; --g2: #ffe14d; } .fin-rank small { font-size: 1.4rem; font-weight: 900; text-shadow: 0 2px 0 var(--ink); } .fin-rank.win .otext { --g1: #fff7b0; --g2: #ffb21f; font-size: 4.4rem; } /* 결승 배너가 떠 있는 동안 가운데 큰 알림(우승!·N위로 결승!·바퀴)은 감춘다 — 같은 말이 배너와 겹쳐 보이지 않게 */ .hud-root.finished .fl-layer-big, .hud-root.finished .fl-layer-lap, .hud-root.finished .fl-layer-final { visibility: hidden; } /* 결승 뒤에는 아이템 칸이 쓸모없고, 위로 줄어든 결승 띠와 같은 자리다 */ .hud-root.finished .h-items { opacity: 0; transition: opacity .4s; } .fin-wait { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 800; background: rgba(10, 14, 60, .72); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); animation: rise .5s 1.2s var(--ease-out) both; transition: scale .7s var(--ease-out); } /* 관전 중 표시 (위 가운데, 아이템 칸 위) */ .h-spec { display: none; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem 1rem .35rem; border-radius: 1rem; text-align: center; background: rgba(10, 14, 60, .78); box-shadow: inset 0 0 0 2px rgba(255, 138, 154, .55), 0 .3rem 1rem rgba(0, 0, 0, .3); } .spectating .h-spec { display: flex; animation: popIn .35s var(--ease-back) both; } .hsc-main { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 800; white-space: nowrap; } .hsc-main b { color: #ff8a9a; font-weight: 900; letter-spacing: .04em; } .hsc-main .key { font-size: .72rem; } .hsc-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #ff3b4f; animation: blink 1.2s ease-in-out infinite; } .h-spec small { font-size: .68rem; font-weight: 700; opacity: .75; } .hsc-tap, .touch .hsc-keys { display: none; } .touch .hsc-tap { display: inline; } .hsc-keys { display: inline-flex; align-items: center; gap: .15rem; } /* 보고 있는 카트가 결승하면 결승 띠가 줄어 위 가운데로 올라온다 — 같은 자리라 관전 표시는 감춘다 */ .hud-root.spectating.finished .h-spec { display: none; } .fin-wait .ico { animation: spin 2s linear infinite; } /* 부스터 효과 (화면 가장자리 속도선) */ .h-boostfx { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none; } .boosting .h-boostfx { opacity: 1; } .bf-lines { position: absolute; left: 50%; top: 52%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255, 255, 255, .5) 0 .6deg, transparent .6deg 7deg); -webkit-mask: radial-gradient(circle, transparent 24%, rgba(0, 0, 0, .7) 34%, #000 50%); mask: radial-gradient(circle, transparent 24%, rgba(0, 0, 0, .7) 34%, #000 50%); animation: speedSpin .25s steps(3) infinite; opacity: .55; } @keyframes speedSpin { to { transform: translate(-50%, -50%) rotate(7deg); } } .bf-edge { position: absolute; inset: 0; box-shadow: inset 0 0 5rem rgba(255, 138, 31, .45), inset 0 0 1.5rem rgba(255, 225, 77, .35); animation: edgePulse .3s ease-in-out infinite alternate; } @keyframes edgePulse { to { box-shadow: inset 0 0 6.5rem rgba(255, 90, 31, .5), inset 0 0 2rem rgba(255, 225, 77, .45); } } .h-ink { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; pointer-events: none; } .h-ink.on { opacity: 1; } /* ── 출발 전 플라이스루: 계기판을 화면 밖으로 치웠다가 신호등이 켜지면 차례로 튀어나온다 ── transform 은 터치 배치(.touch .hud-br 의 translateX(-50%))가 이미 쓰고 있어 따로 노는 translate·scale 로 움직인다 */ .hud-tl, .hud-tc, .hud-tr, .hud-br, .hud-bc { transition: translate .62s var(--ease-back), scale .62s var(--ease-back), opacity .3s ease; } /* 소개 띠가 빠져나가는 동안(.4초) 계기판이 같은 자리로 튀어나와 글자가 겹치지 않게 조금 늦게 출발한다 */ .hud-tl { transition-delay: .3s; } .hud-tr { transition-delay: .37s; } .hud-tc { transition-delay: .44s; } .hud-br { transition-delay: .5s; } .hud-bc { transition-delay: .56s; } .hud-root:is(.intro, .intro-wait) :is(.hud-tl, .hud-tc, .hud-tr, .hud-br, .hud-bc) { opacity: 0; transition-duration: .3s; transition-delay: 0s; transition-timing-function: var(--ease-in); } .hud-root:is(.intro, .intro-wait) .hud-tl { translate: -115% 0; } .hud-root:is(.intro, .intro-wait) .hud-tr { translate: 115% 0; } .hud-root:is(.intro, .intro-wait) .hud-tc { translate: 0 -140%; } .hud-root:is(.intro, .intro-wait) .hud-br { translate: 20% 60%; scale: .45; } .hud-root:is(.intro, .intro-wait) .hud-bc { translate: 0 160%; } .hud-root:is(.intro, .intro-wait) .h-chatbtn { opacity: 0; } /* 트랙 소개 (아래 왼쪽 띠) */ .h-intro { position: absolute; left: calc(var(--edge) + var(--sal)); bottom: calc(2.6rem + var(--sab)); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .9rem 3.4rem 1rem 1.4rem; max-width: min(46rem, 92vw); visibility: hidden; pointer-events: none; } .hin-band { position: absolute; inset: 0 0 0 -3rem; z-index: -1; transform: skewX(-14deg); transform-origin: left bottom; border-radius: 0 .9rem .9rem 0; background: linear-gradient(90deg, rgba(10, 14, 60, .92) 60%, rgba(10, 14, 60, .55) 88%, transparent); box-shadow: inset 0 .28rem 0 #ffd21f, 0 .8rem 2rem rgba(0, 0, 0, .35); } /* 코스 윤곽: 띠 오른쪽 끝, 선이 그려지듯 나타난다 */ .h-intro:has(.hin-map svg) { padding-right: 10.4rem; } .hin-map { position: absolute; right: 1.6rem; top: 50%; width: 7.6rem; height: 7.6rem; translate: 0 -50%; } .hin-map svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .25rem .4rem rgba(0, 0, 0, .45)); } .hm-under { fill: none; stroke: rgba(8, 10, 30, .7); stroke-width: 9; stroke-linejoin: round; } .hm-line { fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .h-intro.on .hm-line { animation: drawCourse 1.6s .25s var(--ease-out) forwards; } @keyframes drawCourse { to { stroke-dashoffset: 0; } } .hm-start { fill: #ffd21f; stroke: var(--ink); stroke-width: 2; } .h-intro.on .hm-start { animation: popIn .4s .2s var(--ease-back) both; transform-box: fill-box; transform-origin: center; } .hin-meta { display: flex; align-items: center; gap: .7rem; font-size: .88rem; font-weight: 800; opacity: .92; text-shadow: 0 1px 0 var(--ink); } .hin-diff { display: inline-flex; align-items: center; gap: .3rem; } .hin-diff .stars { font-size: .82rem; } .hin-name { line-height: 1.05; } .hin-name .otext { font-size: 3.3rem; --g2: #ffe14d; --sw: .2em; white-space: nowrap; } .hin-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; } .hin-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 900; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); } .hin-chip .ico { width: 1rem; height: 1rem; } .hin-chip.c-item { background: linear-gradient(#ff7cc0, #e5338b); } .hin-chip.c-speed { background: linear-gradient(#5aa2ff, #2244d8); } .hin-chip.c-team { background: linear-gradient(90deg, #ff4f63 50%, #2f6bff 50%); } .hin-rand { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .7rem; border-radius: .4rem; font-size: .82rem; font-weight: 900; color: var(--ink); background: linear-gradient(#fff36b, #ffb21f); transform: skewX(-10deg); } .hin-rand .ico { width: 1rem; height: 1rem; } .h-intro.random .hin-name .otext { --g2: #9fe2ff; } /* 무작위: 이름이 멈추기 전에는 테마·난이도·코스 윤곽을 감춘다 (미리 들키지 않게) */ .h-intro.random:not(.landed) :is(.hin-meta, .hin-map) { visibility: hidden; } .h-intro.random.landed :is(.hin-meta, .hin-map) { animation: introIn .45s var(--ease-out) both; } .h-intro.random.landed .hm-line { animation: drawCourse2 1.3s var(--ease-out) forwards; } @keyframes drawCourse2 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .h-intro.random.landed .hin-name { animation: landPop .5s var(--ease-back); } .h-intro.random.landed .hin-name .otext { --g2: #ffe14d; } @keyframes landPop { 0% { transform: scale(1.35); filter: drop-shadow(0 0 1.2rem #ffe14d); } } .hin-wait { display: none; align-items: center; gap: .45rem; margin-top: .25rem; font-size: .82rem; font-weight: 800; opacity: .9; } .h-intro.waiting .hin-wait { display: inline-flex; animation: rise .4s var(--ease-out) both; } .hin-spin { width: .9rem; height: .9rem; border-radius: 50%; border: .18rem solid rgba(255, 255, 255, .3); border-top-color: #ffe14d; animation: spin .8s linear infinite; } .h-intro.on { visibility: visible; } .h-intro.on .hin-band { animation: introBand .6s var(--ease-out) both; } .h-intro.on > :not(.hin-band) { animation: introIn .55s var(--ease-out) both; } .h-intro.on > :nth-child(3) { animation-delay: .08s; } .h-intro.on > :nth-child(4) { animation-delay: .16s; } .h-intro.on > :nth-child(5) { animation-delay: .24s; } @keyframes introBand { from { transform: skewX(-14deg) scaleX(0); } } @keyframes introIn { from { opacity: 0; transform: translateX(-2.5rem); } } /* 신호등이 켜지면 왼쪽으로 빠져나간다 (visibility 는 끝난 뒤 꺼진다) */ .h-intro:not(.on) { transition: visibility 0s .45s; } .h-intro:not(.on) > * { animation: introOut .4s var(--ease-in) both; } @keyframes introOut { to { opacity: 0; transform: translateX(-3rem); } } /* 결승한 뒤: 속도계·니트로는 물러난다 (결승 띠·순위 글자와 겹치지 않게) */ .hud-root.finished .hud-br, .hud-root.finished .hud-bc { opacity: 0; translate: 0 30%; transition-delay: .4s; } /* 결승 때 함께 뜨는 '새 기록!' 같은 알림은 결승 순위 글자 아래로 */ .hud-root.finished .fl-layer-info, .hud-root.finished .fl-layer-item { top: 74%; } /* ── 더빙 자막 (body 에 붙는다: 메뉴 화면 위에서도 보인다) ── */ /* 메뉴 화면: 발(아래 줄)의 가운데 — 왼쪽 조작 안내와 오른쪽 버튼 사이 빈칸. 타이틀·메뉴는 카피라이트 바로 위 */ .subs { position: fixed; left: 50%; bottom: calc(.9rem + var(--sab)); z-index: 40; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: max-content; max-width: min(34rem, calc(100vw - 2rem)); font-family: var(--font); color: #fff; } /* 타이틀: 카피라이트 줄 위에 잠깐 덮는다. 메뉴: 아래가 칸으로 차 있어 위 가운데(로고와 인사말 사이 빈칸)로 */ body[data-ui-screen="title"] .subs.in-ui { bottom: calc(.25rem + var(--sab)); } body[data-ui-screen="menu"] .subs.in-ui { top: calc(1.2rem + var(--sat)); bottom: auto; max-width: min(30rem, calc(100vw - 32rem)); } /* 불러오기: 아래는 트랙 이름·팁·진행 막대 자리라 위 가운데(트랙 그림 위)로 */ body[data-ui-screen="loading"] .subs.in-ui { top: calc(1.2rem + var(--sat)); bottom: auto; max-width: min(34rem, calc(100vw - 24rem)); } /* 결과: 시상대·버튼을 가리지 않게 오른쪽 표 아래(버튼 줄 위)에 오른쪽 맞춤 — 아나운서 '결과 발표' 대사가 여기 뜬다 */ body[data-ui-screen="results"] .subs.in-ui { left: auto; right: calc(1.6rem + var(--sar)); bottom: calc(4.8rem + var(--sab)); transform: none; align-items: flex-end; max-width: min(34rem, 52vw); } .subs:empty { display: none; } .subs.in-race { bottom: calc(2.2rem + var(--sab)); max-width: min(40rem, calc(100vw - 30rem)); } .subs.in-race.speed { bottom: calc(6.6rem + var(--sab)); } .subs.in-race.intro { bottom: auto; top: calc(var(--pad) + .6rem); } .sub { --c1: #ffd21f; --c2: #ff8a1f; display: flex; align-items: center; gap: .65rem; max-width: 100%; padding: .32rem 1.1rem .32rem .32rem; border-radius: 999px; background: linear-gradient(90deg, rgba(10, 14, 60, .9), rgba(10, 14, 60, .78)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), inset .3rem 0 0 var(--c1), 0 .4rem 1.1rem rgba(0, 0, 0, .35); animation: subIn .35s var(--ease-back) both; } .sub.out { animation: subOut .3s var(--ease-in) forwards; } @keyframes subIn { from { opacity: 0; transform: translateY(.8rem) scale(.92); } } @keyframes subOut { to { opacity: 0; transform: translateY(-.5rem); } } .sub-pic, .sub-mic { flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; overflow: hidden; } .sub-pic { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c1) 55%, white), var(--c1) 60%, var(--c2)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); } .sub-pic .pic-img { object-position: 50% 10%; } .sub-mic { display: grid; place-items: center; color: var(--ink); background: linear-gradient(#fff36b, #ffb21f); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 0 0 2px rgba(255, 255, 255, .6); } .sub-mic .ico { width: 1.45rem; height: 1.45rem; animation: micBeat .4s ease-in-out 4 alternate; } .sub-ann { --c1: #ffd21f; } .sub-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .sub-who { font-size: .72rem; font-weight: 900; letter-spacing: .02em; color: color-mix(in srgb, var(--c1) 70%, white); } .sub-txt { font-size: 1.12rem; font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); overflow-wrap: anywhere; } /* 터치 버튼이 있을 때: 버튼 자리를 피한다. 자리는 input.js 가 내주는 변수로 잰다 — --tc-top(위 작은 단추 줄 아랫변) · --tc-top-w(그 줄 너비) · --tc-bl-h/--tc-br-h(아래 왼쪽·오른쪽 묶음 윗변, 아래에서) · --tc-bl-w/--tc-br-w(묶음 너비) */ .touch .hud-br { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(.4rem + var(--sab)); } .touch .h-speedo { width: 8.6rem; height: 8.6rem; } .touch .spd-n { font-size: 2rem; } .touch .h-tags { position: absolute; bottom: 100%; right: -4rem; margin: 0; } .touch .hud-bc { bottom: calc(9.2rem + var(--sab)); } .touch .hn-gauge { width: 12rem; height: 1.3rem; } .touch .hn-key { display: none; } .touch .hud-bl { bottom: calc(var(--tc-bl-h, 126px) + .6rem); width: min(18rem, 34vw); } .touch .chat-hud .chat-log { max-height: 6rem; } .touch .hud-tr { top: var(--pad); } .touch .ht-laps { display: none; } .touch .h-map { width: 9.5rem; height: 9.5rem; } .touch .hi-key { display: none; } /* 터치: 아래는 단추 자리라 트랙 소개는 왼쪽 위로, 자막은 아이템 칸 아래로 */ .touch .h-intro { bottom: auto; top: calc(var(--pad) + .2rem); } .subs.in-race.touch { bottom: auto; top: calc(var(--sat) + 7.8rem); max-width: min(34rem, calc(100vw - 2rem)); } .subs.in-race.touch.intro { top: calc(var(--sat) + 13rem); max-width: min(28rem, 50vw); } /* 관전 중: 아래 가운데는 관전 막대(online.js) 자리 — 자막은 그 위로 (--spec-bar = 막대 윗변, hud.js 가 잰다) */ .hud-root.spectating ~ .subs.in-race:not(.touch) { bottom: calc(var(--spec-bar, 4.6rem) + .5rem); } /* 결승 뒤: 줄어든 결승 띠(위 가운데)와 기다림 알약이 자막 자리에 온다 — 자막은 그 아래로 (자막 상자는 #hud 다음 형제) */ .hud-root.finished ~ .subs.in-race.touch { top: calc(var(--sat) + 9.8rem); } /* 터치(태블릿): 자막이 위 가운데(아이템 칸 아래)에 오므로 같은 순간에 뜨는 '두 번째 바퀴!' 띠(원래 21%)는 그 아래로, 큰 알림은 띠와 카운트다운 숫자 사이로. 휴대폰 가로·세로는 아래 반응형 절에서 다시 정한다 */ .touch .fl-layer-lap, .touch .fl-layer-final { top: 31%; } .touch .fl-layer-big { top: 42%; } /* 터치(태블릿·터치 노트북): input.js 의 위 작은 단추 줄(마이크·복귀·멈춤)은 오른쪽 위 86px 에 px 로 고정인데 시간판은 rem 따라 커져 1024×768 에서 8px, 1280×800 에서 27px 그 줄을 덮는다 — 시간판·미니맵을 그 줄(--tc-top) 아래로 내린다 */ @media (min-width: 641px) and (min-height: 561px) { .touch .hud-tr { top: calc(var(--tc-top, 132px) + .6rem); } .touch .h-map { margin-top: 0; } /* 단추가 화면을 덮고 있어 13rem 짜리 GO! 는 너무 크다(아래 외곽선이 함께 뜬 알림을 덮는다) — 줄이고, GO 와 함께 뜬 '출발 부스터!'·'엔진 과열!'(둘은 함께 뜨지 않는다)은 GO 외곽선 바로 아래(화면 가운데 + 7.2rem) */ .touch .cd .otext { font-size: 9.5rem; } .touch .cd-go .otext { font-size: 10rem; } .touch .fl-layer-big .fl.below-cd { translate: 0 calc(8vh + 7.2rem); } .touch .fl-layer-warn .fl.below-cd { translate: 0 calc(5vh + 7.2rem); } } /* ═════════ 7. 반응형 ═════════ */ /* 터치 기기: 누르는 곳은 모두 44px 이상 (마우스용 40px 부품을 손가락 크기로 키운다) */ @media (pointer: coarse) { .btn { min-width: 44px; } .seg-opt, .seg-sm .seg-opt { min-height: 44px; } .step-btn { width: 44px; height: 44px; } .palette { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); } .swatch { min-width: 44px; max-width: 3.2rem; } .chat-quick .chip { min-height: 44px; min-width: 44px; justify-content: center; padding-inline: .8rem; } .touch.chat-on .h-chatbtn { width: 46px; height: 46px; } /* 슬라이더: 입력 상자 자체를 44px 로 키우고(누르는 곳) 막대 그림은 가운데 얇은 길로 옮긴다 */ .sld-rail { height: 44px; } .sld-input { height: 44px; background: transparent; box-shadow: none; } .sld-input::-webkit-slider-runnable-track { height: .72rem; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), #5aa2ff 50%, var(--yellow)) 0 0 / var(--p, 50%) 100% no-repeat, rgba(5, 8, 35, .55); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .18); } .sld-input::-webkit-slider-thumb { width: 1.9rem; height: 1.9rem; margin-top: calc((.72rem - 1.9rem) / 2); } .sld-input::-moz-range-track { height: .72rem; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), #5aa2ff 50%, var(--yellow)) 0 0 / var(--p, 50%) 100% no-repeat, rgba(5, 8, 35, .55); } } /* 키보드가 없는 기기는 키 안내를 숨긴다 */ @media (hover: none) and (pointer: coarse) { .scr-foot .hints, .h-chathint, .hn-key, .pz-card .hints { display: none; } .scr-foot { justify-content: flex-end; } } /* 낮은 가로 화면 (휴대폰 가로·작은 노트북 창): 화면을 꽉 채우는 배치 대신 몸통을 스크롤한다 */ @media (max-height: 560px) and (min-width: 641px) { .pf-layout, .sg-layout, .on-layout, .lb-layout, .res-layout { height: auto; min-height: 100%; align-items: start; } .lb-slots { flex: none; grid-template-rows: none; grid-auto-rows: 8.4rem; } .char-grid, .track-grid { flex: none; grid-auto-rows: 7.4rem; } .room-list { flex: none; min-height: 12rem; } .lb-right .chat-panel { min-height: 13rem; } /* 차고: 몸통 전체를 굴리면 색을 고르러 내려간 사이 칠해지는 카트가 위로 사라진다 — 왼쪽 미리보기는 그대로 두고 오른쪽(카트·색)만 굴린다. 왼쪽은 낮은 화면에 맞게 줄인다 */ .gr-layout { height: 100%; } .gr-stage { flex: 1 1 auto; min-height: 5.5rem; } .gr-info { padding: .4rem .8rem .5rem; gap: .25rem; } .gr-title h2 { font-size: 1.35rem; } .gr-title .chip { font-size: .66rem; padding-block: .1rem; } .gr-desc { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gr-info .stats { gap: .2rem; } .gr-info .stat { font-size: .72rem; } .gr-info .stat-bar { height: .6rem; } .gr-cmp { font-size: .64rem; } .sg-art { flex: none; height: 7.5rem; } .pv-stage { min-height: 8rem; } .menu-body { overflow: auto; } .tile-big { min-height: 8.5rem; } .tile-big .tile-label { font-size: 1.8rem; } .tile-big .tile-ico { display: none; } .my-card { overflow: visible; } .mc-portrait { width: 5.2rem; flex: none; } .mc-sub span { display: none; } .mc-name { font-size: 1.25rem; } .scr-menu .scr-foot { display: none; } .scr-menu .scr-body { padding-bottom: 2.4rem; } .title-center { gap: .3rem; padding-bottom: calc(2.6rem + var(--sab)); } /* 낮은 화면의 메뉴는 아래 줄까지 칸이 차 있다 — 자막은 카피라이트 줄 위에 잠깐 덮는다(버튼을 가리지 않게) */ body[data-ui-screen="title"] .subs.in-ui { bottom: calc(.25rem + var(--sab)); } /* 결과: 낮은 화면에선 오른쪽 표가 버튼 줄까지 내려와 자막이 표 아래 줄을 덮는다 — 발 왼쪽(버튼 옆 빈칸)으로 */ body[data-ui-screen="results"] .subs.in-ui { right: auto; left: calc(.8rem + var(--sal)); bottom: calc(.55rem + var(--sab)); align-items: flex-start; max-width: calc(100vw - 34rem); } .sub { padding-block: .2rem; } .sub-pic, .sub-mic { width: 2.2rem; height: 2.2rem; } .sub-txt { font-size: 1rem; } .title-start { margin-top: 0; padding-block: .3rem; } .ts-label { font-size: 2.1rem; } .title-badges { display: none; } .ld-main { bottom: calc(6.2rem + var(--sab)); } .ld-name { font-size: 2.4rem; } .ld-tip { min-height: 6.4rem; } .ld-players { display: none; } .podium { padding-top: .4rem; } .pod-pic { width: 4rem; height: 4rem; } .pod-1 .pod-pic { width: 5rem; height: 5rem; } /* 동 받침: 숫자(1.8rem)+'+n점' 이 아래 그림자 띠 위에 들어가는 높이 3.5rem — 3.2rem 이면 점수 글자 아래가 잘렸다 */ .pod-block.gold { height: 5rem; } .pod-block.silver { height: 3.8rem; } .pod-block.bronze { height: 3.5rem; } .pod-num { font-size: 1.8rem; } /* 결과 표: 휴대폰 가로(844×390)에서 37px 줄 8개가 몸통보다 길어 7·8위가 발 밑으로 숨었다. 이 높이에선 루트 글자가 늘 13px 이라, 머리·발·여백(약 10.3rem)을 뺀 화면 높이를 8줄로 나눠 줄 높이를 정한다 */ .res-table { --rh: clamp(1.55rem, calc((100vh - var(--sat) - var(--sab) - 10.3rem) / 8 - .18rem), 2.85rem); padding: .3rem .4rem; } @supports (height: 100dvh) { .res-table { --rh: clamp(1.55rem, calc((100dvh - var(--sat) - var(--sab) - 10.3rem) / 8 - .18rem), 2.85rem); } } /* 667px 폭에선 고정 칸(19rem)이 표 폭을 다 먹어 이름 칸이 0 이 됐다 — 표 쪽을 넓히고 고정 칸을 좁힌다 */ .res-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: .9rem; } .res-row { height: var(--rh); padding: 0 .5rem; margin-bottom: .18rem; grid-template-columns: 2.4rem minmax(0, 1fr) 5.4rem 5.4rem 2.4rem; gap: .45rem; } .res-head { height: auto; padding-block: .15rem; top: -.3rem; } .res-pic { width: calc(var(--rh) - .3rem); height: calc(var(--rh) - .3rem); } .res-rank { width: min(2.3rem, calc(var(--rh) - .3rem)); height: min(2.3rem, calc(var(--rh) - .3rem)); font-size: .95rem; } .res-who b { font-size: .9rem; } .res-time, .res-best { font-size: .84rem; } .res-pts { font-size: .98rem; } /* 왼쪽: 팀 점수·새 기록 띠가 함께 뜨면 시상대가 발 밑으로 밀린다 — 띠를 얇게, 그럴 때만 시상대를 한 단계 더 줄인다 (동·은 받침은 '+n점' 까지 들어가는 3.5rem 아래로 내리지 않는다 — 시상대 높이는 금 기둥이 정한다) */ .res-left { gap: .4rem; } /* 667px 폭에선 한 줄 제목이 두 줄로 꺾여 왼쪽이 몸통보다 길어진다 — 폭을 따라 줄인다 */ .res-headline { font-size: clamp(1.5rem, 3.2vw, 2.1rem); } .res-record { padding-block: .15rem; } .res-record .ico { width: 1.4rem; height: 1.4rem; padding: .2rem; } .ts { padding: .12rem 1rem .2rem; } .ts b { font-size: 1.5rem; } .res-left:has(.team-score, .res-record) .pod-pic { width: 3.4rem; height: 3.4rem; } .res-left:has(.team-score, .res-record) .pod-1 .pod-pic { width: 4.2rem; height: 4.2rem; } .res-left:has(.team-score, .res-record) .pod-block.gold { height: 4.2rem; } .res-left:has(.team-score, .res-record) .pod-block.silver { height: 3.9rem; } .res-left:has(.team-score, .res-record) .pod-block.bronze { height: 3.5rem; } .res-left:has(.team-score):has(.res-record) .res-headline { font-size: 1.6rem; } .res-left:has(.team-score):has(.res-record) .podium { padding-top: .15rem; } /* 터치 HUD: 순위표 대신 큰 순위 숫자만, 미니맵은 시간판 왼쪽으로 (오른쪽 아래·위 터치 버튼을 피해) */ .touch .h-stand { display: none; } .touch .hud-tr { flex-direction: row-reverse; align-items: flex-start; } /* 미니맵 아래쪽이 위 작은 단추 줄(마이크·복귀·멈춤) 높이까지 내려온다 — 그 줄 왼쪽 끝(--tc-top-w)보다 왼쪽에 둔다. 시간판(최소 11.5rem)과 사이 틈(.55rem)을 뺀 나머지만큼 오른쪽을 비운다 */ .touch .h-map { margin-top: 0; margin-right: max(.5rem, calc(var(--tc-side-r, 16px) + var(--tc-top-w, 158px) + 6px - var(--edge) - var(--sar) - 11.5rem - .55rem)); width: 6.6rem; height: 6.6rem; } .touch .hud-bl { bottom: calc(var(--tc-bl-h, 106px) + .6rem); } .touch .chat-hud .chat-log { max-height: 4.4rem; } .touch .h-speak .hsp:nth-child(n+3) { display: none; } .scr-head { padding: .45rem 1rem .3rem; min-height: 0; } .title-banner { font-size: 1.5rem; } .scr-sub { display: none; } .scr-body { padding: .3rem 1rem .4rem; } .scr-foot { padding: .35rem 1rem .5rem; } /* 터치 + 낮은 화면: 가운데 아래는 속도계와 가운데 알림('순간 부스터!' 등) 자리라 니트로 막대가 그 밑에 깔린다 — 스피드전은 아이템 칸이 없어 비어 있는 위 가운데로 올린다(리타이어 표시는 그 아래로) */ .touch .hud-bc { top: var(--pad); bottom: auto; } .hud-root.touch:is(.intro, .intro-wait) .hud-bc { translate: 0 -160%; } .touch.mode-speed:not(.spectating) .hud-tc { top: calc(var(--pad) + 4.4rem); } /* 터치 + 낮은 가로 화면의 가운데 알림: 위 HUD(~95px)와 아래 가운데 속도계(~280px) 사이 띠뿐이다. 자막(위 가운데, 두 줄까지)과 '두 번째 바퀴!' 띠가 같은 순간에 뜨므로 띠는 자막 아래로, GO! 와 함께 뜬 '출발 부스터!' · '엔진 과열!' 은 속도계 위로 (원래 자리 70% 는 속도계 위에 겹친다) */ .touch .fl-layer-lap, .touch .fl-layer-final { top: 52%; } /* 띠가 화면 폭 76% 면 오른쪽 드리프트 단추 밑으로 들어간다 */ .touch .fl-lap, .touch .fl-final { width: min(56vw, 40rem); } .touch .fl-lap .otext { font-size: 2.6rem; } .touch .fl-final .otext { font-size: 3rem; } .touch .fl-big .otext { font-size: 3rem; } .touch .fl-layer-big { top: 33%; } .touch .fl-layer-warn { top: 40%; } .touch .fl-layer-info { top: 50%; } .touch .fl-layer-item { top: 61%; } /* GO! 아래 외곽선(~255px)과 겹치지 않게 — 속도계 윗부분에 잠깐 걸치는 편이 GO 에 가려지는 것보다 낫다 */ .touch .fl-layer-big .fl.below-cd { translate: 0 32vh; } .touch .fl-layer-warn .fl.below-cd { translate: 0 25vh; } .touch .fl-layer-info .fl.below-cd { translate: 0 12vh; } .touch .fl-layer-item .fl.below-cd { translate: none; } .hs-row { height: 1.65rem; } .h-stand { height: calc(var(--n, 0) * 1.65rem); } .hs-pic { width: 1.25rem; height: 1.25rem; } .hs-name { font-size: .72rem; } .hr-num { font-size: 3.6rem; } .h-map { width: 8rem; height: 8rem; } .h-speedo { width: 9.5rem; height: 9.5rem; } .cd .otext { font-size: 8rem; } /* 줄어든 결승 띠(폭 120vw × 배율)가 왼쪽 순위 상자와 오른쪽 시간판·미니맵 사이에 들어가게 조금 더 작게 */ .h-finish { --fs: .3; } } /* 관전 중(터치 기기): 터치 단추가 없으니 아래 묶음은 키보드 배치처럼 — 속도계는 오른쪽 아래, 니트로는 아래 가운데. 관전 막대(online.js)는 니트로 막대 위에 붙는데, 니트로가 위쪽(낮은 가로 화면)이나 속도계 위(태블릿)에 있으면 막대가 화면 꼭대기·가운데로 올라가 순위·시간판·길을 덮는다. 세로 휴대폰은 아래 반응형 절에서 따로 */ @media (min-width: 641px) { .hud-root.touch.spectating .hud-br { left: auto; right: calc(var(--edge) + var(--sar)); transform: none; bottom: calc(var(--edge) + var(--sab)); } .hud-root.touch.spectating .hud-bc { top: auto; bottom: calc(var(--edge) + var(--sab)); } } /* 태블릿 세로·좁은 노트북 창 */ @media (max-width: 1100px) and (min-width: 641px) { .menu-body { grid-template-columns: minmax(0, 1fr) 15.5rem; } .tile-big .tile-label { font-size: 1.9rem; } .lb-layout { grid-template-columns: minmax(0, 1fr) 18rem; } .on-layout { grid-template-columns: minmax(0, 1fr) 15rem; } .room-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 2fr) 4rem 5rem; gap: .5rem; padding: .45rem .6rem; } .rc-thumb { display: none; } .pane-items { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tech-card { grid-template-columns: 8rem minmax(0, 1fr); } } @media (max-aspect-ratio: 4/3) and (min-width: 641px) { .lb-slots { grid-template-rows: repeat(2, minmax(10rem, 1fr)); } .pane-online { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 휴대폰 세로 */ @media (max-width: 640px) { html { font-size: 14.5px; } .scr-head { grid-template-columns: auto minmax(0, 1fr); padding: .6rem .8rem .35rem; gap: .5rem .7rem; min-height: 0; } .head-right { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; } .head-right:empty { display: none; } .head-title { flex-direction: column; align-items: flex-start; gap: .2rem; } .title-banner { font-size: 1.45rem; } .scr-sub { font-size: .76rem; white-space: normal; } .btn-back .btn-label { display: none; } .btn-back { padding: 0; width: var(--tap); justify-content: center; } .scr-body { padding: .35rem .8rem .6rem; scrollbar-gutter: auto; } .scr-foot { padding: .5rem .8rem calc(.7rem + var(--sab)); } .scr-foot .hints { display: none; } .foot-actions { flex: 1; } .foot-actions > .btn { flex: 1; } .btn-xl { font-size: 1.25rem; min-height: 3.4rem; padding: .5rem 1rem; } .btn-lg { font-size: 1.05rem; padding: .5rem 1rem; } .title-center { padding-bottom: calc(6.4rem + var(--sab)); } .title-logo { width: min(92vw, 25vh * 16 / 7); } .ts-label { font-size: 2.2rem; } .title-tag span { font-size: .95rem; } .title-badges { bottom: calc(2.6rem + var(--sab)); gap: .4rem; } .tbadge { font-size: .74rem; } .menu-head { grid-template-columns: auto 1fr; } .menu-head .head-right { grid-column: auto; justify-content: flex-end; } .menu-logo { width: 9rem; } .hello { font-size: .78rem; padding: .35rem .7rem; } .menu-body { grid-template-columns: 1fr; overflow: auto; align-content: start; } .menu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } .tile-big { min-height: 8.6rem; } .tile-big .tile-label { font-size: 1.85rem; } .tile-big .tile-ico { display: none; } .tile-small { min-height: 4.2rem; padding: .55rem .6rem; gap: .5rem; } .tile-small .tile-ico { width: 2.3rem; height: 2.3rem; } .net-globe { width: 9rem; height: 9rem; } .my-card { order: -1; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; grid-template-areas: 'p n e' 'p s e'; align-items: center; gap: .1rem .7rem; padding: .6rem .8rem; } .mc-head, .mc-kart { display: none; } .mc-portrait { grid-area: p; width: 4.6rem; } .mc-name { grid-area: n; font-size: 1.25rem; justify-self: start; } .mc-sub { grid-area: s; align-items: flex-start; text-align: left; } .mc-edit { grid-area: e; align-self: center; } .mc-edit .btn-label { display: none; } .scr-menu .scr-foot { display: none; } .scr-menu .scr-body { padding-bottom: 2.6rem; } .pf-layout, .gr-layout, .sg-layout, .on-layout, .lb-layout, .res-layout, .room-form, .set-layout, .pane-keys, .pane-tech, .pane-online { grid-template-columns: 1fr; height: auto; } .pf-preview { flex-direction: row; min-height: 9rem; } .pv-stage { flex: 0 0 38%; min-height: 9rem; } .pv-info { flex: 1; justify-content: center; background: rgba(10, 14, 60, .4); } .pv-name { font-size: 1.6rem; } .pv-desc { font-size: .76rem; } .char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 7.2rem; gap: .45rem; flex: none; } .cc-bonus { display: none; } .cc-name { font-size: .85rem; } .cc-pic { bottom: 1.4rem; } .gr-stage { min-height: 10rem; } .gr-title h2 { font-size: 1.6rem; } .kart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 한 줄로 쌓이면 색 칸이 카트 6장 아래에 있어 색을 고를 때 칠해지는 카트가 화면 밖이다 — 오른쪽 칸을 풀어(contents) 미리보기 → 색 칠하기 → 카트 고르기 순서로 놓는다 */ .gr-layout { gap: .35rem; } .gr-detail { margin-bottom: .5rem; } .gr-right { display: contents; } .gr-right > .sec-title:nth-of-type(2), .gr-right > .palette { order: 1; } .gr-right > .sec-title:nth-of-type(1), .gr-right > .kart-grid { order: 2; } .gr-right > .palette { margin-bottom: .6rem; } .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 8.4rem; flex: none; } .sg-preview { flex: none; } .sg-art { min-height: 8rem; flex: none; height: 8rem; } .opt-panel { grid-template-columns: 1fr; } .opt-panel .opt-inline { flex-direction: row; align-items: center; } .room-list { min-height: 14rem; } .room-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name n' 'track state'; gap: .25rem .5rem; padding: .5rem .7rem; } .room-headrow { display: none; } .rc-name { grid-area: name; } .rc-n { grid-area: n; align-items: flex-end !important; } .rc-track { grid-area: track; } .rc-state { grid-area: state; justify-self: end; } .rc-mode { display: none !important; } .rc-thumb { display: none; } .on-right { overflow: visible; padding: 0; } .on-right > .btn { min-height: 3.6rem; } .on-left { order: 2; } .lb-code { padding: .25rem .3rem .25rem .7rem; } .code-tile { width: 1.9rem; height: 2.3rem; font-size: 1.3rem; } .lb-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 9.2rem; flex: none; } .lb-mybar { flex-direction: column; align-items: stretch; } .lb-mybar > .btn { width: 100%; } .lb-team { justify-content: space-between; } .lb-voice { margin-left: 0; } .lb-voice.is-off { flex-direction: column; align-items: stretch; } .voice-hint { max-width: none; } .lb-right .chat-panel { min-height: 16rem; } .scr-lobby .scr-foot { flex-direction: column; align-items: stretch; gap: .4rem; } .lb-status { font-size: .78rem; justify-content: center; } .lb-main { width: 100%; } /* 세로 휴대폰은 참가자 칩이 두 줄이 되므로 겹치지 않게 보통 흐름으로 쌓는다 */ .scr-loading { display: flex; flex-direction: column; justify-content: flex-end; gap: .9rem; padding: 4rem 1rem calc(1rem + var(--sab)); } .ld-art { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 60%); animation-name: ldArtDown; } .ld-pic { left: 0; bottom: 38%; } .ld-edge { clip-path: polygon(0 59.4%, 100% 49.4%, 100% 50.6%, 0 60.6%); animation-name: ldArtDown; } .ld-shade { background: linear-gradient(180deg, rgba(8, 12, 50, .5) 0%, transparent 18%, transparent 40%, rgba(8, 12, 50, .75) 62%, rgba(8, 12, 50, .9) 100%); } @keyframes ldArtDown { from { transform: translateY(-10%); opacity: 0; } } .ld-main, .ld-bottom { position: relative; left: auto; right: auto; bottom: auto; } .ld-main { flex-direction: column; align-items: stretch; gap: .9rem; } .ld-name { font-size: 2.3rem; } .ld-tip { width: 100%; min-height: 8.6rem; } .ld-status { padding-left: 0; } .res-headline { font-size: 1.6rem; } .podium { max-width: 22rem; } .pod-pic { width: 4.2rem; height: 4.2rem; } .pod-1 .pod-pic { width: 5.2rem; height: 5.2rem; } .pod-block.gold { height: 5.6rem; } .pod-block.silver { height: 4.4rem; } .pod-block.bronze { height: 3.8rem; } .pod-num { font-size: 1.9rem; } /* 트랙 첫 판은 늘 '최고 랩 새 기록!' 띠가 떠서 표가 그만큼 내려가 8위가 발 밑으로 숨었다(390×844) — 그때만 시상대를 줄인다 */ .res-left:has(.team-score, .res-record) { gap: .45rem; } .res-left:has(.team-score, .res-record) .pod-pic { width: 3.6rem; height: 3.6rem; } .res-left:has(.team-score, .res-record) .pod-1 .pod-pic { width: 4.4rem; height: 4.4rem; } .res-left:has(.team-score, .res-record) .pod-block.gold { height: 4.6rem; } .res-left:has(.team-score, .res-record) .pod-block.silver { height: 3.9rem; } /* 줄 높이는 화면 높이에서 머리·발·시상대·여백(--rk, 띠가 뜨면 더 길다)을 뺀 나머지를 8줄로 나눈다 — 360×780 처럼 낮은 세로 화면에서도 8위까지 발 위에 들어오게. 위 2.85rem 은 원래 줄 높이 */ .res-layout { --rk: 33.4rem; } .res-layout:has(.res-record) { --rk: 34.2rem; } .res-layout:has(.team-score) { --rk: 35.9rem; } .res-layout:has(.team-score):has(.res-record) { --rk: 38.6rem; } /* 온라인은 online.js 가 발 줄에 '한 판 더' 단추를 붙여 발이 한 줄(4rem) 더 높다 */ .res-table { --rf: 0rem; } .scr-results:has(.ol-again) .res-table { --rf: 4rem; } .res-table { --rh: clamp(1.75rem, calc((100vh - var(--sat) - var(--sab) - var(--rk) - var(--rf)) / 8 - .25rem), 2.85rem); } @supports (height: 100dvh) { .res-table { --rh: clamp(1.75rem, calc((100dvh - var(--sat) - var(--sab) - var(--rk) - var(--rf)) / 8 - .25rem), 2.85rem); } } .res-row { height: var(--rh); padding-block: 0; } .res-head { height: auto; padding-block: .32rem; } .res-pic { width: min(2.2rem, calc(var(--rh) - .45rem)); height: min(2.2rem, calc(var(--rh) - .45rem)); } .res-rank { width: min(2.1rem, calc(var(--rh) - .45rem)); height: min(2.1rem, calc(var(--rh) - .45rem)); } .res-row { grid-template-columns: 2.3rem minmax(0, 1fr) 5.4rem 2.4rem; } .res-row > :nth-child(4) { display: none; } .res-time { font-size: .8rem; } .scr-results .scr-foot .foot-actions { flex-wrap: wrap; } .res-auto { flex-basis: 100%; text-align: center; } .set-row { grid-template-columns: 1fr; gap: .3rem; padding: .5rem 0; } .set-row > :last-child { justify-self: start; } /* 슬라이더 줄도 이름 아래로 — 옆에 두면 막대가 100px 남짓이라 손가락으로 맞추기 어렵다 */ .set-row:has(> .sld) { grid-template-columns: 1fr; gap: 0; } .set-row > .sld { justify-self: stretch; } .help-tabs { width: 100%; } .help-tabs .seg-opt { padding: .2rem .4rem; font-size: .76rem; } .help-tabs .seg-opt .ico { display: none; } .kb { display: none; } .key-list { grid-template-columns: 1fr; } .pane-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tech-card { grid-template-columns: 1fr; } .tech-art { height: 6rem; } .pz-btns { grid-template-columns: 1fr; } .ui-toasts { top: calc(5.6rem + var(--sat)); } .ui-root:not(.on) .ui-toasts { top: calc(14.5rem + var(--sat)); } .modal-card { padding: 1.1rem 1rem 1rem; } .modal-actions .btn { flex: 1; } .char-grid.small { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 6.4rem; } /* HUD (세로 휴대폰에선 레이스를 거의 안 하지만 깨지지는 않게) */ .hud-root { --edge: .6rem; } .hr-num { font-size: 3.4rem; } .h-stand { display: none; } .h-map { width: 7rem; height: 7rem; } .h-time { min-width: 0; padding: .3rem .6rem; } .ht-time { font-size: 1.15rem; } .ht-laps { display: none; } .h-islot { --s: 4.2rem; } /* 관전 표시: 미니맵(오른쪽)과 속도계(왼쪽) 사이 아이템 칸 폭(7.75rem) 안에 두 줄로 */ .h-spec { max-width: 7.75rem; padding: .25rem .45rem .3rem; } .h-spec small, .hsc-sep { display: none; } .hsc-main { flex-wrap: wrap; justify-content: center; row-gap: 0; white-space: normal; } .hsc-keys, .hsc-tap { flex-basis: 100%; justify-content: center; text-align: center; font-size: .66rem; font-weight: 700; word-break: keep-all; } .h-islot.second { --s: 3rem; } .hud-tc { top: calc(var(--pad) + 5.4rem); } .h-speedo { width: 8rem; height: 8rem; } .spd-n { font-size: 1.8rem; } .hn-gauge { width: 9rem; } .cd .otext { font-size: 7rem; } .fin-band .otext { font-size: 3.6rem; } .fin-check { width: 4rem; height: 2rem; } /* 좁은 화면: 위 가장자리는 순위·시간판·미니맵 자리라 줄어든 결승 띠는 그 아래(미니맵 밑)로 */ .h-finish { --fs: .5; } .h-finish.small { top: calc(var(--pad) + 13.5rem); } .fl-lap .otext, .fl-final .otext { font-size: 2.2rem; } .fl-big .otext { font-size: 2.6rem; } .hw-txt .otext { font-size: 1.8rem; } .hin-name .otext { font-size: 2.1rem; } .h-intro:has(.hin-map svg) { padding-right: 6rem; } .hin-map { width: 4.6rem; height: 4.6rem; right: .9rem; } .h-intro { padding: .7rem 2rem .8rem 1rem; } .subs { max-width: calc(100vw - 1.2rem); } /* 세로 휴대폰은 발에 버튼이 가로로 꽉 찬다 — 그 위로 */ .subs.in-ui { bottom: calc(5.2rem + var(--sab)); } body:is([data-ui-screen="title"], [data-ui-screen="menu"]) .subs.in-ui { top: auto; bottom: calc(.25rem + var(--sab)); max-width: calc(100vw - 1.2rem); } body[data-ui-screen="results"] .subs.in-ui { left: 50%; right: auto; transform: translateX(-50%); align-items: center; bottom: calc(5.2rem + var(--sab)); max-width: calc(100vw - 1.2rem); } body[data-ui-screen="loading"] .subs.in-ui { top: calc(3.6rem + var(--sat)); max-width: calc(100vw - 1.2rem); } .sub-txt { font-size: .98rem; } /* 세로 휴대폰 + 터치 단추: 아래쪽 절반은 단추가 차지한다(input.js 오른쪽 묶음 262×250, 왼쪽 236×120). 속도계는 순위 아래 왼쪽, 아이템·니트로는 위 작은 단추 줄(마이크·복귀·멈춤) 아래, 자막은 미니맵 아래로 */ .touch .hud-br { left: calc(var(--edge) + var(--sal)); right: auto; top: calc(var(--pad) + 4.6rem); bottom: auto; transform: none; align-items: flex-start; } .touch .h-speedo { width: 6.6rem; height: 6.6rem; } .touch .spd-n { font-size: 1.5rem; } .touch .spd-lbl { display: none; } .touch .h-tags { right: auto; left: 0; bottom: auto; top: 100%; align-items: flex-start; } .touch .h-tag { font-size: 1.05rem; } /* 속도계가 화면 왼쪽 끝에 붙으니 '↑ 지금!' 은 오른쪽으로 (왼쪽에 두면 화면 밖으로 잘린다) */ .touch .h-irdy { left: auto; right: -2.6rem; top: 12%; } .touch .hud-tc { top: calc(var(--pad) + 9.6rem); } /* 미니맵은 위 작은 단추 줄(--tc-top) 바로 아래. 크기는 가운데 아이템 두 칸(7.75rem)의 오른쪽 끝에 닿지 않을 만큼 — 8.2rem 고정이면 360px 폭에서 아이템 칸을 덮는다 */ .touch .h-map { --m: min(8.2rem, calc(50vw - 3.9rem - var(--edge) - var(--sar) - 6px)); position: absolute; right: 0; top: calc(var(--tc-top, 132px) + .5rem - var(--pad)); width: var(--m); height: var(--m); } .touch .hud-bc { top: calc(var(--pad) + 9.8rem); bottom: auto; } /* 스피드전 니트로: 한 줄(칸+막대 ≈ 185px)이면 오른쪽 미니맵을 덮는다 — 아이템 칸 폭(7.75rem) 안에 칸 위·막대 아래 두 줄로. 리타이어·관전 표시(.hud-tc)는 그 아래로 */ .touch .h-nitro { flex-direction: column; gap: .25rem; padding: .35rem .45rem .4rem; } .touch .hn-gauge { width: 6.8rem; height: 1.1rem; } .touch .hn-slot { width: 1.4rem; height: 2.2rem; } .touch.mode-speed:not(.spectating) .hud-tc { top: calc(var(--pad) + 14.6rem); } /* 관전 중엔 터치 단추가 없어 아래가 비어 있다 — 니트로 막대는 아래 가운데로 (관전 막대가 그 위에 붙는다) */ .hud-root.touch.spectating .hud-bc { top: auto; bottom: calc(var(--edge) + var(--sab)); } .touch .hud-bl { bottom: calc(var(--tc-br-h, 241px) + .6rem); width: 62vw; } /* 자막은 미니맵·소개 띠 바로 아래(위 HUD 와 아래 단추 묶음 사이 빈 띠의 맨 위) — 가운데(31rem 남짓)에 두면 아나운서 '셋! 둘!' 자막이 카운트다운 숫자와, '두 번째 바퀴!' 자막이 바퀴 띠와 겹친다 */ .subs.in-race.touch, .subs.in-race.touch.intro { top: calc(var(--sat) + 18.9rem); max-width: calc(100vw - 1.2rem); } /* 가운데 알림: 아래 268px 는 단추 묶음(input.js)이라 원래 자리(66~70%)는 단추에 가린다. 자막(두 줄까지) 아래 ~ 단추 위 띠 안으로 모은다. GO! 와 같은 순간에 뜬 것(below-cd)은 GO 아래로 */ .touch .fl-layer-lap, .touch .fl-layer-final, .touch .fl-layer-warn { top: 47%; } .touch .fl-layer-big { top: 54%; } .touch .fl-layer-info { top: 60%; } .touch .fl-layer-item { top: 65%; } .touch .fl-layer-lap .fl.below-cd, .touch .fl-layer-final .fl.below-cd, .touch .fl-layer-warn .fl.below-cd { translate: 0 10vh; } .touch .fl-layer-big .fl.below-cd { translate: 0 3vh; } .touch .fl-layer-info .fl.below-cd, .touch .fl-layer-item .fl.below-cd { translate: none; } /* 역주행 판(원래 31%)은 아이템 칸·미니맵에 걸친다 — 가운데로 */ .touch .h-wrong { top: 50%; } .hud-root.touch.finished .hud-br { translate: -30% 0; } /* 소개 띠는 위 작은 단추 줄(마이크·복귀·멈춤) 아래로 */ .touch .h-intro { top: calc(var(--pad) + 8.6rem); } /* 결승 뒤: '새 기록!' 은 아래 단추 묶음 위, 줄어든 결승 띠는 미니맵 아래 */ .hud-root.touch.finished .fl-layer-info, .hud-root.touch.finished .fl-layer-item { top: 61%; } .touch .h-finish.small { top: calc(var(--tc-top, 132px) + 9.2rem); } .hud-root.finished ~ .subs.in-race.touch { top: calc(var(--tc-top, 132px) + 16.8rem); } } /* 움직임 줄이기: 윈도에서 '애니메이션 효과'를 끈 학교 PC 도 여기에 걸린다(성능 때문에 끈 경우가 많다). 모든 애니메이션을 0초로 만들면 카운트다운·알림처럼 '끝 장면이 투명한' 것이 아예 안 보이므로 화면 전체가 크게 움직이는 장식만 멈춘다. */ @media (prefers-reduced-motion: reduce) { .ui-wipe, .confetti { display: none; } .bg-stripes, .bg-glow, .scr-bg .bg-pic, .title-keyart, .ld-pic, .ld-speed, .art-rays, .art-clouds, .art-speed, .art-dash, .art-curb, .mc-rays, .pv-rays, .net-globe, .bf-lines, .title-logo, .menu-logo, .gr-pic, .cn-lines { animation: none !important; } .scr.enter > * { animation-duration: .2s !important; } .scr.leave { animation-duration: .15s !important; } } .hs-row.retired { opacity: .55; } .hs-row.retired .hs-name { text-decoration: line-through; }