:root { color-scheme: light; font-family: "Noto Sans KR", sans-serif; font-size: 16px; font-synthesis: none; color: #14213d; background: #f4f7fb; } * { box-sizing: border-box; } html { scrollbar-gutter: stable; font-size: 16px !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; min-width: 0; overflow-x: hidden; } button, input, select, textarea { font: inherit; } button { min-height: 48px; border: 0; border-radius: 10px; background: #315a9f; color: #fff; font-weight: 700; cursor: pointer; } button:disabled { opacity: .6; cursor: wait; } label { display: grid; gap: 7px; font-size: .92rem; font-weight: 700; } input, select, textarea { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: #14213d; font-size: 16px; } textarea { resize: vertical; } .page-shell { width: min(100% - 32px, 680px); margin: 0 auto; padding: max(32px, calc(env(safe-area-inset-top) + 20px)) 0 104px; } .auth-card, .card { border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(34, 55, 90, .09); } .auth-card { position: relative; display: grid; gap: 18px; max-width: 480px; margin: clamp(28px, 10vh, 96px) auto; padding: 34px 30px 28px; overflow: hidden; border: 1px solid #e0e9f7; border-radius: 28px; background: linear-gradient(160deg, #ffffff 0%, #f5f8ff 100%); box-shadow: 0 20px 55px rgba(49,90,159,.14); } .auth-card::before { position: absolute; top: -96px; right: -74px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, rgba(91,139,216,.2), rgba(255,255,255,0)); content: ""; pointer-events: none; } .auth-card h1, .auth-card .description, .auth-card form { margin: 0; } .login-eyebrow-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .login-join-button { display: inline-flex; align-items: center; gap: 4px; width: auto; min-height: 34px; padding: 6px 12px; border: 1px solid #cbdcf7; border-radius: 999px; background: #edf4ff; color: #315a9f; font-size: .74rem; font-weight: 800; } .login-join-button span { font-size: 1rem; line-height: .8; } .auth-card h1 { position: relative; z-index: 1; margin-top: 4px; color: #14213d; font-size: clamp(1.7rem, 4vw, 2rem); letter-spacing: -.04em; } .auth-card > .description { color: #6b7c93; font-size: .9rem; } .auth-card form { position: relative; z-index: 1; gap: 14px; } .auth-card form label { gap: 8px; color: #334766; font-size: .8rem; } .auth-card form input, .auth-card form select { min-height: 52px; border-color: #d6e1f1; border-radius: 14px; background: rgba(255,255,255,.88); font-size: 1rem; } .auth-card form > button[type="submit"] { min-height: 54px; margin-top: 4px; border-radius: 14px; background: linear-gradient(135deg, #315a9f, #4776c0); box-shadow: 0 9px 18px rgba(49,90,159,.22); font-size: 1rem; } .auth-card form .text-button { min-height: 34px; color: #71819a; font-size: .78rem; } .app-loading { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: #64748b; font-size: .9rem; text-align: center; } .app-loading > span:last-child { display: block; text-align: center; } .loading-spinner { width: 32px; height: 32px; border: 3px solid #dbe5f6; border-top-color: #315a9f; border-radius: 50%; animation: spin .75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes game-turn-alert { 0%, 100% { opacity: 1; } 50% { opacity: .38; } } .auth-card form, .card form { display: grid; gap: 16px; } .checkin-nickname-suggestions { overflow: hidden; max-height: 210px; margin-top: -8px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; box-shadow: 0 10px 22px rgba(34,55,90,.16); } .checkin-visit-at { display: grid; grid-column: 1 / -1; gap: 8px; width: 100%; min-width: 0; margin: 0 0 8px; color: #14213d; font-weight: 700; } .checkin-visit-at input { display: block; width: 100%; cursor: pointer; box-sizing: border-box; min-width: 0; max-width: 100%; } .checkin-visit-at, #checkinForm, #checkinForm #nicknames { inline-size: 100%; max-inline-size: 100%; } #checkinForm { min-inline-size: 0; } #checkinForm #nicknames { display: block; box-sizing: border-box; } .checkin-nickname-help { margin-bottom: 8px; } @media (max-width: 680px) { .checkin-visit-at input { padding-right: 8px; padding-left: 8px; font-size: 15px; } } .checkin-visit-at input { margin: 0; } .checkin-visit-at-help { margin-top: -2px; } .checkin-nickname-suggestions button { width: 100%; min-height: 40px; padding: 8px 13px; border-bottom: 1px solid #edf0f4; border-radius: 0; background: #fff; color: #14213d; text-align: left; font-size: .9rem; } .checkin-nickname-suggestions button:last-child { border-bottom: 0; } .checkin-nickname-suggestions button:hover, .checkin-nickname-suggestions button:focus-visible { background: #eef3fb; color: #315a9f; } .text-button { min-height: 36px; padding: 0; background: transparent; color: #315a9f; font-size: .9rem; } .app { display: grid; gap: 18px; } .app-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 5px 2px; } .header-eyebrow-row { display: flex; align-items: center; gap: 8px; } .header-switch-badge { display: inline-flex; align-items: center; gap: 4px; width: auto; min-height: 28px; padding: 4px 9px; border: 1px solid #c9d8f0; border-radius: 999px; background: #e8eef9; color: #315a9f; font-size: .72rem; font-weight: 800; } .header-switch-badge span { font-size: 1rem; line-height: .8; } .app-header h1, h2 { margin: 5px 0; } .app-header p, .description, .help-text { margin: 5px 0 0; color: #64748b; line-height: 1.5; } .eyebrow { color: #315a9f; font-weight: 800; letter-spacing: .09em; font-size: .75rem; } .card { padding: 24px; } .card h2 { font-size: 1.15rem; } .screen { display: grid; gap: 18px; } .screen-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 5px 2px; } .screen-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .subpage-heading > .title-badge-button { margin-left: auto; } .screen-heading h2 { margin: 4px 0 0; } .screen-actions { display: flex; gap: 8px; } .screen-actions .register-button { width: auto; } .games-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .games-actions .secondary-button, .games-actions .register-button { width: 100%; } .back-button { width: auto; min-height: 40px; padding: 0 13px; background: #e8eef9; color: #315a9f; } .subpage-heading { justify-content: flex-start; align-items: center; gap: 10px; } .subpage-heading .back-button { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 1.45rem; line-height: 1; } .subpage-title-wrap { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .subpage-heading .subpage-title-wrap .eyebrow { display: block; line-height: 1.2; } .subpage-heading .subpage-title-wrap h2 { margin: 4px 0 0; line-height: 1.2; } .members-total { margin: 5px 0 0; color: #315a9f; font-size: .84rem; font-weight: 700; } .sort-control { width: 112px; font-size: .75rem; color: #64748b; } .sort-control select { padding: 8px; color: #14213d; font-size: .9rem; } .history-list { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; } .history-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #edf0f4; } .history-item:last-child { border-bottom: 0; } .history-member { display: grid; gap: 3px; min-width: 0; } .history-member strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-member span, .history-date { color: #64748b; font-size: .83rem; } .history-date { flex: 0 0 auto; text-align: right; } .history-status { min-height: 24px; padding: 4px; color: #64748b; text-align: center; font-size: .88rem; } .list-toolbar { display: flex; align-items: center; gap: 10px; min-height: 38px; color: #64748b; font-size: .84rem; } .favorite-filter-button { width: auto; min-height: 36px; margin-left: auto; padding: 0 13px; background: #eef3fb; color: #315a9f; font-size: .84rem; } .favorite-filter-button.active { background: #315a9f; color: #fff; } .preference-filter-group { display: flex; align-items: center; gap: 6px; margin-left: auto; } .preference-filter-group .favorite-filter-button { margin-left: 0; } .favorite-filter-button.dislike.active { background: #b84755; } .delete-button { width: auto; min-height: 36px; padding: 0 13px; background: #c63e3e; } .delete-button:disabled { background: #e6b9b9; opacity: 1; cursor: not-allowed; } .list-select { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; cursor: pointer; } .list-select input { position: absolute; width: 1px; height: 1px; opacity: 0; } .list-select span { display: block; width: 20px; height: 20px; border: 1.5px solid #b7c2d0; border-radius: 6px; background: #fff; } .list-select input:checked + span { border-color: #315a9f; background: #315a9f; box-shadow: inset 0 0 0 4px #fff; } .history-item:has(input:checked), .member-list-item:has(input:checked) { background: #f3f7ff; } .member-search { display: grid; grid-template-columns: 1fr 86px; gap: 8px; } .member-search button { min-height: 44px; } .other-favorite-search { grid-template-columns: 104px minmax(0, 1fr) 86px; } .other-favorite-search select { padding: 8px; } .members-list { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; } .member-list-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 16px; border-bottom: 1px solid #edf0f4; cursor: pointer; } .member-list-item:last-child { border-bottom: 0; } .member-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; } .member-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-rating-badge-inline { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: #fff4d6; color: #9a6500; font-size: .68rem; font-weight: 800; white-space: nowrap; } .member-status-badge { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: #e9eef5; color: #64748b; font-size: .68rem; font-weight: 800; white-space: nowrap; } .member-status-badge.disabled { background: #f8d7d7; color: #b42318; } .member-status-badge.mummy-gm-badge { background: #fff0d2; color: #9a6500; } .member-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 7px; color: #64748b; font-size: .82rem; } .member-visit-inline, .member-warning-inline { font-weight: 700; } .member-visit-inline { color: #315a9f; } .member-warning-inline { color: #c2413d; } .warning-button { align-self: center; width: auto; min-height: 38px; padding: 0 11px; background: #fff1f0; color: #c2413d; font-size: .78rem; white-space: nowrap; } .warning-stepper { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; overflow: hidden; border: 1px solid #dbe3ef; border-radius: 12px; background: #fff; } .warning-stepper button { min-height: 52px; border: 0; border-radius: 0; background: #eef3fb; color: #315a9f; font-size: 1.5rem; font-weight: 700; } .warning-stepper output { color: #14213d; font-size: 1.05rem; font-weight: 800; text-align: center; } .member-welcome-card { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 16px; background: linear-gradient(135deg, #315a9f, #5275b4); color: #fff; } .member-welcome-card .eyebrow, .member-welcome-card p { color: #dce8ff; } .member-welcome-card h2 { margin: 5px 0; font-size: 1.25rem; } .member-welcome-card p { margin: 0; font-size: .88rem; } .member-welcome-card > div { flex: 1 1 auto; min-width: 0; } .member-welcome-body { display: grid; gap: 0; } .member-membership-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .member-welcome-body > .eyebrow { margin-top: 12px; } .relationship-badge { display: inline-flex; align-items: center; gap: 4px; width: auto; min-height: 30px; max-width: 170px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; overflow: hidden; background: #7b8798; color: #fff; font-size: .76rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .relationship-badge > :first-child { overflow: hidden; text-overflow: ellipsis; } .badge-chevron { flex: 0 0 auto; margin-left: 2px; color: rgba(255,255,255,.82); font-size: 1rem; line-height: .8; } .relationship-badge.relationship-solo { background: #6b7280; } .relationship-badge.relationship-dating { background: #ec4899; } .relationship-badge.relationship-secret { background: #7c3aed; } .relationship-badge.relationship-divorced { background: #dc2626; } .member-rating-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; min-height: 30px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: .76rem; line-height: 1; text-align: center; } .member-rating-badge span { color: #fbbf24; font-size: .95rem; } .member-rating-badge .badge-chevron { color: rgba(255,255,255,.82); font-size: 1rem; } .member-rating-badge strong { font-size: .82rem; } .member-rating-badge .member-rating-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; font-size: 1.2rem; line-height: 1; } .my-rating-card .member-rating-detail-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 2.2rem; line-height: 1; } .member-rating-badge small { color: #dce8ff; font-size: .67rem; font-weight: 700; } .member-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .achievement-summary-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 15px 16px; border: 1px solid #e2d5a8; border-radius: 15px; background: #fffdf5; color: #14213d; text-align: left; } .achievement-summary-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff0bd; font-size: 1.35rem; } .achievement-summary-copy { display: grid; gap: 3px; min-width: 0; } .achievement-summary-copy small { color: #a4780e; font-size: .68rem; font-weight: 800; letter-spacing: .08em; } .achievement-summary-copy strong { font-size: .98rem; } .achievement-summary-copy em { overflow: hidden; color: #6e7280; font-size: .78rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .member-achievement-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; padding-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, .35); } .member-achievement-badge { display: inline-flex; align-items: center; gap: 3px; min-height: 25px; padding: 0 6px; border: 1px solid #d4a83d; border-radius: 6px; background: linear-gradient(135deg, #fff8dc, #f8e7a6); box-shadow: 0 1px 3px rgba(133, 94, 7, .14); color: #79580b; font-size: .64rem; font-weight: 800; cursor: pointer; } .member-achievement-badge span { font-size: .82rem; line-height: 1; } .achievement-badge-visits { border-color: #82a9df; background: #e7f0ff; color: #28558f; } .achievement-badge-strategy { border-color: #9b8ad1; background: #f0ebff; color: #5a438c; } .achievement-badge-party { border-color: #e59aa9; background: #fff0f3; color: #a43e59; } .achievement-badge-favorite { border-color: #78bda8; background: #e9f8f1; color: #26745d; } .achievement-badge-rulemaster { border-color: #d4a83d; background: #fff8dc; color: #79580b; } .achievement-badge-played { border-color: #e2a66c; background: #fff1e3; color: #9a5b20; } .achievement-badge-rating_given { border-color: #82b7c8; background: #e8f7fb; color: #286b7d; } .achievement-badge-rating_received { border-color: #c59acb; background: #f8edfa; color: #7a4482; } .achievements-list { display: grid; gap: 10px; } .achievement-group { display: grid; gap: 10px; } .achievement-group + .achievement-group { margin-top: 18px; } .achievement-group-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; } .achievement-group-header h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 800; } .achievement-group-header span { color: var(--muted); font-size: 13px; font-weight: 700; } .achievement-level-card { display: grid; gap: 14px; padding: 16px; border: 1px solid #e4e9f0; border-radius: 15px; background: #fff; } .achievement-level-card.locked { opacity: .72; } .achievement-stepper { position: relative; width: 100%; height: 20px; } .achievement-stepper::before { content: ""; position: absolute; left: var(--achievement-track-start, 0px); width: var(--achievement-track-width, 0px); top: 50%; height: 4px; transform: translateY(-50%); border-radius: 99px; background: #e4e9f0; } .achievement-stepper::after { content: ""; position: absolute; left: var(--achievement-track-start, 0px); width: var(--achievement-fill-width, 0px); top: 50%; height: 4px; transform: translateY(-50%); border-radius: 99px; background: #315a9f; } .achievement-step { appearance: none; -webkit-appearance: none; position: absolute; z-index: 2; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; border: 2px solid #87909d; border-radius: 50%; background: #fff; cursor: pointer; } .achievement-step.done { border-color: #315a9f; background: #315a9f; } .achievement-step.current, .achievement-step.selected { box-shadow: 0 0 0 3px rgba(49, 90, 159, .18); } .achievement-stage-details { min-height: 58px; } .achievement-stage-detail { display: none; align-items: center; gap: 12px; } .achievement-stage-detail.selected { display: flex; } .achievement-stage-detail.locked { opacity: .48; filter: blur(.25px); } .achievement-stage-detail strong { display: block; color: var(--text); font-size: 1rem; } .achievement-stage-detail p { margin: 4px 0 0; color: #6b778b; font-size: .82rem; line-height: 1.45; } .achievement-stage-detail small { display: block; margin-top: 6px; color: #315a9f; font-size: .76rem; font-weight: 700; } .achievement-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 15px; border: 1px solid #e4e9f0; border-radius: 15px; background: #fff; } .achievement-item.locked { opacity: .72; } .achievement-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eff4fd; font-size: 1.25rem; } .achievement-item.achieved .achievement-icon { background: #fff0bd; } .achievement-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .achievement-title-row strong { font-size: .98rem; } .achievement-title-row span { color: #315a9f; font-size: .76rem; font-weight: 800; } .achievement-item p { margin: 5px 0 9px; color: #6b778b; font-size: .82rem; line-height: 1.45; } .achievement-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #e7edf5; } .achievement-progress span { display: block; height: 100%; border-radius: inherit; background: #315a9f; } .daily-fortune-button { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 0 18px; background: #fff7de; color: #855d05; border: 1px solid #f0cf72; font-size: .98rem; font-weight: 800; } .daily-fortune-button span:first-child { font-size: 1.2rem; color: #d39b18; } .game-world-button { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 0 18px; border: 1px solid #bfd2f3; background: #edf4ff; color: #244f93; font-size: .98rem; font-weight: 800; } .game-world-button span:first-child { font-size: 1.2rem; color: #3565ad; } .game-world-list { display: grid; gap: 12px; margin-top: 18px; } .game-world-item { width: 100%; min-height: 88px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: center; gap: 14px; padding: 16px; border: 1px solid #dfe7f3; border-radius: 18px; background: #fff; color: #0e2346; text-align: left; box-shadow: 0 8px 24px rgba(38, 65, 105, .06); } .game-world-item-icon { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e1e8f2; border-radius: 16px; background: #fff; color: #315fa5; font-size: 1.25rem; font-weight: 900; } .game-world-item-icon.word-guess { background: #fff; } .game-world-item-icon.omok-game { background: #f0d09a; color: #161616; font-size: 2rem; } .game-world-item-icon.othello-game { background: #fff; color: #315fa5; } .game-world-item-icon.ricochet-game { background: #eef4ff; font-size: 1.75rem; } .game-world-item-icon img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; } .game-world-item strong, .game-world-item small { display: block; } .game-world-item strong { margin-bottom: 5px; font-size: 1.02rem; } .game-world-complete-badge { display: inline-flex; align-items: center; margin-left: 7px; padding: 2px 7px; border-radius: 999px; background: #e6f6ed; color: #218654; font-size: .64rem; font-weight: 800; vertical-align: middle; } .game-world-complete-badge.is-in-progress { background: #edf4ff; color: #3565ad; } .game-world-item small { color: #728198; font-size: .78rem; font-weight: 500; } .game-world-item-chevron { color: #6f85a5; font-size: 1.5rem; text-align: right; } .game-world-item-status { display: grid; grid-template-columns: auto 20px; grid-template-rows: repeat(2, auto); align-items: center; justify-content: end; gap: 4px 5px; min-width: 0; } .stop-challenge-menu-badge { display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px; border: 1px solid #f0c8cb; border-radius: 999px; background: #fff2f2; color: #b52d3c; font-size: .67rem; font-weight: 800; line-height: 1.1; white-space: nowrap; } .stop-challenge-menu-badge.is-rank { border-color: #e7c77b; background: #fff8e7; color: #9a6a08; } .game-world-item-status .stop-challenge-menu-badge { grid-column: 1; } .game-world-item-status .game-world-item-chevron { grid-column: 2; grid-row: 1 / span 2; } .stop-challenge-game { background: #fff0f0; color: #e5484d; font-size: 2rem; text-shadow: 0 2px 4px rgba(180,30,40,.2); } .kamisado-game-icon { border: 0; background: #fff; color: #ffd76b; font-size: 2rem; text-shadow: 0 2px 5px rgba(0,0,0,.28); box-shadow: none !important; } .kamisado-world-item { border-color: #b9cbe7; } .kamisado-game-card { display: grid; gap: 14px; margin-top: 8px; padding: 16px; border: 1px solid #d7e0ef; border-radius: 22px; background: #fff; box-shadow: 0 10px 26px rgba(20,33,61,.07); } .kamisado-game-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #60748f; font-size: .86rem; } .kamisado-game-status strong { color: #244f93; font-size: 1rem; } .kamisado-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border: 7px solid #254d67; border-radius: 12px; background: #254d67; box-shadow: 0 12px 24px rgba(20,33,61,.16); } .kamisado-cell { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(255,255,255,.24); background: var(--kamisado-color); cursor: pointer; } .kamisado-cell:hover, .kamisado-cell:focus-visible { z-index: 2; outline: 3px solid #fff; outline-offset: -5px; filter: brightness(1.12); } .kamisado-cell.is-legal::after { content: ""; position: absolute; width: 19%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 0 3px rgba(24,48,74,.2); } .kamisado-cell.is-selected { outline: 4px solid #fff; outline-offset: -5px; box-shadow: inset 0 0 0 4px #152c4f; } .kamisado-cell.is-last-move::before { content: ""; position: absolute; inset: 4%; border: 3px solid #ef3340; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 10px rgba(239,51,64,.8); pointer-events: none; z-index: 3; } .kamisado-piece { position: relative; z-index: 3; display: grid; place-items: center; width: 78%; height: 78%; border: 0; border-radius: 50%; background: #17202c; box-shadow: 0 3px 6px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.22); } .kamisado-piece.p1 { background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,.28), inset 0 0 0 2px rgba(20,35,58,.22); } .kamisado-piece img { display: block; width: 72%; height: 72%; object-fit: contain; } .kamisado-game-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; } .kamisado-game-actions span { color: #b52d3c; font-size: .8rem; font-weight: 700; text-align: right; } html[data-theme="dark"] .kamisado-game-icon { background: linear-gradient(135deg, #182d4d, #573a72); } html[data-theme="dark"] .kamisado-world-item { border-color: #3f5676; } html[data-theme="dark"] .kamisado-game-card { border-color: #33445e; background: #1a2230; box-shadow: none; } html[data-theme="dark"] .kamisado-game-status { color: #b5c4d8; } html[data-theme="dark"] .kamisado-game-status strong { color: #bcd5ff; } html[data-theme="dark"] .kamisado-board { border-color: #52718d; } html[data-theme="dark"] .kamisado-game-actions span { color: #ff8d93; } .stop-challenge-world-item { border-color: #f0c8cb; } .stop-challenge-card { display: grid; gap: 18px; justify-items: center; margin-top: 8px; padding: 24px 18px 28px; border: 1px solid #f1cdd0; border-radius: 24px; background: linear-gradient(145deg, #fff, #fff6f6); box-shadow: 0 12px 30px rgba(169,39,49,.1); } .stop-challenge-meta { width: 100%; display: flex; justify-content: space-between; gap: 12px; color: #71809a; font-size: .82rem; } .stop-challenge-meta strong { color: #243b61; } .stop-challenge-timer { color: #172b4d; font-size: clamp(2.35rem, 12vw, 4.7rem); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .03em; line-height: 1; opacity: 1; transition: opacity 1s ease; } .stop-challenge-timer.is-fading { opacity: 0; } .stop-challenge-timer b { color: #bd6470; } .stop-challenge-timer-hint { margin: -8px 0 0; color: #8793a6; font-size: .75rem; } .stop-challenge-button { width: min(240px, 76vw); aspect-ratio: 1; border: 10px solid #ffc9cc; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ff7478, #e12832 62%, #ad111c); color: #fff; box-shadow: 0 10px 0 #a8121d, 0 18px 25px rgba(178,24,35,.28); font-size: 1.4rem; font-weight: 900; letter-spacing: .12em; cursor: pointer; } .stop-challenge-button:active { transform: translateY(6px); box-shadow: 0 4px 0 #a8121d, 0 10px 15px rgba(178,24,35,.2); } .stop-challenge-button:disabled { opacity: .65; cursor: wait; } .stop-challenge-result { min-height: 1.4em; margin: 0; color: #b52d3c; font-size: .9rem; font-weight: 700; text-align: center; } .stop-challenge-cumulative, .stop-challenge-ranking { margin-top: 18px; } .stop-challenge-share-button { display: block; width: 100%; margin: 0 0 10px; padding: 10px 14px; border: 1px solid #e1a8ad; border-radius: 10px; background: #fff6f6; color: #b52d3c; font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; } .stop-challenge-share-button:hover { background: #ffecef; } .stop-challenge-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .stop-challenge-section-heading h3 { margin: 0; color: #233b63; } .stop-challenge-section-heading span { color: #8591a3; font-size: .75rem; } .stop-challenge-ranking-list { display: grid; gap: 8px; } .stop-challenge-ranking-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 11px 13px; border: 1px solid #e5eaf2; border-radius: 12px; background: #fff; } .stop-challenge-ranking-row b { color: #bd6470; } .stop-challenge-ranking-row strong { overflow: hidden; color: #243b61; text-overflow: ellipsis; white-space: nowrap; } .stop-challenge-ranking-row span { color: #687993; font-size: .78rem; font-variant-numeric: tabular-nums; } html[data-theme="dark"] .stop-challenge-game { background: #3d2028; color: #ff8790; } html[data-theme="dark"] .stop-challenge-world-item { border-color: #63313b; } html[data-theme="dark"] .stop-challenge-card { border-color: #63313b; background: linear-gradient(145deg, #211c28, #281b23); box-shadow: 0 12px 30px rgba(0,0,0,.28); } html[data-theme="dark"] .stop-challenge-meta { color: #abb8cc; } html[data-theme="dark"] .stop-challenge-meta strong, html[data-theme="dark"] .stop-challenge-timer, html[data-theme="dark"] .stop-challenge-section-heading h3, html[data-theme="dark"] .stop-challenge-ranking-row strong { color: #f3f6ff; } html[data-theme="dark"] .stop-challenge-ranking-row { border-color: #38455b; background: #202b3d; } html[data-theme="dark"] .stop-challenge-ranking-row span { color: #b4c1d5; } html[data-theme="dark"] .stop-challenge-share-button { border-color: #824550; background: #34202a; color: #ffabb2; } html[data-theme="dark"] .stop-challenge-share-button:hover { background: #422630; } #gameWorldScreen { gap: 20px; } #gameWorldScreen .subpage-heading { padding: 8px 4px 4px; } #gameWorldScreen .help-text { margin: 0; font-size: .98rem; } #gameWorldScreen .game-world-list { gap: 14px; margin-top: 0; } #gameWorldScreen .subpage-heading { position: relative; min-height: 94px; align-items: center; padding: 18px 20px; overflow: hidden; border: 1px solid rgba(49,90,159,.14); border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,245,255,.86)); box-shadow: 0 10px 26px rgba(20,33,61,.08); } #gameWorldScreen .subpage-heading::after { position: absolute; right: -36px; bottom: -64px; width: 170px; height: 170px; border-radius: 50%; background: rgba(49,90,159,.08); content: ""; pointer-events: none; } #gameWorldScreen .subpage-heading > * { position: relative; z-index: 1; } #gameWorldScreen .subpage-heading .back-button { border: 1px solid #c8d8f0; border-radius: 14px; background: #e9f1ff; color: #315a9f; box-shadow: 0 4px 10px rgba(49,90,159,.1); } #gameWorldScreen .subpage-heading h2 { margin-top: 5px; color: #14213d; font-size: clamp(1.45rem, 4vw, 1.9rem); letter-spacing: -.04em; } #gameWorldScreen .subpage-heading .eyebrow { font-size: .72rem; letter-spacing: .14em; } html[data-theme="dark"] #gameWorldScreen .subpage-heading { border-color: rgba(195,192,255,.2); background: linear-gradient(135deg, rgba(30,41,59,.9), rgba(28,44,73,.82)); box-shadow: 0 10px 26px rgba(0,0,0,.22); backdrop-filter: blur(12px); } html[data-theme="dark"] #gameWorldScreen .subpage-heading::after { background: rgba(158,193,255,.1); } html[data-theme="dark"] #gameWorldScreen .subpage-heading .back-button { border-color: #405a80; background: #253755; color: #cfe0ff; } html[data-theme="dark"] #gameWorldScreen .subpage-heading h2 { color: #f4f7ff; } /* 게임세상 타이틀은 카드 없이 단순한 앱 헤더 형태로 표시 */ #gameWorldScreen .subpage-heading { min-height: 72px; justify-content: center; padding: 8px 44px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #gameWorldScreen .subpage-heading::after { display: none; } #gameWorldScreen .subpage-heading .back-button { position: absolute; left: 4px; top: 50%; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #315a9f; box-shadow: none; font-size: 1.55rem; font-weight: 500; transform: translateY(-50%); } #gameWorldScreen .subpage-heading .back-button:hover, #gameWorldScreen .subpage-heading .back-button:focus-visible { background: rgba(49,90,159,.1); outline: none; } #gameWorldScreen .subpage-heading .subpage-title-wrap { align-items: center; text-align: center; } #gameWorldScreen .subpage-heading .eyebrow { color: #6b78a7; font-size: .67rem; letter-spacing: .16em; } #gameWorldScreen .subpage-heading h2 { margin-top: 0; font-size: clamp(1.45rem, 4.4vw, 1.85rem); line-height: 1.12; } html[data-theme="light"] #gameWorldScreen, html[data-theme="dark"] #gameWorldScreen { background: transparent; } /* 아지트정보 탭과 콘텐츠 카드 */ #pricingScreen .info-tabs { margin: 14px 0 18px; padding: 5px; gap: 6px; border: 1px solid rgba(49,90,159,.12); border-radius: 16px; background: rgba(232,240,252,.72); box-shadow: 0 6px 16px rgba(20,33,61,.05); } #pricingScreen .info-tab { min-height: 44px; border-radius: 12px; color: #52647e; font-weight: 800; } #pricingScreen .info-tab.active { background: #315a9f; color: #fff; box-shadow: 0 5px 12px rgba(49,90,159,.2); } #pricingScreen .member-info-title, #pricingScreen .member-menu-title { margin: 0 0 12px; } #pricingScreen .member-info-title h3, #pricingScreen .member-menu-title h3 { margin: 3px 0 0; font-size: 1.25rem; letter-spacing: -.02em; } #pricingScreen .price-grid { gap: 12px; } #pricingScreen .price-card, #pricingScreen .hours-card, #pricingScreen .member-menu-group { border-radius: 18px; border-color: rgba(49,90,159,.14); box-shadow: 0 8px 20px rgba(20,33,61,.06); } #pricingScreen .price-card { min-height: 108px; padding: 16px; } #pricingScreen .hours-card { padding: 16px; } #pricingScreen .member-menu-group { overflow: hidden; background: rgba(255,255,255,.88); } html[data-theme="dark"] #pricingScreen .info-tabs { border-color: rgba(195,192,255,.16); background: rgba(30,41,59,.72); } html[data-theme="dark"] #pricingScreen .info-tab { color: #aab8cb; } html[data-theme="dark"] #pricingScreen .info-tab.active { background: #4b76c0; color: #fff; } html[data-theme="dark"] #pricingScreen .price-card, html[data-theme="dark"] #pricingScreen .hours-card, html[data-theme="dark"] #pricingScreen .member-menu-group { border-color: rgba(195,192,255,.16); background: rgba(30,41,59,.72); box-shadow: 0 8px 22px rgba(0,0,0,.2); } html[data-theme="dark"] #gameWorldScreen .subpage-heading { background: transparent !important; border-color: transparent; box-shadow: none; } html[data-theme="dark"] #gameWorldScreen .subpage-heading .back-button { background: transparent; color: #dce5ff; } html[data-theme="dark"] #gameWorldScreen .subpage-heading .back-button:hover, html[data-theme="dark"] #gameWorldScreen .subpage-heading .back-button:focus-visible { background: rgba(158,193,255,.12); } html[data-theme="dark"] #gameWorldScreen .subpage-heading .eyebrow { color: #9ba8d1; } #dailyFortuneScreen .subpage-heading, #achievementsScreen .subpage-heading, #historyScreen .subpage-heading, #memberHistoryScreen .subpage-heading, #membersScreen .subpage-heading, #pricingScreen .subpage-heading, #roomStatusScreen .subpage-heading, #memberRatingsScreen .subpage-heading, #mummyRankingScreen .subpage-heading, #gameRecordsScreen .subpage-heading, #rulemasterGamesScreen .subpage-heading, #otherFavoriteGamesScreen .subpage-heading { min-height: 72px; padding: 8px 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #dailyFortuneScreen .subpage-heading .back-button, #achievementsScreen .subpage-heading .back-button, #historyScreen .subpage-heading .back-button, #memberHistoryScreen .subpage-heading .back-button, #membersScreen .subpage-heading .back-button, #pricingScreen .subpage-heading .back-button, #roomStatusScreen .subpage-heading .back-button, #memberRatingsScreen .subpage-heading .back-button, #mummyRankingScreen .subpage-heading .back-button, #gameRecordsScreen .subpage-heading .back-button, #rulemasterGamesScreen .subpage-heading .back-button, #otherFavoriteGamesScreen .subpage-heading .back-button { border: 0; border-radius: 50%; background: transparent; color: #315a9f; box-shadow: none; font-size: 1.45rem; font-weight: 500; } #dailyFortuneScreen .subpage-heading .back-button:hover, #dailyFortuneScreen .subpage-heading .back-button:focus-visible, #achievementsScreen .subpage-heading .back-button:hover, #achievementsScreen .subpage-heading .back-button:focus-visible, #historyScreen .subpage-heading .back-button:hover, #historyScreen .subpage-heading .back-button:focus-visible, #memberHistoryScreen .subpage-heading .back-button:hover, #memberHistoryScreen .subpage-heading .back-button:focus-visible, #membersScreen .subpage-heading .back-button:hover, #membersScreen .subpage-heading .back-button:focus-visible, #pricingScreen .subpage-heading .back-button:hover, #pricingScreen .subpage-heading .back-button:focus-visible, #roomStatusScreen .subpage-heading .back-button:hover, #roomStatusScreen .subpage-heading .back-button:focus-visible, #memberRatingsScreen .subpage-heading .back-button:hover, #memberRatingsScreen .subpage-heading .back-button:focus-visible, #mummyRankingScreen .subpage-heading .back-button:hover, #mummyRankingScreen .subpage-heading .back-button:focus-visible, #gameRecordsScreen .subpage-heading .back-button:hover, #gameRecordsScreen .subpage-heading .back-button:focus-visible, #rulemasterGamesScreen .subpage-heading .back-button:hover, #rulemasterGamesScreen .subpage-heading .back-button:focus-visible, #otherFavoriteGamesScreen .subpage-heading .back-button:hover, #otherFavoriteGamesScreen .subpage-heading .back-button:focus-visible { background: rgba(49,90,159,.1); outline: none; } html[data-theme="dark"] #dailyFortuneScreen .subpage-heading, html[data-theme="dark"] #achievementsScreen .subpage-heading, html[data-theme="dark"] #historyScreen .subpage-heading, html[data-theme="dark"] #memberHistoryScreen .subpage-heading, html[data-theme="dark"] #membersScreen .subpage-heading, html[data-theme="dark"] #pricingScreen .subpage-heading, html[data-theme="dark"] #roomStatusScreen .subpage-heading, html[data-theme="dark"] #memberRatingsScreen .subpage-heading, html[data-theme="dark"] #mummyRankingScreen .subpage-heading, html[data-theme="dark"] #gameRecordsScreen .subpage-heading, html[data-theme="dark"] #rulemasterGamesScreen .subpage-heading, html[data-theme="dark"] #otherFavoriteGamesScreen .subpage-heading { background: transparent; } html[data-theme="dark"] #dailyFortuneScreen .subpage-heading .back-button, html[data-theme="dark"] #achievementsScreen .subpage-heading .back-button, html[data-theme="dark"] #historyScreen .subpage-heading .back-button, html[data-theme="dark"] #memberHistoryScreen .subpage-heading .back-button, html[data-theme="dark"] #membersScreen .subpage-heading .back-button, html[data-theme="dark"] #pricingScreen .subpage-heading .back-button, html[data-theme="dark"] #roomStatusScreen .subpage-heading .back-button, html[data-theme="dark"] #memberRatingsScreen .subpage-heading .back-button, html[data-theme="dark"] #mummyRankingScreen .subpage-heading .back-button, html[data-theme="dark"] #gameRecordsScreen .subpage-heading .back-button, html[data-theme="dark"] #rulemasterGamesScreen .subpage-heading .back-button, html[data-theme="dark"] #otherFavoriteGamesScreen .subpage-heading .back-button { background: transparent; color: #dce5ff; } html[data-theme="dark"] .subpage-heading .eyebrow { color: #9ba8d1; } #gamesScreen #gamesHeading { position: relative; min-height: 72px; justify-content: center; padding: 8px 44px; border: 0; background: transparent; box-shadow: none; } #gamesScreen #gamesHeading .games-title-wrap { align-items: center; justify-content: center; text-align: center; } #gamesScreen #gamesHeading .back-button { position: absolute; left: 4px; top: 50%; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #315a9f; font-size: 1.45rem; font-weight: 500; transform: translateY(-50%); } #gamesScreen #gamesHeading .back-button:hover, #gamesScreen #gamesHeading .back-button:focus-visible { background: rgba(49,90,159,.1); outline: none; } #gamesScreen #gamesHeading h2 { margin-top: 0; line-height: 1.12; } #gamesScreen #gamesHeading .screen-heading-actions { position: absolute; right: 4px; } #gamesScreen #gamesHeading:has(#backFromFavoriteGames:not(.hidden)) { justify-content: center; padding-left: 44px; padding-right: 44px; } #gamesScreen #gamesHeading:has(#backFromFavoriteGames:not(.hidden)) .games-title-wrap { align-items: center; text-align: center; } #gamesScreen #gamesHeading:has(#backFromFavoriteGames:not(.hidden)) #backFromFavoriteGames { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); } #mummyRankingScreen .subpage-heading { position: relative; justify-content: center; padding-left: 44px; padding-right: 44px; } #mummyRankingScreen .subpage-heading > div { align-items: center; text-align: center; } #mummyRankingScreen .subpage-heading > .back-button { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); } #mummyRankingScreen .subpage-heading > .title-badge-button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); } #mummyRankingScreen .games-list { display: grid; gap: 10px; overflow: visible; border: 0; background: transparent; } #mummyRankingScreen .game-item { min-height: 78px; border: 1px solid rgba(49,90,159,.14); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 7px 18px rgba(20,33,61,.07); content-visibility: visible; contain-intrinsic-size: 0 0; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } #mummyRankingScreen .game-item:hover, #mummyRankingScreen .game-item:focus-within { transform: translateY(-1px); border-color: rgba(49,90,159,.34); box-shadow: 0 10px 24px rgba(49,90,159,.13); } #mummyRankingScreen .game-item:last-child { border-bottom: 1px solid rgba(49,90,159,.14); } html[data-theme="dark"] #mummyRankingScreen .game-item { border-color: rgba(195,192,255,.16); background: rgba(30,41,59,.72); box-shadow: 0 8px 22px rgba(0,0,0,.2); backdrop-filter: blur(10px); } html[data-theme="dark"] #mummyRankingScreen .game-item:last-child { border-bottom-color: rgba(195,192,255,.16); } html[data-theme="dark"] #mummyRankingScreen .game-item:hover, html[data-theme="dark"] #mummyRankingScreen .game-item:focus-within { border-color: rgba(158,193,255,.55); box-shadow: 0 10px 26px rgba(20,33,61,.4); } #gamesScreen #gamesHeading { justify-content: flex-start; padding: 8px 4px; } #gamesScreen #gamesHeading .games-title-wrap { align-items: flex-start; justify-content: center; text-align: left; } #gamesScreen #gamesHeading .back-button { position: static; flex: 0 0 30px; transform: none; } #gamesScreen #gamesHeading h2, .subpage-heading h2, #historyScreen .screen-heading h2, #memberHistoryScreen .screen-heading h2 { margin-top: 0 !important; line-height: 1.12; } #historyScreen .screen-heading { min-height: 72px; padding: 8px 4px; } #gamesScreen #gamesHeading .eyebrow, #historyScreen .screen-heading .eyebrow, #memberHistoryScreen .screen-heading .eyebrow { display: block; line-height: 1; margin: 0; } #gamesScreen #gamesHeading, #historyScreen > .screen-heading, #memberHistoryScreen > .screen-heading, #pricingScreen > .pricing-heading, #dailyFortuneScreen > .subpage-heading, #achievementsScreen > .subpage-heading, #pricingScreen > .subpage-heading, #roomStatusScreen > .subpage-heading, #memberRatingsScreen > .subpage-heading, #mummyRankingScreen > .subpage-heading, #gameRecordsScreen > .subpage-heading, #rulemasterGamesScreen > .subpage-heading, #otherFavoriteGamesScreen > .subpage-heading { box-sizing: border-box; height: 72px; min-height: 72px; margin: 0; padding-top: 0; padding-bottom: 0; align-items: center; } #gamesScreen #gamesHeading .subpage-title-wrap, #historyScreen > .screen-heading > div:first-child, #memberHistoryScreen > .screen-heading > div:first-child, #pricingScreen > .pricing-heading > div:first-child, #dailyFortuneScreen > .subpage-heading > div, #achievementsScreen > .subpage-heading > div, #pricingScreen > .subpage-heading > div, #roomStatusScreen > .subpage-heading > div, #memberRatingsScreen > .subpage-heading > div, #mummyRankingScreen > .subpage-heading > div, #gameRecordsScreen > .subpage-heading > div, #rulemasterGamesScreen > .subpage-heading > div, #otherFavoriteGamesScreen > .subpage-heading > div { justify-content: center; } #pricingScreen > .pricing-heading { box-sizing: border-box; height: 72px; min-height: 72px; margin: 0; padding-top: 0; padding-bottom: 0; align-items: center; } #pricingScreen > .pricing-heading > div:first-child { align-items: center; text-align: center; } #pricingScreen > .pricing-heading h2 { margin-top: 0 !important; line-height: 1.12; } #pricingScreen .pricing-heading { box-sizing: border-box; min-height: 72px; height: 72px; margin: 0; padding-top: 0; padding-bottom: 0; align-items: center; transform: translateY(12px); } #pricingScreen .pricing-heading > div:first-child { align-items: flex-start; justify-content: center; } #pricingScreen .pricing-heading .eyebrow { display: block; height: 12px; margin: 0; line-height: 12px; } #pricingScreen .pricing-heading h2 { margin-top: 0 !important; line-height: 1.12; } #gamesScreen #gamesHeading h2, .subpage-heading h2, #historyScreen .screen-heading h2, #memberHistoryScreen .screen-heading h2, #pricingScreen .pricing-heading h2 { margin-top: 3px !important; } #balanceGameScreen .subpage-heading { position: relative; justify-content: flex-start; padding-left: 4px; padding-right: 48px; } #balanceGameScreen .subpage-heading > div { align-items: flex-start; text-align: left; } #balanceGameScreen #closeBalanceGame { position: absolute; right: 4px; left: auto; top: 50%; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: #e8eef9; color: #315a9f; font-size: 0; transform: translateY(-50%); } #balanceGameScreen #closeBalanceGame::before { content: "×"; font-size: 1.8rem; font-weight: 400; line-height: 1; } #balanceGameScreen #closeBalanceGame:hover, #balanceGameScreen #closeBalanceGame:focus-visible { background: #dbe7fa; outline: none; } html[data-theme="dark"] #balanceGameScreen #closeBalanceGame { background: #25354d; color: #dce8ff; } html[data-theme="dark"] #balanceGameScreen #closeBalanceGame:hover, html[data-theme="dark"] #balanceGameScreen #closeBalanceGame:focus-visible { background: #304664; } #dailyWordGuessScreen .daily-word-guess-header { grid-template-columns: auto minmax(0, 1fr) auto; } #dailyWordGuessScreen .daily-word-guess-header > div { text-align: left; } #dailyWordGuessScreen .daily-word-guess-header h2 { margin-top: 3px; line-height: 1.12; } #dailyWordGuessKeyboard { z-index: 100; position: fixed; right: 0; bottom: 0; left: 0; max-height: 45dvh; overflow-y: auto; } /* 자모 키보드가 열려도 문제 입력 영역은 상단에 고정하고, 그 아래 도전 목록만 스크롤되도록 유지합니다. */ .daily-word-guess-input-panel:has(#dailyWordGuessKeyboard.is-visible) { position: sticky; top: 0; z-index: 12; } @media (max-width: 560px) { #dailyWordGuessScreen .daily-word-guess-input-row { grid-template-columns: 1fr; gap: 10px; } #dailyWordGuessScreen .daily-word-guess-inputs { gap: 7px; } #dailyWordGuessScreen .daily-word-guess-input-row > button { width: 100%; min-height: 46px; } } #dailyWordGuessMessage:empty { display: none; } #gamesScreen #gamesHeading .subpage-title-wrap, #historyScreen > .screen-heading > div:first-child, #memberHistoryScreen > .screen-heading > div:first-child, #pricingScreen > .pricing-heading > div:first-child, #dailyFortuneScreen > .subpage-heading > div, #achievementsScreen > .subpage-heading > div, #roomStatusScreen > .subpage-heading > div, #memberRatingsScreen > .subpage-heading > div, #mummyRankingScreen > .subpage-heading > div, #gameRecordsScreen > .subpage-heading > div, #rulemasterGamesScreen > .subpage-heading > div, #otherFavoriteGamesScreen > .subpage-heading > div { display: flex; flex-direction: column; gap: 0; } #gamesScreen #gamesHeading .eyebrow, #historyScreen > .screen-heading .eyebrow, #memberHistoryScreen > .screen-heading .eyebrow, #pricingScreen > .pricing-heading .eyebrow, #dailyFortuneScreen > .subpage-heading .eyebrow, #achievementsScreen > .subpage-heading .eyebrow, #roomStatusScreen > .subpage-heading .eyebrow, #memberRatingsScreen > .subpage-heading .eyebrow, #mummyRankingScreen > .subpage-heading .eyebrow, #gameRecordsScreen > .subpage-heading .eyebrow, #rulemasterGamesScreen > .subpage-heading .eyebrow, #otherFavoriteGamesScreen > .subpage-heading .eyebrow { height: 12px; line-height: 12px; } #dailyFortuneScreen .subpage-heading .back-button, #achievementsScreen .subpage-heading .back-button, #historyScreen .subpage-heading .back-button, #memberHistoryScreen .subpage-heading .back-button, #membersScreen .subpage-heading .back-button, #pricingScreen .subpage-heading .back-button, #roomStatusScreen .subpage-heading .back-button, #memberRatingsScreen .subpage-heading .back-button, #mummyRankingScreen .subpage-heading .back-button, #gameRecordsScreen .subpage-heading .back-button, #rulemasterGamesScreen .subpage-heading .back-button, #otherFavoriteGamesScreen .subpage-heading .back-button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; flex: 0 0 30px; padding: 0; } html[data-theme="dark"] #gamesScreen #gamesHeading .back-button { background: transparent; color: #dce5ff; } html[data-theme="dark"] #gamesScreen #gamesHeading .back-button:hover, html[data-theme="dark"] #gamesScreen #gamesHeading .back-button:focus-visible { background: rgba(158,193,255,.12); } #dailyFortuneScreen .subpage-heading, #achievementsScreen .subpage-heading, #historyScreen .subpage-heading, #memberHistoryScreen .subpage-heading, #membersScreen .subpage-heading, #pricingScreen .subpage-heading, #roomStatusScreen .subpage-heading, #memberRatingsScreen .subpage-heading, #mummyRankingScreen .subpage-heading, #gameRecordsScreen .subpage-heading, #rulemasterGamesScreen .subpage-heading, #otherFavoriteGamesScreen .subpage-heading { position: relative; justify-content: center; } #dailyFortuneScreen .subpage-heading > .back-button, #achievementsScreen .subpage-heading > .back-button, #historyScreen .subpage-heading > .back-button, #memberHistoryScreen .subpage-heading > .back-button, #membersScreen .subpage-heading > .back-button, #pricingScreen .subpage-heading > .back-button, #roomStatusScreen .subpage-heading > .back-button, #memberRatingsScreen .subpage-heading > .back-button, #mummyRankingScreen .subpage-heading > .back-button, #gameRecordsScreen .subpage-heading > .back-button, #rulemasterGamesScreen .subpage-heading > .back-button, #otherFavoriteGamesScreen .subpage-heading > .back-button { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); } #dailyFortuneScreen .subpage-heading > div:not(.screen-heading-actions), #achievementsScreen .subpage-heading > div:not(.screen-heading-actions), #historyScreen .subpage-heading > div:not(.screen-heading-actions), #memberHistoryScreen .subpage-heading > div:not(.screen-heading-actions), #membersScreen .subpage-heading > div:not(.screen-heading-actions), #pricingScreen .subpage-heading > div:not(.screen-heading-actions), #roomStatusScreen .subpage-heading > div:not(.screen-heading-actions), #memberRatingsScreen .subpage-heading > div:not(.screen-heading-actions), #mummyRankingScreen .subpage-heading > div:not(.screen-heading-actions), #gameRecordsScreen .subpage-heading > div:not(.screen-heading-actions), #rulemasterGamesScreen .subpage-heading > div:not(.screen-heading-actions), #otherFavoriteGamesScreen .subpage-heading > div:not(.screen-heading-actions) { align-items: center; text-align: center; } #dailyFortuneScreen .subpage-heading h2, #achievementsScreen .subpage-heading h2, #historyScreen .subpage-heading h2, #memberHistoryScreen .subpage-heading h2, #membersScreen .subpage-heading h2, #pricingScreen .subpage-heading h2, #roomStatusScreen .subpage-heading h2, #memberRatingsScreen .subpage-heading h2, #mummyRankingScreen .subpage-heading h2, #gameRecordsScreen .subpage-heading h2, #rulemasterGamesScreen .subpage-heading h2, #otherFavoriteGamesScreen .subpage-heading h2 { margin-top: 0; line-height: 1.12; } #dailyFortuneScreen .subpage-heading .screen-heading-actions, #achievementsScreen .subpage-heading .screen-heading-actions, #historyScreen .subpage-heading .screen-heading-actions, #memberHistoryScreen .subpage-heading .screen-heading-actions, #membersScreen .subpage-heading .screen-heading-actions, #pricingScreen .subpage-heading .screen-heading-actions, #roomStatusScreen .subpage-heading .screen-heading-actions, #memberRatingsScreen .subpage-heading .screen-heading-actions, #mummyRankingScreen .subpage-heading .screen-heading-actions, #gameRecordsScreen .subpage-heading .screen-heading-actions, #rulemasterGamesScreen .subpage-heading .screen-heading-actions, #otherFavoriteGamesScreen .subpage-heading .screen-heading-actions { position: absolute; right: 4px; } #gameWorldScreen .game-world-item { position: relative; min-height: 104px; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; padding: 18px; border-radius: 22px; border-color: rgba(49,90,159,.18); background: rgba(255,255,255,.82); box-shadow: 0 10px 28px rgba(39,65,103,.08); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } #gameWorldScreen .game-world-item:hover, #gameWorldScreen .game-world-item:focus-visible { transform: translateY(-2px); border-color: #9ebcf0; box-shadow: 0 12px 28px rgba(39,65,103,.14); outline: none; } #gameWorldScreen .game-world-item-icon { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 8px 18px rgba(20,35,65,.14); } #gameWorldScreen .game-world-item strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 1.08rem; } #gameWorldScreen .game-world-item small { font-size: .8rem; line-height: 1.4; } #gameWorldScreen .game-world-item > span:nth-child(2) { min-width: 0; padding-right: 62px; } #gameWorldScreen .game-world-item-chevron { align-self: center; font-size: 1.7rem; line-height: 1; } #gameWorldScreen .stop-challenge-menu-badge { font-size: .64rem; } #gameWorldScreen .stop-challenge-world-item > span:nth-child(2) { padding-right: 0; } #gameWorldScreen .game-world-complete-badge { position: absolute; top: 50%; right: 48px; margin: 0; transform: translateY(-50%); line-height: 1.2; } .mystery-game-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0; } .mystery-game-header h2 { margin: 3px 0 0; font-size: 1.55rem; } #mysteryGameScreen { gap: 8px; } #mysteryGameStatus:empty { display: none; min-height: 0; margin: 0; padding: 0; } #turtleSoupScreen { gap: 8px; } #turtleSoupStatus:empty { display: none; min-height: 0; margin: 0; padding: 0; } #balanceGameStatus:empty { display: none; min-height: 0; margin: 0; padding: 0; } .mystery-game-case { padding: 18px; border: 1px solid #dfe7f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(39,65,103,.06); } .mystery-game-date { color: #728198; font-size: .75rem; } .mystery-game-timeline-button { float: right; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 10px 4px 12px; border: 1px solid #b7cdf0; border-radius: 999px; background: #f1f6ff; color: #24579f; box-shadow: 0 2px 6px rgba(49,95,165,.12); font-size: .8rem; font-weight: 900; } .mystery-game-timeline-button::after { content: ">"; font-size: 1.05rem; line-height: 1; font-weight: 900; } .mystery-game-timeline-backdrop { position: fixed; z-index: 79; inset: 0; background: rgba(12, 24, 44, .3); opacity: 0; pointer-events: none; transition: opacity .24s ease; } .mystery-game-timeline-backdrop.is-open { opacity: 1; pointer-events: auto; } .mystery-game-timeline-layer { position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(78vw, 360px); padding: 18px; background: #fff; box-shadow: -10px 0 28px rgba(20,33,61,.22); transform: translateX(100%); transition: transform .24s ease; overflow-y: auto; } .mystery-game-timeline-layer.is-open { transform: translateX(0); } .mystery-game-timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; color: #13294b; font-size: 1.05rem; } .mystery-game-timeline-header button { border: 0; background: transparent; font-size: 1.5rem; } .mystery-game-timeline-item { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e1e8f2; } .mystery-game-timeline-item time { color: #315a9f; font-size: .9rem; font-weight: 900; } .mystery-game-timeline-item p { margin: 0; color: #536981; font-size: .93rem; line-height: 1.6; } @media (min-width: 700px) { .mystery-game-timeline-layer { width: min(42vw, 360px); } } .turtle-soup-choices { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e1e8f2; } .turtle-soup-choices h4 { margin: 0 0 2px; color: #13294b; font-size: .96rem; } #turtleSoupCaseTitle { margin-bottom: 8px; } #turtleSoupStory { margin-top: 0; } .turtle-soup-choice { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border: 1px solid #d6e0ee; border-radius: 12px; background: #f7f9fc; color: #13294b; font-weight: 700; line-height: 1.45; text-align: left; } .turtle-soup-choice b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #315a9f; color: #fff; font-size: .78rem; } .turtle-soup-choice:hover, .turtle-soup-choice:focus-visible { border-color: #315a9f; background: #edf4ff; outline: none; } .balance-game-case { padding: 18px; border: 1px solid #dfe7f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(39,65,103,.06); } .balance-game-case h3 { margin: 8px 0 10px; color: #13294b; font-size: 1.2rem; line-height: 1.45; } .balance-game-case > p { margin: 0; color: #536981; line-height: 1.65; white-space: pre-line; } .balance-game-choices { display: grid; gap: 12px; margin-top: 20px; } .balance-game-choice { display: grid; gap: 8px; width: 100%; padding: 16px; border: 1px solid #d6e0ee; border-radius: 14px; background: #f7f9fc; color: #13294b; text-align: left; transition: border-color .16s ease, background .16s ease; } .balance-game-choice:not(:disabled):hover, .balance-game-choice:not(:disabled):focus-visible { border-color: #315a9f; background: #edf4ff; outline: none; } .balance-game-choice:disabled { cursor: default; } .balance-game-choice strong { font-size: .95rem; line-height: 1.45; } .balance-game-choice small { color: #728198; font-size: .78rem; font-weight: 800; } .balance-game-choice-bar { height: 7px; overflow: hidden; border-radius: 99px; background: #e1e8f2; } .balance-game-choice-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: #315a9f; transition: width .35s ease; } .balance-game-choice.is-selected { border-color: #315a9f; box-shadow: 0 0 0 2px rgba(49,90,159,.14); } .omok-game-room { padding: 16px; border: 1px solid #dfe7f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(39,65,103,.06); } .omok-header-actions { display: flex; align-items: center; gap: 8px; } .omok-header-actions .word-chain-close-button { flex: 0 0 44px; margin: 0; } .omok-header-actions .title-badge-button { min-height: 36px; padding: 0 12px; font-size: .75rem; } .omok-lobby-panel { display: grid; gap: 12px; } .omok-lobby-list { display: grid; gap: 6px; } .omok-lobby-card { display: grid; gap: 5px; padding: 10px 12px; border: 1px solid #dfe7f3; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(39,65,103,.05); } .omok-lobby-card-header, .omok-lobby-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .omok-lobby-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; } .omok-lobby-card-meta > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .omok-lobby-players { color: #243b5d !important; font-size: .88rem !important; font-weight: 700; letter-spacing: -.01em; } .omok-lobby-card-meta .omok-lobby-card-actions { flex: 0 0 auto; margin-top: 0; } .omok-lobby-state { font-weight: 700; } .omok-lobby-state.is-my-turn { color: #2f8f58; } .omok-lobby-state.is-opponent-turn { color: #b57a1d; } .omok-lobby-state.is-waiting { color: #6b7d95; } .omok-lobby-card-header strong { color: #244f93; letter-spacing: .12em; } .omok-lobby-card small { color: #687c96; font-size: .76rem; } .omok-lobby-card-actions { gap: 6px; } .omok-lobby-card-actions button { min-width: 72px; min-height: 36px; padding: 0 14px; font-size: .78rem; white-space: nowrap; } .omok-invite-code { width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 12px; border: 1px solid #cbd9ee; border-radius: 13px; background: #f4f8ff; text-align: left; } .omok-chat-fab { position: fixed; right: 18px; bottom: 22px; z-index: 80; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #315fa8; color: #fff; font-size: 1.35rem; box-shadow: 0 8px 22px rgba(27,61,111,.3); } .omok-chat-unread { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #e5484d; } .omok-chat-panel { position: fixed; left: 50%; bottom: 0; z-index: 79; width: min(100%, 520px); height: min(62vh, 520px); height: min(62dvh, 520px); display: flex; flex-direction: column; overflow: hidden; transform: translate(-50%, 105%); transition: transform .24s ease; border: 1px solid #dbe5f2; border-bottom: 0; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -10px 30px rgba(28,55,95,.18); } .omok-chat-panel:not(.is-open) { display: none; visibility: hidden; pointer-events: none; transform: translate(-50%, calc(100% + 24px)); } .omok-chat-panel:not(.is-open) .omok-chat-messages { overflow: hidden; } .omok-chat-panel.is-open { display: flex; transform: translate(-50%, 0); } .omok-chat-fab { z-index: 120; } .omok-chat-panel { z-index: 119; } .omok-chat-header { position: relative; z-index: 1; display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom: 1px solid #e3eaf4; color: #17365f; } .omok-chat-header button { position: relative; z-index: 2; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #55708f; font-size: 1.5rem; cursor: pointer; pointer-events: auto; } .omok-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; } .omok-chat-message { align-self: flex-start; max-width: 88%; padding: 8px 10px; border-radius: 10px; background: #f1f5fb; color: #233d61; } .omok-chat-message.is-mine { align-self: flex-end; background: #315fa8; color: #fff; text-align: right; } .omok-chat-message strong { display:block; margin-bottom: 2px; font-size: .72rem; color: #54729a; } .omok-chat-message span { white-space: pre-wrap; word-break: break-word; font-size: .86rem; } .omok-chat-message.is-mine strong { color: #d9e8ff; } .omok-chat-form { display:flex; gap: 8px; padding: 12px; border-top: 1px solid #e3eaf4; } .omok-chat-form input { flex:1; min-width:0; border:1px solid #cbd8e9; border-radius: 9px; padding: 10px; } .omok-chat-form button { flex:0 0 auto; padding: 0 14px; border:0; border-radius: 9px; background:#315fa8; color:#fff; font-weight:700; } .game-chat-fab { position: fixed; right: 18px; bottom: 22px; z-index: 1000; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #315fa8; color: #fff; font-size: 1.35rem; box-shadow: 0 8px 22px rgba(27,61,111,.3); cursor: pointer; } .game-chat-unread { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: #e5484d; color: #fff; font-style: normal; font-size: .82rem; font-weight: 900; line-height: 1; box-shadow: 0 2px 8px rgba(155,24,40,.45); animation: game-chat-unread-pulse 1.25s ease-in-out infinite; } .game-chat-unread::after { content: "!"; } @keyframes game-chat-unread-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .game-chat-backdrop { position: fixed; inset: 0; z-index: 998; visibility: hidden; background: rgba(10, 22, 40, .48); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .game-chat-backdrop.is-open { visibility: visible; opacity: 1; pointer-events: auto; } .game-chat-panel { position: fixed; left: 50%; bottom: 0; z-index: 999; width: min(100%, 520px); height: min(62vh, 520px); height: min(62dvh, 520px); display: flex; flex-direction: column; transform: translate(-50%, 105%); transition: transform .24s ease; border: 1px solid #dbe5f2; border-bottom: 0; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -10px 30px rgba(28,55,95,.18); } .game-chat-panel:not(.is-open) { visibility: hidden; pointer-events: none; transform: translate(-50%, calc(100% + 24px)); } .game-chat-panel.is-open { transform: translate(-50%, 0); } .game-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e3eaf4; color: #17365f; } .game-chat-header button { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #55708f; font-size: 1.5rem; cursor: pointer; } .game-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; } .game-chat-message { align-self: flex-start; max-width: 88%; padding: 8px 10px; border-radius: 10px; background: #f1f5fb; color: #233d61; } .game-chat-message.is-mine { align-self: flex-end; background: #315fa8; color: #fff; text-align: right; } .game-chat-message strong { display: block; margin-bottom: 2px; font-size: .72rem; color: #54729a; } .game-chat-message span { white-space: pre-wrap; word-break: break-word; font-size: .86rem; } .game-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e3eaf4; } .game-chat-form input { flex: 1; min-width: 0; border: 1px solid #cbd8e9; border-radius: 9px; padding: 10px; } .game-chat-form button { flex: 0 0 auto; padding: 0 14px; border: 0; border-radius: 9px; background: #315fa8; color: #fff; font-weight: 700; cursor: pointer; } html[data-theme="dark"] .game-chat-panel { border-color: #2f3e53; background: #151e2c; box-shadow: 0 -10px 30px rgba(0,0,0,.4); } html[data-theme="dark"] .game-chat-header { border-color: #2f3e53; color: #edf3fc; } html[data-theme="dark"] .game-chat-message { background: #202d40; color: #eaf1fb; } html[data-theme="dark"] .game-chat-message.is-mine { background: #3e70b8; color: #fff; } html[data-theme="dark"] .game-chat-message strong { color: #9ebce5; } html[data-theme="dark"] .game-chat-form { border-color: #2f3e53; } html[data-theme="dark"] .game-chat-form input { border-color: #3a4d68; background: #1b2738; color: #edf3fc; } body.game-chat-open { position: fixed; top: var(--game-chat-scroll-position, 0); left: 0; right: 0; width: 100%; overflow: hidden; overscroll-behavior: none; } .omok-chat-fab { z-index: 1000; } .omok-chat-panel { z-index: 999; } .omok-invite-code span, .omok-invite-code small { color: #60748f; font-size: .72rem; } .omok-invite-code span { text-align: left; white-space: nowrap; } .omok-invite-code strong { color: #244f93; font-size: 1.15rem; letter-spacing: .16em; text-align: left; } .omok-invite-code small { grid-column: 1 / -1; } .omok-invite-status { min-height: 1.2em; color: #3565ad !important; font-weight: 700; } .omok-players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 8px; } .omok-title-row { display: flex; align-items: center; gap: 8px; } .omok-title-row h2 { margin: 0; } .omok-rules-button { display: inline-grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid #c8d8ee; border-radius: 50%; background: #eef4fc; color: #315a9f; font-size: .95rem; font-weight: 900; line-height: 1; } .omok-rules-button:hover, .omok-rules-button:focus-visible { background: #315a9f; color: #fff; } .omok-rules-tooltip { max-width: 520px; max-height: min(82vh, 620px); overflow-y: auto; } .omok-rules-tooltip h3 { margin: 14px 0 6px; color: #13294b; font-size: 1rem; } .omok-rules-tooltip ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: #52647e; line-height: 1.55; } .omok-player { display: grid; gap: 4px; padding: 10px; border: 1px solid #dfe7f3; border-radius: 12px; background: #f8fafd; } .omok-player b { color: #667b98; font-size: .72rem; }.omok-player strong { color: #13294b; font-size: .85rem; }.omok-player.is-turn { border-color: #416cae; background: #edf4ff; } .kamisado-player-indicator { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border: 1px solid #9aa8ba; border-radius: 50%; vertical-align: -1px; box-sizing: border-box; } .kamisado-player-indicator.p1 { background: #fff; } .kamisado-player-indicator.p2 { background: #151515; border-color: #151515; } .omok-records.is-my-turn { color: #e5484d; font-weight: 800; animation: game-turn-alert 1s ease-in-out infinite; }.omok-records.is-opponent-turn { color: #7b8798; } .omok-player-record { color: #60748f; font-size: .72rem; font-weight: 700; } .omok-records { min-height: 20px; margin: 8px 0; color: #526983; font-size: .78rem; text-align: center; } #othelloGameRoom > .omok-records { min-height: 0; margin: 0; } #kamisadoGameRoom > .omok-records { min-height: 0; margin: 0; } .omok-game-actions { display: flex; gap: 8px; min-height: 42px; margin: 12px 0; }.omok-game-actions button { flex: 1; min-height: 42px; } .othello-turn-status { width: 100%; min-height: 20px; margin: 4px 0 8px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; font-size: .8rem; font-weight: 800; } .othello-game-actions { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; min-height: 42px; } .othello-game-actions > button { width: 100%; min-width: 0; } .othello-turn-status.is-my-turn { color: #e5484d; animation: game-turn-alert 1s ease-in-out infinite; } .othello-turn-status.is-opponent-turn { color: #8a5a00; } .othello-turn-status.is-neutral { color: #60748f; } #kamisadoGameRoom > .othello-turn-status { margin-top: 0; margin-bottom: 4px; } #kamisadoGameRoom > .kamisado-board { margin-top: 16px; } .othello-player-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .othello-stone-count { flex: 0 0 auto; color: #315a9f; font-size: .8rem; font-weight: 800; white-space: nowrap; } .omok-board { display: grid; grid-template-columns: repeat(15, 1fr); aspect-ratio: 1; padding: 0; border: 8px solid #b98143; background-color: #ddb879; background-image: linear-gradient(to right, rgba(76,49,20,.62) 0 1px, transparent 1px), linear-gradient(to bottom, rgba(76,49,20,.62) 0 1px, transparent 1px); background-size: calc(100% / 15) calc(100% / 15); background-position: calc(100% / 30) calc(100% / 30); } .omok-board-status { min-height: 1.35em; margin: 10px 0 6px; color: #d43d45; font-size: .82rem; font-weight: 800; line-height: 1.35; text-align: center; } .omok-cell { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }.omok-cell:disabled { opacity: 1; cursor: default; }.omok-cell.black::after, .omok-cell.white::after { content: ""; position: absolute; width: 74%; height: 74%; top: 13%; left: 13%; border-radius: 50%; }.omok-cell.black::after { background: #151515; box-shadow: inset 2px 2px 4px #555; }.omok-cell.white::after { background: #fff; box-shadow: inset -2px -2px 4px #aaa; }.omok-move-number { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: clamp(.56rem, 1.8vw, .82rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; }.omok-cell.white .omok-move-number { color: #111827; }.omok-cell.last-move::before { content: ""; position: absolute; z-index: 2; top: 7%; left: 7%; width: 86%; height: 86%; border: 2px solid #e14b3f; border-radius: 50%; box-sizing: border-box; } html[data-theme="dark"] .balance-game-case { border-color: #2f3e53; background: #1a2230; box-shadow: none; } html[data-theme="dark"] .omok-game-room { border-color: #2f3e53; background: #1a2230; box-shadow: none; } html[data-theme="dark"] .omok-player { border-color: #2f3e53; background: #141c29; } html[data-theme="dark"] .omok-player strong { color: #edf2fa; } html[data-theme="dark"] .omok-invite-code { border-color: #5275a5; background: #1e3554; } html[data-theme="dark"] .omok-invite-code span { color: #d7e6fb; } html[data-theme="dark"] .omok-invite-code strong { color: #ffffff; } html[data-theme="dark"] .omok-invite-code small { color: #c3d7f1; } html[data-theme="dark"] .omok-lobby-card { border-color: #2f3e53; background: #1a2230; box-shadow: none; } html[data-theme="dark"] .omok-lobby-card-header strong { color: #a9c9fa; } html[data-theme="dark"] .omok-lobby-card small { color: #aebdd1; } html[data-theme="dark"] .omok-lobby-players { color: #f1f5fb !important; } html[data-theme="dark"] .omok-lobby-state.is-my-turn { color: #78d69b; } html[data-theme="dark"] .omok-lobby-state.is-opponent-turn { color: #f2c66d; } html[data-theme="dark"] .omok-lobby-state.is-waiting { color: #b4c2d5; } html[data-theme="dark"] .omok-chat-panel { border-color:#2f3e53; background:#151e2c; box-shadow:0 -10px 30px rgba(0,0,0,.4); } html[data-theme="dark"] .omok-chat-header { border-color:#2f3e53; color:#edf3fc; } html[data-theme="dark"] .omok-chat-message { background:#202d40; color:#eaf1fb; } html[data-theme="dark"] .omok-chat-message.is-mine { background:#3e70b8; color:#fff; } html[data-theme="dark"] .omok-chat-message strong { color:#9ebce5; } html[data-theme="dark"] .omok-chat-message.is-mine strong { color:#e7f0ff; } html[data-theme="dark"] .omok-chat-form { border-color:#2f3e53; } html[data-theme="dark"] .omok-chat-form input { border-color:#3a4d68; background:#1b2738; color:#edf3fc; } html[data-theme="dark"] .omok-player-record { color: #aebdd1; } html[data-theme="dark"] .omok-board-status { color: #ff858e; } .omok-chat-fab { z-index: 1000; cursor: pointer; } .omok-chat-fab { position: fixed !important; right: 18px !important; bottom: 22px !important; left: auto !important; top: auto !important; } #omokChatFab { position: fixed !important; right: 18px !important; bottom: 22px !important; left: auto !important; top: auto !important; } .omok-chat-panel { z-index: 999; } #omokChatPanel:not(.is-open) { display: none; } #omokChatPanel.is-open { display: flex; } html[data-theme="dark"] .omok-rules-button { border-color: #49617f; background: #202e42; color: #c4dcff; } html[data-theme="dark"] .omok-rules-button:hover, html[data-theme="dark"] .omok-rules-button:focus-visible { background: #527ab5; color: #fff; } html[data-theme="dark"] .omok-rules-tooltip h3 { color: #edf2fa; } html[data-theme="dark"] .omok-rules-tooltip ul { color: #c3cede; } html[data-theme="dark"] .othello-turn-status.is-my-turn { color: #8de0b4; } html[data-theme="dark"] .othello-turn-status.is-opponent-turn { color: #ffd479; } html[data-theme="dark"] .othello-turn-status.is-neutral { color: #b5c4d8; } html[data-theme="dark"] .othello-stone-count { color: #9cc4ff; } html[data-theme="dark"] .othello-turn-status.is-my-turn, html[data-theme="dark"] .omok-records.is-my-turn { color: #ff7b80; } html[data-theme="dark"] .omok-records.is-opponent-turn { color: #ffd479; } html[data-theme="dark"] .omok-player.is-turn { border-color: #5b8fd4; background: #203452; } html[data-theme="dark"] .omok-invite-status { color: #a9c9ff !important; } html[data-theme="dark"] .balance-game-case h3 { color: #edf2fa; } html[data-theme="dark"] .balance-game-case > p { color: #c2cede; } html[data-theme="dark"] .balance-game-choice { border-color: #40516a; background: #141c29; color: #edf2fa; } html[data-theme="dark"] .balance-game-choice:not(:disabled):hover, html[data-theme="dark"] .balance-game-choice:not(:disabled):focus-visible { border-color: #75a5f3; background: #253247; } html[data-theme="dark"] .balance-game-choice small { color: #aebdd1; } html[data-theme="dark"] .balance-game-choice-bar { background: #34445b; } .mystery-game-case h3 { margin: 6px 0 10px; color: #13294b; font-size: 1.2rem; } .mystery-game-case > p { margin: 0 0 18px; color: #536981; line-height: 1.65; white-space: pre-line; } .mystery-game-character-stage { display: block; touch-action: pan-y; } .mystery-game-characters { min-width: 0; display: grid; gap: 10px; } .mystery-game-character { padding: 14px; border: 1px solid #dfe7f3; border-radius: 14px; background: #f7f9fc; color: #13294b; text-align: left; user-select: none; } .mystery-game-character:not(.is-active) { display: none; } .mystery-game-character.is-slide-next { animation: mystery-character-slide-next .24s ease-out both; } .mystery-game-character.is-slide-prev { animation: mystery-character-slide-prev .24s ease-out both; } @keyframes mystery-character-slide-next { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } @keyframes mystery-character-slide-prev { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .mystery-game-character.is-slide-next, .mystery-game-character.is-slide-prev { animation: none; } } .mystery-game-character-select { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; } .mystery-game-character-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 10px; margin-bottom: 10px; } .mystery-game-character-heading strong { min-width: 0; text-align: center; } .mystery-game-accuse-button { width: 100%; min-height: 42px; margin-top: 12px; border: 1px solid #315a9f; border-radius: 10px; background: #315a9f; color: #fff; font-size: .88rem; font-weight: 800; } .mystery-game-accuse-button:disabled { opacity: .55; } .mystery-game-character strong { display: block; } .mystery-game-character strong { font-size: 1rem; } .mystery-game-character-line { display: block; margin-top: 8px; padding-top: 8px; color: #728198; font-size: .82rem; line-height: 1.5; text-align: left; } .mystery-game-character-line + .mystery-game-character-line { border-top: 1px solid #e1e8f2; } .mystery-game-character-line b { display: block; margin-bottom: 3px; } .mystery-game-character-line > span { display: block; } .mystery-game-character-line b { color: #315a9f; font-weight: 800; } .mystery-game-questions { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e1e8f2; } .mystery-game-question-button { width: 100%; padding: 8px 10px; border: 1px solid #d6e0ee; border-radius: 9px; background: #fff; color: #315a9f; font-size: .78rem; font-weight: 700; text-align: left; } .mystery-game-question-answer { margin: 5px 10px 8px; color: #536981; font-size: .8rem; line-height: 1.55; white-space: pre-line; } .mystery-game-character-side-button { width: 38px; height: 42px; border: 1px solid #d6e0ee; border-radius: 9px; background: #edf4ff; color: #315a9f; font-size: 1.35rem; line-height: 1; } .mystery-game-result { margin-top: 16px; padding: 14px; border-radius: 14px; background: #edf4ff; color: #244f93; line-height: 1.6; } .mystery-game-result.is-failed { background: #fff0ef; color: #b42318; border: 1px solid #f3b8b4; } .mystery-game-result strong { display: block; margin-bottom: 4px; } .mystery-game-result-explanation { margin: 0; white-space: pre-line; overflow-wrap: anywhere; word-break: keep-all; } .mystery-game-share-button { min-height: 36px; padding: 0 13px; border: 1px solid #315a9f; border-radius: 9px; background: #315a9f; color: #fff; font-size: .78rem; font-weight: 800; } .mystery-game-share-message { min-height: 18px; margin: 5px 0 8px; color: #187548; font-size: .74rem; font-weight: 700; } .mystery-game-share-message:not(.is-success) { color: #b42318; } .mystery-game-history { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e1e8f2; } .mystery-game-history h4 { margin: 0 0 9px; color: #13294b; font-size: .95rem; } .mystery-game-history-list { display: grid; gap: 6px; } .mystery-game-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: #f7f9fc; color: #536981; font-size: .78rem; } .mystery-game-history-row strong { overflow: hidden; color: #13294b; text-overflow: ellipsis; white-space: nowrap; } .mystery-game-history-result { padding: 2px 7px; border-radius: 999px; font-size: .7rem; font-weight: 800; } .mystery-game-history-result.correct { background: #d9f4e5; color: #187548; } .mystery-game-history-result.failed { background: #fee4e2; color: #b42318; } .mystery-game-history-row time { color: #8794a7; font-size: .7rem; } .mystery-game-history-empty { margin: 0; color: #8794a7; font-size: .78rem; } html[data-theme="dark"] .mystery-game-case { border-color: #2f3e53; background: #1a2230; box-shadow: none; } html[data-theme="dark"] .mystery-game-case h3, html[data-theme="dark"] .mystery-game-character { color: #edf2fa; } html[data-theme="dark"] .mystery-game-date { color: #aebdd1; } html[data-theme="dark"] .mystery-game-character { border-color: #34445b; background: #141c29; } html[data-theme="dark"] .mystery-game-questions { border-color: #34445b; } html[data-theme="dark"] .mystery-game-question-button { border-color: #40516a; background: #253247; color: #b9d2ff; } html[data-theme="dark"] .mystery-game-question-answer { color: #c2cede; } html[data-theme="dark"] .mystery-game-accuse-button { border-color: #75a5f3; background: #3d67ae; color: #fff; } html[data-theme="dark"] .mystery-game-character-side-button { border-color: #40516a; background: #253247; color: #b9d2ff; } html[data-theme="dark"] .mystery-game-case > p, html[data-theme="dark"] .mystery-game-character-line { color: #c2cede; } html[data-theme="dark"] .mystery-game-character-line + .mystery-game-character-line { border-color: #34445b; } html[data-theme="dark"] .mystery-game-character-line b { color: #9fc2ff; } html[data-theme="dark"] .mystery-game-result { background: #1e3554; color: #d7e5ff; } html[data-theme="dark"] .mystery-game-result.is-failed { background: #47252a; color: #ffb8b5; border-color: #8e4246; } html[data-theme="dark"] .mystery-game-share-button { border-color: #75a5f3; background: #3d67ae; } html[data-theme="dark"] .mystery-game-history { border-color: #34445b; } html[data-theme="dark"] .mystery-game-history h4, html[data-theme="dark"] .mystery-game-history-row strong { color: #edf2fa; } html[data-theme="dark"] .mystery-game-history-row { background: #141c29; color: #b4c2d7; } html[data-theme="dark"] .mystery-game-history-row time, html[data-theme="dark"] .mystery-game-history-empty { color: #9eafc5; } html[data-theme="dark"] .mystery-game-timeline-button { border-color: #4a6d9f; background: #1e3554; color: #cfe0ff; box-shadow: 0 2px 8px rgba(0,0,0,.22); } html[data-theme="dark"] .mystery-game-timeline-backdrop { background: rgba(0, 0, 0, .58); } html[data-theme="dark"] .mystery-game-timeline-layer { background: #141c29; color: #edf2fa; box-shadow: -10px 0 28px rgba(0,0,0,.42); } html[data-theme="dark"] .mystery-game-timeline-header { color: #edf2fa; } html[data-theme="dark"] .mystery-game-timeline-header button { color: #cfe0ff; } html[data-theme="dark"] .mystery-game-timeline-item { border-color: #34445b; } html[data-theme="dark"] .mystery-game-timeline-item time { color: #9fc2ff; } html[data-theme="dark"] .mystery-game-timeline-item p, html[data-theme="dark"] .mystery-game-timeline-empty { color: #c2cede; } .game-choice-content > p { margin-bottom: 18px; } .game-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .game-choice-actions button { min-height: 48px; } .daily-word-guess-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 10px; } .daily-word-guess-input-panel { position: sticky; z-index: 12; top: 0; margin-top: -4px; padding-top: 4px; background: #f4f7fb; } .daily-word-guess-header > div { text-align: center; } .daily-word-guess-header > :last-child { justify-self: end; } .daily-word-guess-header h2 { margin: 3px 0 0; font-size: 1.55rem; } #dailyWordGuessScreen { position: relative; display: flex; flex-direction: column; gap: 0; overflow: visible; } #dailyWordGuessScreen .daily-word-guess-input-panel { position: relative !important; z-index: 20; align-self: start; flex: 0 0 auto; width: 100%; min-height: 0; padding-bottom: 6px; background: var(--page-bg, #f4f7fb); } #dailyWordGuessScreen.is-daily-word-loading .daily-word-guess-keyboard { visibility: hidden !important; pointer-events: none; } #dailyWordGuessScreen .daily-word-guess-scroll { flex: 0 1 auto; align-self: flex-start; width: 100%; height: fit-content; min-height: 0; max-height: max(180px, calc(100dvh - 430px)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 2px 0 0; } /* 보들 화면은 내부 목록 자체가 스크롤되므로 페이지 셸 하단의 공통 GNB 여백을 추가로 남기지 않습니다. */ .page-shell:has(#dailyWordGuessScreen:not(.hidden)) { padding-bottom: 0; } .page-shell.is-daily-word-screen { padding-bottom: 0 !important; } #publicGameView:has(#dailyWordGuessScreen:not(.hidden)) { min-height: 0; padding-bottom: 0; } #publicGameView.is-daily-word-view { min-height: 0 !important; padding-bottom: 0 !important; } #dailyWordGuessScreen { min-height: 0; } /* 입력 패널 높이를 제외한 영역만 도전 목록 스크롤 영역으로 사용해 목록 아래에 빈 세로 공간이 남지 않도록 합니다. */ #dailyWordGuessScreen .daily-word-guess-scroll { height: auto; max-height: 180px; flex: 0 0 auto; } /* 보들 화면은 상단 입력 패널을 고정하고, 나의 도전부터 내부 스크롤합니다. */ #dailyWordGuessScreen { display: flex; flex-direction: column; gap: 18px; overflow: hidden; } #dailyWordGuessScreen .daily-word-guess-input-panel { position: relative !important; top: auto; z-index: 20; flex: 0 0 auto; align-self: stretch; width: 100%; padding-top: 4px; padding-bottom: 6px; background: var(--page-bg, #f4f7fb); } #dailyWordGuessScreen .daily-word-guess-scroll { flex: 1 1 auto; width: 100%; min-height: 0; max-height: max(180px, calc(100dvh - 430px)); overflow-y: auto; overflow-x: hidden; padding: 0 2px 24px 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } #dailyWordGuessScreen.daily-word-guess-loading { min-height: 280px; } #dailyWordGuessScreen.daily-word-guess-loading > * { visibility: hidden; } #appLoading.daily-route-loading { position: fixed; z-index: 100; inset: 0; min-height: 100dvh; display: grid; place-content: center; background: var(--page-bg, #f5f7fb); } html[data-theme="dark"] #appLoading.daily-route-loading { background: #111927; color: #c8d5e8; } .daily-word-guess-card, .daily-word-guess-form, .daily-word-guess-attempts, .daily-word-guess-history { margin-bottom: 10px; padding: 14px; border: 1px solid #dfe7f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(39, 65, 103, .06); } .daily-word-guess-heading, .daily-word-guess-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .daily-word-guess-card > .daily-word-guess-form { margin: 10px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .daily-word-guess-card > .daily-word-guess-form label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .daily-word-guess-card > .daily-word-guess-prompt { display: none; } .daily-word-guess-heading div { min-width: 0; } .daily-word-guess-heading span, .daily-word-guess-section-heading span { color: #75849a; font-size: .72rem; } .daily-word-guess-heading strong { display: block; margin-top: 3px; color: #13294b; font-size: 1rem; } .daily-word-guess-heading > span { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #edf3ff; color: #315fa5; font-weight: 800; } .daily-word-guess-prompt, .daily-word-guess-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 10px; } .daily-word-guess-prompt span, .daily-word-guess-tile { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #cad6e7; border-radius: 11px; background: #f4f7fb; color: #60728d; font-size: clamp(1rem, 5vw, 1.35rem); font-weight: 900; } .daily-word-guess-tile.correct, .daily-word-guess-prompt span.correct { border-color: #2f9d65; background: #2f9d65; color: #fff; } .daily-word-guess-tile.present { border-color: #d6a326; background: #e2b23b; color: #fff; } .daily-word-guess-tile.absent { border-color: #8b97a8; background: #8b97a8; color: #fff; } .daily-word-guess-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 13px 0 0; color: #74839a; font-size: .68rem; } .daily-word-guess-guide i { width: 10px; height: 10px; margin-left: 4px; border-radius: 3px; } .daily-word-guess-guide i.correct { background: #2f9d65; } .daily-word-guess-guide i.present { background: #e2b23b; } .daily-word-guess-guide i.absent { background: #8b97a8; } .daily-word-guess-form label { display: block; margin-bottom: 9px; color: #13294b; font-weight: 800; } .daily-word-guess-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 8px; align-items: stretch; } .daily-word-guess-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; min-width: 0; } .daily-word-guess-form input, .daily-word-guess-form button { min-height: 52px; } .daily-word-guess-input { width: 100%; min-width: 0; min-height: 0 !important; aspect-ratio: 1 / 1; height: auto; padding: 0 4px; text-align: center; font-size: 1.35rem; font-weight: 800; } .daily-word-guess-input:focus { border-color: #315fa5; outline: 3px solid rgba(49, 95, 165, .24); outline-offset: 1px; background: #fff; } .daily-word-guess-form .field-message { min-height: 20px; margin: 7px 0 0; } .daily-word-guess-result-share { margin-top: 16px; } .daily-word-guess-result-share button { width: 100%; min-height: 52px; border: 0; border-radius: 10px; background: #315fa5; color: #fff; font-size: 1rem; font-weight: 800; } .daily-word-guess-result-message { margin: 10px 0 0; text-align: center; font-weight: 800; color: #315fa5; } .daily-word-guess-result-message.is-error { color: #b42318; } .daily-word-guess-result-share .field-message { min-height: 20px; margin: 7px 0 0; text-align: center; } .daily-word-guess-result-share .field-message.is-success { color: #315fa5; } .daily-word-guess-result-share .field-message.is-error { color: #b42318; } .daily-word-guess-keyboard { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: none; width: min(100%, 680px); margin: 0 auto; gap: 7px; padding: 12px max(12px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)); border: 1px solid #dfe7f3; border-bottom: 0; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -12px 32px rgba(20, 33, 61, .24); } .daily-word-guess-keyboard.is-visible { display: grid; animation: dailyWordGuessKeyboardUp .16s ease-out; } /* 자모 키보드는 본문 레이아웃을 밀어내지 않는 중앙 팝업으로 표시합니다. */ #dailyWordGuessScreen .daily-word-guess-keyboard { top: 50%; right: auto; bottom: auto; left: 50%; width: min(94vw, 520px); max-height: min(70dvh, 430px); overflow-y: auto; transform: translate(-50%, -50%); border: 1px solid #dfe7f3; border-radius: 20px; box-shadow: 0 18px 48px rgba(15, 23, 42, .3); } #dailyWordGuessScreen .daily-word-guess-keyboard.is-visible { animation: dailyWordGuessKeyboardPopup .16s ease-out; } @keyframes dailyWordGuessKeyboardPopup { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .daily-word-guess-keyboard-row { display: flex; justify-content: center; gap: 5px; } .daily-word-guess-keyboard-row:nth-of-type(2) { width: 91%; margin: 0 auto; } .daily-word-guess-keyboard-row:nth-of-type(3) { width: 96%; margin: 0 auto; } .daily-word-guess-keyboard button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 3px; border: 1px solid #cad6e7; border-radius: 7px; background: #f1f5fb; color: #172c4c; font-size: 1rem; font-weight: 800; touch-action: manipulation; } .daily-word-guess-keyboard button.wide { flex: 1.5 1 0; font-size: 1rem; } .daily-word-guess-keyboard button.utility { flex: .85 1 0; font-size: 1.05rem; } .daily-word-guess-keyboard button.utility.is-active { border-color: #315fa5; background: #dbe8ff; color: #315fa5; } .daily-word-guess-keyboard button.is-absent { border-color: #9aa6b7; background: #9aa6b7; color: #fff; opacity: .7; } .daily-word-guess-section-heading { margin-bottom: 12px; } .daily-word-guess-section-heading h3 { margin: 0; font-size: 1rem; } #dailyWordGuessAttempts { display: grid; gap: 8px; } .daily-word-guess-empty { margin: 0; padding: 20px 10px; color: #7a899e; text-align: center; font-size: .78rem; } #dailyWordGuessHistory { display: grid; gap: 8px; } .daily-word-guess-player { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 12px; background: #f5f8fc; } .daily-word-guess-player strong { color: #172c4c; font-size: .84rem; } .daily-word-guess-player span { color: #738299; font-size: .72rem; } .word-chain-records { margin: 10px 0; padding: 10px 12px; border: 1px solid #dfe7f3; border-radius: 12px; background: #fff; } .word-chain-records h2 { margin: 0 0 7px; color: #13294b; font-size: .82rem; } .word-chain-records-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .word-chain-player-card .word-chain-records-list { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; } .word-chain-top-guide { grid-column: 1 / -1; margin: -6px 0 0; color: #75849a; font-size: .68rem; line-height: 1.25; } .word-chain-record-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 0; gap: 4px; min-height: 28px; padding: 4px 6px; border-radius: 999px; background: #edf3ff; color: #315fa5; } .word-chain-record-badge b { font-size: .7rem; } .word-chain-record-badge strong { min-width: 0; overflow: hidden; color: #172c4c; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; } .word-chain-player-card .word-chain-record-badge strong { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; } .word-chain-record-badge small { color: #738299; font-size: .65rem; } .word-chain-record-badge.rank-1 { background: #fff4d6; } .word-chain-record-badge.rank-2 { background: #eef2f7; } .word-chain-record-badge.rank-3 { background: #f8eadf; } .daily-word-guess-player .solved { color: #218654; font-weight: 800; } .daily-word-guess-player .failed { color: #b54848; font-weight: 800; } .public-game-view { min-height: calc(100dvh - max(32px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))); padding-bottom: max(24px, env(safe-area-inset-bottom)); } .word-chain-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 16px; } .word-chain-header > div { min-width: 0; text-align: center; } .word-chain-header > :first-child { justify-self: start; } .word-chain-header > :last-child { justify-self: end; } .word-chain-header.internal-mode .word-chain-share-button { visibility: hidden; pointer-events: none; } .word-chain-header h1 { margin: 3px 0 0; font-size: 1.55rem; } .word-chain-share-button { width: 92px; min-height: 38px; padding: 0 11px; border: 1px solid #bfd2f3; border-radius: 999px; background: #edf4ff; color: #315fa5; font-size: .78rem; font-weight: 800; } .word-chain-close-button { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: #e9eff8; color: #345985; font-size: 1.9rem; font-weight: 400; line-height: 1; } .word-chain-player-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; min-height: 50px; margin-bottom: 12px; padding: 11px 14px; border: 1px solid #dfe7f3; border-radius: 14px; background: #fff; } .word-chain-player-card span { color: #728198; font-size: .75rem; } .word-chain-player-card strong { color: #244f93; font-size: .9rem; } .word-chain-player-card small { grid-column: 1 / -1; color: #2c7a50; font-size: .7rem; } @media (max-width: 480px) { .word-chain-record-badge { min-height: 30px; padding-inline: 5px; } } .word-chain-form, .word-chain-board { padding: 18px; border: 1px solid #dfe7f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(39, 65, 103, .06); } .word-chain-form { margin-bottom: 14px; } .word-chain-input-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .word-chain-input-label { display: inline-flex; align-items: center; gap: 7px; } .word-chain-forbidden-button { flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; min-height: 22px !important; max-width: 22px; max-height: 22px; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 50%; background: #315fa5; color: #fff; font-size: .78rem; font-weight: 900; line-height: 22px; text-align: center; cursor: pointer; } .word-chain-forbidden-button:hover { background: #244c88; } .word-chain-forbidden-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; } .word-chain-forbidden-list span { color: #64748b; font-size: .85rem; } .word-chain-forbidden-list b { display: inline-flex; width: auto; min-width: 30px; height: 30px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 8px; background: #edf4ff; color: #315fa5; font-size: .95rem; white-space: nowrap; word-break: keep-all; } .word-chain-forbidden-form { display: flex; align-items: flex-end; width: 100%; gap: 8px; margin-top: 14px; } .word-chain-forbidden-form label { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; color: #13294b; font-size: .82rem; font-weight: 800; white-space: nowrap; } .word-chain-forbidden-form input { display: block; flex: 1; min-width: 0; width: 100%; margin-top: 0; padding: 10px; border: 1px solid #cdd8e8; border-radius: 10px; font-size: 1rem; text-align: center; } .word-chain-forbidden-form button { width: auto !important; min-width: 58px; min-height: 42px; flex: 0 0 auto; padding: 0 16px; border: 0; border-radius: 10px; background: #315fa5; color: #fff; font-weight: 800; } .word-chain-forbidden-modal-content .modal-header { position: relative; display: flex; justify-content: center; width: 100%; margin-bottom: 4px; } .word-chain-forbidden-modal-content .modal-header h2 { white-space: nowrap; text-align: center; } .word-chain-forbidden-modal-content .modal-header .close-button { position: absolute; right: 0; width: 36px; min-width: 36px; min-height: 36px; flex: 0 0 36px; } .word-chain-form > label, .word-chain-input-heading label { display: block; margin: 0; color: #13294b; font-weight: 800; } .word-chain-new-button { min-height: 34px; padding: 0 10px; border: 1px solid #bfd2f3; border-radius: 999px; background: #edf4ff; color: #315fa5; font-size: .72rem; font-weight: 800; white-space: nowrap; } .word-chain-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 8px; } .word-chain-input-row input, .word-chain-input-row button { min-height: 52px; } .word-chain-input-row input { min-width: 0; } .word-chain-input-row button { padding: 0 12px; } .word-chain-guide { margin: 9px 0 0; color: #718198; font-size: .76rem; line-height: 1.5; } .word-chain-form .field-message { min-height: 18px; margin: 5px 0 0; } .word-chain-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .word-chain-board-heading h2 { margin: 0; font-size: 1rem; } .word-chain-board-heading span { color: #6e7f97; font-size: .75rem; } .word-chain-list { display: grid; gap: 8px; } .word-chain-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 13px; background: #f5f8fc; } .word-chain-entry-order { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #e5eefc; color: #315fa5; font-size: .74rem; font-weight: 900; } .word-chain-entry strong, .word-chain-entry small { display: block; } .word-chain-entry strong { color: #112849; font-size: .98rem; } .word-chain-entry small { margin-top: 3px; color: #728198; font-size: .7rem; } .word-chain-entry time { color: #8290a4; font-size: .68rem; white-space: nowrap; } .word-chain-empty { padding: 28px 12px; color: #77879d; font-size: .84rem; text-align: center; } .word-chain-history { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e2e8f0; } .word-chain-history h3 { margin: 0 0 10px; color: #536981; font-size: .82rem; } .word-chain-history-list { display: grid; gap: 12px; } .word-chain-history-round { padding: 11px 12px; border: 1px solid #e5ebf4; border-radius: 12px; background: #f8fafd; } .word-chain-history-round > strong { display: block; margin-bottom: 7px; color: #728198; font-size: .7rem; } .word-chain-history-entry { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; color: #536981; font-size: .78rem; } .word-chain-history-entry b { color: #315fa5; } .word-chain-history-entry small { margin-left: auto; color: #8b98a9; font-size: .67rem; } .daily-fortune-main-card { display: grid; gap: 16px; padding: 28px 22px; border: 1px solid #eddca8; border-radius: 18px; background: linear-gradient(145deg, #fffdf7, #fff4cf); box-shadow: 0 8px 22px rgba(120, 89, 17, .08); } .fortune-card-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #fff0bd; font-size: 1.65rem; line-height: 1; } .daily-fortune-greeting { margin: 0; color: #806528; font-size: 1rem; font-weight: 700; } .daily-fortune-message { margin: 0; color: #352c18; font-size: 1.22rem; font-weight: 800; line-height: 1.65; word-break: keep-all; } .daily-fortune-details { display: grid; gap: 12px; margin-top: 12px; } .daily-fortune-details article { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; padding: 17px; border: 1px solid #ede6d5; border-radius: 15px; background: #fff; box-shadow: 0 5px 14px rgba(34,55,90,.05); } .daily-fortune-details article > div { display: grid; gap: 7px; } .daily-fortune-details .fortune-card-icon { background: #e9f0fc; } .daily-fortune-details .fortune-card-icon.palette { background: #f7eafa; } .daily-fortune-details span:not(.fortune-card-icon) { color: #8b7440; font-size: .78rem; } .daily-fortune-details strong { color: #3e3318; font-size: 1rem; } .daily-fortune-share-button { min-height: 50px; margin-top: 16px; border: 1px solid #315a9f; background: #315a9f; color: #fff; font-size: .98rem; font-weight: 800; } .daily-fortune-share-button span { margin-right: 5px; font-size: 1.1rem; } .fortune-color.coral-pink { color: #e45e73; }.fortune-color.deep-blue { color: #174c9a; }.fortune-color.mint { color: #15967d; }.fortune-color.lavender { color: #8066b5; }.fortune-color.lemon-yellow { color: #c18b00; }.fortune-color.burgundy { color: #8f2336; }.fortune-color.sky-blue { color: #2085bd; }.fortune-color.olive-green { color: #63772d; }.fortune-color.cream-beige { color: #9d774d; }.fortune-color.orange { color: #e16a18; } .member-visit-button { width: 100%; min-height: 46px; margin-top: 14px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .55); background: #fff; color: #315a9f; font-size: 1rem; } .member-home-card, .member-account-card { border-radius: 15px; background: #fff; box-shadow: 0 6px 16px rgba(34,55,90,.06); } .member-home-card { display: grid; gap: 8px; padding: 18px; color: #64748b; font-size: .84rem; } .member-visit-count-title { display: grid; gap: 3px; } .member-visit-count-title small { color: #94a3b8; font-size: .65rem; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; } .member-home-card strong { color: #14213d; font-size: 1.05rem; } .member-account-card { padding: 20px; } .member-account-card h2 { margin: 0 0 15px; font-size: 1rem; } .member-account-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .member-account-heading h2 { margin: 0 0 15px; } .member-edit-button { width: auto; min-height: 34px; margin: -4px 0 10px; padding: 0 12px; background: #eef3fb; color: #315a9f; font-size: .82rem; } .member-account-card > div:not(.member-account-heading) { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #edf0f4; color: #64748b; font-size: .88rem; } .member-account-card strong { color: #14213d; } #memberHomeScreen { gap: 16px; } #memberHomeHeader { padding: 8px 4px 2px; } #memberHomeHeader h1 { margin: 7px 0 4px; font-size: clamp(1.45rem, 5vw, 1.8rem); letter-spacing: -.04em; } #memberHomeScreen .member-welcome-card { display: block; padding: 22px; border: 1px solid rgba(49,90,159,.18); border-radius: 22px; background: rgba(255,255,255,.84); box-shadow: 0 10px 28px rgba(39,65,103,.08); } #memberHomeScreen .member-membership-heading { margin-bottom: 18px; } #memberHomeScreen .member-welcome-card > div { min-width: 0; } #memberHomeScreen .member-rating-badge, #memberHomeScreen .relationship-badge { min-height: 34px; padding: 6px 11px; } #memberHomeScreen .member-welcome-body > .eyebrow { display: block; margin-bottom: 12px; } #memberHomeScreen .member-welcome-card h2 { margin: 0 0 6px; font-size: 1.15rem; } #memberHomeScreen .member-welcome-card p { margin: 0; } #memberHomeScreen .member-visit-button { margin-top: 18px; border-color: #315a9f; background: #315a9f; color: #fff; box-shadow: 0 8px 18px rgba(49,90,159,.2); } #memberHomeScreen .daily-fortune-button, #memberHomeScreen .game-world-button { margin: 0; min-height: 58px; border-radius: 16px; } #memberHomeScreen .member-info-grid { gap: 14px; } #memberHomeScreen .member-home-card, #memberHomeScreen .member-account-card { border: 1px solid rgba(49,90,159,.14); border-radius: 18px; box-shadow: 0 8px 22px rgba(39,65,103,.06); } html[data-theme="light"] #memberHomeScreen { background: radial-gradient(circle at 100% 0, rgba(111,139,220,.1), transparent 38%), radial-gradient(circle at 0 100%, rgba(95,196,164,.08), transparent 40%); } html[data-theme="light"] #memberHomeHeader { border-bottom: 1px solid rgba(49,90,159,.1); } html[data-theme="light"] #memberHomeScreen .member-welcome-card { border-color: rgba(102,132,194,.24); background: rgba(255,255,255,.88); box-shadow: 0 12px 30px rgba(56,85,130,.1); backdrop-filter: blur(10px); } html[data-theme="light"] #memberHomeScreen .member-welcome-card { color: #14213d; } html[data-theme="light"] #memberHomeScreen .member-welcome-card .eyebrow { color: #315a9f; } html[data-theme="light"] #memberHomeScreen .member-welcome-card h2 { color: #14213d; } html[data-theme="light"] #memberHomeScreen .member-welcome-card p { color: #64748b; } html[data-theme="light"] #memberHomeScreen .member-rating-badge { border-color: #cbdcf7; background: #eef4ff; color: #315a9f; } html[data-theme="light"] #memberHomeScreen .member-rating-badge small, html[data-theme="light"] #memberHomeScreen .member-rating-badge .badge-chevron { color: #315a9f; } html[data-theme="light"] #memberHomeScreen .daily-fortune-button { border-color: #ead7a0; background: linear-gradient(105deg, #fff8df, #fffdf5); color: #765a13; } html[data-theme="light"] #memberHomeScreen .game-world-button { border-color: #c4d6f3; background: linear-gradient(105deg, #eef4ff, #f9fbff); color: #244f93; } html[data-theme="light"] #memberHomeScreen .member-home-card, html[data-theme="light"] #memberHomeScreen .member-account-card { border-color: rgba(102,132,194,.2); background: rgba(255,255,255,.9); } .my-rating-card { display: grid; gap: 5px; padding: 20px; border-radius: 15px; background: linear-gradient(135deg, #fff6d8, #fff); box-shadow: 0 6px 16px rgba(34,55,90,.06); } .my-rating-card > span, .my-rating-card p { color: #7c6540; font-size: .84rem; } .my-rating-card strong { color: #9a6500; font-size: 2rem; line-height: 1.1; } .my-rating-card strong small { color: #9a6500; font-size: .9rem; } .my-rating-card p { margin: 0; } .rating-members-list { min-height: 0; } .rating-member-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #edf0f4; } .rating-member-item:last-child { border-bottom: 0; } .rating-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rating-member-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; } .rating-member-name-row .relationship-badge { min-height: 24px; max-width: 118px; padding: 3px 8px; font-size: .68rem; } .rating-average { display: grid; justify-items: end; gap: 3px; color: #9a6500; font-size: .76rem; } .rating-average strong { font-size: 1.08rem; } .rating-controls { display: grid; grid-template-columns: repeat(5, 24px) auto; align-items: center; gap: 3px; } .rating-star { width: 24px; min-height: 32px; padding: 0; border-radius: 0; background: transparent; color: #cbd5e1; font-size: 1.35rem; line-height: 1; } .rating-star.active { color: #f59e0b; } .give-rating-button { width: auto; min-height: 34px; margin-left: 7px; padding: 0 10px; font-size: .78rem; } .relationship-dating-fields { display: grid; gap: 10px; } .relationship-field-label { font-size: .92rem; font-weight: 700; } .relationship-type-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .relationship-type-option { display: block; cursor: pointer; } .relationship-type-option input { position: absolute; width: 1px; height: 1px; opacity: 0; } .relationship-type-option span { display: grid; min-height: 46px; place-items: center; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: #64748b; font-size: .9rem; font-weight: 700; } .relationship-type-option input:checked + span { border-color: #315a9f; background: #eef3fb; color: #315a9f; } .game-filter { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 8px; } .game-filter label { font-size: .78rem; } .game-filter select, .game-filter input { padding: 10px; } .game-filter button { min-height: 42px; padding: 0 15px; } .mummy-search-form { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto; } .star-rating-input { display: flex; align-items: center; gap: 4px; min-height: 42px; } .star-rating-input .rating-star { width: 36px; min-height: 36px; padding: 0; border: 0; background: transparent; color: #cbd5e1; font-size: 1.7rem; line-height: 1; } .star-rating-input .rating-star.active { color: #e3a72f; } .mummy-rating-button { flex: 0 0 92px; width: 92px; } .mummy-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; } .mummy-series-name { color: #64748b; font-size: .78rem; font-weight: 700; } .games-list-with-index { position: relative; } .games-list { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; overflow-anchor: none; } .game-consonant-index { position: fixed; z-index: 20; top: 50%; right: max(10px, env(safe-area-inset-right)); width: 34px; padding: 9px 3px; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 5px 18px rgba(20,33,61,.18); opacity: 0; pointer-events: none; touch-action: none; transform: translateY(-50%) scale(.94); transition: opacity .18s ease, transform .18s ease; } .game-consonant-index.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); } .game-consonant-index.is-dragging { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); } .game-initial-preview { position: absolute; top: 50%; left: -54px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #c6d5ed; border-radius: 50%; background: #315a9f; color: #fff; font-size: 1.45rem; font-weight: 900; line-height: 1; opacity: 0; transform: translateY(-50%) scale(.8); transition: opacity .12s ease, transform .12s ease; } .game-consonant-index.is-dragging .game-initial-preview { opacity: 1; transform: translateY(-50%) scale(1); } .game-consonant-scroll { display: grid; gap: 1px; } .game-consonant-scroll span { display: grid; place-items: center; width: 28px; min-height: 25px; color: #52647e; font-size: .68rem; font-weight: 800; line-height: 1; cursor: grab; touch-action: none; user-select: none; } .game-consonant-scroll span:hover, .game-consonant-scroll span:focus-visible { color: #315a9f; outline: none; } .game-consonant-scroll span.active { color: #315a9f; font-size: 1.15rem; font-weight: 900; } .game-consonant-scroll span:active { cursor: grabbing; } .game-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; border-bottom: 1px solid #edf0f4; content-visibility: auto; contain-intrinsic-size: 0 76px; } .games-list .game-item { content-visibility: visible; contain-intrinsic-size: 0 0; } .game-item-editable .game-item-info { cursor: pointer; } .game-item:last-child { border-bottom: 0; } .game-item:has([data-board-game-select]:checked) { background: #f3f7ff; } .game-item-info { display: grid; flex: 1 1 auto; gap: 4px; min-width: 0; } .game-item-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .othello-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#315a9f,#1e3a68); color:#fff; font-size:1.7rem; box-shadow:inset 0 0 0 3px rgba(255,255,255,.22); } .othello-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); gap:2px; width:100%; max-width:520px; box-sizing:border-box; margin:18px auto 0; padding:6px; border-radius:10px; background:#356b43; box-shadow:0 8px 20px rgba(20,33,61,.18); overflow:hidden; } .othello-cell { aspect-ratio:1; min-height:0; padding:0; border:0; border-radius:0; background:#4d9a58; cursor:pointer; display:grid; place-items:center; } .othello-cell { box-shadow: inset 0 0 0 1px rgba(20,70,35,.38); } .othello-cell.last-move { position: relative; z-index: 1; box-shadow: inset 0 0 0 3px #e14b3f, 0 0 0 1px #e14b3f; } .othello-cell.last-move .othello-stone { outline: 2px solid #e14b3f; outline-offset: 2px; } .othello-cell:disabled { opacity:1; cursor:default; } .othello-stone { display:block; width:78%; aspect-ratio:1; border-radius:50%; background:#101820; box-shadow:inset -3px -4px 5px rgba(0,0,0,.35),2px 2px 3px rgba(0,0,0,.25); } .othello-stone.white { background:#f8fafc; box-shadow:inset -3px -4px 5px rgba(0,0,0,.18),2px 2px 3px rgba(0,0,0,.2); } @media (max-width:480px){ .othello-board{width:100%;gap:1px;padding:4px;} .othello-game-room .omok-game-actions{display:grid;grid-template-columns:1fr;gap:7px;} .othello-game-room .omok-players{gap:6px;} .othello-game-room{padding:12px;} } html[data-theme="dark"] .othello-board { background:#1e5a35; box-shadow:none; } html[data-theme="dark"] .othello-cell { background:#317d45; box-shadow:inset 0 0 0 1px rgba(190,240,200,.22); } .game-favorite-toggle { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #aab7c9; font-size: 1.65rem; line-height: 1; } .game-favorite-toggle.active { background: transparent; color: #e3a72f; } .game-favorite-toggle:disabled { opacity: .55; } .game-category { color: #64748b; font-size: .8rem; } .game-expansion-label { color: #9a5a00; font-size: .77rem; font-weight: 700; } .game-expansion-check { display: flex; align-items: center; gap: 8px; min-height: 24px; color: #334155; font-size: .92rem; } .game-expansion-check input { width: 18px; height: 18px; margin: 0; accent-color: #315a9f; } .favorite-game-button { flex: 0 0 92px; width: 92px; min-height: 36px; padding: 0 8px; white-space: nowrap; background: #eef3fb; color: #315a9f; } .favorite-game-button.active { background: #315a9f; color: #fff; } .game-preference-actions { display: flex; flex: 0 0 auto; gap: 6px; } .game-preference-actions .favorite-game-button { flex-basis: 58px; width: 58px; } .favorite-game-button.dislike { color: #a33a47; background: #fff0f1; } .favorite-game-button.dislike.active { color: #fff; background: #b84755; } .rulemaster-game-button { box-sizing: border-box; flex: 0 0 100px; width: 100px; min-width: 100px; padding: 0 8px; text-align: center; line-height: 1.2; font-size: .86rem; font-weight: 800; white-space: nowrap; } .game-preference-badge { flex: 0 0 auto; border-radius: 999px; padding: 6px 9px; background: #e9f0fc; color: #315a9f; font-size: .76rem; font-weight: 700; } .game-preference-badge.dislike { background: #fff0f1; color: #a33a47; } /* Board-game directory cards: match the member-home glass/card language without changing list markup or interaction behavior. */ #gamesScreen .game-filter, #rulemasterGamesScreen .game-filter, #otherFavoriteGamesScreen .other-favorite-search { padding: 14px; border: 1px solid rgba(49,90,159,.14); border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: 0 8px 22px rgba(20,33,61,.06); } #gamesScreen .games-actions { gap: 8px; } #gamesScreen .games-actions .secondary-button { border-radius: 999px; font-weight: 800; } #gamesScreen .games-list, #rulemasterGamesScreen .games-list, #otherFavoriteGamesScreen .games-list { display: grid; gap: 10px; overflow: visible; border: 0; background: transparent; } #gamesScreen .game-item, #rulemasterGamesScreen .game-item, #otherFavoriteGamesScreen .game-item { min-height: 78px; box-sizing: border-box; border: 1px solid rgba(49,90,159,.14); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 7px 18px rgba(20,33,61,.07); content-visibility: visible; contain-intrinsic-size: 0 0; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } #gamesScreen .game-item:last-child, #rulemasterGamesScreen .game-item:last-child, #otherFavoriteGamesScreen .game-item:last-child { border-bottom: 1px solid rgba(49,90,159,.14); } #gamesScreen .game-item:hover, #gamesScreen .game-item:focus-within, #rulemasterGamesScreen .game-item:hover, #rulemasterGamesScreen .game-item:focus-within, #otherFavoriteGamesScreen .game-item:hover, #otherFavoriteGamesScreen .game-item:focus-within { transform: translateY(-1px); border-color: rgba(49,90,159,.34); box-shadow: 0 10px 24px rgba(49,90,159,.13); } #gamesScreen .game-item:has([data-board-game-select]:checked) { border-color: rgba(49,90,159,.5); background: #f3f7ff; } #gamesScreen .game-item-info, #rulemasterGamesScreen .game-item-info, #otherFavoriteGamesScreen .game-item-info { gap: 5px; } #gamesScreen .game-item-info strong, #rulemasterGamesScreen .game-item-info strong, #otherFavoriteGamesScreen .game-item-info strong { font-size: .98rem; letter-spacing: -.01em; } #gamesScreen .game-category, #rulemasterGamesScreen .game-category, #otherFavoriteGamesScreen .game-category { font-size: .77rem; } #gamesScreen .game-record-button, #gamesScreen .favorite-game-button, #rulemasterGamesScreen .rulemaster-game-button, #otherFavoriteGamesScreen .favorite-game-button { border-radius: 999px; font-weight: 800; box-shadow: none; } #rulemasterGamesScreen .rulemaster-badges { gap: 5px; } #rulemasterGamesScreen .rulemaster-label, #rulemasterGamesScreen .rulemaster-nickname { border-radius: 999px; padding: 5px 8px; } .admins-list { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; } .admin-section { display: grid; gap: 10px; } .admin-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; } .admin-section-heading h3 { margin: 0; font-size: 1rem; } .section-count, .admin-role { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #eef3fb; color: #315a9f; font-size: .75rem; font-weight: 800; } .admin-role.super { background: #fff1cf; color: #9a6500; } .admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #64748b; font-size: .84rem; } .admin-toolbar select { width: auto; min-height: 36px; padding: 0 8px; font-size: .82rem; } .role-change-button { width: auto; min-height: 36px; padding: 0 12px; } .admin-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border-bottom: 1px solid #edf0f4; } .admin-item:has([data-admin-select]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; } .admin-item:has(input:checked) { background: #f3f7ff; } .admin-item:last-child { border-bottom: 0; } .admin-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .admin-date { margin-top: 5px; color: #64748b; font-size: .8rem; line-height: 1.45; word-break: keep-all; } .approve-button { width: auto; min-height: 38px; flex: 0 0 auto; padding: 0 13px; background: #2d8a58; } .admin-actions { display: flex; flex: 0 0 auto; gap: 6px; } .reject-button { width: auto; min-height: 38px; padding: 0 13px; background: #f1e5e5; color: #b43b3b; } .pricing-heading { align-items: flex-start; } .pricing-heading h2 { margin: 4px 0; } .pricing-heading p { margin: 0; color: #64748b; font-size: .9rem; } .info-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0; padding: 5px; border-radius: 12px; background: #eef3fb; } .info-tab { min-height: 40px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: #64748b; font-size: .82rem; font-weight: 800; cursor: pointer; } .info-tab.active { background: #315a9f; color: #fff; box-shadow: 0 3px 8px rgba(49,90,159,.18); } .member-info-panel { display: block; } .hours-card, .menu-board { padding: 20px; border: 1px solid #e1e8f3; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px rgba(34,55,90,.05); } .hours-card h3 { margin: 0 0 18px; font-size: 1.08rem; } .hours-list { display: grid; gap: 0; } .hours-list > div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid #edf0f4; } .hours-list > div:first-child { padding-top: 0; } .hours-list > div:last-child { padding-bottom: 0; border-bottom: 0; } .hours-list strong { color: #315a9f; } .hours-list span { color: #475569; } .hours-closed-notice { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 18px 16px; border: 1px solid #dce7f5; border-radius: 16px; background: #f4f8ff; color: #14213d; text-align: left; } .hours-closed-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; background: #e1ecff; font-size: 1.45rem; } .hours-closed-notice h3 { margin: 0 0 5px; font-size: 1rem; } .hours-closed-notice p { margin: 0; color: #64748b; font-size: .86rem; } .agit-location-card { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 18px 16px; border: 1px solid #dce7f5; border-radius: 16px; background: #f8fbff; color: #14213d; text-align: left; } .agit-location-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; background: #e1ecff; font-size: 1.45rem; } .agit-location-content { min-width: 0; flex: 1; } .agit-location-content > span { display: block; color: #315a9f; font-size: .7rem; font-weight: 800; letter-spacing: .08em; } .agit-location-content h3 { margin: 3px 0 4px; font-size: 1rem; } .agit-location-content p { margin: 0; color: #64748b; font-size: .86rem; line-height: 1.45; word-break: keep-all; } .agit-map-link { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; margin-top: 11px; padding: 0 11px; border-radius: 8px; background: #315a9f; color: #fff; font-size: .78rem; font-weight: 800; text-decoration: none; } .admin-form-divider { margin-top: 5px; padding-top: 18px; border-top: 1px solid #e1e8f3; color: #315a9f; font-size: .9rem; font-weight: 800; } .menu-board-heading { margin-bottom: 18px; } .menu-board-heading h3 { margin: 4px 0 0; font-size: 1.25rem; } .menu-columns { display: flex; flex-direction: column; gap: 28px; } .menu-columns > div:nth-child(2) { order: -1; } .menu-columns h4 { margin: 0 0 10px; color: #315a9f; font-size: 1.2rem; letter-spacing: .08em; } .menu-columns h5 { margin: 16px 0 7px; padding-bottom: 5px; border-bottom: 2px solid #315a9f; color: #b4473d; font-size: .78rem; } .menu-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; color: #334155; font-size: .78rem; line-height: 1.35; } .menu-row span:last-child { flex: 0 0 auto; color: #475569; text-align: right; } .menu-note { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #f1c7c1; color: #b4473d; font-size: .78rem; font-weight: 700; } .admin-info-type { margin-bottom: 4px; } .admin-info-panel { display: grid; gap: 16px; } .admin-info-panel h3 { margin: 0; font-size: 1.08rem; } .admin-content-form { display: grid; gap: 14px; } .admin-content-form label { display: grid; gap: 7px; color: #14213d; font-weight: 700; } .admin-content-form textarea { min-height: 280px; resize: vertical; line-height: 1.6; } .menu-editor-columns { display: flex; flex-direction: column; gap: 22px; } .menu-editor-columns section { display: grid; gap: 10px; } .menu-editor-columns h4 { margin: 0; color: #315a9f; } .menu-add-button { min-height: 34px; padding: 0 10px; font-size: .78rem; } .menu-editor-list { display: grid; gap: 8px; } .menu-editor-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(84px, .65fr) auto auto; gap: 6px; align-items: center; } .menu-editor-drink-row { grid-template-columns: 20px minmax(0, 1fr) minmax(70px, .55fr) minmax(70px, .55fr) auto auto; } .menu-editor-row input { min-width: 0; min-height: 38px; padding: 0 9px; font-size: .82rem; } .menu-remove-button { width: auto; min-height: 34px; padding: 0 8px; font-size: .74rem; } .menu-drag-handle { color: #8794a7; cursor: grab; font-size: 1.1rem; text-align: center; } .menu-editor-row.is-dragging { opacity: .45; } .menu-recommend-button { min-height: 34px; padding: 0 8px; font-size: .72rem; white-space: nowrap; } .menu-recommend-button.active { border-color: #e4ad2f; background: #fff4cf; color: #9a6a00; box-shadow: 0 0 0 2px rgba(228,173,47,.16); } .menu-recommend-icon { display: inline-block; margin-left: 5px; padding: 2px 5px; border: 1px solid #e4ad2f; border-radius: 999px; background: #fff4cf; color: #9a6a00 !important; font-size: .62em; font-weight: 900; line-height: 1.1; white-space: nowrap; vertical-align: middle; } .member-menu-dynamic { display: grid; gap: 16px; } .member-menu-title { margin: 0 0 14px; } .member-menu-title h3 { margin: 4px 0 0; font-size: 1.25rem; } .member-info-title { margin: 0 0 14px; } .member-info-title h3 { margin: 4px 0 0; font-size: 1.25rem; } .member-info-panel[data-member-info-panel="menu"] .menu-board-heading { display: none; } .member-info-panel[data-member-info-panel="menu"] .menu-note { display: none; } .member-info-panel[data-member-info-panel="menu"] > .menu-board { display: none; } .member-menu-group { overflow: hidden; border: 1px solid #dce5f2; border-radius: 16px; background: #fff; box-shadow: 0 5px 14px rgba(34,55,90,.05); } .member-menu-group h4 { margin: 0; padding: 13px 16px; background: linear-gradient(135deg, #315a9f, #4773bb); color: #fff; font-size: 1.05rem; letter-spacing: .1em; } .member-menu-group .menu-row { min-height: 44px; align-items: center; margin: 0; padding: 9px 16px; border-bottom: 1px solid #eef2f7; font-size: .88rem; } .member-menu-group .menu-row:last-child { border-bottom: 0; } .member-menu-group .menu-row span:first-child { color: #14213d; font-weight: 700; } .member-menu-group .menu-row span:last-child { color: #315a9f; font-size: .84rem; font-weight: 800; white-space: nowrap; } .menu-price-line { display: block; } .member-info-panel[data-member-info-panel="menu"] .menu-board > .menu-columns { display: none; } .admin-price-grid .price-card { cursor: default; } .admin-price-input { display: inline-block; width: 132px; padding: 2px 4px; border: 0; border-bottom: 1px solid #cbd5e1; border-radius: 0; color: #14213d; font-size: 1.45rem; font-weight: 800; line-height: 1.2; text-align: right; } .admin-food-price { padding: 14px; border: 1px solid #e1e8f3; border-radius: 12px; background: #fff; } .admin-visit-radius { display: grid; gap: 8px; color: #14213d; font-weight: 700; } .admin-visit-radius input { margin: 0; } .current-location-info { display: grid; gap: 7px; padding: 14px; border-radius: 10px; background: #f5f8fd; color: #64748b; font-size: .82rem; } .current-location-info strong { color: #14213d; font-size: .95rem; line-height: 1.5; word-break: keep-all; } .price-grid { display: grid; gap: 12px; } .price-card { position: relative; display: grid; grid-template-columns: 94px 1fr; align-items: center; gap: 4px 14px; min-height: 104px; padding: 18px; border: 1px solid #e1e8f3; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px rgba(34, 55, 90, .05); } .price-card .price-time { grid-row: 1 / span 2; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 13px; background: #eff4fd; color: #315a9f; font-size: .98rem; font-weight: 800; } .price-card > strong { font-size: 1.6rem; letter-spacing: -.04em; } .price-card > strong span { margin-left: 2px; font-size: .92rem; letter-spacing: 0; } .price-card p { margin: 0; color: #718096; font-size: .82rem; } .price-card.featured { border: 2px solid #315a9f; background: #f9fbff; } .price-card.featured .price-time { background: #315a9f; color: #fff; } .price-badge { position: absolute; top: -10px; right: 15px; padding: 4px 8px; border-radius: 999px; background: #f2a62a; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; } .notice-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; } #memberPricingContent .price-grid + .notice-card { margin-top: 22px; } #memberPricingContent .notice-card + .notice-card { margin-top: 12px; } .notice-card-icon { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.3rem; } .notice-card h3 { margin: 0 0 4px; font-size: .98rem; } .notice-card p { margin: 0; color: #64748b; font-size: .84rem; line-height: 1.5; } .beverage-notice { background: #f2f7ff; border: 1px solid #dceafd; } .beverage-notice .notice-card-icon { background: #dceafd; } .food-notice { background: #fff8ed; border: 1px solid #f8e5c5; } .food-notice .notice-card-icon { background: #ffebc8; } .header-actions { display: flex; gap: 8px; } .title-badge-button { width: auto; min-height: 36px; padding: 0 11px; border: 0; border-radius: 999px; background: #315a9f; color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; } .room-status-map-card { overflow: hidden; border: 1px solid #dce5f2; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(34, 55, 90, .06); } .room-status-map-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid #edf1f6; } .room-status-map-heading h3 { margin: 4px 0 0; font-size: 1rem; } .room-status-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 10px; color: #66758b; font-size: .65rem; font-weight: 800; } .room-status-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .room-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #b9c3d0; } .room-legend-dot.general { background: #4d78bd; } .room-legend-dot.group { background: #d95891; } .room-status-map { position: relative; width: 100%; aspect-ratio: 441 / 713; overflow: hidden; background: #f4f7fb; } .room-status-map::before { content: ""; position: absolute; z-index: 0; inset: .4%; border: 2px solid #cbd7e7; border-radius: 12px; background: linear-gradient(90deg, transparent 24.6%, #d3deec 24.6%, #d3deec 25.2%, transparent 25.2%, transparent 74.8%, #d3deec 74.8%, #d3deec 75.4%, transparent 75.4%); } .room-status-map::after { content: "BOMIZA AGIT"; position: absolute; z-index: 0; top: 43%; left: 50%; color: #aebed2; font-size: 1rem; font-weight: 900; letter-spacing: .16em; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); } .room-status-zone { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 0; padding: 8px 5px; border: 2px solid rgba(145,158,177,.72); border-radius: 12px; background: rgba(255,255,255,.94); color: #14213d; text-align: center; box-shadow: 0 3px 10px rgba(48,71,103,.08); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .room-status-zone.is-general { border-color: #5c84c6; background: rgba(232,241,255,.78); } .room-status-zone.is-group { border-color: #d95891; background: rgba(255,234,244,.8); } .room-status-zone:hover, .room-status-zone:focus-visible { border-color: #111827; background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(17,24,39,.42); transform: scale(1.015); outline: 0; } .room-status-zone.is-selected { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 6px 18px rgba(255,255,255,.42); transform: scale(1.02); } .room-zone-name { font-size: 1.12rem; font-weight: 900; } .room-zone-meta { display: grid; justify-items: center; gap: 4px; color: #52667f; font-size: .75rem; font-weight: 700; line-height: 1.25; } .room-zone-meta .room-status-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 999px; background: #e8eef9; color: #315a9f; font-size: .68rem; font-weight: 900; white-space: nowrap; } .room-zone-meta .room-status-badge.group { background: #fbe7f0; color: #b62f75; } .room-zone-meta .room-status-badge.empty { background: #edf1f6; color: #7a8798; } .room-status-zone > * { position: relative; z-index: 1; } .room-status-zone.has-occupants::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: rgba(255,255,255,.86); pointer-events: none; animation: roomZoneSurfaceBlink 1.8s ease-in-out infinite; } .room-elapsed.is-active { animation: roomElapsedBlink 1.8s ease-in-out infinite; font-weight: 900; } @keyframes roomZoneSurfaceBlink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes roomElapsedBlink { 0%, 100% { opacity: 1; } 50% { opacity: .18; } } .room-zone-hall { top: .4%; left: 25.2%; width: 49.6%; height: 15%; } .room-zone-3 { top: .4%; right: .4%; width: 24.6%; height: 32.3%; } .room-zone-2 { top: 33.2%; right: .4%; width: 24.6%; height: 32.3%; } .room-zone-1 { top: 66%; right: .4%; width: 24.6%; height: 33.6%; } .room-zone-5 { top: .4%; left: .4%; width: 24.6%; height: 48.7%; } .room-zone-4-left { top: 49.5%; left: .4%; width: 24.6%; height: 31%; } .room-status-counter { position: absolute; z-index: 1; bottom: .4%; left: .4%; display: grid; place-content: center; width: 53.2%; height: 11.4%; border: 2px solid rgba(71,85,105,.42); background: repeating-linear-gradient(135deg, #d8e0ea 0, #d8e0ea 8px, #f8fafc 8px, #f8fafc 16px); color: #475569; text-align: center; } .room-status-counter span { font-size: 1.05rem; font-weight: 900; } .room-status-counter small { font-size: .6rem; font-weight: 700; } .room-group-count-fields { display: grid; gap: 14px; } .room-status-current-summary { margin: -8px 0 0; color: #718096; font-size: .76rem; line-height: 1.45; } .room-status-type-field { display: grid; gap: 7px; } .room-status-type-label { color: #52667f; font-size: .8rem; font-weight: 800; } .room-status-type-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 4px; border: 1px solid #d9e2ef; border-radius: 12px; background: #f2f6fb; } .room-status-type-tabs button { min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: #718096; font-size: .84rem; font-weight: 800; } .room-status-type-tabs button[aria-selected="true"] { background: #fff; color: #315a9f; box-shadow: 0 2px 8px rgba(49,90,159,.16); } .room-status-history-panel { display: grid; gap: 8px; margin-top: -3px; padding: 10px 12px; border: 1px solid #e1e8f2; border-radius: 11px; background: #f8fafd; } .room-status-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #52667f; font-size: .74rem; } .room-status-history-heading span { color: #8a98aa; font-size: .66rem; } .room-status-history-list { display: grid; gap: 6px; max-height: 150px; overflow-y: auto; } .room-status-history-list p { margin: 0; color: #8a98aa; font-size: .72rem; } .room-status-history-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #52667f; font-size: .7rem; } .room-status-history-item strong { color: #14213d; font-size: .72rem; } .room-status-history-item small { color: #8a98aa; font-size: .64rem; text-align: right; } .room-count-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; } .room-count-stepper button { min-height: 48px; padding: 0; border: 1px solid #c9d8ee; border-radius: 12px; background: #eef4ff; color: #315a9f; font-size: 1.45rem; line-height: 1; } .room-count-stepper button:active { background: #dbe8fb; transform: scale(.97); } .room-count-stepper output { display: grid; place-items: center; min-height: 48px; border: 1px solid #d8e1ee; border-radius: 12px; background: #fff; color: #14213d; font-size: 1.1rem; font-weight: 900; } .games-title-wrap { display: flex; align-items: center; gap: 8px; } .record-mode-field { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: .78rem; font-weight: 800; white-space: nowrap; } .record-mode-field select { min-height: 36px; padding: 0 28px 0 10px; font-size: .8rem; } .game-record-button { width: auto; min-height: 38px; padding: 0 14px; background: #315a9f; color: #fff; font-size: .8rem; font-weight: 800; white-space: nowrap; } .game-record-modal-content { max-width: 560px; } .game-record-modal-content #gameRecordPlayedOn { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .game-record-hall { margin: 16px 0; padding: 16px; border: 1px solid #e0e8f5; border-radius: 16px; background: #f7faff; } .game-record-hall-heading h3 { margin: 3px 0 12px; font-size: 1.05rem; } .trophy-icon { display: inline-block; margin-right: 4px; font-size: 1.05em; } .game-record-hall-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid #e5ebf4; } .game-record-hall-row:first-child { border-top: 0; } .game-record-hall-row strong { color: #315a9f; } .game-record-hall-row b { color: #14213d; } .game-record-hall-empty { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; } .game-record-match { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px; border-bottom: 1px solid #edf0f4; } .game-record-match:last-child { border-bottom: 0; } .game-record-match-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; } .game-record-match-heading span { color: var(--muted); font-size: .86rem; } .game-record-participants { display: grid; gap: 6px; margin-top: 10px; color: var(--muted); font-size: .9rem; } html[data-theme="dark"] .game-record-match { border-color: #2d394c; } .game-record-players { display: grid; gap: 10px; margin-top: 10px; } .game-record-player-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; } .game-record-player-number { color: var(--muted); font-weight: 800; text-align: center; } .record-member-field { position: relative; min-width: 0; } .record-member-field input { width: 100%; min-width: 0; } .record-winner-choice { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #315a9f; font-weight: 800; white-space: nowrap; } .record-winner-choice input { width: 18px; height: 18px; margin: 0; accent-color: #315a9f; } html[data-theme="dark"] .record-winner-choice { color: #e7edf8; } .record-member-suggestions { position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; left: 0; display: grid; max-height: 180px; overflow-y: auto; padding: 4px; border: 1px solid #d8e1ef; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(20, 33, 61, .14); } .record-member-suggestions button { padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #14213d; text-align: left; } .record-member-suggestions button:hover, .record-member-suggestions button:focus-visible { background: #eef3fb; } .record-rank-stepper { display: grid; grid-template-columns: 32px minmax(34px, 1fr) 32px; align-items: center; min-height: 44px; border: 1px solid #d8e1ef; border-radius: 9px; overflow: hidden; background: #fff; } .record-rank-stepper button { height: 100%; border: 0; background: #eef3fb; color: #315a9f; font-size: 1.15rem; font-weight: 800; } .record-rank-stepper output { color: #14213d; font-size: .84rem; font-weight: 800; text-align: center; } .record-score-input { min-width: 0; } .game-record-selectable { grid-template-columns: auto minmax(0, 1fr); } .form-section-title { display: block; margin-bottom: 2px; } html[data-theme="dark"] .game-record-player-number { color: #aebbd0; } html[data-theme="dark"] .game-record-hall { border-color: #30415a; background: #172235; } html[data-theme="dark"] .game-record-hall-row { border-color: #30415a; } html[data-theme="dark"] .game-record-hall-row b { color: #e7edf8; } html[data-theme="dark"] .record-member-suggestions, html[data-theme="dark"] .record-rank-stepper { border-color: #3a4b64; background: #182233; } html[data-theme="dark"] .record-member-suggestions button, html[data-theme="dark"] .record-rank-stepper output { color: #e7edf8; } @media (max-width: 520px) { .game-record-player-row { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } } .rulemaster-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .rulemaster-badges span { padding: 3px 7px; border-radius: 999px; background: #eef3fb; color: #315a9f; font-size: .7rem; font-weight: 800; } .rulemaster-badges .rulemaster-label { background: #315a9f; color: #fff; } .rulemaster-badges .rulemaster-nickname { background: #f3f6fb; color: #475569; } .secondary-button, .register-button { width: auto; min-height: 40px; padding: 0 14px; } .secondary-button { background: #e8eef9; color: #315a9f; } .register-button { background: #315a9f; } .member-form { display: grid; gap: 16px; } .nickname-history { min-height: 1.3em; margin: -8px 0 0; color: #64748b; font-size: .82rem; line-height: 1.5; word-break: break-word; } .readonly-member-field { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; color: #64748b; font-size: .92rem; font-weight: 700; } .readonly-member-field strong { color: #14213d; } .form-divider { height: 1px; margin: 4px 0 0; background: #e2e8f0; } .form-section-title { margin: 0 -0.1em -4px; color: #14213d; font-size: .97rem; font-weight: 800; } .form-section-title span { color: #64748b; font-size: .82rem; font-weight: 600; } .optional-label { color: #64748b; font-size: .78rem; font-weight: 500; } .form-field { display: grid; gap: 6px; } .field-message { min-height: 1.2em; margin: 0; color: #b42318; font-size: .82rem; line-height: 1.4; } .join-request-content { display: flex; flex-direction: column; max-height: min(88vh, calc(100dvh - env(safe-area-inset-top) - 12px)); padding: 0; overflow: hidden; } .join-request-content .modal-header { flex: 0 0 auto; margin: 0; padding: 20px 16px; border-bottom: 1px solid #edf0f4; background: #fff; } .join-request-body { overflow-y: auto; padding: 20px 16px 24px; } .join-request-body .help-text { margin: 0 0 20px; } .join-request-body .member-form { gap: 18px; } .join-request-body .form-field { gap: 7px; } .join-request-body .field-message { min-height: 0; } .join-request-body .field-message:empty { display: none; } .join-request-body .password-help { margin: 0; } .join-request-footer { flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #edf0f4; background: #fff; } .join-request-footer button { width: 100%; } .game-modal-content { display: flex; flex-direction: column; max-height: min(88vh, calc(100dvh - env(safe-area-inset-top) - 12px)); padding: 0; overflow: hidden; } .game-modal-content .modal-header { flex: 0 0 auto; margin: 0; padding: 20px 16px; border-bottom: 1px solid #edf0f4; background: #fff; } .game-modal-body { overflow-y: auto; padding: 20px 16px 24px; } .game-modal-footer { flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #edf0f4; background: #fff; } .game-modal-footer button { width: 100%; } .address-postcode-content { display: flex; flex-direction: column; width: min(100%, 680px); height: 100dvh; max-height: none; padding: 0; overflow: hidden; border-radius: 0; } .address-postcode-content .modal-header { flex: 0 0 auto; margin: 0; padding: max(20px, calc(env(safe-area-inset-top) + 12px)) 16px 16px; border-bottom: 1px solid #edf0f4; background: #fff; } .address-postcode-body { flex: 1 1 auto; min-height: 0; } .address-postcode-body > iframe { display: block; width: 100% !important; height: 100% !important; border: 0; } .location-map-content { max-height: min(88vh, calc(100dvh - env(safe-area-inset-top) - 12px), 680px); } .location-map-body { display: grid; gap: 12px; } .location-map-body .help-text { margin: 0; } .visit-map-wrap { position: relative; width: 100%; height: min(46vh, 360px); min-height: 260px; overflow: hidden; border: 1px solid #dbe5f2; border-radius: 12px; background: #edf2f7; } .visit-map { width: 100%; height: 100%; background: #edf2f7; } .visit-map-wrap.is-loading .visit-map, .visit-map-wrap.has-error .visit-map { visibility: hidden; } .visit-map-loading { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 8px; padding: 24px; background: #f6f8fc; color: #475569; text-align: center; } .visit-map-wrap.is-loading .visit-map-loading, .visit-map-wrap.has-error .visit-map-loading { display: grid; } .visit-map-loading span { width: 28px; height: 28px; border: 3px solid #d5e0f2; border-top-color: #315a9f; border-radius: 50%; animation: visit-map-spin .8s linear infinite; } .visit-map-wrap.has-error .visit-map-loading span { border-color: #f5cccc; border-top-color: #c63e3e; animation: none; } .visit-map-loading strong { color: #14213d; font-size: .95rem; } .visit-map-loading small { color: #718096; font-size: .8rem; line-height: 1.45; } .location-map-body .help-text.is-error { color: #b42318; font-weight: 600; } @keyframes visit-map-spin { to { transform: rotate(360deg); } } .visit-map-legend { display: flex; align-items: center; gap: 7px; margin: 0; color: #64748b; font-size: .78rem; } .visit-map-legend span { width: 12px; height: 12px; border: 2px solid #315a9f; border-radius: 50%; background: rgba(49,90,159,.2); } .password-help { margin: -7px 0 0; color: #64748b; font-size: .79rem; line-height: 1.45; } .message { min-height: 1.3em; margin: 0; color: #b42318; font-size: .9rem; white-space: pre-line; } .result { margin-top: 16px; padding: 14px; border-radius: 10px; background: #edf7f0; color: #176b3a; line-height: 1.55; white-space: pre-line; } .result.warning { background: #fff7e8; color: #9a5a00; } .theme-toggle { width: 100%; min-height: 42px; border: 1px solid #d9e2f0; background: #fff; color: #52667f; font-size: .84rem; } .hidden { display: none !important; } body.modal-open { position: fixed; top: var(--modal-scroll-position, 0); width: 100%; overflow: hidden; overscroll-behavior: none; } body.modal-open.omok-modal-open { position: static; top: auto; width: 100%; } .bottom-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; width: min(100%, 680px); height: calc(76px + env(safe-area-inset-bottom)); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: rgba(255, 255, 255, .96); border-top: 1px solid #e2e8f0; box-shadow: 0 -4px 18px rgba(34, 55, 90, .08); } .nav-item { height: 58px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 8px; background: transparent; color: #778396; font-size: .7rem; font-weight: 600; } .bottom-nav [data-view="history"] { grid-column: 1; } .bottom-nav [data-view="members"] { grid-column: 2; } .bottom-nav [data-view="games"] { grid-column: 2; } .bottom-nav [data-view="home"] { grid-column: 3; } .bottom-nav [data-view="pricing"] { grid-column: 4; } #adminsNav, #managerLogoutNav { grid-column: 5; grid-row: 1; } .nav-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .nav-item.active { color: #315a9f; font-weight: 800; } .scroll-top-button { position: fixed; z-index: 11; right: max(16px, calc((100vw - 680px) / 2 + 16px)); bottom: calc(92px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 5px; width: auto; min-height: 38px; padding: 0 12px; border: 1px solid #d7e0ee; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 5px 14px rgba(34,55,90,.16); color: #315a9f; font-size: .76rem; } .scroll-top-button.subpage { bottom: calc(20px + env(safe-area-inset-bottom)); } .scroll-top-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .modal { position: fixed; z-index: 20; inset: 0; height: 100dvh; min-height: 100dvh; display: grid; place-items: end center; overscroll-behavior: contain; } #omokRoomModal { z-index: 1000; pointer-events: auto; } #omokRoomModal .modal-content, #omokRoomModal button { pointer-events: auto; touch-action: manipulation; } #omokRoomModal .notice-content { gap: 14px; } #omokRoomModal #joinOmokRoomForm { width: auto; justify-self: stretch; } #omokRoomModal .modal-actions { gap: 10px; margin-top: 4px; } #omokRoomModal .modal-actions > button { width: 100%; min-height: 48px; } .modal-backdrop { position: absolute; z-index: 0; inset: 0; background: rgba(15, 23, 42, .5); } .modal-content { position: relative; z-index: 1; width: min(100%, 680px); max-height: min(88vh, calc(100dvh - env(safe-area-inset-top) - 12px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -12px 40px rgba(15, 23, 42, .2); } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .modal-header h2, .notice-content h2 { margin: 0; } .close-button { width: 36px; min-height: 36px; padding: 0; border-radius: 50%; background: #eef2f7; color: #475569; font-size: 1.7rem; font-weight: 400; } .notice-content { display: grid; justify-items: center; gap: 12px; padding: 34px 16px; text-align: center; } .notice-content p { margin: 0 0 8px; color: #64748b; } .notice-content button { width: 100%; } .notice-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #e8eef9; color: #315a9f; font-size: 1.65rem; } .delete-modal-content { display: grid; justify-items: center; gap: 13px; padding: 34px 16px; text-align: center; } .delete-modal-content h2 { margin: 0; } .delete-modal-content p { margin: 0; color: #64748b; line-height: 1.5; } .delete-modal-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fee8e8; color: #c63e3e; font-size: 1.35rem; font-weight: 800; } .modal-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; margin-top: 9px; } .modal-actions .secondary-button, .modal-actions .delete-button { width: 100%; min-height: 46px; } html[data-theme="dark"] { color-scheme: dark; color: #edf2fa; background: #101520; } html[data-theme="light"] { color-scheme: light; forced-color-adjust: none; } html[data-theme="light"], html[data-theme="light"] body { background: #f4f7fb !important; color: #14213d !important; } html[data-theme="dark"] body { background: #101520; } html[data-theme="dark"] .auth-card, html[data-theme="dark"] .card, html[data-theme="dark"] .history-list, html[data-theme="dark"] .members-list, html[data-theme="dark"] .games-list, html[data-theme="dark"] .admins-list, html[data-theme="dark"] .member-home-card, html[data-theme="dark"] .member-account-card, html[data-theme="dark"] .price-card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .admin-food-price, html[data-theme="dark"] .current-location-info { color: #edf2fa; background: #1a2230; } html[data-theme="dark"] .checkin-nickname-suggestions { border-color: #3a485d; background: #1a2230; box-shadow: 0 10px 22px rgba(0,0,0,.3); } html[data-theme="dark"] .checkin-visit-at { color: #edf2fa; } html[data-theme="dark"] .checkin-nickname-suggestions button { border-color: #2d394c; background: #1a2230; color: #edf2fa; } html[data-theme="dark"] .checkin-nickname-suggestions button:hover, html[data-theme="dark"] .checkin-nickname-suggestions button:focus-visible { background: #25354d; color: #dce8ff; } html[data-theme="dark"] .auth-card, html[data-theme="dark"] .card, html[data-theme="dark"] .member-home-card, html[data-theme="dark"] .member-account-card, html[data-theme="dark"] .price-card { box-shadow: 0 10px 28px rgba(0,0,0,.28); } html[data-theme="dark"] .auth-card { border-color: #2f4059; background: linear-gradient(160deg, #1b2637 0%, #141d2b 100%); } html[data-theme="dark"] .auth-card::before { background: linear-gradient(135deg, rgba(91,139,216,.22), rgba(20,29,43,0)); } html[data-theme="dark"] .login-join-button { border-color: #405a80; background: #253755; color: #b9d2ff; } html[data-theme="dark"] .auth-card h1 { color: #f3f7ff; } html[data-theme="dark"] .auth-card > .description, html[data-theme="dark"] .auth-card form label { color: #b6c4d8; } html[data-theme="dark"] .auth-card form input, html[data-theme="dark"] .auth-card form select { border-color: #40516a; background: #111a29; color: #edf2fa; } html[data-theme="dark"] .auth-card form .text-button { color: #aebdd1; } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .relationship-type-option span { border-color: #3a485d; background: #131b28; color: #edf2fa; } html[data-theme="dark"] .history-item, html[data-theme="dark"] .member-list-item, html[data-theme="dark"] .game-item, html[data-theme="dark"] .rating-member-item, html[data-theme="dark"] .admin-item, html[data-theme="dark"] .member-account-card > div:not(.member-account-heading) { border-color: #2d394c; } html[data-theme="dark"] .game-consonant-index { background: rgba(24,35,55,.94); box-shadow: 0 5px 18px rgba(0,0,0,.35); } html[data-theme="dark"] .game-consonant-scroll span { color: #c3cede; } html[data-theme="dark"] .game-consonant-scroll span:hover, html[data-theme="dark"] .game-consonant-scroll span:focus-visible, html[data-theme="dark"] .game-consonant-scroll span.active { color: #9ec1ff; } html[data-theme="dark"] .game-initial-preview { border-color: #7ea4e5; background: #4b76c0; color: #fff; } html[data-theme="dark"] .app-header p, html[data-theme="dark"] .description, html[data-theme="dark"] .help-text, html[data-theme="dark"] .history-member span, html[data-theme="dark"] .history-date, html[data-theme="dark"] .member-meta, html[data-theme="dark"] .game-category, html[data-theme="dark"] .admin-date, html[data-theme="dark"] .pricing-heading p, html[data-theme="dark"] .member-home-card, html[data-theme="dark"] .current-location-info { color: #aab8cb; } html[data-theme="dark"] .info-tabs { background: #202d43; } html[data-theme="dark"] .info-tab { color: #aab8cb; } html[data-theme="dark"] .info-tab.active { color: #fff; } html[data-theme="dark"] .hours-card, html[data-theme="dark"] .menu-board { border-color: #33445e; background: #182337; } html[data-theme="dark"] .member-menu-group { border-color: #33445e; background: #182337; } html[data-theme="dark"] .member-menu-group .menu-row { border-color: #2b3950; } html[data-theme="dark"] .member-menu-group .menu-row span:first-child { color: #e7edf7; } html[data-theme="dark"] .menu-recommend-button.active { border-color: #f0bd3d; background: #4b3d1b; color: #ffd76a; } html[data-theme="dark"] .menu-recommend-icon { border-color: #f0bd3d; background: #4b3d1b; color: #ffd04f !important; } html[data-theme="dark"] .admin-content-form label { color: #e7edf7; } html[data-theme="dark"] .hours-list > div { border-color: #2b3950; } html[data-theme="dark"] .hours-list span, html[data-theme="dark"] .menu-row, html[data-theme="dark"] .menu-row span:last-child { color: #c3cede; } html[data-theme="dark"] .hours-closed-notice { border-color: #334a6b; background: #1c2b43; color: #edf3ff; } html[data-theme="dark"] .hours-closed-icon { background: #2b4164; } html[data-theme="dark"] .hours-closed-notice p { color: #aab8cb; } html[data-theme="dark"] .agit-location-card { border-color: #334a6b; background: #1c2b43; color: #edf3ff; } html[data-theme="dark"] .agit-location-icon { background: #2b4164; } html[data-theme="dark"] .agit-location-content p { color: #aab8cb; } html[data-theme="dark"] .admin-form-divider { border-color: #33445e; color: #9ec1ff; } html[data-theme="dark"] .member-home-card strong, html[data-theme="dark"] .member-account-card strong, html[data-theme="dark"] .current-location-info strong, html[data-theme="dark"] .price-card > strong, html[data-theme="dark"] .app-header, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: #f7f9fd; } html[data-theme="dark"] #memberHomeScreen { background: radial-gradient(circle at 100% 0, rgba(79,70,229,.13), transparent 38%), radial-gradient(circle at 0 100%, rgba(0,165,114,.08), transparent 40%); } html[data-theme="dark"] #memberHomeHeader { background: rgba(11,19,38,.55); border-bottom: 1px solid rgba(195,192,255,.12); } html[data-theme="dark"] #memberHomeScreen .member-welcome-card { border-color: rgba(195,192,255,.2); background: rgba(30,41,59,.72); box-shadow: 0 8px 24px rgba(0,0,0,.24); backdrop-filter: blur(12px); } html[data-theme="dark"] #memberHomeScreen .member-welcome-card h2 { color: #dae2fd; } html[data-theme="dark"] #memberHomeScreen .member-welcome-card p { color: #c7c4d8; } html[data-theme="dark"] #memberHomeScreen .member-visit-button { border-color: #c3c0ff; background: #dae2fd; color: #0b1326; box-shadow: 0 0 15px rgba(195,192,255,.16); } html[data-theme="dark"] #memberHomeScreen .member-home-card, html[data-theme="dark"] #memberHomeScreen .member-account-card { border-color: rgba(195,192,255,.16); box-shadow: 0 8px 22px rgba(0,0,0,.18); } html[data-theme="dark"] .secondary-button, html[data-theme="dark"] .back-button, html[data-theme="dark"] .member-edit-button, html[data-theme="dark"] .favorite-filter-button, html[data-theme="dark"] .theme-toggle { border-color: #3a4b65; background: #25354d; color: #dce8ff; } html[data-theme="dark"] .bottom-nav { border-color: #2d394c; background: rgba(20, 28, 41, .96); box-shadow: 0 -4px 18px rgba(0,0,0,.25); } html[data-theme="dark"] .nav-item { color: #9baac0; } html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .favorite-filter-button.active { background: #3d67ae; color: #fff; } html[data-theme="dark"] .favorite-filter-button.dislike.active, html[data-theme="dark"] .favorite-game-button.dislike.active { background: #a94a58; color: #fff; } html[data-theme="dark"] .favorite-game-button.dislike, html[data-theme="dark"] .game-preference-badge.dislike { background: #48252d; color: #ffc5cc; } html[data-theme="dark"] .game-favorite-toggle { background: transparent; color: #7184a2; } html[data-theme="dark"] .game-favorite-toggle.active { background: transparent; color: #f3c451; } html[data-theme="dark"] .game-preference-badge { background: #243a60; color: #cfe0ff; } html[data-theme="dark"] #gamesScreen .game-filter, html[data-theme="dark"] #rulemasterGamesScreen .game-filter, html[data-theme="dark"] #otherFavoriteGamesScreen .other-favorite-search { border-color: rgba(195,192,255,.16); background: rgba(30,41,59,.62); box-shadow: 0 8px 22px rgba(0,0,0,.18); backdrop-filter: blur(10px); } html[data-theme="dark"] #gamesScreen .games-list, html[data-theme="dark"] #rulemasterGamesScreen .games-list, html[data-theme="dark"] #otherFavoriteGamesScreen .games-list { background: transparent; } html[data-theme="dark"] #gamesScreen .game-item, html[data-theme="dark"] #rulemasterGamesScreen .game-item, html[data-theme="dark"] #otherFavoriteGamesScreen .game-item { border-color: rgba(195,192,255,.16); background: rgba(30,41,59,.72); box-shadow: 0 8px 22px rgba(0,0,0,.2); backdrop-filter: blur(10px); } html[data-theme="dark"] #gamesScreen .game-item:last-child, html[data-theme="dark"] #rulemasterGamesScreen .game-item:last-child, html[data-theme="dark"] #otherFavoriteGamesScreen .game-item:last-child { border-bottom-color: rgba(195,192,255,.16); } html[data-theme="dark"] #gamesScreen .game-item:hover, html[data-theme="dark"] #gamesScreen .game-item:focus-within, html[data-theme="dark"] #rulemasterGamesScreen .game-item:hover, html[data-theme="dark"] #rulemasterGamesScreen .game-item:focus-within, html[data-theme="dark"] #otherFavoriteGamesScreen .game-item:hover, html[data-theme="dark"] #otherFavoriteGamesScreen .game-item:focus-within { border-color: rgba(158,193,255,.55); box-shadow: 0 10px 26px rgba(20,33,61,.4); } html[data-theme="dark"] #gamesScreen .game-item:has([data-board-game-select]:checked) { border-color: rgba(158,193,255,.65); background: rgba(50,76,120,.62); } html[data-theme="light"] #gamesScreen, html[data-theme="light"] #rulemasterGamesScreen, html[data-theme="light"] #otherFavoriteGamesScreen { background: radial-gradient(circle at 100% 0, rgba(49,90,159,.06), transparent 38%), radial-gradient(circle at 0 100%, rgba(0,165,114,.045), transparent 40%); } html[data-theme="light"] #gamesScreen #gamesActions .secondary-button { min-height: 46px; border: 1px solid #b8cbed; border-radius: 14px; background: linear-gradient(135deg, #f7faff 0%, #e8f0ff 100%); color: #234f91; box-shadow: 0 5px 14px rgba(49,90,159,.1); font-size: .9rem; font-weight: 800; } html[data-theme="light"] #gamesScreen #gamesActions .secondary-button:first-child { border-color: #315a9f; background: linear-gradient(135deg, #315a9f 0%, #4776c0 100%); color: #fff; box-shadow: 0 7px 16px rgba(49,90,159,.22); } html[data-theme="light"] #gamesScreen #gamesActions .secondary-button:hover, html[data-theme="light"] #gamesScreen #gamesActions .secondary-button:focus-visible { border-color: #315a9f; box-shadow: 0 8px 18px rgba(49,90,159,.22); transform: translateY(-1px); outline: none; } html[data-theme="light"] #gamesScreen #gamesActions .secondary-button:first-child:hover, html[data-theme="light"] #gamesScreen #gamesActions .secondary-button:first-child:focus-visible { background: linear-gradient(135deg, #284e8f 0%, #3d6caf 100%); } @media (max-width: 560px) { #gamesScreen .game-filter, #rulemasterGamesScreen .game-filter, #otherFavoriteGamesScreen .other-favorite-search { padding: 11px; } #gamesScreen .game-item, #rulemasterGamesScreen .game-item, #otherFavoriteGamesScreen .game-item { padding: 13px 12px; border-radius: 16px; } #gamesScreen .game-record-button { min-width: 78px; padding: 0 9px; font-size: .76rem; } #rulemasterGamesScreen .rulemaster-game-button { min-width: 88px; width: 88px; font-size: .78rem; } } html[data-theme="dark"] .daily-fortune-button { border-color: #735d27; background: #3c321b; color: #ffe39a; } html[data-theme="dark"] .game-world-button, html[data-theme="dark"] .word-chain-share-button { border-color: #375378; background: #1e3554; color: #cfe0ff; } html[data-theme="dark"] .game-world-item, html[data-theme="dark"] .word-chain-player-card, html[data-theme="dark"] .word-chain-form, html[data-theme="dark"] .word-chain-board { border-color: #2f3e53; background: #1a2230; color: #edf2fa; box-shadow: none; } html[data-theme="dark"] .daily-word-guess-card, html[data-theme="dark"] .daily-word-guess-form, html[data-theme="dark"] .daily-word-guess-attempts, html[data-theme="dark"] .daily-word-guess-history { border-color: #2f3e53; background: #1a2230; color: #edf2fa; box-shadow: none; } html[data-theme="dark"] .daily-word-guess-input-panel { background: #101520; } html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-input-panel { background: #101520; } html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-input { border-color: #40516a; background: #1a2638; color: #ffffff; caret-color: #ffffff; } html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-input:focus { background: #22324a; color: #ffffff; } html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-header h2 { color: #edf2fa; } html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-guide { color: #aebbd0; } html[data-theme="dark"] .daily-word-guess-heading strong, html[data-theme="dark"] .daily-word-guess-form label, html[data-theme="dark"] .daily-word-guess-section-heading h3, html[data-theme="dark"] .daily-word-guess-player strong { color: #edf2fa; } html[data-theme="dark"] .daily-word-guess-heading > span { background: #243958; color: #d2e2ff; } html[data-theme="dark"] .daily-word-guess-prompt span { border-color: #40516a; background: #151e2b; color: #9fb0c7; } html[data-theme="dark"] .daily-word-guess-player { background: #121a26; } html[data-theme="dark"] .daily-word-guess-keyboard button { border-color: #40516a; background: #253247; color: #edf2fa; } html[data-theme="dark"] .daily-word-guess-keyboard button.is-absent { border-color: #677386; background: #677386; color: #e2e8f2; } html[data-theme="dark"] .daily-word-guess-keyboard { border-color: #2f3e53; background: #1a2230; } html[data-theme="dark"] .daily-word-guess-result-share .field-message.is-success { color: #9fc4ff; } html[data-theme="dark"] .daily-word-guess-result-share .field-message.is-error { color: #ff9b9b; } @keyframes dailyWordGuessKeyboardUp { from { transform: translateY(100%); } to { transform: translateY(0); } } html[data-theme="dark"] .word-chain-records { border-color: #2f3e53; background: #1a2230; } html[data-theme="dark"] .word-chain-records h2, html[data-theme="dark"] .word-chain-record-badge b, html[data-theme="dark"] .word-chain-record-badge strong { color: #edf2fa; } html[data-theme="dark"] .word-chain-record-badge small { color: #c4d2e5; } html[data-theme="dark"] .word-chain-record-badge { background: #243958; } /* Game-world screens share the same calm, layered card language as the member home. */ #wordChainScreen, #dailyWordGuessScreen, #turtleSoupScreen, #balanceGameScreen, #mysteryGameScreen, #omokGameScreen, #othelloGameScreen { position: relative; } #wordChainScreen > section, #wordChainScreen > form, #wordChainScreen > .word-chain-board, #dailyWordGuessScreen .daily-word-guess-card, #dailyWordGuessScreen .daily-word-guess-form, #dailyWordGuessScreen .daily-word-guess-attempts, #dailyWordGuessScreen .daily-word-guess-history, #turtleSoupScreen .mystery-game-case, #balanceGameScreen .balance-game-case, #mysteryGameScreen .mystery-game-case, #omokGameScreen .omok-lobby-panel, #omokGameScreen .omok-game-room, #othelloGameScreen .omok-lobby-panel, #othelloGameScreen .omok-game-room { border: 1px solid rgba(49,90,159,.14); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 10px 26px rgba(20,33,61,.07); } #wordChainScreen .word-chain-form, #dailyWordGuessScreen .daily-word-guess-form { padding: 16px; } #wordChainScreen .word-chain-board, #dailyWordGuessScreen .daily-word-guess-attempts, #dailyWordGuessScreen .daily-word-guess-history { padding: 18px; } #turtleSoupScreen .mystery-game-case, #balanceGameScreen .balance-game-case, #mysteryGameScreen .mystery-game-case { padding: 18px; } #wordChainScreen .word-chain-input-row { gap: 8px; } #wordChainScreen .word-chain-input-row button, #dailyWordGuessScreen #dailyWordGuessSubmit, #turtleSoupScreen .turtle-soup-choice, #balanceGameScreen .balance-game-choice, #omokGameScreen .omok-game-actions button, #othelloGameScreen .omok-game-actions button { border-radius: 14px; } #dailyWordGuessScreen .daily-word-guess-heading, #turtleSoupScreen .mystery-game-date, #balanceGameScreen .mystery-game-date { color: #315a9f; font-weight: 800; } #turtleSoupScreen .mystery-game-case h3, #balanceGameScreen .balance-game-case h3, #mysteryGameScreen .mystery-game-case h3 { letter-spacing: -.02em; } #omokGameScreen .omok-lobby-list, #othelloGameScreen .omok-lobby-list { gap: 10px; } #omokGameScreen .omok-lobby-item, #othelloGameScreen .omok-lobby-item { border-radius: 16px; box-shadow: 0 5px 14px rgba(20,33,61,.06); } #omokGameScreen .omok-players, #othelloGameScreen .omok-players { gap: 10px; } html[data-theme="dark"] #wordChainScreen > section, html[data-theme="dark"] #wordChainScreen > form, html[data-theme="dark"] #wordChainScreen > .word-chain-board, html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-card, html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-form, html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-attempts, html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-history, html[data-theme="dark"] #turtleSoupScreen .mystery-game-case, html[data-theme="dark"] #balanceGameScreen .balance-game-case, html[data-theme="dark"] #mysteryGameScreen .mystery-game-case, html[data-theme="dark"] #omokGameScreen .omok-lobby-panel, html[data-theme="dark"] #omokGameScreen .omok-game-room, html[data-theme="dark"] #othelloGameScreen .omok-lobby-panel, html[data-theme="dark"] #othelloGameScreen .omok-game-room { border-color: rgba(195,192,255,.16); background: rgba(30,41,59,.72); box-shadow: 0 10px 26px rgba(0,0,0,.2); backdrop-filter: blur(10px); } html[data-theme="dark"] #dailyWordGuessScreen .daily-word-guess-heading, html[data-theme="dark"] #turtleSoupScreen .mystery-game-date, html[data-theme="dark"] #balanceGameScreen .mystery-game-date { color: #9ec1ff; } @media (max-width: 560px) { #turtleSoupScreen .mystery-game-case, #balanceGameScreen .balance-game-case, #mysteryGameScreen .mystery-game-case, #wordChainScreen .word-chain-form, #dailyWordGuessScreen .daily-word-guess-attempts, #dailyWordGuessScreen .daily-word-guess-history { padding: 14px; border-radius: 18px; } } html[data-theme="dark"] .word-chain-record-badge.rank-1 { background: #5b4a25; } html[data-theme="dark"] .word-chain-record-badge.rank-2 { background: #313b49; } html[data-theme="dark"] .word-chain-record-badge.rank-3 { background: #4a3529; } html[data-theme="dark"] .game-world-item strong, html[data-theme="dark"] .word-chain-form > label, html[data-theme="dark"] .word-chain-input-heading label, html[data-theme="dark"] .word-chain-entry strong { color: #edf2fa; } html[data-theme="dark"] .stop-challenge-menu-badge { border-color: #63313b; background: #3d2028; color: #ffadb3; } html[data-theme="dark"] .stop-challenge-menu-badge.is-rank { border-color: #765d2a; background: #3e341e; color: #ffdc87; } html[data-theme="dark"] .game-world-complete-badge { background: #214a3a; color: #8ee0b2; } html[data-theme="dark"] .game-world-complete-badge.is-in-progress { background: #243958; color: #a9c8fa; } html[data-theme="dark"] .game-world-item small, html[data-theme="dark"] .word-chain-guide, html[data-theme="dark"] .word-chain-entry small, html[data-theme="dark"] .word-chain-entry time { color: #9bacbf; } html[data-theme="dark"] #gameWorldScreen { background: radial-gradient(circle at 100% 0, rgba(79,70,229,.13), transparent 36%), radial-gradient(circle at 0 100%, rgba(0,165,114,.08), transparent 38%); } html[data-theme="dark"] #gameWorldScreen .game-world-item { border-color: rgba(195,192,255,.2); background: rgba(30,41,59,.72); box-shadow: 0 8px 22px rgba(0,0,0,.2); backdrop-filter: blur(10px); } html[data-theme="dark"] #gameWorldScreen .game-world-item:hover, html[data-theme="dark"] #gameWorldScreen .game-world-item:focus-visible { border-color: rgba(195,192,255,.52); box-shadow: 0 0 15px rgba(195,192,255,.1) inset, 0 10px 24px rgba(0,0,0,.28); } html[data-theme="dark"] #gameWorldScreen .game-world-item-icon { border-color: rgba(195,192,255,.2); box-shadow: 0 8px 18px rgba(0,0,0,.28); } html[data-theme="dark"] .word-chain-close-button { background: #25354d; color: #dce8ff; } html[data-theme="dark"] .word-chain-entry { background: #121a26; } html[data-theme="dark"] .word-chain-entry-order { background: #253b5b; color: #d8e6ff; } html[data-theme="dark"] .game-choice-actions .secondary-button { border-color: #3a4b65; background: #25354d; color: #dce8ff; } html[data-theme="dark"] .word-chain-new-button { border-color: #375378; background: #1e3554; color: #cfe0ff; } html[data-theme="dark"] .word-chain-forbidden-button { background: #5f8fd6; color: #0f1a2b; } html[data-theme="dark"] .word-chain-forbidden-list b { background: #243a5b; color: #d9e7ff; } html[data-theme="dark"] .word-chain-forbidden-form label { color: #edf2fa; } html[data-theme="dark"] .word-chain-forbidden-form input { border-color: #40516a; background: #121a28; color: #edf2fa; } html[data-theme="dark"] .word-chain-history { border-color: #2f3e53; } html[data-theme="dark"] .word-chain-history h3, html[data-theme="dark"] .word-chain-history-entry { color: #9bacbf; } html[data-theme="dark"] .word-chain-history-round { border-color: #2f3e53; background: #121a26; } html[data-theme="dark"] .achievement-summary-card, html[data-theme="dark"] .achievement-item { border-color: #33435b; background: #1a2230; color: #edf2fa; } html[data-theme="dark"] .achievement-summary-copy em, html[data-theme="dark"] .achievement-item p { color: #aab8cb; } html[data-theme="dark"] .member-achievement-badge { border-color: #9a7b2a; background: linear-gradient(135deg, #4a3c1b, #3b321e); color: #ffe9a3; } html[data-theme="dark"] .achievement-badge-visits { border-color: #5279b1; background: #233b60; color: #cfe0ff; } html[data-theme="dark"] .achievement-badge-strategy { border-color: #7565a8; background: #352d55; color: #ded5ff; } html[data-theme="dark"] .achievement-badge-party { border-color: #a66172; background: #512b36; color: #ffd3dc; } html[data-theme="dark"] .achievement-badge-favorite { border-color: #4e927d; background: #1f473c; color: #c6f2e2; } html[data-theme="dark"] .achievement-badge-rulemaster { border-color: #9a7b2a; background: #4a3c1b; color: #ffe9a3; } html[data-theme="dark"] .achievement-badge-played { border-color: #a86f3d; background: #4a3220; color: #ffdcb9; } html[data-theme="dark"] .achievement-badge-rating_given { border-color: #4d91a4; background: #1e424d; color: #c9f1fb; } html[data-theme="dark"] .achievement-badge-rating_received { border-color: #94629c; background: #432b48; color: #f0cef4; } html[data-theme="dark"] .achievement-level-card { border-color: #33435b; background: #1a2230; } html[data-theme="dark"] .achievement-stage-detail p { color: #aab8cb; } html[data-theme="dark"] .achievement-stage-detail small { color: #8fb4f3; } html[data-theme="dark"] .achievement-stepper::before { background: #33435b; } html[data-theme="dark"] .achievement-stepper::after { background: #5d87d0; } html[data-theme="dark"] .achievement-step { border-color: #8793a7; background: #1a2230; } html[data-theme="dark"] .achievement-step.done { border-color: #5d87d0; background: #5d87d0; } html[data-theme="dark"] .achievement-progress { background: #33435b; } html[data-theme="dark"] .daily-fortune-main-card { border-color: #6d5928; background: linear-gradient(145deg, #292517, #3c321b); box-shadow: 0 8px 22px rgba(0,0,0,.28); } html[data-theme="dark"] .daily-fortune-greeting, html[data-theme="dark"] .daily-fortune-details span { color: #e4ce91; } html[data-theme="dark"] .daily-fortune-message, html[data-theme="dark"] .daily-fortune-details strong { color: #fff7de; } html[data-theme="dark"] .fortune-card-icon { background: #51421a; } html[data-theme="dark"] .daily-fortune-details article { border-color: #384459; background: #1a2230; } html[data-theme="dark"] .daily-fortune-details .fortune-card-icon { background: #243a60; } html[data-theme="dark"] .daily-fortune-details .fortune-card-icon.palette { background: #432d4c; } html[data-theme="dark"] .daily-fortune-share-button { border-color: #5d87d0; background: #3d67ae; } html[data-theme="dark"] .fortune-color.coral-pink { color: #ff9bac; }html[data-theme="dark"] .fortune-color.deep-blue { color: #9bc8ff; }html[data-theme="dark"] .fortune-color.mint { color: #7ce6cc; }html[data-theme="dark"] .fortune-color.lavender { color: #d0b7ff; }html[data-theme="dark"] .fortune-color.lemon-yellow { color: #ffe07b; }html[data-theme="dark"] .fortune-color.burgundy { color: #ff9aaa; }html[data-theme="dark"] .fortune-color.sky-blue { color: #8dd5ff; }html[data-theme="dark"] .fortune-color.olive-green { color: #c1d57c; }html[data-theme="dark"] .fortune-color.cream-beige { color: #f0c99b; }html[data-theme="dark"] .fortune-color.orange { color: #ffba7e; } html[data-theme="dark"] .price-card.featured { border-color: #6d96df; background: #1b2a43; } html[data-theme="dark"] .price-card .price-time { background: #243a60; color: #cfe0ff; } html[data-theme="dark"] .price-card.featured .price-time { background: #4b76c0; color: #fff; } html[data-theme="dark"] .price-card p { color: #afbdd0; } html[data-theme="dark"] .beverage-notice { border-color: #31517c; background: #192b45; } html[data-theme="dark"] .beverage-notice .notice-card-icon { background: #29466f; } html[data-theme="dark"] .food-notice { border-color: #745a31; background: #34291b; } html[data-theme="dark"] .food-notice .notice-card-icon { background: #5a421f; } html[data-theme="dark"] .notice-card h3, html[data-theme="dark"] .notice-card p, html[data-theme="dark"] .notice-card p strong { color: #f2f6fd; } html[data-theme="dark"] .notice-card p { color: #c1ccdb; } html[data-theme="dark"] .list-select span { border-color: #596b83; background: #172131; } html[data-theme="dark"] .list-select input:checked + span { border-color: #6d96df; background: #6d96df; } html[data-theme="dark"] .member-welcome-card { background: linear-gradient(135deg, #233d6d, #365a98); } html[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .68); } html[data-theme="dark"] .modal-content { border: 1px solid #2d3b50; box-shadow: 0 -12px 40px rgba(0,0,0,.45); } html[data-theme="dark"] .room-status-map-card { border-color: #33465f; background: #192331; } html[data-theme="dark"] .room-status-current-summary { color: #b9c7d9; } html[data-theme="dark"] .room-status-type-label { color: #c3d0e0; } html[data-theme="dark"] .room-status-type-tabs { border-color: #3a4b65; background: #131b28; } html[data-theme="dark"] .room-status-type-tabs button { color: #91a3b9; } html[data-theme="dark"] .room-status-type-tabs button[aria-selected="true"] { background: #2a4168; color: #edf3ff; box-shadow: 0 2px 8px rgba(0,0,0,.28); } html[data-theme="dark"] .room-status-history-panel { border-color: #33465f; background: #151f2d; } html[data-theme="dark"] .room-status-history-heading, html[data-theme="dark"] .room-status-history-item { color: #c3d0e0; } html[data-theme="dark"] .room-status-history-heading span, html[data-theme="dark"] .room-status-history-list p, html[data-theme="dark"] .room-status-history-item small { color: #91a3b9; } html[data-theme="dark"] .room-status-history-item strong { color: #edf3ff; } html[data-theme="dark"] .room-status-map-heading { border-color: #2d3b50; } html[data-theme="dark"] .room-status-legend { color: #b9c7d9; } html[data-theme="dark"] .room-status-map { background: #141d2a; } html[data-theme="dark"] .room-status-map::before { border-color: #40536c; background: linear-gradient(90deg, transparent 24.6%, #34465e 24.6%, #34465e 25.2%, transparent 25.2%, transparent 74.8%, #34465e 74.8%, #34465e 75.4%, transparent 75.4%); } html[data-theme="dark"] .room-status-map::after { color: #3b4c63; } html[data-theme="dark"] .room-status-zone { border-color: #5278b8; background: rgba(24,35,51,.9); color: #edf3ff; } html[data-theme="dark"] .room-status-zone.has-occupants::before { background: rgba(0,0,0,.7); } html[data-theme="dark"] .room-status-zone.is-general { border-color: #6d96df; background: rgba(37,61,99,.88); } html[data-theme="dark"] .room-status-zone.is-group { border-color: #d66a9d; background: rgba(83,39,67,.88); } html[data-theme="dark"] .room-status-zone:hover, html[data-theme="dark"] .room-status-zone:focus-visible { border-color: #fff; background: rgba(255,255,255,.14); box-shadow: 0 4px 14px rgba(255,255,255,.28); } html[data-theme="dark"] .room-status-zone.is-selected { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 6px 18px rgba(255,255,255,.32); } html[data-theme="dark"] .room-zone-meta { color: #bdcce0; } html[data-theme="dark"] .room-zone-meta .room-status-badge { background: #29446f; color: #dce9ff; } html[data-theme="dark"] .room-zone-meta .room-status-badge.group { background: #5c2948; color: #ffd0e4; } html[data-theme="dark"] .room-zone-meta .room-status-badge.empty { background: #344154; color: #c5d0df; } html[data-theme="dark"] .room-elapsed { color: #c2d1e5; } html[data-theme="dark"] .room-status-counter { border-color: #596d86; background: repeating-linear-gradient(135deg, #3b4b61 0, #3b4b61 8px, #1e2a3a 8px, #1e2a3a 16px); color: #dce7f6; } html[data-theme="dark"] .room-count-stepper button { border-color: #3d577b; background: #253c62; color: #dce9ff; } html[data-theme="dark"] .room-count-stepper output { border-color: #3a4b65; background: #131b28; color: #edf2fa; } html[data-theme="dark"] .join-request-content .modal-header, html[data-theme="dark"] .join-request-footer, html[data-theme="dark"] .game-modal-content .modal-header, html[data-theme="dark"] .game-modal-footer, html[data-theme="dark"] .address-postcode-content .modal-header { border-color: #2d394c; background: #1a2230; } html[data-theme="dark"] .join-request-body, html[data-theme="dark"] .game-modal-body { background: #1a2230; } html[data-theme="dark"] .close-button { background: #2a384d; color: #dce8ff; } html[data-theme="dark"] .notice-content p, html[data-theme="dark"] .delete-modal-content p { color: #b7c4d6; } html[data-theme="dark"] .notice-icon { background: #263d63; color: #bcd5ff; } html[data-theme="dark"] .delete-modal-icon { background: #542b34; color: #ffb7bd; } html[data-theme="dark"] .visit-map-wrap { border-color: #354860; background: #141d2a; } html[data-theme="dark"] .visit-map, html[data-theme="dark"] .visit-map-loading { background: #141d2a; } html[data-theme="dark"] .visit-map-loading { color: #c4d1e1; } html[data-theme="dark"] .visit-map-loading strong { color: #f1f5fb; } html[data-theme="dark"] .visit-map-loading small, html[data-theme="dark"] .visit-map-legend { color: #afbdd0; } html[data-theme="dark"] .visit-map-loading span { border-color: #40536c; border-top-color: #78a0e8; } html[data-theme="dark"] .relationship-type-option input:checked + span { border-color: #6d96df; background: #263d63; color: #dce8ff; } html[data-theme="dark"] .game-modal-body label, html[data-theme="dark"] .game-expansion-check, html[data-theme="dark"] .relationship-field-label { color: #edf2fa; } html[data-theme="dark"] .game-expansion-label, html[data-theme="dark"] .password-help, html[data-theme="dark"] .nickname-history { color: #b7c4d6; } html[data-theme="dark"] .form-divider { background: #344154; } html[data-theme="dark"] .form-section-title { color: #edf2fa; } html[data-theme="dark"] .form-section-title span { color: #b7c4d6; } html[data-theme="dark"] .game-expansion-check input { accent-color: #6d96df; } /* Public 끝말잇기 화면도 동일한 카드 톤을 사용합니다. */ #publicGameView > section, #publicGameView > form, #publicGameView > .word-chain-board { border: 1px solid rgba(49,90,159,.14); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 10px 26px rgba(20,33,61,.07); } #publicGameView > form, #publicGameView > .word-chain-board { padding: 18px; } html[data-theme="dark"] #publicGameView > section, html[data-theme="dark"] #publicGameView > form, html[data-theme="dark"] #publicGameView > .word-chain-board { border-color: rgba(195,192,255,.16); background: rgba(30,41,59,.72); box-shadow: 0 10px 26px rgba(0,0,0,.2); backdrop-filter: blur(10px); } @media (max-width: 700px) { .mummy-search-form { grid-template-columns: 1fr 1fr; } .mummy-search-form button { grid-column: 1 / -1; } } @media (max-width: 520px) { .page-shell { width: min(100% - 24px, 680px); padding-top: max(20px, calc(env(safe-area-inset-top) + 12px)); } .auth-card, .card { padding: 20px; } .app-header { align-items: stretch; flex-direction: column; } .header-actions { display: grid; grid-template-columns: 1fr 1fr; } .secondary-button, .register-button { width: 100%; } .screen-actions .register-button { width: 100%; } .screen-heading { align-items: end; } .screen-heading.subpage-heading { align-items: center; } .screen-heading-actions { max-width: 55%; } .screen-heading-actions .title-badge-button { font-size: .7rem; padding: 0 8px; } .pricing-heading { align-items: flex-start; } .room-status-map-heading { align-items: flex-start; flex-direction: column; } .room-status-legend { justify-content: flex-start; } .room-zone-name { font-size: .95rem; } .room-zone-meta { font-size: .64rem; } .room-zone-meta .room-status-badge { font-size: .59rem; } } @media (max-width: 480px) { .page-shell { width: 100%; padding-right: max(12px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); } .mystery-game-header { min-width: 0; } .mystery-game-header > div:first-child { min-width: 0; } .mystery-game-header h2 { overflow-wrap: anywhere; } .omok-header-actions { flex: 0 0 auto; } .omok-game-room { min-width: 0; padding: 12px; } .omok-board { width: 100%; max-width: 100%; border-width: 4px; } .omok-players { min-width: 0; } .omok-player { min-width: 0; overflow: hidden; } } @media (max-width: 680px) { .auth-card { margin-top: 5vh; } } html[data-theme="light"] #gameWorldScreen, html[data-theme="dark"] #gameWorldScreen { background: transparent; } /* 리코셰 로봇 퍼즐 */ .ricochet-game-card { display: grid; gap: 14px; padding: 16px; border: 1px solid #dfe7f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(39,65,103,.06); } .ricochet-runtime-status { display: none; margin: 0; padding: 2px 4px; background: transparent; border: 0; text-align: center; } .ricochet-runtime-status:not(:empty) { display: block; } .meetup-poll-list { display: grid; gap: 14px; margin: 16px 0; } .meetup-reset-button { width: auto; min-height: 36px; margin: 14px 0 -4px; padding: 0 12px; background: #eef3fb; color: #315a9f; font-size: .8rem; font-weight: 800; } .meetup-poll-day { display: grid; gap: 10px; min-width: 0; border: 1.5px solid #c8d8ee; border-radius: 16px; padding: 14px; background: #fbfdff; box-shadow: 0 2px 8px rgba(45,78,120,.05); } .meetup-poll-day legend { padding: 0 8px; font-weight: 800; color: #243b5a; background: #fff; border-radius: 8px; } html[data-theme="dark"] .meetup-poll-day { border-color: #4c6483; background: #1d293a; box-shadow: none; } html[data-theme="dark"] .meetup-poll-day legend { color: #dbe8fb; background: #1a2230; } html[data-theme="dark"] .meetup-reset-button { border: 1px solid #40516a; background: #243653; color: #cfe0ff; } .meetup-poll-day label { display: grid !important; grid-template-columns: minmax(0, 1fr) auto 24px !important; align-items: center !important; gap: 12px !important; width: 100% !important; box-sizing: border-box; padding: 10px 14px; border-radius: 10px; background: var(--surface-muted,#f5f8fc); cursor: pointer; } .meetup-poll-day label.has-voters { background: #edf4ff; box-shadow: inset 3px 0 #6a91cf; } .meetup-poll-day label.is-my-vote { background: #dbe9ff; box-shadow: inset 3px 0 #315a9f; } .meetup-option-text { display: block !important; width: auto !important; min-width: 0 !important; writing-mode: horizontal-tb !important; white-space: nowrap !important; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; } .meetup-poll-day label small { grid-column: 2; color: #64748b; white-space: nowrap; } .meetup-poll-day label input[type="radio"] { grid-column: 3; margin: 0; } #meetupStatusScreen { width: min(100%, 720px); max-width: 720px; margin: 0 auto; padding: 8px clamp(12px, 4vw, 24px) 32px; box-sizing: border-box; overflow-x: hidden; } #meetupStatusScreen .screen-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #meetupStatusScreen .screen-heading > .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; flex-wrap: nowrap; } #meetupStatusScreen .screen-heading > .header-actions .secondary-button { white-space: nowrap; min-width: max-content; } #meetupStatusScreen #closeMeetupStatus { width: 52px; height: 52px; min-width: 52px; min-height: 52px; padding: 0; aspect-ratio: 1 / 1; border-radius: 50%; display: inline-grid; place-items: center; line-height: 1; } #meetupStatusScreen .screen-heading h2 { margin: 0; } #meetupStatusScreen #meetupStatusMessage { margin: 6px 0 0; min-height: 1.2em; } #meetupStatusScreen .meetup-poll-list, #meetupStatusScreen #meetupEditForm { width: 100%; box-sizing: border-box; background: var(--surface,#fff); border: 1px solid var(--border,#dfe7f3); border-radius: 18px; padding: clamp(12px, 3vw, 20px); } html[data-theme="dark"] #meetupStatusScreen .meetup-poll-list, html[data-theme="dark"] #meetupStatusScreen #meetupEditForm { background: #1a2230; border-color: #3b4c66; } html[data-theme="dark"] .meetup-poll-day label.has-voters { background: #243653; box-shadow: inset 3px 0 #6f9bde; } html[data-theme="dark"] .meetup-poll-day label.is-my-vote { background: #2c4b77; box-shadow: inset 3px 0 #9bc0ff; } @media (max-width: 520px) { #meetupStatusScreen .screen-heading { align-items: center; } #meetupStatusScreen .screen-heading > .header-actions { gap: 4px; } #meetupStatusScreen .screen-heading > .header-actions .secondary-button { padding: 8px 10px; font-size: .78rem; } #meetupStatusScreen .screen-heading > div:first-child { min-width: 0; } } .meetup-edit-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; margin: 8px 0; } .meetup-edit-options { display: grid; gap: 6px; } .meetup-edit-option { display: flex; gap: 6px; } .meetup-edit-option input { flex: 1; min-width: 0; } .meetup-edit-option button, [data-meetup-option-add] { width: auto; padding: 6px 10px; } @media (max-width: 640px) { .meetup-edit-row { grid-template-columns: 1fr; } } @media (max-width: 520px) { .meetup-poll-day { border-radius: 14px; padding: 12px 10px; } .meetup-poll-day legend { font-size: .95rem; } } .ricochet-settings-panel { display: grid; gap: 5px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid #dfe7f3; border-radius: 12px; background: #f7faff; color: #526983; } .ricochet-settings-panel strong { color: #315a9f; font-size: .9rem; } .ricochet-settings-panel span { font-size: .8rem; line-height: 1.5; } .ricochet-settings-panel small { color: #315a9f; font-size: .76rem; font-weight: 700; } html[data-theme="dark"] .ricochet-settings-panel { border-color: #3b4c66; background: #202d42; color: #b4c2d5; } html[data-theme="dark"] .ricochet-settings-panel strong { color: #b7d1fa; } html[data-theme="dark"] .ricochet-settings-panel small { color: #b7d1fa; } .ricochet-game-heading { display: flex; justify-content: space-between; align-items: center; color: #315a9f; font-weight: 800; } .ricochet-board { position: relative; display: grid; grid-template-columns: repeat(16, 1fr); aspect-ratio: 1; overflow: hidden; border: 4px solid #36558a; border-radius: 8px; background: #d9e6f4; } .ricochet-board.is-syncing { pointer-events: none; } .ricochet-board.is-syncing .ricochet-cell { visibility: hidden; } .ricochet-board.is-syncing::before { content: attr(data-sync-message); position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1rem; background: #17263d; } .ricochet-board.is-syncing::after { content: "↻"; position: absolute; top: 50%; left: 50%; z-index: 21; margin-top: -1.8rem; margin-left: -.65rem; color: #fff; font-size: 1.4rem; animation: ricochet-sync-spin .8s linear infinite; } @keyframes ricochet-sync-spin { to { transform: rotate(360deg); } } .ricochet-bid-error { min-height: 1.2em; margin: 6px 0 0; color: #c43838; font-size: .82rem; font-weight: 700; } .ricochet-move-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; } .ricochet-move-modal:not(.hidden) { pointer-events: none; } .ricochet-move-modal-card { position: relative; width: min(100% - 24px, 420px); margin: 0 12px 16px; padding: 18px 16px 16px; border: 1px solid #c9d8ee; border-radius: 18px; background: var(--surface, #fff); box-shadow: 0 12px 36px rgba(20,40,70,.24); pointer-events: auto; } .ricochet-move-modal-card::before { content: "로봇을 선택한 뒤 방향을 누르면 벽이나 가장자리까지 미끄러집니다."; display: block; width: calc(100% - 58px); margin: 0 58px 14px 0; color: #70819a; font-size: .78rem; line-height: 1.45; } .ricochet-move-modal-card .ricochet-controls { margin: 0 auto; } .ricochet-modal-reset { position: absolute; top: 10px; right: 10px; z-index: 1; border: 0; border-radius: 10px; padding: 7px 10px; background: #e8eef8; color: #315d9f; font-weight: 700; cursor: pointer; } html[data-theme="dark"] .ricochet-move-modal-card { border-color: #3b4c66; background: #1a2230; } html[data-theme="dark"] .ricochet-modal-reset { background: #2b3b54; color: #d7e6ff; } html[data-theme="dark"] .ricochet-move-modal-card::before { color: #b4c2d5; } .ricochet-cell { position: relative; min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(54,85,138,.24); border-radius: 0; background: #f5f9ff; } .ricochet-cell.is-wall { background: #1a2b48; box-shadow: inset 0 0 0 2px #0d1a30, inset 0 0 0 4px #48658f; } .ricochet-cell.is-wall::before { content: ""; position: absolute; inset: 20%; border: 1px solid rgba(224,237,255,.55); border-radius: 3px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 2px, transparent 2px 5px); } .ricochet-cell.has-wall-top, .ricochet-cell.has-wall-bottom, .ricochet-cell.has-wall-left, .ricochet-cell.has-wall-right { border: 1px solid rgba(54,85,138,.24); } .ricochet-cell.has-wall-top { box-shadow: inset 0 7px 0 #182b4a, inset 0 9px 0 rgba(255,255,255,.28); } .ricochet-cell.has-wall-bottom { box-shadow: inset 0 -7px 0 #182b4a, inset 0 -9px 0 rgba(255,255,255,.28); } .ricochet-cell.has-wall-left { box-shadow: inset 7px 0 0 #182b4a, inset 9px 0 0 rgba(255,255,255,.28); } .ricochet-cell.has-wall-right { box-shadow: inset -7px 0 0 #182b4a, inset -9px 0 0 rgba(255,255,255,.28); } .ricochet-cell.has-wall-top.has-wall-left { box-shadow: inset 0 7px 0 #182b4a, inset 0 9px 0 rgba(255,255,255,.28), inset 7px 0 0 #182b4a, inset 9px 0 0 rgba(255,255,255,.28); } .ricochet-cell.has-wall-top.has-wall-right { box-shadow: inset 0 7px 0 #182b4a, inset 0 9px 0 rgba(255,255,255,.28), inset -7px 0 0 #182b4a, inset -9px 0 0 rgba(255,255,255,.28); } .ricochet-cell.has-wall-bottom.has-wall-left { box-shadow: inset 0 -7px 0 #182b4a, inset 0 -9px 0 rgba(255,255,255,.28), inset 7px 0 0 #182b4a, inset 9px 0 0 rgba(255,255,255,.28); } .ricochet-cell.has-wall-bottom.has-wall-right { box-shadow: inset 0 -7px 0 #182b4a, inset 0 -9px 0 rgba(255,255,255,.28), inset -7px 0 0 #182b4a, inset -9px 0 0 rgba(255,255,255,.28); } .ricochet-cell.is-target { --ricochet-target-color: #e24b4b; position: relative; z-index: 2; background: #fff7f7; box-shadow: inset 0 0 0 5px var(--ricochet-target-color), inset 0 0 0 8px #fff, 0 0 0 2px rgba(25,45,76,.9); outline: 2px solid #fff; outline-offset: -10px; } .ricochet-cell.is-target::before { content: ""; position: absolute; inset: 20%; z-index: 3; border: 3px dashed var(--ricochet-target-color); border-radius: 7px; background: color-mix(in srgb, var(--ricochet-target-color) 12%, transparent); box-shadow: 0 0 0 2px #fff; pointer-events: none; } .ricochet-cell.is-target.target-blue { --ricochet-target-color: #2f73c9; background: #f3f8ff; } .ricochet-cell.is-target.target-green { --ricochet-target-color: #29945f; background: #f2fbf6; } .ricochet-cell.is-target.target-yellow { --ricochet-target-color: #d69b18; background: #fffbed; } .ricochet-cell.is-target.has-wall-top { box-shadow: inset 0 7px 0 #182b4a, inset 0 9px 0 rgba(255,255,255,.28), inset 0 0 0 5px var(--ricochet-target-color), inset 0 0 0 8px #fff, 0 0 0 2px rgba(25,45,76,.9); } .ricochet-cell.is-target.has-wall-bottom { box-shadow: inset 0 -7px 0 #182b4a, inset 0 -9px 0 rgba(255,255,255,.28), inset 0 0 0 5px var(--ricochet-target-color), inset 0 0 0 8px #fff, 0 0 0 2px rgba(25,45,76,.9); } .ricochet-cell.is-target.has-wall-left { box-shadow: inset 7px 0 0 #182b4a, inset 9px 0 0 rgba(255,255,255,.28), inset 0 0 0 5px var(--ricochet-target-color), inset 0 0 0 8px #fff, 0 0 0 2px rgba(25,45,76,.9); } .ricochet-cell.is-target.has-wall-right { box-shadow: inset -7px 0 0 #182b4a, inset -9px 0 0 rgba(255,255,255,.28), inset 0 0 0 5px var(--ricochet-target-color), inset 0 0 0 8px #fff, 0 0 0 2px rgba(25,45,76,.9); } .ricochet-cell::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; transform: scale(0); transition: transform .16s ease; } .ricochet-cell.robot-red::after { background: #e34f4f; transform: scale(1); }.ricochet-cell.robot-blue::after { background: #3c75c5; transform: scale(1); }.ricochet-cell.robot-green::after { background: #38a26a; transform: scale(1); }.ricochet-cell.robot-yellow::after { background: #e3b13c; transform: scale(1); } .ricochet-cell.ricochet-path { z-index: 1; } .ricochet-cell.ricochet-path-red { box-shadow: inset 0 0 0 3px rgba(227,79,79,.8); } .ricochet-cell.ricochet-path-blue { box-shadow: inset 0 0 0 3px rgba(60,117,197,.8); } .ricochet-cell.ricochet-path-green { box-shadow: inset 0 0 0 3px rgba(56,162,106,.8); } .ricochet-cell.ricochet-path-yellow { box-shadow: inset 0 0 0 3px rgba(227,177,60,.85); } .ricochet-cell.is-selected { outline: 3px solid #172e58; outline-offset: -3px; z-index: 1; } .ricochet-controls { display: grid; justify-items: center; gap: 6px; }.ricochet-controls > div { display: flex; gap: 6px; }.ricochet-controls button { width: 44px; min-height: 40px; padding: 0; border: 1px solid #c2d3eb; border-radius: 10px; background: #edf4ff; color: #315fa5; font-size: 1.2rem; font-weight: 800; }.ricochet-help { margin: 0; color: #70819a; font-size: .78rem; text-align: center; } html[data-theme="dark"] .ricochet-game-card { border-color: #2f3e53; background: #1a2230; box-shadow: none; } html[data-theme="dark"] .ricochet-game-heading { color: #b7d1fa; } html[data-theme="dark"] .ricochet-cell { border-color: rgba(210,225,247,.2); background: #213148; } html[data-theme="dark"] .ricochet-cell.is-target { background: #4a2c36; } html[data-theme="dark"] .ricochet-cell.is-selected { outline-color: #e8f0ff; } html[data-theme="dark"] .ricochet-help { color: #b4c2d5; } /* 리코셰 로봇 공용 경매 영역 */ .ricochet-bid-panel { display: grid; gap: 8px; padding-top: 4px; } .ricochet-bid-status { margin: 0; color: #526983; font-size: .8rem; text-align: center; } .ricochet-bid-panel form { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; } .ricochet-bid-panel form > div { min-width: 0; } .ricochet-bid-panel label { display: grid; gap: 4px; color: #315a9f; font-size: .75rem; } .ricochet-bid-label { display: block; margin-bottom: 5px; color: #315a9f; font-size: .75rem; font-weight: 800; } .ricochet-bid-stepper { display: grid; grid-template-columns: 42px minmax(70px, 1fr) 42px; gap: 5px; } .ricochet-bid-stepper button { height: 54px; min-height: 54px; box-sizing: border-box; padding: 0; border: 1px solid #c2d3eb; border-radius: 9px; background: #edf4ff; color: #315fa5; font-size: 1.45rem; line-height: 1; } .ricochet-bid-stepper input { min-width: 0; height: 54px; min-height: 54px; box-sizing: border-box; padding: 6px; text-align: center; } .ricochet-bid-panel input { width: 100%; height: 54px; min-height: 54px; box-sizing: border-box; padding: 8px; } .ricochet-bid-panel form button { height: 54px; min-height: 54px; box-sizing: border-box; padding: 0 16px; } .ricochet-bid-panel form > button { width: 100%; height: 54px !important; min-height: 54px !important; align-self: stretch; margin-top: 0; line-height: 1; } .ricochet-game-card > .ricochet-help { display: none; } .ricochet-bid-list { display: flex; min-height: 44px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .ricochet-bid-list span { display: inline-flex; min-height: 36px; align-items: center; padding: 6px 14px; border: 1px solid #c2d5ef; border-radius: 999px; background: #edf4ff; color: #315a9f; font-size: .9rem; font-weight: 800; line-height: 1.2; } .ricochet-history-panel { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #dfe7f3; border-radius: 14px; background: #fff; }.ricochet-history-panel h3 { margin: 0; color: #17365f; font-size: .85rem; }.ricochet-history-panel > div { display: flex; flex-wrap: wrap; gap: 6px; }.ricochet-history-panel span { padding: 4px 8px; border-radius: 999px; background: #f1f5fb; color: #526983; font-size: .72rem; font-weight: 700; } html[data-theme="dark"] .ricochet-history-panel { border-color: #2f3e53; background: #1a2230; } html[data-theme="dark"] .ricochet-history-panel h3 { color: #edf3fc; } html[data-theme="dark"] .ricochet-history-panel span { background: #202d40; color: #c3d7f1; } .ricochet-bid-status.is-win, #ricochetRobotsStatus.is-win { color: #218654; font-weight: 800; } .ricochet-bid-status.is-fail, #ricochetRobotsStatus.is-fail { color: #d14c55; font-weight: 800; } #ricochetMoveTimer.is-move-phase { color: #e5484d; font-size: 1.18rem; font-weight: 900; animation: ricochet-move-alert 1s ease-in-out infinite; } @keyframes ricochet-move-alert { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.06); } } #ricochetRestart { display: block; width: min(100%, 260px); margin: 10px auto 0; } html[data-theme="dark"] .ricochet-bid-status { color: #b4c2d5; } html[data-theme="dark"] .ricochet-bid-list span { background: #203452; color: #c3d9fb; } @media (max-width: 380px) { .ricochet-bid-panel form { grid-template-columns: minmax(0, 1fr); } .ricochet-bid-panel form button { width: 100%; padding: 0 10px; font-size: .82rem; } } html[data-theme="dark"] .ricochet-bid-label { color: #c3d9fb; } html[data-theme="dark"] .ricochet-bid-stepper button { border-color: #3d5575; background: #202d40; color: #c3d9fb; } html[data-theme="dark"] .ricochet-bid-stepper input { border-color: #3d5575; background: #1b2738; color: #edf3fc; } html[data-theme="dark"] .ricochet-cell.has-wall-top, html[data-theme="dark"] .ricochet-cell.has-wall-bottom, html[data-theme="dark"] .ricochet-cell.has-wall-left, html[data-theme="dark"] .ricochet-cell.has-wall-right { border-color: rgba(210,225,247,.2); } html[data-theme="dark"] .ricochet-cell.has-wall-top, html[data-theme="dark"] .ricochet-cell.has-wall-bottom, html[data-theme="dark"] .ricochet-cell.has-wall-left, html[data-theme="dark"] .ricochet-cell.has-wall-right, html[data-theme="dark"] .ricochet-cell.has-wall-top.has-wall-left, html[data-theme="dark"] .ricochet-cell.has-wall-top.has-wall-right, html[data-theme="dark"] .ricochet-cell.has-wall-bottom.has-wall-left, html[data-theme="dark"] .ricochet-cell.has-wall-bottom.has-wall-right { --ricochet-wall-color: #8fb5e8; } html[data-theme="dark"] .ricochet-cell.has-wall-top { box-shadow: inset 0 5px 0 #8fb5e8; } html[data-theme="dark"] .ricochet-cell.has-wall-bottom { box-shadow: inset 0 -5px 0 #8fb5e8; } html[data-theme="dark"] .ricochet-cell.has-wall-left { box-shadow: inset 5px 0 0 #8fb5e8; } html[data-theme="dark"] .ricochet-cell.has-wall-right { box-shadow: inset -5px 0 0 #8fb5e8; } html[data-theme="dark"] .ricochet-cell.has-wall-top.has-wall-left { box-shadow: inset 0 5px 0 #8fb5e8, inset 5px 0 0 #8fb5e8; } html[data-theme="dark"] .ricochet-cell.has-wall-top.has-wall-right { box-shadow: inset 0 5px 0 #8fb5e8, inset -5px 0 0 #8fb5e8; } html[data-theme="dark"] .ricochet-cell.has-wall-bottom.has-wall-left { box-shadow: inset 0 -5px 0 #8fb5e8, inset 5px 0 0 #8fb5e8; } html[data-theme="dark"] .ricochet-cell.has-wall-bottom.has-wall-right { box-shadow: inset 0 -5px 0 #8fb5e8, inset -5px 0 0 #8fb5e8; } .ricochet-move-controls { display: grid; gap: 8px; } /* Room creation options: match the full-height form modal used by account screens. */ #roomCreateOptionsModal { align-items: stretch; justify-items: center; } #roomCreateOptionsModal .modal-content { display: flex; flex-direction: column; width: min(100%, 660px); height: 100dvh; max-height: none; box-sizing: border-box; overflow-y: auto; padding: 0 16px calc(88px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: #fff; color: #14213d; box-shadow: none; text-align: left; } #roomCreateOptionsModal .modal-header { flex: 0 0 auto; min-height: 80px; box-sizing: border-box; margin: 0 -16px; padding: max(16px, env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid #d8e1ed; } #roomCreateOptionsModal .modal-header h2 { font-size: 1.35rem; font-weight: 800; } #roomCreateOptionsModal .modal-header .close-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; border: 0; background: #eaf1fa; color: #315a9f; font-size: 1.65rem; line-height: 1; } #roomCreateOptionsModal .room-option-check { display: flex; align-items: center; gap: 10px; min-height: 54px; box-sizing: border-box; padding: 14px 0; border-bottom: 1px solid #d8e1ed; color: #243654; font-weight: 800; } #roomCreateOptionsModal .room-option-check input { width: 20px; height: 20px; margin: 0; accent-color: #3b67ad; } #roomCreateOptionsModal #roomCreatePasswordWrap { padding: 14px 0; border-bottom: 1px solid #d8e1ed; } #roomCreateOptionsModal #roomCreatePasswordWrap label { display: grid; gap: 8px; color: #243654; font-weight: 800; } #roomCreateOptionsModal input:not([type="checkbox"]) { width: 100%; min-height: 50px; box-sizing: border-box; padding: 0 13px; border: 1px solid #c6d4e6; border-radius: 9px; background: #f7f9fc; color: #14213d; font-size: 1rem; } #roomCreateOptionsModal .message { min-height: 24px; margin: 12px 0; color: #c63e3e; text-align: left; } #roomCreateOptionsModal .modal-actions { position: fixed; left: 50%; bottom: 0; z-index: 2; width: min(100%, 660px); box-sizing: border-box; transform: translateX(-50%); grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #d8e1ed; background: #fff; } #roomCreateOptionsModal .modal-actions button { min-height: 48px; border-radius: 9px; font-weight: 800; } #roomCreateOptionsModal .modal-actions .secondary-button { order: 1; background: #e8eef7; color: #315a9f; } #roomCreateOptionsModal .modal-actions #confirmRoomCreate { order: 2; background: #3968b0; color: #fff; } html[data-theme="dark"] #roomCreateOptionsModal .modal-content, html[data-theme="dark"] #roomCreateOptionsModal .modal-actions { background: #1a2230; color: #edf2fa; } html[data-theme="dark"] #roomCreateOptionsModal .modal-header, html[data-theme="dark"] #roomCreateOptionsModal .room-option-check, html[data-theme="dark"] #roomCreateOptionsModal #roomCreatePasswordWrap, html[data-theme="dark"] #roomCreateOptionsModal .modal-actions { border-color: #34445c; } html[data-theme="dark"] #roomCreateOptionsModal .room-option-check, html[data-theme="dark"] #roomCreateOptionsModal #roomCreatePasswordWrap label { color: #edf2fa; } html[data-theme="dark"] #roomCreateOptionsModal .modal-header .close-button { background: #263b59; color: #eaf2ff; } html[data-theme="dark"] #roomCreateOptionsModal input:not([type="checkbox"]) { border-color: #405572; background: #121c2b; color: #f1f5fb; } html[data-theme="dark"] #roomCreateOptionsModal .modal-actions .secondary-button { background: #263b59; color: #dce8ff; } /* Room creation opens as a compact bottom sheet, like the other in-app dialogs. */ #roomCreateOptionsModal { align-items: flex-end; } #roomCreateOptionsModal .modal-content { width: min(100%, 660px); height: auto; max-height: min(88vh, calc(100dvh - env(safe-area-inset-top) - 12px)); padding: 0 16px 16px; border: 1px solid #d8e1ed; border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(15, 23, 42, .2); } #roomCreateOptionsModal .modal-header { min-height: 68px; margin: 0 -16px 12px; padding: 12px 16px; } #roomCreateOptionsModal .modal-actions { position: static; width: auto; transform: none; margin: 12px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #d8e1ed; } html[data-theme="dark"] #roomCreateOptionsModal .modal-content { border-color: #2d3b50; box-shadow: 0 -12px 40px rgba(0,0,0,.45); } #ricochetBoard .ricochet-cell.is-target { --target-color: #e34f4f; z-index: 2; background: var(--target-color); outline: 3px solid #ff8b8b; outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.target-blue { --target-color: #3c75c5; background: var(--target-color); outline-color: #8db8ff; box-shadow: inset 0 0 0 5px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.target-green { --target-color: #38a26a; background: var(--target-color); outline-color: #8ce3ae; box-shadow: inset 0 0 0 5px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.target-yellow { --target-color: #e3b13c; background: var(--target-color); outline-color: #ffe28a; box-shadow: inset 0 0 0 5px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-top { box-shadow: inset 0 5px 0 #8fb5e8, inset 0 0 0 5px #e34f4f; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom { box-shadow: inset 0 -5px 0 #8fb5e8, inset 0 0 0 5px #e34f4f; } #ricochetBoard .ricochet-cell.is-target.has-wall-left { box-shadow: inset 5px 0 0 #8fb5e8, inset 0 0 0 5px #e34f4f; } #ricochetBoard .ricochet-cell.is-target.has-wall-right { box-shadow: inset -5px 0 0 #8fb5e8, inset 0 0 0 5px #e34f4f; } #ricochetBoard .ricochet-cell.is-target.target-blue.has-wall-top { box-shadow: inset 0 5px 0 #8fb5e8, inset 0 0 0 5px #3c75c5; } #ricochetBoard .ricochet-cell.is-target.target-blue.has-wall-bottom { box-shadow: inset 0 -5px 0 #8fb5e8, inset 0 0 0 5px #3c75c5; } #ricochetBoard .ricochet-cell.is-target.target-blue.has-wall-left { box-shadow: inset 5px 0 0 #8fb5e8, inset 0 0 0 5px #3c75c5; } #ricochetBoard .ricochet-cell.is-target.target-blue.has-wall-right { box-shadow: inset -5px 0 0 #8fb5e8, inset 0 0 0 5px #3c75c5; } #ricochetBoard .ricochet-cell.is-target.target-green.has-wall-top { box-shadow: inset 0 5px 0 #8fb5e8, inset 0 0 0 5px #38a26a; } #ricochetBoard .ricochet-cell.is-target.target-green.has-wall-bottom { box-shadow: inset 0 -5px 0 #8fb5e8, inset 0 0 0 5px #38a26a; } #ricochetBoard .ricochet-cell.is-target.target-green.has-wall-left { box-shadow: inset 5px 0 0 #8fb5e8, inset 0 0 0 5px #38a26a; } #ricochetBoard .ricochet-cell.is-target.target-green.has-wall-right { box-shadow: inset -5px 0 0 #8fb5e8, inset 0 0 0 5px #38a26a; } #ricochetBoard .ricochet-cell.is-target.target-yellow.has-wall-top { box-shadow: inset 0 5px 0 #8fb5e8, inset 0 0 0 5px #e3b13c; } #ricochetBoard .ricochet-cell.is-target.target-yellow.has-wall-bottom { box-shadow: inset 0 -5px 0 #8fb5e8, inset 0 0 0 5px #e3b13c; } #ricochetBoard .ricochet-cell.is-target.target-yellow.has-wall-left { box-shadow: inset 5px 0 0 #8fb5e8, inset 0 0 0 5px #e3b13c; } #ricochetBoard .ricochet-cell.is-target.target-yellow.has-wall-right { box-shadow: inset -5px 0 0 #8fb5e8, inset 0 0 0 5px #e3b13c; } #ricochetBoard .ricochet-cell.is-target.has-wall-top, #ricochetBoard .ricochet-cell.is-target.has-wall-bottom, #ricochetBoard .ricochet-cell.is-target.has-wall-left, #ricochetBoard .ricochet-cell.is-target.has-wall-right { border-width: 1px; } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-left { box-shadow: inset 0 5px 0 #8fb5e8, inset 5px 0 0 #8fb5e8, inset 0 0 0 5px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-right { box-shadow: inset 0 5px 0 #8fb5e8, inset -5px 0 0 #8fb5e8, inset 0 0 0 5px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-left { box-shadow: inset 0 -5px 0 #8fb5e8, inset 5px 0 0 #8fb5e8, inset 0 0 0 5px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-right { box-shadow: inset 0 -5px 0 #8fb5e8, inset -5px 0 0 #8fb5e8, inset 0 0 0 5px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-top { box-shadow: inset 0 8px 0 #8fb5e8, inset 0 0 0 3px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom { box-shadow: inset 0 -8px 0 #8fb5e8, inset 0 0 0 3px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-left { box-shadow: inset 8px 0 0 #8fb5e8, inset 0 0 0 3px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-right { box-shadow: inset -8px 0 0 #8fb5e8, inset 0 0 0 3px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-left { box-shadow: inset 0 8px 0 #8fb5e8, inset 8px 0 0 #8fb5e8, inset 0 0 0 3px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-right { box-shadow: inset 0 8px 0 #8fb5e8, inset -8px 0 0 #8fb5e8, inset 0 0 0 3px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-left { box-shadow: inset 0 -8px 0 #8fb5e8, inset 8px 0 0 #8fb5e8, inset 0 0 0 3px var(--target-color); } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-right { box-shadow: inset 0 -8px 0 #8fb5e8, inset -8px 0 0 #8fb5e8, inset 0 0 0 3px var(--target-color); } #omokGameScreen .omok-lobby-panel, #othelloGameScreen .omok-lobby-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } #ricochetBoard .ricochet-cell.has-wall-top { box-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-bottom { box-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-left { box-shadow: inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-right { box-shadow: inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-left { box-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3), inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-right { box-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3), inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-left { box-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3), inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-right { box-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3), inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.is-target { --target-color: #e34f4f; background: #fff7f7 !important; outline: 3px solid #fff !important; outline-offset: -10px; box-shadow: inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #ricochetBoard .ricochet-cell.is-target.target-blue { --target-color: #2f73c9; background: #f3f8ff !important; } #ricochetBoard .ricochet-cell.is-target.target-green { --target-color: #29945f; background: #f2fbf6 !important; } #ricochetBoard .ricochet-cell.is-target.target-yellow { --target-color: #d69b18; background: #fffbed !important; } #ricochetBoard .ricochet-cell.is-target::before { content: ""; position: absolute; inset: 20%; z-index: 3; display: block; border: 3px dashed var(--target-color); border-radius: 7px; background: transparent; box-shadow: 0 0 0 2px #fff; pointer-events: none; } #ricochetBoard .ricochet-cell.is-target.has-wall-top { box-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3), inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom { box-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3), inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-left { box-shadow: inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3), inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-right { box-shadow: inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3), inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-left { box-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3), inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3), inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-right { box-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3), inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3), inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-left { box-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3), inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3), inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-right { box-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3), inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3), inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #omokLobbyList, #othelloLobbyList { border: 0; outline: 0; background: transparent; box-shadow: none; } html[data-theme="dark"] #omokGameScreen .omok-lobby-panel, html[data-theme="dark"] #othelloGameScreen .omok-lobby-panel, html[data-theme="dark"] #omokLobbyList, html[data-theme="dark"] #othelloLobbyList { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .room-visibility-badges { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: wrap; } .room-visibility-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 999px; font-size: .67rem; font-weight: 800; line-height: 1; white-space: nowrap; } .room-visibility-badge.is-private { background: #fff0d2; color: #9a6510; } .room-visibility-badge.is-no-spectators { background: #ffe2e5; color: #b53546; } .omok-lobby-card-actions .danger-button { border-color: #e7aab2; background: #fff0f2; color: #b53546; } html[data-theme="dark"] .room-visibility-badge.is-private { background: #5a4524; color: #ffd889; } html[data-theme="dark"] .room-visibility-badge.is-no-spectators { background: #5a2935; color: #ffb8c1; } html[data-theme="dark"] .omok-lobby-card-actions .danger-button { border-color: #75404a; background: #482731; color: #ffb8c1; } /* 최종 리코셰 보드 가시성 규칙: 뒤쪽의 기존 테마 규칙보다 우선합니다. */ #ricochetBoard .ricochet-cell.has-wall-top { box-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-bottom { box-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-left { box-shadow: inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-right { box-shadow: inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-left { box-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3), inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-right { box-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3), inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-left { box-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3), inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-right { box-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3), inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3) !important; } #ricochetBoard .ricochet-cell.is-target { --target-color: #e34f4f; --target-wall-shadow: none; background: #fff7f7 !important; outline: 3px solid #fff !important; outline-offset: -10px; box-shadow: var(--target-wall-shadow), inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #192d4c !important; } #ricochetBoard .ricochet-cell.is-target.target-blue { --target-color: #2f73c9; background: #f3f8ff !important; } #ricochetBoard .ricochet-cell.is-target.target-green { --target-color: #29945f; background: #f2fbf6 !important; } #ricochetBoard .ricochet-cell.is-target.target-yellow { --target-color: #d69b18; background: #fffbed !important; } #ricochetBoard .ricochet-cell.is-target::before { content: ""; position: absolute; inset: 20%; z-index: 3; display: block; border: 3px dashed var(--target-color); border-radius: 7px; background: transparent; box-shadow: 0 0 0 2px #fff; pointer-events: none; } #ricochetBoard .ricochet-cell.is-target.has-wall-top { --target-wall-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3); } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom { --target-wall-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3); } #ricochetBoard .ricochet-cell.is-target.has-wall-left { --target-wall-shadow: inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3); } #ricochetBoard .ricochet-cell.is-target.has-wall-right { --target-wall-shadow: inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3); } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-left { --target-wall-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3), inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3); } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-right { --target-wall-shadow: inset 0 8px 0 #182b4a, inset 0 10px 0 rgba(255,255,255,.3), inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3); } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-left { --target-wall-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3), inset 8px 0 0 #182b4a, inset 10px 0 0 rgba(255,255,255,.3); } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-right { --target-wall-shadow: inset 0 -8px 0 #182b4a, inset 0 -10px 0 rgba(255,255,255,.3), inset -8px 0 0 #182b4a, inset -10px 0 0 rgba(255,255,255,.3); } /* 예시 보드처럼 따뜻한 격자판·굵은 벽·원형 목표/로봇으로 구성합니다. */ #ricochetBoard { border: 4px solid #080808; border-radius: 0; background: #d8c8a7; box-shadow: 0 4px 0 rgba(0,0,0,.18); } #ricochetBoard .ricochet-cell { border: 1px solid rgba(104,89,62,.38); background: #dfd0ae; } #ricochetBoard .ricochet-cell::before { content: ""; position: absolute; inset: 15%; z-index: 1; display: block; border: 2px solid rgba(255,250,232,.75); border-radius: 2px; background: #eee5cd; box-shadow: 0 0 0 1px rgba(164,145,105,.35); pointer-events: none; } #ricochetBoard .ricochet-cell.has-wall-top { box-shadow: inset 0 8px 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-bottom { box-shadow: inset 0 -8px 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-left { box-shadow: inset 8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-right { box-shadow: inset -8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-left { box-shadow: inset 0 8px 0 #050505, inset 8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-right { box-shadow: inset 0 8px 0 #050505, inset -8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-left { box-shadow: inset 0 -8px 0 #050505, inset 8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-right { box-shadow: inset 0 -8px 0 #050505, inset -8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.is-target { --target-color: #ef2020; background: #dfd0ae !important; outline: 0 !important; box-shadow: var(--target-wall-shadow), inset 0 0 0 1px rgba(104,89,62,.38) !important; } #ricochetBoard .ricochet-cell.is-target.target-blue { --target-color: #3479c9; background: #dfd0ae !important; } #ricochetBoard .ricochet-cell.is-target.target-green { --target-color: #15933a; background: #dfd0ae !important; } #ricochetBoard .ricochet-cell.is-target.target-yellow { --target-color: #f0d400; background: #dfd0ae !important; } #ricochetBoard .ricochet-cell.is-target::before { content: ""; position: absolute; inset: 18%; z-index: 3; display: block; border: 2px solid #080808; border-radius: 50%; background: var(--target-color); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #080808; pointer-events: none; } #ricochetBoard .ricochet-cell.robot-red::after, #ricochetBoard .ricochet-cell.robot-blue::after, #ricochetBoard .ricochet-cell.robot-green::after, #ricochetBoard .ricochet-cell.robot-yellow::after { z-index: 4; border: 2px solid #080808; box-shadow: 0 0 0 2px #fff; } #ricochetBoard .ricochet-cell.robot-red::after { background: #ef2020; } #ricochetBoard .ricochet-cell.robot-blue::after { background: #3479c9; } #ricochetBoard .ricochet-cell.robot-green::after { background: #15933a; } #ricochetBoard .ricochet-cell.robot-yellow::after { background: #f0d400; } /* 내벽은 ㄱ자 연결을 유지하되, 각 면은 평평한 직선 스트립으로 표시합니다. */ #ricochetBoard .ricochet-cell.has-wall-top.has-wall-left { box-shadow: inset 0 8px 0 #050505, inset 8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-right { box-shadow: inset 0 8px 0 #050505, inset -8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-left { box-shadow: inset 0 -8px 0 #050505, inset 8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-right { box-shadow: inset 0 -8px 0 #050505, inset -8px 0 0 #050505 !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-left { box-shadow: inset 0 8px 0 #050505, inset 8px 0 0 #050505, inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #080808 !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-right { box-shadow: inset 0 8px 0 #050505, inset -8px 0 0 #050505, inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #080808 !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-left { box-shadow: inset 0 -8px 0 #050505, inset 8px 0 0 #050505, inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #080808 !important; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-right { box-shadow: inset 0 -8px 0 #050505, inset -8px 0 0 #050505, inset 0 0 0 5px var(--target-color), inset 0 0 0 8px #fff, 0 0 0 2px #080808 !important; } /* 벽은 칸 안쪽이 아니라 칸 경계선 중앙에 걸쳐 보이게 합니다. */ #ricochetBoard .ricochet-cell.has-wall-top, #ricochetBoard .ricochet-cell.has-wall-bottom, #ricochetBoard .ricochet-cell.has-wall-left, #ricochetBoard .ricochet-cell.has-wall-right { box-shadow: none !important; } #ricochetBoard .ricochet-cell::before { content: ""; position: absolute; inset: 15%; z-index: 1; display: block; border: 2px solid rgba(255,250,232,.75); border-radius: 2px; background: #eee5cd; box-shadow: 0 0 0 1px rgba(164,145,105,.35); pointer-events: none; } #ricochetBoard .ricochet-cell.has-wall-top::before { inset: -4px -1px auto; height: 8px; border: 0; border-radius: 0; background: #050505; box-shadow: none; } #ricochetBoard .ricochet-cell.has-wall-bottom::before { inset: auto -1px -4px; height: 8px; border: 0; border-radius: 0; background: #050505; box-shadow: none; } #ricochetBoard .ricochet-cell.has-wall-left::before { inset: -1px auto -1px -4px; width: 8px; border: 0; border-radius: 0; background: #050505; box-shadow: none; } #ricochetBoard .ricochet-cell.has-wall-right::before { inset: -1px -4px -1px auto; width: 8px; border: 0; border-radius: 0; background: #050505; box-shadow: none; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-left::before { inset: 0; width: auto; height: auto; background: linear-gradient(#050505 0 0) top/100% 8px no-repeat, linear-gradient(#050505 0 0) left/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-right::before { inset: 0; width: auto; height: auto; background: linear-gradient(#050505 0 0) top/100% 8px no-repeat, linear-gradient(#050505 0 0) right/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-left::before { inset: 0; width: auto; height: auto; background: linear-gradient(#050505 0 0) bottom/100% 8px no-repeat, linear-gradient(#050505 0 0) left/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-right::before { inset: 0; width: auto; height: auto; background: linear-gradient(#050505 0 0) bottom/100% 8px no-repeat, linear-gradient(#050505 0 0) right/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target::before { inset: 18%; z-index: 3; width: auto; height: auto; border: 2px solid #080808; border-radius: 50%; background: var(--target-color); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #080808; } #ricochetBoard .ricochet-cell.is-target.has-wall-top::before, #ricochetBoard .ricochet-cell.is-target.has-wall-bottom::before, #ricochetBoard .ricochet-cell.is-target.has-wall-left::before, #ricochetBoard .ricochet-cell.is-target.has-wall-right::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; background: linear-gradient(#050505 0 0) top/100% 8px no-repeat, linear-gradient(#050505 0 0) bottom/100% 8px no-repeat, linear-gradient(#050505 0 0) left/8px 100% no-repeat, linear-gradient(#050505 0 0) right/8px 100% no-repeat; box-shadow: none; } #ricochetBoard .ricochet-cell.is-target::after { content: ""; position: absolute; inset: 18%; z-index: 4; display: block; border: 2px solid #080808; border-radius: 50%; background: var(--target-color); box-shadow: 0 0 0 2px #fff; pointer-events: none; } #ricochetBoard .ricochet-cell.is-target.has-wall-top::before { background: linear-gradient(#050505 0 0) top/100% 8px no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom::before { background: linear-gradient(#050505 0 0) bottom/100% 8px no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-left::before { background: linear-gradient(#050505 0 0) left/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-right::before { background: linear-gradient(#050505 0 0) right/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-left::before { background: linear-gradient(#050505 0 0) top/100% 8px no-repeat, linear-gradient(#050505 0 0) left/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-right::before { background: linear-gradient(#050505 0 0) top/100% 8px no-repeat, linear-gradient(#050505 0 0) right/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-left::before { background: linear-gradient(#050505 0 0) bottom/100% 8px no-repeat, linear-gradient(#050505 0 0) left/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-right::before { background: linear-gradient(#050505 0 0) bottom/100% 8px no-repeat, linear-gradient(#050505 0 0) right/8px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target:not(.has-wall-top):not(.has-wall-bottom):not(.has-wall-left):not(.has-wall-right)::before { display: none; } /* 벽은 오버레이가 아니라 칸의 맞닿는 면 자체에 그려 외벽과 빈틈없이 연결합니다. */ #ricochetBoard .ricochet-cell.has-wall-top::before, #ricochetBoard .ricochet-cell.has-wall-bottom::before, #ricochetBoard .ricochet-cell.has-wall-left::before, #ricochetBoard .ricochet-cell.has-wall-right::before { display: none !important; } #ricochetBoard .ricochet-cell.has-wall-top { border-top: 4px solid #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-bottom { border-bottom: 4px solid #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-left { border-left: 4px solid #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-right { border-right: 4px solid #050505 !important; } /* 벽을 얇은 경계선으로 정리하고 모든 칸의 바닥 패턴을 채웁니다. */ #ricochetBoard .ricochet-cell { border: 1px solid rgba(104,89,62,.28) !important; background: linear-gradient(#eee5cd 0 0) center / 70% 70% no-repeat, #dfd0ae !important; } #ricochetBoard .ricochet-cell.has-wall-top, #ricochetBoard .ricochet-cell.has-wall-bottom, #ricochetBoard .ricochet-cell.has-wall-left, #ricochetBoard .ricochet-cell.has-wall-right { border-color: transparent !important; } #ricochetBoard .ricochet-cell.has-wall-top::before { inset: -2px -1px auto; height: 5px; border: 0; background: #050505; } #ricochetBoard .ricochet-cell.has-wall-bottom::before { inset: auto -1px -2px; height: 5px; border: 0; background: #050505; } #ricochetBoard .ricochet-cell.has-wall-left::before { inset: -1px auto -1px -2px; width: 5px; border: 0; background: #050505; } #ricochetBoard .ricochet-cell.has-wall-right::before { inset: -1px -2px -1px auto; width: 5px; border: 0; background: #050505; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-left::before { inset: 0; width: auto; height: auto; background: linear-gradient(#050505 0 0) top/100% 5px no-repeat, linear-gradient(#050505 0 0) left/5px 100% no-repeat; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-right::before { inset: 0; width: auto; height: auto; background: linear-gradient(#050505 0 0) top/100% 5px no-repeat, linear-gradient(#050505 0 0) right/5px 100% no-repeat; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-left::before { inset: 0; width: auto; height: auto; background: linear-gradient(#050505 0 0) bottom/100% 5px no-repeat, linear-gradient(#050505 0 0) left/5px 100% no-repeat; } #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-right::before { inset: 0; width: auto; height: auto; background: linear-gradient(#050505 0 0) bottom/100% 5px no-repeat, linear-gradient(#050505 0 0) right/5px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-top::before { background: linear-gradient(#050505 0 0) top/100% 5px no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom::before { background: linear-gradient(#050505 0 0) bottom/100% 5px no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-left::before { background: linear-gradient(#050505 0 0) left/5px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-right::before { background: linear-gradient(#050505 0 0) right/5px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-left::before { background: linear-gradient(#050505 0 0) top/100% 5px no-repeat, linear-gradient(#050505 0 0) left/5px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-right::before { background: linear-gradient(#050505 0 0) top/100% 5px no-repeat, linear-gradient(#050505 0 0) right/5px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-left::before { background: linear-gradient(#050505 0 0) bottom/100% 5px no-repeat, linear-gradient(#050505 0 0) left/5px 100% no-repeat; } #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-right::before { background: linear-gradient(#050505 0 0) bottom/100% 5px no-repeat, linear-gradient(#050505 0 0) right/5px 100% no-repeat; } /* 16 x 16 격자의 열과 행을 동일하게 나눠 모든 칸을 정사각형으로 유지합니다. */ #ricochetBoard { grid-template-columns: repeat(16, minmax(0, 1fr)); grid-template-rows: repeat(16, minmax(0, 1fr)); } #ricochetBoard .ricochet-cell { width: 100%; height: 100%; aspect-ratio: 1 / 1; } /* 외벽 셀도 내부 바닥 패턴을 유지해 가장자리 칸이 잘려 보이지 않게 합니다. */ #ricochetBoard .ricochet-cell.has-wall-top::before, #ricochetBoard .ricochet-cell.has-wall-bottom::before, #ricochetBoard .ricochet-cell.has-wall-left::before, #ricochetBoard .ricochet-cell.has-wall-right::before { content: "" !important; inset: 15% !important; z-index: 1 !important; display: block !important; width: auto !important; height: auto !important; border: 2px solid rgba(255,250,232,.75) !important; border-radius: 2px !important; background: #eee5cd !important; box-shadow: 0 0 0 1px rgba(164,145,105,.35) !important; } #ricochetBoard .ricochet-cell.is-target::after { transform: scale(1) !important; } #ricochetBoard .ricochet-cell.is-target::after { content: "★" !important; display: grid !important; place-items: center; color: #fff; font-size: clamp(9px, 2.2vw, 15px); font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.55); } #ricochetBoard .ricochet-cell.is-target::after, #ricochetBoard .ricochet-cell.robot-red::after, #ricochetBoard .ricochet-cell.robot-blue::after, #ricochetBoard .ricochet-cell.robot-green::after, #ricochetBoard .ricochet-cell.robot-yellow::after { inset: 10% !important; } /* 최종 보정: 벽은 셀 안의 오버레이가 아니라 맞닿는 면의 얇은 검은 선입니다. */ #ricochetBoard .ricochet-cell.has-wall-top, #ricochetBoard .ricochet-cell.has-wall-bottom, #ricochetBoard .ricochet-cell.has-wall-left, #ricochetBoard .ricochet-cell.has-wall-right { box-shadow: none !important; } #ricochetBoard .ricochet-cell.has-wall-top { border-top: 4px solid #050505 !important; border-top-color: #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-bottom { border-bottom: 4px solid #050505 !important; border-bottom-color: #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-left { border-left: 4px solid #050505 !important; border-left-color: #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-right { border-right: 4px solid #050505 !important; border-right-color: #050505 !important; } #ricochetBoard .ricochet-cell.has-wall-top.has-wall-left, #ricochetBoard .ricochet-cell.has-wall-top.has-wall-right, #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-left, #ricochetBoard .ricochet-cell.has-wall-bottom.has-wall-right, #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-left, #ricochetBoard .ricochet-cell.is-target.has-wall-top.has-wall-right, #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-left, #ricochetBoard .ricochet-cell.is-target.has-wall-bottom.has-wall-right { box-shadow: none !important; }