/* The battle renderer reads these as px; registering them resolves var/env/max. */ @property --fit-left { syntax: ''; inherits: false; initial-value: 0px; } @property --fit-right { syntax: ''; inherits: false; initial-value: 0px; } @property --fit-top { syntax: ''; inherits: false; initial-value: 0px; } @property --fit-bottom { syntax: ''; inherits: false; initial-value: 0px; } /* 화면 공통 규격. 마지막에 불러온다. - 버튼은 한 높이(--btn-h)·한 모서리·한 글자 크기. 그라데이션·광택·큰 그림자 없이 단색 면과 아래쪽 한 줄 그림자만 쓴다. - 어두운 화면: 주요 = 금색, 일반 = 짙은 청록. 양피지 대화상자: 주요 = 주홍, 일반 = 미색. - 대화상자 버튼은 같은 너비. 같은 줄의 선택 버튼도 같은 너비. 전투 중 둥근 조작 버튼과 병과 카드는 이 규격 밖이다. */ /* 색: 한지 바탕(#ece3cf)에 먹선(#2a2622) 테두리, 주요 동작만 낙관 붉은색(#a23328). 선택된 항목은 먹으로 채운다. 그림자·그라데이션 없이 납작하게. */ :root { --btn-h: 44px; --btn-r: 4px; --btn-w: 150px; --btn-font: 600 15px/1.2 "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; --c-paper-btn: #ece3cf; --c-ink: #2a2622; --c-ink-line: #2a2622; --c-ink-soft: #6b6255; --c-seal: #a23328; --c-seal-edge: #6f1f17; --c-paper: #f3ecdc; --c-text: #ece3cf; } @media (max-height: 540px) { :root { --btn-h: 40px; --btn-w: 128px; } } @media (max-height: 360px) { :root { --btn-h: 38px; } } /* A finger needs 44px whatever the screen height; only a mouse gets the slimmer buttons. */ @media (pointer: coarse) { :root { --btn-h: 44px; } } /* ── 버튼 규격 ─────────────────────────────────────────── */ #game#game .menu-grid button, #game#game .dialog .dialog-actions button, #game#game .dialog .mode-list button, #game#game .dialog .setting-row, #game#game .dialog .segment button, #game#game .dialog .faction-choice, #game#game .dialog select, #game#game .campaign-actions button, #game#game .destination-commit, #game#game .destination-tabs button, #game#game .map-toggle, #game#game .decision-supply > button, #game#game.mode-campaign .topbar .icon-button { height: var(--btn-h) !important; min-height: var(--btn-h) !important; border-radius: var(--btn-r) !important; font: var(--btn-font) !important; letter-spacing: 0 !important; text-shadow: none !important; text-decoration: none !important; padding: 0 14px !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; filter: none; color: var(--c-ink) !important; background: var(--c-paper-btn) !important; border: 1px solid var(--c-ink-line) !important; box-shadow: none !important; } #game#game .menu-grid button.primary, #game#game .destination-commit, #game#game .campaign-actions .end-turn.primary, #game#game .campaign-decision > .campaign-actions button.primary, #game#game .dialog .dialog-actions button.primary, #game#game .dialog .dialog-actions button.danger { color: #fbf4e6 !important; background: var(--c-seal) !important; border-color: var(--c-seal-edge) !important; } #game#game .dialog .segment button[aria-pressed=true], #game#game .dialog .faction-choice[aria-pressed=true], #game#game .destination-tabs button[aria-pressed=true] { color: var(--c-paper-btn) !important; background: var(--c-ink) !important; border-color: var(--c-ink) !important; } #game#game button:disabled { opacity: .45; filter: none !important; } #game#game .menu-grid button:hover, #game#game .dialog button:hover, #game#game .campaign-actions button:hover, #game#game .destination-tabs button:hover { filter: brightness(.96); } /* 대화상자 버튼: 같은 너비, 오른쪽 정렬 */ #game#game .dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; } #game#game .dialog .dialog-actions > button { flex: 0 1 var(--btn-w) !important; width: var(--btn-w); min-width: 0 !important; max-width: var(--btn-w); } /* ── 대화상자 ─────────────────────────────────────────── */ #game#game .dialog { background: var(--c-paper); border: 1px solid #b89a6280; border-top-width: 1px; border-radius: 12px; box-shadow: 0 16px 48px #0a131480; } #game#game .dialog h2 { font: 700 24px/1.3 Gowun, serif; margin: 0 0 16px; letter-spacing: -.01em; } #game#game .dialog .dialog-actions { border-top: 1px solid #9e86503b; padding-top: 14px; margin-top: 16px; } @media (max-height: 540px) { #game#game .dialog { padding: 16px 22px !important; } #game#game .dialog h2 { font-size: 20px; margin-bottom: 10px; } #game#game .dialog .dialog-actions { padding-top: 10px; margin-top: 10px; } } /* ── 메인 메뉴: 제목 하나, 같은 크기의 버튼 격자 ───────── */ #game#game.mode-menu .topbar { display: none; } #game#game .overlay.menu-overlay { inset: 0; padding: 24px clamp(20px, 5vw, 72px); align-items: center; overflow: hidden; } #game#game .menu-content { width: min(1120px, 100%); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 64px); align-items: center; } #game#game .menu-title { font: 700 clamp(44px, 6vw, 76px)/1.1 Gowun, serif; letter-spacing: -.04em; color: var(--c-text); margin: 0 0 28px; } #game#game .menu-title span { color: #d6b47a; } #game#game .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(460px, 100%); } #game#game .menu-grid.fresh > button:first-child { grid-column: 1 / -1; } #game#game .menu-grid button { width: 100%; } #game#game .menu-grid .menu-stars { font-size: 13px; font-weight: 600; opacity: .75; } #game#game .menu-art { min-height: 0; height: min(520px, calc(100vh - 48px)); aspect-ratio: auto; border-radius: 12px; border: 1px solid #c5a46d40; } #game#game .menu-art-heading, #game#game .menu-art-caption { display: none !important; } #game#game .menu-standard { border-bottom: 0 !important; padding-bottom: 0 !important; } #game#game .menu-standard > strong { letter-spacing: 0; font-weight: 600; } @media (max-height: 540px) { #game#game .overlay.menu-overlay { padding: 14px 20px; } #game#game .menu-title { font-size: clamp(36px, 9vh, 52px); margin-bottom: 16px; } #game#game .menu-grid { gap: 8px; } #game#game .menu-art { height: calc(100vh - 28px); } #game#game .menu-unit { height: 96px !important; } } /* ── 새 전쟁 ─────────────────────────────────────────── */ #game#game .faction-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; } #game#game .dialog .faction-choice { flex-direction: row !important; width: 100%; } #game#game .faction-choice .flag { width: 26px !important; height: 32px !important; font-size: 14px !important; } #game#game .faction-choice b { font: inherit !important; } #game#game .new-war-dialog .setup-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #game#game .new-war-dialog .options-row { margin: 0; display: grid; gap: 6px; justify-content: stretch; } #game#game .new-war-dialog .options-row > span { font-size: 13px; color: #6d6550; } #game#game .new-war-dialog .segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } #game#game .new-war-dialog select { width: 100%; justify-content: flex-start; } /* ── 연습 전장, 설정 ─────────────────────────────────── */ #game#game .dialog .mode-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; } #game#game .dialog .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; } #game#game .dialog .setting-row { justify-content: space-between; width: 100%; } #game#game .dialog .setting-row b { font-weight: 700; color: #8a3a28; } #game#game .dialog .setting-row[aria-pressed=false] b { color: #7a7766; } #game#game .dialog .settings-note { font-size: 13px; color: #6d6550; margin: 12px 0 0; } /* ── 조작 안내: 두 칸, 스크롤 없음 ────────────────────── */ #game#game .help-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } #game#game .help-row { display: block; padding: 0; border: 0; margin: 0; } #game#game .help-row strong { display: block; font-size: 15px; color: #8a5a1c; margin-bottom: 3px; } #game#game .help-row span { display: block; font-size: 14px; line-height: 1.45; color: var(--c-ink); } @media (max-height: 540px) { #game#game .help-rows { gap: 8px 22px; } #game#game .help-row strong { font-size: 14px; margin-bottom: 1px; } #game#game .help-row span { font-size: 13px; line-height: 1.35; } } /* ── 전술 도전: 3×2 카드, 스크롤 없음 ─────────────────── */ #game#game .mission-dialog { position: relative; } #game#game .mission-dialog .mission-overview { position: absolute; top: 22px; right: 26px; margin: 0; font: 700 16px/1.3 "Malgun Gothic", sans-serif; color: var(--c-seal); } #game#game .mission-dialog .skirmish-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #game#game .dialog .skirmish-choice { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; align-content: center; height: 68px; min-height: 0; padding: 8px 10px; text-align: left; background: var(--c-paper-btn); border: 1px solid var(--c-ink-line); border-radius: var(--btn-r); box-shadow: none; } #game#game .dialog .skirmish-choice .mission-preview { grid-row: 1 / 3; width: 52px; height: 52px; margin: 0; border-radius: 6px; } #game#game .dialog .skirmish-choice strong { font: 700 15px/1.25 "Malgun Gothic", sans-serif; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game#game .dialog .skirmish-choice .skirmish-stars { font-size: 14px; letter-spacing: 2px; color: var(--c-seal); } @media (max-height: 540px) { #game#game .mission-dialog .mission-overview { top: 16px; right: 22px; } #game#game .dialog .skirmish-choice { grid-template-columns: 42px minmax(0, 1fr); height: 58px; padding: 6px 8px; column-gap: 8px; } #game#game .dialog .skirmish-choice .mission-preview { width: 42px; height: 42px; } #game#game .dialog .skirmish-choice strong { font-size: 14px; } } /* ── 지도·전투 화면 위쪽 띠: 게임 이름은 넣지 않는다 ───── */ #game#game .topbar .wordmark { display: none !important; } /* 선택 상자: 펼침 표시 */ #game#game .dialog select { appearance: none; -webkit-appearance: none; padding-right: 40px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2327302c' stroke-width='2'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; } /* 조작 안내는 넓게 쓴다 */ #game#game .overlay[data-kind=help] .dialog { width: min(820px, 100%); } #game#game .help-rows { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* 좁은 가로 화면: 메뉴 버튼 칸을 넓히고 글자를 줄인다 */ @media (max-height: 540px) and (max-width: 760px) { #game#game .menu-content { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; } #game#game .menu-grid button { padding: 0 8px !important; font-size: 15px !important; } #game#game .menu-grid .menu-stars { font-size: 12px; } } /* 낮은 화면: 새 전쟁 대화상자를 한 화면에 */ @media (max-height: 360px) { #game#game .faction-choices { margin-bottom: 10px; } #game#game .new-war-dialog .setup-options { gap: 12px; } #game#game .new-war-dialog .options-row { gap: 3px; } #game#game .new-war-dialog .options-row > span { font-size: 12px; } } /* 조작 안내: 제목 바로 아래부터 */ #game#game .overlay[data-kind=help] .help-rows { margin: 0; } #game#game .overlay[data-kind=help] .dialog h2 { margin-bottom: 12px; } /* ── 지도 패널 ─────────────────────────────────────── */ #game#game .destination-tabs { flex: none !important; } #game#game .destination-tabs button { flex-direction: row !important; padding: 0 10px !important; } #game#game .destination-tabs button strong { font: inherit !important; line-height: 1.2 !important; color: inherit !important; } #game#game .destination-tabs button.is-attack:not([aria-pressed=true]) { color: var(--c-seal) !important; } #game#game .destination-tabs button { position: relative; } #game#game .destination-tabs button.is-recommended::before { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-seal); } #game#game .destination-tabs button.is-recommended[aria-pressed=true]::before { background: var(--c-paper-btn); } #game#game .war-objective strong { font-size: 15px; color: var(--c-text); } #game#game .campaign-empty { display: block; padding: 4px 0; } #game#game .campaign-empty strong { display: block; font-size: 15px; color: var(--c-text); } #game#game .campaign-empty p { margin: 4px 0 0; font-size: 13px; color: #b9b3a3; } #game#game .decision-supply { display: flex; align-items: stretch; gap: 8px; } #game#game .decision-supply > [data-action=war-log] { color: var(--c-ink) !important; background: var(--c-paper-btn) !important; border: 1px solid var(--c-ink-line) !important; box-shadow: none !important; } /* 같은 줄 버튼은 같은 너비 */ #game#game .campaign-decision > .campaign-actions { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; } #game#game .campaign-decision > .campaign-actions > button { width: 100%; min-width: 0 !important; padding: 0 6px !important; } #game#game .campaign-decision > .campaign-actions:has(.reinforcement-price) { grid-auto-flow: row; } #game#game .campaign-decision > .war-objective { display: none !important; } /* 목적지는 3칸 격자: 모두 보이고 너비가 같다 */ #game#game .destination-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible !important; } #game#game .destination-tabs button { min-width: 0 !important; width: 100%; flex: none !important; } /* 위쪽 띠의 지도 전환 버튼 */ #game#game.mode-campaign .top-info .top-map-toggle { margin-left: 12px; pointer-events: auto; } /* 휴대폰 가로 */ @media (max-height: 540px) and (orientation: landscape) { #game#game .campaign-decision > .war-objective { display: none !important; } #game#game .campaign-decision > .commanding-army h2 { white-space: nowrap; } #game#game .destination-tabs button { padding: 0 4px !important; font-size: 14px !important; } #game#game .campaign-decision > .campaign-actions > button { font-size: 14px !important; } } @media (max-height: 400px) and (orientation: landscape) { #game#game .decision-supply { display: none !important; } } @media (max-height: 360px) and (orientation: landscape) { #game#game .campaign-preview .destination-scene { display: none !important; } #game#game .campaign-preview { grid-template-columns: 1fr !important; } #game#game .campaign-preview[data-kind=attack] .destination-reason { display: none; } } #game#game .campaign-preview .destination-risk { grid-column: 1 / -1 !important; margin: 0; font-size: 13px; line-height: 1.35; white-space: normal; color: #e7947f; } /* 전투 결과: 버튼 줄은 전체 폭 */ #game#game .dialog.encounter-result { align-items: start; } #game#game .encounter-result .dialog-actions { grid-column: 1 / -1 !important; align-self: auto; margin-top: 4px !important; } #game#game .encounter-result .encounter-consequence { align-self: stretch; } #game#game .encounter-result .result-stats { align-self: center; } @media (max-height: 360px) { #game#game .encounter-result .result-title { font-size: 22px !important; } #game#game .encounter-result .result-stats > div { padding: 4px 3px !important; } #game#game .encounter-result:has(.levy-note,.battle-lesson) .result-stats { margin: 4px 0 !important; } } /* ── 전투·습격 위쪽 버튼: 메뉴와 후퇴(철수)는 같은 크기·같은 모양 ── */ #game#game.mode-battle .topbar #settings, #game#game.mode-battle .battle-bar.is-command .combat-exit, #game#game.mode-raid .topbar #settings, #game#game.mode-raid #hud .battle-bar > .small { /* 44px: the smallest comfortable touch target on a phone. */ height: 44px !important; min-height: 44px !important; width: 72px !important; min-width: 72px !important; max-width: 72px !important; padding: 0 !important; border-radius: var(--btn-r) !important; font: 600 15px/1 "Malgun Gothic", sans-serif !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; color: var(--c-ink) !important; background: var(--c-paper-btn) !important; border: 1px solid var(--c-ink-line) !important; box-shadow: none !important; text-shadow: none !important; } #game#game.mode-battle .battle-bar.is-command .combat-exit.danger, #game#game.mode-raid #hud .battle-bar > .small { color: #fbf4e6 !important; background: var(--c-seal) !important; border-color: var(--c-seal-edge) !important; } #game#game.mode-battle .topbar #settings svg, #game#game.mode-raid .topbar #settings svg { width: 14px; height: 14px; } @media (pointer: coarse) and (orientation: landscape) { #game#game.mode-battle .battle-bar.is-command .combat-exit { top: calc(56px + env(safe-area-inset-top)) !important; } #game#game.mode-raid #hud .battle-bar > .small { top: 1px !important; height: 44px !important; right: 88px !important; } #game#game.mode-raid .topbar #settings { margin-top: 5px; } } @media (max-height: 540px) { #game#game .dialog .skirmish-choice { grid-template-columns: minmax(0, 1fr); justify-items: start; } #game#game .dialog .skirmish-choice .mission-preview { display: none; } #game#game .dialog .skirmish-choice strong { order: -1; } } /* War closing banner and siege notices: a paper plate with an ink frame. */ #game#game #war-banner { position: absolute; left: 50%; top: 30%; z-index: 30; transform: translate(-50%, -50%); min-width: 240px; max-width: calc(100% - 32px); padding: 14px 30px 12px; text-align: center; pointer-events: none; background: #ece3cf; border: 3px double #2a2622; border-radius: 4px; animation: war-banner-in .45s ease-out both; } #game#game #war-banner[hidden] { display: none; } #game#game #war-banner b { display: block; font-size: 30px; font-weight: 700; line-height: 1.2; color: #2a2622; white-space: nowrap; } #game#game #war-banner span { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; color: #4a4036; } #game#game #war-banner.won b { color: #a23328; } #game#game #war-banner.notice { top: 20%; padding: 10px 22px 9px; } #game#game #war-banner.notice b { font-size: 21px; } #game#game #war-banner.notice span { font-size: 13px; } @keyframes war-banner-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { #game#game #war-banner { animation: none; } } #game#game .result-stats.war-record { grid-template-columns: repeat(4, 1fr); } #game#game .result-stats.war-record small { font-size: .55em; font-weight: 600; color: #6b6151; } #game#game .war-epilogue { margin: 0; font-size: 14px; color: #4a4036; } @media (max-height: 540px) { #game#game #war-banner b { font-size: 24px; } #game#game .result-stats.war-record > div { padding: 8px 4px; } } /* During the closing scene the map takes the whole stage. */ #game#game.mode-campaign.war-ending { grid-template-columns: minmax(0, 1fr); } #game#game.war-ending #hud { display: none; } /* ── War ending scene ─────────────────────────────────────────────── A painted backdrop, the winner's banner unfurling on its pole, a red seal and the war record as illustrated medals. */ #game#game #war-ending { position: fixed; inset: 0; z-index: 40; overflow: hidden; display: grid; grid-template-columns: minmax(140px, 30%) minmax(0, 1fr); align-items: center; gap: clamp(8px, 3vw, 40px); padding: clamp(12px, 4vh, 40px) clamp(16px, 5vw, 64px); background: #141a1b; color: #f3ead6; } #game#game #war-ending[hidden] { display: none; } #game#game #war-ending .we-art { position: absolute; inset: -3%; background: #2b3a36 url('./assets/ui-world/valley.webp') 62% 40% / cover no-repeat; animation: we-drift 18s ease-out both; } #game#game #war-ending.lost .we-art, #game#game #war-ending.truce .we-art { background-image: url('./assets/raid-v1/background/far-dusk.webp'); background-position: 70% 40%; } #game#game #war-ending.lost .we-art { filter: saturate(.55) brightness(.72); } #game#game #war-ending .we-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 16, 17, .05) 0%, rgba(12, 16, 17, .25) 28%, rgba(12, 16, 17, .78) 58%, rgba(12, 16, 17, .9) 100%), linear-gradient(0deg, rgba(12, 16, 17, .55) 0%, rgba(12, 16, 17, 0) 40%); } #game#game #war-ending .we-banner { position: relative; z-index: 1; justify-self: center; width: min(170px, 100%); height: min(82vh, 560px); } #game#game #war-ending .we-pole { position: absolute; left: 10px; top: 0; bottom: 0; width: 7px; border-radius: 3px; background: #5a3a1f; border-left: 2px solid #7d5630; } #game#game #war-ending .we-pole::before { content: ''; position: absolute; left: 50%; top: -12px; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg); background: #d2a650; border: 2px solid #8b6526; } #game#game #war-ending .we-cloth { --cloth: #1f5a7c; position: absolute; left: 16px; right: 0; top: 18px; height: 70%; display: grid; place-items: center; background: var(--cloth); border: 3px solid #d2a650; border-left-width: 6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); transform-origin: 0 0; animation: we-unfurl 1.1s cubic-bezier(.2, .8, .2, 1) .25s both, we-sway 5s ease-in-out 1.5s infinite; } #game#game #war-ending .we-cloth::after { content: ''; position: absolute; inset: 9px 9px 22px; border: 1.5px solid rgba(246, 236, 212, .45); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); } #game#game #war-ending[data-faction="ming"] .we-cloth { --cloth: #a8761c; } #game#game #war-ending[data-faction="japan"] .we-cloth { --cloth: #962c22; } #game#game #war-ending .we-glyph { font-family: Gowun, serif; font-weight: 700; font-size: clamp(44px, 12vh, 96px); line-height: 1; color: #f6ecd4; display: grid; place-items: center; width: 1.45em; height: 1.45em; border: 3px solid rgba(246, 236, 212, .85); border-radius: 50%; margin-bottom: 14%; } #game#game #war-ending.lost .we-cloth { filter: brightness(.85); } #game#game #war-ending .we-body { position: relative; z-index: 1; min-width: 0; display: grid; gap: clamp(8px, 2.4vh, 18px); justify-items: start; } #game#game #war-ending .we-title { display: flex; align-items: center; gap: 18px; animation: we-rise .7s ease-out .9s both; } #game#game #war-ending h2 { margin: 0; font-family: Gowun, serif; font-weight: 700; font-size: clamp(30px, 10vh, 64px); line-height: 1.1; letter-spacing: .04em; color: #f6e5bd; white-space: nowrap; } #game#game #war-ending.lost h2 { color: #e2d7c3; } #game#game #war-ending .we-seal { flex: none; display: grid; place-items: center; width: clamp(44px, 12vh, 70px); height: clamp(44px, 12vh, 70px); font-family: Gowun, serif; font-weight: 700; font-size: clamp(26px, 7vh, 42px); color: #f8eedb; background: #a3271c; border: 3px double #f3dcc0; border-radius: 6px; transform: rotate(-8deg); animation: we-stamp .45s cubic-bezier(.3, 1.6, .5, 1) 1.5s both; } #game#game #war-ending.lost .we-seal { background: #3c3a37; } #game#game #war-ending.truce .we-seal { background: #5f5242; } #game#game #war-ending .we-sub { margin: 0; font-size: clamp(14px, 3.6vh, 18px); color: #d9ccb0; animation: we-rise .7s ease-out 1.1s both; } #game#game #war-ending .we-record { display: flex; flex-wrap: wrap; gap: clamp(6px, 1.6vw, 18px); margin-top: 2px; } #game#game #war-ending .we-medal { width: clamp(64px, 9vw, 92px); display: grid; justify-items: center; gap: 2px; text-align: center; animation: we-rise .5s ease-out both; } #game#game #war-ending .we-medal:nth-child(1) { animation-delay: 1.8s; } #game#game #war-ending .we-medal:nth-child(2) { animation-delay: 1.95s; } #game#game #war-ending .we-medal:nth-child(3) { animation-delay: 2.1s; } #game#game #war-ending .we-medal:nth-child(4) { animation-delay: 2.25s; } #game#game #war-ending .we-medal:nth-child(5) { animation-delay: 2.4s; } #game#game #war-ending .we-medal img { width: clamp(38px, 11vh, 60px); height: clamp(38px, 11vh, 60px); object-fit: contain; padding: 6px; border-radius: 50%; background: #efe4cc; border: 2px solid #c9a35a; } #game#game #war-ending .we-medal b { font-family: Gowun, serif; font-weight: 700; font-size: clamp(16px, 4.6vh, 24px); color: #f6e5bd; line-height: 1.15; } #game#game #war-ending .we-medal b small { font-size: .62em; color: #cdbf9f; } #game#game #war-ending .we-medal span { font-size: 12px; color: #b9ad94; white-space: nowrap; } #game#game #war-ending .we-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; animation: we-rise .5s ease-out 2.6s both; } #game#game #war-ending .we-actions button { min-width: 120px; } #game#game #war-ending .we-next { flex-basis: 100%; color: #cdbf9f; font-size: 13px; line-height: 1.35; } #game#game #war-ending.unified .we-cloth { border-color: #f0c56a; border-width: 4px 4px 4px 7px; } @keyframes we-drift { from { transform: scale(1.08); } to { transform: scale(1); } } @keyframes we-unfurl { from { transform: scaleY(.04) skewY(4deg); opacity: .4; } to { transform: scaleY(1) skewY(0); opacity: 1; } } @keyframes we-sway { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-1.6deg); } } @keyframes we-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes we-stamp { from { opacity: 0; transform: rotate(-8deg) scale(2.4); } to { opacity: 1; transform: rotate(-8deg) scale(1); } } @media (prefers-reduced-motion: reduce) { #game#game #war-ending *, #game#game #war-ending .we-art { animation: none !important; } } @media (max-height: 420px) { #game#game #war-ending .we-medal span { font-size: 11px; } #game#game #war-ending .we-actions button { min-width: 104px; } } @media (orientation: portrait) and (max-width: 700px) { #game#game #war-ending { grid-template-columns: 1fr; align-content: center; } #game#game #war-ending .we-banner { height: 34vh; width: 130px; } #game#game #war-ending .we-veil { background: linear-gradient(0deg, rgba(12, 16, 17, .9) 0%, rgba(12, 16, 17, .7) 50%, rgba(12, 16, 17, .2) 100%); } } #game#game #war-ending .we-actions button { height: var(--btn-h, 44px); padding: 0 20px; border-radius: var(--btn-r); font: 600 15px/1 inherit; background: #ece3cf; color: #2a2622; border: 1.5px solid #2a2622; box-shadow: none; text-shadow: none; } #game#game #war-ending .we-actions button.primary { background: #a33328; color: #f8eedb; border-color: #6f1f17; } #game#game #war-ending .we-actions button:active { transform: translateY(1px); } /* ── One shape for every control ──────────────────────────────────── All buttons, cards and the thumb action buttons use the same 4px corner (--btn-r) and the same ink / paper / seal-red palette. Panels use 6px. */ #game#game .dialog { border-radius: 6px; } #game#game .menu-art { border-radius: 6px; } #game#game .campaign-wallet { border-radius: var(--btn-r); } #game#game .is-command .formation { border-radius: var(--btn-r); background: rgba(236, 227, 207, .94); border: 1.5px solid #2a2622; color: #2a2622; } #game#game .is-command .formation:hover { background: rgba(236, 227, 207, 1); } #game#game .is-command .formation[aria-pressed=true], #game#game .is-command .formation:active { background: #2a2622; border-color: #2a2622; color: #f3ead6; } #game#game .is-command .formation::after { background: #d2a650; } #game#game .formation-strength { border-radius: 3px; background: #2a2622; color: #f3ead6; border-color: #2a2622; } #game#game .formation[aria-pressed=true] .formation-strength { background: #a33328; border-color: #a33328; } #game#game .formation .selected-tag { border-radius: 3px; } #game#game.mode-battle .touch-fire { border-radius: var(--btn-r); background: #a33328 !important; border: 2px solid #6f1f17 !important; color: #f8eedb; } #game#game.mode-battle .touch-fire::before { border-radius: 2px; } #game#game.mode-battle .touch-fire[data-state=reload] { border-color: #2a2622 !important; } #game#game.mode-battle .touch-fire[data-state=reload]::before { background: #2a2622; } #game#game.mode-battle .touch-fire[data-state=blocked] { background: #4a4540 !important; border-color: #2a2622 !important; color: #cfc4ad; } #game#game.mode-raid .touch-actions button { border-radius: var(--btn-r) !important; border: 2px solid #d2a650 !important; } #game#game.mode-raid .touch-actions button:not(.timing-cue):not(.held-fire):not(.down) { background: #2a2622 !important; color: #f3ead6 !important; } #game#game.mode-raid .touch-actions #fire-button:not(.timing-cue):not(.held-fire):not(.down) { background: #a33328 !important; border-color: #6f1f17 !important; } /* ui-theme.css pins the old lacquer look with !important; win it back here. */ #game#game .is-command .formation { border-radius: var(--btn-r) !important; background: rgba(236, 227, 207, .94) !important; border: 1.5px solid #2a2622 !important; box-shadow: none !important; color: #2a2622 !important; } #game#game .is-command .formation[aria-pressed=true] { background: #2a2622 !important; border-color: #d2a650 !important; color: #f3ead6 !important; box-shadow: none !important; } #game#game .formation .name { background: transparent !important; color: inherit !important; } #game#game .is-command .formation[aria-pressed=true] .name { background: transparent !important; color: #f3ead6 !important; } #game#game.mode-battle .touch-fire { border-radius: var(--btn-r) !important; background: #a33328 !important; border: 2px solid #d2a650 !important; box-shadow: none !important; text-shadow: none !important; } #game#game.mode-battle .touch-fire.down, #game#game.mode-raid .touch-actions button.down { transform: translateY(1px) !important; box-shadow: none !important; } #game#game.mode-raid .touch-actions button { box-shadow: none !important; text-shadow: none !important; } #game#game .is-command .command-fire { border-radius: var(--btn-r) !important; background: #a33328 !important; border: 1.5px solid #6f1f17 !important; box-shadow: none !important; text-shadow: none !important; } #game#game [data-action="training-retry"] { border-radius: var(--btn-r) !important; } /* Minigame pad rests at the bottom of its gutter, where the thumb already is. The whole gutter still accepts a touch and the pad starts under the thumb. */ #game#game.mode-raid #stick-base { top: auto !important; bottom: calc(14px + env(safe-area-inset-bottom)); } #game#game.mode-raid #stick-knob { top: auto !important; bottom: calc(14px + 56px - 22px + env(safe-area-inset-bottom)); } #game#game .raid-coins { margin-left: 10px; font-weight: 700; font-size: 14px; color: #e2b54f; white-space: nowrap; } /* ── Mobile game buttons ─────────────────────────────────────────── One look for every button: 10px corners, a solid face and a darker bottom lip that sinks when pressed, bold lettering. Same heights as before so no layout grows. Panels use 14px corners. */ :root { --btn-r: 10px; --btn-lip: 4px; --btn-font: 700 15px/1.2 "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; } #game#game :is(.menu-grid button, .dialog .dialog-actions button, .dialog .mode-list button, .dialog .segment button, .dialog .faction-choice, .campaign-actions button, .destination-commit, .destination-tabs button, .map-toggle, .decision-supply > button, .topbar .icon-button, .dialog .skirmish-choice, [data-action="training-retry"], .battle-bar > .small, #war-ending .we-actions button) { border-radius: var(--btn-r) !important; border-bottom-width: var(--btn-lip) !important; font-weight: 700 !important; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game :is(.menu-grid button, .dialog .dialog-actions button, .dialog .mode-list button, .dialog .segment button, .dialog .faction-choice, .campaign-actions button, .destination-commit, .destination-tabs button, .map-toggle, .decision-supply > button, .topbar .icon-button, .dialog .skirmish-choice, [data-action="training-retry"], .battle-bar > .small, #war-ending .we-actions button):active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game #war-ending .we-actions button { font: 700 15px/1 "Malgun Gothic", sans-serif; } #game#game .dialog { border-radius: 14px; } #game#game .menu-art { border-radius: 14px; } #game#game .dialog .skirmish-choice .mission-preview { border-radius: 8px; } /* Battle and raid controls: the same face and lip, a little thicker for thumbs. */ #game#game .is-command .formation { border-radius: var(--btn-r) !important; border-bottom-width: 4px !important; } #game#game .is-command .formation:active { transform: translateY(2px) !important; border-bottom-width: 2px !important; } #game#game .formation-strength, #game#game .formation .selected-tag { border-radius: 6px; } #game#game.mode-battle .touch-fire { border-radius: var(--btn-r) !important; border-width: 2px 2px 5px !important; border-color: #6f1f17 !important; } #game#game.mode-battle .touch-fire::before { border-radius: 7px; } #game#game.mode-battle .touch-fire.down { transform: translateY(3px) !important; border-bottom-width: 2px !important; } #game#game.mode-raid .touch-actions button { border-radius: var(--btn-r) !important; border-width: 2px 2px 5px !important; border-color: #120f0d !important; } #game#game.mode-raid .touch-actions #fire-button { border-color: #5e1a13 !important; } #game#game.mode-raid .touch-actions button.down { transform: translateY(3px) !important; border-bottom-width: 2px !important; } /* The menu is a single ☰ icon: a square button the height of every other button. */ #game#game #settings { width: var(--btn-h) !important; min-width: var(--btn-h) !important; height: var(--btn-h) !important; min-height: var(--btn-h) !important; padding: 0 !important; } #game#game #settings svg { width: 22px !important; height: 22px !important; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; } /* Battle condition card in the pre-battle brief. */ #game#game .battle-condition { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; padding: 8px 12px; border-radius: 10px; background: #2a2622; color: #f3ead6; } #game#game .battle-condition b { font-size: 16px; white-space: nowrap; } #game#game .battle-condition span { font-size: 13px; color: #d9ccb0; } #game#game .battle-condition.is-morale { background: #a33328; } /* War event card: the event's picture, a line of story, two choices. */ #game#game .offer-card { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; } #game#game .offer-card img { width: 72px; height: 72px; flex: none; padding: 8px; border-radius: 50%; background: #efe4cc; border: 2px solid #c9a35a; object-fit: contain; } #game#game .offer-card p { margin: 0; font-size: 15px; line-height: 1.45; } #game#game .offer-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #game#game .offer-choice { display: grid; gap: 3px; justify-items: center; padding: 10px 8px 9px; border-radius: var(--btn-r) !important; border: 1.5px solid #2a2622 !important; border-bottom-width: var(--btn-lip) !important; background: #ece3cf !important; color: #2a2622 !important; box-shadow: none !important; text-shadow: none !important; height: auto !important; } #game#game .offer-choice.primary { background: #a33328 !important; color: #fbf4e6 !important; border-color: #6f1f17 !important; } #game#game .offer-choice b { font-size: 16px; } #game#game .offer-choice small { font-size: 12px; opacity: .85; } #game#game .offer-choice:active { transform: translateY(2px); border-bottom-width: 2px; } #game#game .offer-choice:disabled { opacity: .45; } /* First-war guide card: a paper plate with the rule's picture, one sentence and one button, over the map while the lands it names glow. */ #game#game #coach-card { position: absolute; left: 50%; top: 64px; z-index: 28; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; background: #ece3cf; color: #2a2622; border: 2px solid #2a2622; border-bottom-width: 5px; border-radius: 14px; animation: coach-in .3s ease-out both; } #game#game #coach-card[hidden] { display: none; } #game#game #coach-card img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: #e4d6b6; border: 2px solid #c9a35a; padding: 4px; box-sizing: border-box; } #game#game #coach-card .coach-text b { display: block; font-size: 16px; line-height: 1.25; } #game#game #coach-card .coach-text p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #4a4036; } #game#game #coach-card button { height: 40px; padding: 0 14px; font: var(--btn-font); color: #fbf4e6; background: #a33328; border: 1px solid #6f1f17; border-bottom-width: var(--btn-lip); border-radius: var(--btn-r); white-space: nowrap; cursor: pointer; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game #coach-card button:active { transform: translateY(2px); border-bottom-width: 2px; } @keyframes coach-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { #game#game #coach-card { animation: none; } } @media (max-height: 430px) { #game#game #coach-card { top: 52px; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px 7px 8px; } #game#game #coach-card img { width: 48px; height: 48px; } #game#game #coach-card .coach-text b { font-size: 15px; } #game#game #coach-card .coach-text p { font-size: 12px; } } /* The same guide inside a battle brief. */ #game#game .coach-inline { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: #e4d6b6; border: 1.5px solid #c9a35a; } #game#game .coach-inline img { width: 44px; height: 44px; flex: none; object-fit: contain; } #game#game .coach-inline p { margin: 0; font-size: 13px; line-height: 1.4; color: #2a2622; } /* ── Title screen: key art of the three armies at war, the logo over the dark forest, mode tiles in the empty sky, one call to action below. ── */ #game#game .overlay.menu-overlay { inset: 0; padding: 0 !important; overflow: hidden; display: block; background: #1d2a2c url('./assets/ui-world/keyart.webp') center 62% / cover no-repeat; } #game#game .title-screen { position: absolute; inset: 0; word-break: keep-all; } #game#game .title-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 48% 42% at 0% 0%, rgba(14,18,18,.78), rgba(14,18,18,0) 100%), linear-gradient(0deg, rgba(14,18,18,.62) 0%, rgba(14,18,18,0) 26%); } #game#game .ts-logo { position: absolute; left: clamp(16px, 3.6vw, 52px); top: clamp(12px, 4vh, 40px); display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); } #game#game .ts-seal { flex: none; display: block; width: clamp(50px, 14vh, 92px); height: auto; aspect-ratio: 1; transform: rotate(-3deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); } #game#game .title-screen .menu-title { margin: 0; font: 700 clamp(38px, 13vh, 92px)/1 Gowun, serif; letter-spacing: -.02em; color: #f6ecd6; -webkit-text-stroke: 8px #1b1512; paint-order: stroke fill; white-space: nowrap; } #game#game .title-screen .menu-title span { color: #e7bd68; } #game#game .ts-logo p { margin: 6px 0 0 3px; font: 600 clamp(12px, 3.3vh, 17px)/1.3 var(--ui-font, sans-serif); color: #f0e6cc; text-shadow: 0 1px 3px #000c; } /* T-title: five things. The 공적 button under the logo, the gear top right, and one dock at the bottom: the call to action (with 새 전쟁 when a war is saved), then the 도전 and 연습 picture tiles. */ #game#game .ts-mode { position: relative; display: grid !important; justify-items: center; align-content: center; gap: 2px; flex: none; width: clamp(64px, 9vw, 84px); height: clamp(56px, 16vh, 76px) !important; padding: 4px !important; color: #2a2622 !important; background: rgba(236,227,207,.95) !important; border: 1.5px solid #2a2622 !important; border-bottom-width: 4px !important; border-radius: 10px !important; box-shadow: none !important; cursor: pointer; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game .ts-mode img { width: clamp(26px, 8vh, 38px); height: clamp(26px, 8vh, 38px); object-fit: contain; } #game#game .ts-mode span { font: 700 clamp(13px, 3.6vh, 15px)/1.1 var(--ui-font, sans-serif); white-space: nowrap; } #game#game .ts-gear { position: absolute; top: clamp(10px, 3vh, 26px); right: clamp(10px, 2.6vw, 30px); width: 48px; height: 48px; padding: 0 !important; display: grid; place-items: center; background: rgba(236,227,207,.94) !important; color: #2a2622 !important; border: 1.5px solid #2a2622 !important; border-bottom-width: 4px !important; border-radius: 10px !important; box-shadow: none !important; cursor: pointer; } #game#game .ts-gear svg { width: 26px; height: 26px; fill: #2a2622; } #game#game .ts-dock { position: absolute; left: 50%; bottom: clamp(12px, 4vh, 36px); transform: translateX(-50%); display: flex; align-items: stretch; gap: 10px; width: min(600px, calc(100% - 32px)); } #game#game .ts-modes { display: flex; gap: 8px; flex: none; } /* The call to action fills the dock; 새 전쟁 beside it when a save exists. */ #game#game .ts-play { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 10px; } #game#game .ts-cta { flex: 1 1 auto; min-width: 0; display: grid !important; align-content: center; justify-items: center; gap: 2px; height: clamp(56px, 16vh, 76px) !important; padding: 0 16px !important; color: #fbf1df !important; background: #a33328 !important; border: 2px solid #5e1a13 !important; border-bottom-width: 6px !important; border-radius: 14px !important; box-shadow: none !important; cursor: pointer; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game .ts-cta b { font: 700 clamp(22px, 6.4vh, 30px)/1.05 Gowun, serif; letter-spacing: .02em; } #game#game .ts-cta small { font: 600 12px/1.2 var(--ui-font, sans-serif); opacity: .85; } #game#game .ts-sub { flex: 0 0 auto; width: clamp(92px, 12vw, 120px); height: auto !important; font: var(--btn-font) !important; color: #2a2622 !important; background: rgba(236,227,207,.95) !important; border: 1.5px solid #2a2622 !important; border-bottom-width: 4px !important; border-radius: 12px !important; box-shadow: none !important; cursor: pointer; } #game#game :is(.ts-cta, .ts-sub, .ts-mode, .ts-gear):active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game .ts-play .ts-cta:active { transform: translateY(2px); } #game#game :is(.ts-cta, .ts-sub, .ts-mode, .ts-gear):hover { filter: brightness(1.04); } #game#game :is(.ts-cta, .ts-sub, .ts-mode, .ts-gear):focus-visible { outline: 3px solid #e7bd68; outline-offset: 2px; } /* Narrow landscapes: smaller tiles and gear, no subtitle. */ @media (max-width: 700px) and (min-aspect-ratio: 1/1) { #game#game .ts-mode { width: 62px; } #game#game .ts-gear { width: 44px; height: 44px; } #game#game .ts-logo p { display: none; } } /* Upright screens: logo on top, the two tiles centred above the call to action. */ @media (max-aspect-ratio: 1/1) { #game#game .overlay.menu-overlay { background-position: 38% 60%; } #game#game .ts-logo { right: 72px; } #game#game .title-screen .menu-title { font-size: clamp(34px, 11vw, 60px); } #game#game .ts-seal { width: clamp(46px, 12vw, 76px); } #game#game .ts-dock { flex-direction: column-reverse; align-items: center; width: calc(100% - 32px); max-width: 420px; } #game#game .ts-play { width: 100%; } #game#game .ts-gear { position: fixed; top: 14px; right: 14px; } #game#game .title-screen::before { background: linear-gradient(180deg, rgba(14,18,18,.7) 0%, rgba(14,18,18,0) 24%, rgba(14,18,18,0) 55%, rgba(14,18,18,.75) 100%); } } /* Gate defence brawler HUD: general's hearts, the gate's strength, the volley gauge and the wave count, in one strip. */ #game#game .brawl-bar { display: flex; align-items: center; gap: 14px; } #game#game .brawl-bar > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #game#game .brawl-track { width: clamp(70px, 14vw, 150px); height: 10px; background: #2a2622; border: 1.5px solid #2a2622; border-radius: 6px; overflow: hidden; } #game#game .brawl-track > span { display: block; height: 100%; width: 100%; background: #c9a35a; transition: width .15s ease-out; } #game#game .brawl-track.rage > span { background: #a33328; } #game#game .brawl-wave b { font: 700 16px/1 var(--ui-font, sans-serif); color: #2a2622; } @media (max-height: 540px) { #game#game .brawl-wave b { color: #ece3cf; } } #game#game #brawl-hp { color: #e0574a; letter-spacing: 1px; } /* On the raid strip the hearts and timer own the left; the gate, gauge and wave count sit in a row after them with their labels shown inline. */ @media (max-height: 540px) { #game#game.mode-raid #hud .brawl-bar > .brawl-gate, #game#game.mode-raid #hud .brawl-bar > .brawl-rage, #game#game.mode-raid #hud .brawl-bar > .brawl-wave { position: absolute !important; top: 13px !important; flex-direction: row !important; align-items: center; gap: 6px !important; } #game#game.mode-raid #hud .brawl-bar > .brawl-gate { left: 318px !important; top: 8px !important; } #game#game.mode-raid #hud .brawl-bar > .brawl-rage { left: 400px !important; } #game#game.mode-raid #hud .brawl-bar > .brawl-wave { left: 480px !important; top: 8px !important; } #game#game.mode-raid #hud .brawl-bar .eyebrow { display: inline !important; font: 700 12px/1 var(--ui-font, sans-serif) !important; color: #ece3cf !important; letter-spacing: 0 !important; text-transform: none !important; opacity: .9; } #game#game.mode-raid #hud .brawl-bar .brawl-track { width: 104px; } @media (max-width: 640px) { #game#game.mode-raid #hud .brawl-bar > .brawl-gate { left: 290px !important; } #game#game.mode-raid #hud .brawl-bar > .brawl-rage { left: 300px !important; } #game#game.mode-raid #hud .brawl-bar > .brawl-wave { display: none !important; } #game#game.mode-raid #hud .brawl-bar .brawl-track { width: 70px; } } } /* ── Brawler controls: a mobile action game's round picture buttons ───── The big cut sits under the right thumb; roll beside it, volley above it. Roll shows a shrinking dark pie while it recovers; the volley fills a gold ring with rage and glows when it can be called. */ #game#game:is(.brawl, .pad-pictures) .touch-actions { position: absolute !important; right: 10px !important; bottom: 12px !important; top: auto !important; left: auto !important; width: 176px !important; height: 176px !important; max-width: none !important; display: block !important; gap: 0 !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions button { position: absolute !important; display: grid !important; place-items: center; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 3px solid #2a2622 !important; border-bottom-width: 3px !important; background: #ece3cf !important; color: transparent !important; font-size: 0 !important; box-shadow: 0 4px 0 #2a2622, 0 6px 10px rgba(0,0,0,.35) !important; overflow: visible; transition: transform .06s ease-out, box-shadow .06s ease-out; } #game#game:is(.brawl, .pad-pictures) .touch-actions button img { width: 74%; height: 74%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); } #game#game:is(.brawl, .pad-pictures) .touch-actions #fire-button { right: 0 !important; bottom: 4px !important; width: 92px !important; height: 92px !important; background: #a33328 !important; border-color: #4a120c !important; box-shadow: 0 5px 0 #4a120c, 0 7px 12px rgba(0,0,0,.4) !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions #fire-button img { width: 78%; height: 78%; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)) brightness(1.08); } #game#game:is(.brawl, .pad-pictures) .touch-actions #jump-button { right: 100px !important; bottom: 4px !important; width: 64px !important; height: 64px !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions #duck-button { right: 14px !important; bottom: 108px !important; width: 64px !important; height: 64px !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions button.down { transform: translateY(4px) !important; box-shadow: 0 1px 0 #2a2622 !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions button.unavailable { opacity: 1 !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions .skill-ring { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; } #game#game:is(.brawl, .pad-pictures) .touch-actions #jump-button .skill-ring { background: conic-gradient(rgba(20,16,12,.62) calc(var(--cooldown, 0) * 1turn), transparent 0); } #game#game:is(.brawl, .pad-pictures) .touch-actions #duck-button .skill-ring { inset: -8px; background: conic-gradient(#e7bd68 calc(var(--charge, 0) * 1turn), rgba(20,16,12,.55) 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); } #game#game:is(.brawl, .pad-pictures) .touch-actions #duck-button.unavailable img { filter: grayscale(.85) brightness(.85); opacity: .7; } #game#game:is(.brawl, .pad-pictures) .touch-actions #duck-button.skill-ready { animation: skill-ready 1s ease-in-out infinite; } #game#game:is(.brawl, .pad-pictures) .touch-actions #fire-button .skill-ring { display: none; } #game#game:is(.brawl, .pad-pictures) .touch-actions #fire-button:not(.down), #game#game:is(.brawl, .pad-pictures) .touch-actions #jump-button:not(.down), #game#game:is(.brawl, .pad-pictures) .touch-actions #duck-button:not(.down) { color: transparent !important; } @keyframes skill-ready { 0%, 100% { box-shadow: 0 4px 0 #2a2622, 0 0 0 0 rgba(231,189,104,.0) !important; } 50% { box-shadow: 0 4px 0 #2a2622, 0 0 0 7px rgba(231,189,104,.55) !important; } } @media (prefers-reduced-motion: reduce) { #game#game:is(.brawl, .pad-pictures) .touch-actions #duck-button.skill-ready { animation: none; } } #game#game.brawl #stick-label, #game#game.brawl #stick-detail { display: none !important; } /* Picture labels on the strip: the gate or the cart, and the enemy banners. */ #game#game .brawl-bar .brawl-icon { width: 26px; height: 26px; object-fit: contain; flex: none; } #game#game .brawl-bar .brawl-gate, #game#game .brawl-bar .brawl-wave { flex-direction: row !important; align-items: center; gap: 6px !important; } #game#game.brawl .brawl-life .eyebrow { display: none !important; } #game#game .road-track { position: relative; display: inline-block; width: 132px; height: 26px; margin-left: 8px; vertical-align: middle; } #game#game .road-track::before { content: ""; position: absolute; left: 4px; right: 18px; top: 16px; height: 4px; border-radius: 2px; background: #6b5a3e; } #game#game .road-track::after { content: ""; position: absolute; right: 4px; top: 2px; width: 3px; height: 18px; background: #2a2622; box-shadow: 3px 0 0 -0px #a33328; } #game#game .road-track b { position: absolute; right: -2px; top: 2px; width: 12px; height: 9px; background: #a33328; clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%); } #game#game .road-track img { position: absolute; top: 0; left: calc(var(--journey, 0) * (100% - 40px)); width: 30px; height: 22px; object-fit: contain; transition: left .3s linear; } #game#game:is(.brawl, .pad-pictures) .touch-actions button[hidden] { display: none !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions #duck-button.unavailable img { filter: grayscale(.6) brightness(.95); opacity: .85; } #game#game.mode-raid.brawl #hud .brawl-bar .brawl-life .eyebrow { display: none !important; } @media (max-width: 640px) { #game#game:is(.brawl, .pad-pictures) .touch-actions { width: 146px !important; height: 146px !important; right: 6px !important; bottom: 8px !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions #fire-button { width: 76px !important; height: 76px !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions #jump-button { right: 84px !important; width: 54px !important; height: 54px !important; } #game#game:is(.brawl, .pad-pictures) .touch-actions #duck-button { right: 11px !important; bottom: 90px !important; width: 54px !important; height: 54px !important; } } /* Brawler strip, one line: every item is 40px tall on the menu button's centre line, the counters sit in the same dark pills as the hearts, and giving up is a flag button of the menu's height just left of it (8px apart). */ #game#game.mode-raid.brawl #hud .battle-bar > .brawl-giveup { width: 48px !important; min-width: 48px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; display: grid !important; place-items: center; font-size: 0 !important; } #game#game.mode-raid.brawl #hud .battle-bar > .brawl-giveup img { width: 30px; height: 30px; object-fit: contain; pointer-events: none; } @media (max-height: 540px) { #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-life { top: 1px !important; height: 40px !important; display: flex !important; align-items: center; box-sizing: border-box; } #game#game.mode-raid.brawl #top-info { height: 40px !important; min-width: 160px; transform: translate(20px, 3px); box-sizing: border-box; display: flex !important; align-items: center; } #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-gate, #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-wave { top: 1px !important; height: 40px; padding: 0 12px; box-sizing: border-box; background: #1b2e2b; border-radius: 16px; } #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-gate { left: 308px !important; } #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-wave { left: 476px !important; } #game#game.mode-raid.brawl #hud .battle-bar > .brawl-giveup { top: 1px !important; right: 80px !important; } } @media (max-height: 540px) and (max-width: 640px) { #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-gate { left: 308px !important; } #game#game.mode-raid.brawl #hud .brawl-bar .brawl-track { width: 50px !important; } #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-wave { display: none !important; } } /* Brawler on a phone in landscape: the battlefield fills the whole screen and the stick, the skill buttons and the top strip float over it (the side columns were empty background anyway). The pills turn translucent so the picture shows through; the stick zone keeps its full-height touch area but draws nothing except the pad itself. */ @media (max-height: 540px) { #game#game.mode-raid.brawl #stage { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 0; } #game#game.mode-raid.brawl #world { width: 100% !important; height: 100% !important; } #game#game.mode-raid.brawl #stick { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } #game#game.mode-raid.brawl #stick-base { background: rgba(20, 30, 28, .38) !important; } #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-life, #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-gate, #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-wave, #game#game.mode-raid.brawl #top-info { background: rgba(20, 30, 28, .72) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } } /* ── Map: neighbouring lands as readable choices ─────────────────────────── An arrow points from the selected army toward the land, a badge says what going there means, and the chosen one is framed in red with a check (not inked black, which read as disabled). */ #game#game .destination-tabs button { position: relative; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; padding: 2px 4px 2px 20px !important; text-align: center; min-width: 0; } #game#game .destination-tabs button .dest-arrow { position: absolute; left: 4px; top: 50%; margin-top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #2a2622; } #game#game .destination-tabs button .dest-arrow::after { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; background: #ece3cf; clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%); transform: rotate(var(--bearing, 0deg)); } #game#game .destination-tabs button strong { font: 700 14px/1.1 var(--ui-font, sans-serif) !important; white-space: nowrap; letter-spacing: -.02em; } #game#game .destination-tabs button .dest-badge { justify-self: start; font: 700 10px/1.25 var(--ui-font, sans-serif); font-style: normal; padding: 0 5px; border-radius: 6px; color: #fbf4e6; } #game#game .destination-tabs button .dest-badge.move { background: #315b54; } #game#game .destination-tabs button .dest-badge.attack { background: #a33328; } #game#game .destination-tabs button .dest-badge.merge { background: #356e5a; } #game#game .destination-tabs button .dest-goal { position: absolute; top: -7px; right: 4px; font: 700 10px/1.3 var(--ui-font, sans-serif); font-style: normal; padding: 0 5px; border-radius: 6px; background: #e7bd68; color: #2a2622; border: 1px solid #2a2622; } #game#game .destination-tabs button.is-recommended::before { display: none !important; } #game#game .destination-tabs button[aria-pressed=true] { background: #fff6e0 !important; color: #2a2622 !important; border: 3px solid #a33328 !important; border-bottom-width: 5px !important; } #game#game .destination-tabs button[aria-pressed=true] strong { color: #2a2622 !important; } #game#game .destination-tabs button[aria-pressed=true]::after { content: "✓"; position: absolute; right: 6px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; background: #a33328; color: #fbf4e6; font: 700 11px/16px var(--ui-font, sans-serif); text-align: center; } #game#game .destination-tabs button.is-attack:not([aria-pressed=true]) strong { color: #8a2a20 !important; } /* The supply button: ink and seal on paper, no pale text. */ #game#game .decision-supply > button span { color: #2a2622 !important; font-weight: 700; } #game#game .decision-supply > button strong { color: #a33328 !important; font-weight: 800; } #game#game .decision-supply > button small { color: #4a4036 !important; opacity: 1 !important; font-weight: 600; } @media (max-height: 540px) { #game#game .destination-tabs button strong { font-size: 13px !important; } #game#game .destination-tabs button .dest-badge { font-size: 9px; padding: 0 4px; } #game#game .destination-tabs button[aria-pressed=true]::after { width: 13px; height: 13px; font-size: 9px; line-height: 13px; right: 3px; bottom: 3px; } } #game#game .destination-tabs button .dest-tags { display: flex; gap: 3px; align-items: center; } #game#game .destination-tabs button .dest-goal { position: static !important; top: auto; right: auto; padding: 0 4px; font-size: 9px; line-height: 1.25; border-width: 0; } #game#game .destination-tabs button[aria-pressed=true]::after { top: -7px !important; right: -7px !important; bottom: auto !important; width: 18px !important; height: 18px !important; line-height: 18px !important; font-size: 11px !important; border: 2px solid #fff6e0; z-index: 1; } @media (max-height: 540px) { #game#game .destination-tabs button { padding: 2px 2px 2px 18px !important; } #game#game .destination-tabs button .dest-arrow { left: 3px; width: 14px; height: 14px; margin-top: -7px; } #game#game .destination-tabs button strong { font-size: 12.5px !important; letter-spacing: -.04em; } #game#game .destination-tabs button[aria-pressed=true] { border-width: 2px !important; border-bottom-width: 4px !important; } } /* The chosen land shows its check where the arrow was, so nothing covers the name. */ #game#game .destination-tabs button[aria-pressed=true]::after { content: none !important; display: none !important; } #game#game .destination-tabs button[aria-pressed=true] .dest-arrow { background: #a33328; } #game#game .destination-tabs button[aria-pressed=true] .dest-arrow::after { clip-path: none; transform: none; background: none; width: auto; height: auto; content: "✓"; color: #fbf4e6; font: 700 11px/1 var(--ui-font, sans-serif); display: grid; place-items: center; } /* Field battle and raids on a phone in landscape: the canvas fills the screen like the brawler. The battle keeps its field in the same box between the controls (--fit-*) and mirrors its ground into the sides; text that sat on the dark side panels gets its own translucent plate. */ @media (max-height: 540px) { #game#game.mode-battle #stage, #game#game.mode-raid #stage { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 0; } #game#game.mode-battle #world, #game#game.mode-raid #world { width: 100% !important; height: 100% !important; } /* The pad gutter and the action gutter (mobile-battle.css) plus room for a rider's tail past the field edge; they swap with the attack hand. */ #game#game.mode-battle #world { --fit-left: calc(var(--pad-gutter-l, 128px) + 4px); --fit-right: calc(var(--act-gutter-r, 88px) + 6px); } #game#game.mode-battle[data-pad-side=left] #world { --fit-left: calc(max(88px, calc(env(safe-area-inset-left) + 80px)) + 6px); --fit-right: calc(max(128px, calc(env(safe-area-inset-right) + 120px)) + 4px); } #game#game.mode-battle #stick, #game#game.mode-raid #stick { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } #game#game.mode-battle #stick-base, #game#game.mode-raid #stick-base { background: rgba(20, 30, 28, .38) !important; } #game#game.mode-battle #top-info { position: relative; isolation: isolate; } #game#game.mode-battle .combat-readout { isolation: isolate; } #game#game.mode-battle #top-info::before, #game#game.mode-battle .combat-readout::before { content: ""; position: absolute; inset: -5px -6px; z-index: -1; background: rgba(20, 30, 28, .72); border-radius: 12px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } #game#game.mode-raid:not(.brawl) #hud .battle-bar > div:not(.small) { background: rgba(20, 30, 28, .72); border-radius: 14px; } } /* The smallest phones have a 64px attack button: the action column is only the 72px corps buttons wide, so the field may come that much closer. */ @media (max-height: 350px) { #game#game.mode-battle #world { --fit-right: calc(max(80px, calc(env(safe-area-inset-right) + 72px)) + 6px); } #game#game.mode-battle[data-pad-side=left] #world { --fit-left: calc(max(80px, calc(env(safe-area-inset-left) + 72px)) + 6px); } } /* Touch screens: every settings row is at least a 44px target. */ @media (pointer: coarse) { #game#game .dialog .setting-row { min-height: 44px !important; height: auto !important; } } /* ── Opening film ───────────────────────────────────────────────── */ #game#game .intro { position: absolute; inset: 0; z-index: 60; overflow: hidden; background: #0e1212; color: #f3e9d2; transition: opacity .45s ease; } #game#game .intro.out { opacity: 0; } /* Cinema bars only where the screen is tall enough to spare them. */ @media (min-height: 430px) { #game#game .intro::before, #game#game .intro::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; background: #000; z-index: 3; } } #game#game .intro::before { top: 0; } #game#game .intro::after { bottom: 0; } #game#game .intro-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; } #game#game .intro-scene.on { opacity: 1; } #game#game .intro-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #game#game .intro-banners { display: grid; place-items: center; background: #1b1916; } @media (min-height: 430px) { #game#game .intro-banners { background: radial-gradient(ellipse at 50% 60%, #2a2622 0%, #0e1212 70%); } } #game#game .intro-flags { display: flex; gap: clamp(70px, 14vw, 170px); align-items: flex-end; transform: translateX(-30px); } #game#game .intro-flag { display: grid; justify-items: center; gap: 8px; opacity: 0; transform: translateY(30px); } #game#game .intro-banners.on .intro-flag { animation: intro-rise .9s cubic-bezier(.2,.8,.2,1) var(--d) forwards; } #game#game .intro-flag i { width: 6px; height: clamp(110px, 34vh, 220px); background: #6b4a2c; border-radius: 3px; position: relative; } #game#game .intro-flag b { position: absolute; margin-top: 8px; margin-left: 50px; width: clamp(70px, 13vw, 120px); height: clamp(56px, 11vw, 96px); display: grid; place-items: center; font: 700 clamp(30px, 6vw, 54px)/1 "Batang", serif; color: #f8eedb; background: var(--c); border: 2px solid #1b1512; clip-path: polygon(0 0, 100% 6%, 92% 50%, 100% 94%, 0 100%); transform-origin: left center; animation: intro-wave 2.4s ease-in-out infinite; } #game#game .intro-flag span { font: 700 clamp(15px, 3.4vh, 20px)/1 Gowun, serif; color: #e9dcc0; letter-spacing: .1em; } #game#game .intro-tag { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 12px; font: 700 clamp(18px, 4.6vh, 26px)/1 Gowun, serif; color: #f8eedb; background: rgba(14,18,18,.72); border: 2px solid var(--c, #c9a35a); opacity: 0; z-index: 2; } #game#game .intro-tag b { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 6px; background: var(--c, #a33328); font-family: "Batang", serif; } #game#game .intro-tag.on { animation: intro-pop .9s ease forwards; } #game#game .intro-title .intro-art { position: absolute; inset: -4%; background: url('./assets/ui-world/keyart.webp') center 60% / cover no-repeat; filter: brightness(.85); } #game#game .intro-title.on .intro-art { animation: intro-zoom 4.6s ease-out forwards; } #game#game .intro-title::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(14,18,18,.25), rgba(14,18,18,.75)); } #game#game .intro-logo { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; } #game#game .intro-logo img { width: clamp(70px, 18vh, 130px); opacity: 0; transform: scale(3.2) rotate(-12deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); } #game#game .intro-logo h1 { margin: 0; font: 700 clamp(44px, 16vh, 110px)/1 Gowun, serif; color: #f6ecd6; -webkit-text-stroke: 9px #1b1512; paint-order: stroke fill; opacity: 0; transform: translateY(12px); } #game#game .intro-logo h1 span { color: #e7bd68; } #game#game .intro-logo p { margin: 0; font: 600 clamp(14px, 3.6vh, 20px)/1.3 Gowun, serif; color: #efe3c8; text-shadow: 0 1px 3px #000; opacity: 0; } #game#game .intro-title.stamp .intro-logo img { animation: intro-stamp .45s cubic-bezier(.3,1.6,.5,1) .5s forwards; } #game#game .intro-title.stamp .intro-logo h1 { animation: intro-pop .7s ease 1s forwards; } #game#game .intro-title.stamp .intro-logo p { animation: intro-pop .7s ease 1.5s forwards; } #game#game .intro-caption { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 4; margin: 0; max-width: calc(100% - 40px); text-align: center; word-break: keep-all; font: 700 clamp(17px, 4.8vh, 26px)/1.35 Gowun, serif; color: #f6ecd6; text-shadow: 0 2px 4px #000, 0 0 12px #000; opacity: 0; } #game#game .intro-caption.on { animation: intro-pop .9s ease forwards; } #game#game .intro-skip { position: absolute; right: 14px; top: calc(9% + 10px); z-index: 5; height: 40px; padding: 0 16px; font: 700 14px/1 var(--ui-font, sans-serif); color: #f3e9d2; background: rgba(14,18,18,.6); border: 1.5px solid rgba(243,233,210,.5); border-radius: 20px; cursor: pointer; } @keyframes intro-rise { to { opacity: 1; transform: none; } } @keyframes intro-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-3deg) scaleX(.96); } } @keyframes intro-pop { from { opacity: 0; transform: translate(var(--tx, 0), 10px); } to { opacity: 1; transform: translate(var(--tx, 0), 0); } } @keyframes intro-zoom { from { transform: scale(1.12); } to { transform: scale(1); } } @keyframes intro-stamp { 0% { opacity: 0; transform: scale(3.2) rotate(-12deg); } 70% { opacity: 1; transform: scale(.92) rotate(-3deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } } #game#game .intro-caption, #game#game .intro-tag { --tx: -50%; } @media (prefers-reduced-motion: reduce) { #game#game .intro * { animation-duration: .01s !important; animation-delay: 0s !important; } } /* 포격전: the wind sits where the top line's info would, so that pill hides. The barrel buttons stand the way they point: raise above the fire button, lower to its left. */ #game#game.bombard #top-info { visibility: hidden !important; } #game#game.bombard.brawl .touch-actions #jump-button { right: 14px !important; bottom: 108px !important; } #game#game.bombard.brawl .touch-actions #duck-button { right: 100px !important; bottom: 4px !important; } @media (max-width: 640px) { #game#game.bombard.brawl .touch-actions #jump-button { right: 11px !important; bottom: 90px !important; } #game#game.bombard.brawl .touch-actions #duck-button { right: 84px !important; bottom: 4px !important; } } /* 전술 도전: battles and minigames under two small chapter titles. A minigame card keeps its picture as a small dark tile at the left, phones included. */ #game#game .mission-dialog .mission-chapter { margin: 10px 0 6px; font: 800 14px/1.2 var(--ui-font, sans-serif); color: #2a2622; } #game#game .dialog .skirmish-choice.mini-choice { grid-template-columns: 52px minmax(0, 1fr); justify-items: stretch; } #game#game .dialog .skirmish-choice .mini-art { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; background: #3a4a44; border-radius: 8px; overflow: hidden; } #game#game .dialog .skirmish-choice .mini-art img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); } #game#game .dialog .skirmish-choice.mini-choice strong { order: 0; } @media (max-height: 540px) { #game#game .dialog .skirmish-choice.mini-choice { grid-template-columns: 42px minmax(0, 1fr); } #game#game .dialog .skirmish-choice .mini-art { width: 42px; height: 42px; } #game#game .dialog .skirmish-choice .mini-art img { width: 38px; height: 38px; } } /* A short screen (browser bars showing) must never trap a dialog: every dialog scrolls with a finger when it is taller than the screen. */ /* pan-x too: on a phone held upright the wrapper turns the game a quarter turn, and the browser judges touch-action on the glass, where scrolling a dialog is a sideways swipe. */ #game#game .overlay .dialog { overflow-y: auto !important; overscroll-behavior: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } /* In the minigames the move pad answers anywhere in a wide lower-left zone, not only in a 120px strip at the edge: a thumb lands well inside it on a phone. The ring still rests at the bottom left and jumps to the thumb. (Field battles keep the pad in its gutter so it never covers the field.) */ #game#game.mode-raid #stick { width: min(44vw, 380px) !important; } #game#game.mode-raid #stick-base { left: 8px !important; } #game#game.mode-raid #stick-knob { left: 42px !important; } /* Apps in Toss: when the WebView gives no env() safe area but Toss reports one (toss.js sets .toss-safe-pad), the whole game sits inside it. */ html.toss-safe-pad body { box-sizing: border-box; padding: var(--toss-safe-top, 0) var(--toss-safe-right, 0) var(--toss-safe-bottom, 0) var(--toss-safe-left, 0); } html.toss-safe-pad #game { height: calc(100dvh - var(--toss-safe-top, 0px) - var(--toss-safe-bottom, 0px)) !important; } /* 공적: the rank badge on the title screen and the merit screen. Paper, ink and seal only, the same 10px corners and 4px lip as every button. */ #game#game .ts-rank { display: inline-grid; grid-template-columns: auto 92px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 3px; align-items: center; margin-top: 8px; padding: 6px 12px; min-height: 44px; background: rgba(236,227,207,.94); color: #2a2622; border: 1.5px solid #2a2622; border-bottom-width: 4px; border-radius: 10px; font: 700 13px/1.1 var(--ui-font, sans-serif); text-align: left; } #game#game .ts-rank b { grid-row: 1 / 3; font: 800 18px/1 var(--ui-font, sans-serif); color: #a33328; } #game#game .ts-rank em { font-style: normal; font-size: 12px; color: #4a4036; } #game#game .ts-rank-bar, #game#game .merit-bar { display: block; height: 7px; background: rgba(42,38,34,.18); border-radius: 4px; overflow: hidden; } #game#game .ts-rank-bar i, #game#game .merit-bar i { display: block; height: 100%; background: #a33328; border-radius: 4px; } #game#game .merit-dialog { width: min(940px, 100%); } #game#game .merit-dialog .merit-rank { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; } #game#game .merit-dialog .merit-rank > b { grid-row: 1 / 3; font: 800 30px/1 var(--ui-font, sans-serif); color: #a33328; } #game#game .merit-dialog .merit-rank div { display: grid; gap: 4px; font-size: 13px; color: #4a4036; } #game#game .merit-dialog .merit-rank em { font-style: normal; font-size: 13px; color: #2a2622; font-weight: 700; } #game#game .merit-dialog .merit-h { margin: 14px 0 6px; font: 800 14px/1.2 var(--ui-font, sans-serif); color: #2a2622; } #game#game .merit-orders { display: grid; gap: 6px; } #game#game .merit-order { display: grid; grid-template-columns: 22px 1fr 90px 40px; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid rgba(42,38,34,.25); border-radius: 10px; background: rgba(255,255,255,.35); font-size: 14px; } #game#game .merit-order > .merit-check { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #2a2622; border-radius: 50%; font-weight: 800; color: #ece3cf; } #game#game .merit-order.done > .merit-check { background: #a33328; border-color: #a33328; } #game#game .merit-order.done b { color: #6a6058; text-decoration: line-through; } #game#game .merit-order em { font-style: normal; text-align: right; font-weight: 700; } #game#game .merit-weekly { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid rgba(42,38,34,.25); border-radius: 10px; } #game#game .merit-weekly > div { flex: 1; display: grid; gap: 2px; font-size: 13px; color: #4a4036; } #game#game .merit-weekly > div b { font-size: 15px; color: #2a2622; } #game#game .merit-wars { display: grid; grid-template-columns: 60px repeat(3, 1fr); gap: 5px; align-items: center; max-width: 420px; } #game#game .merit-wars em { font-style: normal; text-align: center; font-size: 12px; color: #4a4036; } #game#game .merit-wars b { font-size: 14px; } #game#game .merit-wars i { display: grid; place-items: center; height: 30px; border: 1px dashed rgba(42,38,34,.35); border-radius: 8px; font-style: normal; color: #ece3cf; font-weight: 800; } #game#game .merit-wars i.won { background: #a33328; border: 1px solid #4a120c; } #game#game .merit-deeds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #game#game .merit-deed { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; row-gap: 3px; align-items: center; padding: 7px 9px; border: 1px solid rgba(42,38,34,.22); border-radius: 10px; font-size: 12px; color: #5a5048; } #game#game .merit-deed b { font-size: 13px; color: #6a6058; } #game#game .merit-deed.done { background: rgba(163,51,40,.1); border-color: rgba(163,51,40,.5); } #game#game .merit-deed.done b { color: #a33328; } @media (max-height: 540px) { #game#game .ts-rank { margin-top: 4px; padding: 4px 10px; min-height: 40px; } #game#game .merit-deeds { grid-template-columns: repeat(2, minmax(0, 1fr)); } #game#game .merit-order { grid-template-columns: 22px 1fr 60px 36px; font-size: 13px; } } #game#game .merit-deed img { grid-row: 1 / 4; width: 30px; height: 30px; object-fit: contain; filter: grayscale(.9) opacity(.55); } #game#game .merit-deed.done img { filter: none; } #game#game .merit-deed .merit-bar { grid-column: 2; } /* Inside Toss the host floats its more/close capsule over the top-right corner (about 84 x 32 px), so nothing of ours sits under it. */ html.in-toss { --toss-cap: 108px; } html.in-toss #game#game .topbar { padding-right: var(--toss-cap); } /* The title's gear steps left of the capsule; nothing else of the title sits in that corner. */ html.in-toss #game#game .ts-gear { right: calc(clamp(10px, 2.6vw, 30px) + var(--toss-cap)); } html.in-toss #game#game .intro-skip { right: calc(14px + var(--toss-cap)); } html.in-toss #game#game .overlay:not(.menu-overlay) { padding-top: max(44px, env(safe-area-inset-top)); } @media (max-aspect-ratio: 1/1) { html.in-toss #game#game .ts-gear { right: calc(14px + var(--toss-cap)); } } html.in-toss #game#game.mode-raid #hud .battle-bar > .small { right: calc(80px + var(--toss-cap)); } @media (pointer: coarse) and (orientation: landscape) { html.in-toss #game#game.mode-raid #hud .battle-bar > .small { right: calc(88px + var(--toss-cap)) !important; } } @media (max-height: 540px) { html.in-toss #game#game.mode-raid.brawl #hud .battle-bar > .brawl-giveup { right: calc(80px + var(--toss-cap)) !important; } } /* Toss on an upright Android phone turns only its own view (toss.js adds html.toss-turned). Seen from the game the status bar runs down the left edge, the gesture bar down the right edge, and the more/close capsule sits at the top left, about 56 x 104 px inside the status bar. The game keeps out of both bars (the Toss-reported upright top/bottom insets, at least 32/16 px) and leaves that corner to the capsule; the right-hand capsule room (--toss-cap) is not needed. */ html.toss-turned { --toss-cap: 0px; --turn-l: max(32px, var(--toss-safe-top, 0px)); --turn-r: max(16px, var(--toss-safe-bottom, 0px)); --turn-cap: 60px; } html.toss-turned body { padding: 0 !important; background: #141a19; } html.toss-turned #game#game { position: fixed; inset: 0 var(--turn-r) 0 var(--turn-l); width: auto; height: auto !important; transform: translateZ(0); } html.toss-turned #game#game .topbar { padding-left: var(--turn-cap); } html.toss-turned #game#game .ts-logo { left: calc(var(--turn-cap) + 8px); } html.toss-turned #game#game .overlay { padding-left: var(--turn-cap) !important; } html.toss-turned #game#game .intro-skip { right: 14px; } html.toss-turned #game#game.mode-battle:not([data-pad-side=left]) .combat-readout { left: calc(var(--u3-gl, 8px) + var(--turn-cap)) !important; } html.toss-turned body #loading #rating-marks { top: 16px; } /* Inside Toss the rating marks stay over the title for three more seconds (app.js holdRatingOnTitle), in the boot screen's place under the capsule; taps go through. */ #game#game > #rating-marks.rating-hold { position: fixed; top: 58px; right: max(16px, env(safe-area-inset-right)); z-index: 200; display: flex; gap: 8px; pointer-events: none; } html.toss-turned #game#game > #rating-marks.rating-hold { top: 16px; } #game#game > #rating-marks.rating-hold :is(svg, img) { display: block; height: clamp(64px, 20vh, 104px); width: auto; filter: drop-shadow(0 4px 10px #0008); } /* Slots for parallel work packages: each adds its rules between its own pair. */ /* == A == */ /* 부장 지휘: a seal on the cards of the arms the player is not commanding, in the portrait well's top-left corner (the count badge holds the top-right; the selected card's check mark takes this corner, and that card has no seal). */ #game#game .formation .auto-seal { position: absolute; top: 2px; left: 2px; z-index: 2; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #a33328; color: #ece3cf; font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 1px 0 #2a262266; pointer-events: none; } #game#game .formation .auto-seal[hidden] { display: none; } #game#game .formation .auto-seal.is-idle { background: #8a8378; } /* Settings row with its one-line explanation. */ #game#game .dialog .setting-auto { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #game#game .dialog .settings-grid:has(.setting-auto) { align-items: start; } /* The extra row can make the settings scroll on a phone held sideways: the continue/leave buttons stay pinned to the dialog's bottom edge. */ @media (max-height: 540px) { /* Scrolling a row into view stops above the pinned buttons, not under them. */ #game#game .dialog.game-settings { scroll-padding-bottom: 80px; } #game#game .dialog.game-settings .dialog-actions { position: sticky; bottom: -16px; z-index: 1; background: var(--c-paper); padding-bottom: 16px; margin-bottom: -16px; } } #game#game .dialog .setting-auto .setting-note { margin: 0; padding: 0 4px; font-size: 13px; line-height: 1.35; color: #6d6550; word-break: keep-all; } /* Encounter brief on touch screens: the three card pictures and one line. */ #game#game .dialog .switch-brief { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; } #game#game .dialog .switch-brief p { margin: 0; font-size: 14px; line-height: 1.35; word-break: keep-all; } #game#game .dialog .switch-brief-units { display: flex; gap: 4px; flex: none; } #game#game .dialog .switch-brief-units > span { width: 40px; height: 31px; border-radius: 6px; background: #ece3cf; border: 1px solid #2a262233; overflow: hidden; } #game#game .dialog .switch-brief-units .unit-portrait { display: block; width: 100%; height: 100%; } /* Per-arm 부장 chips under the 부장 지휘 row. */ #game#game .auto-arms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 2px; } #game#game .auto-arms .auto-arm { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 6px !important; border-radius: var(--btn-r) !important; background: #ece3cf !important; color: #2a2622 !important; border: 1px solid #2a262255 !important; border-bottom-width: 3px !important; font: 700 13px/1.1 var(--ui-font, sans-serif) !important; } #game#game .auto-arms .auto-arm i { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 800; background: #8a8378; color: #ece3cf; } #game#game .auto-arms .auto-arm.is-on i { background: #a33328; } #game#game .auto-arms .auto-arm span { white-space: nowrap; } #game#game .auto-arms .auto-arm:disabled { opacity: .45; } /* == end A == */ /* == B == */ /* == end B == */ /* == CM == */ /* Loading view: the whole screen at boot (the title screen keeps #stage hidden) and again while the soldiers' pictures arrive before a battle. The key art, one thin seal-red bar that fills as files finish, no spinner. At boot it also carries the rating marks (index.html). */ #game#game #loading { position: fixed; inset: 0; z-index: 45; visibility: visible; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; box-sizing: border-box; padding: 16px 16px max(28px, 9vh); background: #141a19 url('./assets/ui-world/keyart.webp') center 58% / cover no-repeat; color: #ece3cf; font: 700 14px/1.5 Gowun, serif; text-align: center; word-break: keep-all; } /* A failure panel replaces the contents; it sits in the middle. */ #game#game #loading > .dialog { margin: auto; } #game#game #loading[hidden] { display: none; } #game#game #loading .dialog { font: inherit; font-size: 14px; text-align: left; } #game#game #loading-bar { display: block; width: min(280px, 60vw); height: 4px; background: rgba(236, 227, 207, .18); } #game#game #loading-bar b { display: block; height: 100%; background: #a33328; } /* Held upright in a battle: the guard covers the whole screen above every control, and the controls leave the layout so nothing widens the page. */ #game#game #orientation-guard { position: fixed; inset: 0; z-index: 50; background: #17352f; } html.rotate-blocked #game#game #hud, html.rotate-blocked #game#game #touch-controls, html.rotate-blocked #game#game #fire-button, html.rotate-blocked #game#game .touch-actions { display: none !important; } /* The battle command bar is a grid of fixed columns (command-ui.css) that is wider than an upright phone (shown there only under a result); let its columns shrink instead of pushing the layout viewport out to about 630px. */ @media (pointer: coarse) and (orientation: portrait) and (max-width: 700px) { #game#game.mode-battle .battle-bar.is-command { grid-template-columns: auto minmax(0, 1fr) auto auto auto; max-width: 100%; min-width: 0; } #game#game.mode-battle #hud { max-width: 100%; overflow: hidden; } } /* == end CM == */ /* == D == */ /* == end D == */ /* == E == */ /* 목적지 미리 보기: 적이 더 많으면 작은 인주빨강 표 */ #game#game .campaign-preview .enemy-edge { display: inline-block; margin: 0 0 3px; padding: 1px 6px; border-radius: 4px; background: var(--c-seal, #a33328); color: #ece3cf; font-weight: 800; font-size: 12px; line-height: 16px; font-style: normal; } /* 합치기·지키기 안내는 낱말 중간에서 끊지 않는다 */ #game#game .campaign-empty strong, #game#game .campaign-empty p { word-break: keep-all; } /* == end E == */ /* == F == */ /* F-battle-readability. 공격받는 부대 카드: 붉은 테, 손실 표(−1)나 돌격 표, 한 번 흔들림. */ #game#game .is-command .formation.under-attack { border: 3px solid #a33328 !important; border-bottom-width: 4px !important; animation: f-arm-shake 180ms ease-out 1; } @keyframes f-arm-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } } @media (prefers-reduced-motion: reduce) { #game#game .is-command .formation.under-attack { animation: none; } } #game#game .formation .alert-chip { position: absolute; top: 50%; right: calc(100% - 4px); z-index: 4; transform: translateY(-50%); min-width: 26px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 6px; border: 1px solid #ece3cf; background: #a33328; color: #ece3cf; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; white-space: nowrap; pointer-events: none; } #game#game .formation .alert-chip[hidden] { display: none; } #game#game.mode-battle[data-pad-side=left] .formation .alert-chip { right: auto; left: calc(100% - 4px); } /* 낮은 가로 화면(351~390px)에서도 부대 카드는 72x56 이상으로 누른다. 370px 이하에서는 카드 사이를 3px로, 공격 버튼을 68px로 줄여 카드와 겹치지 않게 한다. 350px 이하는 후퇴 버튼과 공격 버튼 사이에 세 장이 들어갈 자리가 없어 기존 크기를 둔다. */ @media (pointer: coarse) and (orientation: landscape) and (min-height: 351px) and (max-height: 390px) { #game#game.mode-battle .is-command .formation { flex: 0 0 56px; height: 56px; min-height: 56px; width: 72px; } #game#game.mode-battle .battle-bar.is-command .formation-tabs { gap: 4px; } } @media (pointer: coarse) and (orientation: landscape) and (min-height: 351px) and (max-height: 370px) { #game#game.mode-battle { --battle-pad-size: 68px; } #game#game.mode-battle .battle-bar.is-command .formation-tabs { gap: 3px; } } /* 전투 결과: 생존 장부는 늘 보이고, 장부가 있으면 숫자 줄은 한 줄로 줄인다. */ #game#game .survivor-ledger > div { position: relative; } #game#game .survivor-ledger > div.unled { background: #d9d3c4; border-color: #8a8378; color: #6b6151; } #game#game .survivor-ledger > div.unled svg { opacity: .55; } #game#game .survivor-ledger .led-by { display: block; font-size: 11px; font-weight: 700; line-height: 1.2; color: #2a2622; } #game#game .survivor-ledger > div.unled .led-by { color: #6b6151; } #game#game .encounter-result .next-step { grid-column: 1 / -1; margin: 0; padding: 6px 10px; border-left: 4px solid #a33328; border-radius: 4px; background: #ece3cf; color: #2a2622; font-size: 14px; font-weight: 700; line-height: 1.35; } #game#game .encounter-consequence.lost-land { display: grid; grid-template-columns: 64px 1fr; column-gap: 10px; align-items: center; border-left-color: #a33328; } #game#game .encounter-consequence.lost-land > b, #game#game .encounter-consequence.lost-land > span { grid-column: 2; margin: 0; } #game#game .encounter-consequence .region-thumb { grid-column: 1; grid-row: 1 / span 2; display: block; width: 64px; height: 40px; border: 1px solid #2a2622; border-radius: 4px; background: #a6b08a; } #game#game .encounter-consequence .region-thumb[hidden] { display: none; } @media (max-height: 540px) and (orientation: landscape) { #game#game .encounter-result:has(.survivor-ledger) .result-stats > div { display: flex; align-items: baseline; justify-content: center; gap: 5px; padding: 3px 4px !important; } #game#game .encounter-result:has(.survivor-ledger) .result-stats b { font-size: 18px; } #game#game .encounter-result:has(.survivor-ledger) .result-stats span { margin: 0; white-space: nowrap; } #game#game .encounter-result:has(.levy-note, .battle-lesson) .survivor-ledger { display: grid; } #game#game .encounter-result .survivor-ledger > div { grid-template-columns: 24px auto auto; grid-template-areas: "i s e" "i b l"; justify-content: center; align-items: center; gap: 0 6px; padding: 3px 6px; } #game#game .encounter-result .survivor-ledger svg { grid-area: i; grid-row: 1 / span 2; width: 24px; height: 24px; } #game#game .encounter-result .survivor-ledger span { grid-area: s; } #game#game .encounter-result .survivor-ledger b { grid-area: b; font-size: 16px; } #game#game .encounter-result .survivor-ledger em { grid-area: e; } #game#game .encounter-result .survivor-ledger .led-by { grid-area: l; } #game#game .encounter-result .next-step { font-size: 13px; padding: 4px 10px; } /* 요령과 다음 버튼은 한 줄에 나란히 둔다. */ #game#game .encounter-result:has(.survivor-ledger) .battle-lesson { grid-column: 1; } #game#game .encounter-result:has(.survivor-ledger):has(.battle-lesson) .dialog-actions { grid-column: 2 !important; align-self: end; margin-top: 0 !important; padding-top: 0; border-top: 0; } #game#game .encounter-result:has(.survivor-ledger) .result-stats b { white-space: nowrap; } } @media (max-height: 340px) and (orientation: landscape) { #game#game .dialog.encounter-result:has(.survivor-ledger) { padding: 8px 14px; row-gap: 5px; } #game#game .encounter-result:has(.survivor-ledger) .result-title { font-size: 19px !important; } #game#game .encounter-result:has(.survivor-ledger) .encounter-consequence { padding: 4px 8px; } #game#game .encounter-result:has(.survivor-ledger) .encounter-consequence b { font-size: 14px; } #game#game .encounter-result:has(.survivor-ledger) .encounter-consequence.lost-land > span { display: none; } #game#game .encounter-result:has(.survivor-ledger) .battle-lesson { font-size: 11px; line-height: 1.3; padding: 4px 8px; } #game#game .encounter-result:has(.survivor-ledger) .dialog-actions button { min-height: 40px; } } /* == end F == */ /* == H == */ /* 출정 첫 주: the seven stamps live in 공적 (the title's 공적 button counts them). The stamp earned since 공적 last showed presses once. */ #game#game .merit-step.press i { animation: ts-stamp-press 400ms cubic-bezier(.3,.7,.4,1) 250ms both; } @keyframes ts-stamp-press { 0% { transform: scale(1.9) rotate(-14deg); opacity: 0; } 65% { transform: scale(.9) rotate(-3deg); opacity: 1; } 100% { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { #game#game .merit-step.press i { animation: none; } } /* 돌아온 장수: the welcome under the 공적 button, the war recap above 이어 하기. */ #game#game .ts-welcome { display: flex; align-items: center; gap: 10px; max-width: 340px; margin-top: 8px; padding: 7px 8px 7px 12px; background: rgba(236,227,207,.96); color: #2a2622; border: 1.5px solid #a33328; border-radius: 10px; } #game#game .ts-welcome-text { margin: 0; font: 600 13px/1.35 var(--ui-font, sans-serif); color: #2a2622; text-shadow: none; word-break: keep-all; } #game#game .ts-welcome-text :is(b, span) { display: block; } #game#game .ts-welcome-text b { font-weight: 800; color: #a33328; } /* The badge line '군령 3/3 · 내일 새 군령' stays on one line; the bar follows its width. */ #game#game .ts-rank { grid-template-columns: auto minmax(92px, max-content); } #game#game .ts-rank em { white-space: nowrap; } #game#game .ts-welcome .ts-welcome-close { flex: none; min-height: 34px; padding: 4px 12px; font: 700 13px/1 var(--ui-font, sans-serif); color: #2a2622; background: #ece3cf; border: 1.5px solid #2a2622; border-bottom-width: 4px; border-radius: 10px; box-shadow: none; } #game#game .ts-welcome .ts-welcome-close:active { transform: translateY(2px); border-bottom-width: 2px; } #game#game .ts-recap { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 8px; padding: 5px 10px; text-align: center; font: 700 13px/1.3 var(--ui-font, sans-serif); color: #2a2622; background: rgba(236,227,207,.94); border: 1.5px solid #2a2622; border-radius: 10px; word-break: keep-all; } /* 공적: the double-merit tag, tomorrow's orders and the first-week track. */ #game#game .merit-dialog .merit-double { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 8px; background: #a33328; color: #ece3cf; font-size: 12px; vertical-align: 1px; } #game#game .merit-order.first-week { border-color: #a33328; } #game#game .merit-tomorrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px 10px; border: 1px dashed rgba(42,38,34,.4); border-radius: 10px; font-size: 13px; } #game#game .merit-tomorrow b { color: #2a2622; } #game#game .merit-tomorrow span { display: flex; gap: 6px; } #game#game .merit-tomorrow img { width: 28px; height: 28px; object-fit: contain; } #game#game .merit-tomorrow em { margin-left: auto; font-style: normal; font-weight: 700; color: #4a4036; } #game#game .merit-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; scroll-margin-top: 8px; } #game#game .merit-dialog #merit-track { scroll-margin-top: 8px; } #game#game .merit-step { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 6px 4px; text-align: center; font-size: 12px; line-height: 1.25; color: #6a6058; word-break: keep-all; border: 1px solid rgba(42,38,34,.2); border-radius: 10px; } #game#game .merit-step i { display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; border: 1.5px solid #2a2622; border-radius: 50%; font: 800 12px/1 var(--ui-font, sans-serif); font-style: normal; color: #2a2622; } #game#game .merit-step.open { border-color: #2a2622; color: #2a2622; font-weight: 700; } #game#game .merit-step.open i { border-width: 2.5px; } #game#game .merit-step.done { color: #a33328; } #game#game .merit-step.done i { background: #a33328; border-color: #a33328; color: #ece3cf; } #game#game .merit-track-note { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #2a2622; } @media (max-height: 540px) { #game#game .ts-welcome { margin-top: 6px; padding: 5px 6px 5px 10px; } #game#game .merit-step { font-size: 11px; padding: 5px 3px; } } /* == end H == */ /* == J == */ /* 적장 성향: 인주빨강 도장 한 글자와 한 줄 안내 (브리핑과 목적지 미리 보기) */ #game#game .commander-note { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; line-height: 1.35; font-weight: 700; word-break: keep-all; text-align: left; } #game#game .commander-seal { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #a33328; color: #ece3cf; font-weight: 800; font-size: 14px; line-height: 1; } #game#game .campaign-preview .commander-note { gap: 5px; min-width: 0; margin: 0 0 3px; font-size: 12px; line-height: 18px; white-space: nowrap; } #game#game .campaign-preview .commander-note > span:not(.commander-seal) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #game#game .campaign-preview .commander-note small { flex: none; padding: 0 5px; border-radius: 4px; background: #ece3cf; color: #2a2622; font-size: 11px; font-weight: 800; line-height: 16px; } #game#game .campaign-preview .commander-seal { width: 18px; height: 18px; font-size: 12px; } /* 적장 줄이 '적 부대 주둔'을 대신해 카드 높이가 그대로입니다. 브리핑은 병력 비교를 줄여 진군 버튼이 잘리지 않게 합니다. */ #game#game .campaign-preview .commander-note + .destination-reason { display: none; } #game#game .dialog:has(.commander-note) .commander-note { margin-bottom: 2px; } #game#game .dialog:has(.commander-note) .vs { margin: 4px 0 6px; } #game#game .dialog:has(.commander-note) .vs-side { padding-top: 5px; padding-bottom: 5px; } #game#game .dialog:has(.commander-note) .vs-side b { margin-bottom: 2px; } /* == end J == */ /* == I == */ /* 이번 주 전장 is an entry of the 도전 chooser now (T-title). */ /* == end I == */ /* == K == */ /* == end K == */ /* == L2 == */ /* 전술 도전 list: every card (battle or minigame) has its picture in the same dark tile with the title under the stars, chapter titles carry a small note, and the footer (star total, 돌아가기) sticks to the dialog bottom. */ #game#game .mission-dialog .mission-chapter { display: flex; align-items: baseline; gap: 10px; } #game#game .mission-dialog .mission-chapter small { font: 600 12px/1.2 "Malgun Gothic", sans-serif; color: var(--c-ink-soft); } #game#game .dialog .skirmish-choice .mission-art canvas.mission-preview { display: block; grid-row: auto; width: 100%; height: 100%; margin: 0; border-radius: 0; } #game#game .mission-dialog .dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } #game#game .mission-dialog .dialog-actions .mission-overview { position: static; margin: 0 auto 0 0; } #game#game .mission-dialog .chapter-lock { margin: 0 0 6px; font: 600 13px/1.3 "Malgun Gothic", sans-serif; color: var(--c-ink); } #game#game .dialog .skirmish-choice.is-locked { background: #2a2622; border-color: #2a2622; cursor: default; opacity: 1; } #game#game .dialog .skirmish-choice.is-locked strong { color: #ece3cf; opacity: .55; } #game#game .dialog .skirmish-choice.is-locked .mini-art { background: #1d1a17; } #game#game .dialog .skirmish-choice.is-locked:active { transform: none; border-bottom-width: var(--btn-lip) !important; } @media (max-height: 540px) { #game#game .dialog .skirmish-choice.mini-choice { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; } #game#game .dialog .skirmish-choice .mini-art { width: 44px; height: 44px; } #game#game .dialog .skirmish-choice .mini-art img { width: 40px; height: 40px; } #game#game .dialog .skirmish-choice .mission-art canvas.mission-preview { display: block; } #game#game .mission-dialog .mission-chapter { margin: 8px 0 5px; } /* The dialog keeps its 16px padding; the footer covers it while it sticks. */ #game#game .mission-dialog .dialog-actions { position: sticky; bottom: -16px; z-index: 2; background: var(--c-paper); margin: 6px 0 -16px; padding: 6px 0 12px; } } @media (max-height: 540px) and (max-width: 640px) { #game#game .dialog .skirmish-choice.mini-choice { column-gap: 6px; padding: 6px; } #game#game .dialog .skirmish-choice.mini-choice strong { font-size: 13px; } } /* Goal card before a minigame challenge: one picture, one sentence, 시작. */ #game#game .goal-dialog { width: min(420px, 100%); text-align: center; } #game#game .goal-dialog .goal-card { display: flex; align-items: center; gap: 16px; text-align: left; margin: 8px 0 4px; } #game#game .goal-dialog .goal-art { display: grid; place-items: center; flex: none; width: 88px; height: 88px; background: #3a4a44; border-radius: 12px; } #game#game .goal-dialog .goal-art img { width: 76px; height: 76px; object-fit: contain; } #game#game .goal-dialog .goal-card p { margin: 0; font: 700 17px/1.45 "Malgun Gothic", sans-serif; color: var(--c-ink); word-break: keep-all; } #game#game .goal-dialog .dialog-actions { justify-content: center; } #game#game .goal-dialog .dialog-actions button { min-width: 140px; min-height: 48px; } /* One retreat button in every raid mode: the text 철수, 72x44, seal red. */ #game#game.mode-raid #hud .battle-bar > .mini-retreat { width: 72px !important; min-width: 72px !important; max-width: 72px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font: 700 15px/1 "Malgun Gothic", sans-serif !important; color: #fbf4e6 !important; background: var(--c-seal) !important; border-color: var(--c-seal-edge) !important; } /* 포격전: the enemy battery's bar runs up to the menu, so 철수 sits on the player's side, in the gap between the player's bar and the wind box. */ #game#game.mode-raid.bombard #hud .battle-bar > .mini-retreat { right: auto !important; left: calc(50% - 152px) !important; } html.in-toss #game#game.mode-raid.bombard #hud .battle-bar > .mini-retreat { right: auto !important; } /* The narrowest phones: the gate pill gives the wider 철수 its room. */ @media (max-height: 540px) and (max-width: 640px) { #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-gate { padding: 0 8px !important; } #game#game.mode-raid.brawl #hud .brawl-bar .brawl-track { width: 30px !important; } } /* Inside Toss the host capsule pushes 철수 108px further left, so on mid-size phones the strip drops the wave pill (the old flag already covered it) and narrows the gate track, as the narrowest phones do outside Toss. */ @media (max-height: 540px) and (max-width: 800px) { html.in-toss #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-wave { display: none !important; } html.in-toss #game#game.mode-raid.brawl #hud .brawl-bar > .brawl-gate { padding: 0 8px !important; } html.in-toss #game#game.mode-raid.brawl #hud .brawl-bar .brawl-track { width: 30px !important; } } /* == end L2 == */ /* == W1 == */ /* 끝없는 고개: the start card, the pick between fights, the result, and the 고개 chip in the battle HUD. Its entry in the 도전 chooser is in T-title. */ #game#game .dialog.w1-dialog { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 16px); } #game#game .w1-dialog h2 { margin-bottom: 10px; } #game#game .w1-dialog p { word-break: keep-all; } /* Start card */ #game#game .w1-hero { display: flex; align-items: center; gap: 12px; } #game#game .w1-hero img { flex: none; width: 56px; height: 56px; padding: 6px; border-radius: 50%; background: #efe4cc; border: 2px solid #c9a35a; object-fit: contain; } #game#game .w1-hero p { margin: 0; font-size: 15px; line-height: 1.45; } #game#game .w1-record { display: flex; align-items: stretch; gap: 10px; margin: 12px 0 10px; } #game#game .w1-best { flex: none; display: grid; justify-items: center; align-content: center; min-width: 88px; padding: 6px 10px; border: 1.5px solid #2a2622; border-radius: 10px; background: #ece3cf; } #game#game .w1-best b { font: 700 28px/1 Gowun, serif; color: #a33328; } #game#game .w1-best span { font: 700 12px/1.3 var(--ui-font, sans-serif); } #game#game .w1-best small { font: 600 11px/1.2 var(--ui-font, sans-serif); color: #6b6151; } #game#game .w1-best.empty b { color: #6b6151; } #game#game .w1-ladder { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; } #game#game .w1-ladder li { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 5px 4px; border: 1.5px dashed #2a262266; border-radius: 10px; text-align: center; } #game#game .w1-ladder i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 700 14px/1 var(--ui-font, sans-serif); font-style: normal; color: #6b6151; border: 2px solid #6b615188; } #game#game .w1-ladder b { font: 700 12px/1.2 var(--ui-font, sans-serif); white-space: nowrap; } #game#game .w1-ladder small { font: 600 11px/1.2 var(--ui-font, sans-serif); color: #6b6151; } #game#game .w1-ladder li.next { border-style: solid; border-color: #2a2622; background: #ece3cf; } #game#game .w1-ladder li.next i { color: #2a2622; border-color: #2a2622; } #game#game .w1-ladder li.done i { color: #fbf1df; background: #a33328; border-color: #5e1a13; transform: rotate(-6deg); } #game#game .w1-ladder li.done small { color: #a33328; font-weight: 700; } #game#game .w1-foot { display: flex; align-items: center; gap: 12px; } #game#game .w1-foot .segment { flex: none; display: flex; gap: 6px; } #game#game .w1-bonus { margin: 0; font: 700 13px/1.35 var(--ui-font, sans-serif); color: #a33328; } #game#game .w1-bonus.quiet { color: #4a4036; font-weight: 600; } /* Between fights */ #game#game .w1-army { display: flex; align-items: center; gap: 8px; } #game#game .w1-arm { position: relative; flex: none; display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: 4px; align-items: center; padding: 3px 8px 3px 3px; border: 1.5px solid #2a2622; border-radius: 10px; background: #ece3cf; } #game#game .w1-arm .portrait-well { position: relative; inset: auto; grid-row: 1 / 3; width: 44px; height: 34px; border-radius: 6px; background: #d9cdb1; } #game#game .w1-arm b { font: 700 18px/1 var(--ui-font, sans-serif); } #game#game .w1-arm span { font: 600 11px/1.2 var(--ui-font, sans-serif); color: #4a4036; } #game#game .w1-arm em { position: absolute; top: -8px; right: -6px; padding: 1px 5px; font: 700 11px/1.3 var(--ui-font, sans-serif); font-style: normal; color: #fbf1df; background: #a33328; border: 1.5px solid #5e1a13; border-radius: 9px; } #game#game .w1-arm.none { opacity: .5; } #game#game .w1-army p { margin: 0; font-size: 12.5px; line-height: 1.35; color: #4a4036; } #game#game .w1-pick h3 { margin: 10px 0 6px; font: 700 14px/1.2 var(--ui-font, sans-serif); color: #a33328; } #game#game .w1-boons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } #game#game .w1-boon { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 92px; padding: 6px 6px 5px !important; text-align: center; color: #2a2622 !important; background: #ece3cf !important; border: 1.5px solid #2a2622 !important; border-bottom-width: var(--btn-lip, 4px) !important; border-radius: var(--btn-r, 10px) !important; box-shadow: none !important; cursor: pointer; height: auto !important; } #game#game .w1-boon img { width: 40px; height: 40px; object-fit: contain; } #game#game .w1-boon b { font: 700 15px/1.2 var(--ui-font, sans-serif); } #game#game .w1-boon small { font: 600 12px/1.25 var(--ui-font, sans-serif); color: #4a4036; word-break: keep-all; } #game#game .w1-boon:active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game .w1-boon:focus-visible { outline: 3px solid #e7bd68; outline-offset: 2px; } #game#game .w1-next { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; line-height: 1.35; } #game#game .w1-next b { color: #a33328; } #game#game .w1-seal { flex: none; display: grid; place-items: center; width: 30px; height: 30px; font: 700 16px/1 Gowun, serif; font-style: normal; color: #fbf1df; background: #a33328; border: 1.5px solid #5e1a13; border-radius: 6px; transform: rotate(-4deg); } #game#game .w1-pick-dialog .dialog-actions { margin-top: 8px; padding-top: 8px; } /* Result */ #game#game .w1-stats .w1-new b { color: #a33328; } #game#game .w1-taken { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 8px 0 0; } #game#game .w1-taken img { width: 28px; height: 28px; padding: 2px; border-radius: 6px; background: #ece3cf; border: 1px solid #2a262233; object-fit: contain; } #game#game .w1-goal { margin: 8px 0 0; font-size: 14px; line-height: 1.4; text-align: center; } /* The 고개 chip over the battlefield, top centre. */ #game#game .w1-pass { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); transform: translateX(-50%); z-index: 6; pointer-events: none; display: flex; align-items: baseline; gap: 6px; padding: 2px 10px; color: #2a2622; background: rgba(236,227,207,.92); border: 1.5px solid #2a2622; border-radius: 9px; } #game#game:not(.mode-battle) .w1-pass { display: none; } #game#game .w1-pass b { font: 700 13px/1.3 var(--ui-font, sans-serif); color: #a33328; } #game#game .w1-pass small { font: 600 11px/1.3 var(--ui-font, sans-serif); } @media (max-height: 360px) { #game#game .w1-dialog h2 { font-size: 18px; margin-bottom: 6px; } #game#game .w1-hero img { width: 44px; height: 44px; } #game#game .w1-hero p { font-size: 13.5px; } #game#game .w1-record { margin: 8px 0 6px; } #game#game .w1-ladder i { width: 24px; height: 24px; font-size: 12px; } #game#game .w1-boon { min-height: 70px; padding: 4px !important; } #game#game .w1-pick-dialog .dialog-actions { margin-top: 6px; padding-top: 6px; } #game#game .w1-boon img { width: 30px; height: 30px; } #game#game .w1-boon b { font-size: 14px; } #game#game .w1-boon small { font-size: 11px; } #game#game .w1-pick h3 { margin: 6px 0 4px; } #game#game .w1-next { margin-top: 5px; font-size: 12px; } #game#game .w1-army p { font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { #game#game .w1-ladder li.done i { transform: none; } } /* == end W1 == */ /* == W2 == */ /* 명장 열전 and 미니게임 2: a commander's seal on a battle card, a chapter's own star count, a locked chapter's meter, the news line on a result, the battle briefing, the goal card's star list, the hold clock and the night raid. */ #game#game .dialog .skirmish-choice .mission-art { position: relative; } #game#game .dialog .skirmish-choice .card-seal { position: absolute; left: 2px; top: 2px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; background: #a33328; color: #ece3cf; font: 800 11px/1 "Malgun Gothic", sans-serif; font-style: normal; } #game#game .mission-dialog .mission-chapter .chapter-stars { margin-left: auto; font: 700 13px/1 "Malgun Gothic", sans-serif; font-style: normal; color: #a33328; } #game#game .mission-dialog .chapter-lock { display: flex; align-items: center; gap: 10px; } #game#game .mission-dialog .chapter-lock .chapter-meter { flex: 0 1 140px; height: 8px; border-radius: 4px; background: #2a262226; overflow: hidden; } #game#game .mission-dialog .chapter-lock .chapter-meter i { display: block; height: 100%; background: #a33328; } #game#game .mission-dialog .chapter-lock b { font: 700 13px/1 "Malgun Gothic", sans-serif; color: #a33328; } #game#game .dialog .chapter-news { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 6px auto 2px; font: 700 14px/1.3 "Malgun Gothic", sans-serif; color: #2a2622; } #game#game .dialog .chapter-news.is-open { padding: 6px 10px; border-radius: 10px; background: #2a2622; color: #ece3cf; } #game#game .dialog .chapter-news.is-open b { color: #fff; } /* Short phones: the news line takes the saved-record note's place so the buttons stay on screen. */ @media (max-height: 360px) { #game#game .dialog .chapter-news { margin: 4px auto 0; font-size: 13px; } #game#game .dialog .chapter-news.is-open { padding: 3px 8px; } #game#game .dialog .chapter-news .commander-seal { width: 18px; height: 18px; font-size: 12px; } #game#game .dialog .chapter-news + .small-note { display: none; } } #game#game .brief-dialog { width: min(600px, 100%); } #game#game .brief-dialog h2 { margin-bottom: 8px; } #game#game .brief-dialog .mission-brief { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; } #game#game .brief-dialog .brief-scene { position: relative; width: 190px; height: 118px; border-radius: 10px; overflow: hidden; background: #3a4a44; } #game#game .brief-dialog .brief-scene canvas.mission-preview { display: block; width: 100%; height: 100%; } #game#game .brief-dialog .brief-weather, #game#game .brief-dialog .brief-hold { position: absolute; bottom: 6px; padding: 2px 8px; border-radius: 6px; font: 800 12px/1.4 "Malgun Gothic", sans-serif; background: #2a2622; color: #ece3cf; } #game#game .brief-dialog .brief-weather { left: 6px; } #game#game .brief-dialog .brief-weather.is-morale, #game#game .brief-dialog .brief-hold { background: #a33328; } #game#game .brief-dialog .brief-hold { right: 6px; } #game#game .brief-dialog .brief-copy { min-width: 0; text-align: left; } #game#game .brief-dialog .commander-note { margin: 0 0 6px; } #game#game .brief-dialog .brief-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } #game#game .brief-dialog .brief-goals li { display: flex; gap: 6px; font: 600 13px/1.35 "Malgun Gothic", sans-serif; color: #2a2622; } #game#game .brief-dialog .brief-goals li span { color: #a33328; flex: none; } #game#game .brief-dialog .brief-rule { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 700 13px/1.3 "Malgun Gothic", sans-serif; color: #2a2622; } #game#game .brief-dialog .brief-rule .auto-seal { position: static; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #2a2622; color: #ece3cf; font-size: 11px; font-weight: 800; } #game#game .brief-dialog .brief-armies { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 0; } #game#game .brief-dialog .brief-armies .troops { gap: 10px; } #game#game .brief-dialog .brief-armies .troop { font-size: 15px; gap: 3px; } #game#game .brief-dialog .brief-armies .troop svg { width: 20px; height: 20px; } #game#game .brief-dialog .brief-armies .vs-label { font: 700 13px/1 "Malgun Gothic", sans-serif; color: #a33328; } @media (max-height: 540px) { #game#game .brief-dialog { padding: 12px 18px !important; } #game#game .brief-dialog h2 { margin-bottom: 6px; } #game#game .brief-dialog .mission-brief { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; } #game#game .brief-dialog .brief-scene { width: 150px; height: 94px; } #game#game .brief-dialog .brief-armies { margin-top: 4px; } #game#game .brief-dialog .dialog-actions { margin-top: 6px; padding-top: 8px; } } @media (max-height: 340px) { #game#game .brief-dialog .brief-goals li, #game#game .brief-dialog .brief-rule { font-size: 12px; } #game#game .brief-dialog .commander-note { font-size: 12px; } } #game#game .goal-dialog .goal-stars { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; text-align: left; counter-reset: star; } #game#game .goal-dialog .goal-stars li { font: 600 13px/1.35 "Malgun Gothic", sans-serif; color: #2a2622; } #game#game .goal-dialog .goal-stars li::before { content: '☆ '; color: #a33328; } /* Short phones (568x320, Toss's top bar too): the three goals share one row so 시작 stays on screen. */ @media (max-height: 340px) { #game#game .goal-dialog .goal-stars { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin-top: 4px; } #game#game .goal-dialog .goal-stars li { font-size: 12px; } } #game#game .topbar .turn-label.hold-clock { color: #a33328; font-weight: 800; } /* Inside Toss, 철수 sits 108px further left and covered the end of the wall raids' objective box (both sides, every phone). The box now ends before 철수; on the narrowest phones only its progress track stays, and the goal card has already said the objective. */ html.in-toss #game#game.mode-raid:not(.brawl):not(.bombard) #hud .battle-bar > .raid-progress { left: 214px; right: calc(80px + var(--toss-cap) + 80px); width: auto; min-width: 0; max-width: none; transform: none; } @media (max-width: 640px) { html.in-toss #game#game.mode-raid:not(.brawl):not(.bombard) #hud .battle-bar > .raid-progress { left: 196px; top: 14px; } html.in-toss #game#game.mode-raid:not(.brawl):not(.bombard) #hud .battle-bar > .raid-progress > :not(.reload-track) { display: none; } } /* 야습: the same raid at night. Only the picture darkens; the HUD stays clear. */ #game#game.night-raid #world { filter: brightness(.58) saturate(.6) sepia(.2) hue-rotate(185deg); } /* == end W2 == */ /* == W3 == */ /* 군기 수집: the 군기 row in 공적, 군기함, the unlock card and the equipped banner on the battle and map bars and on the war-ending cloth. Paper, ink, seal red and the nations' colours only; flat, no gradients. */ #game#game svg.w3-flag { display: block; width: 100%; height: 100%; fill: none; stroke: none; overflow: visible; } #game#game :is(.w3-current, .w3-open, .w3-tile, .w3-wear, .w3-unlock-go) { border: 1.5px solid #2a2622 !important; border-bottom-width: var(--btn-lip) !important; border-radius: var(--btn-r) !important; background: #ece3cf !important; color: #2a2622 !important; box-shadow: none !important; text-shadow: none !important; font-weight: 700; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game :is(.w3-current, .w3-open, .w3-tile, .w3-wear, .w3-unlock-go):active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game :is(.w3-wear, .w3-unlock-go).primary, #game#game .w3-unlock-go { background: #a33328 !important; border-color: #6f1f17 !important; color: #ece3cf !important; } #game#game .w3-wear:disabled { opacity: 1; background: #2a2622 !important; color: #ece3cf !important; border-color: #2a2622 !important; transform: none; } /* 공적 row */ #game#game .w3-row { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto; gap: 8px; align-items: stretch; } #game#game .w3-current { display: flex; align-items: center; gap: 10px; min-height: 58px; height: auto; padding: 6px 12px 6px 8px; text-align: left; } #game#game .w3-current-art { flex: none; width: 46px; height: 48px; } #game#game .w3-current span:last-child { display: grid; gap: 1px; } #game#game .w3-current small { font: 600 11px/1.2 "Malgun Gothic", sans-serif; color: #6b6255; } #game#game .w3-current b { font: 700 15px/1.2 "Malgun Gothic", sans-serif; white-space: nowrap; } #game#game .w3-next { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 6px 12px; border: 1px dashed rgba(42,38,34,.45); border-radius: 10px; min-width: 0; } #game#game .w3-next-art { width: 40px; height: 42px; opacity: .5; } #game#game .w3-next-text { display: grid; gap: 3px; min-width: 0; } #game#game .w3-next-text b { font-size: 13px; color: #2a2622; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game#game .w3-next-text small { font-size: 12px; color: #5a5048; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game#game .w3-next em { font-style: normal; font-weight: 700; font-size: 13px; color: #2a2622; } #game#game .w3-next.w3-all { display: flex; font-size: 13px; color: #a33328; } #game#game .w3-open { min-height: 58px; height: auto; padding: 0 16px; font: 700 15px/1.2 "Malgun Gothic", sans-serif; } /* 군기함 */ #game#game .w3-dialog { width: min(940px, 100%); } #game#game .w3-dialog .w3-count { margin: -6px 0 8px; font-size: 13px; color: #4a4036; } #game#game .w3-box { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; } #game#game .w3-detail { position: sticky; top: 0; display: grid; justify-items: center; gap: 8px; padding: 10px; border: 1.5px solid #2a2622; border-radius: 14px; background: #ece3cf; text-align: center; } #game#game .w3-big { width: 120px; height: 124px; } #game#game .w3-info { display: grid; gap: 3px; } #game#game .w3-info b { font: 700 19px/1.2 Gowun, serif; color: #2a2622; } #game#game .w3-info span { font-size: 13px; color: #2a2622; word-break: keep-all; } #game#game .w3-info small { font-size: 12px; color: #6b6255; } #game#game .w3-wear { width: 100%; min-height: 44px; height: auto; font: 700 15px/1.2 "Malgun Gothic", sans-serif; } #game#game .w3-lock { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; width: 100%; } #game#game .w3-lock em { font-style: normal; font-weight: 700; font-size: 12px; color: #2a2622; } #game#game .w3-groups { min-width: 0; } #game#game .w3-dialog .w3-group { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; font: 800 14px/1.2 "Malgun Gothic", sans-serif; color: #2a2622; } #game#game .w3-dialog .w3-grid + .w3-group { margin-top: 12px; } #game#game .w3-group small { font: 700 12px/1 "Malgun Gothic", sans-serif; color: #6b6255; } #game#game .w3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; } #game#game .w3-tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-height: 0; height: auto; padding: 6px 4px 5px; } #game#game .w3-tile-art { width: 46px; height: 48px; } #game#game .w3-tile b { max-width: 100%; min-height: 2.4em; font: 700 11px/1.2 "Malgun Gothic", sans-serif; white-space: normal; word-break: keep-all; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #game#game .w3-tile.locked { background: transparent !important; border-style: dashed !important; border-bottom-width: 1.5px !important; color: #6b6255 !important; } #game#game .w3-tile.locked:active { transform: none; } #game#game .w3-tile.next { border-style: solid !important; border-color: #a33328 !important; } #game#game .w3-tile.next .w3-tile-art { opacity: .5; } #game#game .w3-tile.selected { outline: 3px solid #a33328; outline-offset: 1px; } #game#game .w3-tile.equipped:not(.selected) { border-color: #a33328 !important; } #game#game .w3-fresh { position: absolute; top: -6px; right: -4px; padding: 2px 6px; border-radius: 8px; background: #a33328; color: #ece3cf; font: 700 11px/1.2 "Malgun Gothic", sans-serif; font-style: normal; } #game#game .w3-worn { position: absolute; top: 4px; right: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #a33328; color: #ece3cf; font: 800 11px/1 "Malgun Gothic", sans-serif; font-style: normal; } @media (max-height: 540px) { #game#game .w3-box { grid-template-columns: 158px minmax(0, 1fr); gap: 10px; } #game#game .w3-detail { padding: 8px; gap: 6px; } #game#game .w3-big { width: 84px; height: 88px; } #game#game .w3-info b { font-size: 16px; } #game#game .w3-info span { font-size: 12px; } #game#game .w3-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 5px; } #game#game .w3-tile-art { width: 38px; height: 40px; } } @media (max-width: 640px) { #game#game .w3-row { grid-template-columns: auto minmax(0, 1fr); } #game#game .w3-row .w3-open { grid-column: 1 / -1; min-height: 44px; } #game#game .w3-current b { font-size: 13px; } } /* Unlock card: top left, clear of the Toss capsule, above dialogs; 달기 flies it. */ #game#game #w3-unlock { position: fixed; z-index: 46; top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 10px; max-width: min(330px, calc(100vw - 20px)); padding: 7px 8px 7px 10px; border: 2px solid #2a2622; border-radius: 14px; background: #ece3cf; color: #2a2622; box-shadow: 0 6px 18px rgba(42,38,34,.35); } #game#game #w3-unlock[hidden] { display: none; } #game#game #w3-unlock.show { animation: w3-drop .32s ease-out both; } #game#game .w3-unlock-art { flex: none; width: 42px; height: 46px; } #game#game .w3-unlock-text { display: grid; gap: 1px; min-width: 0; } #game#game .w3-unlock-text small { font: 700 11px/1.2 "Malgun Gothic", sans-serif; color: #a33328; } #game#game .w3-unlock-text b { font: 700 17px/1.2 Gowun, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game#game .w3-unlock-go { flex: none; min-height: 40px; height: 40px; padding: 0 14px; font: 700 14px/1 "Malgun Gothic", sans-serif; } #game#game .w3-unlock-x { flex: none; width: 32px; min-height: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #2a2622; font: 700 20px/1 "Malgun Gothic", sans-serif; box-shadow: none; } @keyframes w3-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { #game#game #w3-unlock.show { animation: none; } } /* The equipped banner stands in the place of the word 아군 on the battle bar (same box, the word stays for screen readers) and beside the nation on the map bar. */ #game#game[data-w3-flag] #top-info .army-stat:not(.enemy) > span:first-child { color: transparent; background: var(--w3-flag) center / contain no-repeat; } #game#game[data-w3-flag].mode-campaign #top-info .faction-label::before { content: ''; display: inline-block; flex: none; width: 18px; height: 18px; margin-right: 5px; vertical-align: -3px; background: var(--w3-flag) center / contain no-repeat; } /* A won war raises the equipped banner: the cloth takes its shape and colours. */ #game#game #war-ending[data-w3-flag] .we-cloth { background: transparent; clip-path: none; border: 0; box-shadow: none; } #game#game #war-ending[data-w3-flag] .we-cloth::before, #game#game #war-ending[data-w3-flag] .we-cloth::after, #game#game #war-ending[data-w3-flag] .we-glyph { display: none; } #game#game #war-ending .w3-ending { position: absolute; inset: 0; display: block; } #game#game #war-ending .w3-ending svg { display: block; width: 100%; height: 100%; } /* == end W3 == */ /* == W4 == */ /* 주간 전장 시즌: medal seals (flat fills: 금 #b8892b, 은 #8a8378, 동 #8a5a3a; an open week is a dashed ring), the theme on the title tile, the medal ladder on the result and in 공적, and the row of the last 12 weeks in 공적. */ #game#game .wk-seal { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 700 13px/1 var(--ui-font, sans-serif); font-style: normal; color: #ece3cf; background: #2a2622; border: 2px solid #2a2622; box-sizing: border-box; } #game#game .wk-seal[data-medal="3"] { background: #b8892b; border-color: #6e5016; } #game#game .wk-seal[data-medal="2"] { background: #8a8378; border-color: #4c4740; } #game#game .wk-seal[data-medal="1"] { background: #8a5a3a; border-color: #4f3220; } #game#game .wk-seal[data-medal="0"] { color: #2a2622; background: transparent; border: 2px dashed rgba(42,38,34,.45); } /* The ladder: the theme, then 동 승리 · 은 PAR · 금 marks; held seals filled, others a pale outline. */ #game#game .wk-ladder { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 2px; } #game#game .wk-ladder > b { font: 700 14px/1.2 var(--ui-font, sans-serif); color: #a33328; white-space: nowrap; margin-right: 4px; } #game#game .wk-step { display: inline-flex; align-items: center; gap: 5px; } #game#game .wk-step small { font: 600 12px/1.2 var(--ui-font, sans-serif); color: #4a4036; white-space: nowrap; font-variant-numeric: tabular-nums; } #game#game .wk-step .wk-seal { width: 30px; height: 30px; font-size: 14px; } #game#game .wk-step:not(.got) .wk-seal { color: rgba(42,38,34,.55); background: transparent; border: 2px solid rgba(42,38,34,.3); } #game#game .wk-step.got small { color: #2a2622; font-weight: 700; } #game#game .wk-step.new .wk-seal { animation: wk-stamp .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: .25s; } @keyframes wk-stamp { from { transform: scale(1.9) rotate(-18deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #game#game .wk-step.new .wk-seal { animation: none; } } #game#game .wk-result .wk-step .wk-seal { width: 36px; height: 36px; font-size: 16px; border-width: 2.5px; } #game#game .wk-result > b { font-size: 16px; } #game#game .wk-goal { margin: 6px 0 0; text-align: center; font-weight: 600; color: #2a2622; } /* 공적: the theme's picture, the armies as pictures, the time left in the heading. */ #game#game .merit-weekly .wk-art { flex: none; width: 44px; height: 44px; object-fit: contain; } #game#game .merit-weekly .wk-armies { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #game#game .merit-weekly .wk-armies > i { font-style: normal; font-size: 12px; color: #4a4036; } #game#game .merit-weekly .wk-armies .troops { gap: 6px; } #game#game .merit-weekly .wk-armies .troop { font-size: 13px; gap: 2px; } #game#game .merit-weekly .wk-armies .troop svg { width: 16px; height: 18px; } #game#game .merit-h .wk-left { margin-left: 8px; padding: 1px 7px; font-size: 11px; font-weight: 700; color: #fbf1df; background: #a33328; border-radius: 9px; vertical-align: 1px; } #game#game .merit-dialog .wk-ladder { justify-content: flex-start; margin: 8px 2px 0; } #game#game .merit-dialog .wk-ladder > b { color: #2a2622; font-size: 13px; } /* The last 12 weeks, oldest first; this week last with a seal-red label. */ #game#game .wk-history { margin: 8px 2px 0; } #game#game .wk-history p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #4a4036; } #game#game .wk-history p em { font-style: normal; padding: 1px 7px; font-size: 11px; font-weight: 700; color: #2a2622; border: 1.5px solid #2a2622; border-radius: 9px; } #game#game .wk-history ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } #game#game .wk-history li { display: grid; justify-items: center; gap: 2px; min-width: 32px; } #game#game .wk-history li small { font-size: 10px; line-height: 1.1; color: #4a4036; white-space: nowrap; } #game#game .wk-history li.now small { color: #a33328; font-weight: 700; } @media (max-height: 420px) { #game#game .wk-ladder { gap: 10px; margin: 0; } #game#game .wk-step .wk-seal { width: 26px; height: 26px; font-size: 12px; } #game#game .wk-result .wk-step .wk-seal { width: 32px; height: 32px; font-size: 14px; } #game#game .wk-goal { margin-top: 4px; font-size: 13px; } #game#game .wk-history li { min-width: 28px; } #game#game .wk-history .wk-seal { width: 24px; height: 24px; font-size: 12px; } } /* == end W4 == */ /* == W5 == */ /* 난세 칙령: a row of picture chips on the 새 전쟁 dialog, up to two pressed. Pressed chips fill with ink; locked ones are ink silhouettes. */ #game#game .w5-edicts { display: grid; gap: 6px; margin-top: 12px; } #game#game .w5-edicts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: #6d6550; line-height: 16px; } #game#game .w5-edicts-head b { color: #2a2622; } #game#game .w5-edicts-head em { font-style: normal; font-weight: 700; color: #a33328; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game#game .w5-edicts.is-locked .w5-edicts-head em { color: #6d6550; font-weight: 600; } /* A tap on a locked edict says why nothing was chosen, in seal red. */ #game#game .w5-edict-note .w5-lock-line { color: #a33328; font-weight: 700; } #game#game .w5-edict-note { margin: 0; font-size: 12px; line-height: 16px; color: #4a4036; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game#game .w5-edict-note b { color: #a33328; } #game#game .w5-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } #game#game .dialog .w5-chip { position: relative; display: grid !important; justify-items: center; align-content: center; gap: 1px; min-width: 0; height: 54px !important; min-height: 0 !important; padding: 2px 2px 1px !important; color: #2a2622 !important; background: #ece3cf !important; border: 1.5px solid #2a2622 !important; border-bottom-width: 4px !important; border-radius: 10px !important; box-shadow: none !important; font: 700 12px/1.15 var(--ui-font, sans-serif) !important; letter-spacing: 0 !important; cursor: pointer; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game .dialog .w5-chip:active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game .dialog .w5-chip[aria-pressed=true] { color: #ece3cf !important; background: #2a2622 !important; } #game#game .w5-chip-art { display: block; width: 28px; height: 28px; } #game#game .w5-chip-art img { display: block; width: 100%; height: 100%; object-fit: contain; } /* The merit a chip adds: a seal-red tag in the chip's top corner. */ #game#game .w5-chip-art small { position: absolute; top: 3px; right: 3px; padding: 2px 4px; border-radius: 6px; white-space: nowrap; font: 700 10px/1 var(--ui-font, sans-serif); color: #fbf1df; background: #a33328; border: 1px solid #5e1a13; } #game#game .w5-chip[aria-pressed=true] .w5-chip-art small { color: #2a2622; background: #f0c56a; border-color: #f0c56a; } #game#game .w5-chip b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; line-height: 1.1; } #game#game .dialog .w5-chip.is-locked { cursor: default; color: #8a8072 !important; border-color: rgba(42,38,34,.4) !important; border-bottom-width: 1.5px !important; border-style: dashed !important; } #game#game .w5-chip.is-locked img { filter: brightness(0) opacity(.3); } #game#game .w5-chip.is-locked small { display: none; } /* Edict seals beside the turn on the map and in the chronicle. */ #game#game .w5-seals { display: inline-flex; gap: 2px; vertical-align: middle; } #game#game .w5-seals i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; font: 700 12px/1 Gowun, serif; font-style: normal; color: #fbf1df; background: #a33328; border: 1px solid #5e1a13; } #game#game .topbar .w5-seals, #game#game #top-info .w5-seals { margin-left: 4px; } /* 공적: edict dots under a conquest star, and the 전쟁 연대기 section. */ #game#game .merit-wars i:has(.w5-dots) { grid-auto-flow: column; justify-content: center; gap: 5px; } #game#game .merit-wars i .w5-dots { font: 700 10px/1 var(--ui-font, sans-serif); letter-spacing: 1px; color: #f0c56a; } #game#game .w5-annals, #game#game .w5-wars { display: grid; gap: 6px; } #game#game .w5-note { margin: 0; padding: 7px 10px; font-size: 13px; color: #5a5048; border: 1px dashed rgba(42,38,34,.4); border-radius: 10px; } #game#game .w5-note.w5-locked::before { content: '鎖'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 3px; font: 700 11px/1 Gowun, serif; color: #ece3cf; background: #2a2622; vertical-align: 1px; } #game#game .w5-next { display: grid; gap: 3px; } #game#game .w5-next > small { font-size: 12px; color: #6d6550; font-weight: 700; } #game#game .w5-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } #game#game .w5-goal { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 3px; align-items: center; padding: 7px 10px; border: 1px solid #a33328; border-radius: 10px; background: rgba(255,255,255,.35); font-size: 12px; color: #5a5048; } #game#game .w5-goal b { font-size: 14px; color: #2a2622; } #game#game .w5-goal > span:not(.merit-bar) { grid-column: 1 / -1; } #game#game .w5-goal .merit-bar { grid-column: 1; } #game#game .w5-goal em { grid-column: 2; grid-row: 3; font-style: normal; font-weight: 700; color: #2a2622; white-space: nowrap; } #game#game .w5-goal.done { border-color: rgba(42,38,34,.25); background: rgba(163,51,40,.1); } #game#game .w5-goal.done em { grid-row: 1; color: #a33328; } #game#game .dialog .w5-war { display: grid !important; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; min-height: 46px !important; height: auto !important; padding: 5px 10px !important; text-align: left; color: #2a2622 !important; background: rgba(255,255,255,.35) !important; border: 1px solid rgba(42,38,34,.3) !important; border-radius: 10px !important; box-shadow: none !important; font: 600 13px/1.2 var(--ui-font, sans-serif) !important; letter-spacing: 0 !important; cursor: pointer; } #game#game .w5-war-seal, #game#game .w5-card-seal { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; font: 700 18px/1 Gowun, serif; color: #fbf1df; background: #a33328; border: 1px solid #5e1a13; } #game#game .w5-war.lost .w5-war-seal, #game#game .w5-card.lost .w5-card-seal { background: #3c3a37; border-color: #1b1916; } #game#game .w5-war.draw .w5-war-seal, #game#game .w5-card.draw .w5-card-seal { background: #5f5242; border-color: #3a3128; } #game#game .w5-war.unified .w5-war-seal, #game#game .w5-card.unified .w5-card-seal { box-shadow: 0 0 0 2px #f0c56a; } #game#game .w5-war-main { display: grid; gap: 2px; min-width: 0; } #game#game .w5-war-main b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game#game .w5-war-main small { font-size: 12px; color: #5a5048; } #game#game .w5-war em { font-style: normal; font-weight: 700; color: #a33328; white-space: nowrap; } #game#game .dialog .w5-more { justify-self: start; height: 38px !important; min-height: 38px !important; padding: 0 16px !important; color: #2a2622 !important; background: #ece3cf !important; border: 1.5px solid #2a2622 !important; border-bottom-width: 4px !important; border-radius: 10px !important; box-shadow: none !important; font: 700 13px/1 var(--ui-font, sans-serif) !important; } /* One war's page. */ #game#game .w5-war-dialog { width: min(560px, 100%); } #game#game .w5-card { display: flex; align-items: center; gap: 14px; } #game#game .w5-card .w5-card-seal { width: 52px; height: 52px; font-size: 30px; } #game#game .w5-card > div { display: grid; gap: 3px; } #game#game .w5-card b { font: 700 20px/1.2 Gowun, serif; color: #2a2622; } #game#game .w5-card > div span { font-size: 13px; color: #5a5048; } #game#game .w5-medals { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin: 12px 0 8px; } #game#game .w5-medal { display: grid; justify-items: center; gap: 1px; text-align: center; } #game#game .w5-medal img { width: 40px; height: 40px; object-fit: contain; } #game#game .w5-medal b { font: 700 18px/1.15 Gowun, serif; color: #2a2622; } #game#game .w5-medal b small { font-size: .65em; color: #6d6550; } #game#game .w5-medal span { font-size: 12px; color: #6d6550; white-space: nowrap; } #game#game .w5-card-edicts { display: flex; flex-wrap: wrap; gap: 6px; } #game#game .w5-edict-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid rgba(42,38,34,.3); border-radius: 8px; font-size: 13px; font-weight: 700; color: #2a2622; } #game#game .w5-edict-tag i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; font: 700 12px/1 Gowun, serif; font-style: normal; color: #fbf1df; background: #a33328; } #game#game .w5-edict-tag.none { padding: 3px 10px; color: #6d6550; font-weight: 600; } /* 돌아가기 stays pinned to the bottom of the chronicle and a war's page. */ @media (max-height: 540px) { #game#game .dialog:is(.w5-chronicle, .w5-war-dialog) .dialog-actions { position: sticky; bottom: -16px; z-index: 2; background: var(--c-paper); margin: 8px 0 -16px; padding: 8px 0 12px; } #game#game .w5-war-dialog .w5-card .w5-card-seal { width: 40px; height: 40px; font-size: 24px; } #game#game .w5-medals { margin: 8px 0 6px; } #game#game .w5-medal img { width: 30px; height: 30px; } #game#game .w5-medal b { font-size: 16px; } } /* The war's closing scene gets a sixth medal when edicts were taken. */ #game#game #war-ending .we-medal:nth-child(6) { animation-delay: 2.55s; } /* Low screens: the dialog keeps 출정 on screen. */ @media (max-height: 420px) { #game#game .dialog.new-war-dialog { gap: 8px; } #game#game .new-war-dialog .faction-choices { margin-bottom: 4px; } #game#game .dialog.new-war-dialog h2 { margin-bottom: 6px; } #game#game .w5-edicts { margin-top: 8px; gap: 4px; } #game#game .dialog .w5-chip { height: 48px !important; } #game#game .w5-chip-art { width: 24px; height: 24px; } } @media (max-height: 360px) { #game#game .dialog.new-war-dialog { padding-top: 8px !important; padding-bottom: 8px !important; } #game#game .w5-edict-note { font-size: 11px; line-height: 13px; } #game#game .dialog.new-war-dialog { gap: 6px; } #game#game .dialog.new-war-dialog h2 { font-size: 18px; margin-bottom: 0; } #game#game .new-war-dialog .faction-choices { margin-bottom: 0; } /* The labels sit beside their controls. */ #game#game .new-war-dialog .options-row { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; } #game#game .w5-edicts { margin-top: 0; } #game#game .w5-edicts-head { font-size: 12px; line-height: 14px; } #game#game .dialog .w5-chip { height: 42px !important; gap: 0; } #game#game .w5-chip-art { width: 18px; height: 18px; } #game#game .w5-chip-art small { top: 2px; right: 2px; padding: 1px 3px; font-size: 9px; } #game#game .dialog.new-war-dialog .dialog-actions { padding-top: 8px; margin-top: 8px; } } /* Inside Toss the overlay keeps 44px clear at the top, so the squeeze starts earlier: at 390px tall the dialog takes the low layout, and at 320px the chips drop their pictures (buttons keep their 44px). */ @media (max-height: 420px) { html.in-toss #game#game .dialog.new-war-dialog { gap: 6px; padding-top: 8px !important; padding-bottom: 8px !important; } html.in-toss #game#game .dialog.new-war-dialog h2 { font-size: 18px; line-height: 24px; margin-bottom: 0; } html.in-toss #game#game .new-war-dialog .faction-choices { margin-bottom: 0; } html.in-toss #game#game .new-war-dialog .options-row { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 0; } html.in-toss #game#game .w5-edicts { margin-top: 0; } html.in-toss #game#game .w5-edict-note { font-size: 11px; line-height: 13px; } html.in-toss #game#game .dialog.new-war-dialog .dialog-actions { padding-top: 8px; margin-top: 0; } } @media (max-height: 330px) { html.in-toss #game#game .dialog.new-war-dialog { gap: 5px; } html.in-toss #game#game .dialog.new-war-dialog h2 { line-height: 20px; } html.in-toss #game#game .dialog .w5-chip { height: 34px !important; } html.in-toss #game#game .w5-chip-art img { display: none; } html.in-toss #game#game .w5-chip-art { width: auto; height: auto; } html.in-toss #game#game .w5-chip-art small { position: static; display: block; padding: 1px 4px; font-size: 9px; } } /* Outside Toss at 320px: the chips and the gap above 출정 give back 12px so it is not clipped. */ @media (max-height: 330px) { html #game#game .dialog .w5-chip { height: 38px !important; } html #game#game .w5-edicts { gap: 2px; } html #game#game .dialog.new-war-dialog .dialog-actions { margin-top: 0; } } @media (max-width: 640px) { #game#game .w5-goals { grid-template-columns: 1fr; } #game#game .dialog .w5-war { grid-template-columns: 30px minmax(0, 1fr) auto; } #game#game .w5-war em { display: none; } } /* == end W5 == */ /* Every dialog keeps its buttons (돌아가기, 계속하기, ...) pinned to the bottom edge while its content scrolls under them, so a long screen such as 공적 or 설정 never hides the way back. A soft shade above the bar shows there is more to scroll. */ #game#game .overlay .dialog > .dialog-actions { position: sticky; bottom: -16px; z-index: 3; background: var(--c-paper); padding-bottom: 16px; margin-bottom: -16px; box-shadow: 0 -10px 12px -8px #2a262233; } /* UI polish slots (last in the file, so they win ties). */ /* == U1 == */ /* Title, settings, 조작 안내, 만든 사람, the Toss exit question, the upright guard and the loading view. Paper, ink and seal only; 8px rhythm. */ /* ── Title: the T-title block at the end of this file lays it out. ── */ /* The war recap: one quiet line in ink above 이어 하기. */ #game#game .title-screen .ts-recap { padding: 4px 12px; font-size: 13px; border-width: 1.5px; } /* ── Dialog family (settings, help, credits, Toss exit) ─────────── */ #game#game .dialog:is(.game-settings, .help-dialog, .credits-dialog, .confirm-dialog) h2 { color: #2a2622; font-size: 22px; line-height: 28px; margin: 0 0 12px; } @media (max-height: 400px) { #game#game .dialog:is(.game-settings, .help-dialog, .credits-dialog, .confirm-dialog) h2 { font-size: 20px; line-height: 26px; margin-bottom: 8px; } } /* The shade over the pinned buttons only shows while there is more to scroll. */ @supports (animation-timeline: scroll()) { #game#game .overlay .dialog:is(.game-settings, .help-dialog, .credits-dialog, .confirm-dialog) > .dialog-actions { box-shadow: none; animation: u1-bar-shade linear both; animation-timeline: scroll(nearest block); } } @keyframes u1-bar-shade { 0%, 92% { box-shadow: 0 -10px 12px -8px #2a262233; } 100% { box-shadow: 0 -10px 12px -8px #2a262200; } } /* ── Settings: three columns on a phone held sideways ───────────── 소리·음악·화면 (and this screen's extra row) | 부장 지휘 with its arms | the guides. Every row is the one button shape: paper, ink edge, 4px lip. */ #game#game .dialog.game-settings { width: min(760px, 100%); max-width: none; } #game#game .dialog.game-settings .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: start; margin: 0; } #game#game .game-settings .settings-grid > [data-action=toggle-sound] { grid-column: 1; grid-row: 1; } #game#game .game-settings .settings-grid > [data-action=toggle-music] { grid-column: 1; grid-row: 2; } #game#game .game-settings .settings-grid > [data-action=settings-fullscreen] { grid-column: 1; grid-row: 3; } #game#game .game-settings .settings-grid > :is([data-action=control-settings], [data-action=war-log], [data-action=replay-intro]) { grid-column: 1; grid-row: 4; } #game#game .game-settings .settings-grid > .setting-auto { grid-column: 2; grid-row: 1 / span 4; } #game#game .game-settings .settings-grid > [data-action=settings-help] { grid-column: 3; grid-row: 1; } #game#game .game-settings .settings-grid > [data-action=reset-tips] { grid-column: 3; grid-row: 2; } #game#game .game-settings .settings-grid > [data-action=settings-credits] { grid-column: 3; grid-row: 3; } #game#game .dialog.game-settings .setting-row { box-sizing: border-box; height: 44px !important; min-height: 44px !important; padding: 0 12px 0 14px !important; gap: 8px; border: 1.5px solid #2a2622 !important; border-bottom-width: var(--btn-lip) !important; border-radius: var(--btn-r) !important; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game .dialog.game-settings .setting-row:active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game .dialog.game-settings .setting-row > :is(span, b) { white-space: nowrap; } #game#game .dialog.game-settings .setting-row > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } #game#game .dialog.game-settings .setting-row b { font-size: 14px; font-weight: 700; color: #a33328; } #game#game .dialog.game-settings .setting-row[aria-pressed=false] b { color: #6b6255; } #game#game .dialog.game-settings .setting-auto { display: grid; gap: 8px; } #game#game .dialog.game-settings .auto-arms { gap: 8px; margin: 0; } #game#game .dialog.game-settings .auto-arms .auto-arm { box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 6px !important; gap: 6px; border: 1.5px solid #2a2622 !important; border-bottom-width: var(--btn-lip) !important; font: 700 14px/1 var(--ui-font, sans-serif) !important; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game .dialog.game-settings .auto-arms .auto-arm:not(:disabled):active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game .dialog.game-settings .auto-arms .auto-arm i { width: 20px; height: 20px; font-size: 12px; border-radius: 5px; } #game#game .dialog.game-settings .auto-arms .auto-arm:disabled { opacity: .4; } #game#game .dialog.game-settings .setting-auto .setting-note { padding: 0 2px; font-size: 12px; line-height: 1.45; color: #6b6255; } /* In a battle or on the map, the note on saving fills the free cell under the guides. */ #game#game .dialog.game-settings .settings-grid > .settings-note { grid-column: 3; grid-row: 4; align-self: center; margin: 0; padding: 0 2px; font-size: 12px; line-height: 1.35; color: #6b6255; word-break: keep-all; } @media (max-height: 400px) { #game#game .dialog.game-settings .settings-grid { row-gap: 6px; } #game#game .dialog.game-settings .setting-auto { gap: 6px; } #game#game .dialog.game-settings > .dialog-actions { margin-top: 8px; padding-top: 8px; } } /* Narrow phones keep the three columns: smaller type, and each arm chip stacks its mark over its name. */ @media (max-width: 640px) { #game#game .dialog.game-settings .settings-grid { column-gap: 8px; } #game#game .dialog.game-settings .setting-row { padding: 0 10px 0 12px !important; gap: 6px; font-size: 14px !important; } #game#game .dialog.game-settings .setting-row b { font-size: 13px; } #game#game .dialog.game-settings .auto-arms { gap: 6px; } #game#game .dialog.game-settings .auto-arms .auto-arm { flex-direction: column; justify-content: center; gap: 2px; padding: 0 2px !important; font-size: 12px !important; } #game#game .dialog.game-settings .auto-arms .auto-arm i { width: 16px; height: 16px; font-size: 10px; border-radius: 4px; } } /* Low screens: the settings, help and credits dialogs give back 4px of edge. */ @media (max-height: 360px) { #game#game .dialog:is(.game-settings, .help-dialog, .credits-dialog) { padding: 12px 16px !important; } #game#game .dialog:is(.game-settings, .help-dialog, .credits-dialog) > .dialog-actions { padding-bottom: 12px; margin-bottom: -12px; bottom: -12px; } } /* ── 조작 안내: a picture, the name in bold, one or two lines ─────── */ #game#game .overlay[data-kind=help] .dialog.help-dialog { width: min(800px, 100%); } #game#game .help-dialog .help-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; } #game#game .help-dialog .help-row { position: relative; display: block; min-height: 28px; padding: 6px 0; border-top: 1px solid rgba(42, 38, 34, .12); font: 500 13px/20px var(--ui-font, sans-serif); color: #4a4036; word-break: keep-all; } #game#game .help-dialog .help-row:nth-child(-n + 2) { border-top: 0; padding-top: 0; } #game#game .help-dialog .help-row.has-art { padding-left: 40px; } #game#game .help-dialog .help-row img { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; object-fit: contain; } #game#game .help-dialog .help-row:nth-child(-n + 2) img { top: -4px; } #game#game .help-dialog .help-row :is(strong, span) { display: inline; margin: 0; font: inherit; line-height: inherit; } #game#game .help-dialog .help-row strong { margin-right: 6px; font-size: 14px; font-weight: 700; color: #2a2622; } #game#game .help-dialog .help-row span { color: #4a4036; } @media (max-width: 640px) { #game#game .help-dialog .help-rows { column-gap: 16px; } } /* ── 만든 사람 · 출처: a printed colophon, name on the left ────────── */ #game#game .overlay[data-kind=help] .dialog.credits-dialog { width: min(600px, 100%); } #game#game .credits-dialog .help-rows { grid-template-columns: 1fr; gap: 0; margin: 0; } #game#game .credits-dialog .help-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 8px 0; border-top: 1px solid rgba(42, 38, 34, .12); } #game#game .credits-dialog .help-row:first-child { border-top: 0; padding-top: 0; } #game#game .credits-dialog .help-row strong { margin: 0; font: 700 13px/1.4 var(--ui-font, sans-serif); color: #6b6255; } #game#game .credits-dialog .help-row span { font: 500 14px/1.45 var(--ui-font, sans-serif); color: #2a2622; } @media (max-width: 640px), (max-height: 360px) { #game#game .credits-dialog .help-row { grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; padding: 6px 0; } #game#game .credits-dialog .help-row span { font-size: 13px; } } /* ── Toss exit: a small question with two equal answers ─────────── */ #game#game .dialog.confirm-dialog { width: min(400px, 100%); } #game#game .dialog.confirm-dialog p { margin: 0; font: 500 14px/1.5 var(--ui-font, sans-serif); color: #4a4036; } #game#game .dialog.confirm-dialog .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } #game#game .dialog.confirm-dialog .dialog-actions button { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; } /* ── Held upright: the same dark field as loading, paper type, one button ── */ #game#game #orientation-guard { background: #203734; color: #ece3cf; padding: 24px; } #game#game #orientation-guard svg { width: 88px; height: 70px; margin: 0 0 24px; stroke: #ece3cf; stroke-width: 2.5; } #game#game #orientation-guard h2 { margin: 0 0 8px; font: 700 22px/1.3 Gowun, serif; color: #ece3cf; } #game#game #orientation-guard p { margin: 0 0 24px; font: 500 14px/1.6 var(--ui-font, sans-serif); color: rgba(236, 227, 207, .78); } #game#game #orientation-guard button { box-sizing: border-box; height: 44px; min-width: 128px; padding: 0 24px; font: var(--btn-font); color: #2a2622; background: #ece3cf; border: 1.5px solid #2a2622; border-bottom-width: var(--btn-lip); border-radius: var(--btn-r); box-shadow: none; cursor: pointer; } #game#game #orientation-guard button:active { transform: translateY(2px); border-bottom-width: 2px; } /* ── Loading: the key art, a thin seal-red bar and one quiet line ── */ #game#game #loading-bar { border-radius: 2px; overflow: hidden; } /* == end U1 == */ /* == U2 == */ /* U2 · campaign: the map bar and side panel, briefings, war events, the war log, the closing scene and the 전쟁 연대기 pages. Paper, ink and seal only. */ /* Dialogs of this group: the shade over the pinned button bar shows only while there is more to scroll (a hairline otherwise); an event card with no bar has no empty strip at its foot. */ #game#game .overlay:is([data-kind=new], [data-kind=encounter], [data-kind=offer], [data-kind=log], [data-kind=chronicle], [data-kind=chronicle-war], [data-kind=merge], [data-kind=target], [data-kind=war-result]) .dialog > .dialog-actions { box-shadow: none; } @supports (animation-timeline: scroll()) { #game#game .overlay:is([data-kind=new], [data-kind=encounter], [data-kind=offer], [data-kind=log], [data-kind=chronicle], [data-kind=chronicle-war], [data-kind=merge], [data-kind=target], [data-kind=war-result]) .dialog > .dialog-actions { animation: u2-more linear both; animation-timeline: scroll(nearest block); } } @keyframes u2-more { 0%, 96% { box-shadow: 0 -10px 12px -8px #2a262233; } 100% { box-shadow: none; } } #game#game .overlay[data-kind=offer] .dialog > .dialog-actions:empty { display: none; } /* ── Map bar: one line at every width ── */ #game#game.mode-campaign #top-info > * { white-space: nowrap; flex: none; } html.in-toss #game#game.mode-campaign #top-info { gap: 10px; } @media (max-width: 700px) { /* Inside Toss the capsule takes 108px: the purse keeps its icon and number (its label says 군자금). */ html.in-toss #game#game.mode-campaign #top-info .campaign-wallet > span { display: none; } html.in-toss #game#game.mode-campaign #top-info .turn-label { padding-left: 10px; } html.in-toss #game#game.mode-campaign .top-info .top-map-toggle { margin-left: 2px; padding: 0 10px !important; } } /* ── Side panel ── */ /* Neighbouring lands: arrow and name; a tag only when it says something (the enemy strength, a join, the goal). Tags stay readable at 11px. */ #game#game .destination-tabs button .dest-badge.move { display: none; } #game#game .destination-tabs button .dest-tags:not(:has(> :not(.move))) { display: none; } #game#game .destination-tabs button .dest-badge, #game#game .destination-tabs button .dest-goal { font: 700 11px/14px var(--ui-font, sans-serif) !important; padding: 0 5px !important; border-radius: 4px; border: 0; } #game#game .destination-tabs button .dest-tags { gap: 3px; margin-top: 2px; } #game#game .destination-tabs button strong { font-size: 14px !important; letter-spacing: -.02em; } @media (max-height: 540px) { #game#game .destination-tabs button strong { font-size: 13px !important; } #game#game .destination-tabs button[aria-pressed=true] { border-width: 2px !important; border-bottom-width: 4px !important; } } /* The narrowest panel (about 230px): four-letter names and two-word buttons keep a margin. */ @media (max-width: 640px) and (orientation: landscape) { #game#game .destination-tabs button { padding: 2px 2px 2px 16px !important; } #game#game .destination-tabs button .dest-arrow { left: 3px; width: 12px; height: 12px; margin-top: -6px; } #game#game .destination-tabs button .dest-arrow::after { width: 8px; height: 8px; } #game#game .destination-tabs button[aria-pressed=true] .dest-arrow::after { width: auto; height: auto; font-size: 9px; } #game#game .destination-tabs button strong { font-size: 12px !important; letter-spacing: -.06em; } #game#game .campaign-decision > .campaign-actions > button { font-size: 13px !important; letter-spacing: -.03em; } } /* The panel reads from the top down: who, where, what, then the buttons. */ #game#game.mode-campaign .campaign-decision > .campaign-empty { margin: 6px 0 2px; padding: 0; } #game#game.mode-campaign .campaign-empty strong { font-size: 15px; line-height: 1.35; color: #ece3cf; word-break: keep-all; } #game#game.mode-campaign .campaign-empty p { margin-top: 4px; font-size: 13px; line-height: 1.4; color: #d9ccb0; } /* A new army waiting: one plate with its size, then 다음 턴에 배치. */ #game#game .campaign-decision > .campaign-actions:has(.reinforcement-price) { gap: 8px; } #game#game .campaign-decision .reinforcement-price { display: grid; gap: 2px; width: 100%; padding: 8px 12px; box-sizing: border-box; border: 1px solid #ece3cf40; border-radius: 10px; } #game#game .campaign-decision .reinforcement-price b { font-size: 15px; line-height: 1.3; color: #ece3cf; } #game#game .campaign-decision .reinforcement-price small { font-size: 13px; line-height: 1.35; color: #d9ccb0; } #game#game .campaign-decision .reinforcement-price { justify-self: stretch; } /* A low phone with four or more neighbours (two rows of tabs): the outcome takes one line and the gaps tighten, so 턴 종료 is not cut off. */ @media (max-height: 360px) and (orientation: landscape) { #game#game .campaign-decision:has(.destination-tabs > :nth-child(4)) { gap: 4px; } #game#game .campaign-decision:has(.destination-tabs > :nth-child(4)) .destination-tabs { row-gap: 4px; } #game#game .campaign-decision:has(.destination-tabs > :nth-child(4)) .campaign-preview { grid-template-columns: minmax(0, 1fr) !important; } #game#game .campaign-decision:has(.destination-tabs > :nth-child(4)) .destination-copy { min-width: 0; } #game#game .campaign-decision:has(.destination-tabs > :nth-child(4)) .destination-copy p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } #game#game .campaign-decision .destination-copy p { word-break: keep-all; } /* First-war guide over a narrow map: picture and words on top, 알겠어요 across the foot. */ @media (max-width: 640px) and (orientation: landscape) { #game#game #coach-card { grid-template-columns: 40px minmax(0, 1fr); align-items: start; row-gap: 8px; column-gap: 10px; padding: 8px 10px 10px; } #game#game #coach-card img { width: 40px; height: 40px; padding: 3px; } #game#game #coach-card .coach-text b { font-size: 15px; white-space: nowrap; } #game#game #coach-card .coach-text p { font-size: 12px; line-height: 1.4; word-break: keep-all; } #game#game #coach-card button { grid-column: 1 / -1; width: 100%; height: 40px; } } /* ── Briefings before a fight ── */ /* Troop counts are ink on paper (the map panel's pale numbers vanished here). */ #game#game .overlay:is([data-kind=encounter], [data-kind=merge], [data-kind=target]) .troop { color: #2a2622; font-weight: 700; } #game#game .overlay[data-kind=encounter] .vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; margin: 8px 0; } #game#game .overlay[data-kind=encounter] .vs-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 12px !important; background: #ece3cf; border: 1px solid #2a262229; border-top-width: 4px; border-radius: 10px; } #game#game .overlay[data-kind=encounter] .vs-side:first-child { border-top-color: #367b9c; } #game#game .overlay[data-kind=encounter] .vs-side:last-child { border-top-color: #b95945; } #game#game .overlay[data-kind=encounter] .vs-side b { margin: 0 !important; font: 700 16px/1.2 var(--ui-font, sans-serif) !important; white-space: nowrap; } #game#game .overlay[data-kind=encounter] .vs-side .troops { gap: 10px; justify-content: flex-end; } #game#game .overlay[data-kind=encounter] .vs .troop { gap: 3px; font-size: 14px; } #game#game .overlay[data-kind=encounter] .vs .troop svg { width: 18px; height: 18px; } #game#game .overlay[data-kind=encounter] .vs .vs-label { font: 700 13px/1 var(--ui-font, sans-serif); font-style: normal; color: #6b6255; } /* Weather or morale: a ruled line, not a coloured slab. */ #game#game .overlay[data-kind=encounter] .battle-condition { align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 6px 12px; border-radius: 10px; background: transparent; color: #2a2622; border: 1px solid #2a262229; border-left: 4px solid #2a2622; } #game#game .overlay[data-kind=encounter] .battle-condition.is-morale { background: transparent; border-left-color: #a33328; } #game#game .overlay[data-kind=encounter] .battle-condition b { font-size: 14px; color: #2a2622; } #game#game .overlay[data-kind=encounter] .battle-condition.is-morale b { color: #a33328; } #game#game .overlay[data-kind=encounter] .battle-condition span { font-size: 13px; color: #4a4036; } /* The terrain advice: one quiet paragraph under a thin ink rule. */ #game#game .overlay[data-kind=encounter] .tactic { margin: 0; padding: 2px 0 2px 12px; background: none; border-left: 3px solid #2a262229; color: #4a4036; font-size: 13px; line-height: 1.5; word-break: keep-all; } #game#game .overlay[data-kind=encounter] .dialog > p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #4a4036; word-break: keep-all; } #game#game .overlay[data-kind=encounter] .switch-brief { margin-top: 10px; } #game#game .overlay[data-kind=encounter] .switch-brief p { font-size: 13px; color: #4a4036; } #game#game .overlay[data-kind=encounter] .commander-note { margin: 0 0 8px; font-size: 13px; } /* Raid briefs: time in ink, the general's hearts in seal, control cards on paper. */ #game#game .overlay[data-kind=encounter] .raid-brief-stats { margin: 0 0 8px; align-items: baseline; } #game#game .overlay[data-kind=encounter] .raid-brief-stats b { font: 700 20px/1 var(--ui-font, sans-serif); color: #2a2622; } #game#game .overlay[data-kind=encounter] .raid-brief-stats span { font-size: 13px; font-weight: 700; color: #a33328; } #game#game .overlay[data-kind=encounter] .raid-controls-guide { gap: 8px; margin: 0 0 8px; } #game#game .overlay[data-kind=encounter] .raid-controls-guide > div { justify-content: center; padding: 6px 4px 8px; background: #ece3cf; border: 1px solid #2a262229; border-radius: 10px; } #game#game .overlay[data-kind=encounter] .raid-controls-guide b { font-size: 13px; color: #2a2622; } #game#game .overlay[data-kind=encounter] .raid-controls-guide small { font-size: 12px; color: #6b6255; } #game#game .overlay[data-kind=encounter] .cargo-stakes { gap: 12px; margin-top: 8px; padding: 6px 12px; background: transparent; border: 1px solid #2a262229; border-radius: 10px; } #game#game .overlay[data-kind=encounter] .cargo-stakes b { font-size: 16px; color: #a33328; } #game#game .overlay[data-kind=encounter] .cargo-stakes span { font-size: 13px; color: #4a4036; } #game#game .overlay[data-kind=encounter] .coach-inline { margin: 8px 0 0; padding: 6px 12px 6px 8px; background: #ece3cf; border: 1px solid #2a262229; } #game#game .overlay[data-kind=encounter] .coach-inline img { width: 36px; height: 36px; } #game#game .overlay[data-kind=encounter] .raid-brief-tip { margin: 8px 0 0; font-size: 12px; color: #6b6255; } /* 마차를 습격한다 and 맡기기 62% share one width with room around the words. */ #game#game .overlay[data-kind=encounter] { --btn-w: 150px; } @media (max-height: 420px) { #game#game .overlay[data-kind=encounter] .raid-brief-stats { margin-bottom: 6px; } #game#game .overlay[data-kind=encounter] .raid-brief-stats b { font-size: 18px; } #game#game .overlay[data-kind=encounter] .raid-controls-guide { margin-bottom: 6px; } #game#game .overlay[data-kind=encounter] .raid-controls-guide > div { padding: 2px 4px 4px; } #game#game .overlay[data-kind=encounter] .raid-controls-guide small { margin-top: 0; } #game#game .overlay[data-kind=encounter] .vs { margin: 6px 0; } } /* Merging two armies: each choice is one button row, the land on the left and the joined army on the right. */ #game#game .overlay[data-kind=merge] .dialog { width: min(480px, 100%); } #game#game .overlay[data-kind=merge] .dialog > p { margin: 0 0 12px; font-size: 13px; color: #4a4036; } #game#game .overlay[data-kind=merge] .help-rows { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; } #game#game .overlay[data-kind=merge] .help-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 6px 14px !important; text-align: left; color: #2a2622 !important; background: #ece3cf !important; border: 1.5px solid #2a2622 !important; border-bottom-width: var(--btn-lip) !important; border-radius: var(--btn-r) !important; box-shadow: none !important; cursor: pointer; } #game#game .overlay[data-kind=merge] .help-row:active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game .overlay[data-kind=merge] .help-row strong { font: 700 15px/1.2 var(--ui-font, sans-serif); color: #2a2622; } #game#game .overlay[data-kind=merge] .help-row .troops { gap: 10px; } #game#game .overlay[data-kind=merge] .help-row .troop { gap: 3px; font-size: 14px; } #game#game .overlay[data-kind=merge] .help-row .troop svg { width: 18px; height: 18px; } /* ── War event card ── */ #game#game .overlay[data-kind=offer] .dialog { width: min(560px, 100%); } #game#game .overlay[data-kind=offer] .offer-card { gap: 16px; margin: 0 0 16px; } #game#game .overlay[data-kind=offer] .offer-card img { width: 64px; height: 64px; padding: 7px; background: #ece3cf; border: 1.5px solid #2a262240; } #game#game .overlay[data-kind=offer] .offer-card p { font-size: 15px; line-height: 1.5; color: #2a2622; word-break: keep-all; } #game#game .overlay[data-kind=offer] .offer-choices { gap: 8px; } #game#game .overlay[data-kind=offer] .offer-choice { align-content: center; gap: 4px; min-height: 60px; padding: 8px 10px 7px !important; } #game#game .overlay[data-kind=offer] .offer-choice b { font-size: 15px; line-height: 1.2; } #game#game .overlay[data-kind=offer] .offer-choice small { font-size: 12px; line-height: 1.3; font-weight: 600; opacity: .9; word-break: keep-all; } /* ── War log: a ruled ledger, newest on top and in bold ── */ #game#game .overlay[data-kind=log] .dialog { width: min(520px, 100%); } #game#game .overlay[data-kind=log] .credits { display: flex; flex-direction: column-reverse; margin: 0; font-size: 13px; line-height: 1.4; color: #2a2622; } #game#game .overlay[data-kind=log] .credits p { margin: 0; padding: 7px 0; border-top: 1px solid #2a26221f; word-break: keep-all; } #game#game .overlay[data-kind=log] .credits p:last-child { padding-top: 0; border-top: 0; font-weight: 700; } /* ── Closing scene: the record stays on one row, its labels readable ── */ #game#game #war-ending .we-record { flex-wrap: nowrap; gap: clamp(4px, 1.4vw, 16px); } #game#game #war-ending .we-medal { flex: none; width: clamp(50px, 9vw, 88px); } #game#game #war-ending .we-medal img { width: clamp(34px, 10vh, 56px); height: clamp(34px, 10vh, 56px); padding: 5px; } #game#game #war-ending .we-medal span { color: #d9ccb0; white-space: normal; word-break: keep-all; line-height: 1.25; } #game#game #war-ending .we-sub { color: #ece3cf; } /* Both buttons one width, as in every dialog bar. */ #game#game #war-ending .we-actions { gap: 8px; } #game#game #war-ending .we-actions button { width: 144px; min-width: 0; padding: 0 10px; white-space: nowrap; } @media (max-height: 420px) { #game#game #war-ending .we-actions button { width: 136px; padding: 0 8px; } } @media (max-width: 760px) and (orientation: landscape) { #game#game #war-ending { grid-template-columns: minmax(120px, 26%) minmax(0, 1fr); } } /* ── 전쟁 연대기: goals open first, finished ones after; one card shape ── */ #game#game .w5-chronicle .w5-goals { align-items: stretch; } #game#game .w5-chronicle .w5-goal { grid-template-columns: minmax(0, 1fr) auto; align-content: start; row-gap: 4px; padding: 8px 12px; background: #ece3cf; border: 1px solid #2a262229; font-size: 12px; color: #4a4036; } #game#game .w5-chronicle .w5-goal > b { grid-column: 1; grid-row: 1; font-size: 14px; line-height: 1.3; } #game#game .w5-chronicle .w5-goal > em { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 700; color: #6b6255; } #game#game .w5-chronicle .w5-goal > span:not(.merit-bar) { grid-column: 1 / -1; grid-row: 2; line-height: 1.4; } #game#game .w5-chronicle .w5-goal > .merit-bar { grid-column: 1 / -1; grid-row: 3; margin-top: 2px; } #game#game .w5-chronicle .w5-goal.done { order: 1; background: transparent; } #game#game .w5-chronicle .w5-goal.done > em { padding: 1px 6px; border-radius: 4px; color: #fbf1df; background: #a33328; line-height: 1.4; } #game#game .w5-chronicle .merit-h { margin: 16px 0 8px; } /* ── New war ── */ /* Edict chips: the picture and its merit side by side above the name, 44px or taller. */ #game#game .new-war-dialog .w5-chip-art { display: flex; align-items: center; justify-content: center; gap: 3px; width: auto; height: 22px; } #game#game .new-war-dialog .w5-chip-art img { width: 22px; height: 22px; flex: none; } #game#game .new-war-dialog .w5-chip-art small { position: static; padding: 0; border: 0; background: none; font: 700 11px/1 var(--ui-font, sans-serif); color: #a33328; } #game#game .new-war-dialog .w5-chip[aria-pressed=true] .w5-chip-art small { background: none; color: #ece3cf; } #game#game .dialog.new-war-dialog .w5-chip { gap: 2px; height: 50px !important; } @media (max-height: 420px) { #game#game .dialog.new-war-dialog .w5-chip { height: 46px !important; } } @media (max-height: 360px) { #game#game .dialog.new-war-dialog .w5-chip { height: 44px !important; } #game#game .new-war-dialog .w5-chip-art, #game#game .new-war-dialog .w5-chip-art img { height: 20px; } #game#game .new-war-dialog .w5-chip-art img { width: 20px; } } /* Toss at 320px tall keeps its 34px chips without pictures, so the note under them stays in view. */ @media (max-height: 330px) { html.in-toss #game#game .dialog.new-war-dialog .w5-chip-art { height: 13px; } } /* Review fixes. An attack tab that is also the goal: the strength pill and a gold goal mark (the word stays for screen readers) fit inside the frame. */ #game#game .destination-tabs button .dest-tags:has(> .attack) > .dest-goal { flex: none; width: 8px; height: 8px; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; border-radius: 50%; box-shadow: 0 0 0 1.5px #2a2622; } @media (max-width: 640px) and (orientation: landscape) { #game#game .destination-tabs button .dest-tags:has(> .dest-goal) > .attack { padding: 0 4px !important; } } /* The new-army plate spans the panel like the button under it. */ #game#game.mode-campaign .campaign-decision .reinforcement-price { max-width: none; } /* 320px tall: raid control cards put the pose beside its words, so the objective stays above the bar. */ @media (max-height: 340px) { #game#game .overlay[data-kind=encounter] .raid-controls-guide > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: center; justify-items: start; text-align: left; padding: 4px 8px 4px 6px; } #game#game .overlay[data-kind=encounter] .raid-controls-guide canvas { grid-row: 1 / 3; width: 36px; } #game#game .overlay[data-kind=encounter] .raid-controls-guide b { align-self: end; line-height: 1.2; word-break: keep-all; } #game#game .overlay[data-kind=encounter] .raid-controls-guide small { align-self: start; line-height: 1.2; word-break: keep-all; } } /* == end U2 == */ /* == U3 == */ /* Battle screens: the HUD on a phone held sideways, toasts, results, 끝없는 고개 and the weekly result. One look: ink panels in the pad gutter, paper cards with a 4px lip in the action gutter, paper dialogs with hairline rules. */ /* ── HUD: the pad gutter (default left) holds two ink panels of one width ── */ @media (pointer: coarse) and (orientation: landscape) { #game#game.mode-battle { --u3-gl: 8px; --u3-gw: 112px; --u3-info-h: 48px; --u3-ro-h: 78px; --u3-panel: rgba(20, 30, 28, .8); } /* The panels that are fixed to the screen keep the same left edge as the top bar, which already steps aside for a camera cutout (env) or Toss's own inset (html.toss-safe-pad pads the body, which fixed boxes ignore). */ #game#game.mode-battle { --u3-gx: max(8px, env(safe-area-inset-left)); --u3-gxr: max(8px, env(safe-area-inset-right)); } html.toss-safe-pad #game#game.mode-battle { --u3-gx: calc(max(8px, env(safe-area-inset-left)) + var(--toss-safe-left, 0px)); --u3-gxr: calc(max(8px, env(safe-area-inset-right)) + var(--toss-safe-right, 0px)); } #game#game.mode-battle #top-info::before, #game#game.mode-battle .combat-readout::before { display: none !important; } #game#game.mode-battle #top-info { box-sizing: border-box; width: var(--u3-gw); min-height: var(--u3-info-h); padding: 6px 9px; gap: 2px; justify-content: center; background: var(--u3-panel); border-radius: 10px; } #game#game.mode-battle:not(.is-training) #top-info { height: var(--u3-info-h); } #game#game.mode-battle #top-info .battle-counts { width: 100%; justify-content: space-between; gap: 4px; } #game#game.mode-battle #top-info .army-stat { flex: none; gap: 3px; align-items: baseline; white-space: nowrap; font-size: 11px; line-height: 1.2; } #game#game.mode-battle #top-info .army-stat b { font-size: 16px; line-height: 1.2; font-variant-numeric: tabular-nums; } #game#game.mode-battle #top-info .turn-label { font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; color: #c9cfc4; } #game#game.mode-battle #top-info .turn-label.hold-clock { color: #f0b9a8; } #game#game.mode-battle .combat-readout { box-sizing: border-box; left: var(--u3-gx) !important; width: var(--u3-gw); top: calc(var(--u3-gl) + var(--u3-info-h) + 6px + env(safe-area-inset-top)); height: var(--u3-ro-h); justify-content: flex-start; gap: 4px; padding: 7px 10px 8px; border: 0; background: var(--u3-panel); border-radius: 10px; } #game#game.mode-battle #combat-status > span { font-size: 11px; line-height: 14px; margin: 0; } #game#game.mode-battle #combat-status > strong { display: block; font-size: 14px; line-height: 19px; font-weight: 700; } #game#game.mode-battle .combat-readout .reload-track { height: 3px; margin: 2px 0 1px; background: rgba(236, 227, 207, .16); } #game#game.mode-battle #combat-tip { font-size: 12px; line-height: 15px; } #game#game.mode-battle[data-pad-side=left] .combat-readout { left: auto !important; right: var(--u3-gxr) !important; } /* Corps cards: number badge and 부 seal inside the corners, the name on its own band under the picture, the reload line between them. */ #game#game.mode-battle .is-command .formation { padding: 0; overflow: visible; } #game#game.mode-battle .is-command .formation .portrait-well { top: 3px; left: 4px; right: 4px; bottom: 17px; border-radius: 6px 6px 0 0; } #game#game.mode-battle .is-command .formation .name { position: absolute; left: 0; right: 0; bottom: 1px; padding: 0 2px; font-size: 12px; font-weight: 700; line-height: 15px; letter-spacing: 0; } #game#game.mode-battle .is-command .formation .formation-strength { top: 3px; right: 3px; min-width: 18px; height: 16px; min-height: 16px; padding: 0 4px; justify-content: center; gap: 2px; border: 0; border-radius: 4px; box-sizing: border-box; } #game#game.mode-battle .is-command .formation .count { font-size: 11px; line-height: 16px; } #game#game.mode-battle .is-command .formation .reserve-count { font-size: 10px; line-height: 16px; color: inherit; opacity: .75; } #game#game.mode-battle .is-command .formation .auto-seal, #game#game.mode-battle .is-command .formation[aria-pressed=true] .selected-tag { top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 4px; font-size: 10px; line-height: 1; } #game#game.mode-battle .is-command .formation[aria-pressed=true] .selected-tag { font-size: 11px; } #game#game.mode-battle .is-command .formation .formation-load { top: auto; bottom: 16px; left: 10px; right: 10px; height: 2px; background: rgba(42, 38, 34, .18); } #game#game.mode-battle .is-command .formation[aria-pressed=true] .formation-load { background: rgba(236, 227, 207, .2); } #game#game.mode-battle .is-command .formation::after { display: none; } /* Toasts sit at the foot of the field, between the pad and the buttons, as one calm paper strip; they no longer cover the pad gutter. */ #game#game.mode-battle #toast { position: fixed; top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)); left: calc(var(--pad-gutter-l, 128px) + 12px); right: calc(var(--act-gutter-r, 88px) + 12px); width: fit-content; max-width: 420px; margin: 0 auto; box-sizing: border-box; padding: 7px 14px 8px; transform: translateY(6px); text-align: left; word-break: keep-all; font-size: 13px; font-weight: 600; line-height: 1.45; color: #2a2622; background: #ece3cf; border: 1px solid #2a2622; border-radius: 10px; box-shadow: 0 2px 0 rgba(42, 38, 34, .35); } #game#game.mode-battle #toast.show { transform: none; } #game#game.mode-battle[data-pad-side=left] #toast { left: calc(max(88px, calc(env(safe-area-inset-left) + 80px)) + 12px); right: calc(max(128px, calc(env(safe-area-inset-right) + 120px)) + 12px); } /* Training draws its cues ('더 가까이') next to the units in mid-field, and the lesson card owns the foot: the toast goes to the top of the field instead. */ #game#game.mode-battle.is-training #toast { top: calc(8px + env(safe-area-inset-top)) !important; bottom: auto; transform: translateY(-6px); } #game#game.mode-battle.is-training #toast.show { transform: none; } html.in-toss #game#game.mode-battle.is-training #toast { top: calc(var(--toss-cap-h, 44px) + 4px) !important; } /* 끝없는 고개 chip: centred over the field, not the screen. */ #game#game.mode-battle .w1-pass { left: calc((var(--pad-gutter-l, 128px) + 100vw - var(--act-gutter-r, 88px)) / 2); } #game#game.mode-battle[data-pad-side=left] .w1-pass { left: calc((max(88px, calc(env(safe-area-inset-left) + 80px)) + 100vw - max(128px, calc(env(safe-area-inset-right) + 120px))) / 2); } } @media (pointer: coarse) and (orientation: landscape) and (max-height: 350px) { #game#game.mode-battle { --u3-info-h: 44px; --u3-ro-h: 56px; } #game#game.mode-battle #top-info { padding: 4px 10px; } #game#game.mode-battle .combat-readout { padding: 6px 10px 7px; } #game#game.mode-battle .is-command .formation .portrait-well { top: 2px; bottom: 15px; } #game#game.mode-battle .is-command .formation .name { font-size: 11px; line-height: 13px; } #game#game.mode-battle .is-command .formation .formation-load { bottom: 14px; } #game#game.mode-battle .is-command .formation .formation-strength { top: 2px; right: 2px; height: 15px; min-height: 15px; } #game#game.mode-battle .is-command .formation .auto-seal, #game#game.mode-battle .is-command .formation[aria-pressed=true] .selected-tag { top: 2px; left: 2px; width: 15px; height: 15px; } #game#game.mode-battle #toast { font-size: 12px; padding: 6px 12px 7px; } } /* Inside Toss the top-right corner belongs to the capsule. The menu leaves the field for the pad gutter, under the two panels; with the pad on the right, the panels drop below the capsule instead. */ @media (pointer: coarse) and (orientation: landscape) { html.in-toss #game#game.mode-battle:not([data-pad-side=left]) .topbar nav { position: fixed; left: var(--u3-gx); top: calc(var(--u3-gl) + var(--u3-info-h) + 6px + var(--u3-ro-h) + 8px + env(safe-area-inset-top)); margin: 0; } html.in-toss #game#game.mode-battle:not([data-pad-side=left]) .topbar nav .icon-button { width: var(--u3-gw); height: 44px; } /* Training hides the readout: the menu follows the lesson panel directly. */ html.in-toss #game#game.mode-battle.is-training:not([data-pad-side=left]) .topbar nav { top: calc(var(--u3-gl) + var(--u3-info-h) + 6px + env(safe-area-inset-top)) !important; } html.in-toss #game#game.mode-battle[data-pad-side=left] #top-info { position: fixed; right: var(--u3-gxr); top: calc(var(--toss-cap-h, 44px) + 4px); } html.in-toss #game#game.mode-battle[data-pad-side=left] .combat-readout { top: calc(var(--toss-cap-h, 44px) + 4px + var(--u3-info-h) + 6px); } html.in-toss #game#game.mode-battle[data-pad-side=left] #stick { top: calc(var(--toss-cap-h, 44px) + 4px + var(--u3-info-h) + 6px + var(--u3-ro-h) + 6px); } } @media (pointer: coarse) and (orientation: landscape) and (max-height: 350px) { html.in-toss #game#game.mode-battle:not([data-pad-side=left]) .topbar nav { top: calc(var(--u3-gl) + var(--u3-info-h) + 6px + var(--u3-ro-h) + 6px + env(safe-area-inset-top)); } html.in-toss #game#game.mode-battle:not([data-pad-side=left]) #stick { top: calc(var(--u3-gl) + var(--u3-info-h) + 6px + var(--u3-ro-h) + 6px + 44px + 4px + env(safe-area-inset-top)); } } /* ── Results: battle, weekly, 끝없는 고개 ─────────────────────────────── */ /* The title is the dialog's own serif size; a win is printed in seal red. */ #game#game :is(.battle-result, .w1-result) h2 { font: 700 24px/1.25 Gowun, serif; color: #2a2622; margin: 0 0 12px; letter-spacing: -.01em; } #game#game .battle-result .result-title { font: inherit !important; color: inherit !important; } #game#game .battle-result.is-won h2 { color: #a33328; } /* Numbers in ink between two hairlines; labels small and quiet. */ #game#game :is(.battle-result, .w1-result) .result-stats { margin: 0 0 12px; border-top: 1px solid rgba(42, 38, 34, .16); border-bottom: 1px solid rgba(42, 38, 34, .16); } #game#game :is(.battle-result, .w1-result) .result-stats > div { padding: 10px 6px; } #game#game :is(.battle-result, .w1-result) .result-stats > div + div { border-left: 1px solid rgba(42, 38, 34, .1); } #game#game :is(.battle-result, .w1-result) .result-stats b { font-size: 24px; line-height: 1.15; color: #2a2622; font-variant-numeric: tabular-nums; white-space: nowrap; } #game#game :is(.battle-result, .w1-result) .result-stats span { margin-top: 4px; font-size: 12px; line-height: 1.3; color: #6b6255; } #game#game .w1-result .result-stats .w1-new b { color: #a33328; } #game#game :is(.battle-result, .w1-result) > p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #4a4036; word-break: keep-all; } /* The bar under short content gets a hairline, not a shadow band. */ #game#game .overlay :is(.battle-result, .w1-dialog) > .dialog-actions, #game#game .overlay[data-kind=retreat] .dialog > .dialog-actions { box-shadow: none; border-top: 1px solid rgba(42, 38, 34, .12); padding-top: 12px; margin-top: 0; } #game#game .overlay[data-kind=retreat] .dialog > p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #2a2622; word-break: keep-all; } /* Campaign battle result: what happened (left) and the count (right), then the ledger across, then advice and the way on. */ #game#game .dialog.encounter-result.battle-result { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 10px; padding: 16px 20px; } #game#game .encounter-result.battle-result .result-stats { grid-template-columns: repeat(3, minmax(76px, auto)); } #game#game .encounter-result.battle-result .result-stats > div { padding-left: 12px !important; padding-right: 12px !important; } #game#game .encounter-result.battle-result > h2 { margin: 0; } #game#game .encounter-result.battle-result .result-stats { margin: 0; align-self: stretch; align-items: center; border-top: 0; border-bottom: 0; } #game#game .overlay .encounter-result.battle-result > .dialog-actions { border-top: 0; } #game#game .encounter-result.battle-result .encounter-consequence:not(.lost-land) { display: flex; flex-direction: column; justify-content: center; } #game#game .encounter-result.battle-result .encounter-consequence { margin: 0; padding: 8px 12px; background: rgba(42, 38, 34, .05); border-left: 3px solid #2a2622; border-radius: 4px; } #game#game .encounter-result.battle-result.is-won .encounter-consequence:not(.levy-note) { border-left-color: #a33328; } #game#game .encounter-result.battle-result .encounter-consequence b { font-size: 15px; line-height: 1.35; color: #2a2622; } #game#game .encounter-result.battle-result .encounter-consequence span { margin-top: 2px; font-size: 12px; line-height: 1.45; color: #6b6255; } #game#game .encounter-result.battle-result .levy-note { border-left-color: #a33328 !important; background: rgba(163, 51, 40, .06) !important; } /* The ledger is one ruled row: picture, arm, before → after, what was lost. */ #game#game .battle-result .survivor-ledger { gap: 0; border-top: 1px solid rgba(42, 38, 34, .16); border-bottom: 1px solid rgba(42, 38, 34, .16); } #game#game .battle-result .survivor-ledger > div { display: grid !important; grid-template-columns: 26px auto 1fr !important; grid-template-areas: "i s e" "i b l" !important; justify-content: start !important; justify-items: start; align-items: center !important; column-gap: 8px !important; row-gap: 0 !important; padding: 7px 12px !important; background: none !important; border: 0 !important; border-radius: 0 !important; color: #2a2622; } #game#game .battle-result .survivor-ledger > div + div { border-left: 1px solid rgba(42, 38, 34, .1) !important; } #game#game .battle-result .survivor-ledger svg { grid-area: i; width: 24px !important; height: 24px !important; } #game#game .battle-result .survivor-ledger span { grid-area: s; font-size: 12px; font-weight: 700; line-height: 1.3; } #game#game .battle-result .survivor-ledger b { grid-area: b; font-size: 17px !important; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; } #game#game .battle-result .survivor-ledger b small { font-size: 12px; color: #6b6255; } #game#game .battle-result .survivor-ledger em { grid-area: e; justify-self: end; font-size: 12px; font-weight: 600; line-height: 1.3; color: #6b6255; } #game#game .battle-result .survivor-ledger em.loss { color: #a33328; } #game#game .battle-result .survivor-ledger .led-by { grid-area: l; justify-self: end; font-size: 11px; font-weight: 600; color: #6b6255; } #game#game .battle-result .survivor-ledger > div.unled { background: none !important; color: #6b6255; } #game#game .encounter-result.battle-result .next-step { padding: 7px 12px; border-left: 3px solid #a33328; background: rgba(163, 51, 40, .06); font-size: 14px; line-height: 1.4; } #game#game .battle-result .battle-lesson { margin: 0; padding: 7px 12px; gap: 2px; border-left: 3px solid #6b6255; background: rgba(42, 38, 34, .05); font-size: 13px; line-height: 1.45; color: #2a2622; } #game#game .battle-result .battle-lesson b { font-size: 12px; letter-spacing: 0; color: #6b6255; } #game#game .overlay .encounter-result.battle-result:has(.battle-lesson) > .dialog-actions { border-top: 0; padding-top: 0; align-self: end; background: transparent; } /* Weekly: the medal ladder heads the card; the goal is one quiet line. */ #game#game .wk-result-dialog .wk-ladder { margin: 0 0 12px; justify-content: flex-start; gap: 14px; } #game#game .wk-result-dialog .wk-ladder > b { margin-right: 6px; color: #2a2622; font-size: 15px; } #game#game .wk-result-dialog .wk-goal { margin: 0 0 12px; text-align: left; font-size: 14px; font-weight: 600; line-height: 1.45; color: #2a2622; } @media (max-height: 540px) { #game#game :is(.battle-result, .w1-result) h2 { font-size: 22px; margin-bottom: 8px; } #game#game :is(.battle-result, .w1-result) .result-stats { margin-bottom: 10px; } #game#game :is(.battle-result, .w1-result) .result-stats > div { padding: 8px 6px; } #game#game :is(.battle-result, .w1-result) .result-stats b { font-size: 22px; } #game#game .dialog.encounter-result.battle-result { padding: 14px 18px; row-gap: 8px; } /* Beside the consequence the numbers read as one line each. */ #game#game .encounter-result.battle-result .result-stats > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px !important; } #game#game .encounter-result.battle-result .result-stats b { font-size: 20px; } #game#game .encounter-result.battle-result .result-stats span { margin-top: 2px; white-space: nowrap; } #game#game .wk-result-dialog .wk-ladder { margin-bottom: 10px; } } @media (max-height: 380px) { #game#game .dialog.encounter-result.battle-result { padding: 12px 16px; row-gap: 6px; } #game#game .encounter-result.battle-result .result-stats > div { padding-top: 4px !important; padding-bottom: 4px !important; } #game#game .encounter-result.battle-result .result-stats b { font-size: 18px; } #game#game .encounter-result.battle-result > h2 { font-size: 20px; } #game#game .encounter-result.battle-result .encounter-consequence { padding: 6px 10px; } #game#game .encounter-result.battle-result .encounter-consequence b { font-size: 14px; } #game#game .battle-result .survivor-ledger > div { padding: 4px 10px !important; } #game#game .battle-result .survivor-ledger b { font-size: 15px !important; } #game#game .encounter-result.battle-result .next-step { padding: 5px 10px; font-size: 13px; } #game#game .battle-result .battle-lesson { padding: 5px 10px; font-size: 12px; line-height: 1.4; } #game#game .battle-result .battle-lesson b { display: none; } /* Weekly and 끝없는 고개: the three numbers become one row of value + label. */ #game#game :is(.wk-result-dialog, .w1-result) .result-stats > div { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 7px 4px; } #game#game :is(.wk-result-dialog, .w1-result) .result-stats b { font-size: 20px; } #game#game :is(.wk-result-dialog, .w1-result) .result-stats span { margin: 0; white-space: nowrap; } #game#game .wk-result-dialog h2 { margin-bottom: 6px; } #game#game .wk-result-dialog .wk-ladder { margin-bottom: 8px; } #game#game .wk-result-dialog .wk-goal { margin-bottom: 8px; font-size: 13px; } } /* ── 끝없는 고개 start, pick and result ─────────────────────────────── */ /* Inside Toss the overlay is padded below the capsule: the card must fit the rest. */ html.in-toss #game#game .dialog.w1-dialog { max-height: 100%; } #game#game .w1-hero p { font-size: 14px; color: #2a2622; } #game#game .w1-ladder li { align-content: start; } #game#game .w1-best { align-content: center; } #game#game .w1-foot { justify-content: space-between; } #game#game .w1-bonus { font-size: 13px; font-weight: 600; text-align: right; } /* Boon cards line their pictures up whatever the length of the note. */ #game#game .w1-boon { align-content: start !important; padding-top: 10px !important; } #game#game .w1-boon b { margin-top: 2px; } #game#game .w1-result .w1-goal { text-align: left; font-size: 14px; color: #4a4036; } #game#game .w1-result .w1-taken { justify-content: flex-start; margin: 0 0 10px; } #game#game .w1-result .result-stats { margin-bottom: 10px; } /* The 고개 chip over the field: a paper tab like the rest. */ #game#game .w1-pass { padding: 4px 12px; background: #ece3cf; border: 1px solid #2a2622; border-radius: 10px; box-shadow: 0 2px 0 rgba(42, 38, 34, .35); } @media (max-height: 380px) { #game#game .w1-boon { padding-top: 6px !important; } /* The start card fits a 320px phone (and Toss, below its capsule) without scrolling. */ #game#game .w1-start .w1-hero { gap: 10px; } #game#game .w1-start .w1-hero img { width: 36px; height: 36px; padding: 4px; border-width: 1.5px; } #game#game .w1-start .w1-hero p { font-size: 13px; line-height: 1.4; } #game#game .w1-start .w1-record { margin: 6px 0; gap: 6px; } #game#game .w1-start .w1-best { min-width: 72px; padding: 3px 8px; } #game#game .w1-start .w1-best b { font-size: 20px; } #game#game .w1-start .w1-ladder { gap: 6px; } #game#game .w1-start .w1-ladder li { padding: 3px 4px; gap: 1px; } #game#game .w1-start .w1-ladder i { width: 20px; height: 20px; font-size: 11px; } #game#game .w1-start .w1-bonus { font-size: 12px; line-height: 1.35; } #game#game .w1-dialog:has(.w1-start) > .dialog-actions { padding-top: 8px; } /* Pick: boons read picture-left, so the three cards and the next 고개 fit. */ #game#game .w1-pick .w1-arm { padding: 2px 7px 2px 2px; grid-template-columns: 36px auto; } #game#game .w1-pick .w1-arm .portrait-well { width: 36px; height: 28px; } #game#game .w1-pick .w1-arm b { font-size: 16px; } #game#game .w1-pick h3 { margin: 6px 0 4px; font-size: 13px; } #game#game .w1-boon { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; align-content: center !important; column-gap: 8px; row-gap: 0; min-height: 52px !important; padding: 4px 8px !important; text-align: left; } #game#game .w1-boon img { grid-row: 1 / 3; width: 30px; height: 30px; } #game#game .w1-boon b { margin: 0; font-size: 13px; } #game#game .w1-boon small { font-size: 11px; line-height: 1.3; } #game#game .w1-pick-dialog > .dialog-actions { margin-top: 6px; padding-top: 8px; } } @media (max-height: 420px) { /* Pick: boons read picture-left, so the three cards and the next 고개 fit. */ html.in-toss #game#game .w1-pick .w1-arm { padding: 2px 7px 2px 2px; grid-template-columns: 36px auto; } html.in-toss #game#game .w1-pick .w1-arm .portrait-well { width: 36px; height: 28px; } html.in-toss #game#game .w1-pick .w1-arm b { font-size: 16px; } html.in-toss #game#game .w1-pick h3 { margin: 6px 0 4px; font-size: 13px; } html.in-toss #game#game .w1-boon { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; align-content: center !important; column-gap: 8px; row-gap: 0; min-height: 52px !important; padding: 4px 8px !important; text-align: left; } html.in-toss #game#game .w1-boon img { grid-row: 1 / 3; width: 30px; height: 30px; } html.in-toss #game#game .w1-boon b { margin: 0; font-size: 13px; } html.in-toss #game#game .w1-boon small { font-size: 11px; line-height: 1.3; } html.in-toss #game#game .w1-pick-dialog > .dialog-actions { margin-top: 6px; padding-top: 8px; } } /* == end U3 == */ /* == U4 == */ /* 전술 도전, 명장 열전 briefing, goal cards, minigame strips and results, 연습 전장 and 조작 익히기: one paper look on an 8px rhythm. */ /* The shade over a pinned button bar only shows while there is more to scroll (a scroll-driven fade); a dialog that fits shows a clean bar. Browsers without scroll timelines simply show no shade. */ @keyframes u4-more { 0%, 92% { box-shadow: 0 -10px 12px -8px #2a262233; } 100% { box-shadow: 0 -10px 12px -8px #2a262200; } } #game#game .overlay .dialog:is(.mission-dialog, .brief-dialog, .goal-dialog, .practice-dialog) > .dialog-actions, #game#game .overlay[data-kind=skirmish-result] .dialog > .dialog-actions, #game#game .overlay .dialog.bombard-result > .dialog-actions { box-shadow: none; } @supports (animation-timeline: scroll()) { #game#game .overlay .dialog:is(.mission-dialog, .brief-dialog, .goal-dialog, .practice-dialog) > .dialog-actions, #game#game .overlay[data-kind=skirmish-result] .dialog > .dialog-actions, #game#game .overlay .dialog.bombard-result > .dialog-actions { animation: u4-more linear both; animation-timeline: scroll(nearest block); } } /* ── 전술 도전 list ── */ #game#game .mission-dialog .mission-chapter { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 8px; font: 700 15px/20px var(--ui-font, sans-serif); color: var(--c-ink); } #game#game .mission-dialog h2 + .mission-chapter { margin-top: 0; } #game#game .mission-dialog .mission-chapter small { font: 600 12px/16px var(--ui-font, sans-serif); color: var(--c-ink-soft); } #game#game .mission-dialog .mission-chapter .chapter-stars { font: 700 13px/16px var(--ui-font, sans-serif); color: #a33328; } #game#game .mission-dialog .skirmish-list { gap: 8px; } #game#game .mission-dialog .skirmish-choice.mini-choice { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; height: 64px; padding: 0 10px 0 8px; column-gap: 10px; row-gap: 2px; justify-items: start; } #game#game .mission-dialog .skirmish-choice .mini-art { width: 48px; height: 48px; border-radius: 8px; } #game#game .mission-dialog .skirmish-choice .mini-art img { width: 42px; height: 42px; } #game#game .mission-dialog .skirmish-choice strong { font: 700 14px/18px var(--ui-font, sans-serif); letter-spacing: -.02em; max-width: 100%; } #game#game .mission-dialog .skirmish-choice .skirmish-stars { font-size: 12px; line-height: 14px; letter-spacing: 1px; color: #2a262252; } #game#game .mission-dialog .skirmish-stars i { font-style: normal; color: #a33328; } /* A locked chapter: three ink cards, each with a lock seal where the picture will be. */ #game#game .mission-dialog .chapter-lock { margin: 0 0 8px; gap: 8px; font: 600 13px/18px var(--ui-font, sans-serif); color: var(--c-ink); } #game#game .mission-dialog .chapter-lock .chapter-meter { flex: 0 1 120px; height: 6px; border-radius: 3px; } #game#game .mission-dialog .chapter-lock b { font: 700 12px/18px var(--ui-font, sans-serif); } #game#game .mission-dialog .skirmish-choice.is-locked { border-color: #2a2622 !important; } #game#game .mission-dialog .skirmish-choice.is-locked strong { grid-row: 1 / 3; align-self: center; color: #ece3cf; opacity: .6; } #game#game .mission-dialog .skirmish-choice.is-locked .mini-art { background: #3a3530; } #game#game .mission-dialog .skirmish-choice.is-locked .mini-art::before { content: "鎖"; font: 700 18px/1 var(--ui-font, sans-serif); color: #ece3cf; opacity: .45; } #game#game .mission-dialog .dialog-actions .mission-overview { font: 700 15px/1 var(--ui-font, sans-serif); color: #a33328; } @media (max-height: 540px) { #game#game .mission-dialog .skirmish-choice.mini-choice { grid-template-columns: 44px minmax(0, 1fr); height: 60px; } #game#game .mission-dialog .skirmish-choice .mini-art { width: 44px; height: 44px; } #game#game .mission-dialog .skirmish-choice .mini-art img { width: 38px; height: 38px; } } /* Narrow phones: the dialog's side padding and the card padding give the titles their full width, so no title ends in "…". */ @media (max-width: 640px) { #game#game .overlay .dialog.mission-dialog { padding-left: 14px !important; padding-right: 14px !important; } #game#game .mission-dialog .skirmish-choice.mini-choice { grid-template-columns: 40px minmax(0, 1fr); padding: 0 5px 0 6px; column-gap: 7px; } #game#game .mission-dialog .skirmish-choice .mini-art { width: 40px; height: 40px; } #game#game .mission-dialog .skirmish-choice .mini-art img { width: 36px; height: 36px; } #game#game .mission-dialog .skirmish-choice strong { font-size: 13px; letter-spacing: -.03em; } #game#game .mission-dialog .mission-chapter small { display: none; } } /* ── 명장 열전 briefing: picture and armies left, story, stars and rule right ── */ #game#game .brief-dialog .mission-brief { grid-template-columns: 176px minmax(0, 1fr); gap: 16px; align-items: start; } #game#game .brief-dialog .brief-side { display: grid; gap: 8px; min-width: 0; } #game#game .brief-dialog .brief-scene { width: 100%; height: 104px; border-radius: 8px; } #game#game .brief-dialog .brief-armies { display: grid; gap: 4px; margin: 0; justify-content: stretch; } #game#game .brief-dialog .brief-army { display: flex; align-items: center; gap: 8px; height: 22px; } #game#game .brief-dialog .brief-side-label { flex: none; width: 28px; font: 700 12px/1 var(--ui-font, sans-serif); color: var(--c-ink-soft); } #game#game .brief-dialog .brief-army.is-enemy .brief-side-label { color: #a33328; } #game#game .brief-dialog .brief-armies .troops { gap: 10px; } #game#game .brief-dialog .brief-armies .troop { gap: 3px; font: 700 13px/1 var(--ui-font, sans-serif); color: var(--c-ink); } #game#game .brief-dialog .brief-armies .troop svg { width: 16px; height: 16px; } #game#game .brief-dialog .brief-copy { display: grid; gap: 8px; align-content: start; } #game#game .brief-dialog .commander-note { margin: 0 !important; align-items: flex-start; font: 600 13px/19px var(--ui-font, sans-serif); color: var(--c-ink); } #game#game .brief-dialog .commander-note .commander-seal { margin-top: 0; } #game#game .brief-dialog .brief-goals { gap: 2px; padding: 8px 0; border-top: 1px solid #2a26221f; border-bottom: 1px solid #2a26221f; } #game#game .brief-dialog .brief-goals li { gap: 8px; font: 600 13px/19px var(--ui-font, sans-serif); } #game#game .brief-dialog .brief-goals li:not(.met) span { color: #2a262266; } #game#game .brief-dialog .brief-rule { margin: 0; gap: 8px; font: 600 12px/18px var(--ui-font, sans-serif); color: var(--c-ink-soft); } @media (max-height: 540px) { #game#game .overlay .dialog.brief-dialog { padding: 16px 20px !important; } #game#game .brief-dialog h2 { margin-bottom: 12px; } #game#game .brief-dialog .mission-brief { grid-template-columns: 160px minmax(0, 1fr); gap: 16px; } #game#game .brief-dialog .brief-scene { width: 100%; height: 92px; } #game#game .brief-dialog .dialog-actions { margin-top: 12px; padding-top: 12px; } } @media (max-height: 340px) { #game#game .brief-dialog .brief-copy { gap: 6px; } #game#game .brief-dialog .brief-goals { padding: 6px 0; } #game#game .brief-dialog .brief-goals li, #game#game .brief-dialog .commander-note { font-size: 12px; line-height: 17px; } } /* Inside Toss the overlay starts 44px lower: short phones tighten the brief so it fits without scrolling. */ @media (max-height: 340px) { html.in-toss #game#game .overlay .dialog.brief-dialog { padding-top: 12px !important; } html.in-toss #game#game .brief-dialog h2 { margin-bottom: 8px; line-height: 26px; } html.in-toss #game#game .brief-dialog .brief-scene { height: 72px; } html.in-toss #game#game .brief-dialog .brief-side { gap: 6px; } html.in-toss #game#game .brief-dialog .brief-armies { gap: 2px; } html.in-toss #game#game .brief-dialog .brief-army { height: 20px; } html.in-toss #game#game .brief-dialog .brief-copy { gap: 4px; } html.in-toss #game#game .brief-dialog .brief-goals { padding: 4px 0; gap: 0; } html.in-toss #game#game .brief-dialog .brief-goals li, html.in-toss #game#game .brief-dialog .commander-note { line-height: 16px; } html.in-toss #game#game .brief-dialog .dialog-actions { margin-top: 8px; padding-top: 8px; } } @media (max-width: 640px) { #game#game .brief-dialog .mission-brief { grid-template-columns: 148px minmax(0, 1fr); gap: 14px; } #game#game .brief-dialog .brief-armies .troops { gap: 8px; } } /* ── Goal card: picture left; the goal and its three stars right ── */ #game#game .goal-dialog { width: min(480px, 100%); text-align: left; } #game#game .goal-dialog h2 { text-align: left; } #game#game .goal-dialog .goal-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0; } #game#game .goal-dialog .goal-art { width: 88px; height: 88px; border-radius: 10px; } #game#game .goal-dialog .goal-art img { width: 74px; height: 74px; } #game#game .goal-dialog .goal-copy { display: grid; gap: 8px; min-width: 0; } #game#game .goal-dialog .goal-card p { font: 700 16px/22px var(--ui-font, sans-serif); } #game#game .goal-dialog .goal-stars { display: grid !important; gap: 2px !important; margin: 0 !important; padding: 8px 0 0 !important; border-top: 1px solid #2a26221f; justify-content: start !important; } #game#game .goal-dialog .goal-stars li { display: flex; gap: 8px; font: 600 13px/19px var(--ui-font, sans-serif) !important; color: var(--c-ink); } #game#game .goal-dialog .goal-stars li::before { content: "☆"; color: #a33328; flex: none; } #game#game .goal-dialog .dialog-actions { justify-content: flex-end !important; } #game#game .goal-dialog .dialog-actions button { min-width: 0 !important; min-height: var(--btn-h) !important; } @media (max-height: 340px) { #game#game .goal-dialog .goal-card { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; } #game#game .goal-dialog .goal-art { width: 72px; height: 72px; } #game#game .goal-dialog .goal-art img { width: 60px; height: 60px; } #game#game .goal-dialog .goal-card p { font-size: 15px; line-height: 20px; } #game#game .goal-dialog .goal-stars li { font-size: 12px !important; line-height: 17px !important; } } /* ── 전술 도전 result: the mission and its stars on one line, then the checks ── */ #game#game .overlay[data-kind=skirmish-result] .dialog { display: block; width: min(560px, 100%); } #game#game .overlay[data-kind=skirmish-result] .dialog h2 { margin: 0 0 12px; font-size: 23px; line-height: 30px; } #game#game .overlay[data-kind=skirmish-result] .result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #game#game .overlay[data-kind=skirmish-result] .result-mission { margin: 0; font: 700 15px/22px var(--ui-font, sans-serif); color: var(--c-ink); } #game#game .overlay[data-kind=skirmish-result] .result-stars { margin: 0; font-size: 24px; line-height: 28px; letter-spacing: 4px; color: #2a262240; text-align: right; } #game#game .overlay[data-kind=skirmish-result] .result-stars i { font-style: normal; color: #a33328; } #game#game .overlay[data-kind=skirmish-result] .skirmish-checks { margin: 8px 0 0; padding: 8px 0; background: none; border-radius: 0; border-top: 1px solid #2a26221f; border-bottom: 1px solid #2a26221f; display: grid; gap: 2px; } #game#game .overlay[data-kind=skirmish-result] .skirmish-checks p { display: flex; gap: 8px; margin: 0; font: 600 13px/19px var(--ui-font, sans-serif); color: var(--c-ink-soft); } #game#game .overlay[data-kind=skirmish-result] .skirmish-checks p span { color: #2a262266; flex: none; } #game#game .overlay[data-kind=skirmish-result] .skirmish-checks p.met { color: var(--c-ink); } #game#game .overlay[data-kind=skirmish-result] .skirmish-checks p.met span { color: #a33328; } #game#game .overlay[data-kind=skirmish-result] .chapter-news { justify-content: flex-start; margin: 8px 0 0; font-size: 13px; } #game#game .overlay[data-kind=skirmish-result] .dialog > .small-note { margin: 8px 0 0; font: 500 12px/18px var(--ui-font, sans-serif); color: var(--c-ink-soft); } #game#game .overlay[data-kind=skirmish-result] .dialog-actions { margin-top: 12px; } @media (max-height: 360px) { #game#game .overlay[data-kind=skirmish-result] .dialog h2 { margin-bottom: 8px; font-size: 22px; line-height: 28px; } #game#game .overlay[data-kind=skirmish-result] .skirmish-checks { padding: 6px 0; } #game#game .overlay[data-kind=skirmish-result] .skirmish-checks p { font-size: 12px; line-height: 17px; } } /* 포격전 practice result: a dialog-sized title, not a poster. */ #game#game .overlay[data-kind=result] .dialog.bombard-result .result-title { font: 700 26px/1.25 Gowun, serif !important; color: #a33328; } @media (max-height: 540px) { #game#game .overlay[data-kind=result] .dialog.bombard-result .result-title { font-size: 23px !important; } } /* ── 연습 전장: two field battles as wide picture cards, five minigames under them ── */ #game#game .practice-dialog { width: min(600px, 100%); } #game#game .dialog .mode-list.practice-modes { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin: 0; } #game#game .dialog .mode-list.practice-modes button { grid-column: span 2; width: auto; height: auto !important; min-height: 0 !important; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px 6px !important; font: 700 13px/16px var(--ui-font, sans-serif) !important; letter-spacing: -.02em !important; white-space: nowrap; } #game#game .dialog .mode-list.practice-modes button::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 8px; background: #3a4a44 var(--mode-art, none) center / 38px 38px no-repeat; } #game#game .dialog .mode-list.practice-modes :is([data-action=practice], [data-action=weekly-start]) { grid-column: span 5; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 12px 8px 8px !important; font-size: 15px !important; } #game#game .dialog .mode-list.practice-modes [data-action=practice] { --mode-art: url(assets/ui-command/battle.webp); } #game#game .dialog .mode-list.practice-modes [data-action=weekly-start] { --mode-art: url(assets/ui-command/tip-auto.webp); } #game#game .dialog .mode-list.practice-modes [data-action=practice-gate] { --mode-art: url(assets/ui-command/tip-capital.webp); } #game#game .dialog .mode-list.practice-modes [data-action=practice-escort] { --mode-art: url(assets/ui-command/tip-supply.webp); } #game#game .dialog .mode-list.practice-modes [data-action=practice-fort] { --mode-art: url(assets/ui-command/skill-climb-up.webp); } #game#game .dialog .mode-list.practice-modes [data-action=practice-convoy] { --mode-art: url(assets/ui-command/skill-jump.webp); } #game#game .dialog .mode-list.practice-modes [data-action=practice-bombard] { --mode-art: url(assets/ui-command/cannon.webp); } @media (max-height: 340px) { #game#game .dialog .mode-list.practice-modes button { gap: 2px; padding: 4px 4px 2px !important; } #game#game .dialog .mode-list.practice-modes button::before { width: 36px; height: 36px; border-radius: 7px; background-size: 30px 30px; } #game#game .dialog .mode-list.practice-modes :is([data-action=practice], [data-action=weekly-start]) { gap: 10px; padding: 4px 12px 4px 4px !important; } } /* ── Minigame strip (phones): one row of 40px plates on the menu button's centre line, spaced 8px apart, 철수 at its right end next to the menu. The clock lives in the strip (the top bar's copy hides), and a narrow phone narrows the tracks before anything is dropped. ── */ #game#game #hud .strip-clock { display: none !important; } @media (max-height: 540px) { #game#game.mode-raid:not(.bombard) #top-info { display: none !important; } #game#game.mode-raid #hud .battle-bar.u4-strip { display: flex !important; align-items: center; gap: 8px; height: 44px; margin-top: -1px; padding: 0 calc(80px + var(--toss-cap, 0px)) 0 0 !important; box-sizing: border-box; } #game#game.mode-raid #hud .battle-bar.u4-strip > * { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; flex: none; } #game#game.mode-raid #hud .battle-bar.u4-strip > div { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; height: 40px !important; padding: 0 12px !important; box-sizing: border-box; border-radius: 10px !important; min-width: 0; background: rgba(20, 30, 28, .72) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #f3e9cf; } #game#game.mode-raid #hud .battle-bar.u4-strip > .keys { display: none !important; } #game#game.mode-raid #hud .battle-bar.u4-strip .eyebrow { display: none !important; } #game#game.mode-raid #hud .battle-bar.u4-strip .hp-dots { font-size: 13px; line-height: 18px; letter-spacing: 1px; color: #ef8a73; white-space: nowrap; } #game#game.mode-raid #hud .battle-bar.u4-strip > .mini-retreat { margin-left: auto !important; height: 44px !important; } /* The clock: the number in gold, its unit small. */ #game#game.mode-raid #hud .battle-bar.u4-strip > .strip-clock { justify-content: center; gap: 3px !important; min-width: 56px; } #game#game.mode-raid #hud .strip-clock strong { font: 700 17px/1 var(--ui-font, sans-serif); color: #f2cd7b; font-variant-numeric: tabular-nums; } #game#game.mode-raid #hud .strip-clock > span:not(.road-track) { font: 600 12px/1 var(--ui-font, sans-serif); color: #f3e9cf; opacity: .8; } #game#game.mode-raid #hud .strip-clock:has(.road-track) { flex: 0 1 152px; min-width: 88px; } #game#game.mode-raid #hud .strip-clock .road-track { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; } /* Brawler: gate (or cart) strength with a track that narrows first, then the wave. */ #game#game.mode-raid.brawl #hud .brawl-bar.u4-strip > .brawl-gate { flex: 0 1 176px; min-width: 84px; } #game#game.mode-raid.brawl #hud .brawl-bar.u4-strip .brawl-track { flex: 1 1 auto; width: auto !important; min-width: 24px; height: 8px; border-radius: 4px; border: 0; background: #ffffff26; } #game#game.mode-raid.brawl #hud .brawl-bar.u4-strip .brawl-icon { width: 24px; height: 24px; } html #game#game.mode-raid.brawl #hud .brawl-bar.u4-strip > .brawl-wave { display: flex !important; } #game#game.mode-raid.brawl #hud .brawl-bar.u4-strip .brawl-wave b { font: 700 15px/1 var(--ui-font, sans-serif); color: #f3e9cf; font-variant-numeric: tabular-nums; } /* Wall and convoy raids: hearts over the coin count, the clock, then the goal box. */ #game#game.mode-raid #hud .raid-bar.u4-strip > .raid-life { flex-direction: column !important; align-items: flex-start; justify-content: center; gap: 0 !important; } #game#game.mode-raid #hud .raid-bar.u4-strip .raid-coins { font: 700 11px/14px var(--ui-font, sans-serif); color: #f2cd7b; } #game#game.mode-raid #hud .raid-bar.u4-strip .raid-coins:empty { display: none; } #game#game.mode-raid #hud .raid-bar.u4-strip > .raid-reserves { gap: 6px !important; font: 600 12px/1 var(--ui-font, sans-serif); } #game#game.mode-raid #hud .raid-bar.u4-strip > .raid-reserves .eyebrow { display: inline !important; font: 600 12px/1 var(--ui-font, sans-serif) !important; color: #f3e9cf; opacity: .8; text-transform: none; letter-spacing: 0; } #game#game.mode-raid #hud .raid-bar.u4-strip > .raid-reserves b { font: 700 15px/1 var(--ui-font, sans-serif); color: #f2cd7b; } #game#game.mode-raid #hud .raid-bar.u4-strip > .raid-progress { flex: 1 1 auto; width: auto !important; max-width: 420px; flex-direction: column !important; align-items: stretch; justify-content: center; gap: 3px !important; text-align: left; container-type: inline-size; } #game#game.mode-raid #hud .raid-bar.u4-strip #raid-objective { font: 700 13px/16px var(--ui-font, sans-serif); color: #f3e9cf; } #game#game.mode-raid #hud .raid-bar.u4-strip .reload-track { height: 4px; margin: 0; border-radius: 2px; background: #ffffff26; } #game#game.mode-raid #hud .raid-bar.u4-strip .reload-track span { background: #ece3cf; } #game#game.mode-raid #hud .raid-bar.u4-strip #raid-status { font: 500 11px/14px var(--ui-font, sans-serif); color: #f3e9cf; opacity: .75; } /* A narrow goal box: the goal card already named the goal, so the box keeps its track and the live hint, which may take two lines. */ @container (max-width: 240px) { #game#game.mode-raid #hud .raid-bar.u4-strip #raid-objective { display: none; } #game#game.mode-raid #hud .raid-bar.u4-strip #raid-status { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 13px; word-break: keep-all; } } /* Inside Toss a goal box too narrow for two whole lines of hint keeps only its track. */ @container (max-width: 120px) { html.in-toss #game#game.mode-raid #hud .raid-bar.u4-strip #raid-status { display: none; } } /* 포격전: 철수 on the menu button's line too. */ #game#game.mode-raid.bombard #hud .brawl-bar > .mini-retreat { top: -1px !important; } } /* The narrowest phones: the hearts tighten, the wave drops its picture. */ @media (max-height: 540px) and (max-width: 640px) { #game#game.mode-raid #hud .battle-bar.u4-strip .hp-dots { font-size: 12px; letter-spacing: 0; } #game#game.mode-raid #hud .battle-bar.u4-strip > div { padding: 0 10px !important; } #game#game.mode-raid.brawl #hud .brawl-bar.u4-strip > .brawl-wave .brawl-icon { display: none; } #game#game.mode-raid #hud .battle-bar.u4-strip > .strip-clock { min-width: 48px; } #game#game.mode-raid #hud .strip-clock > span:not(.road-track) { display: none; } } /* Inside Toss on the narrowest phones the host capsule takes 108px more: the wave count goes (the gate and the clock matter more) and the goal box keeps only its progress track. */ @media (max-height: 540px) and (max-width: 640px) { html.in-toss #game#game.mode-raid.brawl #hud .brawl-bar.u4-strip > .brawl-wave { display: none !important; } html.in-toss #game#game.mode-raid.brawl #hud .brawl-bar.u4-strip > .brawl-gate { flex-basis: 96px; min-width: 72px; } html.in-toss #game#game.mode-raid #hud .raid-bar.u4-strip > .raid-progress > :not(.reload-track) { display: none; } } /* The wall defender also shows its reserves there; at 600px or less inside Toss that leaves the goal box a 20px stub, so it goes. */ @media (max-height: 540px) and (max-width: 600px) { html.in-toss #game#game.mode-raid #hud .raid-bar.u4-strip > .raid-reserves ~ .raid-progress { display: none !important; } } /* ── 조작 익히기: the reload meter in paper on the dark guide, not a browser green. ── */ #game#game #training-metrics meter { -webkit-appearance: none; appearance: none; width: 72px; height: 6px; border: 0; border-radius: 3px; background: #ffffff26; } #game#game #training-metrics meter::-webkit-meter-bar { height: 6px; border: 0; border-radius: 3px; background: #ffffff26; } #game#game #training-metrics meter::-webkit-meter-optimum-value, #game#game #training-metrics meter::-webkit-meter-suboptimum-value, #game#game #training-metrics meter::-webkit-meter-even-less-good-value { border-radius: 3px; background: #ece3cf; } #game#game #training-metrics meter::-moz-meter-bar { border-radius: 3px; background: #ece3cf; } /* The two choices after a lesson: the game's own buttons (paper, seal red for the next step). */ #game#game #training-actions button { height: 44px !important; min-height: 44px !important; padding: 0 12px !important; border-radius: var(--btn-r) !important; border: 1px solid #120f0d !important; border-bottom-width: var(--btn-lip) !important; box-shadow: none !important; text-shadow: none !important; font: 700 14px/1 var(--ui-font, sans-serif) !important; color: #2a2622 !important; background: #ece3cf !important; } #game#game #training-actions button.primary { color: #fbf4e6 !important; background: #a33328 !important; border-color: #5e1a13 !important; } #game#game #training-actions button:active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game #training-actions button:disabled { opacity: .45; } /* == end U4 == */ /* == U5 == */ /* 공적 (.merit-main), 군기함, the unlock card, the merit toast and the weekly start banner. Printed paper: hairline cards, ink type, seal red for what is earned. On a wide phone two short sections share a row. */ #game#game :is(.merit-main, .w3-dialog) h2 { font-size: 22px; line-height: 1.25; margin-bottom: 12px; } #game#game .merit-main .merit-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 24px; align-items: start; } #game#game .merit-main .merit-sec { min-width: 0; } @media (min-width: 700px) { #game#game .merit-main .merit-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } #game#game .merit-main .merit-full { grid-column: 1 / -1; } } /* Section heading: the name in bold, its count small and muted, a tag at the right end. */ #game#game .merit-main .merit-h { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 0 0 8px; font: 700 15px/1.3 var(--ui-font, sans-serif); color: #2a2622; white-space: nowrap; } #game#game .merit-main .merit-h small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 600 12px/1.3 var(--ui-font, sans-serif); color: #6b6255; } #game#game .merit-main .merit-h small:empty { display: none; } #game#game .merit-main .merit-h :is(.merit-double, .wk-left) { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 8px; font: 700 11px/1.3 var(--ui-font, sans-serif); color: #fbf1df; background: #a33328; vertical-align: 0; } #game#game .merit-main .merit-bar { height: 6px; border-radius: 3px; } #game#game .merit-main .merit-bar i { border-radius: 3px; } /* Rank: the name in seal red, the way to the next rank as one line over its bar. */ #game#game .merit-main .merit-rank { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 0 2px 16px; border-bottom: 1px solid rgba(42,38,34,.15); } #game#game .merit-main .merit-rank > b { grid-row: auto; font: 700 30px/1 Gowun, serif; color: #a33328; white-space: nowrap; } #game#game .merit-main .merit-rank > div { display: grid; gap: 6px; min-width: 0; font-size: 14px; color: #2a2622; } #game#game .merit-main .merit-rank > div > span { font-weight: 700; } #game#game .merit-main .merit-rank > div > .merit-bar { height: 8px; border-radius: 4px; } #game#game .merit-main .merit-rank em { font: 600 12px/1.3 var(--ui-font, sans-serif); font-style: normal; color: #6b6255; } /* Orders: a check, the order with its bar under it, the count at the end. */ #game#game .merit-main .merit-orders { gap: 8px; } #game#game .merit-main .merit-order { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "c t n" "c b n"; gap: 5px 12px; min-height: 48px; box-sizing: border-box; padding: 8px 12px; border: 1px solid rgba(42,38,34,.2); border-radius: 10px; background: transparent; font-size: 13px; } #game#game .merit-main .merit-order > .merit-check { grid-area: c; width: 22px; height: 22px; box-sizing: border-box; font-size: 12px; line-height: 1; } #game#game .merit-main .merit-order > b { grid-area: t; min-width: 0; font-weight: 700; line-height: 1.3; word-break: keep-all; } #game#game .merit-main .merit-order > .merit-bar { grid-area: b; } #game#game .merit-main .merit-order > em { grid-area: n; font-size: 13px; font-variant-numeric: tabular-nums; color: #2a2622; } #game#game .merit-main .merit-order.done b { color: #6b6255; text-decoration: none; } #game#game .merit-main .merit-order.done > em { color: #a33328; } #game#game .merit-main .merit-order.first-week { border-color: #a33328; } #game#game .merit-main .merit-tomorrow { gap: 12px; min-height: 44px; box-sizing: border-box; margin-top: 8px; padding: 4px 12px; border: 1px dashed rgba(42,38,34,.35); } #game#game .merit-main .merit-tomorrow b { font-size: 13px; white-space: nowrap; } #game#game .merit-main .merit-tomorrow span { gap: 4px; } #game#game .merit-main .merit-tomorrow em { font: 600 12px/1.3 var(--ui-font, sans-serif); color: #6b6255; white-space: nowrap; } /* 군기: the banner flown and 군기함 side by side, the next banner under them. */ #game#game .merit-main .w3-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cur open" "next next"; gap: 8px; } #game#game .merit-main .w3-current { grid-area: cur; min-height: 56px; min-width: 0; padding: 4px 12px 4px 10px; border-width: 1px !important; border-bottom-width: var(--btn-lip) !important; } #game#game .merit-main .w3-current-art { width: 40px; height: 42px; } #game#game .merit-main .w3-current b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; } #game#game .merit-main .w3-open { grid-area: open; min-height: 56px; padding: 0 20px; border-width: 1px !important; border-bottom-width: var(--btn-lip) !important; font: var(--btn-font); } #game#game .merit-main .w3-next { grid-area: next; grid-column: 1 / -1; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 12px; min-height: 56px; box-sizing: border-box; padding: 6px 12px; border-color: rgba(42,38,34,.35); } #game#game .merit-main .w3-next-art { width: 36px; height: 38px; } #game#game .merit-main .w3-next-text { gap: 2px; } #game#game .merit-main .w3-next-text .merit-bar { margin-top: 4px; } #game#game .merit-main .w3-next em { font-size: 13px; font-variant-numeric: tabular-nums; } /* First week: seven stamps of one size. */ #game#game .merit-main .merit-track { gap: 8px; } #game#game .merit-main .merit-step { gap: 6px; padding: 8px 4px; font-size: 12px; line-height: 1.3; } #game#game .merit-main .merit-track-note { margin-top: 8px; font: 600 12px/1.3 var(--ui-font, sans-serif); color: #6b6255; } /* The week's battle: one card, what and 출전 on top, the medals and the past weeks under a hairline. */ #game#game .merit-main .merit-weekly { display: block; padding: 12px 16px; border: 1px solid rgba(42,38,34,.2); border-radius: 12px; } #game#game .merit-main .wk-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; } #game#game .merit-main .merit-weekly .wk-art { width: 44px; height: 44px; } #game#game .merit-main .wk-info { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: #4a4036; } #game#game .merit-main .wk-info > b { font-size: 15px; color: #2a2622; } #game#game .merit-main .merit-weekly .wk-armies { margin-top: 2px; gap: 8px; } #game#game .merit-main .wk-go { display: flex; gap: 8px; } #game#game .merit-main .wk-go button { height: 44px; min-height: 44px; min-width: 88px; padding: 0 18px; box-sizing: border-box; border: 1px solid #2a2622 !important; border-bottom-width: var(--btn-lip) !important; border-radius: var(--btn-r) !important; background: #ece3cf !important; color: #2a2622 !important; font: var(--btn-font); box-shadow: none !important; text-shadow: none !important; white-space: nowrap; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game .merit-main .wk-go button.primary { background: #a33328 !important; border-color: #6f1f17 !important; color: #fbf4e6 !important; } #game#game .merit-main .wk-go button:active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game .merit-main .wk-record { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(42,38,34,.15); } #game#game .merit-main .wk-ladder { justify-content: flex-start; gap: 12px; margin: 0; } #game#game .merit-main .wk-ladder > b { margin-right: 4px; font-size: 13px; color: #2a2622; } #game#game .merit-main .wk-step .wk-seal { width: 28px; height: 28px; font-size: 13px; } #game#game .merit-main .wk-history { margin: 0; } #game#game .merit-main .wk-history p { gap: 8px; margin: 0 0 6px; font-size: 12px; color: #4a4036; } #game#game .merit-main .wk-history ol { gap: 4px; flex-wrap: wrap; } #game#game .merit-main .wk-history li { min-width: 30px; } #game#game .merit-main .wk-history .wk-seal { width: 24px; height: 24px; font-size: 12px; } #game#game .merit-main .wk-history li small { font-size: 10px; } /* Conquests: a 3 x 3 board of the three nations and difficulties. */ #game#game .merit-main .merit-wars { max-width: none; grid-template-columns: 44px repeat(3, minmax(0, 1fr)); gap: 6px 8px; } #game#game .merit-main .merit-wars em { font-size: 12px; color: #6b6255; } #game#game .merit-main .merit-wars b { font-size: 13px; } #game#game .merit-main .merit-wars i { height: 34px; border: 1px dashed rgba(42,38,34,.3); } #game#game .merit-main .merit-wars i.won { border: 1px solid #6f1f17; } /* Chronicle: the next goal, the latest wars; the empty line without a box. */ #game#game .merit-main .w5-annals { gap: 8px; } #game#game .merit-main .w5-next { gap: 4px; } #game#game .merit-main .w5-next > small { font-size: 12px; color: #6b6255; } #game#game .merit-main .w5-annals .w5-goal { padding: 8px 12px; } #game#game .merit-main .w5-annals .w5-goal b { font-size: 13px; } #game#game .merit-main .w5-annals .w5-goal > span:not(.merit-bar) { font-size: 12px; color: #6b6255; } #game#game .merit-main .w5-annals .w5-goal em { font-size: 12px; } #game#game .merit-main .w5-annals .w5-note:not(.w5-locked) { padding: 0 2px; border: 0; font-size: 12px; color: #6b6255; } #game#game .merit-main .w5-annals .w5-note { word-break: keep-all; } #game#game .merit-main .w5-annals .w5-note.w5-locked { padding: 10px 12px; font-size: 13px; } #game#game .dialog.merit-main .w5-war { min-height: 48px !important; } #game#game .merit-main .w5-war-main b { font-size: 13px; } #game#game .merit-main .w5-war em { font-size: 13px; } #game#game .dialog.merit-main .w5-more { height: 44px !important; min-height: 44px !important; padding: 0 18px !important; } /* 공적록: compact cards, two or three to a row; earned ones in colour with a seal-red title. */ #game#game .merit-main .merit-deeds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 700px) { #game#game .merit-main .merit-deeds { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #game#game .merit-main .merit-deed { grid-template-columns: 32px minmax(0, 1fr); align-content: center; column-gap: 10px; row-gap: 2px; min-height: 60px; box-sizing: border-box; padding: 8px 12px; border: 1px solid rgba(42,38,34,.18); font-size: 12px; color: #6b6255; } #game#game .merit-main .merit-deed img { grid-row: 1 / span 3; align-self: center; width: 32px; height: 32px; } #game#game .merit-main .merit-deed b { font-size: 13px; line-height: 1.3; color: #4a4036; } #game#game .merit-main .merit-deed span { line-height: 1.3; word-break: keep-all; } #game#game .merit-main .merit-deed .merit-bar { margin-top: 4px; height: 4px; } #game#game .merit-main .merit-deed.done { background: rgba(163,51,40,.07); border-color: rgba(163,51,40,.4); } #game#game .merit-main .merit-deed.done b { color: #a33328; } @media (max-height: 360px) { #game#game .merit-main .merit-body { gap: 16px 20px; } #game#game .merit-main .merit-rank { padding-bottom: 12px; } #game#game .merit-main .merit-rank > b { font-size: 26px; } #game#game .merit-main .merit-order { min-height: 44px; padding: 6px 12px; } #game#game .merit-main .merit-deed { min-height: 56px; padding: 6px 10px; } #game#game .merit-main .merit-step { padding: 6px 4px; } #game#game .merit-main .merit-weekly { padding: 10px 12px; } #game#game .merit-main .merit-wars i { height: 30px; } } /* 군기함: the picture pane stays in view and fits under the button bar on short phones. */ #game#game .w3-dialog .w3-count { margin: -4px 0 12px; font-size: 13px; color: #6b6255; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game#game .w3-dialog .w3-box { grid-template-columns: 184px minmax(0, 1fr); gap: 16px; } #game#game .w3-dialog .w3-detail { gap: 8px; padding: 12px; border: 1px solid rgba(42,38,34,.3); border-radius: 12px; } #game#game .w3-dialog .w3-big { width: 92px; height: 96px; } #game#game .w3-dialog .w3-info { gap: 2px; } #game#game .w3-dialog .w3-info b { font-size: 18px; } #game#game .w3-dialog .w3-info span { font-size: 12px; line-height: 1.35; } #game#game .w3-dialog .w3-info small { font-size: 11px; } #game#game .w3-dialog .w3-wear { min-height: 44px; border-width: 1px !important; border-bottom-width: var(--btn-lip) !important; } #game#game .w3-dialog .w3-wear:disabled { border-bottom-width: 1px !important; } #game#game .w3-dialog .w3-group { gap: 8px; margin: 0 0 8px; font: 700 15px/1.3 var(--ui-font, sans-serif); } #game#game .w3-dialog .w3-group small { font: 600 12px/1.3 var(--ui-font, sans-serif); } #game#game .w3-dialog .w3-grid + .w3-group { margin-top: 16px; } #game#game .w3-dialog .w3-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; } #game#game .w3-dialog .w3-tile { gap: 4px; padding: 8px 4px 6px; border-width: 1px !important; border-bottom-width: var(--btn-lip) !important; } #game#game .w3-dialog .w3-tile.locked { border: 1px dashed rgba(42,38,34,.35) !important; color: #8a8072 !important; } #game#game .w3-dialog .w3-tile.next { border: 1px solid #a33328 !important; border-bottom-width: 1px !important; } #game#game .w3-dialog .w3-tile.equipped:not(.selected) { border-color: #2a2622 !important; } #game#game .w3-dialog .w3-tile.selected { outline: 2px solid #2a2622; outline-offset: -2px; } #game#game .w3-dialog .w3-worn { top: 4px; right: 4px; } /* On a phone held sideways the picture pane becomes a strip across the top that stays in view as the tiles scroll under it: the banner, its name and how it is won, and 달기 at the right end. */ @media (max-height: 500px) { #game#game .w3-dialog .w3-count { margin: -4px 0 16px; } #game#game .w3-dialog .w3-box { grid-template-columns: minmax(0, 1fr); gap: 12px; } #game#game .w3-dialog .w3-detail { top: 0; z-index: 2; grid-template-columns: 52px minmax(0, 1fr) auto; justify-items: stretch; align-items: center; gap: 0 14px; min-height: 68px; box-sizing: border-box; padding: 6px 12px; text-align: left; } /* The strip itself is square paper (it hides what scrolls under it, the dialog's top padding too); the rounded card is drawn behind its content. */ #game#game .w3-dialog .w3-detail { border: 0; border-radius: 0; background: var(--c-paper); box-shadow: 0 -16px 0 var(--c-paper); } #game#game .w3-dialog .w3-detail::before { content: ''; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(42,38,34,.3); border-radius: 12px; background: #ece3cf; } #game#game .w3-dialog .w3-big { justify-self: center; width: 46px; height: 52px; } #game#game .w3-dialog .w3-info { min-width: 0; } #game#game .w3-dialog .w3-info b { font-size: 17px; } #game#game .w3-dialog .w3-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game#game .w3-dialog .w3-wear { width: auto; min-width: 128px; padding: 0 20px; } #game#game .w3-dialog .w3-lock { width: 168px; } } @media (max-height: 360px) { #game#game .w3-dialog .w3-info small { display: none; } #game#game .w3-dialog .w3-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; } #game#game .w3-dialog .w3-tile-art { width: 36px; height: 38px; } } /* Unlock card: thumb-sized 달기 and close. */ #game#game #w3-unlock { gap: 8px; padding: 6px 4px 6px 10px; border-width: 1.5px; border-radius: 14px; box-shadow: 0 6px 16px rgba(42,38,34,.3); } #game#game .w3-unlock-go { min-height: 44px; height: 44px; padding: 0 16px; border-width: 1px !important; border-bottom-width: var(--btn-lip) !important; } #game#game .w3-unlock-x { width: 44px; min-height: 44px; height: 44px; } /* The merit notice off the battlefield (the map): a paper slip with a 功 seal, in the toast's usual place at the foot of the map. A battle keeps its own toast place and face. */ #game#game:not(.mode-battle):not(.mode-raid) #toast.is-merit { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: max-content; max-width: min(92%, 460px); padding: 6px 14px 6px 6px; border: 1.5px solid #2a2622; border-radius: 10px; background: #ece3cf; color: #2a2622; font: 700 13px/1.35 var(--ui-font, sans-serif); text-align: left; word-break: keep-all; box-shadow: 0 4px 12px rgba(42,38,34,.28); } #game#game:not(.mode-battle):not(.mode-raid) #toast.is-merit::before { content: '功'; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #a33328; color: #fbf1df; font: 700 15px/1 Gowun, serif; } /* 이번 주 전장 start: the opening card wraps by words and stays clear of the menu button under the Toss capsule. */ #game#game #war-banner.wk-start { max-width: min(460px, 58vw); } #game#game #war-banner.wk-start span { word-break: keep-all; } html.in-toss #game#game #war-banner.wk-start { top: max(20%, 112px); } /* == end U5 == */ /* Scroll rail (dist/scroll-rail.js): a thin track with a seal-red thumb on the right edge of a dialog whose content scrolls. */ #game#game .scroll-rail { position: absolute; z-index: 4; width: 4px; border-radius: 2px; background: #2a26221f; pointer-events: none; } #game#game .scroll-rail[hidden] { display: none; } #game#game .scroll-rail i { display: block; width: 100%; border-radius: 2px; background: #a33328; } /* == 판세 == 설욕전 line on the battle brief (under the commander line) and the 열세 지원 line on a war event card: seal red on paper, no box. */ #game#game .revenge-note { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; line-height: 1.35; font-weight: 700; word-break: keep-all; text-align: left; color: #2a2622; } #game#game .revenge-note b, #game#game .aid-note b { margin-right: 4px; color: #a33328; font-weight: 800; } #game#game .revenge-seal { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #a33328; color: #ece3cf; font-weight: 800; font-size: 14px; line-height: 1; } #game#game .overlay[data-kind=offer] .aid-note { margin: -8px 0 14px; font-size: 13px; line-height: 1.4; font-weight: 700; word-break: keep-all; color: #2a2622; } /* == FB 들판 전투 (campaign field battles: steady volley, decisive moment) == */ /* The foot's reload track ends in a seal-red notch: the steady window opens when the bar fills, then drains in seal red. Press while it shows. */ #game#game.mode-battle .reload-track.steady-mark { position: relative; height: 4px; margin: 1px 0 1px; } #game#game.mode-battle .reload-track.steady-mark::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 14%; background: #a33328; opacity: .7; } #game#game.mode-battle .reload-track.is-steady { background: rgba(163, 51, 40, .28); } #game#game.mode-battle .reload-track.is-steady span { background: #a33328 !important; } #game#game.mode-battle .reload-track.is-steady::after { opacity: 1; } #game#game.mode-battle .is-command .formation .formation-load.is-steady i { background: #a33328; } #game#game.mode-battle .touch-fire.steady-cue, #game#game.mode-battle .command-fire.steady-cue { outline: 3px solid #ece3cf; outline-offset: 1px; } #game#game .battle-result .decisive-moment { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; margin: 0; padding: 5px 12px; border-left: 3px solid #a33328; background: #ece3cf; color: #2a2622; font-size: 13px; line-height: 1.35; } #game#game .battle-result .decisive-moment b { flex: none; font-variant-numeric: tabular-nums; color: #a33328; } /* == 자동 전투 (campaign field battles) == the 자동 seal on each card its AI leads, and the toggle on the field-battle brief, drawn like a settings row. */ #game#game .formation .auto-seal.is-auto { width: auto; min-width: 18px; padding: 0 3px; box-sizing: border-box; font-size: 10px; letter-spacing: -.02em; } #game#game.mode-battle .is-command .formation .auto-seal.is-auto { width: auto; padding: 0 3px; font-size: 10px; } #game#game .overlay[data-kind=encounter] .brief-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; } #game#game .overlay[data-kind=encounter] .brief-mode .switch-brief-wrap { flex: 1 1 300px; min-width: 0; } #game#game .overlay[data-kind=encounter] .brief-mode .switch-brief { margin-top: 0; } #game#game .overlay[data-kind=encounter] .brief-mode .switch-brief-wrap > p { margin: 0; font-size: 13px; color: #4a4036; } #game#game .overlay[data-kind=encounter] .brief-mode-row { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; width: auto; min-width: 156px; height: 44px !important; min-height: 44px !important; padding: 0 12px 0 14px !important; gap: 8px; background: #ece3cf !important; color: #2a2622 !important; font: 700 14px/1 var(--ui-font, sans-serif) !important; box-shadow: none !important; border: 1.5px solid #2a2622 !important; border-bottom-width: var(--btn-lip) !important; border-radius: var(--btn-r) !important; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game .overlay[data-kind=encounter] .brief-mode-row:active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game .overlay[data-kind=encounter] .brief-mode-row b { font-size: 14px; font-weight: 700; color: #a33328; } #game#game .overlay[data-kind=encounter] .brief-mode-row[aria-pressed=false] b { color: #6b6255; } /* == T-title == */ /* The title's five things (app.js showMenu): 공적 under the logo, the gear top right, and the dock at the bottom (출정 or 이어 하기, 도전, 연습). The tile and dock sizes are in the title block near the top of this file. */ #game#game .title-screen :is(.ts-rank, .ts-welcome) { box-sizing: border-box; width: 288px; max-width: none; } #game#game .title-screen .ts-rank { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); cursor: pointer; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game .title-screen .ts-rank:active { transform: translateY(2px); border-bottom-width: 2px; } #game#game .title-screen .ts-rank:focus-visible { outline: 3px solid #e7bd68; outline-offset: 2px; } #game#game .title-screen .ts-welcome-text { flex: 1 1 auto; min-width: 0; text-wrap: balance; } /* Something left to do today: one seal-red dot on the corner. */ #game#game .ts-rank .ts-dot { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: #a33328; border: 2px solid #ece3cf; } /* 도전 before the first war: the picture faded, an ink lock on the corner. */ #game#game .ts-mode.locked { background: rgba(236,227,207,.8) !important; color: #4a4036 !important; } #game#game .ts-mode.locked img { filter: grayscale(1); opacity: .45; } #game#game .ts-mode .ts-lock-badge { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; background: #2a2622; border: 1.5px solid #ece3cf; font-style: normal; } #game#game .ts-mode .ts-lock { width: 14px; height: 14px; } /* A tap on the locked 도전: one paper note above the tiles for a moment. */ #game#game .ts-modes { position: relative; } #game#game .ts-lock-note { position: absolute; right: 0; bottom: calc(100% + 10px); margin: 0; padding: 6px 12px; white-space: nowrap; font: 700 13px/1.3 var(--ui-font, sans-serif); color: #2a2622; background: #ece3cf; border: 1.5px solid #a33328; border-radius: 10px; pointer-events: none; } /* The comeback recap sits above the call to action. */ #game#game .title-screen .ts-recap { padding: 4px 12px; font-size: 13px; border-width: 1.5px; } @media (max-width: 700px) and (min-aspect-ratio: 1/1) { #game#game .title-screen :is(.ts-rank, .ts-welcome) { width: 224px; } #game#game .title-screen .ts-welcome-text { font-size: 12px; } } /* Upright: the recap takes its own line above 이어 하기. */ @media (max-aspect-ratio: 1/1) { #game#game .title-screen .ts-play { flex-wrap: wrap; } #game#game .title-screen .ts-recap { position: static; flex: 1 0 100%; margin: 0; } } /* The two choosers: wide picture cards, each with its record on the right. */ #game#game .dialog.tm-dialog { width: min(480px, calc(100vw - 24px)); } #game#game .tm-dialog .tm-list { display: grid; gap: 8px; margin: 0 0 4px; } #game#game .tm-list > button { position: relative; display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 58px; height: auto !important; margin: 0; padding: 6px 12px 6px 8px !important; text-align: left; word-break: keep-all; cursor: pointer; color: #2a2622 !important; background: #ece3cf !important; border: 1.5px solid #2a2622 !important; border-bottom-width: 4px !important; border-radius: 10px !important; box-shadow: none !important; transition: transform .06s ease-out, border-bottom-width .06s ease-out; } #game#game .tm-list > button:active { transform: translateY(2px); border-bottom-width: 2px !important; } #game#game .tm-list > button:hover { filter: brightness(1.04); } #game#game .tm-list > button:focus-visible { outline: 3px solid #e7bd68; outline-offset: 2px; } #game#game .tm-list > button > img { flex: none; width: 40px; height: 40px; object-fit: contain; } #game#game .tm-list > button > span { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; } #game#game .tm-list > button > span > b { flex: 1 0 100%; font: 700 16px/1.15 var(--ui-font, sans-serif); white-space: nowrap; } #game#game .tm-list > button > span small { font: 600 13px/1.25 var(--ui-font, sans-serif); color: #4a4036; white-space: nowrap; } #game#game .tm-list .ts-weekly .wk-theme { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 700 13px/1.25 var(--ui-font, sans-serif); font-style: normal; white-space: nowrap; color: #a33328; } /* Time left, the day's bonus and the star count: a seal-red pill on the right edge. */ #game#game .tm-list > button > em { flex: none; margin-left: auto; padding: 3px 8px; font: 700 12px/1.3 var(--ui-font, sans-serif); font-style: normal; white-space: nowrap; color: #fbf1df; background: #a33328; border: 1.5px solid #5e1a13; border-radius: 9px; } /* A medal won this week sits on the corner of the weekly picture. */ #game#game .tm-list .ts-weekly .wk-seal { position: absolute; left: 34px; bottom: 6px; width: 20px; height: 20px; font-size: 11px; border-width: 1.5px; } @media (max-height: 420px) { #game#game .overlay .dialog.tm-dialog { padding: 12px 16px !important; } #game#game .overlay .dialog.tm-dialog > .dialog-actions { padding-bottom: 12px; margin-bottom: -12px; bottom: -12px; } #game#game .dialog.tm-dialog h2 { margin: 0 0 8px; font-size: 19px; line-height: 24px; } #game#game .tm-dialog .tm-list { gap: 6px; } #game#game .tm-list > button { min-height: 48px; padding: 4px 10px 4px 6px !important; } #game#game .tm-list > button > img { width: 34px; height: 34px; } #game#game .tm-list > button > span > b { font-size: 15px; } #game#game .tm-list .ts-weekly .wk-seal { left: 26px; bottom: 4px; width: 18px; height: 18px; font-size: 10px; } } /* == end T-title == */ /* Playtest builds only: the build id in the title's bottom-left corner. */ #game#game .title-screen .ts-build { position: absolute; left: max(8px, env(safe-area-inset-left)); bottom: 6px; z-index: 2; font-size: 10px; line-height: 12px; color: #ece3cf; opacity: .8; text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none; }