/* 좋소 키우기 — 게임 전용 스타일. 점검표 style.css에서 분리(2026-10-26) */ .mg-ask { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; } .mg-ask-box { width:260px; background:var(--surface); color:var(--text); border:1.5px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.28); padding:16px 16px 13px; font-size:13px; } .mg-ask-t { font-weight:700; font-size:13px; margin-bottom:10px; } .mg-ask-box input { width:100%; box-sizing:border-box; padding:8px 10px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-family:inherit; font-size:14px; letter-spacing:3px; text-align:center; } .mg-ask-box input:focus { outline:none; border-color:var(--accent); } .mg-ask-err { min-height:15px; font-size:11px; color:#d93025; margin:5px 1px 0; } .mg-ask-btns { display:flex; gap:6px; margin-top:7px; } .mg-ask-btns button { flex:1; padding:7px 0; border-radius:8px; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; } .mg-ask-no { border:1.5px solid var(--border); background:var(--surface); color:var(--text2); } .mg-ask-no:hover { border-color:var(--text3); color:var(--text); } .mg-ask-ok { border:1.5px solid var(--accent); background:var(--accent); color:#fff; } .mg-ask-ok:hover { filter:brightness(1.07); } .gm-widget { position:fixed; right:16px; bottom:48px; z-index:900; width:400px; max-width:calc(100vw - 32px); max-height:calc(100vh - 64px); background:var(--surface); color:var(--text); border:1.5px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,0.25); font-size:13px; overflow:hidden; transition:opacity 0.2s; user-select:none; } .gm-widget.dim { opacity:0.35; } .gm-head { display:flex; align-items:center; justify-content:space-between; min-height:30px; box-sizing:content-box; padding:5px 10px; background:var(--input-bg); border-bottom:1px solid var(--border); } .gm-title { font-weight:700; font-size:13px; } .gm-head-btns button { background:none; border:none; color:var(--text3); font-size:15px; width:24px; height:22px; cursor:pointer; border-radius:4px; font-family:inherit; } .gm-head-btns button:hover { background:var(--border2); color:var(--text); } .gm-body { padding:10px 12px 10px; } .gm-chip { position:fixed; right:16px; bottom:48px; z-index:900; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface); font-size:16px; cursor:pointer; opacity:0.6; display:none; } .gm-chip:hover { opacity:1; } .gm-intro { display:flex; align-items:flex-start; gap:10px; line-height:1.6; color:var(--text2); margin-bottom:10px; word-break:keep-all; overflow-wrap:break-word; } .gm-intro > span { flex:1; min-width:0; } .gm-input { width:100%; box-sizing:border-box; padding:9px 10px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-size:14px; font-family:inherit; margin-bottom:8px; } .gm-login-msg { font-size:11.5px; color:var(--text3); margin:-2px 0 8px; line-height:1.4; } .gm-login-msg.err { color:#d9534f; font-weight:600; } .gm-btn { width:100%; padding:10px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-family:inherit; font-size:14px; cursor:pointer; margin-top:8px; } .gm-btn.primary { background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); } .gm-avatar { font-size:30px; line-height:1; } .gm-nick { color:var(--text4); font-size:11px; } .gm-bar { height:6px; border-radius:3px; background:var(--border2); overflow:hidden; margin-top:4px; } .gm-bar i { display:block; height:100%; width:0; background:var(--accent); transition:width 0.15s; } .gm-bar.hp i { background:#d93025; } /* 선배 사장님의 격려 — 버프가 걸려 있는 동안만 보임 */ .gm-cheer { position:absolute; left:4px; right:48px; top:4px; z-index:5; pointer-events:none; overflow:hidden; display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:9px; background:linear-gradient(90deg,#fff6d8,#ffe9a8,#ffd166,#ffe9a8,#fff6d8); background-size:300% 100%; border:1.5px solid #f0b429; animation:gmCheerIn 0.28s ease-out, gmEvFlow 5s linear infinite; box-shadow:0 2px 10px rgba(240,180,41,0.45), inset 0 1px 0 rgba(255,255,255,0.7); font-size:11px; line-height:1.25; } .gm-cheer::after { content:''; position:absolute; top:0; bottom:0; width:36%; left:-50%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.75),transparent); animation:gmEvShine 2.8s ease-in-out infinite; pointer-events:none; } .gm-cheer img { border:1.5px solid #f0b429; box-shadow:0 0 0 2px rgba(255,255,255,0.8); } .gm-cheer img { width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; background:#fff; } .gm-cheer b { color:#4a3410; font-weight:700; white-space:nowrap; } .gm-cheer span { color:#6b5120; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gm-cheer em { font-style:normal; font-weight:700; color:#c47b00; flex:none; } /* 여러 명이 동시에 격려(3.66) — 얼굴 + 효과 아이콘 + 남은 초를 한 묶음씩, 넘치면 줄바꿈 */ .gm-cheer.many { gap:3px 4px; padding:3px 6px; flex-wrap:wrap; } .gm-cheer-n { color:#8a6400 !important; font-size:10px; font-weight:800; flex:none; letter-spacing:-0.02em; } .gm-cheer .gm-cheer-face { display:flex; align-items:center; gap:1px; flex:none; overflow:visible; background:rgba(255,255,255,0.75); border:1px solid rgba(255,183,0,0.5); border-radius:99px; padding:1px 5px 1px 1px; } .gm-cheer-face img { width:20px; height:20px; margin:0; } .gm-cheer-face em { font-size:10px; } @keyframes gmCheerIn { from { opacity:0; transform:translateY(-6px) scale(0.97); } to { opacity:1; transform:none; } } /* 격려가 터질 때 — 선배가 오른쪽에서 들어와 한마디 하고 사라짐 */ .gm-cheer-fx { position:absolute; right:4px; bottom:0; z-index:5; pointer-events:none; display:flex; align-items:flex-end; gap:4px; animation:gmCheerFx 2.2s ease-out forwards; } .gm-cheer-fx img { height:92px; width:auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.3)); } .gm-cheer-say { position:relative; margin-bottom:46px; max-width:150px; padding:6px 9px; border-radius:11px; background:#fffdf4; border:1.5px solid #f0b429; box-shadow:0 3px 10px rgba(0,0,0,0.18); font-size:11.5px; font-weight:700; color:#4a3410; line-height:1.3; word-break:keep-all; } .gm-cheer-say::after { content:''; position:absolute; right:-7px; bottom:8px; border:6px solid transparent; border-left-color:#f0b429; } .gm-cheer-say b { display:block; font-size:10px; color:#8a6400; font-weight:800; margin-bottom:1px; } @keyframes gmCheerFx { 0% { opacity:0; transform:translateX(40px); } 15% { opacity:1; transform:translateX(0); } 78% { opacity:1; transform:translateX(0); } 100% { opacity:0; transform:translateX(26px); } } .gm-stats { display:flex; justify-content:space-between; gap:6px; margin:8px 0; color:var(--text2); font-size:12px; } .gm-arena { position:relative; display:block; width:100%; padding:8px 10px 10px; border:1.5px dashed var(--border); border-radius:10px; background:var(--bg); color:var(--text); font-family:inherit; cursor:pointer; touch-action:manipulation; overflow:hidden; } .gm-arena.boss { border-color:#d93025; border-style:solid; } .gm-mon-name { font-size:12px; color:var(--text2); } .gm-monster { font-size:44px; line-height:1.25; } .gm-monster.hit { animation:gmHit 0.12s; } @keyframes gmHit { 50% { transform:scale(0.85) rotate(-6deg); } } .gm-timer { font-size:11px; color:#d93025; min-height:14px; margin-top:3px; } .gm-float-layer { position:absolute; inset:0; pointer-events:none; } .gm-float { position:absolute; top:40%; font-weight:700; color:var(--accent); animation:gmFloat 0.7s forwards; } .gm-float.crit { color:#d93025; font-size:16px; } @keyframes gmFloat { to { transform:translateY(-36px); opacity:0; } } .gm-ups { display:flex; flex-direction:column; gap:5px; margin-top:8px; } .gm-up { display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-family:inherit; text-align:left; cursor:pointer; } .gm-up:disabled { opacity:0.45; cursor:default; } .gm-up:not(:disabled):hover { border-color:var(--accent); } .gm-up-icon { font-size:18px; } .gm-up-text { flex:1; min-width:0; display:flex; flex-direction:column; } .gm-up-text small { color:var(--text3); font-size:11px; } .gm-up-cost { font-size:12px; font-weight:600; white-space:nowrap; } .gm-foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:11px; color:var(--text4); } .gm-link { background:none; border:none; color:var(--text2); font-family:inherit; font-size:12px; cursor:pointer; padding:0; } .gm-toast { word-break:keep-all; position:absolute; left:10px; right:10px; top:40px; padding:7px 10px; border-radius:8px; background:var(--btn-bg); color:var(--btn-text); font-size:12px; text-align:center; animation:gmToast 0.25s; pointer-events:none; } @keyframes gmToast { from { opacity:0; transform:translateY(-6px); } } .gm-rank-title { font-weight:700; margin-bottom:6px; } .gm-rank-row { display:flex; gap:8px; padding:5px 4px; border-bottom:1px solid var(--border2); font-size:12px; } .gm-rank-row > span:first-child { width:18px; color:var(--text3); } .gm-rank-row b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gm-rank-row.me { background:var(--accent-bg); } /* 좋소 키우기 — 캐릭터 이미지 / 무소음 처리 영역 */ .gm-avatar { position:relative; width:40px; height:40px; flex-shrink:0; } .gm-avatar img { width:40px; height:40px; border-radius:50%; object-fit:cover; background:#f1ede8; border:1.5px solid var(--border); display:block; } .gm-avatar i { position:absolute; right:-4px; bottom:-4px; font-style:normal; font-size:15px; line-height:1; } .gm-arena { position:relative; display:flex; align-items:flex-end; gap:6px; cursor:default; touch-action:manipulation; min-height:120px; } .gm-hero { height:112px; width:auto; min-width:min(100px, 30%); max-width:40%; object-fit:contain; flex-shrink:0; pointer-events:none; user-select:none; transform-origin:bottom center; } .gm-hero.hit { animation:gmHeroHit 0.18s; } @keyframes gmHeroHit { 50% { transform:translateY(-4px) rotate(-3deg); } } .gm-task { flex:1; min-width:0; text-align:center; align-self:center; } .gm-hint { font-size:10.5px; color:var(--text4); text-align:center; margin-top:4px; } /* 좋소 키우기 — 키보드 입력 */ .gm-widget:focus { outline:none; } .gm-widget:focus-within { border-color:var(--accent); } .gm-keys { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; align-items:center; margin-top:8px; min-height:27px; } .gm-keys.tap-only { min-height:32px; flex-wrap:nowrap; } .gm-keys.tap-only .gm-combo { margin-left:0; } .gm-key { min-width:22px; height:24px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; border:1.5px solid var(--border); border-bottom-width:3px; border-radius:5px; background:var(--input-bg); color:var(--text2); font-family:var(--font-mono); font-size:12px; font-weight:700; } .gm-key.now { border-color:var(--accent); color:var(--accent-text); background:var(--accent-bg); transform:translateY(-1px); } .gm-key.done { opacity:0.3; } .gm-keys.miss { animation:gmShake 0.25s; } @keyframes gmShake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } } .gm-combo { font-size:11px; font-weight:600; color:var(--accent-text); margin-left:4px; } .gm-hint.on { color:var(--ok-text); } .gm-intro-img { width:44px; height:44px; border-radius:50%; flex-shrink:0; background:#f1ede8; } /* 좋소 키우기 — 제목줄을 잡고 창 이동 */ .gm-head { cursor:move; touch-action:none; } .gm-head-btns button { cursor:pointer; } /* 좋소 키우기 — 이미지가 아직 없는 직원은 이름으로 대신 표시 / 직원 목록 */ .gm-face-ph { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; border:1.5px solid var(--border); box-sizing:border-box; } .gm-hero-ph { width:72px; height:112px; border-radius:36px 36px 10px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#fff; } .gm-hero-ph span { font-size:18px; font-weight:700; } .gm-hero-ph small { font-size:10px; opacity:0.85; } .gm-c1 { background:#5b8def; } .gm-c2 { background:#e0739a; } .gm-c3 { background:#3fae8c; } .gm-c4 { background:#d9a23a; } .gm-c5 { background:#9a6fd6; } .gm-c6 { background:#5f7d95; } .gm-c7 { background:#d9634a; } .gm-c28 { background:#d9d83a; } .gm-c29 { background:#e0739a; } .gm-c30 { background:#648f83; } .gm-c31 { background:#86bfd4; } .gm-c32 { background:#b57952; } .gm-foot { gap:6px; } /* 좋소 키우기 — PC 단어 입력 / 📌 고정 */ .gm-keys.words { flex-wrap:wrap; } .gm-keys.words .gm-key { width:auto; min-width:0; padding:0 10px; font-size:14px; letter-spacing:0.5px; } .gm-type { width:100%; box-sizing:border-box; margin-top:6px; padding:8px 10px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-size:15px; font-family:inherit; text-align:center; } .gm-type:focus { outline:none; border-color:var(--accent, #e8732a); } #gmLockBtn { opacity:0.35; filter:grayscale(1); } .gm-widget.locked #gmLockBtn { opacity:1; filter:none; } /* 좋소 키우기 — 남은 업무 수치 / 강화 목록은 창 안에서 스크롤 (창이 계속 길어지지 않게) */ .gm-hp-text { font-size:10.5px; color:var(--text3); margin-top:2px; font-variant-numeric:tabular-nums; } .gm-ups { max-height:150px; overflow-y:auto; overscroll-behavior:contain; padding-right:2px; } .gm-ups::-webkit-scrollbar { width:5px; } .gm-ups::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; } .gm-ups .gm-up { flex-shrink:0; } /* 좋소 키우기 — 강화 타일(4칸) + ? 설명 말풍선 */ /* 타일 3줄까지만 보이고 그 아래는 스크롤 — 스킬이 늘어나도 창 높이는 그대로 */ .gm-ups { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; max-height:190px; overflow-y:auto; align-content:start; padding-right:3px; } .gm-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; padding:7px 2px 5px; border:1.5px solid var(--border); border-radius:9px; background:var(--input-bg); color:var(--text); font-family:inherit; cursor:pointer; transition:transform 0.08s, border-color 0.15s; } .gm-tile:hover { border-color:var(--accent); } .gm-tile:active { transform:scale(0.95); } .gm-tile.off { opacity:0.5; } .gm-tile.locked { opacity:0.4; cursor:default; filter:grayscale(1); } .gm-tile.maxed { border-color:#d9a23a; } .gm-tile-icon { font-size:18px; line-height:1.1; } .gm-tile-name { font-size:10.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .gm-tile-lv { font-size:10px; color:var(--text3); } .gm-tile-cost { font-size:10px; font-weight:600; min-height:13px; white-space:nowrap; } .gm-tile-q { position:absolute; top:2px; right:3px; width:14px; height:14px; border-radius:50%; font-size:9.5px; line-height:14px; text-align:center; background:var(--border2); color:var(--text3); cursor:help; } .gm-tile-q:hover { background:var(--accent); color:#fff; } .gm-tip { position:absolute; left:10px; right:10px; z-index:6; padding:8px 10px; border-radius:8px; background:var(--btn-bg); color:var(--btn-text); font-size:11.5px; line-height:1.55; box-shadow:0 4px 14px rgba(0,0,0,0.25); pointer-events:none; word-break:keep-all; } .gm-tip span { opacity:0.7; font-size:10.5px; } .gm-float.project { font-size:15px; color:#d9a23a; font-weight:800; } /* 좋소 키우기 — 무한의 계단 / 랭킹 탭 */ .gm-st-head { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:6px; } .gm-st-head span { font-size:11.5px; color:var(--text3); } .gm-st-cv { display:block; width:100%; height:170px; border:1.5px solid var(--border2); border-radius:10px; background:var(--input-bg); } .gm-bar.st { margin-top:6px; } .gm-bar.st i { background:var(--accent); transition:none; } .gm-st-info { font-size:12px; text-align:center; color:var(--text2); margin-top:6px; min-height:34px; word-break:keep-all; } .gm-st-info small { color:var(--text4); } .gm-st-btns { display:flex; gap:8px; margin-top:4px; } .gm-st-btns button { flex:1; padding:12px 0; font-size:18px; border:1.5px solid var(--border); border-radius:10px; background:var(--input-bg); color:var(--text); cursor:pointer; touch-action:manipulation; } .gm-st-btns button:active { transform:scale(0.96); background:var(--accent-bg); } .gm-link.locked { opacity:0.4; } .gm-rank-tabs { display:flex; gap:4px; margin-bottom:8px; } .gm-rank-tabs button { flex:1; padding:6px 0; border:1.5px solid var(--border); border-radius:8px; background:none; color:var(--text3); font-family:inherit; font-size:12px; cursor:pointer; } .gm-rank-tabs button.on { border-color:var(--accent); color:var(--text); font-weight:700; background:var(--accent-bg); } @keyframes gmEventGlow { 50% { filter:brightness(1.08); } } .gm-arena.golden { box-shadow:inset 0 0 0 2px #ffcf4a, 0 0 12px rgba(255,200,60,0.35); } /* 좋소 키우기 — 계단·랭킹·직원 화면도 플레이 화면과 같은 높이 */ .gm-body.fixed { display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; } .gm-body.fixed > .gm-btn:last-child { margin-top:auto; } .gm-body.fixed .gm-st-cv { flex:1 1 auto; height:auto; min-height:120px; } .gm-body.fixed > * { flex-shrink:0; } .gm-body.fixed .gm-st-cv { flex-shrink:1; } .gm-body.fixed { box-sizing:border-box; } /* 좋소 키우기 — 창을 가로로 넓혀 강화 타일 한 줄 5칸 */ .gm-ups { grid-template-columns:repeat(5,1fr); } /* 좋소 키우기 — 세로 줄이기: 단어+입력칸 한 줄, 타일 3줄, 업무 영역 조금 작게 */ .gm-typerow { display:flex; align-items:center; gap:6px; margin-top:8px; } .gm-typerow .gm-keys { margin-top:0; flex:0 1 auto; justify-content:flex-start; min-height:0; } .gm-typerow .gm-type { flex:1 1 120px; min-width:110px; margin-top:0; padding:7px 10px; font-size:14px; } .gm-arena { min-height:100px; } .gm-hero { height:94px; } .gm-tile { padding:5px 2px 4px; gap:0; } .gm-tile-top { display:flex; align-items:center; gap:3px; line-height:1; } .gm-tile-top .gm-tile-icon { font-size:15px; } .gm-tile-top .gm-tile-lv { font-size:9.5px; } .gm-tile-name { margin-top:2px; } .gm-tile.locked .gm-tile-cost { font-size:9.5px; font-weight:500; color:var(--text3); } .gm-tile-top { padding:0 11px 0 2px; max-width:100%; box-sizing:border-box; } .gm-tile-q { width:12px; height:12px; line-height:12px; font-size:8.5px; top:3px; right:3px; } /* 좋소 키우기 — 약 600px 기준 정리: 타일 4줄(겹침 없이), 입력칸 전체 폭, 경험치 수치 */ .gm-tile { padding:6px 2px 4px; gap:0; line-height:1.25; } .gm-tile-icon { font-size:16px; line-height:1.15; } .gm-tile-name { font-size:10.5px; margin-top:1px; } .gm-tile-lv { font-size:9.5px; } .gm-tile-cost { font-size:9.5px; min-height:12px; } .gm-tile-q { width:13px; height:13px; line-height:13px; font-size:9px; top:3px; right:3px; } .gm-type { margin-top:6px; } .gm-keys.words { margin-top:6px; } .gm-timer:empty { display:none; } #gmRank { display:flex; align-items:baseline; justify-content:space-between; gap:6px; } .gm-rank-l { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gm-exp-num { flex-shrink:0; font-size:10.5px; color:var(--text3); font-variant-numeric:tabular-nums; } /* 좋소 키우기 — 투명도 슬라이더 (마우스를 올려도 유지) */ .gm-opbar { position:absolute; left:10px; right:10px; top:40px; z-index:60; padding:10px 12px; border-radius:12px; border:1.5px solid var(--accent); background:var(--surface); box-shadow:0 10px 24px rgba(0,0,0,0.35); font-size:11.5px; color:var(--text3); animation:gmToastIn 0.18s ease-out; } .gm-opbar-row { display:flex; align-items:center; gap:8px; } .gm-opbar-row input { flex:1; accent-color:var(--accent); } .gm-opbar-opt { display:flex; align-items:center; gap:6px; margin-top:8px; color:var(--text2); cursor:pointer; } .gm-opbar-opt input { accent-color:var(--accent); margin:0; } .gm-opbar b { width:36px; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; } @keyframes gmCloudDrift { to { left:120%; } } @keyframes gmIsleFloat { 0%,100% { transform:translate(-50%,-50%); } 50% { transform:translate(-50%,calc(-50% - 6px)); } } @keyframes gmFog { to { transform:translateX(6px); opacity:0.75; } } @keyframes gmIsleShake { 20%,60% { transform:translate(calc(-50% - 5px),-50%); } 40%,80% { transform:translate(calc(-50% + 5px),-50%); } } .gm-monster img { height:54px; width:auto; display:block; margin:0 auto; filter:drop-shadow(0 3px 3px rgba(0,0,0,0.2)); } .gm-tile-icon img { height:22px; width:auto; display:block; margin:0 auto; } .gm-money { height:1.15em; width:auto; vertical-align:-0.22em; } .gm-tile-cost .gm-money { height:12px; vertical-align:-2px; margin-right:1px; } @keyframes gmIsleBob { 50% { transform:translateY(-5px); } } @keyframes gmIsleShake2 { 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); } } @keyframes gmEvFlow { to { background-position:300% 0; } } @keyframes gmEvShine { 0% { left:-50%; } 60%,100% { left:120%; } } @keyframes gmEvBob { 50% { transform:translateY(-2px) rotate(-4deg); } } @keyframes gmEvRoll { from { transform:translateX(0); } to { transform:translateX(-50%); } } /* 직급 배지 / 메뉴 아이콘 / 업무 화면 배경 / 로그인 그림 */ .gm-avatar i { right:-7px; bottom:-7px; } .gm-av-badge { height:22px; width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35)); } .gm-row-badge { height:15px; width:auto; vertical-align:-3px; margin-right:3px; } .gm-menu-ic { height:15px; width:auto; vertical-align:-3px; margin-right:3px; } .gm-pin-ic { height:14px; width:auto; display:block; margin:0 auto; } .gm-arena { background:linear-gradient(rgba(20,18,16,0.12),rgba(20,18,16,0.12)), url("assets/game/ui/office-bg.jpg") center 60%/cover no-repeat; border-style:solid; } .gm-task { background:rgba(255,255,255,0.82); border-radius:12px; padding:6px 8px 5px; color:#2b2b2b; box-shadow:0 2px 8px rgba(0,0,0,0.15); } .gm-task .gm-hp-text, .gm-task .gm-mon-name { color:#333; } .gm-arena.diamond { box-shadow:inset 0 0 0 2px #6fd8ff, 0 0 14px rgba(90,200,255,0.5); } .gm-arena.diamond .gm-task { background:rgba(224,247,255,0.94); } .gm-dia-ic .gm-ic { filter:hue-rotate(150deg) saturate(1.4); } .gm-arena.golden .gm-task { background:rgba(255,246,214,0.92); } .gm-arena.boss .gm-task { background:rgba(255,232,232,0.92); } .gm-login-hero { height:130px; margin:-4px -4px 10px; border-radius:10px; background:center 40%/cover no-repeat; position:relative; overflow:hidden; } .gm-login-hero img { position:absolute; left:50%; bottom:-6px; height:118px; transform:translateX(-50%); filter:drop-shadow(0 4px 6px rgba(0,0,0,0.3)); } .gm-avatar i img.gm-av-badge { width:auto; height:22px; border:none; border-radius:0; background:none; object-fit:contain; } /* 업무 카드 상태 줄: 작은 접기 버튼 · 단계 배지 · 보스 제한시간 */ .gm-task { position:relative; } .gm-task-head { display:flex; align-items:center; gap:4px; min-width:0; } .gm-task-head .gm-mon-stage { flex:0 1 auto; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; } .gm-task-toggle { flex:none; display:grid; place-items:center; width:18px; height:18px; padding:0; border:1px solid rgba(95,81,102,.35); border-radius:6px; background:rgba(255,255,255,.88); color:#493c4c; font-family:inherit; font-size:13px; font-weight:800; line-height:1; cursor:pointer; } .gm-task-toggle:hover,.gm-task-toggle:focus-visible { background:#fff; border-color:#7b617d; } .gm-task.compact { flex:0 1 174px; margin-left:auto; align-self:flex-end; padding:4px 6px; } .gm-task.compact .gm-task-head .gm-mon-stage { flex:1; } .gm-task.compact .gm-monster { display:none; } .gm-task.compact .gm-mon-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gm-task.compact .gm-bar { margin-top:2px; } .gm-task-head .gm-timer { position:static; flex:none; min-height:0; margin:0; font-size:11px; font-weight:700; white-space:nowrap; } .gm-timer:empty { display:none; } .gm-ic { height:16px; width:auto; vertical-align:-3px; margin-right:4px; } .gm-st-head .gm-ic, .gm-rank-title .gm-ic { height:18px; vertical-align:-4px; } .gm-btn .gm-ic { height:18px; vertical-align:-4px; } .gm-stats .gm-ic { height:14px; vertical-align:-2px; margin-right:3px; } .gm-stats .gm-stat-auto { display:inline-flex; align-items:center; } .gm-stats .gm-energy-inline { display:inline-flex; align-items:center; gap:1px; margin-left:2px; padding:0 3px; border:1px solid #e0b040; border-radius:7px; background:#fff1c9; color:#8a5a00; font-size:9px; font-style:normal; font-weight:800; vertical-align:baseline; } .gm-stats .gm-energy-inline .gm-ic { height:10px; margin:0; vertical-align:0; } .gm-chip img { height:22px; width:auto; display:block; } /* 좋소 키우기 — 효과 그림 */ .gm-fx { position:absolute; top:18%; height:56px; width:auto; transform:translate(-50%,0) scale(0.4); pointer-events:none; z-index:3; animation:gmFxPop 0.9s ease-out forwards; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25)); } .gm-fx.big { height:104px; top:0; animation-duration:1.2s; } .gm-fx.coin { height:30px; top:46%; animation-name:gmFxCoin; } .gm-fx.lvup { height:62px; top:10%; transform:none; animation-name:gmFxUp; } .gm-fx.bean { height:26px; top:62%; transform:none; opacity:0.85; animation-name:gmFxBean; } @keyframes gmFxPop { 0% { transform:translate(-50%,0) scale(0.4); opacity:0; } 25% { transform:translate(-50%,0) scale(1.1); opacity:1; } 70% { opacity:1; } 100% { transform:translate(-50%,-14px) scale(1); opacity:0; } } @keyframes gmFxCoin { 0% { transform:translate(-50%,0) scale(0.6); opacity:0; } 20% { opacity:1; transform:translate(-50%,-6px) scale(1); } 100% { transform:translate(-50%,-46px) scale(0.8); opacity:0; } } @keyframes gmFxUp { 0% { transform:translateY(20px); opacity:0; } 30% { opacity:1; } 100% { transform:translateY(-24px); opacity:0; } } @keyframes gmFxBean { 0% { transform:translateY(0) rotate(0); opacity:0; } 25% { opacity:0.85; } 100% { transform:translateY(-60px) rotate(40deg); opacity:0; } } /* 승진 연출 */ .gm-promo { position:absolute; left:0; right:0; top:70px; z-index:30; display:flex; flex-direction:column; align-items:center; pointer-events:none; animation:gmPromo 2.6s ease-out forwards; } .gm-promo-conf { position:absolute; top:-30px; height:170px; width:auto; opacity:0.95; } .gm-promo-badge { height:76px; width:auto; position:relative; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35)); animation:gmPromoBadge 0.6s ease-out; } .gm-promo b { position:relative; margin-top:4px; padding:4px 14px; border-radius:14px; font-size:15px; color:#4a2c00; background:linear-gradient(90deg,#ffe082,#ffb74d); box-shadow:0 3px 10px rgba(0,0,0,0.25); } @keyframes gmPromo { 0% { opacity:0; transform:translateY(10px); } 12% { opacity:1; transform:none; } 80% { opacity:1; } 100% { opacity:0; transform:translateY(-12px); } } @keyframes gmPromoBadge { 0% { transform:scale(0.3) rotate(-20deg); } 70% { transform:scale(1.15) rotate(4deg); } 100% { transform:none; } } /* 장면 카드 (사장 달성 / 자리 비운 동안 / 새 직원 입사) */ .gm-scene { position:absolute; inset:0; z-index:40; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; animation:gmFade 0.2s; } @keyframes gmFade { from { opacity:0; } } .gm-scene-card { width:88%; border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:0 12px 30px rgba(0,0,0,0.4); animation:gmSceneIn 0.35s ease-out; } @keyframes gmSceneIn { from { transform:scale(0.85) translateY(10px); opacity:0; } } .gm-scene-art { position:relative; height:120px; background:center/cover no-repeat; } .gm-scene-art img { position:absolute; left:50%; bottom:-4px; height:112px; transform:translateX(-50%); filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4)); } .gm-scene-txt { padding:12px 14px 2px; text-align:center; font-size:13px; line-height:1.6; color:var(--text2); word-break:keep-all; } .gm-scene-txt b { color:var(--text); } .gm-scene-card .gm-btn { width:calc(100% - 28px); margin:10px 14px 14px; } /* 휴대폰 폭 — 강화 타일 5칸이 좁아지면 글자를 조금 줄여 이름이 잘리지 않게 */ @media (max-width:440px) { .gm-ups { gap:4px; } .gm-tile { padding:5px 1px 4px; } .gm-tile-name { font-size:9px; letter-spacing:-0.3px; } .gm-tile-lv, .gm-tile-cost { font-size:8.5px; } .gm-tile-icon img { height:19px; } } /* 랭킹 — 몇 번째로 키우는 직원인지(입사 차수). 2기부터는 난이도가 달라 구분이 필요 */ .gm-nth { display:inline-block; font-size:9.5px; font-weight:800; color:#fff; background:var(--text3); padding:1px 4px; border-radius:99px; margin-right:4px; vertical-align:1px; letter-spacing:-0.02em; } .gm-rank-row.top1 .gm-nth { background:#d9a23a; } .gm-rank-note { font-size:10.5px; color:var(--text3); text-align:center; margin:6px 2px 0; } .gm-btn.danger { border-color:#e2a5a0; color:#c5372c; } .gm-btn.danger:hover { background:#fdeceb; border-color:#d93025; } .gm-title { cursor:default; } .gm-maxrow { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:4px 6px; border-radius:9px; background:linear-gradient(90deg,rgba(217,162,58,0.16),rgba(217,162,58,0.04)); border:1px solid rgba(217,162,58,0.45); } .gm-maxrow-label { font-size:9.5px; font-weight:800; color:#d9a23a; margin-right:2px; letter-spacing:0.5px; } .gm-maxchip { width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:help; } .gm-maxchip:hover { background:rgba(217,162,58,0.25); } .gm-maxchip { position:relative; } .gm-maxchip img { height:20px; width:auto; } .gm-maxrow.locked { background:var(--input-bg); border:1px dashed var(--border); } .gm-maxrow.locked .gm-maxrow-label { color:var(--text3); } .gm-maxrow.locked .gm-maxchip { opacity:0.55; filter:grayscale(0.7); cursor:help; } .gm-maxrow.locked .gm-maxchip:hover { opacity:1; filter:none; background:var(--border2); } .gm-chip-lock { position:absolute; right:-1px; bottom:-1px; height:11px !important; width:auto; } /* 창 최소 높이(550px)를 채울 때 남는 공간은 메뉴 줄 위로 */ .gm-body.padded { display:flex; flex-direction:column; box-sizing:border-box; } .gm-body.padded > * { flex-shrink:0; } .gm-body.padded > .gm-foot { margin-top:auto; } /* 제목줄 버튼(고정·투명도·숨기기·닫기) — 같은 크기 칸에 가운데 정렬 */ .gm-head-btns { display:flex; align-items:center; gap:2px; } .gm-head-btns button { display:flex; align-items:center; justify-content:center; width:26px; height:24px; padding:0; line-height:1; font-size:16px; } .gm-head-btns button img, .gm-head-btns .gm-pin-ic { width:16px; height:16px; object-fit:contain; margin:0; } /* 좋소 키우기 — 아이콘 7종 + 그림 없는 UI 다듬기 */ .gm-title { display:flex; align-items:center; gap:6px; } .gm-logo { height:22px; width:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25)); } .gm-tile-icon img[src$="lock.png"] { height:18px; opacity:0.8; } .gm-medal { height:22px; width:auto; display:block; } .gm-rank-row { align-items:center; border-radius:8px; } .gm-rank-row > span:first-child { width:24px; display:flex; justify-content:center; } .gm-rank-row.top { font-weight:700; padding:6px 4px; } .gm-rank-row.top1 { background:linear-gradient(90deg,rgba(255,200,60,0.22),transparent 80%); } .gm-rank-row.top2 { background:linear-gradient(90deg,rgba(190,200,215,0.22),transparent 80%); } .gm-rank-row.top3 { background:linear-gradient(90deg,rgba(205,130,70,0.2),transparent 80%); } .gm-rank-row.me { box-shadow:inset 3px 0 0 var(--accent); } /* 콤보 배지 */ .gm-combo { display:inline-flex; align-items:center; gap:2px; padding:2px 8px 2px 3px; border-radius:12px; background:linear-gradient(90deg,rgba(255,140,40,0.2),rgba(255,140,40,0.05)); } .gm-combo img { height:18px; width:auto; } .gm-combo b { font-size:13px; color:#ff7a1a; } .gm-combo.hot img { animation:gmFlame 0.5s ease-in-out infinite alternate; } @keyframes gmFlame { to { transform:scale(1.18) rotate(-6deg); } } /* 남은 업무 막대 — 그라데이션 + 흐르는 빛, 보스는 붉게 맥박 */ .gm-bar.hp { height:9px; border-radius:6px; background:rgba(0,0,0,0.12); overflow:hidden; position:relative; } .gm-bar.hp i { background:linear-gradient(90deg,#ff8a50,#e53935); border-radius:6px; transition:width 0.15s ease-out; position:relative; overflow:hidden; display:block; height:100%; } .gm-bar.hp i::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.45) 50%,transparent 70%); background-size:200% 100%; animation:gmBarShine 1.8s linear infinite; } @keyframes gmBarShine { from { background-position:150% 0; } to { background-position:-50% 0; } } .gm-bar.hp.boss i { background:linear-gradient(90deg,#c62828,#7b1fa2); animation:gmBossPulse 0.9s ease-in-out infinite; } @keyframes gmBossPulse { 50% { filter:brightness(1.35); } } /* 단어 칩 — 지금 칠 단어를 크고 또렷하게 */ .gm-keys.words .gm-key { height:30px; border-radius:15px; font-weight:600; } .gm-keys.words .gm-key.now { font-size:16px; padding:0 14px; box-shadow:0 0 0 3px rgba(232,115,42,0.18), 0 3px 8px rgba(232,115,42,0.25); } @keyframes gmKeyIn { from { transform:scale(0.8); opacity:0; } } .gm-keys.words .gm-key.done { text-decoration:line-through; } .gm-wordpop { position:absolute; z-index:25; transform:translateX(-50%); font-weight:800; font-size:16px; color:#2e9e5b; pointer-events:none; animation:gmWordPop 0.5s ease-out forwards; white-space:nowrap; } @keyframes gmWordPop { 0% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-26px) scale(1.25); } } /* 알림 — 카드형 */ /* 푸시(토스트) — 창 맨 위에 불투명하게 떠서 뒤 내용이 비치지 않게(v2.61). 예전에는 반투명에 z-index 가 낮아 이벤트 띠와 글자가 겹쳐 둘 다 읽기 어려웠다 */ .gm-toast { display:flex; align-items:center; gap:8px; left:8px; right:8px; top:42px; z-index:40; border:1px solid var(--border); box-shadow:0 6px 18px rgba(0,0,0,0.3); backdrop-filter:none; padding:9px 12px; border-radius:12px; background:var(--surface); color:var(--text); border:1.5px solid var(--accent); box-shadow:0 8px 20px rgba(0,0,0,0.28); font-size:12.5px; line-height:1.45; animation:gmToastIn 0.25s ease-out; } .gm-toast { position:fixed; box-sizing:border-box; right:auto; } .gm-toast.tight { padding:6px 9px; font-size:11.5px; line-height:1.3; } /* 4.48 — 밑의 버튼을 막지 않게(누름 통과)·조금 작게·살짝 비침, 두 줄까지만 (실제 유저 의견: 상자가 화면을 가려 불편) */ .gm-toast { pointer-events:none; padding:6px 10px; font-size:12px; line-height:1.35; opacity:.96; } .gm-toast > span:last-child { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .gm-toast-ic img { height:18px; } .gm-toast-ic { font-size:20px; flex-shrink:0; } @keyframes gmToastIn { from { transform:translateY(-8px); opacity:0; } } /* 로그인 입력칸·버튼 */ #gmNick, #gmPin { border-radius:12px; padding:11px 14px; font-size:14px; transition:border-color 0.15s, box-shadow 0.15s; } #gmNick:focus, #gmPin:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,115,42,0.18); } #gmStartBtn { border:none; border-radius:12px; padding:12px; font-weight:800; color:#fff; background:linear-gradient(90deg,#ff9a3c,#e8732a); box-shadow:0 4px 12px rgba(232,115,42,0.35); } #gmStartBtn:active { transform:translateY(1px); box-shadow:0 2px 6px rgba(232,115,42,0.35); } /* 휴대폰 조작 버튼 — 게임패드 느낌 */ .gm-st-btns button { border:none; border-radius:14px; color:#fff; font-weight:800; background:linear-gradient(180deg,#5c6bc0,#3949ab); box-shadow:0 4px 0 #283593, 0 6px 12px rgba(0,0,0,0.25); } .gm-st-btns button:active { transform:translateY(3px); box-shadow:0 1px 0 #283593; background:linear-gradient(180deg,#5c6bc0,#3949ab); } @keyframes gmFlip { from { transform:rotateY(180deg) scale(0.7); } to { transform:rotateY(0) scale(1); } } .gm-pull-front .gm-team-stars { font-size:16px; } .gm-rank-title .gm-refs { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--text2); } .gm-rank-title .gm-refs b { color:#e8732a; } .gm-rank-title { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } /* 미니게임 나가기 — 제목 줄 오른쪽 작은 버튼 */ .gm-st-head { gap:8px; } .gm-st-head > span { margin-left:auto; } .gm-exit { flex-shrink:0; padding:3px 9px; border-radius:8px; border:1px solid var(--border); background:var(--input-bg); color:var(--text3); font-size:11px; font-family:inherit; cursor:pointer; } .gm-exit:hover { color:#e53935; border-color:#e53935; } @keyframes gmRaysSpin { to { transform:rotate(360deg); } } @keyframes gmRaysIn { to { opacity:0.9; } } @keyframes gmFlash { 0% { opacity:0.95; } 100% { opacity:0; } } @keyframes gmEnvDrop { from { transform:translateY(-260px) rotate(-12deg) scale(0.6); } } @keyframes gmEnvShake { 25% { transform:translate(-3px,1px) rotate(-3deg); } 75% { transform:translate(3px,-1px) rotate(3deg); } } @keyframes gmEnvBurst { to { transform:scale(2.2); opacity:0; } } @keyframes gmCardIn { to { opacity:1; transform:none; } } @keyframes gmStarIn { to { opacity:1; transform:scale(1); } } @keyframes gmRainbow { to { background-position:0 0, 300% 0; } } @keyframes gmBanner { from { opacity:0; transform:scale(3); } to { opacity:1; transform:scale(1); } } /* 뽑기 흔들림(2.69) — transform 대신 개별 translate 속성으로: 전용 사이트·확장 창은 창을 가운데 두려고 transform:translate(-50%,-50%)를 쓰는데, 흔들 때 그걸 덮어써서 창 전체가 오른쪽 아래로 튀었음. 이름도 키 줄 흔들림(gmShake)과 따로 */ .gm-widget.gm-shake { animation:gmWidgetShake 0.5s; } @keyframes gmWidgetShake { 10%,50%,90% { translate:-6px 2px; } 30%,70% { translate:6px -2px; } } .gm-stat-refs b { color:#e8732a; } @keyframes gmCrewBob { 50% { transform:translateY(-2px); } } @keyframes gmCrewHop { 40% { transform:translateY(-9px); } } @keyframes gmCrewOops { 10%,30%,50%,70% { transform:translateX(-3px) rotate(-5deg); } 20%,40%,60% { transform:translateX(3px) rotate(5deg); } } @keyframes gmOopsIco { 0% { opacity:0; transform:translate(-50%,4px) scale(0.5); } 20% { opacity:1; transform:translate(-50%,-4px) scale(1.2); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-10px); } } /* 고정 안 했을 때 1분 쉬면 거의 안 보이게 — 사용자 투명도 설정보다 우선, 마우스를 올리면 복귀 */ .gm-widget.idle { opacity:0.05 !important; transition:opacity 0.6s; } .gm-widget.idle:hover { opacity:1 !important; } /* 투명도 옵션 — 마우스가 창 밖이면 5% */ .gm-widget.away { opacity:0.05 !important; transition:opacity 0.25s; } @keyframes ocTurn { 50% { box-shadow:0 0 0 3px #ffd54f, 0 0 24px #ffd54f; } } @keyframes ocDrop { from { transform:translateY(-30px) rotate(-14deg) scale(1.2); opacity:0; } } @keyframes ocAtk { to { transform:scale(1.15); } } @keyframes ocSending { to { transform:translateY(-26px) scale(1.06); box-shadow:0 0 0 2px #69f0ae, 0 0 24px rgba(105,240,174,1); } } @keyframes ocMyTurn { 0%,100% { box-shadow:inset 0 0 0 4px #6d4c2f, inset 0 0 0 6px #8d6a46, inset 0 0 30px rgba(0,0,0,0.5), 0 0 0 3px #ffd54f, 0 0 10px rgba(255,213,79,0.6); } 50% { box-shadow:inset 0 0 0 4px #6d4c2f, inset 0 0 0 6px #8d6a46, inset 0 0 30px rgba(0,0,0,0.5), 0 0 0 3px #ffca28, 0 0 22px rgba(255,202,40,0.95); } } @keyframes ocBanner { 0% { opacity:0; transform:translate(-50%,-50%) scale(0.4); } 15% { opacity:1; transform:translate(-50%,-50%) scale(1.12); } 25% { transform:translate(-50%,-50%) scale(1); } 75% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-70%) scale(0.95); } } @keyframes ocEmo { 0% { opacity:0; transform:scale(0.3) translateY(10px); } 12% { opacity:1; transform:scale(1.25); } 22% { transform:scale(1); } 80% { opacity:1; transform:translateY(-6px); } 100% { opacity:0; transform:translateY(-16px); } } @keyframes ocMust { to { transform:scale(1.05); box-shadow:0 0 0 2px #fff, 0 0 26px rgba(255,138,80,1); } } @keyframes gmMultiIn { to { opacity:1; transform:none; } } /* 저장 상태 — 제목 옆 */ .gm-save { flex:0 0 88px; width:88px; min-width:0; margin:0 auto 0 6px; font-size:10px; font-weight:600; color:var(--text4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; } .gm-head .gm-title { min-width:0; overflow:hidden; white-space:nowrap; } .gm-save.off { color:#e57373; } /* 아래 메뉴줄 — 휴대폰에서도 한 줄 */ .gm-foot { flex-wrap:nowrap; } .gm-link { white-space:nowrap; } @media (max-width:440px) { .gm-foot { gap:2px; } .gm-link { font-size:11px; } .gm-link-long { display:none; } } @keyframes bsLast { from { transform:scale(1.35); } } @keyframes bsPop { 0% { opacity:0; transform:scale(0.3); } 20% { opacity:1; transform:scale(1.15); } 60% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.05); } } /* 랭킹 탭 7개 — 두 줄로 */ .gm-rank-tabs { flex-wrap:wrap; } .gm-rank-tabs button { flex:1 1 22%; white-space:nowrap; font-size:11.5px; } @keyframes bbBoom { 0% { background-color:#fff59d; transform:scale(1.15); box-shadow:0 0 14px #ffd54f; } 100% { transform:scale(1); } } @keyframes bbPlaced { 50% { transform:scale(0.985); } } @keyframes bbPts { 0% { opacity:0; transform:translate(-50%,-30%) scale(0.6); } 20% { opacity:1; transform:translate(-50%,-50%) scale(1.15); } 80% { opacity:1; transform:translate(-50%,-70%) scale(1); } 100% { opacity:0; transform:translate(-50%,-90%); } } /* 랭킹 탭 — 게임이 늘어나도 두 줄에서 아이콘을 충분히 크게 표시 */ .gm-rank-tabs { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); } .gm-rank-tabs button { min-width:0; padding:5px 0; display:flex; align-items:center; justify-content:center; } .gm-rank-tabs button .gm-ic { width:24px; height:24px; margin:0; object-fit:contain; } /* 가로로 긴 아이콘(사천성)이 찌그러져 잘려 보이던 것 */ .gm-rank-tabs button:not(.on) .gm-ic { opacity:0.55; filter:grayscale(0.35); } .gm-rank-tabs button:hover .gm-ic { opacity:1; filter:none; } /* v2.52 — 미션 칩 · 미션 화면 · 주간 랭킹 · 근무 시간 · 새로 생긴 것 */ .gm-stat-mis { cursor:pointer; padding:1px 7px; border-radius:10px; background:var(--input-bg); border:1px solid var(--border2); white-space:nowrap; } .gm-stat-mis b { margin-left:2px; } .gm-stat-mis.ready { border-color:#ffb300; background:rgba(255,179,0,0.15); animation:ocAtk 0.7s ease-in-out infinite alternate; } .gm-mis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; } .gm-mis-row { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t t" "r b"; align-items:center; gap:8px 6px; min-width:0; padding:10px; border-radius:10px; background:var(--input-bg); border:1px solid var(--border2); } .gm-mis-row.claimed { opacity:0.8; } .gm-mis-row.ready { border-color:var(--btn-bg); } .gm-mis-t { grid-area:t; min-width:0; display:flex; flex-direction:column; gap:6px; font-size:12.5px; } .gm-mis-h { display:flex; flex-direction:column; gap:3px; } .gm-mis-h b { min-height:2.7em; line-height:1.35; word-break:keep-all; overflow-wrap:anywhere; } .gm-mis-h small { font-weight:700; color:var(--text3); font-variant-numeric:tabular-nums; } .gm-mis-t .gm-bar { height:6px; } .gm-mis-row > small { grid-area:r; color:var(--text3); font-size:11px; white-space:nowrap; } .gm-mis-row .gm-btn { grid-area:b; justify-self:end; width:auto; min-width:56px; margin:0; padding:6px 10px; text-align:center; white-space:nowrap; } .gm-mis-row.bonus { grid-column:1/-1; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t b"; border-style:dashed; } .gm-mis-row.bonus .gm-mis-t { flex-direction:row; align-items:center; } .gm-mis-ok { grid-area:b; justify-self:end; font-size:11px; color:#43a047; font-weight:700; white-space:nowrap; } .gm-rank-scope { display:flex; gap:4px; margin:-2px 0 8px; } .gm-rank-scope button { flex:1; padding:4px 0; border:1px solid var(--border); border-radius:8px; background:none; color:var(--text3); font-family:inherit; font-size:11.5px; cursor:pointer; } .gm-rank-scope button.on { border-color:var(--accent); color:var(--text); font-weight:700; background:var(--accent-bg); } .gm-rank-last { margin-top:8px; padding:6px 10px; border-radius:10px; font-size:11px; color:var(--text2); background:var(--input-bg); word-break:keep-all; } .gm-rank-last small { color:var(--text3); } .gm-rank-last summary { cursor:pointer; } .gm-rank-last summary .gm-ic { vertical-align:-3px; } .gm-rank-last-list { margin-top:7px; border-top:1px solid var(--border2); } .gm-rank-last-list > div { display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid var(--border2); } .gm-rank-last-list > div:last-child { border-bottom:0; } .gm-notes { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); animation:gmFade 0.2s; } .gm-notes-card { width:86%; max-height:80%; overflow:auto; padding:16px 16px 12px; border-radius:16px; background:var(--surface); box-shadow:0 12px 30px rgba(0,0,0,0.45); font-size:12.5px; color:var(--text2); animation:gmSceneIn 0.3s ease-out; } .gm-notes-title { font-size:16px; font-weight:900; color:var(--text); margin-bottom:8px; } .gm-notes-v { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:900; color:var(--accent); margin-top:10px; padding-top:8px; border-top:1px solid var(--border); } .gm-notes-title + .gm-notes-v { margin-top:2px; padding-top:0; border-top:0; } .gm-notes-v small { font-size:10.5px; font-weight:600; color:var(--text3); } .gm-notes-card li b { color:var(--text); font-weight:800; } /* 4.75 항목 속 강조() */ .gm-notes-card ul { margin:4px 0 8px; padding-left:18px; line-height:1.6; word-break:keep-all; } .gm-notes-card li + li { margin-top:3px; } /* 4.42 항목 사이 숨 */ .gm-notes-card ul.gm-notes-sub { margin:2px 0 2px; padding-left:14px; list-style:'– '; font-size:.95em; color:var(--text2); line-height:1.5; } .gm-notes-card ul.gm-notes-sub li + li { margin-top:1px; } .gm-notes-card .gm-btn { margin-top:4px; } /* 근무 외 시간 사고 — 사무실 장면 덮개 */ .gm-arena[class*="db-"]::after, .gm-arena[class*="ev-"]::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit; } /* 배경 그림이 이미 어둡다 — 덮개까지 진하면 아무것도 안 보여서 옅게(v2.60) */ .gm-arena.db-dark::after { background:radial-gradient(circle at 50% 42%, rgba(255,240,180,0.05) 0%, rgba(0,0,0,0.08) 34%, rgba(0,0,0,0.30) 72%); animation:dbFlicker 4s steps(1) infinite; } @keyframes dbFlicker { 0%,100% { opacity:1; } 47% { opacity:1; } 48% { opacity:0.55; } 50% { opacity:1; } 51% { opacity:0.7; } 52% { opacity:1; } } .gm-arena.db-hot::after { background:linear-gradient(180deg, rgba(255,120,40,0.10), rgba(255,60,0,0.04)); animation:dbHeat 2.4s ease-in-out infinite alternate; } @keyframes dbHeat { to { opacity:0.6; } } .gm-arena.db-net { filter:saturate(0.85); } .gm-arena.db-net::after { background:repeating-linear-gradient(0deg, rgba(120,170,255,0.06) 0 2px, transparent 2px 5px); animation:dbStatic 0.25s steps(2) infinite; } @keyframes dbStatic { 50% { transform:translateY(2px); } } .gm-arena.db-tired { filter:grayscale(0.15) brightness(0.98); } .gm-arena.db-dust::after { background-image:radial-gradient(circle,rgba(255,250,235,0.45) 1.5px,transparent 1.7px); background-size:30px 26px; animation:dbDustMove 4s linear infinite; } @keyframes dbDustMove { to { background-position:30px -26px; } } @keyframes slLights { 50% { background-position:8px 0; } } @keyframes slWin { to { box-shadow:0 0 24px #ffd54f, inset 0 0 18px rgba(255,213,79,0.6); } } @keyframes slJack { to { box-shadow:inset 0 0 0 3px #fff176, inset 0 0 0 6px #ff6f00, 0 0 30px #ffd54f; } } /* 미션 — 아래 메뉴 맨 앞(받을 보상이 있으면 빨간 점) */ .gm-link-mis { position:relative; } .gm-link-mis small { font-size:10px; color:var(--text3); } .gm-link-mis.ready::after { content:''; position:absolute; top:-2px; right:-5px; width:7px; height:7px; border-radius:50%; background:#e53935; box-shadow:0 0 0 2px var(--surface); animation:ocAtk 0.7s ease-in-out infinite alternate; } /* 직원 화면 — 사장 달성 시 격려(패시브) 보기 */ .gm-cheer-help { font-size:10.5px; line-height:1.5; color:var(--text3); padding:6px 9px; margin-bottom:6px; border-radius:9px; background:var(--input-bg); word-break:keep-all; } .gm-cheer-help b { color:var(--text2); } .gm-rank-week { margin:-4px 0 8px; padding:5px 9px; border-radius:9px; font-size:10.5px; color:var(--text2); background:rgba(255,179,0,0.12); word-break:keep-all; } .gm-rank-week b { color:#e65100; } .gm-rank-week { display:flex; align-items:center; gap:6px; white-space:nowrap; padding:5px 6px; } .gm-rank-week > .gm-ic { width:15px; height:15px; flex:none; margin:0; object-fit:contain; } .gm-rank-week > span { flex:none; } .gm-rank-week > b { flex:none; font-size:10px; } .gm-rank-week-more { position:relative; margin-left:auto; flex:none; } .gm-rank-week-more summary { list-style:none; cursor:pointer; color:var(--text); font-weight:700; } .gm-rank-week-more summary::-webkit-details-marker { display:none; } .gm-rank-week-more summary::after { content:' ▾'; } .gm-rank-week-more[open] summary::after { content:' ▴'; } .gm-rank-week-more > div { position:absolute; right:0; top:calc(100% + 7px); z-index:20; display:grid; grid-template-columns:repeat(2,max-content); gap:6px 12px; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--surface); box-shadow:0 5px 16px rgba(0,0,0,.2); } .gm-rank-week-more > div span { white-space:nowrap; } /* 게임 버전(제목 옆) · 게임만 업데이트됐을 때 안내 */ .gm-ver { margin-left:5px; font-size:9.5px; font-weight:600; color:var(--text4); } .gm-newver { position:absolute; left:10px; right:10px; top:40px; z-index:55; display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; font-size:12px; color:#fff; background:linear-gradient(90deg,#3949ab,#7e57c2); box-shadow:0 6px 16px rgba(0,0,0,0.35); animation:gmFade 0.25s; } .gm-newver b { color:#ffe082; } .gm-newver-prev { position:static; margin:2px 0 8px; } .gm-newver-t.off { opacity:.7; } .gm-newver-t { white-space:pre-line; word-break:keep-all; } /* 4.76 공지 줄바꿈 */ .gm-newver button { margin-left:auto; padding:4px 10px; border:none; border-radius:8px; background:#fff; color:#3949ab; font-family:inherit; font-weight:800; font-size:11.5px; cursor:pointer; } .gm-newver i { font-style:normal; cursor:pointer; opacity:0.8; padding:0 2px; flex:none; } /* 4.53 긴 공지에도 ✕가 밀려나지 않게 */ .gm-newver-t + i { margin-left:auto; } .gm-newver button { flex:none; } .gm-pow-combo { color:#ff7043; font-size:10.5px; } .gm-stats > span { white-space:nowrap; } .gm-lbl { font-style:normal; } @media (max-width:440px) { .gm-lbl { display:none; } .gm-stats { font-size:11.5px; } } /* 추천서 지급 — 이유 한 줄씩 */ .gm-grant-list { display:flex; flex-direction:column; gap:3px; margin:8px auto 2px; width:min(100%,260px); text-align:left; font-size:12px; } .gm-grant-list div { display:flex; justify-content:space-between; gap:10px; padding:4px 10px; border-radius:8px; background:rgba(0,0,0,0.05); } .gm-grant-list b { color:#e65100; white-space:nowrap; } .gm-grant-note { display:block; color:var(--text3); font-size:10.5px; } .gm-tip { z-index:40; } /* (배지를 묶음 밖으로 뺐으므로 첫 팀원 겹침 보정은 더 필요 없음 — v2.60) */ /* ===== 게임 전용 사이트 (window.GM_STANDALONE) — 작은 창 대신 화면 가운데 세로 한 줄로 크게 ===== */ .gm-widget.gm-standalone { left:50% !important; top:0 !important; right:auto !important; bottom:auto !important; transform:translateX(-50%); width:min(480px,100vw); max-width:100vw; height:100vh; height:100dvh; max-height:none; border-radius:0; border-top:0; border-bottom:0; opacity:1 !important; display:flex; flex-direction:column; box-shadow:0 0 40px rgba(0,0,0,0.12); } .gm-widget.gm-standalone .gm-head { cursor:default; padding:6px 10px; } .gm-widget.gm-standalone .gm-head-btns { display:none; } .gm-widget.gm-standalone .gm-body { flex:1; overflow-y:auto; overscroll-behavior:contain; } .gm-standalone ~ .gm-chip { display:none !important; } @media (max-width:480px) { .gm-widget.gm-standalone { border-left:0; border-right:0; box-shadow:none; } } .gm-widget.gm-standalone:focus-within { border-color:var(--border); } /* 전용 사이트 — 화면 높이를 채울 때 남는 공간은 업무 장면(사무실 그림)이 차지, 메뉴 줄은 맨 아래(위 .padded 규칙) */ /* 휴대폰(터치)에서만 — PC 큰 화면에서 업무 장면이 지나치게 커지던 문제(v2.22) */ @media (pointer:coarse) { .gm-widget.gm-standalone .gm-body.padded > .gm-arena { flex:1 1 auto; min-height:140px; } .gm-widget.gm-standalone .gm-body.padded > .gm-arena .gm-hero { height:clamp(112px,42%,260px); } .gm-widget.gm-standalone .gm-body.padded > .gm-ups { max-height:none; overflow:visible; } /* MAX 줄이 잘려 보이지 않게 스킬은 다 펼침 */ } /* PC — 미니창 크기의 카드를 화면 가운데에(높이는 내용만큼) */ @media (pointer:fine) { .gm-widget.gm-standalone { top:50% !important; transform:translate(-50%,-50%); height:auto; max-height:100vh; max-height:100dvh; border-radius:14px; border:1px solid var(--border); } .gm-widget.gm-standalone .gm-body { flex:0 1 auto; } /* 카드 높이가 내용만큼이라 flex:1이면 정해 둔 높이가 무시돼 미니게임이 작아졌음 */ .gm-widget.gm-standalone .gm-body.padded > .gm-arena { height:clamp(220px,34vh,320px); } .gm-widget.gm-standalone .gm-body.padded > .gm-arena .gm-hero { height:clamp(112px,42%,260px); } } /* 이모지 대신 그림(게임 v2.21) — 알림·격려·결과 카드에 들어간 작은 아이콘 크기 */ .gm-toast-ic img { height:22px; width:auto; display:block; } .gm-cheer img.gm-ic { width:auto; height:15px; border:none; box-shadow:none; border-radius:0; background:none; object-fit:contain; margin:0 2px 0 0; } .gm-notes-title .gm-ic { height:20px; vertical-align:-4px; } .gm-float .gm-ic { height:1.1em; vertical-align:-0.2em; margin-right:2px; } .gm-timer .gm-ic { height:13px; vertical-align:-2px; margin-right:2px; } .gm-save .gm-ic { height:12px; vertical-align:-2px; margin-right:2px; } .gm-newver .gm-ic { height:18px; vertical-align:-4px; } .gm-intro .gm-ic { height:18px; vertical-align:-4px; } /* 메뉴(게임 v2.24) — 제목 줄 오른쪽 [메뉴] → 그 아래로 패널이 펼쳐짐(지도 앱 설정 패널처럼). 업무 화면에서만(.on-play) */ .gm-widget.on-play .gm-save { margin-right:0; } /* 저장 표시는 제목 옆, 메뉴는 오른쪽 끝으로 */ .gm-menu-btn { display:none; position:relative; align-items:center; gap:6px; margin-left:auto; margin-right:6px; padding:3px 10px; border:1px solid var(--border); border-radius:99px; background:var(--surface); color:var(--text2); font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; flex-shrink:0; } .gm-widget.on-play .gm-menu-btn { display:inline-flex; } .gm-widget.gm-standalone .gm-menu-btn { margin-right:0; padding:3px 9px; font-size:11.5px; } .gm-menu-btn:hover, .gm-widget.menu-open .gm-menu-btn { border-color:var(--accent); color:var(--text); } .gm-burger { display:inline-flex; flex-direction:column; justify-content:space-between; width:12px; height:9px; } .gm-burger i { display:block; height:2px; border-radius:2px; background:currentColor; transition:transform 0.25s, opacity 0.2s; } .gm-widget.menu-open .gm-burger i:nth-child(1) { transform:translateY(3.5px) rotate(45deg); } .gm-widget.menu-open .gm-burger i:nth-child(2) { opacity:0; } .gm-widget.menu-open .gm-burger i:nth-child(3) { transform:translateY(-3.5px) rotate(-45deg); } .gm-menu-btn.ready::after { content:''; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:#e53935; box-shadow:0 0 0 2px var(--surface); animation:ocAtk 0.7s ease-in-out infinite alternate; } .gm-menu-pop { position:absolute; right:8px; top:44px; width:min(300px,calc(100% - 16px)); box-sizing:border-box; z-index:60; padding:12px 12px 10px; border-radius:16px; background:var(--surface); border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.3); opacity:0; visibility:hidden; transform:translateY(-8px) scale(0.97); transform-origin:100% 0; transition:opacity 0.16s, transform 0.16s, visibility 0s 0.16s; } .gm-widget.gm-standalone .gm-menu-pop { top:52px; } .gm-widget.menu-open .gm-menu-pop { opacity:1; visibility:visible; transform:none; transition:opacity 0.16s, transform 0.2s cubic-bezier(.2,1.2,.4,1); } .gm-mp-title { font-size:12px; font-weight:800; color:var(--text3); margin:0 2px 8px; } .gm-mp-subtitle { margin-top:12px; padding-top:10px; border-top:1px solid var(--border2); } .gm-mp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 6px; } .gm-mp { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:0; border:none; background:none; color:var(--text2); font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; } .gm-mp small { font-size:10px; color:var(--text3); } .gm-mp-ic { width:42px; height:42px; border-radius:50%; background:var(--input-bg); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; transition:transform 0.12s, border-color 0.12s; } .gm-mp-ic img.gm-ic, .gm-mp-ic img.gm-menu-ic { height:26px; width:auto; margin:0; vertical-align:0; } .gm-mp:hover .gm-mp-ic { transform:translateY(-2px); border-color:var(--accent); } .gm-mp.locked { opacity:0.4; } .gm-mp.gm-link-mis.ready::after { content:''; position:absolute; top:0; right:calc(50% - 22px); width:9px; height:9px; border-radius:50%; background:#e53935; box-shadow:0 0 0 2px var(--surface); } /* 기존 유저 한 번만 — 첫 직원을 김창섭으로 바꿀지(게임 v2.23) */ .gm-swap-faces { display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 10px; } .gm-swap-faces img { width:64px; height:64px; border-radius:50%; object-fit:cover; background:#f1ede8; border:2px solid var(--border); } .gm-swap-faces img:last-child { border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,115,42,0.25); } .gm-swap-faces b { font-size:26px; color:var(--text3); } .gm-swap-txt { font-size:12.5px; line-height:1.55; color:var(--text2); word-break:keep-all; } .gm-swap-txt small { display:block; margin-top:6px; font-size:11px; color:var(--text3); } .gm-swap-btns { display:flex; gap:6px; margin-top:10px; } .gm-swap-btns .gm-btn { flex:1; margin:0; font-size:13px; } /* 게임 안 확인 창(v2.25) — 브라우저 alert/confirm 대신 */ .gm-ask { z-index:80; } .gm-ask-fixed { position:fixed; z-index:100000; } .gm-ask .gm-notes-card { max-width:340px; } .gm-ask-txt { display:flex; gap:8px; align-items:flex-start; font-size:13.5px; font-weight:700; color:var(--text); line-height:1.5; word-break:keep-all; } .gm-ask-txt span { white-space:pre-line; } .gm-ask-txt .gm-ic { height:28px; flex-shrink:0; } .gm-ask-in { display:block; width:100%; box-sizing:border-box; margin-top:10px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:16px; font-family:inherit; letter-spacing:4px; text-align:center; } .gm-btn.primary.danger { background:#e53935; border-color:#e53935; color:#fff; } /* 돌아가기·확인 버튼은 늘 화면 아래에 붙어 있게 — 긴 목록을 끝까지 내리지 않아도 됨(v2.27) */ .gm-body.fixed > .gm-btn:last-child { position:sticky; bottom:-10px; z-index:6; background:var(--surface); box-shadow:0 -8px 12px -6px rgba(0,0,0,0.35); } /* 4.74 페이지형 화면(랭킹·프로필·미션 등)의 돌아가기는 제목줄(스크롤 밖)에 고정 — 본문의 같은 버튼은 숨김(4.72~4.73엔 본문 맨 위에 둬서 스크롤하면 밀렸음) */ .gm-body > .gm-btn[onclick*="gmBack"] { display:none; } .gm-head-back { flex:none; margin-left:6px; padding:3px 9px; border:1.5px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; } .gm-head-back:hover { border-color:var(--accent); } .gm-head-back[hidden] { display:none; } .gm-widget.rank-pop-open .gm-menu-btn { display:none; } .gm-widget.rank-pop-open .gm-head-back { margin-left:auto; } /* 4.72 미션 '모두받기'는 스크롤과 상관없이 늘 화면 아래에서 누를 수 있게 */ .gm-notes-card > .gm-btn:last-child { position:sticky; bottom:-12px; z-index:2; background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); } /* 4.66 어두운 바탕에 글자가 안 보이던 닫기 버튼 */ /* 업무 장면 바로가기 — 미션·랭킹·미니게임(v2.28) */ .gm-quick { position:absolute; top:6px; right:6px; z-index:4; display:flex; gap:5px; } .gm-q { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:50px; padding:5px 6px 4px; border-radius:12px; border:1px solid rgba(255,255,255,0.55); background:rgba(24,22,30,0.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font-family:inherit; font-size:10.5px; font-weight:800; line-height:1.2; white-space:nowrap; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.25); transition:transform 0.1s; } .gm-q:hover { background:rgba(24,22,30,0.78); } .gm-q:active { transform:scale(0.94); } .gm-q .gm-ic, .gm-q .gm-menu-ic { height:24px; width:auto; margin:0; vertical-align:0; } .gm-q.ready::after { content:''; position:absolute; top:3px; right:4px; width:9px; height:9px; border-radius:50%; background:#ff3b30; box-shadow:0 0 0 2px #fff; animation:gmQPing 1.2s ease-in-out infinite; } @keyframes gmQPing { 50% { transform:scale(1.3); } } /* 장면이 낮을 때(미니창, 작은 휴대폰 — JS가 .short) — 업무 이름을 가리지 않게 오른쪽 세로 줄(아이콘만), 업무 카드는 그만큼 비켜 줌(v2.29→v2.41) */ .gm-widget:not(.gm-standalone) .gm-arena, .gm-arena.short { padding-right:42px; } .gm-widget:not(.gm-standalone) .gm-quick, .gm-arena.short .gm-quick { flex-direction:column; top:4px; right:4px; bottom:4px; gap:3px; justify-content:center; } .gm-widget:not(.gm-standalone) .gm-q, .gm-arena.short .gm-q { width:32px; height:30px; min-width:0; padding:0; justify-content:center; border-radius:9px; } .gm-widget:not(.gm-standalone) .gm-q span, .gm-arena.short .gm-q span { display:none; } .gm-widget:not(.gm-standalone) .gm-q .gm-ic, .gm-widget:not(.gm-standalone) .gm-q .gm-menu-ic, .gm-arena.short .gm-q .gm-ic, .gm-arena.short .gm-q .gm-menu-ic { height:20px; } /* 직급표(v2.32) — 얼굴 옆 직급 마크를 누르면 */ #gmAvatar { cursor:pointer; transition:transform 0.12s; } #gmAvatar:hover { transform:scale(1.15); } .gm-ranks-now { margin:-2px 0 8px; font-size:12px; color:var(--text2); } .gm-ranks-now b { color:var(--accent); } .gm-ranks-list { display:flex; flex-direction:column; gap:3px; } .gm-ranks-row { display:grid; grid-template-columns:30px 64px 50px 1fr; align-items:center; gap:6px; padding:4px 6px; border-radius:9px; font-size:12px; } .gm-ranks-row b { color:var(--text); } .gm-ranks-row span { color:var(--text3); font-size:11px; } .gm-ranks-row small { font-size:10.5px; color:var(--text2); word-break:keep-all; } .gm-ranks-row small .gm-ic { height:13px; vertical-align:-2px; margin-right:2px; } .gm-ranks-row.done { opacity:0.55; } .gm-ranks-row.done small .gm-ic, .gm-ranks-row.now small .gm-ic { display:none; } .gm-ranks-row.now { background:color-mix(in srgb, var(--accent) 18%, transparent); outline:1.5px solid var(--accent); } .gm-ranks-badge { height:26px; width:auto; justify-self:center; } .gm-ranks .gm-notes-card { width:calc(100% - 20px); max-height:calc(100% - 12px); box-sizing:border-box; padding:13px 12px 11px; } .gm-ranks .gm-notes-title { margin-bottom:3px; } .gm-ranks .gm-ranks-now { margin:0 0 5px; } .gm-ranks .gm-ranks-list { gap:2px; } .gm-ranks .gm-ranks-row { grid-template-columns:24px 60px 42px minmax(0,1fr); gap:4px; padding:2px 4px; min-height:23px; font-size:11px; line-height:1.2; } .gm-ranks .gm-ranks-row span, .gm-ranks .gm-ranks-row small { font-size:10px; line-height:1.15; } .gm-ranks .gm-ranks-badge { height:21px; } .gm-ranks .gm-notes-card > .gm-btn:last-child { margin-top:7px; padding:8px; } /* 스킬 효율(v2.33) — 다음 레벨에 전체 처리량 +%, 가장 이득인 칸은 추천 */ .gm-tile-eff { font-weight:800; color:#3fb950; } .gm-tile.best { border-color:#3fb950; box-shadow:inset 0 0 0 1px #3fb950; } .gm-tile.best::before { content:'추천'; position:absolute; top:3px; left:3px; z-index:1; padding:1px 5px; border-radius:999px; background:#3fb950; color:#fff; font-size:9px; font-weight:800; line-height:1.3; white-space:nowrap; } .gm-tip .gm-ic { height:14px; vertical-align:-2px; margin-right:2px; } /* 추천대로 한 번에 올리기(v2.35) — 스킬 칸 맨 위 한 줄 */ .gm-autobuy { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 8px; border-radius:9px; border:1.5px solid #3fb950; background:color-mix(in srgb, #3fb950 14%, transparent); color:var(--text); font-family:inherit; font-size:12px; font-weight:800; cursor:pointer; } .gm-autobuy .gm-ic { height:18px; margin:0; } .gm-autobuy small { font-weight:600; color:var(--text2); font-size:10.5px; } .gm-autobuy:disabled { opacity:0.45; cursor:default; } .gm-autobuy:not(:disabled):active { transform:scale(0.98); } /* 4.32 — 추천 버튼 + 작은 '미니게임 일괄' 버튼을 한 줄에 */ .gm-autobuy-row { grid-column:1/-1; display:flex; gap:5px; align-items:stretch; } .gm-autobuy-row .gm-autobuy { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; } /* 4.36 — 한 줄로(작은 추천 글은 넘치면 …) */ .gm-autobuy-row .gm-autobuy small { min-width:0; overflow:hidden; text-overflow:ellipsis; } .gm-minibuy { flex:0 0 auto; display:flex; align-items:center; gap:3px; padding:4px 9px; white-space:nowrap; border-radius:9px; border:1.5px solid #8b6be0; background:color-mix(in srgb, #8b6be0 14%, transparent); color:var(--text); font-family:inherit; font-size:12px; font-weight:800; line-height:1.15; text-align:left; cursor:pointer; } .gm-minibuy .gm-ic { height:18px; margin:0; } .gm-minibuy:disabled { opacity:0.45; cursor:default; } .gm-minibuy:not(:disabled):active { transform:scale(0.97); } /* 업무 키 줄(v2.37) — 맞춘 키는 톡 튀며 사라지고(폭도 줄어 남은 키가 밀려옴), 지나간 키는 남기지 않음 */ .gm-key.gone { pointer-events:none; overflow:hidden; white-space:nowrap; border-color:#3fb950; color:#3fb950; animation:gmKeyGone 0.2s ease-out forwards; } @keyframes gmKeyGone { 0% { opacity:1; transform:scale(1.1); max-width:220px; } 45% { opacity:0.9; transform:scale(1.3) translateY(-5px); } 100% { opacity:0; transform:scale(1.4) translateY(-9px); max-width:0; min-width:0; padding:0; margin:0 -2px; border-width:0; } } /* .gm-key.now 튀어나오는 효과는 v2.44에서 뺌(새 업무마다 거슬림) */ @keyframes gmKeyNow { from { transform:translateY(-1px) scale(0.85); } } /* PIN 보기 버튼 */ .gm-pinwrap { position:relative; display:block; width:100%; min-width:0; } .gm-pinwrap > input { width:100%; padding-right:58px !important; box-sizing:border-box; display:block; } /* inline-block 이면 줄 상자 아래 글꼴 여백이 생겨 [보기] 버튼이 아래로 밀렸음(v2.59) */ .gm-pinwrap:has(> .gm-input) { margin-bottom:8px; } .gm-pinwrap > .gm-input { margin-bottom:0; } /* 입력칸 아래 여백이 래퍼 높이에 들어가 [보기] 버튼이 위로 올라가던 것 */ .gm-pin-eye { position:absolute; right:5px; top:50%; transform:translateY(-50%); padding:4px 8px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text2); font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; } .gm-pin-eye.on { color:var(--accent); border-color:var(--accent); } .gm-ask .gm-pinwrap { margin-top:10px; } .gm-ask .gm-pinwrap > .gm-ask-in { margin-top:0; } /* 단계 표시 — 업무 카드 위(v2.39, 위 숫자 줄이 넘치지 않게) */ .gm-mon-stage { display:inline-flex; align-items:center; gap:3px; margin-bottom:2px; padding:1px 8px; border-radius:999px; background:rgba(0,0,0,0.08); color:#5a5a5a; font-size:10.5px; font-weight:800; white-space:nowrap; } .gm-mon-stage .gm-ic { height:13px; margin:0; vertical-align:0; } .gm-arena.boss .gm-mon-stage { background:rgba(229,57,53,0.14); color:#c62828; } /* 타자 입력칸(v2.40) — 실제 글자는 투명, 처리 안 한 부분만 위에 겹쳐 보여 줌(치는 동안 입력칸 값을 안 건드리려고) */ .gm-typewrap { position:relative; margin-top:6px; } .gm-typewrap .gm-type { margin-top:0; color:transparent; caret-color:transparent; } .gm-typewrap .gm-type::placeholder { color:var(--text3); } .gm-type-show { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 10px; pointer-events:none; font-size:15px; color:var(--text); white-space:pre; overflow:hidden; } .gm-typewrap:focus-within .gm-type-show::after { content:''; display:inline-block; width:1.5px; height:1.1em; margin-left:1px; background:var(--accent, #e8732a); animation:gmCaret 1s steps(1) infinite; } @keyframes gmCaret { 50% { opacity:0; } } @keyframes gmCatIn { from { opacity:0; } } @keyframes gmCatOut { to { opacity:0; transform:scale(1.06); } } @keyframes gmPaw { to { opacity:0.85; transform:rotate(var(--r)) scale(1); } } @keyframes gmCatJump { 0% { transform:translateY(130%) scale(0.5) rotate(-8deg); } 60% { transform:translateY(-10%) scale(1.06) rotate(4deg); } 100% { transform:none; } } @keyframes gmCatPop { from { opacity:0; transform:scale(0.5); } } .gm-arena.cat { box-shadow:inset 0 0 0 3px #ff8fc0, 0 0 16px rgba(255,143,192,0.55); } @keyframes gmCatSit { from { transform:translateY(40%) scale(0.4); opacity:0; } } @keyframes gmCatBob { 50% { transform:rotate(-4deg) scale(1.03,0.97); } } @keyframes gmCatPet { 30% { transform:scale(1.25,0.8); } 60% { transform:scale(0.9,1.15); } } /* 업무 장면 비율 고정(v2.41) — 휴대폰·PC·미니창 어디서든, 창을 늘려도 가로:세로 = 374:144(미니창에서 보던 비율). 예전엔 전용 사이트에서 남는 높이를 업무 장면이 다 차지해(flex:1·clamp) 화면마다 모양이 달랐음 */ .gm-arena, .gm-widget.gm-standalone .gm-body.padded > .gm-arena { aspect-ratio:374/144; height:auto !important; min-height:0 !important; flex:0 0 auto !important; box-sizing:border-box; } .gm-arena .gm-hero, .gm-widget.gm-standalone .gm-body.padded > .gm-arena .gm-hero { height:80%; max-height:300px; } @keyframes svLegend { to { box-shadow:0 0 0 1px #ffb300, 0 0 26px rgba(255,179,0,0.95); } } @keyframes gmDbBlink { 0%,72%,78%,100% { opacity:0; } 74%,76% { opacity:1; } } @keyframes gmDbSwing { to { transform:translateX(12%); } } @keyframes gmDbScan { to { background-position:0 4px; } } @keyframes gmDbDrop { to { background-position:0 100%; } } @keyframes gmDbDust { to { background-position:22px -19px; } } @keyframes gmDbSiren { to { background-position:220% 0; } } /* ===== 업무 장면 - 이벤트 / 사고별 배경 (v2.60) ===== 전용 배경 그림으로 통째로 바꾸고, 움직임(반짝임·사선·먼지)만 ::after 로 덧씌운다. 예전에는 밝은 office-bg 위에 색 덮개만 깔아서 이벤트가 거의 보이지 않았다. */ .gm-arena[class*="ev-"], .gm-arena[class*="db-"] { background-size:cover; background-position:center; } .gm-arena.ev-party { background-image:url("assets/game/ui/office-ev-party.jpg"); } .gm-arena.ev-trip { background-image:url("assets/game/ui/office-ev-trip.jpg"); } .gm-arena.ev-coffee { background-image:url("assets/game/ui/office-ev-coffee.jpg"); } .gm-arena.ev-golden { background-image:url("assets/game/ui/office-ev-golden.jpg"); } .gm-arena.ev-bonus { background-image:url("assets/game/ui/office-ev-bonus.jpg"); } .gm-arena.ev-mudu { background-image:url("assets/game/ui/office-ev-mudu.jpg"); } .gm-arena.db-dark { background-image:url("assets/game/ui/office-db-blackout.jpg"); } .gm-arena.db-hot { background-image:url("assets/game/ui/office-db-aircon.jpg"); } .gm-arena.db-net { background-image:url("assets/game/ui/office-db-network.jpg"); } .gm-arena.db-tired { background-image:url("assets/game/ui/office-db-elevator.jpg"); } .gm-arena.db-dust { background-image:url("assets/game/ui/office-db-cleaning.jpg"); } .gm-arena.db-lock { background-image:url("assets/game/ui/office-db-security.jpg"); } .gm-arena.db-lock::after { background:linear-gradient(100deg,transparent 38%,rgba(255,90,80,0.26) 50%,transparent 62%); background-size:220% 100%; animation:dbLockSweep 2.4s linear infinite; } @keyframes dbLockSweep { to { background-position:220% 0; } } /* 움직임만 — 배경이 이미 분위기를 내므로 색 덮개는 뺐다 */ .gm-arena.ev-party::after { background-image:radial-gradient(circle,rgba(255,215,120,0.55) 2px,transparent 2.2px),radial-gradient(circle,rgba(255,140,190,0.5) 1.6px,transparent 1.8px); background-size:52px 46px,74px 66px; animation:evFall 5s linear infinite; } @keyframes evFall { to { background-position:0 46px,0 66px; } } .gm-arena.ev-trip::after { background-image:repeating-linear-gradient(115deg,rgba(255,255,255,0.14) 0 2px,transparent 2px 30px); animation:evStreak 2.6s linear infinite; } @keyframes evStreak { to { background-position:60px 0; } } .gm-arena.ev-coffee::after { background-image:radial-gradient(ellipse at 30% 110%,rgba(255,240,215,0.3),transparent 55%),radial-gradient(ellipse at 72% 115%,rgba(255,235,205,0.24),transparent 50%); animation:evSteam 4.2s ease-in-out infinite alternate; } @keyframes evSteam { to { transform:translateY(-6px); opacity:0.5; } } .gm-arena.ev-golden::after { background-image:radial-gradient(circle,rgba(255,225,130,0.75) 2px,transparent 2.3px); background-size:46px 40px; animation:evSparkle 1.3s steps(2) infinite; } @keyframes evSparkle { 50% { opacity:0.3; background-position:23px 20px; } } .gm-arena.ev-bonus::after { background-image:repeating-linear-gradient(55deg,rgba(130,230,190,0.16) 0 2px,transparent 2px 24px); animation:evStreak 2s linear infinite; } .gm-arena.ev-mudu::after { background-image:radial-gradient(circle,rgba(255,255,255,0.6) 2.2px,transparent 2.5px),radial-gradient(circle,rgba(200,150,255,0.55) 1.8px,transparent 2px); background-size:60px 52px,84px 74px; animation:evPop 2.2s ease-in-out infinite alternate; } @keyframes evPop { to { background-size:70px 61px,98px 86px; opacity:0.45; } } /* ★6 레전드리(2.64) — 첨부 색(#a4cb45, 밝은 쪽 #c0d989) 초록 그라데이션. 레전드리만 그라데이션, 유니크(★5)는 금색 단색 */ :root { --legend:linear-gradient(110deg,#7fae2f 0%,#a4cb45 30%,#d4ea9a 50%,#a4cb45 70%,#7fae2f 100%); } .gm-legend-txt { background:var(--legend); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; font-weight:900; animation:gmLegendShine 2.4s linear infinite; } @keyframes gmLegendShine { to { background-position:-200% 0; } } /* 싼 MAX 스킬 추천(2.68) — 무한 스킬 '추천'과 구분되게 점선 초록 */ .gm-tile.cheap { border-color:#3fb950; border-style:dashed; } .gm-tile.cheap:not(.best)::before { content:'MAX 추천'; position:absolute; top:3px; left:3px; z-index:1; padding:1px 4px; border-radius:999px; background:#3fb950; color:#fff; font-size:8.5px; font-weight:800; line-height:1.3; white-space:nowrap; } /* 2.73 — 입사권 알림: 메뉴 안 [직원] 빨간 점 (메뉴 버튼 점은 .gm-menu-btn.ready) */ .gm-mp.gm-mp-hire { position:relative; } .gm-mp.gm-mp-hire.ready::after { content:''; position:absolute; top:0; right:calc(50% - 22px); width:9px; height:9px; border-radius:50%; background:#e53935; box-shadow:0 0 0 2px var(--surface); animation:ocAtk 0.7s ease-in-out infinite alternate; } .gm-adm-nick .gm-pf.gm-pf-s { margin:0; vertical-align:0; flex:none; } .gm-adm-nick .gm-pf-del { display:inline-flex; flex:none; padding:0; border:0; background:none; cursor:pointer; line-height:0; } /* 짧은 창에서는 스킬 목록 안에서만 스크롤하고 게임 화면 전체는 넘기지 않는다. */ @media (max-height:620px) { .gm-ups { max-height:clamp(72px,calc(100dvh - 430px),150px); } } @media (min-height:621px) and (max-height:650px) { .gm-widget:not(.gm-standalone) .gm-ups { max-height:calc(100dvh - 460px); } } @media (max-height:620px) { .gm-widget:not(.gm-standalone) .gm-ups { max-height:clamp(56px,calc(100dvh - 456px),150px); } } /* 4.28 — 다크모드에서 레전드리(★6) 글자가 안 보이던 문제: 그라데이션을 글자 모양으로 오려 내는 방식은 다크모드에서 그라데이션이 배경처럼 어둡게 눌려 어두운 초록이 됨 → 다크 테마에서는 밝은 단색 + 빛 번짐으로. color-scheme도 알려 브라우저가 화면을 자동으로 한 번 더 어둡게 만들지 않게 */ :root[data-theme="dark"] { color-scheme:dark; } :root[data-theme="dark"] .gm-legend-txt, :root[data-theme="dark"] .gm-team-stars.g6, :root[data-theme="dark"] .gm-gacha-banner.legend { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#c8f26a !important; -webkit-text-fill-color:#c8f26a; text-shadow:0 0 6px rgba(200,242,106,.55); filter:none; animation:gmLegendGlow 2.4s ease-in-out infinite alternate; } @keyframes gmLegendGlow { from { text-shadow:0 0 3px rgba(200,242,106,.35); } to { text-shadow:0 0 9px rgba(214,250,140,.85); } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gm-legend-txt, :root:not([data-theme="light"]) .gm-team-stars.g6, :root:not([data-theme="light"]) .gm-gacha-banner.legend { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#c8f26a !important; -webkit-text-fill-color:#c8f26a; text-shadow:0 0 6px rgba(200,242,106,.55); filter:none; animation:gmLegendGlow 2.4s ease-in-out infinite alternate; } } @media (prefers-reduced-motion:reduce) { .gm-legend-txt,.gm-team-stars.g6,.gm-gacha-banner.legend { animation:none !important; } } /* 4.33 — 2회차 이상 같은 직원의 격려(환생): 반투명 잔상 + 은은한 빛 */ .gm-cheer-fx.self img { opacity:.55; filter:drop-shadow(0 0 8px rgba(170,200,255,.9)) saturate(.6); } .gm-cheer-fx.self .gm-cheer-say b { font-style:italic; color:#6b7fae; } .gm-ranks-note { margin:0 0 6px; padding:5px 8px; border-radius:8px; background:var(--accent-bg); font-size:11px; line-height:1.45; color:var(--text2); } /* 4.43 */ .gm-ranks-note b { color:var(--text); } /* 4.49 관리 화면 탭 */ .gm-adm-tabs { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 8px; } .gm-adm-tabs button { flex:1 1 auto; min-width:0; padding:7px 4px; border:1.5px solid var(--border); border-radius:9px; background:none; color:var(--text2); font:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; } .gm-adm-tabs button.on { border-color:var(--accent); background:var(--accent-bg); color:var(--text); } .gm-adm-tabs button b { padding:0 5px; border-radius:8px; background:var(--accent); color:#fff; font-size:10px; } .gm-adm-tabs button small { color:var(--text3); } .gm-adm-pane > .gm-adm-sec:first-child { margin-top:0; } .gm-adm-beta { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; } .gm-adm-beta-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 8px; border:1.5px solid #5ce0b6; border-radius:14px; font-size:12px; } .gm-adm-beta-chip.pend { border-style:dashed; } .gm-adm-beta-chip small { color:var(--text3); font-size:10px; } .gm-adm-beta-chip button { border:0; background:none; color:var(--text3); cursor:pointer; font-size:13px; padding:0 4px; } .gm-adm-beta.add { max-height:260px; overflow:auto; } .gm-adm-beta-add { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border:1px solid var(--border); border-radius:12px; background:var(--input-bg); color:var(--text); font:inherit; font-size:12px; cursor:pointer; } .gm-adm-beta-add:hover { border-color:#5ce0b6; } .gm-adm-nick .gm-beta-tag { margin-left:4px; font-size:8px; vertical-align:1px; background:#27365a; color:#5ce0b6; } /* 4.49 직급표 — 보상 게임을 아이콘 한 줄로 */ .gm-ranks-row small { display:block; white-space:normal; overflow:visible; line-height:1.3; } /* 4.58 게임 이름(길면 줄바꿈) */ .gm-ranks-g { height:20px; width:auto; flex:none; } .gm-ranks-row small em { font-style:normal; margin-left:2px; overflow:hidden; text-overflow:ellipsis; } .gm-ranks-row:not(.done):not(.now) .gm-ranks-g { filter:grayscale(.6); opacity:.75; } /* 아직 안 된 직급은 흐리게 */ .gm-ranks-note { text-align:center; } /* 4.52 버스아웃·스도쿠 로비의 랭킹 모드 버튼 */ .gm-btn.rank-mode { display:flex; flex-direction:column; align-items:center; gap:1px; width:100%; margin:8px 0 0; padding:7px 8px; border:1.5px solid #e0a500; border-radius:10px; background:linear-gradient(#fff6d6,#ffe39a); color:#4a3410; font-weight:800; } .gm-btn.rank-mode .gm-ic { height:16px; vertical-align:-3px; margin-right:3px; } .gm-btn.rank-mode small { font-size:10px; font-weight:600; opacity:.85; line-height:1.35; } /* 4.54 음악시간 로비 설정 줄 설명 */ .rh-volume small { display:block; margin-top:2px; font-size:10px; color:var(--text3); } /* 4.56 시스템 알림 상자는 게임 창 맨 아래 안쪽에 작게 */ .gm-toast.bottom { opacity:.93; box-shadow:0 2px 10px rgba(0,0,0,.28); } /* 4.61 관리 화면 서버 요청량 */ .gm-adm-usage { margin:2px 0 8px; padding:7px 9px; border:1.5px solid var(--border); border-radius:10px; font-size:12px; } .gm-adm-usage.off { color:var(--text3); } .gm-adm-usage > div:first-child { display:flex; justify-content:space-between; gap:6px; } .gm-adm-usage > div:first-child span { font-weight:800; } .gm-adm-usage-bar { height:8px; margin:5px 0 4px; border-radius:4px; background:var(--input-bg); overflow:hidden; } .gm-adm-usage-bar i { display:block; height:100%; background:#2f9e5a; } .gm-adm-usage.warm .gm-adm-usage-bar i { background:#e0a020; } .gm-adm-usage.hot { border-color:#e5484d; } .gm-adm-usage.hot .gm-adm-usage-bar i { background:#e5484d; } .gm-adm-usage small { display:block; color:var(--text3); font-size:10.5px; line-height:1.4; word-break:keep-all; } .gm-adm-usage-top { display:flex; flex-wrap:wrap; gap:4px; } .gm-adm-usage-top span { padding:3px 7px; border-radius:8px; background:var(--input-bg); font-size:11px; } .gm-adm-usage-top b { margin-right:4px; } /* 4.63 줄바꿈 정리 — 랭킹 모드 설명 한 줄, 로비 설명 접기(.gm-rules), 규칙 상자 접기(.oc-rules) */ .gm-btn.rank-mode small { display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gm-rules { margin:2px auto 6px; max-width:100%; font-size:12px; color:var(--text3); text-align:center; } .gm-rules > summary { list-style:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gm-rules > summary::-webkit-details-marker { display:none; } .gm-rules > summary i { font-style:normal; font-weight:700; margin-left:4px; padding:0 6px; border-radius:8px; background:var(--input-bg); color:var(--text2); } .gm-rules > summary i::after { content:' ▾'; } .gm-rules[open] > summary i::after { content:' ▴'; } .gm-rules > p { margin:6px 0 0; line-height:1.55; word-break:keep-all; } details.oc-rules > summary { list-style:none; cursor:pointer; color:var(--text2); } details.oc-rules > summary::-webkit-details-marker { display:none; } details.oc-rules > summary::after { content:' ▾'; } details.oc-rules[open] > summary { margin-bottom:3px; } details.oc-rules[open] > summary::after { content:' ▴'; } /* 4.63 — 두 줄이 될 때 마지막 줄에 한두 단어만 떨어지지 않게 줄 길이를 고르게(모든 미니게임 안내·버튼 설명) */ #gmWidget :is(p, small, h3, .gm-st-info, .gm-hint, .oc-rules, .gm-rules) { text-wrap-style:balance; word-break:keep-all; } /* 4.64 강원기 배지(미니게임 제목 줄) */ .gm-st-head > b { position:relative; } .gm-head { position:relative; } .gm-head > .gm-gw-badge { position:absolute; right:10px; top:calc(100% - 7px); z-index:3; display:flex; align-items:center; gap:3px; box-sizing:border-box; height:15px; padding:0 7px 0 4px; border-radius:8px; font-style:normal; font-size:9px; letter-spacing:-.3px; font-weight:800; white-space:nowrap; background:#e8f3ff; color:#1d5fae; border:1px solid #9cc6f2; box-shadow:0 1px 3px rgba(0,0,0,.18); pointer-events:none; } .gm-head > .gm-gw-badge .gm-ic { height:12px; margin:0; vertical-align:0; } .gm-head > .gm-gw-badge > i { font-style:normal; } .gm-head > .gm-gw-badge.on { background:#fff1c9; color:#8a5a00; border-color:#e0b040; } .gm-st-head > b > .gm-gw-badge { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:2px; box-sizing:border-box; overflow:hidden; padding:1px 3px; border-radius:9px; font-style:normal; font-size:9px; letter-spacing:-.4px; font-weight:800; white-space:nowrap; background:#e8f3ff; color:#1d5fae; border:1px solid #9cc6f2; pointer-events:none; } .gm-st-head .gm-gw-badge .gm-ic { height:14px; vertical-align:0; margin:0; } .gm-st-head .gm-gw-badge > i { min-width:0; overflow:hidden; text-overflow:ellipsis; font-style:normal; } .gm-st-head .gm-gw-badge.on { background:#fff1c9; color:#8a5a00; border-color:#e0b040; } .gm-st-head > b:has(> .gm-gw-badge:not(.gm-energy-badge)) > .gm-energy-badge { left:auto; width:16px; } .gm-st-head > b:has(> .gm-gw-badge:not(.gm-energy-badge)) > .gm-energy-badge > i { display:none; } .gm-st-head > b:has(> .gm-energy-badge) > .gm-gw-badge:not(.gm-energy-badge) { right:16px; } .gm-st-head > b:has(> .gm-energy-badge) > .gm-gw-badge:not(.gm-energy-badge) > .gm-ic { display:none; } /* 4.67 미니게임 제목 줄 — 좁은 화면에서 제목·버튼 글자가 세로로 쪼개지지 않게(가운데 기록 글자만 말줄임) */ .gm-st-head > b, .gm-st-head > button { white-space:nowrap; flex-shrink:0; } .gm-st-head > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto; text-align:right; padding:0 4px; } /* 4.68 내 캐릭터 줄 — 직급·이름이 길면 그쪽만 말줄임, 레벨·닉네임은 항상 보이게(사용자: 닉네임이 안 보임) */ .gm-rank-l { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 4px; flex:1 1 auto; overflow:visible; white-space:normal; } .gm-rank-l > b { min-width:0; overflow-wrap:anywhere; flex:0 1 auto; } .gm-rank-l > .gm-rank-lv { font-style:normal; white-space:nowrap; flex-shrink:0; } .gm-rank-l > .gm-nick { min-width:0; overflow-wrap:anywhere; } .gm-char-info > .gm-exp-num { margin-top:2px; text-align:right; line-height:1.2; overflow-wrap:anywhere; } /* 4.69 챔피언 배너 기한 */ .gm-pf-bn-left { margin:4px 0 8px; padding:6px 10px; border-radius:9px; background:var(--input-bg); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gm-pf-bn-left .gm-ic { height:15px; vertical-align:-3px; margin-right:4px; } .gm-pf-banner .gm-pf-bn-exp { display:block; margin-top:2px; font-size:10px; font-weight:700; opacity:.8; white-space:nowrap; } .gm-pf-bn-note { display:block; margin-top:6px; font-size:10.5px; color:var(--text3); text-wrap-style:balance; word-break:keep-all; } .gm-pf-banner:has(.gm-pf-bn-exp) { flex-direction:column; justify-content:center; gap:1px; } .gm-pf-banner:has(.gm-pf-bn-exp) > span { white-space:nowrap; } .gm-pf-banner .gm-pf-bn-exp { margin-top:0; } /* 4.70 GM 전용(받지 않은) 배너는 흐리게·점선 */ .gm-pf-banner.gm-only { opacity:.55; outline:1.5px dashed rgba(255,255,255,.35); outline-offset:-3px; } .gm-pf-banner.gm-only.on { opacity:1; } .gm-pf-sub small { font-weight:400; opacity:.75; margin-left:4px; } /* 5.19 게임 로비 제목줄의 [랭킹] 버튼 */ .gm-st-head .gm-rank-go { width:auto; flex:none; margin:0 6px 0 auto; padding:4px 10px; font-size:11px; font-weight:700; white-space:nowrap; } .gm-st-head .gm-rank-go + .gm-exit { margin-left:0; } .gm-opbar-row + .gm-opbar-row { margin-top:8px; } .gm-opbar-row span { min-width:44px; } .gm-gcard { position:relative; } .gm-gcard-rank { position:absolute; top:4px; right:4px; z-index:2; padding:1px 6px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--text2); font-size:10px; font-weight:800; line-height:1.5; cursor:pointer; } .gm-gcard-rank:hover,.gm-gcard-rank:focus-visible { border-color:var(--accent); color:var(--accent); outline:none; } .gm-body { position:relative; } .gm-rank-pop { position:absolute; inset:0; z-index:45; padding:10px 12px; box-sizing:border-box; overflow:auto; background:var(--surface); color:var(--text); } .gm-rank-pop .gm-rank-title { margin-top:0; } /* 좋소 키우기 — 깜짝 이벤트 띠 / 황금 업무 */ .gm-event { margin:-2px 0 8px; padding:6px 10px; border-radius:8px; font-size:11.5px; font-weight:700; text-align:center; color:#5a3d00; background:linear-gradient(90deg,#ffd76a,#ffb547); animation:gmEventGlow 2s ease-in-out infinite; word-break:keep-all; } /* 좋소 키우기 — 이벤트 띠: 그라데이션이 흐르고 빛이 지나가는 효과 */ .gm-event { position:relative; overflow:hidden; display:flex; align-items:center; gap:7px; padding:5px 10px; text-align:left; color:#4a2c00; background:linear-gradient(90deg,#ffe082,#ffb74d,#ff8a65,#f48fb1,#ffb74d,#ffe082); background-size:300% 100%; animation:gmEvFlow 6s linear infinite; box-shadow:0 2px 10px rgba(255,150,60,0.35); } .gm-event::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:-50%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent); animation:gmEvShine 2.6s ease-in-out infinite; pointer-events:none; } .gm-ev-ic { height:26px; width:auto; flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25)); animation:gmEvBob 1.6s ease-in-out infinite; } /* 글자가 칸보다 길면 잘리는 대신 전광판처럼 흘러간다(v2.59) - 같은 글 두 벌을 절반만큼 밀어 끊김 없이 */ .gm-ev-txt { flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; } .gm-ev-roll { display:flex; max-width:100%; } .gm-ev-roll > i { font-style:normal; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; } .gm-ev-roll > i.dup { display:none; } /* 흐를 때는 칸 폭에 맞추지 않고 글자 길이대로 늘려야 두 벌이 겹치지 않는다 */ .gm-ev-txt.roll .gm-ev-roll { max-width:none; width:max-content; animation:gmEvRoll var(--roll,12s) linear infinite; } .gm-ev-txt.roll .gm-ev-roll > i { flex:none; overflow:visible; padding-right:34px; } .gm-ev-txt.roll .gm-ev-roll > i.dup { display:block; } .gm-event:hover .gm-ev-txt.roll .gm-ev-roll { animation-play-state:paused; } @media (prefers-reduced-motion:reduce) { .gm-ev-txt.roll .gm-ev-roll { animation:none; } } .gm-ev-left { flex-shrink:0; font-size:11px; font-weight:800; padding:2px 7px; border-radius:10px; background:rgba(255,255,255,0.55); } /* 이벤트가 없을 때 — 줄은 그대로 두고(창 높이 고정) 색만 가라앉힘 */ .gm-event:not(.on) { background:var(--input-bg); background-size:auto; animation:none; box-shadow:none; border:1px dashed var(--border); color:var(--text3); } .gm-event:not(.on)::after { display:none; } .gm-event:not(.on) .gm-ev-ic { filter:grayscale(1) opacity(0.45); animation:none; } .gm-event:not(.on) .gm-ev-txt b { color:var(--text2); } .gm-event:not(.on) .gm-ev-left { background:var(--border2); color:var(--text3); font-weight:700; } .gm-event.off { background:linear-gradient(90deg,rgba(63,81,181,0.18),rgba(103,58,183,0.12)); } .gm-ev-emo { font-size:16px; line-height:1; } .gm-event.off { background:linear-gradient(90deg,rgba(229,57,53,0.22),rgba(63,81,181,0.14)); border-color:rgba(229,57,53,0.45); } /* ===== 이벤트 / 사고별 배경 (v2.59) ===== 바탕은 흐르는 그라데이션, 그 위 ::before 에 종류마다 다른 무늬를 한 겹 더 깔아 단색 느낌을 없앤다. 글자/아이콘은 z-index 2 로 올려 무늬와 빛(::after) 위에 오게 한다 */ .gm-event > * { position:relative; z-index:2; } .gm-event::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.9; } .gm-event:not(.on)::before { display:none; } /* 이벤트 띠는 원래의 주황~분홍 흐르는 그라데이션 한 가지를 그대로 쓴다(v2.61 — 사용자 요청). 이벤트 구분은 업무 장면 배경 그림이 맡는다. 사고(디버프) 띠만 종류별로 다르게 둔다 */ .gm-event.on::before { display:none; } /* ===== 근무 외 사고(디버프) - 가라앉은 톤 + 종류별 무늬 ===== */ .gm-event.off { animation:none; box-shadow:none; } .gm-event.off .gm-ev-left { background:rgba(255,255,255,0.4); color:#2b2b2b; } .gm-event.off .gm-ev-txt { color:var(--text); } .gm-event.off .gm-ev-txt b { color:inherit; } .gm-event.off.krabs-restored[data-kind] { background:linear-gradient(100deg,#b8442a,#e8643a 50%,#c98a24); border-color:#ffe08a; color:#fffaf0; box-shadow:inset 0 0 14px #ffe9a077,0 0 10px #ffb24e90; } .gm-event.off.krabs-restored .gm-ev-txt,.gm-event.off.krabs-restored[data-kind="db-blackout"] .gm-ev-txt { color:#fff3cf; } .gm-event.off.krabs-restored .gm-ev-left { background:#f4cf75; color:#5e2511; } .gm-event.off.krabs-restored::after { display:block; background:linear-gradient(100deg,transparent,#fff1a999,transparent); animation:gmEvShine 3s ease-in-out infinite; } /* 정전 - 깜빡임 */ .gm-event.off[data-kind="db-blackout"] { background:linear-gradient(90deg,rgba(26,35,60,0.9),rgba(10,14,28,0.95)); border-color:rgba(120,140,200,0.45); color:#dfe6ff; } .gm-event.off[data-kind="db-blackout"] .gm-ev-txt { color:#f1f4ff; } .gm-event.off[data-kind="db-blackout"]::before { background:rgba(255,255,255,0.08); animation:gmDbBlink 1.7s steps(1) infinite; } /* 냉난방 고장 - 더위와 추위가 번갈아 */ .gm-event.off[data-kind="db-aircon"] { background:linear-gradient(90deg,rgba(229,57,53,0.34),rgba(33,150,243,0.34)); border-color:rgba(229,120,80,0.5); } .gm-event.off[data-kind="db-aircon"]::before { background:linear-gradient(90deg,rgba(255,120,80,0.32),transparent 55%,rgba(100,180,255,0.32)); animation:gmDbSwing 2.8s ease-in-out infinite alternate; } /* 인터넷 먹통 - 가로 주사선 */ .gm-event.off[data-kind="db-network"] { background:linear-gradient(90deg,rgba(63,81,181,0.3),rgba(38,166,154,0.24)); border-color:rgba(90,120,210,0.5); } .gm-event.off[data-kind="db-network"]::before { background-image:repeating-linear-gradient(0deg,rgba(180,210,255,0.2) 0 1px,transparent 1px 4px); animation:gmDbScan 0.4s steps(3) infinite; } /* 엘리베이터 점검 - 세로 줄이 천천히 내려감 */ .gm-event.off[data-kind="db-elevator"] { background:linear-gradient(90deg,rgba(120,124,135,0.34),rgba(80,84,95,0.3)); border-color:rgba(150,155,170,0.5); } .gm-event.off[data-kind="db-elevator"]::before { background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0.18) 0 2px,transparent 2px 16px); animation:gmDbDrop 2.4s linear infinite; } /* 대청소 - 먼지가 떠다님 */ .gm-event.off[data-kind="db-cleaning"] { background:linear-gradient(90deg,rgba(205,185,145,0.36),rgba(160,145,115,0.3)); border-color:rgba(190,170,130,0.55); } .gm-event.off[data-kind="db-cleaning"]::before { background-image:radial-gradient(circle,rgba(255,250,235,0.6) 1.4px,transparent 1.6px); background-size:22px 19px; animation:gmDbDust 3.6s linear infinite; } /* 보안 통제 - 경광등이 쓸고 지나감 */ .gm-event.off[data-kind="db-security"] { background:linear-gradient(90deg,rgba(229,57,53,0.34),rgba(120,30,30,0.28)); border-color:rgba(229,90,80,0.6); } .gm-event.off[data-kind="db-security"]::before { background:linear-gradient(100deg,transparent 35%,rgba(255,90,80,0.55) 50%,transparent 65%); background-size:220% 100%; animation:gmDbSiren 1.8s linear infinite; } .gm-arena.short .gm-cat-sit { right:46px; width:48px; } /* 냥냥 타임(v2.41) — 분홍 덮개 + 발자국 + 뛰어오르는 고양이, 그 뒤 사무실 구석에 앉은 고양이 */ .gm-cat { position:absolute; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; pointer-events:none; border-radius:inherit; background:radial-gradient(circle at 50% 45%, rgba(255,228,240,0.95), rgba(255,170,205,0.9)); animation:gmCatIn 0.35s ease-out; } .gm-cat.out { animation:gmCatOut 0.65s ease-in forwards; } .gm-cat-paws img { position:absolute; width:34px; opacity:0; transform:rotate(var(--r)) scale(0.3); animation:gmPaw 0.45s var(--d) cubic-bezier(.3,1.6,.5,1) forwards; } .gm-cat-jump { position:relative; width:min(60%,250px); filter:drop-shadow(0 10px 14px rgba(160,40,90,0.3)); animation:gmCatJump 0.95s cubic-bezier(.3,1.5,.5,1) both; } .gm-cat-title { position:relative; display:flex; align-items:center; gap:6px; margin-top:4px; font-size:28px; font-weight:900; color:#d6336c; text-shadow:0 2px 0 #fff, 0 0 14px #fff; animation:gmCatPop 0.45s 0.55s both; } .gm-cat-title .gm-ic { height:34px; margin:0; } .gm-cat-desc { position:relative; margin-top:4px; padding:0 16px; text-align:center; font-size:13px; font-weight:800; color:#8a2050; line-height:1.5; animation:gmCatPop 0.45s 0.75s both; } .gm-cat-desc small { display:block; font-weight:600; opacity:0.8; } .gm-cat-sit { position:absolute; right:8px; bottom:6px; z-index:5; width:66px; cursor:pointer; transform-origin:50% 100%; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.3)); animation:gmCatSit 0.5s ease-out, gmCatBob 1.8s 0.5s ease-in-out infinite; } .gm-cat-sit.pet { animation:gmCatPet 0.5s ease-out, gmCatBob 1.8s 0.5s ease-in-out infinite; } .gm-widget:not(.gm-standalone) .gm-cat-sit { width:44px; right:46px; } .gm-cat-sit.done { cursor:default; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.3)) saturate(0.9); } /* Energy drink effect */ .gm-energy-burst { position:absolute; inset:0; z-index:69; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; pointer-events:none; border-radius:inherit; color:#fff; background:radial-gradient(circle,rgba(26,196,231,.72),rgba(3,91,154,.5) 50%,rgba(5,46,103,.35)); animation:energyBurst 2s ease-out both; } .gm-energy-splash { position:absolute; width:min(80%,300px); aspect-ratio:1; border:5px solid rgba(218,255,255,.8); border-radius:50%; box-shadow:0 0 0 16px rgba(159,245,255,.25),0 0 40px #72f3ff,inset 0 0 35px #6fe9ff; animation:energySplash .7s ease-out both; } .gm-energy-burst::before,.gm-energy-burst::after { content:''; position:absolute; width:18px; height:18px; border:3px solid #d9ffff; border-radius:50%; box-shadow:65px -65px 0 -3px #b3f7ff,-70px 45px 0 -4px #fff,90px 35px 0 -5px #b3f7ff,-55px -75px 0 -5px #fff; animation:energySplash .8s ease-out both; } .gm-energy-burst::after { transform:rotate(55deg); animation-delay:.1s; } .gm-energy-can { position:relative; animation:energyCan .55s cubic-bezier(.2,1.5,.4,1) both; filter:drop-shadow(0 8px 12px #005a8e); } .gm-energy-can .gm-ic { width:100px; height:100px; object-fit:contain; margin:0; } .gm-energy-burst b,.gm-energy-burst span { position:relative; text-align:center; text-shadow:0 2px 5px #005080; } .gm-energy-burst b { font-size:26px; font-weight:900; } .gm-energy-burst span { padding:3px 12px; border-radius:20px; background:rgba(0,72,122,.65); font-size:13px; font-weight:800; } @keyframes energyBurst { 0% { opacity:0; } 10%,75% { opacity:1; } 100% { opacity:0; } } @keyframes energySplash { from { opacity:0; transform:scale(.2); } 40% { opacity:1; } to { opacity:0; transform:scale(1.5); } } @keyframes energyCan { from { transform:translateY(80px) rotate(-25deg) scale(.5); } to { transform:translateY(0) rotate(8deg) scale(1); } } @media (prefers-reduced-motion:reduce) { .gm-energy-burst,.gm-energy-splash,.gm-energy-burst::before,.gm-energy-burst::after,.gm-energy-can { animation:none; } } /* 비키니 시티 친구들의 발동형 격려 */ .gm-ac-fx { position:absolute; inset:0; z-index:76; display:flex; align-items:center; justify-content:center; pointer-events:none; overflow:hidden; border-radius:inherit; color:#f2fbff; animation:gmAcLife 3.5s ease-out both; } .gm-ac-flash { position:absolute; inset:0; background:#f4fbff; animation:gmAcFlash .55s ease-out both; } .gm-ac-vig { position:absolute; inset:0; background:radial-gradient(circle,#bfe8ff40 0,#1c2f5acc 55%,#070d1ef2 100%); animation:gmAcVig 3.5s ease-out both; } .gm-ac-rays { position:absolute; width:190%; aspect-ratio:1; background:repeating-conic-gradient(#e9f7ff99 0deg 6deg,transparent 6deg 18deg); -webkit-mask:radial-gradient(circle,#000 8%,transparent 62%); mask:radial-gradient(circle,#000 8%,transparent 62%); animation:gmAcSpin 14s linear infinite,gmAcGrow .6s ease-out both; } .gm-ac-rays.r2 { background:repeating-conic-gradient(#8fd0ff66 0deg 4deg,transparent 4deg 30deg); animation:gmAcSpin 20s linear infinite reverse,gmAcGrow .8s ease-out both; } .gm-ac-shock { position:absolute; width:40px; aspect-ratio:1; border-radius:50%; border:3px solid #e6f7ff; box-shadow:0 0 22px #7cc8ff,inset 0 0 18px #dff3ff; opacity:0; animation:gmAcShock 1.5s ease-out .1s both; } .gm-ac-shock.s2 { animation-delay:.35s; border-color:#9fd8ff; } .gm-ac-shock.s3 { animation-delay:.6s; border-color:#ffffff; } .gm-ac-sparks { position:absolute; left:50%; top:50%; width:0; height:0; } .gm-ac-sparks i { position:absolute; left:0; top:0; width:calc(var(--z)*3); height:calc(var(--z)*3); margin:calc(var(--z)*-1.5); background:url("assets/game/ui/cutscene/ac-star.webp") center/contain no-repeat; filter:drop-shadow(0 0 6px #7cc8ff); opacity:0; animation:gmAcSpark 1.6s ease-out var(--t) both; } .gm-ac-burst { position:absolute; width:min(88%,360px); aspect-ratio:1; object-fit:contain; opacity:0; animation:gmAcBurstImg 1.4s ease-out .05s both; } .gm-ac-band { position:absolute; left:-5%; right:-5%; top:50%; height:46px; margin-top:-23px; background:linear-gradient(90deg,transparent,#ffffff4d 18%,#ffffff8c 50%,#ffffff4d 82%,transparent); border-top:1px solid #ffffffb3; border-bottom:1px solid #ffffffb3; box-shadow:0 0 24px #9fd8ffaa; transform-origin:center; animation:gmAcBand 3.5s cubic-bezier(.2,.9,.25,1) both; } .gm-ac-icons { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 8%; } .gm-ac-icons img { width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 2px 4px #0a1c3cb3); opacity:0; animation:gmAcIcon .5s cubic-bezier(.2,1.4,.4,1) calc(.35s + var(--i)*.08s) both; } .gm-ac-title { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; margin-top:-146px; text-shadow:0 2px 6px #0a1c3c,0 0 20px #9fd8ff; animation:gmAcTitle 3.5s cubic-bezier(.2,1.3,.4,1) both; } .gm-ac-title b { font-size:clamp(34px,9vw,54px); font-weight:900; letter-spacing:1px; background:linear-gradient(180deg,#fff,#d6efff 60%,#9fd8ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 3px 0 #1a3a6b) drop-shadow(0 0 14px #9fd8ff); } .gm-ac-title span { padding:4px 14px; border:1px solid #bfe6ff; border-radius:20px; background:#12305acc; font-size:13px; font-weight:900; text-shadow:none; } @keyframes gmAcBurstImg { 0% { opacity:0; transform:scale(.2); } 25% { opacity:1; } 100% { opacity:0; transform:scale(1.7); } } @keyframes gmAcLife { 0%,85% { opacity:1; } 100% { opacity:0; } } @keyframes gmAcFlash { 0% { opacity:1; } 100% { opacity:0; } } @keyframes gmAcVig { 0% { opacity:0; } 12%,80% { opacity:1; } 100% { opacity:0; } } @keyframes gmAcSpin { to { transform:rotate(360deg); } } @keyframes gmAcGrow { from { scale:.2; opacity:0; } to { scale:1; opacity:1; } } @keyframes gmAcShock { 0% { transform:scale(.3); opacity:.95; } 100% { transform:scale(11); opacity:0; } } @keyframes gmAcSpark { 0% { transform:rotate(var(--a)) translateX(0) scale(.4); opacity:0; } 15% { opacity:1; } 100% { transform:rotate(var(--a)) translateX(var(--r)) scale(1); opacity:0; } } @keyframes gmAcBand { 0% { transform:scaleY(0) scaleX(.3); opacity:0; } 14% { transform:scaleY(1.15) scaleX(1); opacity:1; } 22%,85% { transform:scaleY(1) scaleX(1); opacity:1; } 100% { transform:scaleY(.1) scaleX(1.1); opacity:0; } } @keyframes gmAcIcon { 0% { transform:translateY(24px) scale(.3); opacity:0; } 100% { transform:none; opacity:1; } } @keyframes gmAcTitle { 0% { transform:scale(.3); opacity:0; } 14% { transform:scale(1.18); opacity:1; } 22%,85% { transform:scale(1); opacity:1; } 100% { transform:scale(1.05); opacity:0; } } @media (prefers-reduced-motion:reduce) { .gm-ac-fx,.gm-ac-vig,.gm-ac-rays,.gm-ac-flash,.gm-ac-shock,.gm-ac-burst,.gm-ac-sparks i,.gm-ac-band,.gm-ac-icons img,.gm-ac-title { animation:none; } .gm-ac-flash,.gm-ac-shock,.gm-ac-sparks { display:none; } .gm-ac-icons img { opacity:1; } } .gm-sponge-burst { --splash:#45d8ec; --deep:#08769b; --spd:.9s; position:absolute; inset:0; z-index:69; display:flex; align-items:center; justify-content:center; gap:2%; overflow:hidden; pointer-events:none; border-radius:inherit; background:radial-gradient(circle,rgba(255,255,255,.8),rgba(69,216,236,.75) 47%,rgba(8,118,155,.65)); background:radial-gradient(circle,rgba(255,255,255,.8),color-mix(in srgb,var(--splash) 75%,transparent) 47%,color-mix(in srgb,var(--deep) 65%,transparent)); animation:gmSpongeBurst 2.7s ease-out both; } .gm-sponge-burst.patrick { --splash:#ff9db3; --deep:#e45478; --spd:2.6s; animation:gmSpongeBurst 2.7s ease-out both,gmThud .4s ease-out 1.05s both; } .gm-sponge-burst.sandy { --splash:#f9c56a; --deep:#bb5c2a; --spd:.4s; } .gm-sponge-burst.krabs { --splash:#ffd557; --deep:#ad322b; --spd:1.5s; } .gm-cheer .gm-all-tag { flex:0 0 auto; padding:2px 7px; border:1px solid #fff3a3; border-radius:12px; background:linear-gradient(90deg,#ffe88b,#de9c1c); color:#542500; font-size:10px; font-weight:900; } .gm-cheer .gm-bikini-tag { flex:0 0 auto; overflow:visible; padding:2px 7px; border-radius:12px; background:linear-gradient(90deg,#ffdf54,#ff9b52); color:#6d2c06; font-size:10px; font-weight:900; } .gm-sponge-bubbles { position:absolute; width:min(74%,280px); aspect-ratio:1; border:5px solid rgba(255,255,255,.85); border-radius:50%; box-shadow:0 0 0 18px rgba(255,255,255,.22),0 0 42px #fff,inset 0 0 38px rgba(255,255,255,.7); animation:gmSpongeSplash .9s ease-out both; } .gm-sponge-bubbles::before,.gm-sponge-bubbles::after { content:''; position:absolute; width:18px; height:18px; border:3px solid white; border-radius:50%; box-shadow:65px -48px 0 -3px white,-65px 68px 0 -4px white,110px 65px 0 -4px white,-38px -80px 0 -4px white; } .gm-sponge-bubbles::after { inset:38% auto auto 30%; transform:rotate(80deg); } .gm-cut-bg { position:absolute; inset:0; background:url("assets/game/ui/cutscene/cutin-bg-speed.webp") 0% center/auto 100% no-repeat; opacity:.6; mix-blend-mode:soft-light; animation:gmCutBg var(--spd) ease-in-out infinite alternate; } .gm-cut-sparks i { position:absolute; width:var(--z); height:var(--z); background:url("assets/game/ui/cutscene/ac-star.webp") center/contain no-repeat; opacity:0; animation:gmCutTwinkle .9s ease-in-out var(--t) 2 both; } .gm-sponge-burst-char { position:relative; flex:0 1 58%; min-width:0; max-height:88%; object-fit:contain; filter:drop-shadow(0 7px 8px rgba(0,51,80,.45)); animation:gmSpongePop .6s cubic-bezier(.2,1.5,.4,1) both; } .gm-sponge-burst.sponge .gm-sponge-burst-char { animation:gmSpongeLeap .85s cubic-bezier(.2,1.3,.4,1) both; } .gm-sponge-burst.patrick .gm-sponge-burst-char { animation:gmPatrickSlow 1.15s cubic-bezier(.3,.6,.35,1) both; } .gm-sponge-burst.sandy .gm-sponge-burst-char { animation:gmSandyDash .42s cubic-bezier(.1,.9,.2,1) both; } .gm-sponge-burst.krabs .gm-sponge-burst-char { animation:gmKrabsRise .8s cubic-bezier(.2,1.2,.4,1) both; } .gm-sponge-burst-label { position:relative; flex:0 1 40%; max-width:42%; display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; text-align:center; text-shadow:0 2px 4px var(--deep); animation:gmSpongePop .65s cubic-bezier(.2,1.4,.4,1) both; } .gm-sponge-burst-label .gm-ic { width:55px; height:55px; object-fit:contain; margin:0; } .gm-sponge-burst-label b { font-size:clamp(17px,4vw,25px); font-weight:900; } .gm-sponge-burst-label span { padding:4px 9px; border-radius:16px; background:rgba(0,58,78,.68); font-size:12px; font-weight:800; } @keyframes gmSpongeBurst { 0% { opacity:0; } 10%,78% { opacity:1; } 100% { opacity:0; } } @keyframes gmSpongeSplash { from { opacity:0; transform:scale(.2); } 35% { opacity:1; } to { opacity:0; transform:scale(1.5); } } @keyframes gmSpongePop { from { opacity:0; transform:translateY(60px) scale(.6) rotate(-10deg); } to { opacity:1; transform:translateY(0) scale(1) rotate(0); } } @keyframes gmSpongeLeap { 0% { opacity:0; transform:translateY(90px) scale(.55) rotate(-18deg); } 60% { opacity:1; transform:translateY(-18px) scale(1.15) rotate(10deg); } 100% { transform:translateY(0) scale(1) rotate(0); } } @keyframes gmPatrickPunch { 0% { opacity:0; transform:translateX(-100px) scale(.6) rotate(-25deg); } 65% { opacity:1; transform:translateX(18px) scale(1.18) rotate(12deg); } 100% { transform:translateX(0) scale(1) rotate(0); } } @keyframes gmSandyDash { 0% { opacity:0; transform:translateX(220px) skewX(-14deg) scale(.8); } 70% { opacity:1; transform:translateX(-10px) skewX(4deg) scale(1.05); } 100% { transform:none; } } @keyframes gmPatrickSlow { 0% { opacity:0; transform:translateX(-90px) scale(.92); } 70% { opacity:1; transform:translateX(0) scale(1); } 84% { transform:translateY(0) scale(1); } 92% { transform:translateY(10px) scale(1.05,.95); } 100% { transform:none; } } @keyframes gmKrabsRise { 0% { opacity:0; transform:translateY(140px); } 70% { opacity:1; transform:translateY(-8px); } 100% { transform:none; } } @keyframes gmThud { 0%,100% { translate:0 0; } 25% { translate:0 6px; } 55% { translate:0 -3px; } } @keyframes gmCutBg { to { background-position:100% center; } } @keyframes gmCutTwinkle { 0%,100% { opacity:0; transform:scale(.3) rotate(0); } 50% { opacity:1; transform:scale(1) rotate(35deg); } } @keyframes gmKrabsCoin { 0% { opacity:0; transform:translateY(80px) scale(.5) rotate(-20deg); } 50% { opacity:1; transform:translateY(-12px) scale(1.15) rotate(12deg); } 75% { transform:translateY(0) scale(.95) rotate(-5deg); } 100% { transform:none; } } @media (prefers-reduced-motion:reduce) { .gm-sponge-burst,.gm-cut-bg,.gm-cut-sparks i,.gm-sponge-bubbles,.gm-sponge-burst-char,.gm-sponge-burst-label,.gm-sponge-burst.sponge .gm-sponge-burst-char,.gm-sponge-burst.patrick .gm-sponge-burst-char,.gm-sponge-burst.sandy .gm-sponge-burst-char,.gm-sponge-burst.krabs .gm-sponge-burst-char { animation:none; } } .gm-rel-list { display:flex; flex-direction:column; gap:6px; margin:6px 0 10px; } .gm-rel-row { display:flex; align-items:center; gap:10px; padding:6px 10px; border:1.5px solid var(--border2); border-radius:12px; background:var(--surface); } .gm-rel-row img { width:38px; height:38px; border-radius:50%; object-fit:contain; background:var(--input-bg); flex:none; } .gm-rel-row span { flex:1; min-width:0; display:flex; flex-direction:column; } .gm-rel-row b { font-size:13px; } .gm-rel-row small { color:var(--text3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gm-rel-row em { font-style:normal; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; background:var(--input-bg); color:var(--text3); flex:none; } .gm-rel-row.done { border-color:#5ce0b6; } .gm-rel-row.done em { background:#d9f7ec; color:#16805f; } .gm-rel-row.next { border-color:var(--accent); border-style:dashed; } .gm-rel-row.next em { background:var(--accent-bg); color:var(--accent); } .gm-rel-row.wait { opacity:.65; } /* 6.41 비키니 시티 합동 격려 컷신 — 네 친구가 차례로 컷인 → 한가운데로 모여 부딪히며 하나로 융합 */ .gm-bikini-fx { position:absolute; inset:0; z-index:75; overflow:hidden; pointer-events:none; border-radius:inherit; background:#06223a; color:#fff; animation:gmBkLife 4.9s linear both; } .gm-bk-slide { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2%; opacity:0; background:radial-gradient(circle,#fffffff0,color-mix(in srgb,var(--c) 80%,#fff) 45%,var(--d) 100%); animation:gmBkSlide .56s ease-out calc(.1s + var(--i)*.55s) both; } .gm-bk-slide .gm-cut-bg { animation:gmCutBg var(--sp) ease-in-out infinite alternate; } .gm-bk-slide img { position:relative; flex:0 1 58%; min-width:0; max-height:88%; object-fit:contain; filter:drop-shadow(0 7px 8px rgba(0,30,60,.45)); animation:gmBkChar .56s cubic-bezier(.15,1,.3,1) calc(.1s + var(--i)*.55s) both; } .gm-bk-slide b { position:relative; flex:0 1 38%; font-size:clamp(17px,4.6vw,26px); font-weight:900; text-align:center; text-shadow:0 2px 4px var(--d); animation:gmBkChar .56s cubic-bezier(.15,1,.3,1) calc(.2s + var(--i)*.55s) both; } .gm-bk-slide b small { display:block; margin-top:3px; font-size:12px; font-weight:800; } .gm-bk-fin { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; background:radial-gradient(circle,#ffffff 0,#7fe3f2 32%,#0a6f93 75%,#06384f 100%); animation:gmBkFin 2.6s ease-out 2.35s both; } .gm-bk-fin::before { content:''; position:absolute; inset:-30%; background:repeating-conic-gradient(#ffffff66 0deg 7deg,transparent 7deg 20deg); -webkit-mask:radial-gradient(circle,#000 6%,transparent 62%); mask:radial-gradient(circle,#000 6%,transparent 62%); animation:gmAcSpin 12s linear infinite; } .gm-bk-fin .gm-ac-burst { animation-delay:2.95s; } .gm-bk-chars { position:absolute; inset:0; } .gm-bk-chars img { position:absolute; left:50%; top:40%; width:46%; max-width:200px; aspect-ratio:3/2; object-fit:contain; transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))); filter:drop-shadow(0 6px 8px rgba(0,30,60,.5)); opacity:0; animation:gmBkMerge 1.3s cubic-bezier(.3,.9,.3,1) 2.4s both; } .gm-bk-chars img:nth-child(2) { animation-delay:2.55s; } .gm-bk-chars img:nth-child(3) { animation-delay:2.7s; } .gm-bk-chars img:nth-child(4) { animation-delay:2.85s; } .gm-bk-title { position:absolute; left:0; right:0; bottom:9%; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; animation:gmBkTitle 2.6s cubic-bezier(.2,1.3,.4,1) 2.35s both; } .gm-bk-title b { font-size:clamp(22px,6vw,34px); font-weight:900; background:linear-gradient(180deg,#fff,#c9f4ff 60%,#6fd6ee); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 0 #08536e) drop-shadow(0 0 12px #bff3ff); } .gm-bk-title span { padding:4px 14px; border:1px solid #c9f4ff; border-radius:20px; background:#08536ecc; font-size:13px; font-weight:900; } @keyframes gmBkLife { 0%,92% { opacity:1; } 100% { opacity:0; } } @keyframes gmBkSlide { 0% { opacity:0; } 14% { opacity:1; } 82% { opacity:1; } 100% { opacity:0; } } @keyframes gmBkChar { 0% { opacity:0; transform:translateX(var(--sx)) translateY(var(--sy)) scale(.85); } 100% { opacity:1; transform:none; } } @keyframes gmBkFin { 0% { opacity:0; } 6% { opacity:1; } 100% { opacity:1; } } @keyframes gmBkMerge { 0% { opacity:0; transform:translate(calc(-50% + var(--sx)*3),calc(-50% + var(--sy)*3)) scale(.7); } 35% { opacity:1; } 62% { transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) scale(1); } 74% { transform:translate(calc(-50% + var(--mx)*.3),calc(-50% + var(--my)*.3)) scale(1.2); } 100% { opacity:1; transform:translate(calc(-50% + var(--mx)*.85),calc(-50% + var(--my)*.85)) scale(1.04); } } @keyframes gmBkTitle { 0% { opacity:0; transform:translateY(24px) scale(.6); } 22% { opacity:1; transform:scale(1.12); } 34%,100% { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { .gm-bikini-fx,.gm-bk-slide,.gm-bk-slide img,.gm-bk-slide b,.gm-bk-fin,.gm-bk-fin::before,.gm-bk-chars img,.gm-bk-title { animation:none; } .gm-bk-slide { display:none; } .gm-bk-fin,.gm-bk-chars img { opacity:1; } } /* 만렙 스킬 — 맨 아래 한 줄에 작은 아이콘으로 */ /* 좋소 키우기 — 게임 관리(슈퍼 관리자) */ .gm-adm-title { font-weight:800; font-size:13px; margin:2px 0 8px; display:flex; align-items:center; gap:5px; } .gm-adm-title small { font-weight:600; font-size:10px; color:#fff; background:var(--accent); padding:2px 6px; border-radius:99px; } .gm-adm-list { border:1px solid var(--border); border-radius:10px; overflow:hidden; max-height:300px; overflow-y:auto; } /* 2.86 — 체크 칸 추가, 버튼 4개(24px×4+간격)가 칸을 넘쳐 어긋나던 것 → 버튼 칸을 고정 폭으로 */ .gm-adm-head, .gm-adm-row { display:grid; grid-template-columns:18px minmax(0,1fr) minmax(0,1.35fr) 30px 108px; gap:4px; align-items:center; padding:6px 8px; font-size:11px; } .gm-adm-head { background:var(--input-bg); color:var(--text3); font-weight:700; font-size:10px; position:sticky; top:0; } .gm-adm-row { border-top:1px solid var(--border2); } .gm-adm-row:hover { background:var(--input-bg); } .gm-adm-row b { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gm-adm-row span { color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gm-adm-acts { display:grid; grid-template-columns:repeat(4,24px); gap:3px; justify-content:end; } .gm-adm-acts button { display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--surface); border-radius:6px; width:24px; height:24px; font-size:11px; cursor:pointer; color:var(--text2); font-family:inherit; padding:0; } /* 아이콘마다 가로세로 비율이 달라(38x48 / 48x36 / 118x128) 높이만 맞추면 폭이 제각각이 된다 — 같은 크기 상자에 넣고 비율은 유지한 채 맞춘다(v2.60) */ .gm-adm-acts button img { width:15px; height:15px; object-fit:contain; display:block; margin:0; opacity:0.85; } .gm-adm-acts button:hover img { opacity:1; } .gm-adm-acts button:hover { border-color:var(--accent); color:var(--text); } .gm-adm-acts button.danger:hover { border-color:#d93025; color:#d93025; } .gm-adm-note { font-size:10px; color:var(--text3); margin:5px 2px 0; } .gm-adm-sec { font-size:11px; font-weight:800; color:var(--text2); margin:10px 2px 5px; } .gm-adm-sec small { font-weight:600; font-size:10px; color:var(--text3); margin-left:4px; } .gm-adm-evnow { display:flex; align-items:center; gap:7px; padding:6px 9px; margin-bottom:5px; border-radius:9px; background:linear-gradient(90deg,#fff2cf,#ffe3a0); border:1px solid #f0b429; font-size:11px; color:#4a3410; } .gm-adm-evnow img { height:20px; width:auto; } .gm-adm-evnow span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gm-adm-evnow em { font-style:normal; font-weight:800; color:#8a6400; flex:none; } .gm-adm-evnow.off { background:var(--input-bg); border:1px dashed var(--border); color:var(--text3); justify-content:center; } .gm-adm-evs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; } .gm-adm-evs button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px 5px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text2); font-family:inherit; font-size:10px; font-weight:700; cursor:pointer; min-width:0; } .gm-adm-evs button:hover { border-color:var(--accent); color:var(--text); } .gm-adm-evs button img { height:20px; width:auto; } .gm-adm-evs button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .gm-adm-evs button.off { min-height:46px; justify-content:center; color:var(--text3); grid-column:1/-1; } .gm-adm-evs button.off:hover { border-color:#d93025; color:#d93025; } .gm-adm-catlog { max-height:150px; overflow-y:auto; margin-top:6px; font-size:12px; } .gm-adm-catlog > div { display:flex; gap:8px; align-items:baseline; padding:2px 4px; border-bottom:1px solid var(--border2); } .gm-adm-catlog em { font-style:normal; color:var(--text3); } .gm-adm-catlog small { margin-left:auto; color:var(--text3); } .gm-adm-btns { display:flex; gap:5px; margin:8px 0 0; } .gm-adm-btns .gm-btn { flex:1; margin:0; } .gm-suspect-list { display:flex; flex-direction:column; gap:5px; margin-top:7px; } .gm-suspect-row { padding:8px 10px; border:1px solid var(--border); border-radius:9px; background:var(--input-bg); text-align:left; } .gm-suspect-head { display:flex; flex-wrap:wrap; align-items:center; gap:3px 6px; min-width:0; font-size:11px; } .gm-suspect-head b { color:var(--text); overflow-wrap:anywhere; } .gm-suspect-head time { margin-left:auto; color:var(--text3); font-size:10px; white-space:nowrap; } .gm-suspect-kind { padding:1px 6px; border:1px solid var(--border); border-radius:10px; color:var(--text2); font-size:10px; font-weight:700; } .gm-suspect-reason { margin-top:4px; color:var(--text2); font-size:11px; line-height:1.4; overflow-wrap:anywhere; } .gm-suspect-pages { display:flex; justify-content:center; align-items:center; gap:10px; margin:8px 0 2px; color:var(--text2); font-size:11px; font-weight:700; } .gm-suspect-pages button { display:grid; place-items:center; width:30px; height:28px; padding:0; border:1px solid var(--border); border-radius:7px; background:var(--input-bg); color:var(--text); font:inherit; font-size:21px; line-height:1; cursor:pointer; } .gm-suspect-pages button:disabled { opacity:.35; cursor:default; } .gm-suspect-pages button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .gm-suspect-empty { padding:12px 0; color:var(--text3); text-align:center; font-size:11px; } .gm-adm-grant, .gm-adm-when { display:flex; align-items:center; gap:6px; margin:4px 0 8px; font-size:12px; } .gm-adm-grant input { width:70px; } .gm-adm-grant .gm-btn { width:auto; flex:1; margin:0; padding:7px; } .gm-adm-when label { display:flex; align-items:center; gap:4px; } .gm-adm-when input, .gm-adm-grant input { padding:5px 6px; border:1.5px solid var(--border); border-radius:7px; background:var(--input-bg); color:var(--text); font-family:inherit; font-size:12px; } .gm-adm-when input[type=number] { width:58px; } /* 관리 화면 — 지금 걸린 돌발 이벤트 버튼 눌린 상태, 예약은 점선 */ .gm-adm-evs button.on { border-color:var(--accent) !important; background:var(--accent-bg) !important; box-shadow:inset 0 2px 4px rgba(0,0,0,0.25), 0 0 0 2px rgba(232,115,42,0.35); transform:translateY(1px); } .gm-adm-evs button.on span { font-weight:800; color:var(--accent-text); } .gm-adm-evs button.pending { border-style:dashed !important; border-color:var(--accent) !important; } .gm-adm-hours { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:6px; } .gm-adm-hours span { flex:1; } .gm-adm-hours .gm-btn { width:auto; margin:0; padding:6px 12px; } /* 4.75 테마 탭 — 테마마다 한 줄(이름·상태·미리보기·적용) */ .gm-adm-themes { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; } .gm-adm-theme { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; } .gm-adm-theme.on { border-color:var(--accent); background:var(--accent-bg); } .gm-adm-theme b { flex:1; } .gm-adm-theme small { color:var(--text3); font-size:11px; } .gm-adm-theme .gm-btn { width:auto; margin:0; padding:6px 10px; font-size:12px; } .gm-adm-title .gm-adm-logout { margin-left:auto; font:inherit; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; border:1px solid var(--border); background:var(--surface); color:var(--text2); cursor:pointer; } /* 2.86 — 관리자 목록: 닉네임 줄(사진 올린 사람은 아바타가 버튼으로 감싸져 높이가 어긋났음) · 체크 · 지정 지급 */ .gm-adm-row .gm-adm-nick { display:flex; align-items:center; gap:5px; min-width:0; } .gm-adm-nick > span { color:var(--text); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gm-adm-chk { display:flex; align-items:center; justify-content:center; cursor:pointer; } .gm-adm-chk input { width:14px; height:14px; margin:0; accent-color:var(--accent); cursor:pointer; } .gm-adm-row.sel { background:var(--accent-bg); } .gm-adm-grant input[type=text] { flex:1; min-width:0; width:auto; } .gm-adm-grant-btns { margin:0 0 8px; } .gm-adm-grant-btns .gm-btn:disabled { opacity:.45; cursor:default; } /* 3.24 — 확정권 지급 버튼 4개가 한 줄에 끼어 글자가 두 줄로 꺾였음 → 2×2(윗줄 ★5 · 아랫줄 ★6, 왼쪽 선택 · 오른쪽 전원) */ .gm-adm-btns.gm-adm-tk { display:grid; grid-template-columns:1fr 1fr; } .gm-adm-tk .gm-btn { white-space:nowrap; } /* 4.28 — 관리자 공지 */ .gm-adm-notice { width:100%; box-sizing:border-box; resize:vertical; padding:6px 8px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font:inherit; font-size:12px; } .gm-adm-notice-now { margin:2px 0 6px; padding:6px 8px; border-radius:8px; background:var(--accent-bg); font-size:11.5px; line-height:1.45; word-break:keep-all; } .gm-adm-notice-now.off { background:none; color:var(--text3); padding:2px 0; } .gm-adm-notice-now em { display:block; font-style:normal; font-size:10.5px; color:var(--text3); } .gm-adm-chkl input { width:auto !important; } /* 상위권도 일반 랭킹 행과 같은 높이. 색과 빛만 금·은·동으로 강조한다. */ .gm-rank-row.top { --rank-edge:#a56a20; --rank-glow:rgba(255,193,62,.3); position:relative; isolation:isolate; overflow:hidden; padding:5px 12px 5px 4px; border:0; border-radius:8px; box-shadow:inset 0 0 0 1px var(--rank-edge),0 1px 5px var(--rank-glow); background:linear-gradient(105deg,#e9be65 0%,#fff3ca 31%,#dbab4d 62%,#fce7a5 100%); color:#3f2911; } .gm-rank-row.top1 { --rank-edge:#b87b19; --rank-glow:rgba(245,181,32,.5); background:radial-gradient(circle at 11% 48%,rgba(255,255,255,.95),transparent 10%),radial-gradient(circle at 81% 23%,rgba(255,255,255,.8),transparent 7%),linear-gradient(105deg,#df9e24 0%,#fff5c9 31%,#e3aa32 61%,#ffefaa 100%); box-shadow:inset 0 0 0 1px var(--rank-edge),0 0 12px var(--rank-glow); } .gm-rank-row.top2 { --rank-edge:#8594a6; --rank-glow:rgba(150,171,195,.22); background:linear-gradient(105deg,#b6c6d4 0%,#f5faff 31%,#acbac8 62%,#e8f2f9 100%); color:#253244; } .gm-rank-row.top3 { --rank-edge:#a86a46; --rank-glow:rgba(183,112,71,.2); background:linear-gradient(105deg,#be8059 0%,#f9e3d1 31%,#bd7952 62%,#f3d6bb 100%); color:#3f271b; } .gm-rank-row.top1::before,.gm-rank-row.top2::before { content:""; position:absolute; top:-80%; bottom:-80%; left:-55%; width:26%; transform:rotate(22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); animation:gmRankShine 5s ease-in-out infinite; pointer-events:none; } .gm-rank-row.top2::before { width:18%; opacity:.38; animation-duration:8s; animation-delay:2s; } .gm-rank-row.top > * { position:relative; z-index:1; } .gm-rank-row.top .gm-medal { height:22px; filter:drop-shadow(0 1px 2px rgba(55,38,10,.3)); } .gm-rank-row.top1 .gm-medal { filter:drop-shadow(0 0 4px rgba(255,235,111,.9)); } .gm-rank-row.top > b,.gm-rank-row.top > span:last-child { text-shadow:0 1px rgba(255,255,255,.45); } .gm-rank-row.top.me { box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px var(--rank-edge),0 1px 7px var(--rank-glow); } @keyframes gmRankShine { 0%,20% { left:-55%; } 48%,100% { left:145%; } } @media (prefers-reduced-motion:reduce) { .gm-rank-row.top1::before,.gm-rank-row.top2::before { animation:none; display:none; } } .gm-rank-row.prestige6 .gm-pf { border:1.5px solid #b9c7d9; box-shadow:0 0 3px #9db5d9; } .gm-rank-row.prestige12 .gm-pf { border-color:#e8b950; box-shadow:0 0 4px #f6cb74; } .gm-rank-row.rhythm { overflow:hidden; } .gm-rank-row.rhythm > b { flex:0 1 26%; } .gm-rank-row.rhythm > span:last-child { flex:1 1 0; min-width:0; display:flex; align-items:center; white-space:nowrap; overflow:hidden; } .gm-rank-row.rhythm .gm-nth { flex:none; } .gm-rank-row.rhythm .gm-rhythm-meta { flex:none; } .gm-rhythm-song { display:inline-block; flex:1 1 0; min-width:0; overflow:hidden; vertical-align:bottom; white-space:nowrap; } .gm-rhythm-song > span { display:inline-block; white-space:nowrap; } .gm-rhythm-song.scrolling > span { animation:gmRhythmScroll var(--gm-rhythm-duration,7s) ease-in-out infinite alternate; } @keyframes gmRhythmScroll { 0%,14% { transform:translateX(0); } 86%,100% { transform:translateX(calc(-1 * var(--gm-rhythm-overflow,0px))); } } @media (prefers-reduced-motion:reduce) { .gm-rhythm-song.scrolling { overflow-x:auto; } .gm-rhythm-song.scrolling > span { animation:none; } } /* 4.27 — 3회차 계정(전설의 이사회): 다른 사람 랭킹에서도 보이게. 흐르는 보라·금빛 배경, 금테 빛, 왕관, 이름 반짝임 */ .gm-rank-row.legend { position:relative; isolation:isolate; overflow:hidden; box-shadow:inset 0 0 0 1.5px #f2c95c,0 0 10px rgba(197,109,255,.55); } /* 4.29 — 메달(1~3위) 배경보다 회차 배너가 우선. 메달 그림은 그대로 */ .gm-rank-row.legend,.gm-rank-row.legend.top { background:linear-gradient(100deg,#2a0e3a 0%,#5d2b7c 38%,#b4823a 70%,#2a0e3a 100%); background-size:240% 100%; animation:gmLegendFlow 7s linear infinite; color:#fff4d4; } .gm-rank-row.legend > span:first-child { color:#ffe08a; font-weight:800; } .gm-rank-row.legend::after { content:""; position:absolute; top:-80%; bottom:-80%; left:-40%; width:16%; transform:rotate(22deg); background:linear-gradient(90deg,transparent,rgba(255,240,190,.7),transparent); animation:gmRankShine 4s ease-in-out infinite; animation-delay:1s; pointer-events:none; z-index:0; } .gm-rank-row.legend > * { position:relative; z-index:1; } .gm-rank-row.legend .gm-pf { border:1.5px solid #ffd76e; box-shadow:0 0 4px rgba(255,215,110,.85); } /* 4.31 — 20px 사진에 두 겹 테+큰 빛이 사진보다 커 보였음 → 얇은 금테+작은 빛 */ .gm-legend-crown { height:16px; width:auto; vertical-align:-3px; margin:0 2px 0 1px; filter:drop-shadow(0 0 3px #ffd76e); animation:gmLegendCrown 1.8s ease-in-out infinite alternate; } .gm-legend-name { font-weight:900; background:linear-gradient(90deg,#ffe08a,#fff,#e9a6ff,#ffe08a); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gmLegendFlow 3s linear infinite; } .gm-legend-honor { font-size:10px; font-weight:800; padding:0 5px; border-radius:6px; background:linear-gradient(90deg,#f6cb74,#d38cff); color:#3a1046; } .gm-legend-honor.cyc2 { background:linear-gradient(90deg,#b9d3ea,#6d9cc2); color:#17344b; } .gm-legend-honor.cyc3 { background:linear-gradient(90deg,#d6a1eb,#8b54a8); color:#fff; } .gm-legend-honor.cyc4 { background:linear-gradient(90deg,#8ef3ff,#b23ad1); color:#21133d; } .gm-rank-row.legend .gm-nth { background:linear-gradient(90deg,#c78a1f,#9d4ccc); } /* 4.72 3회차 딱지가 보라 줄·챔피언 배너 줄에서 회색(기본색)으로 보였음 → 회차마다 줄 배너와 상관없이 같은 색 */ .gm-rank-row .gm-nth.n2 { background:linear-gradient(90deg,#6d9cc2,#3f6e93); } .gm-rank-row .gm-nth.n3 { background:linear-gradient(90deg,#f3c14a,#d58a1a); color:#3a2300; box-shadow:0 0 0 1px #ffe08a; text-shadow:none; } .gm-rank-row .gm-nth.n4 { background:linear-gradient(90deg,#3bc6e6,#b23ad1); } .gm-rank-row.legend .gm-row-badge { filter:drop-shadow(0 0 2px #ffd76e); } @keyframes gmLegendFlow { from { background-position:0% 50%; } to { background-position:200% 50%; } } @keyframes gmLegendCrown { from { transform:translateY(0) rotate(-6deg); } to { transform:translateY(-2px) rotate(6deg); } } @media (prefers-reduced-motion:reduce) { .gm-rank-row.legend,.gm-rank-row.legend::after,.gm-legend-crown,.gm-legend-name { animation:none; } .gm-rank-row.legend::after { display:none; } } /* 4.29 — 2회차 배너(은청빛) · 4회차 배너(우주빛) */ .gm-rank-row.cyc2,.gm-rank-row.cyc2.top { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(100deg,#1d3346 0%,#3d6f8f 40%,#b9cfe0 72%,#1d3346 100%); background-size:240% 100%; animation:gmLegendFlow 9s linear infinite; color:#eef6ff; box-shadow:inset 0 0 0 1.5px #b9d3ea,0 0 8px rgba(130,180,230,.45); } .gm-rank-row.cyc2 > * { position:relative; z-index:1; } .gm-rank-row.cyc2 > span:first-child { color:#d8ecff; font-weight:800; } .gm-rank-row.cyc2 .gm-nth { background:linear-gradient(90deg,#6d9cc2,#3f6e93); } .gm-rank-row.cyc4,.gm-rank-row.cyc4.top { background:linear-gradient(100deg,#07061f 0%,#22186a 30%,#5a35c8 55%,#2a9fd0 78%,#07061f 100%); background-size:260% 100%; animation:gmLegendFlow 6s linear infinite; box-shadow:inset 0 0 0 1.5px #8ef3ff,0 0 12px rgba(160,90,255,.7),0 0 4px rgba(120,240,255,.6); } .gm-rank-row.cyc4 .gm-legend-name { background-image:linear-gradient(90deg,#9ff7ff,#fff,#ffb0f2,#ffe08a,#9ff7ff); } .gm-rank-row.cyc4 .gm-nth { background:linear-gradient(90deg,#3bc6e6,#b23ad1); } /* 4.29 — 미니게임 주간 1위 챔피언 배너: 게임마다 색. 4.32 — 섞인 색(초록+분홍 등)을 빼고 게임마다 한 색 계열(어두운→밝은)로 */ .gm-rank-row.champ,.gm-rank-row.champ.top { --c1:#333; --c2:#777; --c3:#bbb; position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(100deg,var(--c1) 0%,var(--c2) 45%,var(--c3) 75%,var(--c1) 100%); background-size:240% 100%; animation:gmLegendFlow 7s linear infinite; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); box-shadow:inset 0 0 0 1.5px var(--c3),0 0 9px var(--c2); } .gm-rank-row.champ > * { position:relative; z-index:1; } .gm-rank-row.champ > span:first-child { color:#fff; font-weight:800; } .gm-rank-row.champ::after { content:""; position:absolute; top:-80%; bottom:-80%; left:-40%; width:16%; transform:rotate(22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:gmRankShine 4.5s ease-in-out infinite; pointer-events:none; z-index:0; } .champ-cycle { --c1:#3b2a5a !important; --c2:#d0883a !important; --c3:#f4d68a !important; } /* 4.72 챔피언 순환 배너 버튼 */ .champ-runner { --c1:#6b2a06 !important; --c2:#e0721f !important; --c3:#ffc58a !important; } .champ-warehouse { --c1:#3f2710 !important; --c2:#a26e36 !important; --c3:#e8c890 !important; } .champ-rhythm { --c1:#3a0f4a !important; --c2:#a23cc0 !important; --c3:#e3b2f2 !important; } .champ-mine { --c1:#1e2833 !important; --c2:#56697e !important; --c3:#b6c4d4 !important; } .champ-bustout { --c1:#0b2c57 !important; --c2:#2c72cc !important; --c3:#9cc4f3 !important; } .champ-anipang { --c1:#24420a !important; --c2:#6fae2a !important; --c3:#cdeb93 !important; } .champ-puyo { --c1:#55101f !important; --c2:#d0384f !important; --c3:#ffabb8 !important; } .champ-t2048 { --c1:#573705 !important; --c2:#d1931c !important; --c3:#ffe19c !important; } .champ-yut { --c1:#3a0f17 !important; --c2:#8c2a3a !important; --c3:#dfa2ac !important; } .champ-stairs { --c1:#093650 !important; --c2:#2898cf !important; --c3:#a6dff8 !important; } .champ-suika { --c1:#0e3a1b !important; --c2:#2c9a4b !important; --c3:#a2e1b2 !important; } .champ-tetris { --c1:#063a43 !important; --c2:#16a0b2 !important; --c3:#9de3ec !important; } .champ-block { --c1:#0f1d4c !important; --c2:#3952c4 !important; --c3:#a8b6f3 !important; } .champ-survivor { --c1:#3a0909 !important; --c2:#a72626 !important; --c3:#ef9d9d !important; } .champ-onecard { --c1:#161616 !important; --c2:#4d4d4d !important; --c3:#cfcfcf !important; } .champ-battleship { --c1:#06302b !important; --c2:#198676 !important; --c3:#92ded0 !important; } .champ-sudoku { --c1:#2a1a4a !important; --c2:#6a4fc2 !important; --c3:#c9b8f5 !important; } /* 4.38 스도쿠 — 보라 계열 */ .champ-pushpush { --c1:#17355c !important; --c2:#3c8ac2 !important; --c3:#d8edff !important; } .champ-rummikub { --c1:#3b2310 !important; --c2:#a8692e !important; --c3:#f0c79a !important; } /* 4.75 루미큐브 — 나무 받침대 갈색 계열 */ .champ-pinball { --c1:#3d0a35 !important; --c2:#c8338c !important; --c3:#ffb3df !important; } /* 4.78 핀볼 — 자홍(마젠타) 계열 */ .champ-brickbreak { --c1:#15324c !important; --c2:#e87932 !important; --c3:#ffe3a4 !important; } .champ-sichuan { --c1:#12301a !important; --c2:#c4506f !important; --c3:#ffd2dd !important; } /* 4.93 사천성 — 벚꽃 분홍·초록 판 */ .gm-champ-pill { display:inline-flex; align-items:center; gap:2px; margin-left:3px; padding:0 6px; border-radius:7px; font-size:10px; font-weight:800; background:rgba(255,255,255,.88); color:#3a2a10; text-shadow:none; vertical-align:1px; } .gm-champ-pill .gm-ic { height:13px; } @media (prefers-reduced-motion:reduce) { .gm-rank-row.cyc2,.gm-rank-row.cyc4,.gm-rank-row.champ,.gm-rank-row.champ::after { animation:none; } .gm-rank-row.champ::after { display:none; } } /* 4.31 — 랭킹 줄 배치: 사진은 고정, 닉네임 쪽·오른쪽 글은 칸을 넘으면 전광판처럼 왕복(말줄임 없음). 배너 줄은 안쪽 테두리 빛 때문에 끝 글자가 붙어 보여서 좌우 여백을 넓힘 */ .gm-rank-row > b { display:flex; align-items:center; flex:1 1 0; min-width:0; overflow:hidden; text-overflow:clip; } .gm-rank-row > b > .gm-pf { flex:none; } .gm-rank-row:not(.rhythm) > span:last-child { flex:0 0 auto; min-width:0; max-width:62%; display:flex; overflow:hidden; white-space:nowrap; } .gm-mq { display:inline-block; flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; vertical-align:bottom; } .gm-mq > span { display:inline-block; white-space:nowrap; } .gm-mq.scrolling > span { animation:gmMarquee var(--gm-mq-duration,7s) ease-in-out infinite alternate; } @keyframes gmMarquee { 0%,14% { transform:translateX(0); } 86%,100% { transform:translateX(calc(-1 * var(--gm-mq-overflow,0px))); } } .gm-rank-row.cyc2,.gm-rank-row.legend,.gm-rank-row.cyc4,.gm-rank-row.champ { padding-left:6px; padding-right:12px; } @media (prefers-reduced-motion:reduce) { .gm-mq.scrolling { overflow-x:auto; } .gm-mq.scrolling > span { animation:none; } } /* 4.32 — 닉네임 칸을 이름 줄 + 챔피언 줄 두 줄로. 챔피언 배너 줄만 높이를 키우고 사진·순위·오른쪽 글은 가운데 정렬 */ .gm-rank-nm { display:flex; flex-direction:column; justify-content:center; flex:1 1 0; min-width:0; gap:1px; } .gm-rank-nm > .gm-mq { flex:none; max-width:100%; } .gm-rank-sub { display:flex; min-width:0; line-height:1; } .gm-rank-sub .gm-mq { flex:none; max-width:100%; } .gm-rank-row.two { min-height:40px; padding-top:4px; padding-bottom:4px; } .gm-rank-row.two .gm-pf-s { width:24px; height:24px; } .gm-rank-row.two .gm-pf-ph.gm-pf-s { line-height:22px; } .gm-champ-pill { margin-left:0; padding:1px 6px; font-size:9.5px; line-height:1.2; vertical-align:0; } .gm-champ-pill .gm-ic { height:12px; } /* 4.32 — 베타 테스터 배너 · 4.37 테두리만 있어 밋밋했음 → 효과 없는 단색(남색) 바탕 + 민트 BETA 꼬리표 */ .gm-rank-row.sbn-beta,.gm-rank-row.sbn-beta.top { background:#27365a; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); box-shadow:inset 0 0 0 1.5px #5ce0b6; padding-left:6px; padding-right:12px; } .gm-rank-row.sbn-beta::before,.gm-rank-row.sbn-beta::after { display:none; } .gm-rank-row.sbn-beta > span:first-child { color:#fff; font-weight:800; } .gm-champ-pill.sbn-pill { background:rgba(255,255,255,.92); color:#27365a; gap:4px; } .gm-beta-tag { padding:0 4px; border-radius:4px; background:#5ce0b6; color:#123227; font-size:8.5px; font-weight:900; letter-spacing:.5px; line-height:1.35; text-shadow:none; } .gm-pf-banner.sbn-beta { background:#27365a; color:#fff; border-color:#5ce0b6; } /* 4.32 — 멀티플레이 방 이름 아래 작은 배너(랭킹 배너와 같은 색) */ .gm-mp-bn { --c1:#333; --c2:#777; display:inline-flex; align-items:center; justify-content:center; gap:3px; max-width:100%; margin:1px auto 0; padding:1px 6px; border-radius:7px; font-size:9px; font-weight:800; line-height:1.3; white-space:nowrap; overflow:hidden; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.4); background:linear-gradient(100deg,var(--c1),var(--c2)); vertical-align:middle; } .gm-mp-bn .gm-ic { height:11px; margin:0; } .gm-mp-bn.mb-cyc2 { background:linear-gradient(100deg,#1d3346,#3d6f8f 60%,#7fa6c2); } .gm-mp-bn.mb-cyc3 { background:linear-gradient(100deg,#2a0e3a,#5d2b7c 50%,#b4823a); color:#fff4d4; } .gm-mp-bn.mb-cyc4 { background:linear-gradient(100deg,#07061f,#5a35c8 55%,#2a9fd0); box-shadow:0 0 4px rgba(120,160,255,.6); } .gm-mp-bn.mb-beta { background:#27365a; box-shadow:inset 0 0 0 1px #5ce0b6; } .gm-mp-bn.mb-beta .gm-beta-tag { font-size:7.5px; } .yt-tray-t .gm-mp-bn { margin:1px 0 0; align-self:flex-start; } .oc-seat .gm-mp-bn { display:flex; width:max-content; max-width:110px; } /* 4.35 — 배너가 없는 줄도 챔피언 두 줄 줄과 같은 높이·사진 크기로 통일(랭킹 목록이 들쭉날쭉하지 않게) */ .gm-rank-row { min-height:40px; padding-top:4px; padding-bottom:4px; box-sizing:border-box; } .gm-rank-row .gm-pf.gm-pf-s { width:24px; height:24px; } .gm-rank-row .gm-pf-ph.gm-pf-s { line-height:22px; } /* 4.42 — 승진 랭킹 오른쪽 두 줄: 직원·직급 / 단계(오른쪽 정렬, 넘치면 직원·직급만 전광판) */ .gm-rk2 { display:flex; flex-direction:column; align-items:flex-end; min-width:0; line-height:1.15; } .gm-rk2 > .gm-mq { flex:none; max-width:100%; } .gm-rk2 > small { font-size:10.5px; font-weight:700; opacity:.85; white-space:nowrap; } .gm-rank-row:not(.rhythm) > span:last-child { align-items:center; } /* 4.50 GM(운영자) — 블랙&골드 전설. 꼬리표(랭킹·멀티 방·프로필)와 랭킹 줄 배너(다른 배너보다 우선) */ .gm-gm-tag { display:inline-block; margin-right:4px; padding:0 5px; border-radius:4px; background:linear-gradient(135deg,#0a0a0a 0%,#2a2210 45%,#0a0a0a 100%); color:#ffd76e; border:1px solid #e9c46a; box-shadow:0 0 4px rgba(233,196,106,.7); font-size:9px; font-weight:900; letter-spacing:.8px; line-height:1.35; vertical-align:1px; text-shadow:0 0 3px rgba(255,215,110,.8); } .gm-rank-row.gmrow,.gm-rank-row.gmrow.top { position:relative; isolation:isolate; overflow:hidden; color:#ffe8a3; text-shadow:0 1px 2px #000; background:linear-gradient(100deg,#050505 0%,#1a1406 22%,#3d2f0c 42%,#0c0a04 58%,#2b2109 78%,#050505 100%); background-size:240% 100%; animation:gmLegendFlow 8s linear infinite; box-shadow:inset 0 0 0 1.5px #e9c46a, inset 0 0 0 3px #3a2c0a, 0 0 12px rgba(233,196,106,.55), 0 0 3px rgba(255,236,170,.7); padding-left:6px; padding-right:12px; } .gm-rank-row.gmrow > * { position:relative; z-index:1; } .gm-rank-row.gmrow::before { display:none; } .gm-rank-row.gmrow::after { content:""; position:absolute; top:-80%; bottom:-80%; left:-40%; width:14%; transform:rotate(22deg); background:linear-gradient(90deg,transparent,rgba(255,226,140,.85),transparent); animation:gmRankShine 3.6s ease-in-out infinite; pointer-events:none; z-index:0; } .gm-rank-row.gmrow > span:first-child { color:#ffd76e; font-weight:900; } .gm-rank-row.gmrow .gm-rank-nm > .gm-mq > span { font-weight:900; background:linear-gradient(90deg,#b8862b,#ffe9a8,#fff8dc,#e9c46a,#b8862b); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gmLegendFlow 3s linear infinite; text-shadow:none; } .gm-rank-row.gmrow .gm-rank-nm .gm-gm-tag { -webkit-text-fill-color:#ffd76e; } .gm-rank-row.gmrow .gm-pf { border:1.5px solid #e9c46a; box-shadow:0 0 5px rgba(233,196,106,.9); } .gm-rank-row.gmrow .gm-nth { background:linear-gradient(90deg,#3a2c0a,#b8862b); color:#fff3c4; } /* 기수의 색은 현재 육성 회차와 별개로 달성 회차를 따른다. */ .gm-rank-row .gm-nth.n1,.gm-rank-row:is(.legend,.cyc2,.cyc4,.gmrow) .gm-nth.n1 { background:var(--text3); color:#fff; box-shadow:none; text-shadow:none; } .gm-rank-row .gm-nth.n2,.gm-rank-row:is(.legend,.cyc2,.cyc4,.gmrow) .gm-nth.n2 { background:linear-gradient(90deg,#6d9cc2,#3f6e93); color:#fff; box-shadow:none; text-shadow:none; } .gm-rank-row .gm-nth.n3,.gm-rank-row:is(.legend,.cyc2,.cyc4,.gmrow) .gm-nth.n3 { background:linear-gradient(90deg,#f3c14a,#d58a1a); color:#3a2300; box-shadow:0 0 0 1px #ffe08a; text-shadow:none; } .gm-rank-row .gm-nth.n4,.gm-rank-row:is(.legend,.cyc2,.cyc4,.gmrow) .gm-nth.n4 { background:linear-gradient(90deg,#3bc6e6,#b23ad1); color:#fff; box-shadow:none; text-shadow:none; } @media (prefers-reduced-motion:reduce) { .gm-rank-row.gmrow,.gm-rank-row.gmrow::after,.gm-rank-row.gmrow .gm-rank-nm > .gm-mq > span { animation:none; } .gm-rank-row.gmrow::after { display:none; } } .gm-mp-bn + .gm-gm-tag, .gm-gm-tag + .gm-mp-bn { margin-left:2px; } /* 4.52 — 꼬리표 + 닉네임을 한 줄 상자에서 세로 가운데로(gmTagWrap) */ .gm-gm-line { display:inline-flex; align-items:center; max-width:100%; vertical-align:top; } .gm-gm-line > .gm-gm-tag { flex:none; vertical-align:0; } .gm-gm-line > span { min-width:0; } /* 신화 프레임은 행 높이를 유지하고 장식만 양옆으로 뻗는다. */ .gm-rank-row.sbn-myth,.gm-rank-row.sbn-myth.top { position:relative; isolation:isolate; overflow:visible; padding:8px 22px 8px 6px; margin-bottom:4px; border:0; border-radius:0; color:#fff; background:none; box-shadow:none; } /* 배너 안 텍스트 위아래 공간을 늘리고 양끝 장식도 행 높이에 맞춰 키움. 가운데 띠는 양끝 장식 안쪽에만 */ .gm-rank-row.sbn-myth::before { content:''; display:block; position:absolute; inset:-7px 0; z-index:0; pointer-events:none; animation:none; transform:none; opacity:1; width:auto; left:0; top:-7px; bottom:-7px; clip-path:inset(7px 0); -webkit-mask:none; mask:none; background:url("assets/game/ui/myth-cap-l.png") left center/auto 100% no-repeat,url("assets/game/ui/myth-cap-r.png") right center/auto 100% no-repeat,url("assets/game/ui/myth-mid.png") center/calc(100% - 56px) 100% no-repeat; } .gm-rank-row.sbn-myth > * { position:relative; z-index:1; } .gm-rank-row.sbn-myth::after { content:''; display:block; position:absolute; inset:-3px 16px; z-index:0; pointer-events:none; border-radius:999px; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%) no-repeat; background-size:45% 100%; animation:gmMythShine 4s ease-in-out infinite; } /* 번쩍 효과(다른 챔피언 배너처럼) — 배너 안쪽에서만 훑고 지나감 */ @keyframes gmMythShine { 0%,20% { background-position:-90% 0; } 55%,100% { background-position:190% 0; } } @media (prefers-reduced-motion:reduce) { .gm-rank-row.sbn-myth::after { animation:none; display:none; } } .gm-rank-row.sbn-myth .gm-legend-honor { text-shadow:none; color:#2d0a3b; box-shadow:0 0 0 1px rgba(24,19,71,.55); } /* 달성 꼬리표는 밝은 바탕이라 바깥 글자 그림자를 지움 */ .gm-rank-row.sbn-myth .gm-pf { background:#fff; } /* 캐릭터 초상화 프사는 뒤를 항상 하얀색으로 */ .gm-rank-row.sbn-myth .gm-legend-name { text-shadow:none; filter:drop-shadow(0 0 2px #181347) drop-shadow(0 1px 1px #181347); } /* 글자 속이 비는 효과 글씨는 text-shadow가 속을 덮어 어두워짐 */ .gm-rank-row.sbn-myth.top > *,.gm-rank-row.sbn-myth.top > b,.gm-rank-row.sbn-myth.top > span:last-child,.gm-rank-row.sbn-myth .gm-rank-nm > .gm-mq { text-shadow:0 0 2px #181347,0 1px 2px #181347,0 0 5px rgba(24,19,71,.85); } .gm-rank-row.sbn-myth .gm-rank-nm > .gm-mq { color:#fff; } .gm-rank-row.sbn-myth > span:first-child { color:#ffe9a8; font-weight:900; } .gm-pf-banner.sbn-myth .gm-pf { background:#fff; } .gm-pf-banner.sbn-myth { background:linear-gradient(105deg,#24225e,#555094 48%,#29265e); color:#fff9e9; border:1.5px solid #e8c77c; text-shadow:0 1px 2px #100d32; box-shadow:inset 0 0 0 2px rgba(255,239,185,.2),0 0 6px rgba(117,103,200,.35); } .gm-pf-banner.sbn-myth::before,.gm-pf-banner.sbn-myth::after { content:''; position:absolute; top:0; bottom:0; width:30px; pointer-events:none; background-image:url("assets/game/ui/myth-banner.png"); background-size:auto 100%; background-repeat:no-repeat; } .gm-pf-banner.sbn-myth::before { left:0; background-position:left center; -webkit-mask:linear-gradient(90deg,#000 8px,transparent); mask:linear-gradient(90deg,#000 8px,transparent); } .gm-pf-banner.sbn-myth::after { right:0; background-position:right center; -webkit-mask:linear-gradient(270deg,#000 8px,transparent); mask:linear-gradient(270deg,#000 8px,transparent); } .gm-mp-bn.mb-myth { background:url("assets/game/ui/myth-banner.png") center/100% 100% no-repeat; box-shadow:none; color:#fff9e9; padding:0 12px; } .gm-champ-pill.sbn-pill .gm-myth-ic, .gm-mp-bn .gm-myth-ic, .gm-pf-banner .gm-myth-ic { height:14px; width:14px; object-fit:contain; margin-right:2px; } /* 수박 게임 합체 순서(v2.34) — 이번 판에 만든 단계까지 밝게 */ .gm-sk-order { display:flex; align-items:flex-end; justify-content:center; gap:2px; margin-top:4px; padding:4px 6px; border-radius:10px; background:var(--input-bg); flex-shrink:0; } .gm-sk-order img { width:auto; opacity:0.35; filter:grayscale(0.7); transition:opacity 0.3s, filter 0.3s; } .gm-sk-order img.got { opacity:1; filter:none; } .gm-sk-order i { font-style:normal; font-size:11px; color:var(--text3); align-self:center; } /* 테트리스 — 휴대폰 버튼 5개 */ .gm-tt-btns button { padding:10px 0; font-size:16px; } /* 테트리스(휴대폰) — 게임판이 줄어들 수 있게 해서 아래 조작 버튼이 잘리지 않게 */ .gm-body.fixed .gm-tt-cv { min-height:0; } .gm-tt-btns { gap:5px; } .gm-tt-btns button { padding:7px 0; font-size:15px; } .gm-body.fixed > .gm-tt-btns + .gm-btn { margin-top:6px; } /* 테트리스 버튼 두 줄(v2.36) — 위: 홀드·반시계·시계·바로 내리기 / 아래: ◀ ▼ ▶(누르고 있으면 계속) */ .gm-tt-btns + .gm-tt-btns { margin-top:5px; } .gm-tt-btns button.sm { font-size:13px; } .gm-tt-btns button { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } /* 좋소 키우기 — 원카드 */ .oc-lobby { display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0; } .oc-modes { display:flex; gap:8px; } .oc-mode { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 6px; border:none; border-radius:14px; color:#fff; font-family:inherit; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,0.25); } .oc-mode b { font-size:14px; } .oc-mode small { font-size:10.5px; opacity:0.9; } .oc-mode.solo { background:linear-gradient(180deg,#26a69a,#00796b); } .oc-mode.multi { background:linear-gradient(180deg,#ff8a50,#e8732a); } .oc-mode:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.25); } .oc-rooms { display:flex; flex-direction:column; gap:5px; overflow-y:auto; max-height:170px; } .oc-room { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; background:var(--input-bg); border:1px solid var(--border2); } .oc-room .gm-btn { width:auto; margin:0; padding:6px 12px; } .oc-room-faces { display:flex; } .oc-room-faces .oc-mini { width:24px; height:24px; border-radius:50%; margin-left:-6px; border:2px solid var(--surface); object-fit:cover; } .oc-room-faces .oc-mini:first-child { margin-left:0; } .oc-room-t { flex:1; min-width:0; display:flex; flex-direction:column; font-size:12px; } .oc-room-t small { color:var(--text3); font-size:10.5px; } .oc-rules { font-size:10.5px; line-height:1.55; color:var(--text3); padding:8px 10px; border-radius:10px; background:var(--input-bg); word-break:keep-all; margin-top:auto; } .oc-waits { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; } /* 5.48 2칸씩 2줄 — 배너 이름표가 들어가도 칸이 좁지 않게 */ .oc-wait { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:12px; background:var(--input-bg); border:1px solid var(--border2); font-size:12px; text-align:center; } .oc-wait { min-height:126px; justify-content:flex-start; box-sizing:border-box; } /* 5.47 배너 이름표 유무·길이에 따라 칸 크기가 바뀌지 않게 고정 */ .oc-wait .gm-mp-bn,.oc-wait > .gm-gm-tag + .gm-mp-bn { display:flex; width:max-content; max-width:100%; align-self:center; margin:1px 0 0; } /* GM 꼬리표 뒤 이름표는 margin-left:2px 규칙 때문에 왼쪽으로 쏠렸음 */ .oc-wait > small { margin-top:auto; } .oc-wait { position:relative; } .oc-wait .oc-host { position:absolute; top:6px; left:7px; width:22px; height:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); } /* 5.50 방장 왕관 */ .oc-wait.host > small { color:#b5790f; font-weight:800; } .oc-wait small { font-size:10px; color:var(--text3); } .oc-wait.empty { opacity:0.55; border-style:dashed; } .oc-face { width:38px; height:38px; border-radius:50%; object-fit:cover; background:#f1ede8; border:2px solid rgba(255,255,255,0.7); display:flex; align-items:center; justify-content:center; font-size:12px; } /* 테이블 */ .oc-table { position:relative; flex:1 1 auto; min-height:230px; border-radius:16px; overflow:hidden; background:radial-gradient(ellipse at center,#2e7d4f 0%,#1b5e3a 65%,#123f27 100%); box-shadow:inset 0 0 0 4px #6d4c2f, inset 0 0 0 6px #8d6a46, inset 0 0 30px rgba(0,0,0,0.5); } .oc-seat { position:absolute; display:flex; flex-direction:column; align-items:center; gap:1px; color:#fff; font-size:11px; text-shadow:0 1px 2px rgba(0,0,0,0.7); transition:transform 0.2s; } .oc-seat b { font-size:11px; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .oc-seat.top { top:8px; left:50%; transform:translateX(-50%); } .oc-seat.left { left:8px; top:40%; transform:translateY(-50%); } .oc-seat.right { right:8px; top:40%; transform:translateY(-50%); } .oc-seat.bottom { left:10px; bottom:6px; flex-direction:row; gap:5px; } .oc-seat.bottom .oc-face { width:30px; height:30px; } .oc-seat.turn .oc-face { box-shadow:0 0 0 3px #ffd54f, 0 0 14px #ffd54f; animation:ocTurn 1s ease-in-out infinite; } .oc-seat.out { opacity:0.4; filter:grayscale(1); } .oc-seat.win .oc-face { box-shadow:0 0 0 3px #69f0ae, 0 0 18px #69f0ae; } .oc-cnt { font-size:10px; font-weight:800; padding:1px 7px; border-radius:8px; background:rgba(0,0,0,0.45); } .oc-fan { display:flex; margin-top:2px; } .oc-fan i { width:9px; height:13px; margin-left:-4px; border-radius:2px; background:#b71c1c url(assets/game/ui/oc-back.png) center/100% 100% no-repeat; box-shadow:0 1px 2px rgba(0,0,0,0.4); } .oc-fan i:first-child { margin-left:0; } .oc-center { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:12px; } .oc-deck { position:relative; } .oc-deck small { position:absolute; bottom:-14px; left:0; right:0; text-align:center; color:#fff; font-size:10px; opacity:0.8; } .oc-pile .oc-card { transform:rotate(-4deg) scale(1.08); box-shadow:0 4px 10px rgba(0,0,0,0.5); } .oc-pile.new .oc-card { animation:ocDrop 0.25s ease-out; } .oc-state { display:flex; flex-direction:column; align-items:center; gap:4px; } .oc-dir { font-size:22px; color:rgba(255,255,255,0.75); line-height:1; } .oc-suit { font-size:22px; line-height:1; padding:2px 6px; border-radius:8px; background:#fff; color:#222; box-shadow:0 0 10px rgba(255,255,255,0.6); } .oc-suit.red { color:#d32f2f; } .oc-atk { font-size:15px; font-weight:900; color:#fff; padding:2px 8px; border-radius:10px; background:#d32f2f; box-shadow:0 0 12px #ff5252; animation:ocAtk 0.6s ease-in-out infinite alternate; } .oc-one { position:absolute; left:50%; top:74%; transform:translateX(-50%); color:#ffd54f; font-size:14px; font-weight:900; text-shadow:0 0 8px #000; white-space:nowrap; } .oc-one:not(:empty) { animation:ocAtk 0.4s ease-in-out infinite alternate; } /* 카드 */ .oc-card { width:42px; height:60px; box-sizing:border-box; border-radius:7px; background:#fff; border:1.5px solid #cfcfcf; color:#222; font-family:inherit; padding:2px 3px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; box-shadow:0 2px 4px rgba(0,0,0,0.3); flex-shrink:0; } .oc-card .r { font-size:13px; font-weight:900; line-height:1; } .oc-card .su { font-size:22px; line-height:1; align-self:center; margin-bottom:6px; } .oc-card.red { color:#d32f2f; } .oc-card.back { background:#b71c1c url(assets/game/ui/oc-back.png) center/100% 100% no-repeat; border:none; padding:0; } .oc-card.joker .r { font-size:8px; letter-spacing:0.5px; } .oc-card.joker .su { font-size:24px; } .oc-card.joker.bj { background:linear-gradient(160deg,#fff,#cfd8dc); } .oc-card.joker.cj { background:linear-gradient(160deg,#fff59d,#f48fb1,#90caf9); } .oc-log { font-size:11.5px; text-align:center; color:var(--text2); min-height:16px; margin:5px 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .oc-hand { display:flex; justify-content:center; align-items:flex-end; height:74px; padding:0 6px; } .oc-slot { flex-shrink:0; display:flex; } .oc-hand button.oc-card { cursor:pointer; transition:transform 0.12s; opacity:0.55; } .oc-hand.my button.oc-card.ok { opacity:1; transform:translateY(-8px); box-shadow:0 0 0 2px #ffd54f, 0 4px 10px rgba(0,0,0,0.35); } .oc-hand.my button.oc-card.ok:hover { transform:translateY(-14px); } .oc-hand:not(.my) button.oc-card { opacity:0.85; cursor:default; } .oc-btns { display:flex; gap:8px; margin-top:4px; } .oc-btns .gm-btn { margin:0; flex:1; padding:9px; } .oc-onebtn.hot { border:none; color:#fff; font-weight:900; background:linear-gradient(90deg,#ff5252,#ffb300); animation:ocAtk 0.35s ease-in-out infinite alternate; } .oc-pick { position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(0,0,0,0.55); color:#fff; } .oc-pick div { display:flex; gap:10px; } .oc-pick button { width:56px; height:56px; font-size:30px; border:none; border-radius:14px; background:#fff; color:#222; cursor:pointer; } .oc-pick button.red { color:#d32f2f; } .oc-result { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); animation:gmFade 0.2s; } .oc-result-card { width:86%; padding:16px 14px; border-radius:16px; background:var(--surface); text-align:center; display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--text2); box-shadow:0 12px 30px rgba(0,0,0,0.45); animation:gmSceneIn 0.3s ease-out; } .oc-result-card { line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; } .oc-result-card small { color:var(--text3); font-size:11px; } .oc-result-rank { font-size:24px; font-weight:900; color:var(--text); } .oc-result.win .oc-result-rank { color:#e8a000; } .oc-result-btns { display:flex; gap:8px; } .oc-result-btns .gm-btn { margin:0; } .gm-body.fixed .oc-table { min-height:0; } .oc-suit { white-space:nowrap; } .oc-suit.any { font-size:11px; font-weight:800; padding:4px 8px; line-height:1.2; } .oc-onebtn:disabled { opacity:0.45; cursor:default; } /* 같이 하기 — 서버로 보내는 중 */ .oc-hand.busy button.oc-card { opacity:0.4; cursor:progress; pointer-events:none; } .oc-hand.busy button.oc-card.sending { opacity:1; transform:translateY(-22px) scale(1.06); box-shadow:0 0 0 2px #69f0ae, 0 0 16px rgba(105,240,174,0.8); animation:ocSending 0.6s ease-in-out infinite alternate; } .oc-take.sending { cursor:progress; } /* 원카드 — 내 차례 강조 */ .oc-table-in { display:contents; } .oc-fx { position:absolute; inset:0; pointer-events:none; z-index:20; } .oc-table.myturn { animation:ocMyTurn 1.1s ease-in-out infinite; } .oc-mine { font-size:10.5px; font-weight:900; color:#3e2700; padding:2px 8px; border-radius:10px; background:linear-gradient(90deg,#ffd54f,#ffb300); text-shadow:none; box-shadow:0 0 10px rgba(255,213,79,0.9); animation:ocAtk 0.5s ease-in-out infinite alternate; } .oc-hand.my { border-radius:12px; background:radial-gradient(ellipse at 50% 100%,rgba(255,213,79,0.35),transparent 70%); } .oc-turn-banner { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); white-space:nowrap; font-size:26px; font-weight:900; color:#fff; padding:8px 26px; border-radius:28px; background:linear-gradient(90deg,#ff8f00,#ffca28,#ff8f00); text-shadow:0 2px 3px rgba(0,0,0,0.35); box-shadow:0 0 0 3px rgba(255,255,255,0.85), 0 8px 24px rgba(0,0,0,0.45); animation:ocBanner 1.4s ease-out forwards; } /* 남은 시간(같이 하기) */ .oc-timer { position:absolute; left:10px; right:10px; bottom:3px; height:4px; border-radius:2px; background:rgba(0,0,0,0.3); overflow:hidden; z-index:5; } .oc-timer i { display:block; height:100%; width:100%; background:rgba(255,255,255,0.55); transition:width 1.5s linear; } .oc-timer i.mine { background:#ffd54f; } .oc-timer i.low { background:#ff5252; } /* 이모지 */ .oc-emo-wrap { position:relative; display:flex; flex:0 0 auto; } .oc-btns .oc-emo-btn { flex:0 0 44px; width:44px; padding:6px 0; font-size:18px; line-height:1; } .oc-emo-pal { position:absolute; right:0; bottom:calc(100% + 6px); display:none; grid-template-columns:repeat(4,36px); gap:4px; padding:6px; border-radius:14px; z-index:40; background:var(--surface); border:1px solid var(--border2); box-shadow:0 8px 20px rgba(0,0,0,0.35); } .oc-emo-pal.open { display:grid; animation:gmFade 0.15s; } .oc-emo-pal button { width:36px; height:36px; border:none; border-radius:10px; background:var(--input-bg); font-size:20px; cursor:pointer; padding:0; } .oc-emo-pal button:hover { transform:scale(1.15); background:var(--border2); } .oc-emo { position:absolute; font-size:30px; line-height:1; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.45)); animation:ocEmo 2.6s ease-out forwards; } .oc-emo.bottom { left:48px; bottom:36px; } .oc-emo.top { left:calc(50% + 30px); top:6px; } .oc-emo.left { left:56px; top:20%; } .oc-emo.right { right:56px; top:20%; } /* 원카드 — 낼 카드가 없을 때: 손패 잠그고 먹기 버튼 강조 */ .oc-hand.stuck button.oc-card { opacity:0.35; filter:grayscale(0.9) brightness(0.9); cursor:not-allowed; pointer-events:none; transform:none; box-shadow:none; } .oc-take.must { border:none; color:#fff; font-weight:900; font-size:14px; background:linear-gradient(90deg,#ff9800,#ffb300); box-shadow:0 0 0 2px #fff, 0 0 16px rgba(255,167,38,0.9); animation:ocMust 0.7s ease-in-out infinite alternate; } .oc-take.must.atk { background:linear-gradient(90deg,#e53935,#ff7043); box-shadow:0 0 0 2px #fff, 0 0 18px rgba(255,82,82,0.95); } .oc-must { color:#e53935; font-weight:900; } .oc-result-rank .gm-ic { height:26px; vertical-align:-5px; margin-right:6px; } /* 새 그림 아이콘(게임 v2.23) — 원카드 감정 표현, 컴퓨터 빈자리, 팀원 실수 표시 등 */ .oc-emo-btn img { width:24px; height:24px; object-fit:contain; display:block; margin:0 auto; } .oc-emo-pal button img { width:28px; height:28px; object-fit:contain; display:block; margin:auto; } .oc-emo img { width:46px; height:46px; object-fit:contain; display:block; } .oc-face.oc-bot { object-fit:contain; background:#e3eaf3; padding:2px; box-sizing:border-box; } .oc-mode b .gm-ic { height:18px; vertical-align:-4px; } /* 원카드 컴퓨터 수(v2.27) */ .oc-botpick { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; font-weight:700; color:var(--text2); } .oc-botpick button { padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:none; color:var(--text2); font:inherit; cursor:pointer; } .oc-botpick button.on { background:var(--accent); border-color:transparent; color:#fff; } .oc-wait.tap { cursor:pointer; } .oc-wait.empty.off { opacity:0.3; } .oc-wait.empty.off .oc-bot { filter:grayscale(1); } /* 2.99 — 같이 하기 자리 비움 띠(원카드·해전·윷놀이 공용) */ .mp-away { position:sticky; top:0; z-index:35; display:flex; align-items:center; gap:8px; margin:0 0 6px; padding:7px 10px; border-radius:12px; border:1.5px solid #ffb300; background:linear-gradient(90deg,#4a3500,#2a1e08); color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.35); flex-shrink:0; } .mp-away .gm-ic { width:24px; height:24px; } .mp-away span { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; } .mp-away b { font-size:13px; } .mp-away small { font-size:10.5px; opacity:.8; } .mp-away .gm-btn { width:auto; margin:0; padding:7px 12px; flex:none; animation:ocAtk .8s ease-in-out infinite alternate; } /* 4.67 결과 창 줄바꿈 — 항목(.nw)은 안 쪼개고, 줄 길이는 고르게 */ .oc-result-card .nw { white-space:nowrap; } .oc-result-card > :is(div, small, p, span) { text-wrap-style:balance; } .oc-result-card .oc-result-title { display:block; font-size:13px; line-height:1.35; text-wrap-style:balance; } /* 좋소 키우기 — 해전 */ .bs-ic { font-size:14px; line-height:1; margin-right:3px; } .bs-main { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 auto; min-height:0; } .gm-body.fixed > .bs-main { flex-shrink:1; } .bs-title { font-size:12.5px; font-weight:800; text-align:center; } .bs-title small { display:block; font-weight:500; font-size:10.5px; color:var(--text3); } .bs-board { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:4px; border-radius:10px; background:linear-gradient(160deg,#1565c0,#0d47a1); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.25), 0 3px 8px rgba(0,0,0,0.25); } .bs-board.place, .bs-board.enemy { width:min(100%,272px); } .bs-board.mine { width:118px; gap:1px; padding:3px; border-radius:8px; } .bs-c { aspect-ratio:1; border:none; padding:0; border-radius:4px; background:rgba(255,255,255,0.10); display:block; position:relative; } .bs-board.mine .bs-c { border-radius:2px; } button.bs-c { cursor:crosshair; font-family:inherit; } .bs-enemy-wrap.myturn button.bs-c:hover { background:rgba(255,213,79,0.55); box-shadow:inset 0 0 0 2px #ffd54f; } .bs-c.fog { background:rgba(255,255,255,0.12); } .bs-c.sea { background:rgba(255,255,255,0.08); } .bs-c.ship { background:linear-gradient(160deg,#b0bec5,#78909c); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25); } .bs-board.place .bs-c.ship { cursor:pointer; } .bs-board.place .bs-c.ship:hover { filter:brightness(1.15); } .bs-c.miss::after { content:''; position:absolute; inset:34%; border-radius:50%; background:rgba(255,255,255,0.75); } .bs-c.hit { background:linear-gradient(160deg,#ff7043,#d84315); } .bs-c.hit::after { content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:60%; } .bs-board.enemy .bs-c.hit::after, .bs-board.place .bs-c.hit::after { font-size:15px; } .bs-c.ship.hit { background:linear-gradient(160deg,#ef5350,#b71c1c); } .bs-c.sunk { background:#3e2723; box-shadow:inset 0 0 0 2px #ff7043; } .bs-c.sunk::after { content:'☠'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; color:#ffab91; } .bs-c.reveal { background:rgba(176,190,197,0.55); } .bs-c.last { animation:bsLast 0.6s ease-out 2; box-shadow:0 0 0 2px #ffd54f, 0 0 10px #ffd54f; z-index:1; } .bs-c.aim { background:#ffd54f !important; animation:ocSending 0.5s ease-in-out infinite alternate; } .bs-enemy-wrap { padding:3px; border-radius:13px; } .bs-enemy-wrap.myturn { animation:ocMyTurn 1.1s ease-in-out infinite; } .bs-vs { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; } .bs-p { display:flex; flex-direction:column; align-items:center; font-size:10.5px; min-width:52px; } .bs-p .oc-face { width:30px; height:30px; } .bs-p.turn .oc-face { box-shadow:0 0 0 3px #ffd54f, 0 0 12px #ffd54f; } .bs-turn { flex:1; text-align:center; font-size:12px; font-weight:800; color:var(--text2); } .bs-turn.mine { color:#fff; padding:5px 8px; border-radius:12px; background:linear-gradient(90deg,#ff8f00,#ffb300); box-shadow:0 0 12px rgba(255,179,0,0.7); animation:ocAtk 0.6s ease-in-out infinite alternate; } .bs-fleet { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; font-size:10px; } .bs-fleet small { color:var(--text3); } .bs-ship { color:#ef6c00; letter-spacing:-1px; font-size:9px; } .bs-ship.sunk { color:var(--text4); text-decoration:line-through; } .bs-bottom { display:flex; gap:10px; align-items:flex-start; width:100%; justify-content:center; } .bs-side { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .bs-side .bs-fleet { justify-content:flex-start; } .bs-log { text-align:left; white-space:normal; margin:0; font-size:11px; } .bs-timer { position:relative; left:auto; right:auto; bottom:auto; } .bs-wait { display:flex; align-items:center; justify-content:center; gap:18px; padding:18px 0; font-size:18px; } .bs-wait .oc-face { width:52px; height:52px; } .oc-btns .bs-ready { flex:1.4; } .bs-enemy-wrap { width:min(100%,280px); box-sizing:border-box; } .bs-enemy-wrap .bs-board.enemy { width:100%; box-sizing:border-box; } .bs-board.place { box-sizing:border-box; } .bs-main > .oc-btns { width:min(100%,272px); } .bs-main .gm-btn { white-space:nowrap; } .oc-btns .bs-ready:not(:disabled) { border:none; color:#fff; font-weight:800; background:linear-gradient(90deg,#26a69a,#00897b); } /* 해전 — 배 조각 그림 · 명중/빗나감 효과 그림(v2.49.2) */ .bs-c.ship { background:rgba(255,255,255,0.08); box-shadow:none; } .bs-c.ship::before { content:''; position:absolute; inset:-1px; background:center/contain no-repeat; pointer-events:none; } .bs-c.p-tail::before { background-image:url("assets/game/ui/bs-ship-tail.png"); } .bs-c.p-body::before { background-image:url("assets/game/ui/bs-ship-body.png"); } .bs-c.p-head::before { background-image:url("assets/game/ui/bs-ship-head.png"); } .bs-c.ship.v::before { transform:rotate(90deg); } .bs-c.miss::after { content:''; inset:8%; border-radius:0; background:url("assets/game/ui/fx-bs-miss.png") center/contain no-repeat; opacity:0.8; } .bs-c.hit { background:rgba(255,112,67,0.35); } .bs-c.hit::after, .bs-board.enemy .bs-c.hit::after, .bs-board.place .bs-c.hit::after { content:''; inset:4%; font-size:0; background:url("assets/game/ui/fx-bs-hit.png") center/contain no-repeat; } .bs-c.ship.hit { background:rgba(255,112,67,0.3); } .bs-c.sunk { background:rgba(62,39,35,0.75); box-shadow:inset 0 0 0 1px #ff7043; } .bs-c.sunk::before { filter:grayscale(0.5) brightness(0.65); } .bs-c.sunk::after { content:''; inset:22%; font-size:0; color:transparent; background:url("assets/game/ui/fx-bs-hit.png") center/contain no-repeat; opacity:0.9; } .bs-c.reveal { background:rgba(255,255,255,0.10); } .bs-c.reveal::before { opacity:0.6; } .bs-c.last { animation:none; } .bs-pop { position:absolute; left:-70%; top:-70%; width:240%; height:240%; z-index:4; pointer-events:none; background:center/contain no-repeat; animation:bsPop 0.9s ease-out forwards; } .bs-pop.hit { background-image:url("assets/game/ui/fx-bs-hit.png"); } .bs-pop.miss { background-image:url("assets/game/ui/fx-bs-miss.png"); } .bs-board.mine .bs-pop { left:-100%; top:-100%; width:300%; height:300%; } /* 큰 포격판만 남는 세로 공간에 맞춰 줄인다. 내 함대판과 조작 영역은 유지한다. */ .bs-main .bs-enemy-wrap { width:min(100%,var(--bs-enemy-size,280px)); } .bs-main .bs-board.place { width:min(100%,var(--bs-place-size,272px)); } /* 좋소 키우기 — 블록 블라스트 */ .bb-main { display:flex; flex-direction:column; align-items:center; gap:10px; flex:1 1 auto; min-height:0; } .bb-board { position:relative; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; width:min(100%,300px); padding:6px; box-sizing:border-box; border-radius:12px; background:linear-gradient(160deg,#2b2f4a,#1b1e33); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.3); touch-action:none; } .bb-board > i { aspect-ratio:1; border-radius:4px; background:rgba(255,255,255,0.06) center/cover no-repeat; transition:background-color 0.1s; } .bb-board > i.on { background-color:transparent; box-shadow:0 1px 2px rgba(0,0,0,0.35); } .bb-board > i.ghost { background-color:rgba(255,255,255,0.35); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.7); } .bb-board > i.clear { box-shadow:inset 0 0 0 2px #ffd54f, 0 0 10px #ffd54f; } .bb-board > i.boom { animation:bbBoom 0.45s ease-out; } .bb-board.placed { animation:bbPlaced 0.18s ease-out; } .bb-tray { display:flex; justify-content:space-around; align-items:center; width:min(100%,300px); min-height:104px; gap:6px; } .bb-slot { flex:1; height:104px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--input-bg); border:1px solid var(--border2); cursor:grab; touch-action:none; } .bb-slot:empty { cursor:default; opacity:0.4; } .bb-slot.no { opacity:0.35; filter:grayscale(0.8); } .bb-slot.lifted .bb-piece { opacity:0.25; } .bb-piece { position:relative; display:block; pointer-events:none; } .bb-t { position:absolute; display:block; border-radius:3px; background:center/cover no-repeat; box-shadow:0 1px 2px rgba(0,0,0,0.3); } .bb-drag { position:fixed; z-index:10000; pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.4)); } .bb-drag .bb-t { box-shadow:0 0 0 1px rgba(255,255,255,0.5); } .bb-fx { position:absolute; inset:0; pointer-events:none; } .bb-pts { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); white-space:nowrap; font-size:20px; font-weight:900; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.7); animation:bbPts 1.1s ease-out forwards; } .bb-pts b { color:#ffd54f; } .bb-pts em { font-style:normal; color:#ff8a65; } /* 블록 블라스트 — 콤보·난이도 줄 */ .bb-combo { display:flex; align-items:center; gap:6px; width:min(100%,300px); min-height:20px; font-size:11.5px; color:var(--text2); } .bb-combo b { color:#ff7043; } .bb-combo small { color:var(--text3); font-size:10.5px; } .bb-keep { color:#ffb300; letter-spacing:1px; font-size:11px; } .bb-combo.hot .bb-keep { color:#e53935; animation:ocAtk 0.5s ease-in-out infinite alternate; } .bb-lv { margin-left:auto; font-size:10.5px; color:#ab47bc; white-space:nowrap; } .bb-pts.lost { color:#ff8a80; font-size:16px; } /* 블록 블라스트 회전·바꾸기(v2.32) */ .bb-slot { position:relative; } .bb-slot.no { opacity:1; filter:none; } .bb-slot.no .bb-piece { opacity:0.35; filter:grayscale(0.8); } .bb-rot { position:absolute; right:4px; bottom:4px; width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1.5px solid var(--accent); background:var(--surface); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.3); } .bb-rot .gm-ic { height:18px; margin:0; } .bb-rot:active { transform:scale(0.9); } .bb-items { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:6px; font-size:12px; font-weight:700; color:var(--text2); } .bb-item { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:999px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font:inherit; } .bb-item .gm-ic { height:18px; margin:0; } .bb-item b { color:var(--accent); } .bb-item.swap { cursor:pointer; border-color:var(--accent); } .bb-item.off { opacity:0.45; } .bb-item.swap.off { cursor:default; border-color:var(--border); } /* 좋소 키우기 — 슬롯머신 */ .sl-main { display:flex; flex-direction:column; align-items:center; gap:8px; flex:1 1 auto; min-height:0; } .sl-machine { position:relative; width:min(100%,300px); padding:12px 12px 10px; box-sizing:border-box; border-radius:18px; text-align:center; background:linear-gradient(180deg,#c62828,#7f0000); box-shadow:inset 0 0 0 3px #ffd54f, inset 0 0 0 6px #b71c1c, 0 6px 16px rgba(0,0,0,0.35); } .sl-lights { height:8px; margin:-4px 6px 8px; border-radius:4px; background:repeating-linear-gradient(90deg,#ffeb3b 0 8px,transparent 8px 16px); animation:slLights 0.8s steps(2) infinite; opacity:0.85; } .sl-reels { position:relative; display:flex; gap:6px; padding:6px; border-radius:12px; background:#2b1b1b; box-shadow:inset 0 3px 8px rgba(0,0,0,0.6); } .sl-reel { flex:1; height:180px; overflow:hidden; border-radius:8px; background:linear-gradient(180deg,#e0e0e0,#fff 30%,#fff 70%,#e0e0e0); } .sl-strip { will-change:transform; } .sl-sym { height:60px; display:flex; align-items:center; justify-content:center; } .sl-sym img { height:44px; width:auto; filter:drop-shadow(0 2px 2px rgba(0,0,0,0.25)); } .sl-line { position:absolute; left:2px; right:2px; top:50%; height:62px; transform:translateY(-50%); border-top:2px solid rgba(255,213,79,0.9); border-bottom:2px solid rgba(255,213,79,0.9); pointer-events:none; box-shadow:0 0 10px rgba(255,213,79,0.5); } .sl-result { margin-top:8px; min-height:20px; color:#fff; font-size:13px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.6); } .sl-result b { color:#ffd54f; font-size:16px; } .sl-machine.win .sl-line { animation:slWin 0.4s ease-in-out 4 alternate; } .sl-machine.jackpot { animation:slJack 0.3s ease-in-out 8 alternate; } .sl-bets { display:flex; gap:6px; width:min(100%,300px); } .sl-bet { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px; border-radius:10px; border:1.5px solid var(--border); background:var(--input-bg); color:var(--text2); font-family:inherit; cursor:pointer; } .sl-bet b { font-size:12.5px; color:var(--text); } .sl-bet small { font-size:10px; color:var(--text3); } .sl-bet.on { border-color:#ffb300; background:rgba(255,179,0,0.15); } .sl-spin { width:min(100%,300px); padding:12px; border:none; border-radius:14px; font-family:inherit; font-size:17px; font-weight:900; color:#3e2700; cursor:pointer; background:linear-gradient(180deg,#ffe082,#ffb300); box-shadow:0 5px 0 #c77c00, 0 8px 14px rgba(0,0,0,0.3); } .sl-spin:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 #c77c00; } .sl-spin:disabled { opacity:0.6; cursor:progress; } .sl-table { display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; width:min(100%,300px); font-size:11px; color:var(--text2); } .sl-table span { display:flex; align-items:center; gap:1px; } .sl-table img { height:16px; width:auto; } .sl-table b { margin-left:4px; color:var(--text); } .sl-table em { font-style:normal; font-size:9.5px; color:#ef6c00; margin-left:3px; } .sl-table .sl-pair { grid-column:1/-1; color:var(--text3); } .sl-spin small { font-size:11px; font-weight:700; opacity:0.75; margin-left:4px; } .sl-bet b { font-size:14px; } /* 탕탕 야근대(v2.44) — 캔버스 + 위에 덮는 카드(레벨 업·일시정지·결과) */ .sv-guide { color:var(--text); font-size:12px; line-height:1.55; } .sv-guide-hero { display:block; width:150px; max-width:60%; height:auto; margin:2px auto 6px; } .sv-guide p { margin:0 0 8px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface); } .sv-guide .sv-guide-intro { text-align:center; background:var(--accent-bg); } .sv-guide b { color:var(--text); } .sv-wrap { position:relative; display:flex; flex:1 1 auto; min-height:220px; border-radius:12px; overflow:hidden; background:#2c2f38; touch-action:none; } .gm-body.fixed > .sv-wrap { flex:1 1 auto; min-height:0; } .sv-wrap .sv-cv { flex:1 1 auto; width:100%; height:100%; min-height:0; display:block; border-radius:0; touch-action:none; } .sv-ov { position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:10px; background:rgba(10,12,20,0.55); z-index:3; } .sv-ov.on { display:flex; animation:gmFade 0.15s; } .sv-card { width:100%; max-width:330px; max-height:100%; overflow:auto; box-sizing:border-box; padding:14px 12px 10px; border-radius:14px; background:var(--surface); box-shadow:0 10px 26px rgba(0,0,0,0.45); text-align:center; } .sv-card.win { box-shadow:0 0 0 2px #ffcf4a, 0 10px 26px rgba(0,0,0,0.45); } .sv-card-t { display:flex; align-items:center; justify-content:center; gap:6px; font-size:17px; font-weight:900; color:var(--text); margin-bottom:8px; } .sv-card-t .gm-ic { height:24px; margin:0; } .sv-stat { font-size:12.5px; color:var(--text2); margin:4px 0; } .sv-stat b { color:var(--accent); } .sv-weaps { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:6px 0; } .sv-weaps span { display:inline-flex; align-items:center; gap:2px; padding:2px 6px 2px 3px; border-radius:999px; background:var(--input-bg); font-size:11px; font-weight:800; color:var(--text2); } .sv-weaps img { height:20px; width:auto; } .sv-card .gm-btn { margin-top:6px; } .sv-pick { position:relative; display:flex; align-items:center; gap:10px; width:100%; margin-top:6px; padding:9px 10px; border-radius:12px; border:1.5px solid var(--border); background:var(--input-bg); color:var(--text); font-family:inherit; text-align:left; cursor:pointer; } .sv-pick:hover, .sv-pick:active { border-color:var(--accent); transform:translateY(-1px); } .sv-pick.new { border-color:#3fb950; } .sv-pick img { width:40px; height:40px; object-fit:contain; flex-shrink:0; } .sv-pick b { display:block; font-size:13.5px; } .sv-pick em { font-style:normal; font-size:10.5px; color:#fff; background:#3fb950; padding:1px 6px; border-radius:999px; margin-left:3px; vertical-align:1px; } .sv-pick small { display:block; font-size:11px; color:var(--text2); margin-top:1px; } .sv-pick i { position:absolute; right:8px; top:6px; font-style:normal; font-size:10px; color:var(--text3); } .sv-pause-btn { margin-right:4px; } /* 탕탕 야근대 운 요소(v2.49) — 등급 배지 · 카드 희귀도 */ .sv-tier { display:inline-block; min-width:16px; margin-right:5px; padding:0 4px; border-radius:5px; font-size:10.5px; font-weight:900; text-decoration:none; text-align:center; color:#fff; vertical-align:1px; } .sv-tier.tS { background:linear-gradient(135deg,#ff6b6b,#ffb300); } .sv-tier.tA { background:#7e57c2; } .sv-tier.tB { background:#78909c; } .sv-rare { position:absolute; left:8px; top:-8px; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:900; color:#fff; letter-spacing:0.3px; } .sv-pick.rare-r { border-color:#42a5f5; box-shadow:0 0 0 1px #42a5f5, 0 0 12px rgba(66,165,245,0.45); } .sv-pick.rare-r .sv-rare { background:#42a5f5; } .sv-pick.rare-e { border-color:#ab47bc; box-shadow:0 0 0 1px #ab47bc, 0 0 14px rgba(171,71,188,0.55); } .sv-pick.rare-e .sv-rare { background:#ab47bc; } .sv-pick.rare-l { border-color:#ffb300; background:linear-gradient(135deg, rgba(255,179,0,0.18), rgba(255,107,107,0.12)); box-shadow:0 0 0 1px #ffb300, 0 0 18px rgba(255,179,0,0.7); animation:svLegend 1.2s ease-in-out infinite alternate; } .sv-pick.rare-l .sv-rare { background:linear-gradient(90deg,#ff6b6b,#ffb300); } .sv-card .sv-pick { margin-top:10px; } /* 탕탕 야근대 슬롯·최대 레벨(v2.50) */ .sv-slots { margin:-4px 0 2px; font-size:11.5px; color:var(--text2); } .sv-slots b { color:var(--accent); } .sv-max { font-size:10.5px; font-weight:600; color:var(--text3); } .sv-items { display:grid; gap:6px; margin:0 0 8px; } .sv-items > div { display:flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); } .sv-items img { width:34px; height:34px; object-fit:contain; flex:none; } .sv-items span { flex:1; min-width:0; } .sv-items b { display:block; } /* 2.74 — 지뢰찾기 */ .ms-pick { display:flex; flex-direction:column; gap:8px; padding:4px 2px 8px; } .ms-diff { display:grid; grid-template-columns:46px 1fr; column-gap:12px; row-gap:1px; align-items:center; text-align:left; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); font:inherit; cursor:pointer; transition:border-color .15s, transform .1s; } .ms-diff:hover { border-color:var(--accent); } .ms-diff:active { transform:scale(.98); } .ms-diff img { grid-row:1 / span 3; width:46px; height:46px; object-fit:contain; } .ms-diff b { font-size:14px; } .ms-diff b small { margin-left:4px; padding:1px 6px; border-radius:99px; background:rgba(232,108,36,.15); color:var(--accent); font-size:10.5px; } .ms-diff > small { color:var(--text3); font-size:11px; } .ms-main { display:flex; justify-content:center; } .ms-main.extreme { flex:1 1 auto; min-height:0; align-items:center; justify-content:center; overflow:hidden; } .ms-board { position:relative; display:grid; gap:2px; width:min(100%, calc(var(--ms-c) * 34px + 12px)); padding:6px; box-sizing:border-box; border-radius:12px; background:linear-gradient(180deg,#7da34a,#5f8236); box-shadow:inset 0 2px 6px rgba(0,0,0,.25); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; } .ms-board.extreme { flex:none; width:auto; gap:2px; padding:4px; align-content:start; } .ms-board.extreme > i { width:var(--ms-cell); height:var(--ms-cell); aspect-ratio:auto; border-radius:3px; font-size:clamp(10px,calc(var(--ms-cell) * .68),18px); } .gm-widget.ms-wide { width:min(760px,calc(100vw - 16px)); max-width:calc(100vw - 16px); max-height:calc(100vh - 12px); max-height:calc(100svh - 12px); right:6px; bottom:6px; } .gm-widget.gm-standalone.ms-wide { width:min(760px,100vw); max-width:100vw; height:100vh; height:100svh; max-height:100vh; max-height:100svh; } .gm-body.fixed.ms-wide-body { height:min(840px,calc(100vh - 75px)) !important; height:min(840px,calc(100svh - 75px)) !important; overflow:hidden; overscroll-behavior:none; } /* 안내 문구와 점수의 줄 수가 바뀌어도 판에 할당되는 높이는 유지한다. */ .gm-body.fixed:has(> .ms-main) { scrollbar-gutter:stable; } .gm-body.fixed:has(> .ms-main) > .ms-bar { height:48px; box-sizing:border-box; } .gm-body.fixed:has(> .ms-main) > .ms-bar > span { max-height:100%; overflow-y:auto; } .gm-body.fixed:has(> .ms-main) > #msInfo { height:52px; min-height:52px; max-height:52px; box-sizing:border-box; overflow-y:auto; overflow-wrap:anywhere; } .ms-board > i.shield-hit { z-index:2; box-shadow:0 0 0 3px #85e5ff,0 0 18px 7px #54c7ff; animation:msShield 1.1s ease-out; } .ms-shield-fx { position:absolute; left:50%; top:0; z-index:5; transform:translate(-50%,-100%); white-space:nowrap; padding:3px 7px; border-radius:8px; background:#176d95; color:#fff; font-size:13px; font-weight:900; pointer-events:none; animation:msShieldText 1.1s ease-out forwards; } @keyframes msShield { 0%,35% { filter:brightness(1.5); } 100% { filter:none; } } @keyframes msShieldText { 0% { opacity:0; transform:translate(-50%,-30%); } 25% { opacity:1; transform:translate(-50%,-110%); } 100% { opacity:0; transform:translate(-50%,-180%); } } .ms-board > i { position:relative; min-width:0; min-height:0; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:5px; font-style:normal; font-weight:900; font-size:clamp(11px,4.2vw,16px); line-height:1; background:#d8c49a url("assets/game/ui/mine-tile.png") center/130% no-repeat; box-shadow:inset 0 -3px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.35); cursor:pointer; transition:transform .08s; } /* 2.85 — 누르는 동안 움푹(원작처럼). 안 연 칸은 볼록, 꺼진 칸은 연 칸처럼 납작하게 + 안쪽 그림자 */ .ms-board > i.sink { background:#d6c8a3 none; box-shadow:inset 0 3px 5px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.35); transform:translateY(1px); transition:none; } @media (hover:hover) { .ms-board > i:not(.o):not(.sink):hover { filter:brightness(1.07); } } .ms-board.flagging > i:not(.o) { box-shadow:inset 0 0 0 2px rgba(229,57,53,.55), inset 0 -3px 0 rgba(0,0,0,.22); } .ms-board > i.o { background:#f1e8d2; box-shadow:inset 0 1px 2px rgba(0,0,0,.18); cursor:default; animation:msOpen .14s ease-out; } .ms-board > i > img { position:absolute; inset:10%; width:80%; height:80%; object-fit:contain; pointer-events:none; } .ms-board > i.f > img { animation:msFlag .2s ease-out; } .ms-board > i.x { background:#ff7a66; } .ms-board > i.m.ok { background:#cfe8b0; } .ms-board > i.wf::after { content:''; position:absolute; inset:18%; background:linear-gradient(45deg,transparent 44%,#d32f2f 44%,#d32f2f 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#d32f2f 44%,#d32f2f 56%,transparent 56%); } .ms-board > i.n1 { color:#1e6fd9; } .ms-board > i.n2 { color:#2e8b3a; } .ms-board > i.n3 { color:#d93025; } .ms-board > i.n4 { color:#5b2bb5; } .ms-board > i.n5 { color:#8b1a1a; } .ms-board > i.n6 { color:#0f8a8a; } .ms-board > i.n7 { color:#222; } .ms-board > i.n8 { color:#777; } .ms-bar { display:flex; justify-content:space-between; align-items:center; margin:8px 2px 0; font-size:12px; color:var(--text3); } .ms-bar > span { text-align:right; } .ms-bar b { color:var(--text); } .ms-mode { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border:1px solid var(--border); border-radius:99px; background:var(--surface); color:var(--text2); font:inherit; font-size:12px; font-weight:700; cursor:pointer; } .ms-mode.on { border-color:#e53935; background:rgba(229,57,53,.14); color:var(--text); } .ms-mode .gm-ic { width:16px; height:16px; } @keyframes msOpen { from { transform:scale(.85); } to { transform:none; } } @keyframes msFlag { from { transform:translateY(-6px) scale(1.2); } to { transform:none; } } /* 2.88 — 윷놀이(같이 하기 · 판에 던지기 · 연출) */ .yt-lobby { display:flex; flex-direction:column; gap:6px; } .yt-cands { display:flex; gap:6px; overflow-x:auto; padding:2px 2px 6px; } .yt-cand { flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; width:62px; padding:6px 2px 4px; border:1.5px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text2); font:inherit; cursor:pointer; } .yt-cand img { height:62px; width:auto; max-width:54px; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)); } .yt-cand small { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58px; } .yt-cand.on { border-color:var(--accent); background:var(--accent-bg); color:var(--text); box-shadow:0 0 0 2px rgba(232,115,42,.25); } .yt-opts { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:11px; color:var(--text3); } .yt-opts span { margin-left:6px; } .yt-opts span:first-child { margin-left:0; } .yt-opts button { padding:3px 9px; border:1px solid var(--border); border-radius:99px; background:var(--surface); color:var(--text2); font:inherit; font-size:11px; cursor:pointer; } .yt-opts button.on { border-color:var(--accent); color:var(--text); background:var(--accent-bg); font-weight:800; } .yt-room-faces { display:flex; } .yt-room-faces img { height:30px; width:auto; margin-right:-4px; } .yt-wait-seat { border-color:var(--c) !important; } .yt-seat-img { height:46px; width:auto; object-fit:contain; } .yt-trays.top { display:flex; gap:4px; } .yt-trays.top .yt-tray { flex:1; min-width:0; } .yt-tray { position:relative; display:flex; align-items:center; gap:5px; padding:3px 6px; border-radius:10px; border:1.5px solid color-mix(in srgb, var(--c) 45%, var(--border)); background:color-mix(in srgb, var(--c) 9%, var(--surface)); font-size:11px; color:var(--text3); min-height:42px; } .yt-tray.turn { border-color:var(--c); box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); } .yt-tray-img { height:36px; width:auto; max-width:28px; object-fit:contain; flex:none; } .yt-tray-t { display:flex; flex-direction:column; min-width:0; line-height:1.15; } .yt-tray-t b { color:var(--text); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .yt-tray-t small { font-size:9.5px; color:var(--c); font-weight:700; } .yt-trays.top .yt-wait { display:none; } .yt-wait { flex:1; display:flex; gap:1px; align-items:flex-end; min-width:0; justify-content:flex-end; } .yt-wait small { font-size:10px; } .yt-w { padding:0; border:0; background:none; height:34px; cursor:default; border-radius:8px; position:relative; } .yt-w img { height:34px; width:auto; max-width:24px; object-fit:contain; } .yt-w.can, .yt-pc.can { cursor:pointer; } .yt-w.can { box-shadow:0 0 0 2px #ffd54f, 0 0 10px #ffd54f; animation:ytBob .7s ease-in-out infinite alternate; } .yt-home { display:flex; align-items:center; gap:2px; flex:none; } .yt-home b { color:var(--text); font-size:13px; } .yt-home .gm-ic { width:14px; height:14px; } .yt-timer { position:absolute; left:6px; right:6px; bottom:2px; height:2px; border-radius:2px; background:var(--c); transform-origin:left; animation:ytTimer var(--t) linear forwards; } .yt-me-row { display:flex; gap:6px; align-items:stretch; } .yt-me-row .yt-tray { flex:1; min-width:0; } .yt-emo-wrap { position:relative; display:flex; align-items:center; } .yt-emo-wrap .oc-emo-pal { bottom:100%; right:0; top:auto; } .yt-stage { padding:12px 10px; margin:6px 0; border-radius:14px; background:repeating-linear-gradient(45deg, #c9a46a 0 6px, #b8925a 6px 12px), #c9a46a; box-shadow:inset 0 0 0 3px rgba(90,60,25,.35), inset 0 0 30px rgba(60,35,10,.35); } .yt-board { position:relative; width:min(100%,330px); aspect-ratio:1; margin:0 auto; border-radius:10px; cursor:default; background:radial-gradient(circle at 50% 45%, #f6dfaf, #e4c088 70%, #d2a868); box-shadow:0 0 0 5px #8a5a2b, 0 0 0 7px #5d3a17, 0 10px 22px rgba(40,20,0,.45); user-select:none; -webkit-user-select:none; touch-action:manipulation; } .yt-board.throwable { cursor:pointer; } .yt-board.burst { animation:ytBurst .9s ease-out; } .yt-board.shake { animation:none; } /* 2.95 — 잡을 때 판 흔들림 없앰(불편하다는 의견) */ .yt-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .yt-lines rect, .yt-lines line { fill:none; stroke:#8a5a2b; stroke-width:2.2px; vector-effect:non-scaling-stroke; stroke-dasharray:1 0; } .yt-node { position:absolute; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #6e4320, #4a2a10); box-shadow:inset 0 2px 3px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.5); pointer-events:none; } .yt-node.big { width:26px; height:26px; margin:-13px 0 0 -13px; box-shadow:inset 0 3px 5px rgba(0,0,0,.6), 0 0 0 3px #e9c98f, 0 0 0 5px #8a5a2b; } .yt-node.start { background:radial-gradient(circle at 40% 35%, #c0392b, #7b1d14); } .yt-start-lb { position:absolute; transform:translate(calc(-100% - 18px),-50%); font-size:10.5px; font-weight:900; color:#7b1d14; white-space:nowrap; pointer-events:none; text-shadow:0 1px 0 rgba(255,255,255,.6); } .yt-pcs, .yt-dests, .yt-sticks, .yt-fx { position:absolute; inset:0; } .yt-pcs { pointer-events:none; } .yt-sticks, .yt-fx { pointer-events:none; } .yt-dests { pointer-events:none; } .yt-pc { position:absolute; width:36px; height:48px; margin:-40px 0 0 -18px; padding:0; border:0; background:none; pointer-events:auto; cursor:default; isolation:isolate; z-index:2; } .yt-pc img { position:absolute; left:calc(var(--o) * 7px); bottom:calc(var(--o) * 4px); height:44px; width:auto; max-width:38px; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); } .yt-pc::after { content:''; position:absolute; left:2px; right:2px; bottom:-5px; height:11px; border-radius:50%; z-index:-1; background:var(--c); border:2px solid #fff; box-sizing:border-box; box-shadow:0 0 6px var(--c); } .yt-pc b { position:absolute; right:-7px; top:-4px; padding:0 4px; border-radius:99px; background:var(--c); color:#fff; font-size:10px; line-height:15px; border:1.5px solid #fff; } .yt-pc.can { animation:ytBob .7s ease-in-out infinite alternate; } .yt-pc.can::before { content:''; position:absolute; inset:-4px -3px -7px; border-radius:12px; box-shadow:0 0 0 2px #ffd54f, 0 0 12px #ffd54f; } .yt-pc.picked::before, .yt-w.picked { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--c, #2f80ed), 0 0 16px #fff !important; } .yt-pc.moving { z-index:5; pointer-events:none; } .yt-dest { position:absolute; transform:translate(-50%,-50%); min-width:30px; height:30px; padding:0 6px; border-radius:99px; border:2px dashed #fff; background:color-mix(in srgb, var(--c) 82%, transparent); color:#fff; font:inherit; font-weight:900; font-size:12px; pointer-events:auto; cursor:pointer; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 3px 8px rgba(0,0,0,.35); animation:ytDest .9s ease-in-out infinite alternate; } .yt-dest small { font-size:8.5px; font-weight:700; } .yt-dest.end { height:38px; } .yt-dest:hover { transform:translate(-50%,-50%) scale(1.15); animation:none; } .yt-hint { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:none; align-items:center; gap:5px; padding:7px 14px; border-radius:99px; background:rgba(60,35,10,.78); color:#fff; font-weight:800; font-size:12.5px; pointer-events:none; white-space:nowrap; } .yt-hint.on { display:flex; animation:ytHint 1s ease-in-out infinite alternate; } .yt-stick { position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; object-fit:contain; filter:drop-shadow(0 4px 3px rgba(40,20,0,.45)); } .yt-stick.round { width:24px; height:52px; margin:-26px 0 0 -12px; } .yt-sticks.dim .yt-stick { opacity:.22; transition:opacity .5s; } .yt-call { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; pointer-events:none; animation:ytCall 1s ease-out forwards; z-index:6; } .yt-call b { padding:6px 18px; border-radius:99px; background:rgba(40,25,10,.82); color:#fff; font-size:26px; font-weight:900; letter-spacing:1px; box-shadow:0 4px 14px rgba(0,0,0,.4); } .yt-call.back b { background:linear-gradient(135deg,#5e35b1,#311b92); } .yt-call.big b { font-size:48px; padding:4px 26px; background:linear-gradient(135deg,#ffeb3b,#ff9800 45%,#e91e63); color:#fff; text-shadow:0 2px 0 #b71c1c, 0 0 18px #fff59d; border:3px solid #fff; animation:ytGlow .5s ease-in-out infinite alternate; } .yt-call.big small { margin-top:4px; padding:2px 12px; border-radius:99px; background:#fff; color:#e65100; font-weight:900; font-size:14px; } .yt-call.big { animation:ytCallBig 1.5s ease-out forwards; } .yt-pop { position:absolute; left:50%; top:46%; width:70%; transform:translate(-50%,-50%); pointer-events:none; animation:ytPop 1.2s ease-out forwards; z-index:5; } .yt-spark { position:absolute; left:50%; top:46%; width:10px; height:10px; margin:-5px; border-radius:50%; background:radial-gradient(circle,#fff,#ffd54f 45%,transparent 70%); animation:ytSpark 1s ease-out forwards; z-index:5; } .yt-burst { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; pointer-events:none; z-index:6; animation:ytCall 1.1s ease-out forwards; } .yt-burst img { width:74px; height:auto; } .yt-burst b { margin-top:-18px; padding:2px 10px; border-radius:99px; background:#e53935; color:#fff; font-size:13px; font-weight:900; border:2px solid #fff; white-space:nowrap; } .yt-bub { position:absolute; left:6px; bottom:100%; margin-bottom:4px; display:flex; align-items:center; gap:4px; padding:4px 9px 4px 4px; border-radius:14px; background:#fff; color:#3a2600; font-size:12px; font-weight:800; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.3); z-index:20; animation:ytBub 2.6s ease-out forwards; } .yt-bub::after { content:''; position:absolute; left:16px; bottom:-6px; border:6px solid transparent; border-top-color:#fff; border-bottom:0; } .yt-bub img { width:28px; height:28px; object-fit:contain; } .yt-bub.emo { padding:3px; } .yt-bub.emo img { width:40px; height:40px; } .yt-bub.taunt { background:#fff8e1; color:#e65100; } .yt-bub.ouch { background:#ffebee; color:#c62828; } .yt-trays.top .yt-bub { bottom:auto; top:100%; margin:4px 0 0; } .yt-trays.top .yt-bub::after { bottom:auto; top:-6px; border-top:0; border-bottom:6px solid #fff; } .yt-res { display:flex; align-items:center; gap:4px; flex-wrap:wrap; min-height:30px; margin-top:6px; } .yt-res-lb { font-size:11px; color:var(--text3); margin-right:2px; } .yt-chip { display:inline-flex; align-items:baseline; gap:2px; padding:3px 10px; border-radius:99px; border:1.5px solid #c9a46a; background:linear-gradient(#fff6e0,#f3dfb3); color:#5d3a17; font-size:14px; font-weight:900; } .yt-chip small { font-size:9.5px; opacity:.7; } .yt-chip.v4, .yt-chip.v5 { background:linear-gradient(135deg,#ffeb3b,#ff9800); border-color:#e65100; color:#fff; text-shadow:0 1px 0 #b71c1c; } .yt-chip.v-1 { background:#ede7f6; border-color:#7e57c2; color:#4527a0; } .yt-log { min-height:16px; } .yt-me { color:var(--accent); } @keyframes ytBob { from { transform:translateY(0); } to { transform:translateY(-4px); } } @keyframes ytDest { from { box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent), 0 3px 8px rgba(0,0,0,.35); } to { box-shadow:0 0 0 7px color-mix(in srgb, var(--c) 15%, transparent), 0 3px 8px rgba(0,0,0,.35); } } @keyframes ytHint { from { opacity:.75; transform:translate(-50%,-50%) scale(.97); } to { opacity:1; transform:translate(-50%,-50%) scale(1.03); } } @keyframes ytCall { 0% { opacity:0; transform:translate(-50%,-50%) scale(.5); } 18% { opacity:1; transform:translate(-50%,-50%) scale(1.12); } 70% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-62%) scale(1); } } @keyframes ytCallBig { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-12deg); } 15% { opacity:1; transform:translate(-50%,-50%) scale(1.3) rotate(4deg); } 30% { transform:translate(-50%,-50%) scale(1) rotate(0); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-60%) scale(1.05); } } @keyframes ytGlow { from { box-shadow:0 0 10px #ffeb3b, 0 4px 14px rgba(0,0,0,.4); } to { box-shadow:0 0 28px #ff9800, 0 4px 14px rgba(0,0,0,.4); } } @keyframes ytPop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(-20deg); } 25% { opacity:1; transform:translate(-50%,-50%) scale(1.1) rotate(5deg); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(15deg); } } @keyframes ytSpark { from { opacity:1; transform:rotate(var(--a)) translateX(0) scale(1.4); } to { opacity:0; transform:rotate(var(--a)) translateX(var(--d)) scale(.4); } } @keyframes ytBurst { 0% { box-shadow:0 0 0 5px #8a5a2b, 0 0 0 7px #5d3a17, 0 0 0 0 rgba(255,215,64,0); filter:brightness(1) } 20% { box-shadow:0 0 0 5px #ffd54f, 0 0 0 7px #ff9800, 0 0 60px 20px rgba(255,215,64,.9); filter:brightness(1.35) } 40% { } 100% { box-shadow:0 0 0 5px #8a5a2b, 0 0 0 7px #5d3a17, 0 0 0 0 rgba(255,215,64,0); filter:brightness(1) } } @keyframes ytShake { 0%,100% { transform:none; } 20% { transform:translateX(-6px) rotate(-.6deg); } 40% { transform:translateX(5px) rotate(.5deg); } 60% { transform:translateX(-4px); } 80% { transform:translateX(3px); } } @keyframes ytBub { 0% { opacity:0; transform:translateY(6px) scale(.7); } 10% { opacity:1; transform:translateY(0) scale(1.05); } 18% { transform:scale(1); } 85% { opacity:1; } 100% { opacity:0; transform:translateY(-6px); } } @keyframes ytTimer { from { transform:scaleX(var(--f,1)); } to { transform:scaleX(0); } } /* 2.99 — 남은 비율에서 시작(다시 그릴 때마다 꽉 차던 문제) */ /* 2.89 — 윷놀이 그림 리소스(판·멍석·윷가락·효과·대문) */ .yt-stage { padding:22px 20px; background:url("assets/game/ui/yut-mat.png") center/100% 100% no-repeat; box-shadow:none; } .yt-board { background:url("assets/game/ui/yut-board-plain.png") center/100% 100% no-repeat; box-shadow:0 10px 18px rgba(40,20,0,.45); border-radius:6px; } .yt-lines rect, .yt-lines line { stroke:#7a4a1e; stroke-width:2.6px; opacity:.85; } .yt-gate { position:absolute; width:58px; height:auto; transform:translate(-50%,-62%); pointer-events:none; z-index:1; filter:drop-shadow(0 3px 3px rgba(0,0,0,.4)); } .yt-start-lb { transform:translate(calc(-100% - 16px),-50%); } .yt-stick, .yt-stick.round { width:78px; height:auto; margin:-11px 0 0 -39px; } .yt-pop { width:86%; top:46%; } .yt-pop.back { width:70%; } .yt-burst img { width:82px; } .yt-emo-pal { flex-wrap:wrap; width:180px; } /* 2.89 — 말을 칸 한가운데에(그림이 왼쪽에 붙고 받침이 칸 아래로 내려가 있었음) · 누르는 영역 가로로 넓게 */ .yt-pc { width:52px; height:56px; margin:-50px 0 0 -26px; } .yt-pc img { left:50%; bottom:calc(var(--o) * 4px + 3px); transform:translateX(calc(-50% + var(--o) * 8px)); } .yt-pc::after { left:50%; right:auto; width:34px; margin-left:-17px; bottom:0; } .yt-pc.can::before { inset:-2px 0 -4px; } .yt-w { min-width:30px; display:flex; justify-content:center; } /* 2.89 — 세로 스크롤 없이 한 화면에: 판 영역이 남는 높이를 다 쓰고, 판 크기는 JS(ytFit)가 맞춤 */ .gm-body.fixed > .yt-stage { flex:1 1 0; min-height:0; display:flex; align-items:center; justify-content:center; padding:12px; margin:5px 0; } .yt-stage .yt-board { margin:0; flex:none; } .yt-trays.top .yt-tray { min-height:34px; padding:2px 6px; } .yt-trays.top .yt-tray-img { height:28px; } .yt-tray.me { min-height:38px; padding:2px 8px; } .yt-tray.me .yt-tray-img { height:32px; } .yt-w, .yt-w img { height:30px; } .yt-me-row .oc-emo-btn { width:40px; height:40px; padding:0; margin:0; display:flex; align-items:center; justify-content:center; } .yt-me-row .oc-emo-btn img { width:26px; height:26px; } .yt-bottom { display:flex; align-items:center; gap:6px; min-height:28px; margin-top:4px; } .yt-bottom .yt-res { margin:0; min-height:0; flex:none; } .yt-bottom .yt-log { flex:1; min-width:0; font-size:11px; color:var(--text3); text-align:right; line-height:1.3; } .yt-bottom .yt-log b { color:var(--text); } .gm-body.fixed > .yt-lobby { flex:1 1 0; min-height:0; } .yt-lobby .oc-rooms { flex:1 1 0; min-height:40px; overflow-y:auto; } .yt-lobby .yt-cand img { height:54px; } .gm-body.fixed > .yt-lobby { overflow-y:auto; } .yt-lobby > * { flex-shrink:0; } .yt-lobby .gm-lobby-art { width:64px; margin-bottom:0; } /* 5.36 좁은 창에서 말 고르기가 눌려 잘리던 문제 */ /* 3.01 — 애니팡: 60초 7×7 동물 맞추기 */ .ap-head { display:flex; align-items:center; gap:8px; padding:4px 5px 2px; min-height:36px; color:var(--text2); } .ap-head strong { flex:none; min-width:72px; font-size:22px; font-variant-numeric:tabular-nums; color:var(--accent); } .ap-head span { flex:1; text-align:center; font-size:11px; font-weight:800; } .ap-head b { flex:none; font-size:15px; font-variant-numeric:tabular-nums; color:var(--text); } .ap-time { height:7px; flex:none; margin:0 5px 7px; border-radius:9px; background:var(--border2); overflow:hidden; } .ap-time i { display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg,#ff8f33,#ffcc31); transition:width .1s linear; } .ap-main { min-height:195px; flex:1 1 auto; display:flex; justify-content:center; align-items:center; overflow:hidden; } .gm-body.fixed.ap-body { height:min(600px,calc(100dvh - 75px)) !important; overflow:hidden; } .gm-body.fixed > .ap-main { flex:1 1 auto; min-height:175px; } .ap-board { flex:none; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(7,minmax(0,1fr)); gap:2px; padding:5px; border-radius:15px; background:linear-gradient(145deg,#6551a0,#384f86); box-shadow:inset 0 3px 7px rgba(0,0,0,.3),0 3px 10px rgba(0,0,0,.2); touch-action:none; user-select:none; -webkit-user-select:none; } .ap-board.fever { box-shadow:0 0 0 3px #ffc440,0 0 20px 7px rgba(255,176,20,.65),inset 0 3px 7px rgba(0,0,0,.3); animation:apFever 1s ease-in-out infinite alternate; } .ap-cell { position:relative; display:grid; place-items:center; min-width:0; min-height:0; padding:1px; border:1px solid rgba(255,255,255,.45); border-radius:9px; background:linear-gradient(#fffdf5,#f1dfb7); box-shadow:inset 0 -3px 0 rgba(155,115,71,.22),0 2px 2px rgba(0,0,0,.2); cursor:pointer; touch-action:none; } .ap-cell > img:first-child { width:94%; height:94%; object-fit:contain; pointer-events:none; } .ap-cell .ap-special { position:absolute; right:-2px; bottom:-2px; width:42%; height:42%; object-fit:contain; filter:drop-shadow(0 1px 2px #3a235a); pointer-events:none; } .ap-cell.dragging { z-index:5; will-change:transform; box-shadow:0 6px 14px rgba(0,0,0,.35),0 0 0 2px #fff; } .ap-cell.drag-target { z-index:3; will-change:transform; } .ap-cell.selected { border-color:#ffba23; box-shadow:0 0 0 3px #ffba23,inset 0 -3px 0 rgba(155,115,71,.22); z-index:1; transform:scale(1.05); } .ap-cell.hint { animation:apHint .8s ease-in-out infinite alternate; } .ap-cell.popping { animation:apPop .15s ease-in forwards; } .ap-cell.invalid { animation:apInvalid .25s ease-out; } .ap-cell:focus-visible { outline:3px solid #ffbd24; outline-offset:-3px; z-index:2; } @keyframes apHint { to { filter:brightness(1.3); transform:scale(1.06); } } @keyframes apPop { to { opacity:0; transform:scale(.3); } } @keyframes apInvalid { 40% { transform:translateX(3px); } 70% { transform:translateX(-3px); } } @keyframes apFever { to { box-shadow:0 0 0 3px #ffc440,0 0 28px 10px rgba(255,176,20,.8),inset 0 3px 7px rgba(0,0,0,.3); } } @media (prefers-reduced-motion:reduce) { .ap-board.fever,.ap-cell.hint,.ap-cell.popping,.ap-cell.invalid { animation:none; } } /* 버스아웃: 시간 제한 없는 스테이지형 주차 퍼즐 */ .bo-top { display:flex; align-items:center; gap:7px; min-height:40px; } .bo-top strong { flex:none; font-size:11px; color:var(--text2); white-space:nowrap; } .bo-queue { display:flex; flex:1; align-items:center; gap:0; overflow:hidden; min-width:0; min-height:34px; padding:2px 4px; border-radius:9px; background:var(--input-bg); } .bo-queue small { flex:none; font-size:10px; color:var(--text2); } .bo-rider { position:relative; flex:0 0 clamp(18px,7%,25px); width:clamp(18px,7%,25px); height:29px; display:grid; place-items:center; border-bottom:3px solid var(--rider); } .bo-rider img { max-width:100%; max-height:25px; object-fit:contain; } .bo-rider b { position:absolute; right:-2px; bottom:0; width:13px; height:13px; border-radius:50%; display:grid; place-items:center; background:var(--rider); border:1px solid #fff; color:#111; font-size:9px; line-height:1; text-shadow:0 1px #fff8; } .bo-slots { display:flex; gap:7px; height:52px; flex:none; margin:3px 0 5px; justify-content:center; background:var(--input-bg); border-radius:10px; padding:4px; box-sizing:border-box; } .bo-slot { width:78px; max-width:28%; height:100%; border:2px dashed var(--border2); border-radius:8px; display:grid; place-items:center; background:var(--surface); overflow:hidden; } .bo-slot > img { width:25px; height:25px; object-fit:contain; opacity:.35; } .bo-slot.full { position:relative; border-style:solid; border-color:var(--bus-color); background:color-mix(in srgb,var(--bus-color) 18%,var(--surface)); } .bo-seats { position:absolute; right:2px; bottom:0; padding:0 2px; border-radius:3px; background:var(--surface); color:var(--text); font-size:10px; line-height:13px; } .bo-empty { font-size:10px; color:var(--text3); } .bo-slot.full > img { width:24px; height:33px; opacity:1; } .bo-main { display:flex; flex:1 1 0; min-height:170px; align-items:center; justify-content:center; overflow:hidden; } .gm-body.fixed > .bo-main { flex:1 1 0; min-height:170px; } .bo-board { position:relative; flex:none; border:5px solid #586477; border-radius:14px; box-sizing:border-box; touch-action:manipulation; overflow:hidden; background-color:#515c6a; background-image:linear-gradient(to right,rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.14) 1px,transparent 1px); background-size:calc(100% / var(--bo-n)) calc(100% / var(--bo-n)); box-shadow:inset 0 0 0 2px #394554,0 5px 12px rgba(0,0,0,.22); } .bo-bus { position:absolute; display:block; padding:0; border:0; background:transparent; cursor:pointer; z-index:2; touch-action:manipulation; } .bo-bus::before { content:''; position:absolute; inset:3px; border-radius:8px; background:color-mix(in srgb,var(--bus-color) 30%,transparent); border:3px solid var(--bus-color); box-shadow:0 0 0 1px #fff; } .bo-color-id { position:absolute; top:2px; left:2px; z-index:4; width:19px; height:19px; display:grid; place-items:center; border-radius:50%; border:2px solid #fff; background:var(--bus-color); color:#111; font-size:12px; font-weight:900; line-height:1; text-shadow:0 1px #fff8; box-shadow:0 1px 3px #0009; } .bo-bus.blocked { opacity:.72; } .bo-bus:not(.blocked):hover { filter:brightness(1.13) drop-shadow(0 0 5px #fff); z-index:3; } .bo-bus:focus-visible { outline:3px solid #ffdf56; outline-offset:-3px; z-index:4; } .bo-vehicle { position:absolute; inset:2px; display:block; pointer-events:none; } .bo-vehicle img { position:absolute; left:50%; top:50%; width:var(--bo-img-w); height:var(--bo-img-h); object-fit:fill; transform:translate(-50%,-50%) rotate(var(--bo-rot)); filter:drop-shadow(0 2px 2px #20222c); } .bo-arrow { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:25px; height:25px; border:2px solid #fff; border-radius:50%; background:#1b2532c9; color:#fff; font-size:19px; font-weight:900; line-height:1; text-shadow:0 1px 2px #000; pointer-events:none; } .bo-bus.shake { animation:boShake .32s ease-in-out; } @keyframes boShake { 25%,75% { translate:-4px 0; } 50% { translate:4px 0; } } .bo-hint { flex:none; min-height:18px; padding-top:5px; text-align:center; font-size:11px; color:var(--text2); } .bo-actions { display:flex; gap:6px; flex:none; margin-top:5px; } .bo-actions .gm-btn { flex:1; margin:0; font-size:11px; padding:6px 3px; } .bo-actions .gm-btn:disabled { opacity:.4; cursor:default; } .gm-body.bo-body { position:relative; } /* 실패 창을 위젯이 아닌 게임판 기준으로 맞춤(4.72) */ .bo-fail { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(280px,86%); box-sizing:border-box; padding:16px 14px; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border-radius:15px; border:2px solid #f77; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 8px 30px #0008; } .bo-fail[hidden] { display:none; } .bo-fail b { color:#e3414f; font-size:17px; } .bo-fail .gm-btn { width:100%; margin:0; } .bo-lobby { flex:1 1 auto; min-height:0; overflow-y:auto; text-align:center; padding:4px 10px; } .bo-lobby > img { display:block; width:min(145px,40%); margin:0 auto; } .bo-lobby h3 { margin:2px 0 5px; font-size:16px; } .bo-lobby p { margin:0 0 10px; font-size:12px; line-height:1.5; color:var(--text2); } .bo-lobby .bo-ref-limit { display:flex; align-items:center; justify-content:center; gap:4px; margin:0 0 10px; color:var(--text); } .bo-ref-limit b { color:var(--accent); } .bo-lobby > .gm-btn { width:100%; } .bo-levels { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-top:14px; } .bo-levels button { padding:7px 2px; border:1px solid var(--border2); border-radius:7px; background:var(--input-bg); color:var(--text); cursor:pointer; font-size:11px; } .bo-levels button:hover { border-color:var(--accent); } @media (prefers-reduced-motion:reduce) { .bo-bus.shake { animation:none; } } /* 3.25 — 뿌요뿌요: 6×12 판(캔버스) + 오른쪽 다음·점수 칸 */ .gm-body.fixed.pu-body { overflow:hidden; } .pu-main { flex:1 1 0; min-height:0; display:flex; justify-content:center; align-items:stretch; gap:10px; overflow:hidden; padding:2px 0 4px; } .pu-cv { flex:none; align-self:flex-start; display:block; touch-action:none; user-select:none; -webkit-user-select:none; } .pu-side { flex:none; width:96px; display:flex; flex-direction:column; gap:6px; } .pu-next { display:flex; flex-direction:column; align-items:center; } .pu-next canvas { width:76px; height:133px; } .pu-side small { display:block; font-size:10px; font-weight:800; color:var(--text2); } .pu-stat { padding:4px 7px; border-radius:10px; background:var(--bg2,rgba(127,127,127,.08)); border:1px solid var(--border2); } .pu-stat b { display:block; font-size:17px; line-height:1.2; font-variant-numeric:tabular-nums; color:var(--accent); } .pu-timer.ending b { color:#e53935; } .pu-warn { padding:4px 6px; border-radius:10px; border:1px dashed var(--border2); min-height:52px; } .pu-warn span { display:flex; flex-wrap:wrap; gap:1px; min-height:20px; align-items:center; } .pu-warn img { width:18px; height:18px; object-fit:contain; } .pu-btns { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; } .pu-btns button { padding:9px 0; font-size:16px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none; } .pu-info { flex:none; } .t2048-main { flex:1 1 0; min-height:0; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:6px; overflow:hidden; background:#d9edf5 url(assets/game/ui/t2048-bg.jpg) center/cover; } .gm-body.fixed > .t2048-main { flex-shrink:1; } .t2048-top { width:min(100%,410px); display:flex; align-items:center; justify-content:space-between; gap:10px; color:#392e35; font-weight:800; } .t2048-top span { padding:6px 12px; border-radius:10px; background:rgba(255,255,255,.82); } .t2048-top b { margin-left:6px; font-size:19px; } .t2048-top .gm-btn { width:auto; margin:0; padding:6px 12px; } .t2048-wrap { position:relative; width:min(100%,345px); max-width:100%; aspect-ratio:345/416; flex:none; } .t2048-board { position:relative; width:100%; height:100%; background:url(assets/game/ui/t2048-board.png) center/100% 100% no-repeat; touch-action:none; user-select:none; } /* 장식 테두리만 그림에서 사용하고, 중앙의 칸은 타일과 같은 CSS 그리드로 그린다. */ .t2048-board::before { content:''; position:absolute; left:11%; right:13%; top:10%; height:65%; border-radius:8px; background:#b99b7b; box-shadow:inset 0 2px 5px #87684d; } .t2048-grid { position:absolute; left:12%; right:13.5%; top:11%; height:63%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:2.5%; } .t2048-cell { position:relative; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; border-radius:11%; background:#c8ad91; box-shadow:inset 0 2px 3px #96765d,0 1px 1px #ead1ad; } .t2048-cell.filled { border-radius:12%; } .t2048-cell img { display:block; width:100%; height:100%; object-fit:fill; } .t2048-cell.moving { opacity:0; } .t2048-motion { position:absolute; inset:0; z-index:1; pointer-events:none; } .t2048-motion .t2048-fly { position:absolute; margin:0; transition:transform 145ms cubic-bezier(.2,.8,.2,1); } .t2048-cell.spawned { animation:t2048Spawn .12s ease-out; } .t2048-cell.merged { animation:t2048Merge .15s ease-out; } @keyframes t2048Spawn { from { transform:scale(.92); opacity:.75; } to { transform:scale(1); opacity:1; } } @keyframes t2048Merge { 50% { transform:scale(1.04); } } @media (prefers-reduced-motion:reduce) { .t2048-motion .t2048-fly { transition:none; } .t2048-cell.spawned,.t2048-cell.merged { animation:none; } } .t2048-cell b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#57432e; text-shadow:0 1px 1px #fff; font-size:clamp(15px,5vw,38px); font-weight:900; line-height:1; letter-spacing:-.04em; } .t2048-cell b.light { color:#fff; text-shadow:0 2px 3px #6b3d28; } .t2048-cell b.small { font-size:clamp(12px,4vw,29px); } .t2048-over { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(23,24,31,.63); border-radius:18px; z-index:10; } .t2048-over[hidden] { display:none; } .t2048-over .oc-result-card { box-sizing:border-box; width:88%; } .t2048-over .gm-btn { width:auto; } .t2048-controls { display:flex; justify-content:center; gap:8px; } .t2048-controls button { width:44px; height:40px; border:1px solid #a0704b; border-radius:10px; background:#fff4d8; color:#57432e; font-size:20px; font-weight:900; cursor:pointer; touch-action:manipulation; } .t2048-controls button:active { transform:scale(.94); } .t2048-main .gm-st-info { width:min(100%,410px); min-height:18px; box-sizing:border-box; text-align:center; } .t2048-hint { color:#523e31; text-align:center; font-size:11px; font-weight:800; text-shadow:0 1px 1px #fff; } /* 4.43 — 원작 같은 타일 움직임: 타일 층(.t2048-tiles)에서 0.1초 미끄러짐 · 합치기 튀어오름 · 새 타일 커지며 등장 · +점수 */ .t2048-tiles { position:absolute; inset:0; pointer-events:none; } .t2048-tile { position:absolute; left:0; top:0; z-index:2; transition:transform 100ms ease-in-out; will-change:transform; } .t2048-in { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:12%; } .t2048-in img { display:block; width:100%; height:100%; object-fit:fill; } .t2048-in b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#57432e; text-shadow:0 1px 1px #fff; font-size:clamp(15px,5vw,38px); font-weight:900; line-height:1; letter-spacing:-.04em; } .t2048-in b.light { color:#fff; text-shadow:0 2px 3px #6b3d28; } .t2048-in b.small { font-size:clamp(12px,4vw,29px); } .t2048-tile.new .t2048-in { animation:t2048Appear 200ms ease 100ms backwards; } .t2048-tile.merged { z-index:3; } .t2048-tile.merged .t2048-in { animation:t2048Pop 200ms ease 0ms backwards; } @keyframes t2048Appear { 0% { opacity:0; transform:scale(0); } 100% { opacity:1; transform:scale(1); } } @keyframes t2048Pop { 0% { transform:scale(0); } 50% { transform:scale(1.2); } 100% { transform:scale(1); } } .t2048-top span { position:relative; } .t2048-plus { position:absolute; right:10px; top:2px; font-style:normal; font-weight:900; font-size:16px; color:#e07a2a; text-shadow:0 1px 1px #fff; pointer-events:none; animation:t2048Plus 600ms ease-in forwards; } @keyframes t2048Plus { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-28px); } } @media (prefers-reduced-motion:reduce) { .t2048-tile { transition:none; } .t2048-tile.new .t2048-in,.t2048-tile.merged .t2048-in,.t2048-plus { animation:none; } } /* 4.81 핀볼 — 원작형 판을 iframe으로 넣음(안쪽 화면은 game/assets/game/pinball/) */ .pb-main { flex:1 1 0; min-height:0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; background:#000; border-radius:10px; } .pb-frame { flex:1 1 0; min-height:0; width:100%; border:0; display:block; background:#000; } .pb-main .pb-info { flex:none; min-height:0; margin:0; padding:4px 6px; font-size:10.5px; line-height:1.3; color:#9fb4d8; background:#06080f; } @media (max-height:600px) { .pb-main .pb-info { display:none; } } .pb-set .gm-notes-card { max-width:420px; } .pb-set-row { padding:8px 2px; border-bottom:1px solid var(--border2); } .pb-set-row > div { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13px; } .pb-set-row output { color:var(--accent); font-weight:800; } .pb-set-row input { display:block; width:100%; margin:0; accent-color:#e9a94a; cursor:pointer; } .pb-set-row small { display:block; margin-top:6px; font-size:10.5px; color:var(--text3); line-height:1.4; } .pb-keys { width:100%; border-collapse:collapse; font-size:12px; } .pb-keys th { text-align:left; white-space:nowrap; padding:3px 10px 3px 0; color:var(--text); font-weight:800; } .pb-keys td { padding:3px 0; color:var(--text2); } /* 4.94 결과창 위 그림 — 최고 기록 트로피 / 일반 끝 아케이드 / 보상 없음 깨진 공 */ .pb-res-img { display:block; width:62%; max-width:210px; height:auto; margin:0 auto 4px; } .pb-res-hero { position:relative; width:62%; max-width:210px; margin:0 auto 4px; } .pb-res-hero .pb-res-img { width:100%; max-width:none; margin:0; } .pb-res-hero > strong { position:absolute; left:10%; right:10%; bottom:15%; color:#fff5c7; font-size:clamp(15px,4vw,22px); font-weight:900; line-height:1; text-align:center; text-shadow:0 2px 3px #24153d; white-space:nowrap; } .pb-res-hero > strong small { color:inherit; font-size:.65em; } .pb-res-stats { display:flex; gap:8px; margin:8px 0; } .pb-res-stats > div { flex:1; display:flex; flex-direction:column; gap:2px; padding:7px; border:1px solid var(--border); border-radius:10px; background:var(--input-bg); } .pb-res-stats small { color:var(--text3); } .pb-res-stats b { color:var(--text); font-size:15px; } .pb-res-rewards { margin:6px 0; color:var(--text2); } .oc-result:has(.pb-res-hero) .oc-result-card { box-sizing:border-box; max-height:calc(100% - 16px); overflow-y:auto; } /* 루미큐브(4.75) — 타일은 rk-tile.png 위에 숫자를 글자로 */ .rk-lobby { flex:1 1 0; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:6px; } .rk-lobby-art { height:84px; object-fit:contain; align-self:center; } .rk-main { flex:1 1 0; min-height:0; box-sizing:border-box; display:flex; flex-direction:column; gap:4px; padding:4px; overflow:hidden; } .rk-opps { display:flex; align-items:center; gap:5px; flex:none; } .rk-opp { display:flex; align-items:center; gap:4px; flex:1 1 0; min-width:0; padding:2px 6px 2px 3px; border:1.5px solid var(--border); border-radius:99px; font-size:11px; background:var(--surface); } .rk-opp.turn { border-color:var(--accent); background:var(--accent-bg); } .rk-opp b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .rk-opp small { color:var(--text3); white-space:nowrap; font-size:10px; } .rk-opp .oc-mini { width:22px; height:22px; flex:none; } .rk-pool { position:relative; flex:none; width:44px; } .rk-pool img { width:100%; display:block; } .rk-pool b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; text-shadow:0 1px 2px #000; } .rk-table { flex:1 1 0; min-height:70px; overflow-y:auto; display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px 8px; padding:12px 14px; border-radius:10px; background:#2f7a4d url(assets/game/ui/rk-table.png) center/100% 100% no-repeat; box-shadow:inset 0 0 0 2px #8a5a2c; } .rk-empty { width:100%; text-align:center; align-self:center; color:rgba(255,255,255,.7); font-size:12px; } .rk-meld { display:flex; align-items:center; gap:1px; padding:3px; border-radius:7px; background:rgba(0,0,0,.18); } .rk-meld.bad { outline:2px dashed #ff5a4d; outline-offset:1px; background:rgba(255,60,40,.22); } .rk-add, .rk-newmeld { border:1.5px dashed rgba(255,255,255,.75); border-radius:6px; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-size:13px; font-weight:800; cursor:pointer; } .rk-add { align-self:stretch; min-width:22px; padding:0 4px; } .rk-newmeld { padding:6px 10px; align-self:center; } .rk-newmeld:disabled { opacity:.45; cursor:default; } .rk-msg { flex:none; min-height:18px; font-size:12px; text-align:center; color:var(--text2); word-break:keep-all; } .rk-msg.bad { color:#d83a2e; font-weight:800; animation:rkShake .3s; } @keyframes rkShake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } } .rk-rack { flex:none; max-height:34%; min-height:50px; overflow-y:auto; display:flex; flex-wrap:wrap; align-content:flex-start; gap:3px; padding:6px 8px; border-radius:8px; background:#b9793c url(assets/game/ui/rk-rack.png) center/100% 100% no-repeat; box-shadow:inset 0 0 0 1.5px #7a4a1f; } .rk-bar { flex:none; display:flex; gap:4px; } .rk-bar .gm-btn { flex:1 1 0; width:auto; margin:0; padding:6px 2px; font-size:11.5px; display:flex; align-items:center; justify-content:center; gap:3px; white-space:nowrap; } .rk-bar .gm-btn img { height:16px; width:auto; } .rk-t { position:relative; flex:none; width:28px; height:38px; padding:0; border:0; background:url(assets/game/ui/rk-tile.png) center/100% 100% no-repeat; cursor:pointer; font:inherit; transition:transform .1s; } .rk-rack .rk-t { width:31px; height:42px; } .rk-t b { position:absolute; left:0; right:0; top:17%; font-size:17px; font-weight:900; line-height:1; letter-spacing:-.04em; text-shadow:0 1px 0 rgba(255,255,255,.6); } .rk-rack .rk-t b { font-size:19px; } .rk-t.red b { color:#d8362a; } .rk-t.blue b { color:#2a62c9; } .rk-t.orange b { color:#e4871a; } .rk-t.black b { color:#2d2a2e; } .rk-mk { position:absolute; left:50%; bottom:11%; width:11px; height:11px; transform:translateX(-50%); object-fit:contain; } .rk-jk { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; } .rk-t.sel { transform:translateY(-5px); filter:drop-shadow(0 0 3px #ffd34d) drop-shadow(0 0 2px #ffb000); } .rk-t.hl { animation:rkNew 1.2s ease-out; filter:drop-shadow(0 0 3px #7cf08a); } @keyframes rkNew { from { transform:scale(1.25); } to { transform:scale(1); } } @media (prefers-reduced-motion:reduce) { .rk-t, .rk-t.hl, .rk-msg.bad { transition:none; animation:none; } } /* 같이 하기(4.75) — 내 차례 남은 시간 · 효과 그림 · 관전 */ .rk-main { position:relative; } .rk-opp.away { opacity:.7; } .rk-timer { flex:none; display:flex; align-items:center; gap:5px; height:18px; } .rk-timer img { height:18px; width:auto; flex:none; } .rk-timer-bar { flex:1 1 0; height:7px; border-radius:99px; background:var(--border); overflow:hidden; } .rk-timer-bar i { display:block; height:100%; width:0; border-radius:99px; background:#7aa0c8; } .rk-timer-bar i.mine { background:#3cae5a; } .rk-timer-bar i.low { background:#e0533f; } .rk-timer b { flex:none; min-width:30px; font-size:11px; text-align:right; color:var(--text2); } .rk-fx { position:absolute; left:50%; top:38%; z-index:5; display:flex; flex-direction:column; align-items:center; gap:2px; transform:translate(-50%,-50%); pointer-events:none; animation:rkFx 1.4s ease-out forwards; } .rk-fx img { width:96px; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); } .rk-fx b { font-size:16px; font-weight:900; color:#fff; text-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.6); } @keyframes rkFx { 0% { opacity:0; transform:translate(-50%,-50%) scale(.6); } 15% { opacity:1; transform:translate(-50%,-50%) scale(1.08); } 30% { transform:translate(-50%,-50%) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-60%) scale(1); } } .gm-watch-rk-table { min-height:160px; max-height:none; } .gm-watch-rk-opps { margin-bottom:4px; } @media (prefers-reduced-motion:reduce) { .rk-fx { animation:none; } } /* 끌어서 놓기(4.77) — 끄는 타일은 떠서 따라오고, 원래 자리는 흐리게, 놓을 곳은 밝게 */ .rk-main.my .rk-t { touch-action:none; } .rk-t, .rk-ghost { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } .rk-t img { pointer-events:none; -webkit-user-drag:none; } .rk-t.rk-drag-src { opacity:.3; transform:none; filter:none; } .rk-ghost { position:fixed; left:0; top:0; z-index:10000; display:flex; gap:1px; pointer-events:none; transform-origin:0 0; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); will-change:transform; } .rk-ghost .rk-t { width:31px; height:42px; } .rk-ghost .rk-t b { font-size:19px; } .rk-meld.ok { outline:2px solid #6fdc84; outline-offset:1px; } .rk-meld.rk-drop { outline:2px solid #ffd34d; outline-offset:2px; background:rgba(255,211,77,.28); } .rk-meld.rk-drop.ok { outline-color:#6fdc84; background:rgba(111,220,132,.3); } .rk-rack.rk-drop { box-shadow:inset 0 0 0 1.5px #7a4a1f, 0 0 0 3px #ffd34d; } #rkTable.rk-drop { box-shadow:inset 0 0 0 2px #8a5a2c, inset 0 0 0 5px rgba(255,211,77,.7); } .rk-newmeld { min-height:44px; min-width:84px; } .rk-newmeld:not(.on) { font-size:11px; font-weight:700; color:rgba(255,255,255,.85); background:rgba(255,255,255,.08); } .rk-newmeld.rk-drop { border-style:solid; border-color:#ffd34d; background:rgba(255,211,77,.3); color:#fff; } .rk-t.rk-ins::before { content:''; position:absolute; left:-3px; top:-2px; bottom:-2px; width:3px; border-radius:2px; background:#ffd34d; box-shadow:0 0 4px #ffb000; } .rk-meld.rk-ins-end::after { content:''; align-self:stretch; width:3px; margin-left:1px; border-radius:2px; background:#ffd34d; box-shadow:0 0 4px #ffb000; } @media (prefers-reduced-motion:reduce) { .rk-ghost { filter:none; } } .run-main { flex:1 1 0; min-height:0; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; padding:12px; overflow:hidden; background:linear-gradient(145deg,#e7efeb,#f4eee2); } .run-hud { width:100%; max-width:800px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } .run-score { padding:6px 12px; border:1px solid rgba(78,101,100,.18); border-radius:12px; background:#fff; color:#354256; box-shadow:0 3px 10px rgba(50,70,65,.1); font-weight:800; } .run-stage { display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid #365764; border-radius:12px; background:#193843; color:#fff; font-size:14px; line-height:1.25; box-shadow:0 3px 10px rgba(50,70,65,.1); } .run-stage b { color:#fff; font-size:16px; white-space:nowrap; } .run-stage span { color:#ffebbe; font-weight:700; white-space:nowrap; } .run-score b { font-size:19px; color:#e47632; } #runCanvas { display:block; width:100%; max-width:800px; max-height:min(55vh,360px); aspect-ratio:5/2; border:3px solid #d6c7aa; border-radius:18px; box-sizing:border-box; box-shadow:0 9px 22px rgba(56,76,72,.2); background:#e7efeb; touch-action:manipulation; } .run-controls { display:none; width:min(100%,440px); gap:10px; } .run-controls button { flex:1; min-height:54px; padding:12px 6px; border:1px solid #b67b4b; border-radius:16px; color:#674025; background:linear-gradient(#fff9eb,#f5d8aa); box-shadow:0 4px 0 #c79765, 0 6px 12px rgba(91,61,38,.2), inset 0 1px 0 #fff; font-size:17px; font-weight:900; touch-action:none; cursor:pointer; } .run-controls button:active { transform:translateY(3px); box-shadow:0 1px 0 #c79765, inset 0 2px 5px rgba(91,61,38,.15); } @media (any-pointer:coarse) { .run-controls { display:flex; } } .run-main .gm-st-info { text-align:center; } .run-main small { color:#625a50; text-align:center; font-weight:700; } /* 쉴드 표시(3.90) — 없을 땐 흐리게, 있으면 또렷하게 */ .run-shield { opacity:.45; transition:opacity .2s; } .run-shield.on { opacity:1; } .run-shield .gm-ic { vertical-align:-3px; } .gm-watch { flex:1 1 auto; min-height:0; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:9px; } .gm-watch .gm-st-info { text-align:center; flex:none; } .gm-watch-oc-table { flex:none; min-height:240px; height:240px; } .gm-watch-hands { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .gm-watch-hands section { min-width:0; padding:5px; border:1px solid var(--border); border-radius:10px; background:var(--surface); } .gm-watch-hands section.turn { border-color:#e8732a; box-shadow:0 0 0 1px #e8732a; } .gm-watch-hands section > b { display:flex; align-items:center; gap:4px; font-size:10px; white-space:nowrap; overflow:hidden; } .gm-watch-hands .oc-face { width:20px; height:20px; flex:none; } .gm-watch-hand { display:flex; gap:2px; overflow-x:auto; padding:4px 1px 7px; min-height:52px; } .gm-watch-hand .oc-card { width:32px; height:46px; font-size:10px; flex:none; } .gm-watch-hand .oc-card .r { font-size:10px; } .gm-watch-hand .oc-card .su { font-size:17px; margin-bottom:3px; } .gm-watch-yut-trays { flex-wrap:wrap; } .gm-watch-yut-trays .yt-tray { flex:1 1 46%; } .gm-watch-yut-stage { flex:none; margin:0; display:flex; justify-content:center; padding:10px; } .gm-watch-yut-stage .yt-board { width:min(100%,320px); margin:auto; } .gm-watch-yut-stage .yt-pcs { pointer-events:none; } .gm-watch .yt-res { min-height:25px; justify-content:center; } .gm-watch-fleets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .gm-watch-fleets section { min-width:0; display:flex; flex-direction:column; gap:5px; } .gm-watch-fleets section > b { display:flex; align-items:center; gap:3px; font-size:11px; min-height:29px; white-space:nowrap; overflow:hidden; } .gm-watch-fleets .oc-face { width:25px; height:25px; flex:none; } .gm-watch-bs-board.bs-board.mine { width:100%; box-sizing:border-box; } .gm-watch-bs-board .bs-c.ship { background:linear-gradient(160deg,#c4d2db,#708b9e); box-shadow:inset 0 0 0 1px #526879; } .gm-watch-bs-board .bs-c.ship.hit { background:linear-gradient(160deg,#ff7043,#b71c1c); } .gm-watch-fleets small { font-size:10px; color:var(--text3); } /* 4.78 관전 중 판이 끝나면 맨 위 결과 띠 */ .gm-watch-result { flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 10px; border-radius:12px; background:linear-gradient(135deg,#fff1c9,#ffe19c); border:1.5px solid #e0b040; color:#5a3b00; text-align:center; animation:gmSceneIn .3s ease-out; } .gm-watch-result .gm-ic { height:22px; } .gm-watch-result b { font-size:15px; font-weight:900; } .gm-watch-result small { font-size:11px; color:#7a5a1a; word-break:keep-all; } .wh-game { flex:1 1 0; min-height:0; display:flex; flex-direction:column; gap:6px; padding:9px; box-sizing:border-box; background:linear-gradient(165deg,#d9ecf5,#fff0d2 68%,#f6d8b0); overflow:hidden; } .wh-hud { display:flex; justify-content:space-between; gap:8px; color:#30495a; font-size:12px; } .wh-hud b { padding:5px 9px; border-radius:9px; background:#ffffffdc; } .wh-hud span { color:#e66d39; font-size:16px; } .wh-timebar { height:6px; background:#c7b7a4; border-radius:9px; overflow:hidden; flex:none; } .wh-timebar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#64c5d6,#f4d35f,#e87961); transition:width .1s linear; } .wh-banner { display:flex; justify-content:space-between; align-items:center; min-height:24px; color:#a65232; font-size:13px; } .wh-banner #whFever { color:#e03973; text-shadow:0 1px 0 #fff; } .wh-cancel { margin-left:auto; border:1px solid #b9774c; border-radius:8px; padding:3px 7px; background:#fff2d6; color:#874c34; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; } .wh-game.fever .wh-board { box-shadow:inset 0 0 0 3px #ffdb55,0 0 17px #ffb446; animation:wh-fever-glow 1.2s ease-in-out infinite alternate; } .wh-game.super .wh-board { box-shadow:inset 0 0 0 3px #ff77cd,0 0 21px #ff77cd; } .wh-game.ultra .wh-board { box-shadow:inset 0 0 0 3px #a880ff,0 0 25px #ad76ff; } .wh-game.ultra #whFever { color:#8a40db; } .wh-board { flex:1 1 0; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; position:relative; padding:11px 5px 8px; border-radius:14px; background:linear-gradient(180deg,#315268,#233748 18%,#182936); border:4px solid #8c6546; box-sizing:border-box; overflow:hidden; } .wh-board::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 42%,#fff6a7b8,transparent 62%); opacity:0; pointer-events:none; } .wh-burst .wh-board::after { animation:wh-board-burst .38s ease-out; } .wh-col { position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:3px; min-width:0; min-height:0; border-radius:7px; padding:2px; background:#ffffff15; border:2px solid transparent; cursor:pointer; box-sizing:border-box; } /* 6.40 — 한 열이 9칸이 되면 끝. 9번째 칸부터를 붉게 칠하고 점선으로 표시(보드가 길어져 칸이 36px에서 멈춰도 같은 자리) */ .wh-col::before { content:''; position:absolute; inset:0; border-radius:5px; pointer-events:none; --wh-lim:calc(26px + 8*clamp(24px,calc((100% - 28px)/9),36px)); background:repeating-linear-gradient(90deg,#ff7a6d 0 6px,transparent 6px 10px) 0 var(--wh-lim)/100% 2px no-repeat,linear-gradient(180deg,transparent var(--wh-lim),#c8433a33 var(--wh-lim)); } .wh-col.full::before { background:repeating-linear-gradient(90deg,#ff7a6d 0 6px,transparent 6px 10px) 0 var(--wh-lim)/100% 2px no-repeat,linear-gradient(180deg,transparent var(--wh-lim),#c8433a77 var(--wh-lim)); } .wh-col::after { content:attr(data-count) '/9'; position:absolute; right:3px; bottom:3px; padding:1px 4px; border-radius:5px; background:#172d3dbe; color:#e3f4f8; font-size:9px; font-weight:800; pointer-events:none; } .wh-col.full::after { background:#a53c36; color:#fff; } .wh-col.selected { border-color:#ffe066; background:#ffe06629; } .wh-item { position:relative; flex:0 0 calc((100% - 24px)/9); min-height:24px; max-height:36px; border:0; padding:0; background:none; cursor:default; } .wh-item.top { cursor:pointer; } .wh-item.incoming { animation:wh-arrive .32s cubic-bezier(.18,.9,.22,1.12) both; } .wh-col:has(.incoming) .wh-item:not(.incoming) { animation:wh-shift .32s ease-out both; } .wh-item.move-right { animation:wh-move-right .23s ease-out both; } .wh-item.move-left { animation:wh-move-left .23s ease-out both; } .wh-tile { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:9px; color:#293a46; font-weight:900; background:linear-gradient(155deg,#ffffffb0,var(--wh-color) 31%,var(--wh-color) 80%,#1c2f4270); border:2px solid #ffffff9e; box-shadow:0 3px 0 #192d3d78,inset 0 1px 4px #fff9; box-sizing:border-box; } .wh-tile::before { content:''; position:absolute; inset:3px 8px auto; height:4px; border-radius:5px; background:#fff7; } .wh-tile small { position:absolute; right:5px; bottom:2px; font-size:8px; color:#182a39aa; } .wh-tile-face { position:relative; width:36px; height:20px; display:flex; justify-content:space-around; align-items:center; padding:0 5px; border-radius:50%; background:#ffffff66; } .wh-tile-face i { width:4px; height:5px; border-radius:50%; background:#283846; } .wh-tile-face b { position:absolute; left:50%; bottom:-3px; transform:translateX(-50%); font-size:12px; line-height:1; } .wh-special { justify-content:flex-start; padding-left:4px; background:linear-gradient(155deg,#fff6d8,var(--wh-color) 65%,#705069); box-shadow:0 3px 0 #192d3d78,inset 0 0 0 1px #fff,0 0 7px var(--wh-color); } .wh-power-art { flex:none; width:27px; height:27px; background:url("assets/game/ui/wh-powerups.png") var(--power-x) var(--power-y)/300% 200% no-repeat; filter:drop-shadow(0 1px 2px #69493b88); } .wh-special small { right:5px; bottom:50%; transform:translateY(50%); font-size:9px; color:#47354d; text-shadow:0 1px #fff9; } .wh-item.top .wh-special .wh-power-art { animation:wh-power-float 1.4s ease-in-out infinite alternate; } .wh-flash { position:absolute; left:50%; top:30%; transform:translateX(-50%); color:#fff; font-size:21px; font-weight:1000; white-space:nowrap; text-shadow:0 2px 2px #64302a,0 0 10px #f28b47; pointer-events:none; z-index:3; } .wh-flash:not(:empty) { animation:wh-flash-pop .3s ease-out; } .wh-bottom { display:grid; grid-template-columns:1fr 54px 1fr; align-items:center; gap:5px; } .wh-bottom .gm-btn { margin:0; padding:7px 2px; font-size:11px; white-space:nowrap; } .wh-gauge { height:10px; border-radius:9px; background:#b5a898; overflow:hidden; } .wh-gauge i { display:block; height:100%; width:0; background:linear-gradient(90deg,#68c7df,#ffee7b); } .wh-game .gm-st-info { font-size:10px; text-align:center; margin:0; } @media(max-height:620px) { .wh-game { gap:4px; padding:6px; } .wh-tile-face { height:16px; } .wh-game .gm-st-info { display:none; } } @keyframes wh-arrive { from { opacity:.3; transform:translateY(-36px) scale(.92); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes wh-shift { from { transform:translateY(calc(-100% - 3px)); } to { transform:translateY(0); } } @keyframes wh-move-right { from { opacity:.65; transform:translateX(-105%); } to { opacity:1; transform:translateX(0); } } @keyframes wh-move-left { from { opacity:.65; transform:translateX(105%); } to { opacity:1; transform:translateX(0); } } @keyframes wh-board-burst { 20% { opacity:.7; } 100% { opacity:0; } } @keyframes wh-fever-glow { to { box-shadow:inset 0 0 0 4px #ffe98d,0 0 24px #ff9c66; } } @keyframes wh-flash-pop { from { opacity:0; scale:.8; } to { opacity:1; scale:1; } } @keyframes wh-power-float { to { transform:translateY(-2px) scale(1.05); } } @media(prefers-reduced-motion:reduce) { .wh-game *, .wh-game::before, .wh-game::after { animation-duration:.01ms!important; } } .rh-game { flex:1 1 0; min-height:0; display:flex; flex-direction:column; gap:7px; padding:9px; box-sizing:border-box; background:linear-gradient(160deg,#161d38,#282049 65%,#171a32); color:#f3f2ff; overflow:hidden; } .rh-lobby { flex:1 1 0; min-height:0; display:flex; flex-direction:column; gap:14px; padding:17px 15px; box-sizing:border-box; background:linear-gradient(165deg,#171d39,#33214c 72%,#1b1b34); color:#f3f2ff; overflow:auto; } .rh-lobby-title { display:flex; justify-content:space-between; align-items:center; } .rh-lobby-title b { font-size:18px; } .rh-lobby-title small { color:#c4c4ec; } .rh-mode { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .rh-mode button { padding:11px 5px; border:2px solid #8e83c4; border-radius:10px; background:#ffffff14; color:#eee9ff; font:800 13px inherit; cursor:pointer; } .rh-mode button.selected { border-color:#ffe2a0; background:#ffe2a024; color:#fff0c6; } .rh-song-list { display:flex; flex-direction:column; gap:8px; } .rh-song-card { width:100%; display:flex; align-items:center; gap:10px; padding:12px; border:2px solid #8e83c4; border-radius:13px; background:#ffffff14; color:#f8f4ff; text-align:left; font-family:inherit; cursor:pointer; } .rh-song-card.selected { border-color:#ffe2a0; background:#ffe2a024; box-shadow:0 0 16px #ffe2a033; } .rh-song-card .gm-ic { width:40px; height:40px; margin:0; flex:none; } .rh-song-card span { display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; } .rh-song-card b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rh-song-card small { color:#c8c7e9; font-size:10px; } .rh-song-card strong { font-size:10px; color:#ffebbb; white-space:nowrap; } .rh-volume { margin-top:auto; padding:14px; border:1px solid #b4a7da77; border-radius:12px; background:#ffffff12; } .rh-volume>div { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:13px; } .rh-volume output { color:#ffe5aa; font-weight:800; } .rh-volume input { display:block; width:100%; margin:0; accent-color:#ffd488; cursor:pointer; } .rh-lobby-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:8px; } .rh-lobby-actions .gm-btn { margin:0; padding:11px 4px; font-size:12px; } .rh-lobby-help { color:#bec8ee; font-size:11px; text-align:center; line-height:1.4; } .rh-song { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; } .rh-song small { font-size:10px; color:#bcc6f4; text-align:right; } .rh-hud { display:flex; align-items:center; justify-content:space-between; min-height:27px; font-size:12px; } .rh-hud span { color:#ffdf92; font-size:17px; } .rh-hud #rhCombo { color:#fff0a8; } .rh-health { flex:none; display:flex; align-items:center; gap:7px; height:18px; padding:2px 6px; border:1px solid #506d83; border-radius:5px; background:#102335; color:#e9f7ff; font-size:10px; font-weight:900; } .rh-health>span { color:#d6f7ff; letter-spacing:1px; } .rh-health>div { flex:1; height:9px; border:1px solid #668b91; border-radius:8px; background:#15222b; overflow:hidden; } .rh-health i { display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,#28b893,#8cfbd4); transition:width .16s; } .rh-health.low i { background:linear-gradient(90deg,#ec433e,#ffae59); } .rh-health>b { min-width:30px; text-align:right; } .rh-board { flex:1 1 0; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; border:3px solid #7d78b4; border-radius:12px; overflow:hidden; box-shadow:0 0 17px #ae8df766; background:#12172c; } .rh-board canvas { display:block; width:100%; height:100%; touch-action:none; } .rh-start { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:2px solid #fff3bb; border-radius:12px; padding:14px 28px; background:linear-gradient(120deg,#7866d2,#dc74b7); color:#fff; font-family:inherit; font-weight:900; font-size:18px; cursor:pointer; box-shadow:0 3px 20px #0009; white-space:nowrap; } .rh-start[hidden] { display:none; } .rh-keys { flex:none; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; } .rh-keys.five { grid-template-columns:repeat(5,minmax(0,1fr)); } .rh-keys.five button { height:52px; font-size:14px; } .rh-keys.five button:nth-child(1) { background:#70a9ff; } .rh-keys.five button:nth-child(2) { background:#8cedac; } .rh-keys.five button:nth-child(3) { background:#fff3c1; font-size:11px; } .rh-keys.five button:nth-child(4) { background:#ee9deb; } .rh-keys.five button:nth-child(5) { background:#ffad83; } .rh-keys button { min-width:0; height:39px; border:1px solid #ffffff88; border-radius:6px; color:#11172d; font-weight:900; font-size:11px; background:#70e5ee; touch-action:none; transition:transform .07s,filter .07s,box-shadow .07s; box-shadow:0 4px 0 #090e26,0 0 5px #ffffff44; } .rh-keys button:nth-child(2) { background:#70a9ff; } .rh-keys button:nth-child(3) { background:#8cedac; } .rh-keys button:nth-child(4) { background:#fff3c1; font-size:9px; } .rh-keys button:nth-child(5) { background:#ee9deb; } .rh-keys button:nth-child(6) { background:#ffad83; } .rh-keys button:nth-child(7) { background:#fa758b; } .rh-keys button:active,.rh-keys button.pressed { filter:brightness(1.4); transform:translateY(3px); box-shadow:0 1px 0 #090e26,0 0 17px #fff4b8; } .rh-help { flex:none; color:#bec8ee; text-align:center; font-size:10px; } @media(max-height:620px) { .rh-game { gap:4px; padding:5px; } .rh-keys button { height:32px; } .rh-keys.five button { height:42px; } .rh-help { display:none; } .rh-lobby { gap:9px; padding:10px; } } /* 4.55 곡 시작 버튼 아래 스페이스 안내(터치 기기는 숨김) */ .rh-start small { display:block; margin-top:4px; font-size:11.5px; font-weight:700; opacity:.9; } @media (pointer:coarse) { .rh-start small { display:none; } } /* 4.60 로비 — 곡 목록만 스크롤 · 아래 고정 줄 · 설정 창 · 자동 싱크 */ .rh-lobby { gap:9px; padding:12px; } .rh-lobby .rh-song-list { flex:1 1 0; min-height:90px; overflow-y:auto; overscroll-behavior:contain; padding-right:2px; } .rh-lobby-bar { flex:none; display:flex; flex-direction:column; gap:7px; padding:9px; border:1px solid #b4a7da77; border-radius:12px; background:#ffffff14; } .rh-lobby-sel { display:flex; align-items:baseline; gap:8px; min-width:0; } .rh-lobby-sel b { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff0c6; font-size:13px; } .rh-lobby-sel small { flex:none; color:#c4c4ec; font-size:11px; } .rh-lobby-bar .rh-lobby-actions .gm-btn { padding:10px 4px; font-size:13px; } .rh-lobby-bar .rh-lobby-actions .gm-btn.primary { font-weight:900; } .rh-lobby-bar .rh-lobby-help { margin:0; font-size:10.5px; } .gm-st-head .rh-gear { display:inline-flex; align-items:center; gap:3px; margin-left:auto; margin-right:6px; padding:4px 9px; border:1.5px solid var(--border); border-radius:9px; background:none; color:var(--text); font:inherit; font-size:12px; font-weight:800; cursor:pointer; } .gm-st-head .rh-gear .gm-ic { height:16px; margin:0; } .gm-st-head .rh-gear + .gm-exit { margin-left:0; } .rh-set .gm-notes-card { max-width:420px; } .rh-set-row { padding:8px 2px; border-bottom:1px solid var(--border2); } .rh-set-row > div { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13px; } .rh-set-row output { color:var(--accent); font-weight:800; } .rh-set-row input { display:block; width:100%; margin:0; accent-color:#e9a94a; cursor:pointer; } .rh-set-row small { display:block; margin-top:3px; font-size:10.5px; color:var(--text3); } .rh-set-btns { display:grid; grid-template-columns:1.4fr 1fr; gap:6px; margin:10px 0 6px; } .rh-set-btns .gm-btn { margin:0; } .rh-cal-help { text-align:center; font-size:12px; color:var(--text2); margin:6px 0; display:block; } .rh-cal-pad { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:150px; height:150px; margin:8px auto; border-radius:50%; border:3px solid #8e83c4; background:radial-gradient(#2a2350,#171d39); color:#fff0c6; font:900 16px inherit; cursor:pointer; touch-action:manipulation; } .rh-cal-pad i { width:26px; height:26px; border-radius:50%; background:#ffe2a0; opacity:.25; transition:opacity .08s; } .rh-cal-pad.beat i { opacity:1; box-shadow:0 0 18px #ffe2a0; } .rh-cal-pad.hit { animation:rhCalHit .18s ease-out; } @keyframes rhCalHit { 50% { transform:scale(.94); border-color:#ffe2a0; } } /* 4.60 키 설정 */ .rh-keyset > div:first-child { margin-bottom:6px; } .rh-keyreset { padding:2px 8px; border:1px solid var(--border); border-radius:7px; background:none; color:var(--text2); font:inherit; font-size:11px; cursor:pointer; } .rh-keylist { display:flex; gap:4px; } .rh-keylist button { flex:1 1 0; min-width:0; padding:8px 2px; border:2px solid var(--c); border-radius:8px; background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--text); font:900 12px inherit; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rh-keylist button.wait { animation:rhKeyWait .6s ease-in-out infinite alternate; font-size:10px; } @keyframes rhKeyWait { to { background:color-mix(in srgb, var(--c) 45%, transparent); } } .rh-lobby-bar .rh-lobby-actions .gm-btn.primary { background:linear-gradient(#ffe2a0,#f0b44c); border-color:#ffe2a0; color:#2a1d0a; } .rh-lobby-bar .rh-lobby-help { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 4.65 첫 세팅 안내 */ .rh-wiz .gm-notes-title { display:flex; align-items:center; gap:6px; } .rh-wiz-skip { margin-left:auto; padding:3px 9px; border:1px solid var(--line,#ccc); border-radius:12px; background:transparent; color:var(--text3); font-size:11.5px; font-weight:700; cursor:pointer; } .rh-wiz-dots { display:flex; align-items:center; gap:5px; margin:2px 0 8px; } .rh-wiz-dots i { width:22px; height:4px; border-radius:2px; background:var(--input-bg); } .rh-wiz-dots i.on { background:#7c5cff; } .rh-wiz-dots small { margin-left:4px; font-size:11px; color:var(--text3); } .rh-wiz-lead { margin:4px 0 8px; font-size:13px; line-height:1.55; text-align:center; word-break:keep-all; } .rh-wiz-list { margin:0 auto 10px; padding-left:18px; font-size:12px; line-height:1.7; color:var(--text2); width:max-content; max-width:100%; } .rh-wiz-tip { display:block; margin:6px 0 2px; font-size:11px; color:var(--text3); text-align:center; word-break:keep-all; } .rh-wiz-tip .gm-ic { height:13px; vertical-align:-2px; } .rh-wiz-mode { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .rh-wiz-mode button { display:flex; flex-direction:column; gap:2px; padding:10px 6px; } .rh-wiz-mode button small { font-size:10.5px; font-weight:600; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .rh-wiz-listen { width:100%; margin-top:4px; } .rh-wiz-now { margin:8px 0; text-align:center; font-size:12.5px; } .rh-wiz-sum { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:4px 0 8px; } .rh-wiz-sum span { padding:4px 10px; border-radius:12px; background:var(--input-bg); font-size:12px; font-weight:700; } .rh-wiz-nav { margin-top:10px; } .rh-wiz-again { display:block; margin:6px auto 0; padding:2px 6px; border:0; background:none; color:var(--text3); font-size:11.5px; text-decoration:underline; cursor:pointer; } .rh-wiz .rh-set-btns { display:flex; gap:8px; } .rh-wiz .rh-set-btns .gm-btn { flex:1; margin:0; } .rh-wiz .gm-btn.primary { background:#7c5cff; border-color:#7c5cff; color:#fff; } /* 4.66 난이도 조절 · 설정 창 닫기 */ .rh-seg { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:5px; } .rh-seg button { width:100%; margin:0; padding:6px 2px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-family:inherit; font-size:11.5px; font-weight:700; white-space:nowrap; cursor:pointer; } .rh-seg button.on { border-color:#e9a94a; background:#fff1d6; color:#7a4a00; } .rh-modbar { display:flex; align-items:center; gap:6px; width:100%; margin:6px 0 0; padding:5px 9px; border:1px dashed rgba(255,255,255,.25); border-radius:8px; background:transparent; color:inherit; font-family:inherit; font-size:11.5px; text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; } .rh-modbar b { flex-shrink:0; } .rh-modbar i { margin-left:auto; font-style:normal; font-weight:700; opacity:.75; flex-shrink:0; } .rh-modbar.on { border-style:solid; border-color:#e9a94a; background:rgba(233,169,74,.15); } .rh-practice { font-style:normal; color:#e9a94a; font-weight:700; } .gm-notes-card > .gm-btn.rh-set-close { background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); } /* ===== 스도쿠(4.38) ===== */ .sd-top { display:flex; justify-content:space-between; gap:8px; margin:2px 2px 6px; font-size:12px; color:var(--text2); } .sd-top b { color:var(--text); } .sd-main { display:flex; justify-content:center; } .sd-board { --sd-line:#5b4a3a; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); grid-template-rows:repeat(9,minmax(0,1fr)); width:min(100%,360px); aspect-ratio:1; border:2.5px solid var(--sd-line); border-radius:8px; overflow:hidden; background:var(--surface); user-select:none; } .sd-c { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; padding:0; border:0; border-right:1px solid var(--border2); border-bottom:1px solid var(--border2); background:var(--surface); color:#2c6fd6; font:700 var(--sd-fs,19px)/1 inherit; cursor:pointer; } .sd-c.br { border-right:2px solid var(--sd-line); } .sd-c.bb { border-bottom:2px solid var(--sd-line); } .sd-c.given { color:var(--text); font-weight:800; } .sd-c.mine { color:#2c6fd6; font-weight:600; } .sd-c.peer { background:color-mix(in srgb, #4f8ff7 9%, var(--surface)); } .sd-c.same { background:color-mix(in srgb, #4f8ff7 24%, var(--surface)); } .sd-c.sel { background:color-mix(in srgb, #4f8ff7 38%, var(--surface)); } .sd-c.bad { background:#ffd7d3; color:#d93025; animation:sdShake .3s; } @keyframes sdShake { 25% { transform:translateX(-2px); } 75% { transform:translateX(2px); } } .sd-n { position:absolute; inset:1px; display:grid; grid-template-columns:repeat(3,1fr); } .sd-n i { display:flex; align-items:center; justify-content:center; font-style:normal; font-size:calc(var(--sd-fs,19px)*.45); font-weight:600; color:var(--text3); line-height:1; } .sd-pad { display:grid; grid-template-columns:repeat(9,1fr); gap:4px; width:min(100%,360px); margin:8px auto 0; } .sd-pad button { display:flex; flex-direction:column; align-items:center; padding:3px 0 2px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font:800 17px/1.1 inherit; cursor:pointer; } .sd-pad button small { font-size:9px; font-weight:600; color:var(--text3); } .sd-pad button.done { opacity:.35; } .sd-pad button:active { transform:scale(.95); } .sd-acts { display:flex; justify-content:center; gap:6px; margin:5px auto 0; } .gm-body.fixed:has(#sdBoard) { overflow:hidden; } /* 판을 남는 높이에 맞추니 스크롤 없음(4.39) */ .sd-acts .gm-btn { width:auto; margin:0; padding:7px 16px; display:inline-flex; align-items:center; gap:4px; } .sd-acts .gm-btn.on { border-color:#4f8ff7; background:color-mix(in srgb, #4f8ff7 16%, transparent); color:var(--text); } .sd-acts .gm-ic { height:16px; margin:0; } .sd-lobby { text-align:center; } .sd-lobby > img { width:150px; height:auto; margin:4px auto 0; display:block; } .sd-lobby h3 { margin:4px 0; font-size:15px; } .sd-lobby p { margin:0 0 10px; font-size:12px; color:var(--text2); line-height:1.5; } .sd-go { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:800; } .sd-go small { font-weight:600; opacity:.85; } .sd-past { margin-top:10px; } .sd-past > small { display:block; margin-bottom:4px; color:var(--text3); } .sd-past > div { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; } .sd-past .gm-btn { margin:0; padding:6px 0; } [data-theme="dark"] .sd-board { --sd-line:#c9b79f; } [data-theme="dark"] .sd-c.mine { color:#7fb2ff; } [data-theme="dark"] .sd-c.bad { background:#5a2320; color:#ff8a80; } /* 4.72 입력한 숫자와 메모가 헷갈림 → 입력 숫자는 크고 굵게, 메모는 작고 연하게. 메모는 고른 숫자와 같아도 강조하지 않음(입력한 숫자만 같은 숫자로 표시) */ .sd-c { font-size:calc(var(--sd-fs,19px)*1.2); } .sd-c.given { font-weight:900; } .sd-c.mine { font-weight:800; } .sd-n i { font-size:calc(var(--sd-fs,19px)*.4); font-weight:500; color:color-mix(in srgb, var(--text3) 80%, transparent); } /* ===== 사천성(4.43, 오픈 예정) — 그림 리소스 전 임시 글자 타일 ===== */ .sc-lobby { text-align:center; } .gm-rank-tabs button img[src*="skill-sichuan.png"] { object-fit:contain; } .sc-fullpick { grid-template-columns:1fr; margin:6px 0; } .gm-st-head .sc-full-toggle { width:auto; flex:none; margin:0 0 0 auto; padding:4px 8px; font-size:11px; font-weight:700; white-space:nowrap; } .gm-st-head .sc-full-toggle + .gm-exit { margin-left:0; } .gm-widget.sc-full,.gm-widget.gm-standalone.sc-full { left:0 !important; top:0 !important; right:auto !important; bottom:auto !important; transform:none !important; width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important; border-radius:0; display:flex; flex-direction:column; } .gm-widget.sc-full .gm-body.sc-full-body { height:auto !important; flex:1 1 0; min-height:0; overflow:hidden; } .gm-widget.sc-full .gm-st-head { flex-wrap:wrap; } .sc-head { flex-wrap:wrap; gap:4px 6px; } .sc-head > b { min-width:0; white-space:normal; } .sc-head > b small { white-space:normal; } .sc-head > span { overflow:visible; flex:1 0 auto; } .sc-settings .gm-notes-card { box-sizing:border-box; width:calc(100% - 20px); max-height:calc(100% - 20px); } .sc-lobby > img { width:140px; height:auto; display:block; margin:4px auto 0; } .sc-lobby h3 { margin:4px 0; font-size:15px; } .sc-lobby p { margin:0 0 10px; font-size:12px; line-height:1.5; color:var(--text2); } .sc-modes { display:flex; flex-direction:column; gap:6px; } .sc-modes .gm-btn { margin:0; } .sc-modes small { font-weight:600; opacity:.8; } .sc-rec { display:block; margin-top:8px; color:var(--text3); } .sc-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:2px 2px 4px; font-size:12px; color:var(--text2); } .sc-top b { color:var(--text); } .sc-top .gm-ic { height:15px; margin-right:3px; vertical-align:-3px; } .sc-top .hurry b { color:#e5484d; } .sc-rivals { display:flex; flex-direction:column; gap:2px; margin:0 2px 4px; } .sc-rival { position:relative; display:flex; align-items:center; gap:6px; height:16px; padding:0 6px; border-radius:6px; background:var(--input-bg); font-size:10.5px; overflow:hidden; } .sc-rival i { position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb, #4f8ff7 30%, transparent); } .sc-rival.me i { background:color-mix(in srgb, var(--accent) 40%, transparent); } .sc-rival span, .sc-rival small { position:relative; } .sc-rival small { margin-left:auto; color:var(--text3); } .sc-rival.left { opacity:.45; } .sc-main { position:relative; flex:1 1 auto; min-height:180px; box-sizing:border-box; padding-top:40px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(rgba(47,93,58,.62),rgba(36,69,44,.7)),url(assets/game/ui/sc-bg.jpg) center/cover #2f5d3a; box-shadow:inset 0 0 0 2px #24452c; } .gm-body.fixed .sc-main { flex:1 1 0; } .sc-board { --sc-w:24px; --sc-h:31px; display:grid; grid-template-columns:repeat(18,var(--sc-w)); grid-auto-rows:var(--sc-h); gap:2px; } /* 4.94 그림 타일 — 원작처럼 세로로 긴 패. 패 바탕·두께는 CSS(.sc-t), 그림은 가운데 아이콘. 별·방해·가림은 패 그림 통째로 꽉 채움 */ .sc-board.art .sc-t img { width:88%; height:88%; } .sc-board.art .sc-t.star img, .sc-board.art .sc-t.jam img { width:100%; height:100%; object-fit:contain; border-radius:3px; } .sc-board.art .sc-t.blind { background:url(assets/game/ui/sc-tile-blind.png) center/cover; } .sc-t { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0; border:1px solid #b9a782; border-radius:4px; background:linear-gradient(#fffaf0,#efe3c8); box-shadow:0 2px 0 #b7a27a; cursor:pointer; font-family:inherit; line-height:1; } .sc-t b { font-size:calc(var(--sc-w)*.58); font-weight:900; } .sc-t small { font-size:calc(var(--sc-w)*.36); font-weight:800; margin-top:1px; } .sc-t img { width:100%; height:100%; object-fit:contain; } .sc-t.s0 { color:#c0392b; } .sc-t.s1 { color:#1f6fbf; } .sc-t.s2 { color:#23864a; } .sc-t.sel { background:linear-gradient(#fff3a6,#ffd95a); border-color:#e0a500; box-shadow:0 0 0 2px #ffcf3a, 0 2px 0 #b7a27a; } .sc-t.gone { visibility:hidden; } .sc-t.no { animation:sdShake .3s; } .sc-line { position:absolute; left:0; top:0; pointer-events:none; overflow:visible; } .sc-line polyline { fill:none; stroke:#ffe14d; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 3px #fff6a0); } .sc-count { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:900; color:#fff; text-shadow:0 3px 8px rgba(0,0,0,.6); background:rgba(0,0,0,.25); border-radius:10px; } .sc-count[hidden] { display:none; } /* 4.52 스테이지 클리어 — 큰 숫자(다음 스테이지) 위에 작은 안내 */ .sc-count small { position:absolute; top:calc(50% - 64px); left:0; right:0; text-align:center; font-size:16px; font-weight:800; } .sc-stage b { color:#d08a00 !important; } .sc-rooms { display:flex; flex-direction:column; gap:6px; margin:6px 0 10px; } .sc-room { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1.5px solid var(--border); border-radius:10px; } .sc-room b { font-size:13px; } .sc-room small { flex:1; min-width:0; color:var(--text3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sc-room .gm-btn { width:auto; margin:0; padding:6px 12px; } .sc-wait { text-align:center; } .sc-wait h3 { margin:4px 0 8px; font-size:15px; } .sc-seats { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-bottom:10px; } .sc-seats .oc-wait { justify-content:center; } .sc-seats .oc-wait > small { margin-top:2px; } .sc-emo { font-size:calc(var(--sc-w)*.78); line-height:1; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; } /* 4.45 임시 이모지 타일 */ /* 4.46 — 한 화면 로비 · 같이 하기는 내 판 + 오른쪽 상대 판(좁으면 위쪽 가로줄) */ .sc-lobby2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; } @media (max-width:560px) { .sc-lobby2 { grid-template-columns:1fr; } } .sc-solo, .sc-multi { padding:10px; border:1.5px solid var(--border); border-radius:12px; text-align:center; } .sc-solo img { width:120px; height:auto; display:block; margin:0 auto; } .sc-solo h3, .sc-multi h3 { margin:4px 0 6px; font-size:14px; } .sc-multi h3 small { display:block; font-size:11px; font-weight:600; color:var(--text3); } .sc-solo p { margin:0 0 8px; font-size:11.5px; line-height:1.5; color:var(--text2); } .sc-solo .gm-btn, .sc-multi .gm-btn { margin:0; } .sc-multi .sc-rooms { max-height:240px; overflow:auto; text-align:left; } .sc-play { flex:1 1 0; min-height:0; display:flex; gap:8px; } .sc-play > .sc-main { flex:1 1 0; min-width:0; } .sc-side { flex:0 0 150px; display:flex; flex-direction:column; gap:6px; overflow:auto; } .sc-rv { padding:5px; border-radius:8px; background:var(--input-bg); font-size:11px; } .sc-rv.left { opacity:.45; } .sc-rv.done { box-shadow:inset 0 0 0 2px #ffcf3a; } .sc-rv-h { display:flex; align-items:center; gap:4px; margin-bottom:3px; } .sc-rv-h b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sc-rv-h small { color:var(--text3); } .sc-rv-h .oc-mini { width:18px; height:18px; } .sc-rv-cv { display:block; width:100%; height:auto; border-radius:4px; image-rendering:pixelated; } .sc-rv-bar { height:6px; border-radius:3px; background:var(--border); overflow:hidden; } .sc-rv-bar i { display:block; height:100%; background:var(--accent); } @media (max-width:560px) { .sc-play.multi { flex-direction:column-reverse; } .sc-side { flex:0 0 auto; flex-direction:row; overflow-x:auto; } .sc-rv { flex:0 0 110px; } } .sc-solo .gm-btn.primary, .sc-multi .gm-btn.primary, .sc-wait .gm-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:800; } /* 4.50 힌트·섞기·지울 수 있는 쌍 */ .sc-top { flex-wrap:wrap; } .sc-can b { color:#2f9e5a; } .sc-can.low b { color:#e5484d; } /* 5.08 아이템 줄 — 위쪽 작은 칩에서 판 아래 큰 버튼 줄로 */ .sc-itembar { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:6px 0 2px; } .sc-itembar .gm-btn { width:auto; flex:1 1 auto; min-width:62px; white-space:nowrap; margin:0; padding:7px 6px; display:inline-flex; align-items:center; justify-content:center; gap:4px; font-size:12.5px; font-weight:800; border:1.5px solid var(--accent); background:var(--accent-bg); color:var(--text); } .sc-itembar .gm-btn:disabled { opacity:.45; border-color:var(--border); background:var(--input-bg); } .sc-itembar .gm-btn b { margin-left:2px; color:var(--accent); } .sc-itembar .gm-btn .gm-ic { height:20px; margin:0; vertical-align:0; } .sc-t.hint { animation:scHint .5s ease-in-out infinite alternate; border-color:#2fb36a; box-shadow:0 0 0 2px #4ee08a, 0 2px 0 #b7a27a; } @keyframes scHint { to { transform:translateY(-3px); } } /* 4.52 아이템전/노템전 · 아이템 버튼 · 별 타일 · 가리기 · 폭탄 고르기 · 시간 멈춤 */ .sc-modepick { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; } .sc-modepick button { display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 4px; border:1.5px solid var(--border); border-radius:10px; background:var(--input-bg); color:var(--text2); font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer; } .sc-modepick button .gm-ic { height:16px; vertical-align:-3px; margin-right:3px; } .sc-modepick button small { font-size:10px; font-weight:600; color:var(--text3); } .sc-modepick button.on { border-color:var(--accent); color:var(--text); box-shadow:inset 0 0 0 1px var(--accent); } .sc-room-mode { display:inline-block; margin-left:4px; padding:0 6px; border-radius:6px; background:#ffb300; color:#3a2600; font-size:10px; font-style:normal; font-weight:800; vertical-align:1px; } .sc-room-mode.no { background:var(--border); color:var(--text2); } .sc-noitem { margin-left:auto; padding:2px 8px; border-radius:8px; background:var(--input-bg); font-weight:700; } .sc-itembar .sc-it.on { border-color:#e5484d; box-shadow:0 0 0 2px rgba(229,72,77,.45); } .sc-x2 { margin-left:4px; padding:0 5px; border-radius:6px; background:#ffcf3a; color:#3a2600; font-size:10.5px; font-style:normal; font-weight:900; animation:scHint .4s ease-in-out infinite alternate; } .sc-x2[hidden] { display:none; } .sc-t.star { background:linear-gradient(#fff6c2,#ffd54a); border-color:#e0a500; box-shadow:0 0 6px #ffcf3a, 0 2px 0 #b7a27a; } .sc-t.blind { background:repeating-linear-gradient(45deg,#3b3b46 0 6px,#2c2c35 6px 12px); border-color:#1f1f27; box-shadow:0 2px 0 #15151b; } .sc-board.bomb .sc-t:not(.gone) { cursor:crosshair; } .sc-board.bomb .sc-t:not(.gone):hover { box-shadow:0 0 0 2px #e5484d, 0 2px 0 #b7a27a; } .sc-top .frozen b { color:#3da0ff; } /* 4.51 사천성 관전 */ .sc-watch-top { margin:2px 2px 6px; font-size:12px; color:var(--text2); } .sc-watch-top .gm-ic { height:14px; vertical-align:-3px; margin-right:3px; } .sc-watch { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; } .sc-watch section { padding:6px; border-radius:10px; background:var(--input-bg); } .sc-watch section.left { opacity:.45; } .sc-watch section.done { box-shadow:inset 0 0 0 2px #ffcf3a; } .gm-widget.ms-wide .sc-watch { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .gm-body.ms-wide-body .gm-watch { overflow-y:auto; min-height:0; } .sc-watch-b { display:grid; grid-template-columns:repeat(18,minmax(0,1fr)); gap:1px; padding:3px; border-radius:6px; background:#2f5d3a; container-type:inline-size; overflow:hidden; } .sc-watch-b i { aspect-ratio:1/1.25; display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden; border-radius:2px; font-style:normal; font-size:calc(100cqw/18*.6); line-height:1; } .sc-watch-b i.t { background:#f5ecd6; } /* 콤보 막대와 판 위의 현재 연속 기록 */ .sc-combo { display:inline-flex; align-items:center; gap:5px; } .sc-combo[hidden] { display:none; } .sc-combo b { color:#ffcf3a !important; font-weight:900; } .sc-combo i { display:block; width:70px; height:6px; border-radius:3px; background:var(--border); overflow:hidden; } .sc-combo s { display:block; height:100%; background:linear-gradient(90deg,#ffb300,#ffe27a); transition:width .25s linear; text-decoration:none; } .sc-combo.hurry s { background:#e5484d; } .sc-combo-board { --tier:0; --combo-glow:0px; position:absolute; top:5px; right:5px; z-index:3; display:flex; align-items:baseline; gap:3px; padding:3px 7px; border:1px solid #ffdf70; border-radius:10px; background:rgba(38,31,17,.88); color:#fff4b1; text-shadow:0 1px 3px #6b2500; box-shadow:0 0 var(--combo-glow) #ffac28; pointer-events:none; font-weight:900; } .sc-combo-board[hidden] { display:none; } .sc-combo-board b { font-size:calc(16px + var(--tier)*2px); line-height:1; color:#ffe45c; } .sc-combo-board small { font-size:10px; white-space:nowrap; } .sc-combo-board.pop { animation:scComboPop .3s ease-out; } @keyframes scComboPop { from { transform:scale(1.22); } to { transform:scale(1); } } @media (prefers-reduced-motion:reduce) { .sc-combo-board.pop { animation:none; } } /* 4.62 18×10 · 플레이 방식 · 방해 패 · 여의봉 · 이을 길 미리 보기 */ .sc-stylepick button { padding:5px 4px; } .sc-room-mode.sty { background:#5b7cfa; color:#fff; } .sc-t.jam { background:linear-gradient(#8a8f9a,#5d6270); border-color:#4a4e58; box-shadow:0 2px 0 #3a3d45; cursor:not-allowed; } .sc-yeo { width:auto; margin:0 0 0 4px; padding:3px 9px; font-size:11.5px; border-color:#e0a020; } .sc-yeo b { margin-left:2px; color:#e0a020; } .sc-yeo.on { background:#ffe2a0; color:#3a2600; } /* 4.71 같이 하기 판 수 */ .sc-rounds { display:flex; align-items:center; gap:5px; margin:0 0 8px; font-size:11.5px; } .sc-rounds > span { font-weight:800; color:var(--text3); white-space:nowrap; margin-right:2px; } .sc-rounds button { flex:1; padding:5px 2px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-family:inherit; font-size:11.5px; font-weight:700; white-space:nowrap; cursor:pointer; } .sc-rounds button.on { border-color:#e8692e; background:#fff0e6; color:#a2400f; } .sc-room-mode.rd { background:#2f9e6e; color:#fff; } .sc-count.round { flex-direction:column; gap:8px; padding:0 12px; font-size:40px; text-align:center; } .sc-count.round small { position:static; font-size:14px; font-weight:800; } /* 4.72 패를 지울 때 팡팡 */ .sc-burst { position:absolute; width:0; height:0; pointer-events:none; z-index:4; } .sc-burst b { position:absolute; left:calc(var(--s)/-2); top:calc(var(--s)*-.65); width:var(--s); height:calc(var(--s)*1.3); display:flex; align-items:center; justify-content:center; border-radius:4px; background:linear-gradient(#fffaf0,#efe3c8); animation:scPopTile .36s ease-out forwards; } .sc-burst b img { width:100%; height:100%; object-fit:contain; } .sc-burst i { position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; background:#ffe14d; box-shadow:0 0 5px #fff6a0; animation:scSpark .46s ease-out forwards; } .sc-burst.hot i:nth-child(odd) { background:#ff7a3d; box-shadow:0 0 6px #ffb37a; } @keyframes scPopTile { 0% { transform:scale(1); opacity:1; } 35% { transform:scale(1.3); opacity:1; } 100% { transform:scale(1.8); opacity:0; } } @keyframes scSpark { from { transform:rotate(var(--a)) translateX(0) scale(1); opacity:1; } to { transform:rotate(var(--a)) translateX(var(--d)) scale(.2); opacity:0; } } @media (prefers-reduced-motion:reduce) { .sc-burst { display:none; } } .sc-itembar .sc-yeo { border-color:#e0a020; } /* 5.12 화면 가득은 게임 판만 커짐 — 제목줄·점수줄·아이템·안내·결과 카드는 보통 크기로 가운데에 모음 */ .gm-widget.sc-full :is(.gm-st-head,.sc-top,.sc-itembar,.gm-st-info) { width:100%; max-width:640px; margin-inline:auto; box-sizing:border-box; } .gm-widget.sc-full .sc-top { justify-content:center; gap:10px 28px; } .gm-widget.sc-full .oc-result-card { width:min(86%,460px); } .gm-st-head .sc-settings-btn + .sc-full-toggle { margin-left:4px; } .sc-tile-settings { margin:8px 0; } .sc-tile-settings > b { font-weight:800; color:var(--text); } .sc-tile-options { display:flex; gap:6px; margin-top:8px; } .sc-tile-options .gm-btn { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; } .sc-tile-options .gm-btn.on { border-color:var(--accent); background:var(--accent-bg); color:var(--text); box-shadow:0 0 0 1px var(--accent); } .sc-tile-options img { width:32px; height:32px; object-fit:contain; } @media (max-width:560px) and (pointer:coarse) { .sc-side .sc-rv-cv { display:none; } .sc-rv { flex-basis:105px; } .sc-top { gap:3px 8px; } .sc-itembar { gap:4px; margin:3px 0; } .sc-itembar .gm-btn { padding:5px 4px; } } /* 사천성 진행 중 — 양옆 여백을 줄여 판을 키움(모바일은 화면 거의 전체 너비) */ .gm-body:has(.sc-play) { padding-inline:4px; } @media (max-width:480px) { .gm-widget:not(.sc-full):has(.sc-play) { right:4px; width:calc(100vw - 8px); max-width:calc(100vw - 8px); } .gm-widget.gm-standalone:not(.sc-full):has(.sc-play) { right:0; width:100vw; max-width:100vw; } .sc-play { gap:4px; } } /* ===== 푸쉬푸쉬(4.90, 베타) — 그림 리소스 전 CSS로 그린 임시 타일(요청서 handoff/푸쉬푸쉬-UI-요청.md) ===== */ .pp-lobby { text-align:center; } .pp-lobby h3 { margin:6px 0; font-size:15px; } .pp-go { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:800; } .pp-go small { font-weight:600; opacity:.85; } .pp-top { display:flex; align-items:center; gap:8px; margin:2px 2px 6px; font-size:12px; color:var(--text2); } .pp-top b { color:var(--text); } .pp-top .gm-btn { margin:0 0 0 auto; padding:4px 8px; font-size:12px; } .pp-top .gm-btn ~ .gm-btn { margin-left:0; } .pp-actions { display:flex; justify-content:center; gap:6px; margin:0 2px 6px; } .pp-actions .gm-btn { width:auto; margin:0; padding:4px 12px; font-size:12px; } .pp-actions .gm-ic { height:20px; margin-right:4px; vertical-align:middle; } .pp-main { display:flex; justify-content:center; } .pp-board { --pp-cell:40px; display:grid; grid-template-columns:repeat(var(--pp-w),var(--pp-cell)); grid-auto-rows:var(--pp-cell); user-select:none; touch-action:none; } .pp-c { position:relative; } /* 4.94 그림 타일 — 바닥은 모든 칸 밑에, 벽·목표는 그 위에. 공·캐릭터는 칸 위에 얹음 */ .pp-c { background:#e5edf4 url(assets/game/ui/pp-floor.png) center/100% 100% no-repeat; } .pp-v { background:none; } .pp-w { background:#575165 url(assets/game/ui/pp-wall.png) center/100% 100% no-repeat; filter:brightness(.72) saturate(.8); } .pp-g { background:#e5edf4 url(assets/game/ui/pp-goal.png) center/100% 100% no-repeat; } .pp-b, .pp-p { position:absolute; inset:6%; background:center/contain no-repeat; pointer-events:none; } .pp-b { background-image:url(assets/game/ui/pp-ball.png); } .pp-b.on { inset:0; background-image:url(assets/game/ui/pp-ball-on.png); background-size:100% 100%; } .pp-p { inset:-14% 4% 2%; z-index:1; } .pp-p img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; opacity:0; } .pp-p img.on { opacity:1; } .pp-pad { display:none; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(2,48px); justify-content:center; gap:4px 8px; margin-top:6px; } .pp-pad button:first-child { grid-column:2; } .pp-pad button:nth-child(2) { grid-column:1; grid-row:2; } .pp-pad button:nth-child(3) { grid-column:2; grid-row:2; } .pp-pad button:nth-child(4) { grid-column:3; grid-row:2; } @media (pointer:coarse) { .pp-pad { display:grid; } } .pp-pad button { width:48px; height:48px; padding:0; border:0; background:none; cursor:pointer; touch-action:manipulation; } .pp-pad button img { width:100%; height:100%; display:block; pointer-events:none; } .pp-pad button:active { transform:scale(.92); filter:brightness(1.12); } .pp-top .gm-btn.pp-ic { padding:2px 5px; } .pp-top .gm-btn.pp-ic .gm-ic { height:22px; margin:0; vertical-align:middle; } .pp-hero { display:block; width:150px; max-width:60%; height:auto; margin:2px auto 0; } .pp-res-img { display:block; width:42%; max-width:130px; height:auto; margin:0 auto 4px; } .brick-main{max-width:480px;margin:auto;text-align:center;color:#e6faff}.brick-hud{display:flex;justify-content:space-around;background:#15294b;padding:8px;border-radius:10px 10px 0 0}.brick-hud span{display:flex;align-items:center;gap:7px}.brick-hud small{font-size:10px;color:#a7c7dd}.brick-hud b{color:#fff4bf;font-size:16px}.brick-field{position:relative;background:#101739;overflow:hidden}.brick-field canvas{display:block;width:100%;height:auto;touch-action:none}.brick-ready{position:absolute;top:68%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border:1px solid #70e6e1;border-radius:20px;background:#112047d9;font-size:12px;color:#e8fffc;pointer-events:none}.brick-ready[hidden]{display:none}.brick-choice{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#111a3bed;padding:20px;gap:10px}.brick-choice[hidden]{display:none}.brick-choice b{font-size:1.4em;color:#ffe181}.brick-choice p{margin:2px}.brick-choice div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.brick-choice button,.brick-controls button{background:#fff5d5;color:#173b51;border:1px solid #67d8d1;border-radius:9px;padding:10px 14px;font-weight:bold;cursor:pointer}.brick-controls{display:flex;gap:8px;padding:8px;background:#142849}.brick-controls button{flex:1}.brick-main>p{color:#526166;font-size:12px;line-height:1.5;margin:6px} /* 좋소 키우기 — 미니게임 목록(4.72: 섬 지도 → 분류 탭 + 카드. 섬 그림은 카드 그림으로 사용) */ .gm-world { flex:1 1 auto; min-height:200px; overflow-y:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:max-content; gap:8px; padding:8px; border-radius:12px; box-sizing:border-box; background:#2f8de8 url("assets/game/ui/world-sky.jpg") center/cover no-repeat; border:1.5px solid var(--border2); } .gm-body.fixed > .gm-world { flex:1 1 0; min-height:0; } .gm-body:not(.fixed) > .gm-world { height:420px; } .gm-world-tabs { margin-bottom:6px; } .gm-gcard { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; padding:6px 4px 7px; border:1.5px solid transparent; border-radius:12px; cursor:pointer; background:rgba(255,255,255,0.9); color:#2b2b2b; font-family:inherit; box-shadow:0 2px 6px rgba(0,40,80,0.2); } .gm-gcard:hover { border-color:var(--accent); } .gm-gcard:active { transform:scale(.97); } .gm-gcard-art { width:100%; max-width:84px; aspect-ratio:1; object-fit:contain; display:block; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(0,40,80,0.25)); } .gm-gcard-icon { font-size:34px; line-height:84px; height:84px; } .gm-gcard b { max-width:100%; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gm-gcard small { max-width:100%; font-size:10px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gm-gcard.resume { border-color:#e0a020; background:#fff6dc; } .gm-gcard.locked .gm-gcard-art { filter:grayscale(1) brightness(0.92) opacity(0.7); } .gm-gcard.locked { background:rgba(235,238,242,0.85); } .gm-gcard.soon { border:1.5px dashed #b9c6d2; background:rgba(255,255,255,0.7); } .gm-gcard.shake { animation:gmIsleShake2 0.4s; } @media (max-width:340px) { .gm-world { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* 5.34 게임 시작 전 설명 화면 · 로비 대표 그림 */ .gm-lobby-art { display:block; width:min(100px,28%); height:auto; margin:0 auto 4px; } .gm-lobby { flex:1 1 auto; min-height:0; overflow-y:auto; text-align:center; padding:4px 10px; } .gm-lobby > img { display:block; width:min(150px,40%); height:auto; margin:4px auto 0; } .gm-lobby h3 { margin:4px 0; font-size:15px; } .gm-lobby p { margin:0 0 12px; font-size:12px; line-height:1.55; color:var(--text2); } .gm-lobby > .gm-btn { width:100%; } .gm-char { display:flex; align-items:center; gap:10px; } .gm-char-info { flex:1; min-width:0; } .gm-char-row { display:flex; align-items:center; gap:8px; width:100%; padding:6px 4px; border:none; border-bottom:1px solid var(--border2); background:none; color:var(--text); font-family:inherit; text-align:left; cursor:pointer; } .gm-char-row:disabled { cursor:default; } .gm-char-row.cur { background:var(--accent-bg); } .gm-char-row.locked { opacity:0.45; } .gm-char-row-text { flex:1; min-width:0; display:flex; flex-direction:column; font-size:12px; } .gm-char-row-text small { color:var(--text3); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gm-char-row-diff { font-size:10.5px; color:var(--text4); white-space:nowrap; } .gm-char-cheer { display:block; margin-top:2px; font-size:10.5px; color:var(--text3); white-space:normal; word-break:keep-all; } .gm-char-cheer b { color:var(--text2); } .gm-char-cheer.on { color:#ef6c00; } .gm-char-cheer.on b { color:#e65100; } .gm-char-row-text small.gm-char-cheer { white-space:normal; overflow:visible; text-overflow:clip; } .gm-char-row.locked .gm-char-cheer { opacity:0.9; } .gm-char-cheer .gm-ic { height:13px; vertical-align:-2px; margin-right:3px; } .gm-char-grid { display:flex; flex-direction:column; gap:6px; margin:7px 0; } .gm-second { display:flex; flex-direction:column; gap:5px; margin:8px 0; padding:10px; border:1px solid #c7a25f; border-radius:10px; background:linear-gradient(135deg,#fff5df,#f4e5bc); color:#503711; } .gm-second-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; } .gm-second-tabs.three { grid-template-columns:repeat(3,minmax(0,1fr)); } .gm-second-tabs button { border:1px solid #b8a27b; border-radius:7px; padding:7px; background:#fffaf0; color:#5d4b32; font-weight:800; cursor:pointer; } .gm-second-tabs button.on { background:#98652d; color:#fff; } .gm-second small { font-size:10px; line-height:1.45; } .gm-char-card.second-done { border-color:#c49b45; background:rgba(233,189,98,.22); } /* 4.97 — 다크 모드에서도 읽히게 반투명 금색 */ .gm-widget.gm-second-gold { border-color:#d8ab47; box-shadow:0 0 22px #e9bd6299; } .gm-widget.gm-second-gold .gm-head { background:linear-gradient(90deg,#553111,#b68533,#553111); } .gm-crown-banner,.gm-third-banner { position:relative; overflow:hidden; isolation:isolate; border:2px solid #fbd36b; border-radius:12px; background:linear-gradient(110deg,#421044,#a948a5,#fff0ab,#b76c24,#47114d); background-size:250% 250%; color:#fff7da; box-shadow:0 0 0 1px #9b57a9,0 0 22px #df8cff99,inset 0 0 18px #fff3a655; animation:gmCrownGlow 7s linear infinite; } .gm-crown-banner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px 8px; margin:3px 0 8px; padding:6px 8px; text-align:center; } .gm-crown-banner b { font-size:14px; text-shadow:0 1px 3px #4c083f,0 0 8px #ffe581; } .gm-crown-banner small { width:100%; font-size:10px; font-weight:800; color:#fff7d2; } .gm-crown-spark { font-size:16px; animation:gmCrownSpark 2s ease-in-out infinite alternate; } .gm-third-banner { color:#fff7da; } .gm-third-banner .gm-second-tabs button { border-color:#e4bd68; } .gm-widget.gm-third-legend { border-color:#d78af4; box-shadow:0 0 24px #c56dff88; } .gm-widget.gm-third-legend .gm-head { background:linear-gradient(95deg,#321038,#79438c,#d6a45c,#321038); background-size:250% 100%; animation:gmCrownGlow 8s linear infinite; } @keyframes gmCrownGlow { to { background-position:250% 50%; } } @keyframes gmCrownSpark { to { transform:scale(1.16) rotate(8deg); text-shadow:0 0 10px #fff4a4; } } @media (prefers-reduced-motion:reduce) { .gm-crown-banner,.gm-third-banner,.gm-crown-spark,.gm-widget.gm-third-legend .gm-head { animation:none; } } .gm-char-rowgroup { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .gm-char-card { min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 3px; border:1px solid var(--border2); border-radius:10px; background:var(--surface); color:var(--text); font:inherit; cursor:pointer; } .gm-char-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); } .gm-char-card.locked { color:var(--text3); } .gm-char-face { position:relative; display:block; width:46px; height:46px; } .gm-char-face > img:first-child { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--input-bg); } .gm-char-card .gm-char-face > img:first-child, .gm-char-detail-head > img { object-fit:contain; background:var(--input-bg); } .gm-char-card.locked .gm-char-face > img:first-child { filter:saturate(.55); } .gm-char-face .gm-char-lock { position:absolute; right:-3px; bottom:-2px; width:18px; height:18px; } .gm-char-card b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; } .gm-char-card small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; color:var(--text3); } .gm-char-card.cur small { color:var(--accent); font-weight:800; } .gm-char-detail { grid-column:1/-1; padding:8px 9px; border:1px solid var(--accent); border-radius:11px; background:var(--input-bg); } .gm-char-detail[hidden], .gm-team-help[hidden] { display:none; } .gm-char-detail-head { display:flex; align-items:center; gap:8px; } .gm-char-detail-head > img { width:42px; height:42px; border-radius:50%; object-fit:cover; } .gm-char-detail-head span, .gm-char-detail-skill span { display:flex; flex-direction:column; min-width:0; } .gm-char-detail-head b { font-size:13px; } .gm-char-detail-head small, .gm-char-detail-skill small, .gm-char-detail-foot small { font-size:10.5px; color:var(--text3); line-height:1.4; } .gm-char-detail-skill { display:flex; align-items:flex-start; gap:7px; margin:7px 0; font-size:11px; } .gm-char-detail-skill > .gm-ic { height:22px; margin:0; flex:none; } .gm-char-detail-skill b { font-size:11.5px; } .gm-char-detail-foot { display:flex; align-items:center; justify-content:space-between; gap:7px; } .gm-char-detail-foot > b { color:var(--accent); font-size:11px; } .gm-char-detail-foot .gm-team-act:disabled { opacity:.5; cursor:default; } /* 사장·이사회(v2.45) — 직원 화면 위쪽 */ .gm-board-wrap { position:relative; } .gm-board { margin:6px 0 8px; padding:8px; border-radius:12px; background:linear-gradient(180deg, rgba(255,200,60,0.12), rgba(255,200,60,0.03)); border:1px solid rgba(255,190,60,0.4); } .gm-board-q { position:absolute; top:11px; right:29px; z-index:2; } .gm-board-t { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:900; color:var(--text); margin-bottom:4px; } .gm-board-t .gm-ic { height:18px; margin:0; } .gm-board-t small { font-weight:600; font-size:11px; color:var(--text2); } .gm-board > summary { cursor:pointer; margin-bottom:0; list-style:none; padding-right:4px; } .gm-board > summary::-webkit-details-marker, .gm-soon-box > summary::-webkit-details-marker { display:none; } /* 접기 화살표(3.81) — ⌄·⌃ 글자는 글꼴 안에서 아래/위로 치우쳐 줄 가운데에 안 옴 → 테두리로 그린 꺾쇠를 가운데 정렬 */ .gm-board > summary::after, .gm-soon-box > summary::after { content:''; flex:none; width:6px; height:6px; margin:0 4px 0 auto; border-right:1.6px solid var(--text3); border-bottom:1.6px solid var(--text3); transform:translateY(-2px) rotate(45deg); transition:transform .15s; } .gm-board[open] > summary::after, .gm-soon-box[open] > summary::after { transform:translateY(2px) rotate(-135deg); } .gm-board[open] > summary { margin-bottom:4px; } .gm-board-row { display:flex; align-items:center; gap:8px; padding:6px 4px; border-top:1px solid var(--border2); } .gm-board-row:first-of-type { border-top:none; } .gm-board-row.ceo { background:rgba(255,200,60,0.12); border-radius:9px; } .gm-board-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; } .gm-board-text b { font-size:13px; color:var(--text); } .gm-board-text em { font-style:normal; font-size:10px; font-weight:900; padding:1px 6px; border-radius:999px; margin-right:4px; vertical-align:1px; } .gm-board-text em.ceo { background:#ffb300; color:#3a2600; } .gm-board-text em.bd { background:rgba(255,179,0,0.14); color:var(--text); border:1px solid rgba(255,179,0,0.55); } .gm-board-stars { color:#ffb300; font-size:12px; letter-spacing:-1px; } .gm-board-text small { font-size:10.5px; color:var(--text2); line-height:1.4; } .gm-board-text small .gm-ic { height:13px; vertical-align:-2px; margin-right:2px; } .gm-board-boost { color:#3fb950 !important; font-size:10.5px !important; } .gm-board-up { flex-shrink:0; display:flex; flex-direction:column; align-items:center; padding:5px 8px; border-radius:9px; border:1.5px solid #ffb300; background:rgba(255,179,0,0.14); color:var(--text); font-family:inherit; cursor:pointer; } .gm-board-up b { font-size:12px; } .gm-board-up small { font-size:9.5px; color:var(--text2); white-space:nowrap; } .gm-board-up small .gm-ic, .gm-board-up small .gm-money { height:12px; vertical-align:-2px; } .gm-board-up:disabled { opacity:0.45; cursor:default; } .gm-board-max { flex-shrink:0; font-size:11px; font-weight:900; color:#ffb300; padding:0 6px; } .gm-board-note { margin-top:6px; font-size:10.5px; color:var(--text2); } /* 3.29 — 업데이트 예정 직원: 큰 잠금 제목 + 초상화 카드(3.27의 점선 줄을 대체) */ .gm-soon-box { margin:10px 0 6px; padding:10px; border-radius:12px; border:1.5px solid var(--border2); background:repeating-linear-gradient(135deg,rgba(120,110,95,.06) 0 10px,transparent 10px 20px),var(--bg); } .gm-soon-t { display:flex; align-items:center; gap:10px; margin-bottom:9px; } .gm-soon-box > summary { cursor:pointer; list-style:none; margin-bottom:0; } .gm-soon-box[open] > summary { margin-bottom:9px; } .gm-soon-lock { width:34px; height:34px; object-fit:contain; flex:none; } .gm-soon-t span { display:flex; flex-direction:column; } .gm-soon-t b { font-size:15px; color:var(--text); } .gm-soon-t small { font-size:11px; color:var(--text3); } .gm-soon-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .gm-soon-card { display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 4px 7px; border-radius:10px; background:var(--surface); border:1px solid var(--border2); } .gm-soon-face { position:relative; width:64px; height:64px; } .gm-soon-face > img:first-child { width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; background:#f1ede8; border:2px solid var(--border); filter:saturate(.75); } .gm-soon-face > .gm-face-ph { width:64px; height:64px; font-size:16px; } .gm-soon-badge { position:absolute; right:-4px; bottom:-3px; width:24px; height:24px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); } .gm-soon-card b { font-size:12.5px; color:var(--text); } /* 4.29 — 4회차 탭 · 4회차 신화의 이사회 머리줄 */ .gm-second-tabs.four { grid-template-columns:repeat(4,minmax(0,1fr)); } .gm-widget.gm-fourth-myth { border-color:#8ef3ff; box-shadow:0 0 26px rgba(160,90,255,.6); } .gm-widget.gm-fourth-myth .gm-head { background:linear-gradient(95deg,#07061f,#2a1a6e,#a3227a,#1aa7c7,#07061f); background-size:260% 100%; animation:gmCrownGlow 8s linear infinite; } /* 기본 테마에선 회차 보상에 따른 제목줄 광택을 끄고 기본 제목줄로 표시 */ :root:not([data-season]):not([data-honor]) .gm-widget:is(.gm-second-gold,.gm-third-legend,.gm-fourth-myth) .gm-head { background:var(--input-bg); background-size:auto; animation:none; } /* 4.68 회차 이사회 띠 — 한 줄로 얇게(사용자: 회차 반복 유저에게 큰 배너가 부담) */ .gm-crown-banner { flex-wrap:nowrap; gap:6px; margin:2px 0 6px; padding:3px 10px; border-width:1.5px; border-radius:9px; box-shadow:0 0 0 1px #9b57a9,0 0 8px #df8cff55; } .gm-crown-banner b { font-size:12px; white-space:nowrap; flex-shrink:0; } .gm-crown-banner small { width:auto; min-width:0; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.95; } .gm-crown-banner .gm-crown-spark { font-size:12px; flex-shrink:0; } .gm-crown-banner .gm-crown-spark .gm-ic { height:15px; vertical-align:-3px; } .gm-board-overview { display:block; padding:0; text-align:left; } .gm-board-overview { animation:none; background:linear-gradient(160deg,#421044,#7d2f86 55%,#a948a5); } /* 펼치면 키가 커져 움직이는 그라데이션이 반쪽씩 갈라져 보임 */ .gm-board-overview summary { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:6px; padding:3px 8px; cursor:pointer; list-style:none; background:linear-gradient(110deg,#673069,#b46bb6,#f3cd77,#8e448f); background-size:250% 100%; animation:gmCrownGlow 7s linear infinite; } .gm-board-overview.cycle-3 summary { background-image:linear-gradient(110deg,#543008,#b76f17,#ffe49a,#ac6114); } .gm-board-overview.cycle-4 summary { background-image:linear-gradient(110deg,#29205c,#8354c2,#f7d783,#563092); } .gm-board-overview summary::after { content:''; position:absolute; inset:-50% auto -50% -40%; width:30%; transform:skewX(-22deg); background:linear-gradient(90deg,transparent,#ffffff80,transparent); pointer-events:none; animation:gmBoardShine 4s ease-in-out infinite; } @keyframes gmBoardShine { 0%,15% { left:-40%; } 70%,100% { left:120%; } } @media (prefers-reduced-motion:reduce) { .gm-board-overview summary,.gm-board-overview summary::after { animation:none; } } .gm-board-overview summary::-webkit-details-marker { display:none; } .gm-board-overview summary b { font-size:12px; } .gm-board-overview summary small { width:auto; min-width:0; } .gm-board-preview { padding:7px 9px 9px; border-top:1px solid rgba(255,255,255,.35); text-align:left; } .gm-board-preview > b { display:block; margin:4px 0 2px; font-size:11px; } .gm-board-preview-row { display:flex; align-items:flex-start; gap:5px; padding:3px 0; } .gm-board-preview-row .gm-ic { height:14px; flex:none; } .gm-board-preview-row span { min-width:0; } .gm-board-preview-row b,.gm-board-preview-row small { display:block; white-space:normal; text-align:left; } .gm-board-preview-row b { font-size:10.5px; } .gm-board-preview-row small { font-size:9.5px; line-height:1.35; opacity:.9; } .gm-board-preview-empty { display:block; padding:3px 0; font-size:10px; } .gm-board-faces { display:grid; grid-template-columns:repeat(9,1fr); gap:4px; padding:4px 0; } .gm-board-face { padding:0; border:none; background:none; cursor:pointer; border-radius:50%; } .gm-board-face .gm-avatar, .gm-board-face .gm-avatar img { width:34px; height:34px; } .gm-board-face > img, .gm-board-face > .gm-face-ph { width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; display:block; background:#fff; border:1.5px solid #fff; } .gm-board-face.sel { outline:2px solid #ffb300; outline-offset:1px; } .gm-board-pick { min-height:34px; margin-top:2px; } .gm-board-pick small { display:block; white-space:normal; text-align:left; font-size:10px; opacity:.85; } .gm-board-preview .gm-btn { width:100%; margin:7px 0 0; } .gm-soon-card small { font-size:10.5px; color:var(--muted,#8a8178); text-align:center; line-height:1.2; } /* 프로필 사진(게임 v2.20) — 랭킹·관리 목록 닉네임 앞, 플레이 화면 캐릭터 줄 오른쪽 */ .gm-pf { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; box-sizing:border-box; border:1.5px solid var(--border); background:var(--input-bg); } .gm-pf-ph { color:#fff; font-weight:700; font-size:13px; line-height:1; } .gm-pf.gm-pf-s { width:20px; height:20px; font-size:10px; border-width:1px; margin-right:5px; vertical-align:-5px; } .gm-pf-now.honor-silver .gm-pf { border:3px solid #b9c7d9; box-shadow:0 0 10px #9db5d9; } .gm-pf-now.honor-gold .gm-pf { border:3px solid #e8b950; box-shadow:0 0 12px #f6cb74; } .gm-pf-ph.gm-pf-s { display:inline-block; overflow:hidden; text-align:center; line-height:18px; } /* overflow로 기준선을 아래 끝에 — 사진(img)과 같은 높이에 */ .gm-pf.gm-pf-l { width:64px; height:64px; font-size:24px; border-width:2px; } .gm-pf-btn { flex-shrink:0; padding:0; border:none; background:none; cursor:pointer; border-radius:50%; line-height:0; } .gm-pf-btn:hover .gm-pf { border-color:var(--accent); } .gm-pf-now { display:flex; align-items:center; gap:12px; padding:8px 4px; } .gm-pf-now b { display:block; font-size:15px; } .gm-pf-now small { color:var(--text3); font-size:11.5px; } .gm-pf-acts { display:flex; gap:6px; } .gm-pf-acts .gm-btn { flex:1; text-align:center; box-sizing:border-box; } .gm-pf-msg { min-height:16px; margin-top:4px; font-size:11.5px; color:var(--text2); } .gm-pf-sub { margin:6px 0 4px; font-size:12px; font-weight:700; color:var(--text2); } .gm-pf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:6px; } .gm-pf-grid button { aspect-ratio:1; padding:3px; border:1.5px solid var(--border); border-radius:50%; background:var(--input-bg); cursor:pointer; overflow:hidden; } .gm-pf-grid button img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; } .gm-pf-grid button:hover { border-color:var(--accent); } .gm-pf-grid button.on { border-color:var(--accent); box-shadow:0 0 0 2px rgba(232,115,42,0.35); } .gm-pf-del { padding:0; border:none; background:none; cursor:pointer; line-height:0; vertical-align:-5px; } .gm-pf-del:hover .gm-pf { outline:2px solid #d93025; } .gm-mp-pf .gm-pf { width:40px; height:40px; border:none; } /* 유저 프로필 변경(v2.38) — 사진·닉네임·PIN */ .gm-pf-sec { margin:12px 0 5px; font-size:13px; font-weight:800; color:var(--text); } .gm-pf-sec small { font-weight:500; font-size:11px; color:var(--text3); margin-left:4px; } .gm-pf-row { display:flex; gap:6px; align-items:center; } .gm-pf-row .gm-btn, .gm-pf-pins .gm-btn { margin-top:0; width:auto; padding:9px 14px; flex-shrink:0; } .gm-pf-in { flex:1; min-width:0; width:100%; box-sizing:border-box; padding:9px 10px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-size:14px; font-family:inherit; } .gm-pf-in:focus { outline:none; border-color:var(--accent); } .gm-pf-pins { display:grid; grid-template-columns:1fr 1fr; gap:6px; } .gm-pf-pins .gm-pinwrap:first-child { grid-column:1/-1; } .gm-pf-pins .gm-btn { grid-column:1/-1; width:100%; } .gm-pf.fit, .gm-pf-grid button.fit img { object-fit:contain; background:var(--input-bg); } .gm-pf-grid button.fit img { border-radius:0; padding:2px; box-sizing:border-box; } /* 4.29 — 랭킹 배너 고르기(랭킹 줄과 같은 배너 모양 미리보기) */ .gm-pf-banners { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:4px 0 10px; } .gm-pf-banner { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:34px; padding:5px 8px; border-radius:9px; border:1.5px solid var(--border); background:var(--surface2); color:var(--text); font:inherit; font-size:11.5px; font-weight:800; cursor:pointer; } .gm-pf-banner > span { position:relative; z-index:1; display:inline-flex; align-items:center; gap:3px; } .gm-pf-banner .gm-ic { height:15px; } .gm-pf-banner.on { outline:3px solid var(--accent); outline-offset:1px; } .gm-pf-themes .gm-pf-banner { min-height:40px; } .gm-pf-themes .gm-pf-myth { background:linear-gradient(100deg,#1c1d52,#33357a 35%,#b99650 62%,#1c1d52); background-size:240% 100%; color:#fff9e9; border-color:#e5c76b; text-shadow:0 1px 3px #15123d; animation:gmLegendFlow 7s linear infinite; } /* 신화 테마 버튼 — 남색·금빛이 흐르는 효과(5.07) */ .gm-pf-themes .gm-pf-myth > span::before { content:''; width:18px; height:18px; background:url("assets/game/ui/myth-badge.png") center/contain no-repeat; } .gm-pf-themes .gm-pf-spongebob { background:linear-gradient(110deg,#07849b,#16b8c0 48%,#f1c84f); color:#fffbe2; border-color:#e7be4b; text-shadow:0 1px 2px #07566d; } @media (prefers-reduced-motion:reduce) { .gm-pf-themes .gm-pf-myth { animation:none; } } .gm-pf-banner.cyc2 { background:linear-gradient(100deg,#1d3346,#3d6f8f 40%,#b9cfe0 72%,#1d3346); background-size:240% 100%; color:#eef6ff; border-color:#b9d3ea; animation:gmLegendFlow 9s linear infinite; } .gm-pf-banner.legend { background:linear-gradient(100deg,#2a0e3a,#5d2b7c 38%,#b4823a 70%,#2a0e3a); background-size:240% 100%; color:#fff4d4; border-color:#f2c95c; animation:gmLegendFlow 7s linear infinite; } .gm-pf-banner.cyc4 { background:linear-gradient(100deg,#07061f,#2a1a6e 25%,#a3227a 50%,#1aa7c7 75%,#07061f); background-size:260% 100%; color:#fff; border-color:#8ef3ff; animation:gmLegendFlow 6s linear infinite; } .gm-pf-banner.champ { --c1:#333; --c2:#777; --c3:#bbb; background:linear-gradient(100deg,var(--c1),var(--c2) 45%,var(--c3) 75%,var(--c1)); background-size:240% 100%; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); border-color:var(--c3); animation:gmLegendFlow 7s linear infinite; } /* 4.49 — 베타 테스터 표시: 메인 화면 오른쪽 위 프로필 사진에 BETA 꼬리표(베타 배너와 같은 남색·민트) */ .gm-pf-btn.beta, .gm-pf-btn.gm { position:relative; } .gm-pf-btn.gm::after { content:'GM'; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); padding:1px 5px; border-radius:5px; background:linear-gradient(135deg,#0a0a0a,#2a2210 45%,#0a0a0a); color:#ffd76e; border:1px solid #e9c46a; box-shadow:0 0 5px rgba(233,196,106,.8); text-shadow:0 0 3px rgba(255,215,110,.8); font-size:8.5px; font-weight:900; letter-spacing:.5px; line-height:1.2; pointer-events:none; } /* 4.50 */ .gm-pf-btn.beta::after { content:'BETA'; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); padding:1px 4px; border-radius:5px; background:#27365a; color:#5ce0b6; border:1px solid #5ce0b6; font-size:8px; font-weight:900; letter-spacing:.5px; line-height:1.2; pointer-events:none; } /* 4.51 메인 화면 프로필 — 키우는 직원 초상화와 같은 크기(40px) + 왼쪽 위 승진 순위 */ #gmPfBtn { position:relative; } #gmPfBtn > .gm-pf { width:40px; height:40px; font-size:16px; } #gmPfBtn[data-rank]:not([data-rank=""])::before { content:attr(data-rank); position:absolute; left:-10px; top:-8px; z-index:1; padding:1px 5px; border-radius:8px; background:#1f2f5c; color:#fff; border:1.5px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.45); font-size:11px; font-weight:900; line-height:1.3; letter-spacing:-.2px; white-space:nowrap; pointer-events:none; } /* 4.54 멀리서도 읽히게 — '#6'이 '86'처럼 보였음 → '6위', 크게·진한 바탕 */ #gmPfBtn[data-top="1"]::before { background:linear-gradient(135deg,#ffe27a,#e0a400); color:#3a2600; border-color:#fff6d0; } /* 4.53 GM 배너도 배너 목록에서 고름(블랙&골드) */ .gm-pf-banner.gmrow-opt { background:linear-gradient(100deg,#050505 0%,#1a1406 22%,#3d2f0c 42%,#0c0a04 58%,#2b2109 78%,#050505 100%); background-size:240% 100%; color:#ffe8a3; border-color:#e9c46a; box-shadow:0 0 6px rgba(233,196,106,.5); animation:gmLegendFlow 8s linear infinite; } .gm-pf-banner.gmrow-opt .gm-gm-tag { margin-right:4px; } @media (prefers-reduced-motion:reduce) { .gm-pf-banner.gmrow-opt { animation:none; } } /* 좋소 키우기 — 팀원 뽑기 */ .gm-team-ph { width:40px; height:40px; font-size:12px; } .gm-team-list { display:flex; flex-direction:column; gap:5px; } .gm-team-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; background:var(--input-bg); border:1px solid var(--border2); } .gm-team-row.empty { opacity:0.55; border-style:dashed; } .gm-team-text { flex:1; min-width:0; display:flex; flex-direction:column; font-size:12px; } .gm-team-text small { color:var(--text3); font-size:10.5px; } .gm-team-rank { font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:6px; color:#fff; vertical-align:1px; } .gm-team-rank.intern { background:#8bc34a; } .gm-team-rank.staff { background:#42a5f5; } .gm-team-stars { font-size:10.5px; letter-spacing:-1px; color:#c7c7c7; } .gm-team-stars.g3 { color:#42a5f5; } .gm-team-stars.g4 { color:#ab47bc; } .gm-team-stars.g5 { color:#ffb300; text-shadow:0 0 4px rgba(255,179,0,0.6); } .gm-team-out { flex-shrink:0; padding:4px 8px; border-radius:8px; border:1px solid var(--border); background:none; color:var(--text3); font-size:11px; font-family:inherit; cursor:pointer; } .gm-team-out:hover { color:#e53935; border-color:#e53935; } .gm-team-pulls { display:flex; gap:8px; margin-top:10px; } .gm-team-pull { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border:none; border-radius:12px; color:#fff; font-family:inherit; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,0.25); } .gm-team-pull b { font-size:13px; } .gm-team-pull small { font-size:11px; font-weight:700; } .gm-team-pull.intern { background:linear-gradient(180deg,#9ccc65,#689f38); } .gm-team-pull.staff { background:linear-gradient(180deg,#64b5f6,#1e88e5); } .gm-team-pull:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.25); } .gm-team-pull:disabled { opacity:0.45; cursor:default; transform:none; } .gm-team-pull .gm-money { height:13px; } /* 업무 화면 — 팀원들이 캐릭터 옆에 서 있음 */ .gm-crew { display:flex; align-items:flex-end; flex-shrink:0; margin-left:-14px; margin-right:-4px; align-self:flex-end; pointer-events:auto; } .gm-crew-m { position:relative; margin-left:-12px; animation:gmCrewBob 2.4s ease-in-out infinite; animation-delay:var(--d); transform-origin:bottom center; } .gm-crew-m:first-child { margin-left:0; } .gm-crew-m img { height:58px; width:auto; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,0.3)); } .gm-crew-m .gm-face-ph { width:28px; height:28px; font-size:9px; } .gm-crew-m.g4::after, .gm-crew-m.g5::after { content:''; position:absolute; left:10%; right:10%; bottom:-2px; height:6px; border-radius:50%; z-index:-1; } .gm-crew-m.g4::after { background:radial-gradient(#ce93d8,transparent 70%); } .gm-crew-m.g5::after { background:radial-gradient(#ffd54f,transparent 70%); box-shadow:0 0 8px #ffd54f; } .gm-crew-m > i { position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-style:normal; font-size:15px; opacity:0; pointer-events:none; } .gm-crew-m.hop { animation:gmCrewHop 0.35s ease-out; } .gm-crew-m.oops { animation:gmCrewOops 0.7s; } .gm-crew-m.oops > i { animation:gmOopsIco 1.2s ease-out; } /* 좋소 키우기 — 통합 뽑기 · 보관함 · 강화 */ .gm-body.fixed > .gm-team-scroll { flex:1 1 0; flex-shrink:1; min-height:0; } .gm-team-scroll { overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:6px; padding-right:2px; scrollbar-width:thin; } .gm-team-scroll .gm-team-pulls { margin-top:4px; } .gm-team-pull.one { background:linear-gradient(180deg,#9ccc65,#689f38); } .gm-team-pull.ten { flex:1.4; background:linear-gradient(180deg,#ffb74d,#f57c00); } .gm-team-pull.hundred { flex:1.4; background:linear-gradient(180deg,#ba68c8,#7b1fa2); } /* 3.18 — 비용·보장을 두 줄로 나누고 줄 안에서는 안 끊김, 줄 수가 다른 1회 버튼은 세로 가운데 */ .gm-team-pulls .gm-team-pull { justify-content:center; gap:1px; } .gm-team-pulls .gm-team-pull small { text-align:center; line-height:1.3; white-space:nowrap; } .gm-team-odds { font-size:10px; color:var(--text3); text-align:center; word-break:keep-all; } .gm-inv-head { display:flex; align-items:center; gap:6px; margin-top:4px; } .gm-inv-head small { flex:1; } .gm-team-row { gap:6px; } .gm-team-row.g3 { border-left:3px solid #42a5f5; } .gm-team-row.g4 { border-left:3px solid #ab47bc; } .gm-team-row.g5 { border-left:3px solid #ffb300; } .gm-team-act { flex-shrink:0; padding:4px 7px; border-radius:8px; border:1px solid var(--border); background:none; color:var(--text2); font-size:11px; font-weight:700; font-family:inherit; cursor:pointer; white-space:nowrap; } .gm-team-act.in { color:#fff; border-color:transparent; background:var(--accent); } .gm-team-act.up { color:#fff; border-color:transparent; background:linear-gradient(90deg,#ab47bc,#7e57c2); animation:ocAtk 0.8s ease-in-out infinite alternate; } .gm-team-act.out:hover { color:#e53935; border-color:#e53935; } /* 팀 도움 배지 — 팀원들 머리 위 가운데(사람 수가 늘어도 같이 따라감) */ /* 팀원 — 사무실 안에서만 겹치게(스킬 설명창을 덮던 문제), 팀 도움 배지는 팀원들 머리 위 가운데 */ .gm-crew { position:relative; z-index:1; isolation:isolate; } /* 팀 도움 배지 — 업무 장면 왼쪽 아래(v2.60). 예전에는 팀원 묶음 위에 오른쪽 기준으로 붙어서, +367.5% 처럼 길어지면 왼쪽으로 자라 캐릭터 머리를 덮었다. 이제 팀원 묶음 밖으로 빼서 장면 모서리에 고정 — 글자가 아무리 길어도 캐릭터를 가리지 않는다 */ .gm-crew-info { position:absolute; left:10px; bottom:6px; z-index:12; max-width:min(100px, 30%); } .gm-crew-info > .gm-crew-buff { display:block; list-style:none; padding:1px 7px; border-radius:9px; white-space:nowrap; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; font-size:10.5px; font-weight:800; line-height:1.5; color:#fff; cursor:pointer; text-shadow:0 1px 2px rgba(0,0,0,0.5); background:rgba(27,94,32,0.92); border:1px solid rgba(165,214,167,0.9); box-shadow:0 2px 6px rgba(0,0,0,0.45); } .gm-crew-info > .gm-crew-buff::-webkit-details-marker { display:none; } .gm-crew-info > .gm-crew-buff .gm-ic { height:13px; vertical-align:-2px; margin-right:3px; } .gm-crew-info > .gm-crew-buff:hover, .gm-crew-info > .gm-crew-buff:focus-visible { background:rgba(46,125,50,0.95); } .gm-crew-list { position:absolute; left:0; bottom:calc(100% + 4px); width:max-content; max-width:min(320px, 85vw); max-height:100px; overflow:auto; padding:6px 10px; border-radius:8px; background:var(--btn-bg); color:var(--btn-text); font-size:10.5px; line-height:1.55; box-shadow:0 4px 14px rgba(0,0,0,.25); } .gm-crew-list > div { white-space:nowrap; } .gm-crew-tip { position:absolute; z-index:40; display:none; width:max-content; max-width:320px; box-sizing:border-box; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--btn-bg); color:var(--btn-text); font-size:11.5px; line-height:1.55; white-space:pre-line; word-break:keep-all; box-shadow:0 4px 14px rgba(0,0,0,0.25); pointer-events:none; } .gm-crew-m > i img.gm-dizzy { height:22px; width:auto; filter:none; } /* 미니창 — 팀 도움 표시가 팀원 머리 위(내 직원 몸 높이)에 떠서 내 직원을 가렸음 → 팀원 발밑에 작게(게임 v2.24) */ .gm-widget:not(.gm-standalone) .gm-crew-info > .gm-crew-buff { font-size:9.5px; padding:1px 6px; } /* 팀원 여러 명 방출(v2.25) */ .gm-team-row.pick { cursor:pointer; } .gm-team-row.picked { outline:2px solid #e53935; outline-offset:-2px; background:rgba(229,57,53,0.08); } .gm-pick-box { width:22px; height:22px; flex-shrink:0; border-radius:6px; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; } .gm-pick-box .gm-ic { height:16px; opacity:0; } .gm-team-row.picked .gm-pick-box { border-color:#e53935; } .gm-team-row.picked .gm-pick-box .gm-ic { opacity:1; } .gm-pick-bar { display:flex; align-items:center; gap:6px; padding:6px 8px; margin:4px 0; border-radius:10px; background:var(--surface2,var(--surface)); font-size:12px; font-weight:700; color:var(--text); } .gm-pick-bar span { flex:1; } .gm-team-act.go { color:#fff; border-color:transparent; background:#e53935; } .gm-team-act.go:disabled { opacity:0.45; cursor:default; } .gm-team-stars.g6 { background:var(--legend); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gmLegendShine 2.4s linear infinite; filter:drop-shadow(0 0 3px rgba(164,203,69,0.7)); } .gm-team-row.g6 { border-left:3px solid #a4cb45; background:linear-gradient(90deg, rgba(164,203,69,0.16), transparent 60%); } .gm-team-rank.assoc { background:var(--legend); background-size:200% 100%; color:#1f3a05; animation:gmLegendShine 2.4s linear infinite; } .gm-team-odds b.g3 { color:#42a5f5; } .gm-team-odds b.g4 { color:#ab47bc; } .gm-team-odds b.g5 { color:#ffb300; } .gm-team-act.syn { color:#1f3a05; border-color:transparent; background:var(--legend); background-size:200% 100%; animation:gmLegendShine 2.4s linear infinite; font-weight:800; } .gm-crew-m.g6::after { content:''; position:absolute; left:10%; right:10%; bottom:-2px; height:6px; border-radius:50%; z-index:-1; background:radial-gradient(#c0d989,transparent 70%); box-shadow:0 0 10px #a4cb45; } /* 팀원 직급 배지(2.70) — 등급 색을 따라감(파랑 바탕 흰 글자 '사원'이 잘 안 보였음). 밝은 바탕은 진한 글자 */ .gm-team-rank { text-shadow:none; font-weight:800; } .gm-team-rank.g1 { background:#616161; color:#fff; } .gm-team-rank.g2 { background:#bdbdbd; color:#242424; } .gm-team-odds .g2 { color:var(--text2); font-weight:800; } .gm-team-rank.g3 { background:#1565c0; color:#fff; } .gm-team-rank.g4 { background:#7b1fa2; color:#fff; } .gm-team-rank.g5 { background:#ffb300; color:#3a2600; } .gm-team-rank.g6 { background:var(--legend); background-size:200% 100%; color:#1f3a05; animation:gmLegendShine 2.4s linear infinite; } /* 2.94 — 보관함: 제목 / 설명 한 줄 / 버튼 줄(일괄 강화 · ★1·2 모두 방출 · 여러 명 고르기) */ .gm-inv-help { font-size:10.5px; color:var(--text3); line-height:1.45; margin:0 2px 6px; word-break:keep-all; } .gm-inv-help b { color:var(--text2); } .gm-inv-acts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0 0 8px; } .gm-inv-acts .gm-team-act { flex:1; min-width:0; padding:7px 6px; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gm-inv-acts .gm-team-act:disabled { opacity:.45; cursor:default; } /* 2.95 — 꺼진 버튼은 확실히 회색(보라 그라데이션이 반투명하게 남아 켜진 것처럼 보였음) */ .gm-inv-acts .gm-team-act:disabled, .gm-inv-acts .gm-team-act.up:disabled { background:var(--input-bg); color:var(--text3); border-color:var(--border); animation:none; opacity:.7; box-shadow:none; } .gm-team-odds { line-height:1.5; padding:7px 8px; border-radius:9px; background:var(--input-bg); } .gm-team-odds > div + div { margin-top:2px; } .gm-team-odds-line { display:flex; justify-content:center; flex-wrap:wrap; gap:2px 9px; } .gm-team-odds-line span { white-space:nowrap; } .gm-inv-help > div + div { margin-top:3px; } .gm-pick-bar { flex-wrap:wrap; justify-content:flex-end; } .gm-pick-bar span { flex-basis:100%; } .gm-pick-bar .gm-team-act { min-height:30px; } /* 3.16 — 선택 막대도 꺼진 강화·방출은 회색, 깜빡임 없음(2.95 규칙이 보관함 줄에만 걸려 있었음) */ .gm-pick-bar .gm-team-act:disabled { background:var(--input-bg); color:var(--text3); border-color:var(--border); animation:none; opacity:.7; box-shadow:none; cursor:default; } /* 3.20 — 성향 설명: 줄의 성향은 점선 밑줄(마우스 올리면 설명), 뽑기 안내에 5종 표 */ .gm-trait { text-decoration:underline dotted; text-underline-offset:2px; cursor:help; } .gm-trait-key { font-size:10.5px; color:var(--text3); gap:2px 8px; } .gm-trait-key b { color:var(--text2); } /* 3.21 — 팀원 설명창: 제목 옆 [?] → 제목 아래 떠 있는 작은 창(뽑기 보장·직급·성향·강화·합성·환급) */ .gm-rank-title { position:relative; } .gm-team-q { width:20px; height:20px; padding:0; border-radius:50%; border:1.5px solid var(--border); background:var(--input-bg); color:var(--text2); font:800 12px/1 inherit; cursor:pointer; flex-shrink:0; } .gm-team-q.on, .gm-team-q:hover { border-color:var(--accent); color:var(--accent); } .gm-team-help { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; padding:10px 12px 9px; border-radius:12px; border:1px solid var(--border); background:var(--surface); box-shadow:0 8px 24px rgba(0,0,0,0.28); font-size:11px; font-weight:500; line-height:1.5; color:var(--text2); word-break:keep-all; animation:gmFade 0.15s; } .gm-team-help > b { display:block; margin:6px 0 1px; font-size:11.5px; color:var(--text); } .gm-team-help > b:first-of-type { margin-top:0; } .gm-team-help-x { position:absolute; top:6px; right:6px; width:22px; height:22px; border:none; background:none; color:var(--text3); font-size:13px; cursor:pointer; } .gm-team-help-traits { display:grid; grid-template-columns:1fr; gap:1px; } .gm-team-help-traits i { display:inline-block; min-width:30px; font-style:normal; font-weight:800; color:var(--text); } .gm-team-help-traits small { color:var(--text3); font-size:10px; margin-left:3px; } /* 3.23 — ★5·★6 확정권 뽑기(관리자 지급): 확정권이 있을 때만 뽑기 줄 위에 따로 한 줄 */ .gm-team-pulls.tickets { margin-bottom:-2px; } .gm-team-pull.tk.g5 { background:linear-gradient(180deg,#ffd54f,#f9a825); color:#4a3200; } .gm-team-pull.tk.g6 { background:var(--legend); background-size:200% 100%; color:#1f3a05; animation:gmLegendShine 2.4s linear infinite; } /* 4.61 일괄 합성 고르기 */ .gm-syn-opts { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0; } .gm-syn-opts .gm-btn { margin:0; display:flex; flex-direction:column; gap:2px; padding:10px 6px; } .gm-syn-opts .gm-btn small { font-size:10.5px; font-weight:600; opacity:.85; } .gm-syn-opts .gm-btn small { white-space:nowrap; } .gm-syn-opts .gm-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; } /* 4.72 강화 재료 확인창 — '6성 ★★★★★★'처럼 숫자와 별을 같이, 굵게 */ .gm-up-g { display:inline-block; font-size:13px; font-weight:900; letter-spacing:.02em; } .gm-team-odds-buff { display:block; margin-top:2px; color:var(--accent); font-size:10.5px; font-weight:700; text-align:center; } .gm-team-fx { position:absolute; left:4px; bottom:28px; z-index:6; display:flex; flex-direction:column; gap:3px; max-width:70%; pointer-events:none; animation:gmTeamFx 2.3s ease-out forwards; } .gm-team-fx-row { padding:3px 6px; border:1px solid #a3c88a; border-radius:8px; background:#f8fff2; color:#29431f; font-size:10px; line-height:1.25; overflow-wrap:anywhere; box-shadow:0 2px 6px rgba(0,0,0,.15); } @keyframes gmTeamFx { 0% { opacity:0; transform:translateX(-35px); } 15%,78% { opacity:1; transform:translateX(0); } 100% { opacity:0; transform:translateX(-25px); } } @media (prefers-reduced-motion:reduce) { .gm-team-fx { animation:gmTeamFxFade 2.3s forwards; } @keyframes gmTeamFxFade { 0%,100% { opacity:0; } 10%,85% { opacity:1; } } } /* 뽑기 카드 연출 */ .gm-pull { position:absolute; inset:0; z-index:45; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); animation:gmFade 0.2s; perspective:800px; } .gm-pull-card { position:relative; width:200px; height:250px; transform-style:preserve-3d; animation:gmFlip 0.9s ease-out 0.15s both; } .gm-pull-back, .gm-pull-front { position:absolute; inset:0; border-radius:16px; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .gm-pull-back { transform:rotateY(180deg); background:linear-gradient(135deg,#5c6bc0,#283593); color:#fff; font-size:60px; font-weight:800; } .gm-pull-front { background:var(--surface); color:var(--text); border:3px solid #616161; box-shadow:0 10px 30px rgba(0,0,0,0.4); padding:10px; text-align:center; } .gm-pull.g2 .gm-pull-front { border-color:#bdbdbd; } .gm-pull-front b { font-size:17px; } .gm-pull-front small { font-size:11px; color:var(--text3); } .gm-pull-face .gm-face-ph, .gm-pull-img { width:84px !important; height:84px !important; font-size:22px; border-radius:50%; } .gm-pull.g3 .gm-pull-front { border-color:#42a5f5; } .gm-pull.g4 .gm-pull-front { border-color:#ab47bc; box-shadow:0 0 24px rgba(171,71,188,0.6); } .gm-pull.g5 .gm-pull-front { border-color:#ffb300; box-shadow:0 0 32px rgba(255,179,0,0.8); } /* 좋소 키우기 — 팀원 뽑기 연출 (모바일 게임식) */ .gm-gacha { --gc:#9e9e9e; position:absolute; inset:0; z-index:50; overflow:hidden; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gc) 35%, #0b0b14) 0%, #07070d 70%); animation:gmFade 0.25s; cursor:pointer; } .gm-gacha-rays { position:absolute; left:50%; top:45%; width:900px; height:900px; margin:-450px 0 0 -450px; opacity:0; pointer-events:none; background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gc) 70%, transparent) 0deg 7deg, transparent 7deg 22deg); -webkit-mask:radial-gradient(circle, #000 10%, transparent 62%); mask:radial-gradient(circle, #000 10%, transparent 62%); animation:gmRaysSpin 9s linear infinite, gmRaysIn 0.6s ease-out 0.55s forwards; } .gm-gacha-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; } .gm-gacha.open .gm-gacha-flash { animation:gmFlash 0.5s ease-out; } .gm-gacha-env { position:absolute; top:42%; left:50%; width:130px; height:96px; margin:-48px 0 0 -65px; border-radius:12px; background:linear-gradient(160deg,#fffdf4,#efe3c4); box-shadow:0 0 0 3px var(--gc), 0 0 40px var(--gc); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; animation:gmEnvDrop 0.45s cubic-bezier(.3,1.6,.6,1) both, gmEnvShake 0.12s linear 0.5s infinite; transition:box-shadow 0.3s; } .gm-gacha-seal .gm-ic { height:42px; margin:0; } .gm-gacha-hint { font-size:11px; font-weight:800; color:#7a5a20; } .gm-gacha.upgrade .gm-gacha-env { animation:gmEnvDrop 0.45s both, gmEnvShake 0.06s linear infinite; box-shadow:0 0 0 4px var(--gc), 0 0 70px var(--gc), 0 0 120px #fff; } .gm-gacha.open .gm-gacha-env { animation:gmEnvBurst 0.35s ease-out forwards; } .gm-gacha-card { position:relative; width:210px; padding:12px 10px 12px; border-radius:18px; text-align:center; color:#fff; opacity:0; transform:scale(0.3) rotateY(180deg); background:linear-gradient(170deg, color-mix(in srgb, var(--gc) 55%, #1b1b2a), #12121c 70%); border:3px solid var(--gc); box-shadow:0 0 30px color-mix(in srgb, var(--gc) 70%, transparent), inset 0 0 25px color-mix(in srgb, var(--gc) 35%, transparent); display:flex; flex-direction:column; align-items:center; gap:3px; } .gm-gacha.open .gm-gacha-card { animation:gmCardIn 0.65s cubic-bezier(.2,1.4,.4,1) 0.1s forwards; } .gm-gacha-tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:2px 12px; border-radius:10px; font-size:11px; font-weight:900; letter-spacing:1px; color:#fff; background:var(--gc); white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,0.4); } .gm-gacha-body { height:150px; display:flex; align-items:flex-end; justify-content:center; } .gm-gacha-body img { height:150px; width:auto; filter:drop-shadow(0 0 12px color-mix(in srgb, var(--gc) 80%, transparent)); } .gm-gacha-body .gm-pull-img { width:110px !important; height:110px !important; } .gm-gacha-stars i { font-style:normal; font-size:22px; color:#444; display:inline-block; opacity:0; transform:scale(2.4); } .gm-gacha.open .gm-gacha-stars i { animation:gmStarIn 0.3s ease-out forwards; } .gm-gacha-stars i.on { color:var(--gc); text-shadow:0 0 8px var(--gc); } .gm-gacha-card b { font-size:19px; text-shadow:0 2px 6px rgba(0,0,0,0.6); } .gm-gacha-card small { font-size:11px; color:rgba(255,255,255,0.8); } .gm-gacha-card small em { font-style:normal; color:#ffd54f; font-weight:800; } .gm-gacha-card.g5 { border-color:transparent; background:linear-gradient(170deg,#4a3500,#14101c 70%) padding-box, linear-gradient(120deg,#ff5252,#ffb300,#69f0ae,#40c4ff,#e040fb,#ff5252) border-box; background-size:100% 100%, 300% 300%; } .gm-gacha.open .gm-gacha-card.g5 { animation:gmCardIn 0.65s cubic-bezier(.2,1.4,.4,1) 0.1s forwards, gmRainbow 2s linear infinite; } .gm-gacha-banner { position:absolute; top:12%; left:0; right:0; text-align:center; font-size:30px; font-weight:900; letter-spacing:3px; color:#fff; opacity:0; text-shadow:0 0 12px var(--gc), 0 0 28px var(--gc), 0 3px 0 rgba(0,0,0,0.5); } .gm-gacha.open .gm-gacha-banner { animation:gmBanner 0.6s cubic-bezier(.2,1.6,.4,1) 1.3s forwards; } .gm-gacha-skip { position:absolute; bottom:12px; left:0; right:0; text-align:center; font-size:11px; color:rgba(255,255,255,0.5); } /* 뽑기 — 봉투 그림 · 에픽/레전드 금테 카드 */ .gm-gacha-env { width:160px; height:auto; margin:-60px 0 0 -80px; background:none; border-radius:0; box-shadow:none; filter:drop-shadow(0 0 14px var(--gc)) drop-shadow(0 0 4px var(--gc)); } .gm-gacha-env img { width:160px; height:auto; display:block; } .gm-gacha-env .gm-gacha-hint { margin-top:4px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.8); } .gm-gacha.upgrade .gm-gacha-env { box-shadow:none; filter:drop-shadow(0 0 26px var(--gc)) drop-shadow(0 0 60px #fff); } .gm-gacha-card.g4, .gm-gacha-card.g5 { border:none; padding:30px 22px 26px; min-height:300px; box-sizing:border-box; justify-content:center; } .gm-gacha-frame { position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); pointer-events:none; z-index:2; filter:drop-shadow(0 0 10px var(--gc)); } .gm-gacha-card.g4 .gm-gacha-tag, .gm-gacha-card.g5 .gm-gacha-tag { z-index:3; top:-8px; } /* 11회 결과 */ .gm-gacha-multi { flex-direction:column; gap:10px; } .gm-gacha-multi .gm-gacha-rays { opacity:0.35; } .gm-gm-title { position:relative; color:#fff; font-size:16px; font-weight:900; text-shadow:0 2px 6px rgba(0,0,0,0.5); } .gm-gm-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:min(92%,380px); } .gm-gm-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px 5px; border-radius:10px; color:#fff; font-size:10.5px; background:linear-gradient(170deg,#3a3a3a,#1c1c1c); border:2px solid #777; opacity:0; transform:scale(0.4) rotateY(180deg); animation:gmMultiIn 0.4s cubic-bezier(.2,1.4,.4,1) forwards; } .gm-gm-card.g1 { border-color:#616161; } .gm-gm-card.g2 { border-color:#bdbdbd; } .gm-gm-card.g3 { border-color:#42a5f5; box-shadow:0 0 8px rgba(66,165,245,0.6); } .gm-gm-card.g4 { border-color:#ab47bc; box-shadow:0 0 12px rgba(171,71,188,0.8); background:linear-gradient(170deg,#3b1a47,#1c1022); } .gm-gm-card.g5 { border-color:#ffb300; box-shadow:0 0 16px rgba(255,179,0,0.9); background:linear-gradient(170deg,#4a3500,#14101c); } .gm-gm-face .gm-face-ph, .gm-gm-face img { width:38px; height:38px; border-radius:50%; object-fit:cover; display:block; } .gm-gm-stars { font-size:9px; letter-spacing:-1px; color:#ffd54f; line-height:1.1; } .gm-gm-card b { font-size:10.5px; white-space:nowrap; } .gm-gm-new { position:absolute; top:-6px; right:-4px; font-style:normal; font-size:8.5px; font-weight:900; color:#fff; background:#e53935; padding:1px 4px; border-radius:6px; } .gm-pull.g6 .gm-pull-front { border-color:#a4cb45; box-shadow:0 0 32px rgba(164,203,69,0.85); } /* 뽑기 카드 — 유니크는 금테(예전 레전드 무지개 테두리는 레전드리로 옮김) */ .gm-gacha-card.g5 { background:linear-gradient(170deg,#4a3500,#14101c 70%); border:2px solid #ffb300; animation:none; } .gm-gacha.open .gm-gacha-card.g5 { animation:gmCardIn 0.65s cubic-bezier(.2,1.4,.4,1) 0.1s forwards; } .gm-gacha-card.g6 { border:none; padding:30px 22px 26px; min-height:300px; box-sizing:border-box; justify-content:center; background:linear-gradient(170deg,#24400a,#101a06 70%) padding-box, linear-gradient(120deg,#7fae2f,#c0d989,#a4cb45,#e9f7c5,#7fae2f) border-box; background-size:100% 100%,300% 100%; border:3px solid transparent; } .gm-gacha.open .gm-gacha-card.g6 { animation:gmCardIn 0.65s cubic-bezier(.2,1.4,.4,1) 0.1s forwards, gmRainbow 2s linear infinite; } .gm-gacha-card.g6 .gm-gacha-tag { z-index:3; top:-8px; background:var(--legend); background-size:200% 100%; color:#1f3a05; animation:gmLegendShine 2.4s linear infinite; } .gm-gacha-banner.legend { background:var(--legend); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 0 10px #a4cb45) drop-shadow(0 3px 0 rgba(0,0,0,0.5)); } .gm-gm-card.g6 { border-color:#a4cb45; box-shadow:0 0 16px rgba(164,203,69,0.9); background:linear-gradient(170deg,#24400a,#14101c); } /* 2.90 — 뽑기 레전드리 전용 연출(합성은 예전 그대로) */ .gm-gacha.legend-fx { background:radial-gradient(circle at 50% 45%, #10240a 0%, #050805 70%); } .lg-aurora { position:absolute; inset:-30%; pointer-events:none; opacity:0; filter:blur(28px); background:conic-gradient(from 0deg, transparent 0 8%, #a4cb45aa 14%, transparent 22%, #ffd54f88 32%, transparent 42%, #c0d989aa 55%, transparent 64%, #fff59d77 76%, transparent 86%, #a4cb45aa 94%, transparent); animation:lgFadeIn 1.2s ease-out .1s forwards, lgSpin 7s linear infinite; } .legend-fx.open .lg-aurora { filter:blur(18px); animation:lgFadeIn .3s ease-out forwards, lgSpin 3.5s linear infinite; } .lg-pillars i { position:absolute; bottom:-20%; left:var(--x); width:var(--w); margin-left:calc(var(--w) / -2); height:150%; border-radius:50%; pointer-events:none; opacity:0; transform-origin:50% 100%; background:linear-gradient(to top, transparent 0%, #c0d989 20%, #fff 50%, #e6ff9a 70%, transparent 100%); filter:blur(3px); animation:lgPillar 1.8s ease-out var(--dl) forwards; mix-blend-mode:screen; } .legend-fx.open .lg-pillars i { animation:lgPillarOut .5s ease-in forwards; } .lg-tease { position:absolute; left:50%; top:22%; transform:translateX(-50%); font-size:54px; font-weight:900; color:#fff; opacity:0; pointer-events:none; text-shadow:0 0 12px #a4cb45, 0 0 30px #ffd54f; animation:lgTease 1.1s ease-out 1.3s forwards; } .legend-fx.open .lg-tease { display:none; } .legend-fx .gm-gacha-env { animation:gmEnvDrop .45s both, lgTremble .05s linear .5s infinite; } .legend-fx.upgrade .gm-gacha-env { filter:drop-shadow(0 0 30px #a4cb45) drop-shadow(0 0 80px #fff) brightness(1.4); animation:lgTremble .035s linear infinite; } .legend-fx.flash2 .gm-gacha-flash { animation:gmFlash .35s ease-out; } .lg-rings, .lg-parts { position:absolute; left:50%; top:45%; width:0; height:0; pointer-events:none; z-index:3; } .lg-rings i { position:absolute; left:-30px; top:-30px; width:60px; height:60px; border-radius:50%; border:4px solid #e6ff9a; box-shadow:0 0 18px #a4cb45, inset 0 0 18px #ffd54f; opacity:0; } .legend-fx.open .lg-rings i { animation:lgRing 1.1s ease-out forwards; } .legend-fx.open .lg-rings i:nth-child(2) { animation-delay:.18s; border-color:#ffd54f; } .legend-fx.open .lg-rings i:nth-child(3) { animation-delay:.36s; border-color:#fff; } .lg-parts i { position:absolute; left:calc(var(--s) / -2); top:calc(var(--s) / -2); width:var(--s); height:var(--s); border-radius:50%; opacity:0; background:radial-gradient(circle,#fff,#e6ff9a 40%,#a4cb45 70%,transparent 72%); box-shadow:0 0 8px #e6ff9a; } .legend-fx.open .lg-parts i { animation:lgPart 1.3s cubic-bezier(.1,.8,.3,1) var(--dl) forwards; } .lg-rain { position:absolute; inset:0; pointer-events:none; overflow:hidden; } .lg-rain i { position:absolute; top:-6%; left:var(--x); width:7px; height:12px; border-radius:2px; background:var(--c); opacity:0; } .legend-fx.open .lg-rain i { animation:lgFall var(--dur) linear var(--dl) infinite; } .legend-fx .gm-gacha-card.g6 { z-index:4; } .legend-fx.open .gm-gacha-card.g6 { animation:gmCardIn .7s cubic-bezier(.2,1.4,.4,1) .1s forwards, gmRainbow 2s linear infinite, lgAura 1.6s ease-in-out .8s infinite alternate; } .legend-fx .gm-gacha-card.g6 .gm-gacha-body { position:relative; overflow:hidden; } .legend-fx .gm-gacha-card.g6 .gm-gacha-body::after { content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); opacity:0; } .legend-fx.open .gm-gacha-card.g6 .gm-gacha-body::after { animation:lgShine 2.2s ease-in-out 1s infinite; } .lg-word { z-index:5; font-size:34px; letter-spacing:2px; } .lg-word { background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:#fff; filter:none; } .lg-word span { display:inline-block; opacity:0; background:linear-gradient(180deg,#fffde7 0%,#e6ff9a 35%,#a4cb45 70%,#5f8a1c 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 8px #a4cb45) drop-shadow(0 3px 0 #2e4a0a); font-size:40px; } .legend-fx.open .lg-word span { animation:lgLetter .55s cubic-bezier(.2,1.8,.4,1) calc(1.35s + var(--i) * .08s) forwards; } .lg-word small { display:block; margin-top:2px; font-size:13px; letter-spacing:1px; color:#fff; -webkit-text-fill-color:#fff; text-shadow:0 0 8px #a4cb45, 0 2px 4px #000; opacity:0; } .legend-fx.open .lg-word small { animation:lgFadeIn .5s ease-out 2.2s forwards; } @keyframes lgFadeIn { to { opacity:1; } } @keyframes lgSpin { to { transform:rotate(360deg); } } @keyframes lgPillar { 0% { opacity:0; transform:scaleY(0); } 30% { opacity:.95; transform:scaleY(1); } 70% { opacity:.7; } 100% { opacity:.85; transform:scaleY(1); } } @keyframes lgPillarOut { from { opacity:.9; } to { opacity:0; transform:scaleX(3); } } @keyframes lgTease { 0% { opacity:0; transform:translateX(-50%) scale(.4); } 30% { opacity:1; transform:translateX(-50%) scale(1.25); } 60% { transform:translateX(-50%) scale(1); } 100% { opacity:1; transform:translateX(-50%) scale(1.1); } } @keyframes lgTremble { 0% { transform:translate(0,0) rotate(0); } 25% { transform:translate(-3px,1px) rotate(-2deg); } 50% { transform:translate(3px,-1px) rotate(2deg); } 75% { transform:translate(-2px,-1px) rotate(-1deg); } 100% { transform:translate(2px,1px) rotate(1deg); } } @keyframes lgRing { 0% { opacity:1; transform:scale(.3); } 100% { opacity:0; transform:scale(9); } } @keyframes lgPart { 0% { opacity:1; transform:rotate(var(--a)) translateX(0) scale(1.6); } 100% { opacity:0; transform:rotate(var(--a)) translateX(var(--d)) scale(.4); } } @keyframes lgFall { 0% { opacity:0; transform:translateY(0) rotate(0); } 8% { opacity:1; } 100% { opacity:.9; transform:translateY(115vh) rotate(var(--r)); } } @keyframes lgAura { from { box-shadow:0 0 24px #a4cb45, 0 0 60px rgba(164,203,69,.5); } to { box-shadow:0 0 40px #e6ff9a, 0 0 110px rgba(255,213,79,.6); } } @keyframes lgShine { 0% { left:-60%; opacity:0; } 15% { opacity:1; } 55% { left:120%; opacity:1; } 100% { left:120%; opacity:0; } } @keyframes lgLetter { 0% { opacity:0; transform:translateY(-30px) scale(2.2) rotate(-20deg); } 60% { opacity:1; transform:translateY(4px) scale(.9) rotate(4deg); } 100% { opacity:1; transform:none; } } /* 111회 결과(3.17) — 등급별 수 요약 + ★3↑만 작은 카드로, 넘치면 안에서 스크롤 */ .gm-gacha-multi.big { padding:14px 0 30px; box-sizing:border-box; } .gm-gm-sum { position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px; width:min(92%,380px); } .gm-gm-sum span { padding:2px 7px; border-radius:8px; background:rgba(0,0,0,0.45); border:1px solid #9e9e9e; color:#fff; font-size:11px; font-weight:800; white-space:nowrap; } .gm-gm-sum .g1 { border-color:#616161; } .gm-gm-sum .g2 { border-color:#bdbdbd; } .gm-gm-sum .g3 { border-color:#42a5f5; } .gm-gm-sum .g4 { border-color:#ab47bc; } .gm-gm-sum .g5 { border-color:#ffb300; } .gm-gm-sum .g6 { border-color:#a4cb45; color:#d6f58a; } .gm-gacha-multi.big .gm-gm-grid { grid-template-columns:repeat(6,1fr); gap:4px; max-height:calc(100% - 90px); overflow-y:auto; overscroll-behavior:contain; padding:6px 4px; box-sizing:border-box; } .gm-gacha-multi.big .gm-gm-card { padding:4px 1px 3px; font-size:9px; } .gm-gacha-multi.big .gm-gm-card b { font-size:9px; max-width:100%; overflow:hidden; text-overflow:ellipsis; } .gm-gacha-multi.big .gm-gm-face .gm-face-ph, .gm-gacha-multi.big .gm-gm-face img { width:28px; height:28px; } /* 3.19 — 액자(gacha-frame) 카드 정리: 카드 자체 네모 배경·테두리가 액자 밖으로 삐져나와 겹쳐 보였음(특히 유니크의 주황 2px 테두리). 액자 카드(★4~6)는 카드 상자를 비우고, 배경은 액자 막대 아래에 숨는 안쪽 판(::before)에만 깔기. 액자 색은 등급 색으로 돌림(원본 금색 = 유니크) */ .gm-gacha-card.g4, .gm-gacha-card.g5, .gm-gacha-card.g6 { background:none; border:none; box-shadow:none; isolation:isolate; padding-top:42px; padding-bottom:34px; min-height:324px; } .gm-gacha.open .gm-gacha-card.g6 { animation:gmCardIn 0.65s cubic-bezier(.2,1.4,.4,1) 0.1s forwards; } .gm-gacha-card.g4::before, .gm-gacha-card.g5::before, .gm-gacha-card.g6::before { content:''; position:absolute; top:8%; bottom:4%; left:5px; right:5px; z-index:-1; border-radius:6px; background:linear-gradient(170deg, color-mix(in srgb, var(--gc) 45%, #1b1b2a), #12121c 72%); box-shadow:inset 0 0 25px color-mix(in srgb, var(--gc) 35%, transparent); } .gm-gacha-card.g4 .gm-gacha-frame { filter:hue-rotate(250deg) saturate(0.85) drop-shadow(0 0 10px var(--gc)); } .gm-gacha-card.g6 .gm-gacha-frame { filter:hue-rotate(35deg) saturate(1.1) brightness(1.05) drop-shadow(0 0 10px var(--gc)); } .gm-gacha-card.g4 .gm-gacha-tag, .gm-gacha-card.g5 .gm-gacha-tag, .gm-gacha-card.g6 .gm-gacha-tag { top:-4px; } /* 4.72 11월 분위기 — 이미지 없이 CSS만으로. 따뜻한 크림·단풍빛(라이트) / 깊은 갈색·와인빛(다크). 창 안쪽 배경에 단풍잎 무늬를 아주 옅게 깔고 페이지 배경에 노을빛을 줌. 색은 창(.gm-widget) 안의 변수만 덮어쓰고, 글자색·강조색은 그대로라 읽기에는 영향이 없음. 계절 스타일은 아래에만 적용됨 — 12월은 46 다음 번호로 파일을 더하고 SEASON_BY_MONTH에 한 줄 추가 */ :root[data-season="nov"] body { background:radial-gradient(ellipse 70% 50% at 8% 0%,rgba(238,120,40,.16),transparent 70%),radial-gradient(ellipse 60% 45% at 100% 100%,rgba(190,70,40,.14),transparent 70%),var(--bg); background-attachment:fixed; } :root[data-season="nov"] .gm-widget { --surface:#fffaf1; --surface2:#f7efe2; --input-bg:#fffdf8; --border:#e3d6c3; --border2:#efe5d6; --accent-bg:#fdeee0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg transform='translate%2830 40%29 rotate%2825%29 scale%281.0%29' fill='%23d9622b' opacity='0.16'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23d9622b' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%28150 70%29 rotate%28-40%29 scale%280.8%29' fill='%23c2412d' opacity='0.13'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23c2412d' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%2890 150%29 rotate%2870%29 scale%280.9%29' fill='%23e0a030' opacity='0.16'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23e0a030' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%28190 185%29 rotate%28-15%29 scale%280.7%29' fill='%23a8501f' opacity='0.12'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23a8501f' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%2820 185%29 rotate%28110%29 scale%280.6%29' fill='%23d9622b' opacity='0.1'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23d9622b' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(170deg,rgba(255,196,120,.18),rgba(255,255,255,0) 45%,rgba(200,90,50,.08)); background-size:220px 220px,auto; background-color:var(--surface); } :root[data-season="nov"] .gm-widget .gm-head { background:linear-gradient(90deg,#fbe9d3,#fff6e8); } :root[data-season="nov"][data-theme="dark"] .gm-widget { --surface:#221915; --surface2:#1a120f; --input-bg:#261c17; --border:#4a3a30; --border2:#33271f; --accent-bg:#2e1d12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg transform='translate%2830 40%29 rotate%2825%29 scale%281.0%29' fill='%23d9622b' opacity='0.256'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23d9622b' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%28150 70%29 rotate%28-40%29 scale%280.8%29' fill='%23c2412d' opacity='0.20800000000000002'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23c2412d' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%2890 150%29 rotate%2870%29 scale%280.9%29' fill='%23e0a030' opacity='0.256'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23e0a030' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%28190 185%29 rotate%28-15%29 scale%280.7%29' fill='%23a8501f' opacity='0.192'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23a8501f' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%2820 185%29 rotate%28110%29 scale%280.6%29' fill='%23d9622b' opacity='0.16000000000000003'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23d9622b' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(170deg,rgba(210,110,50,.12),rgba(0,0,0,0) 45%,rgba(120,30,40,.18)); } :root[data-season="nov"][data-theme="dark"] .gm-widget .gm-head { background:linear-gradient(90deg,#2d1d15,#241913); } :root[data-season="nov"][data-theme="dark"] body { background:radial-gradient(ellipse 70% 50% at 8% 0%,rgba(200,100,40,.14),transparent 70%),radial-gradient(ellipse 60% 45% at 100% 100%,rgba(130,30,50,.2),transparent 70%),var(--bg); background-attachment:fixed; } @media (prefers-color-scheme: dark) { :root[data-season="nov"]:not([data-theme="light"]) .gm-widget { --surface:#221915; --surface2:#1a120f; --input-bg:#261c17; --border:#4a3a30; --border2:#33271f; --accent-bg:#2e1d12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg transform='translate%2830 40%29 rotate%2825%29 scale%281.0%29' fill='%23d9622b' opacity='0.256'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23d9622b' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%28150 70%29 rotate%28-40%29 scale%280.8%29' fill='%23c2412d' opacity='0.20800000000000002'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23c2412d' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%2890 150%29 rotate%2870%29 scale%280.9%29' fill='%23e0a030' opacity='0.256'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23e0a030' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%28190 185%29 rotate%28-15%29 scale%280.7%29' fill='%23a8501f' opacity='0.192'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23a8501f' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate%2820 185%29 rotate%28110%29 scale%280.6%29' fill='%23d9622b' opacity='0.16000000000000003'%3E%3Cpath d='M0-14C9-8 11 3 0 14 -11 3 -9-8 0-14Z'/%3E%3Cpath d='M0-14V20' stroke='%23d9622b' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(170deg,rgba(210,110,50,.12),rgba(0,0,0,0) 45%,rgba(120,30,40,.18)); } :root[data-season="nov"]:not([data-theme="light"]) .gm-widget .gm-head { background:linear-gradient(90deg,#2d1d15,#241913); } :root[data-season="nov"]:not([data-theme="light"]) body { background:radial-gradient(ellipse 70% 50% at 8% 0%,rgba(200,100,40,.14),transparent 70%),radial-gradient(ellipse 60% 45% at 100% 100%,rgba(130,30,50,.2),transparent 70%),var(--bg); background-attachment:fixed; } } @media (prefers-reduced-motion:reduce) { :root[data-season="nov"] body { background-attachment:scroll; } } .defense-lobby { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:16px; } .defense-lobby img { width:min(220px,70%); border-radius:16px; } .defense-area { overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:8px; } .defense-arena { position:relative; width:min(100%,440px); aspect-ratio:1; align-self:center; background:url("assets/game/defense/battlefield-ring-v2.png") center/cover no-repeat; border-radius:16px; } .defense-counter { position:absolute; inset:38% 25%; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#fff; text-shadow:0 2px 4px #000; } .defense-counter strong { font-size:24px; }.defense-counter small { font-size:12px; } .defense-enemies { position:absolute; inset:8%; border-radius:50%; display:flex; flex-wrap:wrap; align-content:flex-start; gap:3px; pointer-events:none; } .defense-enemies i { width:12px; height:12px; border-radius:50%; background:#ef6840; box-shadow:0 1px 3px #222; }.defense-enemies i.boss { width:20px; height:20px; background:#a80028; } .defense-info { text-align:center; }.defense-actions { display:flex; gap:8px; }.defense-actions .gm-btn { flex:1; margin:0; } .defense-units { display:grid; gap:6px; }.defense-units>div { display:grid; grid-template-columns:1fr auto; padding:8px; border-radius:10px; background:var(--surface); }.defense-units small { grid-column:1; overflow-wrap:anywhere; }.defense-units button { grid-column:2; grid-row:1/span 2; margin:0; } .defense-area details .gm-btn { display:block; width:100%; margin:4px 0; } /* 4.98 신화 테마 — 4회차 직원 전원 달성자(또는 관리자) 전용. 일 때만 적용, 계절 테마(data-season)와 겹쳐도 됨. 그림: ui/myth-bg.jpg(바깥 배경) · myth-pattern.png(창 무늬) · myth-head.png(머리줄) · myth-divider.png · myth-badge.png */ :root[data-honor="myth"] body { background:#8f97d8 url("assets/game/ui/myth-bg.jpg") center/cover fixed no-repeat; } :root[data-honor="myth"]:not(.pip-embedded) body { background-image:url("assets/game/ui/myth-bg.jpg"),linear-gradient(#777dc2,#e0d4e7); background-size:contain,cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; } :root[data-honor="myth"] .gm-widget { --surface:#f2f3ff; --surface2:#e7e9fa; --input-bg:#fafaff; --border:#a8acd9; --border2:#d3d5ee; --accent-bg:#e3e4fa; --accent:#4b4a9e; border-color:#d4a93f; box-shadow:0 10px 30px rgba(40,40,110,.35),0 0 0 1px #f3dc8a inset; --bg:#eeeaf8; --btn-bg:#383875; --btn-text:#fff9e8; --accent-text:#37316d; --myth-card:#f7f8ff; --myth-ink:#34305e; --myth-muted:#666c91; --myth-selected:#e0e2fa; background-image:linear-gradient(155deg,rgba(224,231,255,.95),rgba(242,240,255,.94) 52%,rgba(213,225,255,.95)),url("assets/game/ui/myth-pattern-clean.png"); background-size:auto,180px; } :root[data-honor="myth"] .gm-widget .gm-head { position:relative; background:linear-gradient(95deg,#1c1d52,#33357a,#1c1d52); border-bottom:0; color:#fff; text-shadow:0 1px 2px rgba(0,0,40,.7); } /* 머리줄 장식 띠는 글자를 가리지 않게 흐리게 깔고, 아래 구분선·제목 옆 배지를 붙임 */ :root[data-honor="myth"] .gm-widget .gm-head::before { content:""; position:absolute; inset:0; background:url("assets/game/ui/myth-head.png") center/100% 100% no-repeat; opacity:.3; pointer-events:none; } :root[data-honor="myth"] .gm-widget .gm-head::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:16px; background:url("assets/game/ui/myth-divider.png") center/100% 100% no-repeat; pointer-events:none; z-index:2; } :root[data-honor="myth"] .gm-widget .gm-head > * { position:relative; z-index:1; } :root[data-honor="myth"] .gm-widget .gm-head .gm-title { flex-shrink:0; } :root[data-honor="myth"] .gm-widget .gm-head :is(.gm-ver,.gm-save) { color:#eee9ff; text-shadow:0 1px 3px #17143b,0 0 5px #17143b; } :root[data-honor="myth"] .gm-widget .gm-head .gm-save { flex:0 1 88px; } :root[data-honor="myth"] .gm-widget .gm-head .gm-save.off { color:#ffc5c5; } :root[data-honor="myth"] .gm-widget .gm-title::after { content:""; display:inline-block; width:20px; height:20px; margin-left:5px; vertical-align:middle; background:url("assets/game/ui/myth-badge.png") center/contain no-repeat; } :root[data-honor="myth"] .gm-widget.gm-fourth-myth { border-color:#d4a93f; box-shadow:0 10px 30px rgba(40,40,110,.35),0 0 0 1px #f3dc8a inset; } :root[data-honor="myth"] .gm-widget.gm-fourth-myth .gm-head { background:linear-gradient(95deg,#1c1d52,#33357a,#1c1d52); animation:none; } :root[data-honor="myth"] .gm-widget .gm-head-btns button { color:#f6e3a8; } :root[data-honor="myth"] .gm-widget .gm-head-btns button:hover { background:rgba(255,255,255,.18); color:#fff; } :root[data-honor="myth"] .gm-widget .gm-head-back { background:linear-gradient(#4c4a89,#29295c); border-color:#d4b978; color:#fff7df; text-shadow:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 5px rgba(30,29,79,.25); } :root[data-honor="myth"] .gm-widget .gm-head-back:hover, :root[data-honor="myth"] .gm-widget .gm-head-back:focus-visible { background:linear-gradient(#625da6,#383671); border-color:#f0d998; color:#fff; } :root[data-honor="myth"] .gm-widget .gm-arena { background:linear-gradient(rgba(38,38,91,.12),rgba(38,38,91,.12)),url("assets/game/ui/myth-bg.jpg") center/cover no-repeat; border-color:#d4a93f; } /* 상황별 신전 — 이벤트와 사고가 동시에 있으면 기존과 같이 사고 배경이 우선이다. */ :root[data-honor="myth"] .gm-widget .gm-arena.ev-party { background-image:url("assets/game/ui/myth-ev-party.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.ev-trip { background-image:url("assets/game/ui/myth-ev-trip.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.ev-coffee { background-image:url("assets/game/ui/myth-ev-coffee.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.ev-golden { background-image:url("assets/game/ui/myth-ev-golden.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.ev-bonus { background-image:url("assets/game/ui/myth-ev-bonus.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.ev-mudu { background-image:url("assets/game/ui/myth-ev-mudu.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.db-dark { background-image:url("assets/game/ui/myth-db-dark.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.db-hot { background-image:url("assets/game/ui/myth-db-hot.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.db-net { background-image:url("assets/game/ui/myth-db-net.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.db-tired { background-image:url("assets/game/ui/myth-db-tired.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.db-dust { background-image:url("assets/game/ui/myth-db-dust.jpg"); } :root[data-honor="myth"] .gm-widget .gm-arena.db-lock { background-image:url("assets/game/ui/myth-db-lock.jpg"); } /* 5.16 이벤트·사고 배경은 그림 한 장이라 위 기본 규칙(그라데이션+그림 두 겹)의 크기·위치가 첫 겹 값(0 0/auto, 반복)만 남아 왼쪽 위에 원본 크기로 깔리던 것 */ :root[data-honor="myth"] .gm-widget .gm-arena:is([class*="ev-"],[class*="db-"]) { background-size:cover; background-position:center; background-repeat:no-repeat; } :root[data-honor="myth"] .gm-widget .gm-task { background:rgba(246,247,255,.94); border-color:#b2b6df; color:#34305e; } :root[data-honor="myth"] .gm-widget .gm-menu-btn, :root[data-honor="myth"] .gm-widget .gm-btn, :root[data-honor="myth"] .gm-widget .gm-up, :root[data-honor="myth"] .gm-widget .gm-input { border-color:#a8acd9; box-shadow:inset 0 1px 0 rgba(255,255,255,.55); } :root[data-honor="myth"] .gm-widget .gm-btn.primary { background:#383875; border-color:#d4a93f; color:#fff9e8; } :root[data-honor="myth"] .gm-widget .gm-menu-pop { border-color:#d4a93f; box-shadow:0 10px 30px rgba(30,29,79,.35); } :root[data-honor="myth"] .gm-widget :is(.gm-rank-tabs,.gm-rank-scope) button.on { background:var(--myth-selected); border-color:#b28b3d; color:var(--myth-ink); } :root[data-honor="myth"] .gm-widget .gm-body.fixed > .gm-btn:last-child, /* 게임판의 배경과 말·패의 구분색은 그대로 두고, 화면 바깥의 공용 조작부를 꾸민다. */ :root[data-honor="myth"] .gm-widget :is(.gm-type,.gm-pin-eye,.gm-ask-in,.gm-mp-ic,.gm-exit,.gm-rank-tabs button,.gm-rank-scope button, .sd-pad button,.sc-modepick button,.sc-rounds button,.yt-opts button,.oc-botpick button,.rh-seg button,.ms-mode,.ms-diff, .bb-rot,.bb-item,.bo-levels button,.pp-pad button,.t2048-controls button,.run-controls button) { border-color:#cbb16d; } :root[data-honor="myth"] .gm-widget :is(.gm-key.now,.sd-acts .gm-btn.on,.sc-modepick button.on,.sc-rounds button.on,.yt-opts button.on, .oc-botpick button.on,.rh-seg button.on,.ms-mode.on,.yt-cand.on) { background:var(--myth-selected); border-color:#b28b3d; color:var(--myth-ink); } :root[data-honor="myth"] .gm-widget .gm-key.now { box-shadow:0 0 0 3px rgba(190,151,65,.16),0 3px 8px rgba(57,48,112,.2); } :root[data-honor="myth"] .gm-widget .gm-autobuy { border-color:#b28b3d; background:var(--accent-bg); } :root[data-honor="myth"] .gm-widget :is(.gm-notes-card,.oc-result-card,.sv-card,.bs-pop) { border-color:#cbb16d; } :root[data-honor="myth"] .gm-widget :is(.gm-world) { background:linear-gradient(rgba(39,39,91,.2),rgba(39,39,91,.3)),url("assets/game/ui/myth-bg.jpg") center/cover no-repeat; border-color:#cbb16d; } :root[data-honor="myth"] .gm-widget .gm-gcard { background:rgba(244,246,255,.95); border-color:#aeb4df; color:#34305e; } :root[data-honor="myth"] .gm-widget .gm-gcard small { color:#706687; } :root[data-honor="myth"] .gm-widget .gm-gcard.resume { background:#e3e8ff; border-color:#9886c1; } :root[data-honor="myth"] .gm-widget .gm-gcard.locked { background:rgba(219,222,238,.94); } :root[data-honor="myth"] .gm-widget .gm-gcard.soon { border-style:dashed; } :root[data-honor="myth"] .gm-widget :is(.oc-mode.solo,.oc-mode.multi) { background:linear-gradient(#615aaa,#343369); border:1px solid #d4b978; color:#fff9e8; box-shadow:0 2px 6px rgba(41,39,81,.22); } :root[data-honor="myth"] .gm-widget :is(.oc-mode.solo,.oc-mode.multi):active { box-shadow:0 1px 3px rgba(41,39,81,.2); } :root[data-honor="myth"] .gm-widget :is(.oc-room,.oc-rules,.oc-wait,.sc-solo,.sc-multi,.sc-room,.sc-rv,.rk-opp,.gm-watch-hands section, .gm-char-card,.gm-char-detail,.gm-team-row,.gm-pick-bar) { border-color:var(--border); background-color:var(--surface); } :root[data-honor="myth"] .gm-widget :is(.gm-second,.gm-third-banner,.gm-crown-banner) { background:linear-gradient(135deg,#353570,#55509a); border-color:#d4b978; color:#fff6df; } :root[data-honor="myth"] .gm-widget .gm-second-tabs button { background:#eee9fa; border-color:#d4b978; color:#39336c; } :root[data-honor="myth"] .gm-widget .gm-second-tabs button.on { background:#c39e4d; color:#261f48; } :root[data-honor="myth"] .gm-widget :is(.rh-lobby,.rh-game) { background:linear-gradient(160deg,#201e50,#414184 65%,#252251); } :root[data-honor="myth"] .gm-widget :is(.rh-mode button,.rh-song-card,.rh-lobby-bar,.rh-volume) { border-color:#bda86e; } :root[data-honor="myth"] .gm-widget :is(.rh-mode button.selected,.rh-song-card.selected) { border-color:#ffe2a0; background:rgba(255,226,160,.16); } :root[data-honor="myth"] .gm-widget :is(.rh-start,.rh-wiz .gm-btn.primary,.rh-lobby-bar .rh-lobby-actions .gm-btn.primary) { background:linear-gradient(#6860ad,#37366f); border-color:#e3c879; color:#fff9e8; } :root[data-honor="myth"] .gm-widget .sd-board { --sd-line:#a1803c; } :root[data-honor="myth"] .gm-widget .sd-c.peer { background:color-mix(in srgb,#8178c4 12%,var(--surface)); } :root[data-honor="myth"] .gm-widget .sd-c.same { background:color-mix(in srgb,#8178c4 27%,var(--surface)); } :root[data-honor="myth"] .gm-widget .sd-c.sel { background:color-mix(in srgb,#8178c4 42%,var(--surface)); } /* 라이트 모드도 남색과 금색을 선명하게 사용한다. */ :root[data-honor="myth"][data-theme="light"] .gm-widget .gm-menu-btn { background:linear-gradient(#4c4a89,#29295c); border-color:#d4b978; color:#fff7df; text-shadow:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 5px rgba(30,29,79,.25); } :root[data-honor="myth"][data-theme="light"] .gm-widget :is(.gm-menu-btn:hover,.gm-menu-btn:focus-visible), :root[data-honor="myth"][data-theme="light"] .gm-widget.menu-open .gm-menu-btn { background:linear-gradient(#625da6,#383671); color:#fff; } :root[data-honor="myth"][data-theme="light"] .gm-widget .gm-menu-pop { background:linear-gradient(155deg,#f9f9ff,#e4e8ff); color:#302d5b; } :root[data-honor="myth"][data-theme="light"] .gm-widget .gm-mp-ic { background:linear-gradient(#fff,#e1e6ff); border-color:#b5a779; box-shadow:0 2px 5px rgba(49,47,99,.12); } :root[data-honor="myth"][data-theme="light"] .gm-widget :is(.gm-btn:not(.primary),.gm-up,.gm-autobuy,.gm-type,.gm-input) { background-color:#f7f8ff; border-color:#a6a9d8; box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(57,52,112,.1); } :root[data-honor="myth"][data-theme="light"] .gm-widget .gm-autobuy { background:#e5e8ff; border-color:#b3a369; } :root[data-honor="myth"][data-theme="light"] .gm-widget .gm-key.now { background:#45427d; border-color:#c5a960; color:#fff8e8; } :root[data-honor="myth"][data-theme="dark"] .gm-widget { --surface:#16173a; --surface2:#1d1f4a; --input-bg:#1b1c44; --border:#7770a3; --border2:#34366f; --accent-bg:#26285a; --accent:#c9b8ff; --accent-text:#f3e6bd; --bg:#151631; --myth-card:#242452; --myth-ink:#fff5dd; --myth-muted:#c1b8d9; --myth-selected:#49447e; background-image:linear-gradient(rgba(22,23,58,.94),rgba(22,23,58,.94)),url("assets/game/ui/myth-pattern-clean.png"); } @media (prefers-color-scheme: dark) { :root[data-honor="myth"]:not([data-theme="light"]) .gm-widget { --surface:#16173a; --surface2:#1d1f4a; --input-bg:#1b1c44; --border:#7770a3; --border2:#34366f; --accent-bg:#26285a; --accent:#c9b8ff; --accent-text:#f3e6bd; --bg:#151631; --myth-card:#242452; --myth-ink:#fff5dd; --myth-muted:#c1b8d9; --myth-selected:#49447e; background-image:linear-gradient(rgba(22,23,58,.94),rgba(22,23,58,.94)),url("assets/game/ui/myth-pattern-clean.png"); } } /* 전체 고양이 테마 — 평상시 업무 장면과 창 장식. 미니게임·이벤트 배경은 그대로 사용한다. */ :root[data-season="cat"] .gm-widget { --surface:#fff8f1; --surface2:#f8eade; --input-bg:#fffdf8; --border:#d6ac90; --border2:#efd9ca; --accent:#b75e38; --accent-bg:#ffe8d7; --accent-text:#86401f; --btn-bg:#9a5036; --btn-text:#fffaf2; --text:#38251f; --text2:#60483e; --text3:#80675b; --text4:#92786b; background-color:var(--surface); background-image:linear-gradient(rgba(255,248,241,.94),rgba(255,248,241,.94)),url("assets/game/ui/cat-paw.png"); background-size:auto,92px; border-color:#ce8a62; box-shadow:0 10px 30px rgba(91,53,35,.28),inset 0 0 0 1px #ffdfbd; } :root[data-season="cat"]:not([data-honor="myth"]) .gm-widget :is(.gm-head,.gm-head.gm-head) { position:relative; background:#78412d url("assets/game/ui/cat-head-bar.png") center/100% 100% no-repeat; color:#fffaf2; border-color:#e6b08c; animation:none; } :root[data-season="cat"] .gm-widget:is(.gm-second-gold,.gm-third-legend,.gm-fourth-myth) { border-color:#ce8a62; box-shadow:0 10px 30px rgba(91,53,35,.28),inset 0 0 0 1px #ffdfbd; } :root[data-season="cat"]:not([data-honor="myth"]) .gm-widget:is(.gm-second-gold,.gm-third-legend,.gm-fourth-myth) .gm-head { background:#78412d url("assets/game/ui/cat-head-bar.png") center/100% 100% no-repeat; animation:none; } :root[data-season="cat"]:not([data-honor="myth"]) .gm-widget .gm-head::before { content:''; position:absolute; inset:0 0 auto; height:20px; background:url("assets/game/ui/cat-head-ears.png") center/100% 100% no-repeat; pointer-events:none; } :root[data-season="cat"]:not([data-honor="myth"]) .gm-widget .gm-head::after { content:''; position:absolute; left:0; right:0; bottom:-8px; height:16px; background:url("assets/game/ui/cat-divider.png") center/100% 100% no-repeat; pointer-events:none; z-index:2; } :root[data-season="cat"] .gm-widget .gm-head > * { position:relative; z-index:1; } :root[data-season="cat"] .gm-widget .gm-head :is(.gm-ver,.gm-save) { color:#ffe9d7; text-shadow:0 1px 3px #5a2d1d; } :root[data-season="cat"] .gm-widget .gm-head .gm-save.off { color:#ffd0c5; } :root[data-season="cat"] .gm-widget .gm-head-btns button { color:#fff2e4; } :root[data-season="cat"] .gm-widget :is(.gm-menu-btn,.gm-head-back) { background:#fff6e9; border-color:#e0ad83; color:#733c27; text-shadow:none; } :root[data-season="cat"] .gm-widget :is(.gm-menu-btn,.gm-head-back):hover { background:#ffe5ce; color:#5e2e1d; } :root[data-season="cat"] .gm-widget .gm-menu-pop { border-color:#d6a47f; box-shadow:0 10px 30px rgba(85,48,32,.3); } :root[data-season="cat"] .gm-widget .gm-arena:not([class*="ev-"]):not([class*="db-"]) { background:linear-gradient(rgba(92,55,28,.05),rgba(92,55,28,.05)),url("assets/game/ui/cat-office.jpg") center/cover no-repeat; border-color:#d49a70; } :root[data-season="cat"] .gm-widget :is(.gm-mp-ic,.gm-up,.gm-input,.gm-type,.gm-btn,.gm-autobuy) { border-color:var(--border); } :root[data-season="cat"] .gm-widget .gm-btn.primary { background:#9a5036; border-color:#9a5036; color:#fffaf2; } :root[data-season="cat"] .gm-widget .gm-autobuy { background:var(--accent-bg); } :root[data-season="cat"] .gm-widget .gm-key.now { background:var(--accent-bg); border-color:var(--accent); color:var(--accent-text); } :root[data-season="cat"] .gm-widget :is(.gm-rank-tabs,.gm-rank-scope) button.on { background:var(--accent-bg); border-color:var(--accent); color:var(--text); } :root[data-season="cat"][data-theme="dark"] .gm-widget { --surface:#2c211e; --surface2:#382a25; --input-bg:#342722; --border:#896451; --border2:#574138; --accent:#ffb17e; --accent-bg:#57382d; --accent-text:#ffe2cb; --btn-bg:#a95f3b; --btn-text:#fffaf2; --text:#fff0e3; --text2:#ebcdb9; --text3:#c9aa99; --text4:#b89988; background-image:linear-gradient(rgba(44,33,30,.95),rgba(44,33,30,.95)),url("assets/game/ui/cat-paw.png"); } @media (prefers-color-scheme:dark) { :root[data-season="cat"]:not([data-theme="light"]) .gm-widget { --surface:#2c211e; --surface2:#382a25; --input-bg:#342722; --border:#896451; --border2:#574138; --accent:#ffb17e; --accent-bg:#57382d; --accent-text:#ffe2cb; --btn-bg:#a95f3b; --btn-text:#fffaf2; --text:#fff0e3; --text2:#ebcdb9; --text3:#c9aa99; --text4:#b89988; background-image:linear-gradient(rgba(44,33,30,.95),rgba(44,33,30,.95)),url("assets/game/ui/cat-paw.png"); } } /* 세 명의 스폰지밥 사장 전원을 첫 사장까지 키우면 열리는 공통 바닷속 테마. */ :root[data-honor="spongebob"] body { background:#28b6d0 url("assets/game/ui/spongebob-bg.png") center/cover fixed no-repeat; } :root[data-honor="spongebob"] .gm-widget { --surface:#fff9dc; --surface2:#fff0b2; --input-bg:#fffdf0; --border:#4eb9c7; --border2:#a9dce0; --accent-bg:#d7f5ee; --accent:#087f89; --bg:#d5f4f3; --btn-bg:#168a9a; --btn-text:#fff; --accent-text:#075e68; border:2px solid #f2c34e; box-shadow:0 10px 28px rgba(0,66,88,.32),0 0 0 2px rgba(255,255,255,.6) inset; background-image:linear-gradient(155deg,rgba(255,250,224,.94),rgba(229,249,238,.94)),url("assets/game/ui/spongebob-bg.png"); background-size:auto,cover; } :root[data-honor="spongebob"] .gm-widget .gm-head { background:linear-gradient(100deg,#087a9a,#16b7c0 52%,#087a9a); border-color:#f2c34e; color:#fffbe1; text-shadow:0 1px 2px #07566d; } :root[data-honor="spongebob"] .gm-widget .gm-head :is(.gm-ver,.gm-save) { color:#fff3a6; } :root[data-honor="spongebob"] .gm-widget .gm-arena { background-image:linear-gradient(rgba(0,91,122,.08),rgba(0,91,122,.08)),url("assets/game/ui/spongebob-arena-bg.png"); background-position:center; background-size:cover; background-repeat:no-repeat; border-color:#efc44e; } :root[data-honor="spongebob"] .gm-widget .gm-world { background:linear-gradient(rgba(0,91,122,.2),rgba(0,91,122,.3)),url("assets/game/ui/spongebob-bg.png") center/cover no-repeat; border-color:#efc44e; } :root[data-honor="spongebob"] .gm-widget .gm-task { background:rgba(255,251,229,.95); border-color:#acd9d6; color:#164b54; } :root[data-honor="spongebob"] .gm-widget :is(.gm-menu-btn,.gm-btn,.gm-up,.gm-input) { border-color:#63bdc2; } :root[data-honor="spongebob"] .gm-widget .gm-btn.primary { background:linear-gradient(#21a9b2,#087a91); border-color:#f2c34e; color:#fffbe5; } :root[data-honor="spongebob"] .gm-widget .gm-head-btns button { color:#fff2a7; } :root[data-honor="spongebob"] .gm-widget .gm-head-back { background:linear-gradient(#22aab2,#087a91); border-color:#f2c34e; color:#fffbe5; } :root[data-honor="spongebob"] .gm-widget :is(.gm-rank-tabs,.gm-rank-scope) button.on { background:#ffe17a; border-color:#e0ae35; color:#51431c; } :root[data-honor="spongebob"] .gm-widget .gm-gcard { background:rgba(255,251,229,.95); border-color:#87cdd0; color:#164b54; } :root[data-honor="spongebob"] .gm-widget .gm-gcard.resume { background:#d7f5ee; border-color:#58b7ba; } /* 다크모드 */ :root[data-honor="spongebob"][data-theme="dark"] body { background:#06222b linear-gradient(rgba(0,18,28,.6),rgba(0,18,28,.6)), url("assets/game/ui/spongebob-bg.png") center/cover fixed no-repeat; } :root[data-honor="spongebob"][data-theme="dark"] .gm-widget { --surface:#10353f; --surface2:#16444f; --input-bg:#0d2c35; --border:#3a8f9c; --border2:#1f5662; --accent-bg:#14505a; --accent:#6fe0d8; --bg:#0b2a34; --btn-bg:#168a9a; --btn-text:#fff; --accent-text:#c4f5f0; background-image:linear-gradient(155deg,rgba(9,38,48,.95),rgba(8,44,50,.95)),url("assets/game/ui/spongebob-bg.png"); box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 0 2px rgba(242,195,78,.35) inset; } :root[data-honor="spongebob"][data-theme="dark"] .gm-widget .gm-arena { background-image:linear-gradient(rgba(0,20,32,.38),rgba(0,20,32,.38)),url("assets/game/ui/spongebob-arena-bg.png"); } :root[data-honor="spongebob"][data-theme="dark"] .gm-widget .gm-world { background:linear-gradient(rgba(0,25,38,.55),rgba(0,25,38,.62)),url("assets/game/ui/spongebob-bg.png") center/cover no-repeat; } :root[data-honor="spongebob"][data-theme="dark"] .gm-widget .gm-task { background:rgba(13,48,58,.95); border-color:#2d7b88; color:#d9f6f4; } :root[data-honor="spongebob"][data-theme="dark"] .gm-task :is(.gm-mon-name,.gm-hp-text,.gm-mon-stage,.gm-timer) { color:#d9f6f4; } :root[data-honor="spongebob"][data-theme="dark"] .gm-widget .gm-gcard { background:rgba(14,50,60,.95); border-color:#2d7b88; color:#d9f6f4; } :root[data-honor="spongebob"][data-theme="dark"] .gm-widget .gm-gcard.resume { background:#14505a; border-color:#58b7ba; } @media (prefers-color-scheme: dark) { :root[data-honor="spongebob"]:not([data-theme="light"]) body { background:#06222b linear-gradient(rgba(0,18,28,.6),rgba(0,18,28,.6)), url("assets/game/ui/spongebob-bg.png") center/cover fixed no-repeat; } :root[data-honor="spongebob"]:not([data-theme="light"]) .gm-widget { --surface:#10353f; --surface2:#16444f; --input-bg:#0d2c35; --border:#3a8f9c; --border2:#1f5662; --accent-bg:#14505a; --accent:#6fe0d8; --bg:#0b2a34; --btn-bg:#168a9a; --btn-text:#fff; --accent-text:#c4f5f0; background-image:linear-gradient(155deg,rgba(9,38,48,.95),rgba(8,44,50,.95)),url("assets/game/ui/spongebob-bg.png"); box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 0 2px rgba(242,195,78,.35) inset; } :root[data-honor="spongebob"]:not([data-theme="light"]) .gm-widget .gm-arena { background-image:linear-gradient(rgba(0,20,32,.38),rgba(0,20,32,.38)),url("assets/game/ui/spongebob-arena-bg.png"); } :root[data-honor="spongebob"]:not([data-theme="light"]) .gm-widget .gm-world { background:linear-gradient(rgba(0,25,38,.55),rgba(0,25,38,.62)),url("assets/game/ui/spongebob-bg.png") center/cover no-repeat; } :root[data-honor="spongebob"]:not([data-theme="light"]) .gm-widget .gm-task { background:rgba(13,48,58,.95); border-color:#2d7b88; color:#d9f6f4; } :root[data-honor="spongebob"]:not([data-theme="light"]) .gm-task :is(.gm-mon-name,.gm-hp-text,.gm-mon-stage,.gm-timer) { color:#d9f6f4; } :root[data-honor="spongebob"]:not([data-theme="light"]) .gm-widget .gm-gcard { background:rgba(14,50,60,.95); border-color:#2d7b88; color:#d9f6f4; } :root[data-honor="spongebob"]:not([data-theme="light"]) .gm-widget .gm-gcard.resume { background:#14505a; border-color:#58b7ba; } } /* 집게리아 테마 */ :root[data-honor="krusty"] body { background:#7d5133 url("assets/game/ui/krusty-bg.webp") center/cover fixed no-repeat; } :root[data-honor="krusty"] .gm-widget { --surface:#fff2d4; --surface2:#f9db9e; --input-bg:#fff9e8; --border:#a6683f; --border2:#deb881; --accent-bg:#fce4a8; --accent:#9d381e; --bg:#ead09e; --btn-bg:#ad4827; --btn-text:#fff8e8; --accent-text:#742c18; border:2px solid #c58a4d; box-shadow:0 10px 28px rgba(67,36,17,.45),0 0 0 2px rgba(255,238,189,.6) inset; background:linear-gradient(155deg,rgba(255,245,218,.94),rgba(246,220,166,.94)),url("assets/game/ui/krusty-bg.webp") center/cover no-repeat; } :root[data-honor="krusty"] .gm-widget .gm-head { background:linear-gradient(100deg,#7c3d24,#c26a35 50%,#7c3d24); border-color:#e7b65a; color:#fff5d7; text-shadow:0 2px 3px #66351e; } :root[data-honor="krusty"] .gm-widget .gm-head :is(.gm-ver,.gm-save:not(.off)) { color:#ffe9a8; text-shadow:0 1px 2px #5a2c18; } :root[data-honor="krusty"] .gm-widget .gm-arena { background:linear-gradient(rgba(255,241,203,.08),rgba(102,54,27,.1)),url("assets/game/ui/krusty-bg.webp") center 38%/cover no-repeat; border-color:#bb7d43; } :root[data-honor="krusty"] .gm-widget .gm-world { background:linear-gradient(rgba(88,52,30,.12),rgba(88,52,30,.18)),url("assets/game/ui/krusty-bg.webp") center/cover no-repeat; } :root[data-honor="krusty"] .gm-widget .gm-task { background:rgba(255,248,225,.96); border-color:#d8a870; color:#56311f; } :root[data-honor="krusty"] .gm-widget :is(.gm-menu-btn,.gm-btn,.gm-up,.gm-input) { border-color:#c68a54; } :root[data-honor="krusty"] .gm-widget .gm-btn.primary,:root[data-honor="krusty"] .gm-widget .gm-head-back { background:linear-gradient(#cf7040,#9b3e24); border-color:#f1bc69; color:#fff8e4; } :root[data-honor="krusty"] .gm-widget :is(.gm-rank-tabs,.gm-rank-scope) button.on { background:#ffd477; border-color:#ba783b; color:#56311f; } :root[data-honor="krusty"] .gm-widget .gm-gcard { background:rgba(255,247,220,.96); border-color:#d9ae74; } .gm-pf-themes .gm-pf-krusty { background:linear-gradient(110deg,#85482c,#c8783d 50%,#e8b85e); color:#fff8df; border-color:#d7a15b; text-shadow:0 1px 2px #63351f; } /* 다크모드 */ :root[data-honor="krusty"][data-theme="dark"] body { background:#2a1a10 linear-gradient(rgba(18,9,4,.6),rgba(18,9,4,.6)), url("assets/game/ui/krusty-bg.webp") center/cover fixed no-repeat; } :root[data-honor="krusty"][data-theme="dark"] .gm-widget { --surface:#2e2017; --surface2:#3d2a1c; --input-bg:#25180f; --border:#8a5a38; --border2:#4d3322; --accent-bg:#4b301b; --accent:#ffc66e; --bg:#21150d; --btn-bg:#ad4827; --btn-text:#fff8e8; --accent-text:#ffe2a8; border-color:#8a5a38; box-shadow:0 10px 28px rgba(0,0,0,.55),0 0 0 2px rgba(255,214,140,.18) inset; background:linear-gradient(155deg,rgba(38,24,16,.95),rgba(30,19,12,.95)),url("assets/game/ui/krusty-bg.webp") center/cover; } :root[data-honor="krusty"][data-theme="dark"] .gm-widget .gm-arena { background:linear-gradient(rgba(20,10,4,.42),rgba(20,10,4,.5)),url("assets/game/ui/krusty-bg.webp") center 38%/cover no-repeat; border-color:#8a5a38; } :root[data-honor="krusty"][data-theme="dark"] .gm-widget .gm-world { background:linear-gradient(rgba(20,10,4,.55),rgba(20,10,4,.62)),url("assets/game/ui/krusty-bg.webp") center/cover no-repeat; } :root[data-honor="krusty"][data-theme="dark"] .gm-widget .gm-task { background:rgba(48,32,22,.96); border-color:#6e4a2e; color:#f6e3c4; } :root[data-honor="krusty"][data-theme="dark"] .gm-task :is(.gm-mon-name,.gm-hp-text,.gm-mon-stage,.gm-timer) { color:#f6e3c4; } :root[data-honor="krusty"][data-theme="dark"] .gm-widget .gm-gcard { background:rgba(48,32,22,.96); border-color:#6e4a2e; color:#f6e3c4; } @media (prefers-color-scheme: dark) { :root[data-honor="krusty"]:not([data-theme="light"]) body { background:#2a1a10 linear-gradient(rgba(18,9,4,.6),rgba(18,9,4,.6)), url("assets/game/ui/krusty-bg.webp") center/cover fixed no-repeat; } :root[data-honor="krusty"]:not([data-theme="light"]) .gm-widget { --surface:#2e2017; --surface2:#3d2a1c; --input-bg:#25180f; --border:#8a5a38; --border2:#4d3322; --accent-bg:#4b301b; --accent:#ffc66e; --bg:#21150d; --btn-bg:#ad4827; --btn-text:#fff8e8; --accent-text:#ffe2a8; border-color:#8a5a38; box-shadow:0 10px 28px rgba(0,0,0,.55),0 0 0 2px rgba(255,214,140,.18) inset; background:linear-gradient(155deg,rgba(38,24,16,.95),rgba(30,19,12,.95)),url("assets/game/ui/krusty-bg.webp") center/cover; } :root[data-honor="krusty"]:not([data-theme="light"]) .gm-widget .gm-arena { background:linear-gradient(rgba(20,10,4,.42),rgba(20,10,4,.5)),url("assets/game/ui/krusty-bg.webp") center 38%/cover no-repeat; border-color:#8a5a38; } :root[data-honor="krusty"]:not([data-theme="light"]) .gm-widget .gm-world { background:linear-gradient(rgba(20,10,4,.55),rgba(20,10,4,.62)),url("assets/game/ui/krusty-bg.webp") center/cover no-repeat; } :root[data-honor="krusty"]:not([data-theme="light"]) .gm-widget .gm-task { background:rgba(48,32,22,.96); border-color:#6e4a2e; color:#f6e3c4; } :root[data-honor="krusty"]:not([data-theme="light"]) .gm-task :is(.gm-mon-name,.gm-hp-text,.gm-mon-stage,.gm-timer) { color:#f6e3c4; } :root[data-honor="krusty"]:not([data-theme="light"]) .gm-widget .gm-gcard { background:rgba(48,32,22,.96); border-color:#6e4a2e; color:#f6e3c4; } } /* 블랙잭(6.24) */ .bj-main { display:flex; flex-direction:column; gap:8px; } .bj-lobby,.bj-table { display:flex; flex-direction:column; gap:8px; } .bj-note { font-size:11.5px; line-height:1.5; color:var(--muted,#888); text-align:center; } .bj-bets { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .bj-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } .bj-actions .gm-btn { flex:1 1 120px; min-height:40px; } .bj-rooms { display:flex; flex-direction:column; gap:6px; } .bj-room { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; } .bj-player.me { border-color:var(--accent,#e8643a); } .oc-wait .oc-face.bj-empty { display:block; background:var(--border2); } .bj-dealer,.bj-player { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:8px; border:1px solid var(--border); border-radius:12px; background:rgba(47,93,58,.22); } .bj-player.turn { box-shadow:0 0 0 2px #ffd54f; } .bj-players { display:flex; flex-direction:column; gap:6px; } .bj-hand { display:flex; flex:1 1 100%; gap:4px; flex-wrap:wrap; } .bj-hand .oc-card { width:38px; height:54px; } .bj-player .oc-face { width:26px; height:26px; border-radius:50%; object-fit:cover; } .bj-res { font-style:normal; font-weight:800; margin-left:auto; } .bj-res.win,.bj-res.blackjack { color:#43a047; } .bj-res.lose { color:#e5484d; } .bj-res.push { color:#888; } .bj-turn { margin-left:auto; font-style:normal; font-weight:800; color:#e8a317; }