| :root { |
| --cream: #fff7e7; |
| --cream-2: #ffefd2; |
| --ink: #49351f; |
| --ink-soft: #7c664d; |
| --paper: #fffdf7; |
| --line: #ead7b7; |
| --pink: #ff7d9f; |
| --pink-soft: #ffe4eb; |
| --blue: #5b96ff; |
| --blue-soft: #e5efff; |
| --green: #44c58a; |
| --green-soft: #e0f9ed; |
| --purple: #ad7bff; |
| --purple-soft: #f0e7ff; |
| --orange: #f3a33a; |
| --orange-soft: #fff0d8; |
| --teal: #2fc0b4; |
| --teal-soft: #ddfbf7; |
| --p0: #ff6a49; |
| --p0-soft: #fff0eb; |
| --p1: #4f7dff; |
| --p1-soft: #edf2ff; |
| --shadow: 0 20px 50px rgba(116, 79, 34, .14); |
| --shadow-soft: 0 8px 24px rgba(116, 79, 34, .09); |
| --radius-xl: 34px; |
| --radius-lg: 24px; |
| --radius-md: 18px; |
| --board-max: 880px; |
| --sidebar-w: 382px; |
| --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| --round: "Arial Rounded MT Bold", "Nunito", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| html { min-height: 100%; } |
|
|
| body { |
| margin: 0; |
| min-height: 100vh; |
| color: var(--ink); |
| font-family: var(--font); |
| background: |
| radial-gradient(circle at 10% 0%, #fffdf6 0 18%, transparent 40%), |
| radial-gradient(circle at 92% 6%, #fff1d5 0 12%, transparent 32%), |
| linear-gradient(160deg, #fff9ee 0%, #fff3dc 48%, #f9ecd4 100%); |
| overflow-x: hidden; |
| } |
|
|
| body::before { |
| content: ""; |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| opacity: .35; |
| background-image: radial-gradient(#d7bd93 1px, transparent 1.5px); |
| background-size: 26px 26px; |
| mask-image: linear-gradient(to bottom, #000 0 55%, transparent 92%); |
| z-index: -1; |
| } |
|
|
| button, select { font: inherit; } |
| button { color: inherit; } |
| a { color: inherit; } |
|
|
| .sky-deco { |
| position: fixed; |
| inset: 0; |
| overflow: hidden; |
| pointer-events: none; |
| z-index: -1; |
| } |
| .sun { |
| position: absolute; |
| top: -90px; |
| right: 8%; |
| width: 280px; |
| height: 280px; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(255, 207, 94, .45), rgba(255, 207, 94, 0) 70%); |
| } |
| .cloud { |
| position: absolute; |
| height: 26px; |
| border-radius: 999px; |
| background: rgba(255, 255, 255, .62); |
| filter: blur(.2px); |
| box-shadow: 32px 10px 0 8px rgba(255, 255, 255, .52), -28px 8px 0 2px rgba(255, 255, 255, .44); |
| animation: drift 22s ease-in-out infinite alternate; |
| } |
| .cloud-a { top: 12%; left: 3%; width: 100px; } |
| .cloud-b { top: 24%; right: 14%; width: 76px; animation-delay: -7s; } |
| .cloud-c { top: 63%; left: 6%; width: 58px; opacity: .7; animation-delay: -13s; } |
| .hill { |
| position: absolute; |
| bottom: -220px; |
| width: 620px; |
| height: 420px; |
| border-radius: 50%; |
| background: rgba(209, 231, 174, .22); |
| } |
| .hill-a { left: -120px; } |
| .hill-b { right: -160px; width: 760px; background: rgba(255, 218, 158, .2); } |
|
|
| @keyframes drift { |
| from { transform: translateX(-10px) translateY(0); } |
| to { transform: translateX(22px) translateY(-8px); } |
| } |
|
|
| .topbar { |
| position: relative; |
| z-index: 4; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| width: min(1480px, calc(100% - 40px)); |
| margin: 0 auto; |
| padding: 22px 4px 14px; |
| } |
|
|
| .brand { |
| display: inline-flex; |
| align-items: center; |
| gap: 12px; |
| text-decoration: none; |
| min-width: 0; |
| } |
| .brand-mascot { |
| width: 58px; |
| height: 58px; |
| border-radius: 20px; |
| object-fit: cover; |
| border: 2px solid #fff; |
| box-shadow: 0 8px 18px rgba(184, 122, 29, .2); |
| background: #d7f8e4; |
| } |
| .brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } |
| .brand-kicker { |
| color: #b1844c; |
| font-size: 10px; |
| font-weight: 900; |
| letter-spacing: .2em; |
| line-height: 1; |
| } |
| .brand-title { |
| font-family: var(--round); |
| font-size: clamp(22px, 2.4vw, 34px); |
| font-weight: 900; |
| letter-spacing: .04em; |
| line-height: 1.05; |
| white-space: nowrap; |
| } |
| .brand-title em { |
| font-style: normal; |
| color: #e45e2d; |
| background: linear-gradient(180deg, #ff9d43, #ef5f2c); |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| .top-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } |
| .icon-btn, .ghost-btn, .text-btn { |
| border: 0; |
| cursor: pointer; |
| border-radius: 999px; |
| transition: transform .16s ease, background .16s ease, box-shadow .16s ease; |
| } |
| .icon-btn { |
| width: 42px; |
| height: 42px; |
| display: grid; |
| place-items: center; |
| font-size: 18px; |
| background: rgba(255, 253, 247, .8); |
| border: 1px solid rgba(222, 196, 153, .72); |
| box-shadow: 0 6px 16px rgba(123, 84, 32, .08); |
| } |
| .ghost-btn { |
| padding: 10px 16px; |
| background: rgba(255, 253, 247, .72); |
| border: 1px solid rgba(222, 196, 153, .72); |
| color: #6f5538; |
| font-weight: 800; |
| font-size: 13px; |
| box-shadow: 0 6px 16px rgba(123, 84, 32, .06); |
| } |
| .icon-btn:hover, .ghost-btn:hover, .text-btn:hover { transform: translateY(-1px); background: #fffdf7; } |
| .icon-btn:active, .ghost-btn:active, .text-btn:active { transform: translateY(0) scale(.97); } |
| .icon-btn.is-on { background: #fff2cc; border-color: #f1c65d; } |
|
|
| .game-layout { |
| position: relative; |
| z-index: 2; |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) var(--sidebar-w); |
| align-items: start; |
| gap: 26px; |
| width: min(1480px, calc(100% - 40px)); |
| margin: 0 auto; |
| padding: 8px 4px 42px; |
| } |
|
|
| .board-panel { min-width: 0; } |
| .board-scroll { |
| width: 100%; |
| overflow: auto; |
| overscroll-behavior-x: contain; |
| scrollbar-width: thin; |
| scrollbar-color: #d7bd93 transparent; |
| padding: 2px 2px 12px; |
| border-radius: 36px; |
| } |
| .board-scroll::-webkit-scrollbar { height: 8px; } |
| .board-scroll::-webkit-scrollbar-thumb { background: #d7bd93; border-radius: 99px; } |
|
|
| .board { |
| position: relative; |
| display: grid; |
| grid-template-columns: repeat(9, minmax(0, 1fr)); |
| grid-template-rows: repeat(9, minmax(0, 1fr)); |
| gap: 3px; |
| width: min(100%, var(--board-max)); |
| min-width: 650px; |
| aspect-ratio: 1 / 1; |
| margin: 0 auto; |
| padding: 10px; |
| border-radius: 38px; |
| border: 2px solid #fff; |
| background: |
| linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 247, 229, .1)), |
| #f5e2bd; |
| box-shadow: var(--shadow), inset 0 0 0 7px rgba(255, 252, 242, .65); |
| container-type: inline-size; |
| } |
|
|
| .board::before { |
| content: ""; |
| position: absolute; |
| inset: 8px; |
| border-radius: 32px; |
| border: 1px dashed rgba(177, 132, 76, .25); |
| pointer-events: none; |
| } |
|
|
| .tiles-layer { display: contents; } |
|
|
| .board-center { |
| grid-column: 2 / 9; |
| grid-row: 2 / 9; |
| position: relative; |
| z-index: 1; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: clamp(6px, 1.1cqw, 12px); |
| min-width: 0; |
| padding: clamp(12px, 2.4cqw, 28px); |
| border-radius: clamp(20px, 3cqw, 32px); |
| overflow: hidden; |
| text-align: center; |
| background: |
| radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .9), transparent 45%), |
| radial-gradient(circle at 20% 95%, rgba(205, 240, 203, .7), transparent 38%), |
| radial-gradient(circle at 88% 78%, rgba(255, 221, 168, .7), transparent 42%), |
| linear-gradient(160deg, #fffdf5, #fff3d8 58%, #eaf6dc); |
| box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), inset 0 12px 30px rgba(180, 132, 63, .06), 0 12px 30px rgba(126, 88, 39, .1); |
| } |
| .board-center::before, |
| .board-center::after { |
| content: ""; |
| position: absolute; |
| width: 44%; |
| aspect-ratio: 1; |
| border-radius: 50%; |
| border: 1px dashed rgba(133, 166, 94, .18); |
| pointer-events: none; |
| } |
| .board-center::before { left: -20%; top: -18%; } |
| .board-center::after { right: -18%; bottom: -18%; } |
|
|
| .center-top { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: clamp(8px, 1.7cqw, 18px); |
| width: 100%; |
| position: relative; |
| z-index: 1; |
| } |
| .town-frame { |
| flex: 0 0 auto; |
| width: clamp(92px, 20cqw, 172px); |
| aspect-ratio: 1; |
| border-radius: 28%; |
| overflow: hidden; |
| background: #d7f8e4; |
| border: 3px solid #fff; |
| box-shadow: 0 10px 22px rgba(84, 135, 77, .16), inset 0 0 0 1px rgba(116, 160, 89, .15); |
| transform: rotate(-3deg); |
| } |
| .town-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } |
| .center-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; } |
| .eyebrow { |
| color: #a57c48; |
| font-size: clamp(7px, .95cqw, 10px); |
| font-weight: 900; |
| letter-spacing: .18em; |
| } |
| .center-heading h1 { |
| margin: 0; |
| font-family: var(--round); |
| font-size: clamp(24px, 4.4cqw, 46px); |
| line-height: 1; |
| letter-spacing: .06em; |
| color: #4b351d; |
| text-shadow: 0 2px 0 #fff, 0 6px 0 rgba(201, 157, 81, .14); |
| } |
| .round-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 3px; |
| margin-top: 4px; |
| padding: 3px 9px; |
| border-radius: 999px; |
| background: rgba(255, 255, 255, .8); |
| border: 1px solid #e7d4ad; |
| color: #8a6a42; |
| font-size: clamp(8px, 1.05cqw, 11px); |
| font-weight: 800; |
| white-space: nowrap; |
| } |
| .round-pill b { color: #e45e2d; } |
|
|
| .dice-zone { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: clamp(7px, 1.3cqw, 12px); |
| position: relative; |
| z-index: 1; |
| } |
| .die { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-template-rows: repeat(3, 1fr); |
| gap: 2px; |
| width: clamp(38px, 7.1cqw, 64px); |
| aspect-ratio: 1; |
| padding: clamp(5px, .8cqw, 8px); |
| border-radius: clamp(10px, 1.8cqw, 16px); |
| background: linear-gradient(145deg, #fffefa, #fff3d7); |
| border: 2px solid #fff; |
| box-shadow: 0 5px 0 #d8b878, 0 10px 18px rgba(125, 86, 29, .16); |
| transform: rotate(-2deg); |
| } |
| .die:nth-child(2) { transform: rotate(3deg); } |
| .die.rolling { animation: dice-shake .16s linear infinite; } |
| .die .pip { |
| width: clamp(4px, .85cqw, 8px); |
| aspect-ratio: 1; |
| align-self: center; |
| justify-self: center; |
| border-radius: 50%; |
| background: #5d4327; |
| box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4); |
| } |
| .dice-sum { |
| position: absolute; |
| right: -2px; |
| bottom: -10px; |
| min-width: 34px; |
| padding: 3px 8px; |
| border-radius: 999px; |
| background: #e45e2d; |
| color: #fff; |
| font-family: var(--round); |
| font-weight: 900; |
| font-size: clamp(10px, 1.35cqw, 14px); |
| box-shadow: 0 4px 10px rgba(190, 76, 27, .28); |
| opacity: 0; |
| transform: translateY(4px) scale(.9); |
| transition: opacity .18s ease, transform .18s ease; |
| } |
| .dice-sum.show { opacity: 1; transform: translateY(0) scale(1); } |
| @keyframes dice-shake { |
| 0% { transform: rotate(-4deg) translateY(0); } |
| 50% { transform: rotate(4deg) translateY(-2px); } |
| 100% { transform: rotate(-4deg) translateY(0); } |
| } |
|
|
| .turn-display { |
| display: flex; |
| align-items: center; |
| gap: clamp(6px, 1.1cqw, 10px); |
| padding: 5px clamp(8px, 1.3cqw, 12px) 5px 6px; |
| border-radius: 999px; |
| background: rgba(255, 255, 255, .72); |
| border: 1px solid #e9d8b8; |
| box-shadow: 0 5px 14px rgba(131, 91, 36, .06); |
| position: relative; |
| z-index: 1; |
| max-width: 100%; |
| } |
| .turn-avatar { |
| width: clamp(28px, 4.4cqw, 40px); |
| aspect-ratio: 1; |
| border-radius: 50%; |
| object-fit: cover; |
| border: 2px solid #fff; |
| background: #d7f8e4; |
| } |
| .turn-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } |
| .turn-copy small { color: #9d7f57; font-size: clamp(7px, .95cqw, 9px); font-weight: 800; } |
| .turn-copy b { font-family: var(--round); font-size: clamp(13px, 1.7cqw, 17px); } |
| .turn-tag { |
| padding: 2px 7px; |
| border-radius: 999px; |
| background: #fff0eb; |
| color: #d35230; |
| font-size: clamp(7px, .9cqw, 9px); |
| font-weight: 900; |
| letter-spacing: .06em; |
| } |
|
|
| .roll-btn { |
| position: relative; |
| z-index: 1; |
| border: 0; |
| cursor: pointer; |
| padding: clamp(9px, 1.35cqw, 14px) clamp(24px, 3.6cqw, 42px); |
| border-radius: 999px; |
| background: linear-gradient(180deg, #ff9a45, #ed5d2d); |
| color: #fff; |
| font-family: var(--round); |
| font-weight: 900; |
| font-size: clamp(14px, 1.8cqw, 19px); |
| letter-spacing: .04em; |
| box-shadow: 0 6px 0 #bd3f18, 0 12px 22px rgba(196, 73, 27, .26); |
| transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; |
| } |
| .roll-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 8px 0 #bd3f18, 0 16px 26px rgba(196, 73, 27, .28); } |
| .roll-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #bd3f18, 0 6px 12px rgba(196, 73, 27, .22); } |
| .roll-btn:disabled { cursor: default; filter: saturate(.55) brightness(.96); opacity: .72; box-shadow: 0 4px 0 #bd3f18; } |
| .roll-btn.is-auto { background: linear-gradient(180deg, #62c998, #2f9f73); box-shadow: 0 6px 0 #217d59, 0 12px 22px rgba(34, 128, 91, .22); } |
|
|
| .center-hint { |
| position: relative; |
| z-index: 1; |
| margin: 0; |
| min-height: 1.3em; |
| color: #90734c; |
| font-size: clamp(8px, 1.15cqw, 12px); |
| font-weight: 700; |
| line-height: 1.35; |
| max-width: 90%; |
| } |
|
|
| .center-news { |
| position: absolute; |
| left: 50%; |
| bottom: clamp(25px, 4.2cqw, 42px); |
| transform: translateX(-50%); |
| z-index: 1; |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| max-width: 88%; |
| padding: 4px clamp(8px, 1.2cqw, 13px); |
| border-radius: 999px; |
| background: rgba(255, 255, 255, .62); |
| border: 1px dashed #e4cfa9; |
| color: #90734c; |
| font-size: clamp(7px, .92cqw, 10px); |
| font-weight: 700; |
| line-height: 1.25; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .center-news > span:last-child { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .board-center.has-action .center-news { display: none; } |
|
|
| .center-stats { |
| position: absolute; |
| left: 50%; |
| bottom: clamp(6px, 1cqw, 12px); |
| transform: translateX(-50%); |
| z-index: 1; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: clamp(8px, 1.6cqw, 18px); |
| width: max-content; |
| max-width: 94%; |
| padding: 4px clamp(10px, 1.5cqw, 16px); |
| border-radius: 999px; |
| background: rgba(255, 255, 255, .55); |
| color: #8c704c; |
| font-size: clamp(7px, .95cqw, 10px); |
| font-weight: 800; |
| white-space: nowrap; |
| } |
| .center-stats b { color: #c4512d; } |
|
|
| .action-panel { |
| position: relative; |
| z-index: 3; |
| width: min(94%, 430px); |
| margin-top: 1px; |
| padding: clamp(8px, 1.2cqw, 13px); |
| border-radius: clamp(14px, 2cqw, 20px); |
| background: rgba(255, 253, 247, .96); |
| border: 1.5px solid #ecd7b2; |
| box-shadow: 0 12px 26px rgba(125, 85, 28, .14); |
| text-align: left; |
| animation: panel-in .24s cubic-bezier(.2, .8, .2, 1) both; |
| } |
| @keyframes panel-in { |
| from { opacity: 0; transform: translateY(7px) scale(.97); } |
| to { opacity: 1; transform: translateY(0) scale(1); } |
| } |
| .action-panel.is-hidden { display: none; } |
| .action-head { display: flex; align-items: center; gap: 9px; } |
| .action-icon { |
| flex: 0 0 auto; |
| display: grid; |
| place-items: center; |
| width: clamp(30px, 4.4cqw, 42px); |
| aspect-ratio: 1; |
| border-radius: 13px; |
| background: #fff4d8; |
| font-size: clamp(16px, 2.5cqw, 24px); |
| border: 1px solid #f0ddb8; |
| } |
| .action-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; } |
| .action-title b { font-size: clamp(11px, 1.45cqw, 14px); line-height: 1.1; } |
| .action-title small { color: #9a7b54; font-size: clamp(7px, .95cqw, 9px); font-weight: 700; } |
| .action-desc { |
| margin: 6px 0 8px; |
| color: #7f674a; |
| font-size: clamp(8px, 1.05cqw, 10.5px); |
| line-height: 1.45; |
| } |
| .action-desc b { color: #c24b2b; } |
| .action-buttons { display: flex; gap: 6px; } |
| .action-buttons button { |
| flex: 1; |
| min-height: 32px; |
| border: 0; |
| border-radius: 10px; |
| cursor: pointer; |
| font-weight: 900; |
| font-size: clamp(9px, 1.15cqw, 12px); |
| transition: transform .15s ease, filter .15s ease; |
| } |
| .action-buttons button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.02); } |
| .action-buttons button:active:not(:disabled) { transform: translateY(1px) scale(.98); } |
| .action-buttons .primary { background: linear-gradient(180deg, #ff9a45, #ed5d2d); color: #fff; box-shadow: 0 3px 0 #bd3f18; } |
| .action-buttons .secondary { background: #eaf6df; color: #397a43; box-shadow: 0 3px 0 #bfd8a8; } |
| .action-buttons .ghost { background: #f4ead8; color: #816343; box-shadow: 0 3px 0 #d9c29e; } |
| .action-buttons button:disabled { opacity: .45; cursor: default; box-shadow: none; } |
| .auto-note { |
| margin-top: 6px; |
| padding: 4px 7px; |
| border-radius: 8px; |
| background: #eef9e9; |
| color: #43804c; |
| font-size: clamp(7px, .9cqw, 9px); |
| font-weight: 800; |
| text-align: center; |
| } |
|
|
| .tile { |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 1px; |
| min-width: 0; |
| min-height: 0; |
| padding: clamp(2px, .45cqw, 5px); |
| border: 1px solid rgba(203, 174, 128, .55); |
| border-radius: clamp(6px, 1.2cqw, 12px); |
| background: linear-gradient(160deg, #fffef9, #fff9ea); |
| box-shadow: 0 3px 6px rgba(132, 94, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .9); |
| overflow: hidden; |
| cursor: default; |
| font-family: var(--font); |
| text-align: center; |
| transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; |
| } |
| .tile::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: clamp(3px, .62cqw, 7px); |
| background: var(--group-color, #e5d4b6); |
| opacity: .95; |
| } |
| .tile:not(.has-strip)::before { opacity: .35; height: 2px; background: #e4d1b0; } |
| .tile:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(132, 94, 42, .12); z-index: 2; } |
| .tile.is-current { |
| border-color: var(--current-color, var(--p0)); |
| box-shadow: 0 0 0 2px color-mix(in srgb, var(--current-color, var(--p0)) 24%, transparent), 0 5px 12px rgba(202, 87, 45, .14); |
| z-index: 2; |
| } |
| .tile.owned { background: linear-gradient(160deg, #fffef9, var(--owner-soft, #fff5df)); } |
| .tile.owned::after { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| border-radius: inherit; |
| box-shadow: inset 0 0 0 2px var(--owner-color, transparent); |
| opacity: .26; |
| pointer-events: none; |
| } |
| .tile-icon { |
| position: relative; |
| z-index: 1; |
| font-size: clamp(14px, 2.2cqw, 23px); |
| line-height: 1; |
| filter: drop-shadow(0 1px 0 #fff); |
| } |
| .tile-name { |
| position: relative; |
| z-index: 1; |
| max-width: 100%; |
| font-size: clamp(6.5px, .94cqw, 10px); |
| font-weight: 900; |
| line-height: 1.08; |
| letter-spacing: -.01em; |
| color: #59422a; |
| word-break: break-all; |
| } |
| .tile-price { |
| position: relative; |
| z-index: 1; |
| color: #a27e4e; |
| font-size: clamp(6px, .82cqw, 9px); |
| font-weight: 800; |
| line-height: 1; |
| } |
| .tile-note { |
| position: relative; |
| z-index: 1; |
| color: #b08b5d; |
| font-size: clamp(5.5px, .72cqw, 8px); |
| font-weight: 700; |
| line-height: 1; |
| } |
| .tile-houses { |
| position: relative; |
| z-index: 1; |
| display: flex; |
| gap: 1px; |
| height: clamp(5px, .8cqw, 8px); |
| line-height: 1; |
| font-size: clamp(6px, .85cqw, 9px); |
| } |
| .tile-owner { |
| position: absolute; |
| top: clamp(3px, .55cqw, 5px); |
| right: clamp(3px, .55cqw, 5px); |
| z-index: 3; |
| display: none; |
| min-width: 16px; |
| height: 14px; |
| padding: 0 4px; |
| place-items: center; |
| border-radius: 999px; |
| background: var(--owner-color, #aaa); |
| color: #fff; |
| font-size: clamp(6px, .78cqw, 8px); |
| font-weight: 900; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, .18); |
| } |
| .tile.owned .tile-owner { display: grid; } |
| .tile-tokens { |
| position: absolute; |
| left: 50%; |
| bottom: clamp(2px, .4cqw, 4px); |
| transform: translateX(-50%); |
| z-index: 4; |
| display: flex; |
| align-items: flex-end; |
| justify-content: center; |
| gap: 1px; |
| max-width: 96%; |
| pointer-events: none; |
| } |
| .token { |
| width: clamp(17px, 2.75cqw, 30px); |
| aspect-ratio: 1; |
| border-radius: 50%; |
| overflow: hidden; |
| border: 2px solid var(--pcolor, #fff); |
| background: #d7f8e4; |
| box-shadow: 0 2px 5px rgba(73, 48, 20, .24), 0 0 0 1px #fff; |
| animation: token-pop .18s ease both; |
| } |
| .token img { width: 100%; height: 100%; object-fit: cover; display: block; } |
| .token.is-current { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pcolor), 0 3px 8px rgba(73, 48, 20, .28); } |
| @keyframes token-pop { |
| from { transform: translateY(3px) scale(.82); } |
| to { transform: translateY(0) scale(1); } |
| } |
|
|
| .tile-start, .tile-jail, .tile-free, .tile-gojail { |
| background: linear-gradient(150deg, #fff7d9, #ffe5a8); |
| } |
| .tile-start .tile-icon, .tile-jail .tile-icon, .tile-free .tile-icon, .tile-gojail .tile-icon { font-size: clamp(17px, 2.8cqw, 30px); } |
| .tile-jail, .tile-gojail { background: linear-gradient(150deg, #ffe9e4, #ffc8bb); } |
| .tile-free { background: linear-gradient(150deg, #e9fbe6, #c8f0bd); } |
| .tile-chance { background: linear-gradient(150deg, #fff7d5, #ffe9a9); } |
| .tile-fate { background: linear-gradient(150deg, #f2eaff, #dcc8ff); } |
| .tile-tax { background: linear-gradient(150deg, #ffece8, #ffd0c8); } |
| .tile-charity { background: linear-gradient(150deg, #ffeef6, #ffcfe2); } |
| .tile-bank { background: linear-gradient(150deg, #e9f7ff, #c9e8ff); } |
| .tile-station { background: linear-gradient(150deg, #fff5e0, #ffe0ad); } |
| .tile-utility { background: linear-gradient(150deg, #e7fffc, #c2f5ee); } |
|
|
| .pos-0 { border-bottom-right-radius: clamp(16px, 2.6cqw, 28px); } |
| .pos-8 { border-bottom-left-radius: clamp(16px, 2.6cqw, 28px); } |
| .pos-16 { border-top-left-radius: clamp(16px, 2.6cqw, 28px); } |
| .pos-24 { border-top-right-radius: clamp(16px, 2.6cqw, 28px); } |
|
|
| .board-caption { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 6px 16px; |
| padding: 2px 8px 0; |
| color: #9d8057; |
| font-size: 11px; |
| font-weight: 700; |
| } |
| .board-caption span::before { |
| content: "✦"; |
| color: #e4a73d; |
| margin-right: 5px; |
| } |
| .mobile-hint { display: none; } |
|
|
| .sidebar { |
| position: sticky; |
| top: 16px; |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| max-height: calc(100vh - 32px); |
| min-width: 0; |
| } |
|
|
| .card { |
| background: rgba(255, 253, 247, .9); |
| border: 1px solid rgba(233, 213, 178, .9); |
| border-radius: var(--radius-lg); |
| box-shadow: var(--shadow-soft); |
| backdrop-filter: blur(8px); |
| } |
|
|
| .section-label { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| color: #a0835b; |
| font-size: 10px; |
| font-weight: 900; |
| letter-spacing: .13em; |
| text-transform: uppercase; |
| } |
| .live-dot { |
| width: 7px; |
| height: 7px; |
| border-radius: 50%; |
| background: #46c684; |
| box-shadow: 0 0 0 4px rgba(70, 198, 132, .14); |
| animation: live 1.8s ease infinite; |
| } |
| @keyframes live { |
| 50% { box-shadow: 0 0 0 7px rgba(70, 198, 132, 0); } |
| } |
|
|
| .current-card { padding: 16px 16px 14px; } |
| .current-hero { |
| display: flex; |
| align-items: center; |
| gap: 13px; |
| margin-top: 10px; |
| } |
| .avatar-ring { |
| flex: 0 0 auto; |
| width: 86px; |
| aspect-ratio: 1; |
| padding: 3px; |
| border-radius: 26px; |
| background: conic-gradient(from 210deg, var(--ring, #ff6a49), #ffd56a, var(--ring, #ff6a49)); |
| box-shadow: 0 8px 18px rgba(137, 88, 30, .16); |
| transition: background .3s ease; |
| } |
| .avatar-ring img { |
| width: 100%; |
| height: 100%; |
| display: block; |
| object-fit: cover; |
| border-radius: 23px; |
| border: 3px solid #fffdf7; |
| background: #d7f8e4; |
| } |
| .current-copy { min-width: 0; } |
| .current-copy h2 { |
| margin: 0; |
| font-family: var(--round); |
| font-size: 28px; |
| line-height: 1; |
| letter-spacing: .03em; |
| } |
| .current-money { |
| margin-top: 4px; |
| color: #d8552f; |
| font-family: var(--round); |
| font-size: 25px; |
| font-weight: 900; |
| line-height: 1; |
| letter-spacing: -.02em; |
| } |
| .current-copy p { |
| margin: 6px 0 0; |
| color: #947650; |
| font-size: 11px; |
| font-weight: 700; |
| line-height: 1.35; |
| } |
| .mini-stats { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 6px; |
| margin-top: 12px; |
| } |
| .mini-stats > div { |
| padding: 7px 8px; |
| border-radius: 13px; |
| background: #fbf2e2; |
| border: 1px solid #f0e1c8; |
| min-width: 0; |
| } |
| .mini-stats span { |
| display: block; |
| color: #9b7d56; |
| font-size: 9px; |
| font-weight: 800; |
| } |
| .mini-stats b { |
| display: block; |
| margin-top: 1px; |
| color: #5e4327; |
| font-family: var(--round); |
| font-size: 14px; |
| line-height: 1.1; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .players-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } |
| .player-card { |
| position: relative; |
| display: flex; |
| align-items: center; |
| gap: 9px; |
| min-width: 0; |
| padding: 10px; |
| border-radius: 18px; |
| border: 1.5px solid #ebdcc2; |
| background: rgba(255, 253, 247, .82); |
| box-shadow: 0 6px 16px rgba(126, 88, 39, .06); |
| transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; |
| } |
| .player-card.is-current { |
| border-color: var(--pcolor); |
| background: linear-gradient(145deg, #fffdf7, var(--psoft)); |
| box-shadow: 0 8px 20px rgba(126, 88, 39, .1), inset 0 0 0 1px var(--pcolor); |
| transform: translateY(-1px); |
| } |
| .player-avatar { |
| flex: 0 0 auto; |
| width: 44px; |
| aspect-ratio: 1; |
| border-radius: 14px; |
| overflow: hidden; |
| border: 2px solid #fff; |
| background: #d7f8e4; |
| box-shadow: 0 3px 8px rgba(93, 64, 28, .14); |
| } |
| .player-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } |
| .player-main { min-width: 0; } |
| .player-name-row { display: flex; align-items: center; gap: 4px; } |
| .player-name-row b { font-size: 13px; line-height: 1.1; white-space: nowrap; } |
| .player-tag { |
| display: none; |
| padding: 1px 4px; |
| border-radius: 999px; |
| background: var(--pcolor); |
| color: #fff; |
| font-size: 7px; |
| font-weight: 900; |
| } |
| .player-card.is-current .player-tag { display: inline-block; } |
| .player-cash { |
| margin-top: 2px; |
| color: var(--pcolor); |
| font-family: var(--round); |
| font-size: 13px; |
| font-weight: 900; |
| line-height: 1.1; |
| white-space: nowrap; |
| } |
| .player-meta { |
| margin-top: 2px; |
| color: #9a7c55; |
| font-size: 8.5px; |
| font-weight: 700; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .player-jail { |
| position: absolute; |
| top: 6px; |
| right: 7px; |
| font-size: 11px; |
| } |
|
|
| .control-card { padding: 12px; } |
| .auto-btn { |
| display: flex; |
| align-items: center; |
| gap: 11px; |
| width: 100%; |
| padding: 11px 13px; |
| border: 0; |
| border-radius: 16px; |
| cursor: pointer; |
| text-align: left; |
| color: #fff; |
| background: linear-gradient(135deg, #3fb583, #218f66); |
| box-shadow: 0 5px 0 #176b4b, 0 10px 20px rgba(28, 130, 90, .2); |
| transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; |
| } |
| .auto-btn:hover { transform: translateY(-1px); filter: brightness(1.03); } |
| .auto-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #176b4b; } |
| .auto-btn.is-on { background: linear-gradient(135deg, #ff9a45, #e95c2e); box-shadow: 0 5px 0 #b53d18, 0 10px 20px rgba(197, 75, 28, .22); } |
| .auto-icon { |
| flex: 0 0 auto; |
| display: grid; |
| place-items: center; |
| width: 34px; |
| aspect-ratio: 1; |
| border-radius: 12px; |
| background: rgba(255, 255, 255, .2); |
| font-size: 15px; |
| padding-left: 2px; |
| } |
| .auto-btn.is-on .auto-icon { padding-left: 0; } |
| .auto-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; } |
| .auto-copy b { font-size: 14px; line-height: 1.15; } |
| .auto-copy small { color: rgba(255, 255, 255, .8); font-size: 9px; font-weight: 700; } |
| .control-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| margin-top: 10px; |
| padding: 0 2px; |
| } |
| .speed-label { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| color: #8e704b; |
| font-size: 10px; |
| font-weight: 800; |
| } |
| .speed-label select { |
| appearance: none; |
| border: 1px solid #e4d2b4; |
| border-radius: 9px; |
| background: #fffaf0; |
| color: #664a2d; |
| padding: 4px 20px 4px 8px; |
| font-size: 11px; |
| font-weight: 900; |
| cursor: pointer; |
| background-image: linear-gradient(45deg, transparent 50%, #9d7a4f 50%), linear-gradient(135deg, #9d7a4f 50%, transparent 50%); |
| background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%; |
| background-size: 4px 4px, 4px 4px; |
| background-repeat: no-repeat; |
| } |
| .control-note { color: #ad9169; font-size: 9px; font-weight: 700; text-align: right; } |
|
|
| .log-card { |
| display: flex; |
| flex-direction: column; |
| min-height: 160px; |
| padding: 13px 13px 9px; |
| overflow: hidden; |
| } |
| .log-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| padding: 0 2px 8px; |
| } |
| .log-head h2 { margin: 0; font-size: 12px; letter-spacing: .08em; color: #6f5538; } |
| .text-btn { |
| padding: 3px 7px; |
| background: transparent; |
| color: #a1845d; |
| font-size: 9px; |
| font-weight: 800; |
| } |
| .text-btn:hover { background: #f8efdf; } |
| .log-list { |
| list-style: none; |
| margin: 0; |
| padding: 0 2px 4px; |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| overflow: auto; |
| max-height: 220px; |
| scrollbar-width: thin; |
| scrollbar-color: #dcc7a5 transparent; |
| } |
| .log-list::-webkit-scrollbar { width: 6px; } |
| .log-list::-webkit-scrollbar-thumb { background: #dcc7a5; border-radius: 99px; } |
| .log-item { |
| position: relative; |
| padding: 5px 7px 5px 18px; |
| border-radius: 8px; |
| color: #735b3d; |
| font-size: 10px; |
| font-weight: 650; |
| line-height: 1.35; |
| animation: log-in .22s ease both; |
| } |
| .log-item::before { |
| content: ""; |
| position: absolute; |
| left: 7px; |
| top: 9px; |
| width: 5px; |
| height: 5px; |
| border-radius: 50%; |
| background: #cbb38d; |
| } |
| .log-item.log-turn { background: #fbf3e3; color: #8d6b3f; font-weight: 900; } |
| .log-item.log-turn::before { background: #e0a53d; } |
| .log-item.log-buy { background: #eef9e9; color: #3e7a46; } |
| .log-item.log-buy::before { background: #4fbf72; } |
| .log-item.log-rent { background: #fff2ed; color: #9b4a32; } |
| .log-item.log-rent::before { background: #f0764f; } |
| .log-item.log-card { background: #f5eeff; color: #6a4b9b; } |
| .log-item.log-card::before { background: #a77af0; } |
| .log-item.log-jail { background: #ffecec; color: #9c4141; } |
| .log-item.log-jail::before { background: #e55b5b; } |
| .log-item.log-bonus { background: #fff8d9; color: #8a6c1e; } |
| .log-item.log-bonus::before { background: #e8bd2e; } |
| .log-item.log-danger { background: #ffe3e3; color: #a13333; font-weight: 900; } |
| .log-item.log-danger::before { background: #d93333; } |
| @keyframes log-in { |
| from { opacity: 0; transform: translateY(-3px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .credits { |
| padding: 0 4px 4px; |
| color: #a98e69; |
| font-size: 9px; |
| font-weight: 650; |
| text-align: center; |
| line-height: 1.5; |
| } |
| .credits a { color: #8f6b3e; text-decoration: underline; text-underline-offset: 2px; } |
|
|
| .toast { |
| position: fixed; |
| left: 50%; |
| top: 18px; |
| z-index: 30; |
| transform: translate(-50%, -16px); |
| max-width: min(88vw, 420px); |
| padding: 10px 16px; |
| border-radius: 999px; |
| background: rgba(63, 45, 25, .94); |
| color: #fff; |
| font-size: 12px; |
| font-weight: 800; |
| box-shadow: 0 12px 26px rgba(50, 32, 12, .22); |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity .2s ease, transform .2s ease; |
| text-align: center; |
| } |
| .toast.show { opacity: 1; transform: translate(-50%, 0); } |
| .toast.is-good { background: rgba(33, 130, 88, .96); } |
| .toast.is-bad { background: rgba(176, 56, 43, .96); } |
| .toast.is-gold { background: rgba(166, 112, 18, .96); } |
|
|
| .modal { |
| position: fixed; |
| inset: 0; |
| z-index: 40; |
| display: grid; |
| place-items: center; |
| padding: 20px; |
| background: rgba(65, 45, 22, .36); |
| backdrop-filter: blur(6px); |
| transition: opacity .2s ease; |
| } |
| .modal.is-hidden { display: none; } |
| .modal-card { |
| position: relative; |
| width: min(100%, 460px); |
| max-height: min(86vh, 760px); |
| overflow: auto; |
| padding: 26px 24px 22px; |
| border-radius: 28px; |
| background: |
| radial-gradient(circle at 50% 0%, #fffef9, transparent 38%), |
| linear-gradient(160deg, #fffdf6, #fff1d6); |
| border: 2px solid #fff; |
| box-shadow: 0 30px 70px rgba(61, 40, 16, .26), inset 0 0 0 1px rgba(221, 190, 140, .5); |
| text-align: center; |
| animation: modal-in .26s cubic-bezier(.2, .8, .2, 1) both; |
| } |
| @keyframes modal-in { |
| from { opacity: 0; transform: translateY(12px) scale(.96); } |
| to { opacity: 1; transform: translateY(0) scale(1); } |
| } |
| .modal-close { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| width: 32px; |
| height: 32px; |
| border: 0; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, .7); |
| color: #8d704a; |
| font-size: 22px; |
| line-height: 1; |
| cursor: pointer; |
| transition: background .15s ease, transform .15s ease; |
| } |
| .modal-close:hover { background: #fff; transform: rotate(6deg); } |
| .modal.no-dismiss .modal-close { display: none; } |
| .modal-art { |
| width: 132px; |
| aspect-ratio: 1; |
| margin: 0 auto 10px; |
| border-radius: 32%; |
| overflow: hidden; |
| border: 3px solid #fff; |
| background: #d7f8e4; |
| box-shadow: 0 12px 24px rgba(97, 121, 55, .15); |
| } |
| .modal-art img { width: 100%; height: 100%; object-fit: cover; display: block; } |
| .modal-kicker { |
| color: #b0834a; |
| font-size: 10px; |
| font-weight: 900; |
| letter-spacing: .2em; |
| text-transform: uppercase; |
| } |
| .modal-card h2 { |
| margin: 4px 0 8px; |
| font-family: var(--round); |
| font-size: 25px; |
| line-height: 1.15; |
| letter-spacing: .02em; |
| color: #4e3820; |
| } |
| .modal-card p { |
| margin: 7px 0; |
| color: #7b6243; |
| font-size: 13px; |
| line-height: 1.55; |
| font-weight: 650; |
| } |
| .modal-card .card-effect { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| margin-top: 6px; |
| padding: 6px 14px; |
| border-radius: 999px; |
| background: #fff3cf; |
| border: 1px solid #ecd18b; |
| color: #9a6718; |
| font-family: var(--round); |
| font-weight: 900; |
| font-size: 15px; |
| } |
| .modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; } |
| .modal-actions button { |
| border: 0; |
| border-radius: 12px; |
| padding: 10px 20px; |
| cursor: pointer; |
| font-weight: 900; |
| font-size: 13px; |
| transition: transform .15s ease, filter .15s ease; |
| } |
| .modal-actions button:hover { transform: translateY(-1px); filter: brightness(1.03); } |
| .modal-actions button:active { transform: translateY(1px) scale(.98); } |
| .modal-actions .primary { background: linear-gradient(180deg, #ff9a45, #ed5d2d); color: #fff; box-shadow: 0 4px 0 #bd3f18; } |
| .modal-actions .ghost { background: #f3e8d6; color: #7b5d3c; box-shadow: 0 4px 0 #d6bd97; } |
| .modal-actions .secondary { background: #e7f8e2; color: #3c7c47; box-shadow: 0 4px 0 #b9dba8; } |
| .rules-modal { text-align: left; } |
| .rules-modal .modal-kicker, .rules-modal h2 { text-align: center; } |
| .rules-grid { display: grid; gap: 7px; margin: 12px 0 4px; } |
| .rule-row { |
| display: flex; |
| gap: 9px; |
| padding: 8px 10px; |
| border-radius: 12px; |
| background: rgba(255, 255, 255, .62); |
| border: 1px solid #f0e1c8; |
| color: #725a3c; |
| font-size: 11px; |
| line-height: 1.45; |
| } |
| .rule-row b { color: #4f3820; } |
| .rule-icon { |
| flex: 0 0 auto; |
| display: grid; |
| place-items: center; |
| width: 28px; |
| height: 28px; |
| border-radius: 9px; |
| background: #fff3d8; |
| font-size: 15px; |
| } |
| .group-legend { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } |
| .group-chip { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| padding: 3px 7px; |
| border-radius: 999px; |
| background: var(--chip-soft); |
| border: 1px solid var(--chip); |
| color: #5e4528; |
| font-size: 9px; |
| font-weight: 900; |
| } |
| .group-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--chip); } |
| .final-scores { display: grid; gap: 6px; margin: 14px 0 2px; text-align: left; } |
| .final-row { |
| display: flex; |
| align-items: center; |
| gap: 9px; |
| padding: 7px 9px; |
| border-radius: 12px; |
| background: rgba(255, 255, 255, .66); |
| border: 1px solid #efdfc4; |
| } |
| .final-row img { width: 36px; height: 36px; border-radius: 11px; object-fit: cover; border: 2px solid #fff; background: #d7f8e4; } |
| .final-row b { font-size: 12px; } |
| .final-row span { margin-left: auto; color: #b04a2b; font-family: var(--round); font-weight: 900; font-size: 13px; } |
| .gameover-modal .modal-art { width: 148px; } |
| .noscript { |
| position: fixed; |
| inset: 0; |
| display: grid; |
| place-items: center; |
| z-index: 100; |
| background: #fff7e7; |
| color: #6b4d2c; |
| font-weight: 800; |
| } |
|
|
| @media (max-width: 1180px) { |
| :root { --sidebar-w: 344px; } |
| .game-layout { gap: 20px; } |
| .brand-title { font-size: 28px; } |
| } |
|
|
| @media (max-width: 980px) { |
| .topbar, .game-layout { width: min(100% - 24px, 900px); } |
| .game-layout { grid-template-columns: 1fr; } |
| .sidebar { position: static; max-height: none; display: grid; grid-template-columns: 1fr 1fr; align-items: start; } |
| .current-card { grid-row: span 2; } |
| .players-row { align-self: start; } |
| .control-card { grid-column: 1 / -1; } |
| .log-card { grid-column: 1 / -1; } |
| .credits { grid-column: 1 / -1; } |
| .board { min-width: 620px; } |
| .log-list { max-height: 170px; } |
| } |
|
|
| @media (max-width: 720px) { |
| .topbar { padding-top: 14px; align-items: flex-start; } |
| .brand-mascot { width: 46px; height: 46px; border-radius: 15px; } |
| .brand-kicker { font-size: 8px; } |
| .brand-title { font-size: 23px; } |
| .top-actions { gap: 5px; } |
| .ghost-btn { padding: 8px 11px; font-size: 11px; } |
| .icon-btn { width: 36px; height: 36px; font-size: 15px; } |
| .game-layout { padding-bottom: 26px; } |
| .sidebar { display: flex; flex-direction: column; gap: 11px; } |
| .current-card { width: 100%; } |
| .players-row { width: 100%; } |
| .control-card, .log-card, .credits { width: 100%; } |
| .board { min-width: 560px; } |
| .board-caption { font-size: 10px; } |
| .mobile-hint { display: inline; } |
| .current-hero { gap: 11px; } |
| .avatar-ring { width: 76px; } |
| .current-copy h2 { font-size: 25px; } |
| .current-money { font-size: 22px; } |
| .modal-card { padding: 24px 18px 18px; } |
| .modal-card h2 { font-size: 22px; } |
| } |
|
|
| @media (max-width: 480px) { |
| .brand-mascot { width: 40px; height: 40px; border-radius: 13px; } |
| .brand-kicker { display: none; } |
| .brand-title { font-size: 19px; } |
| .ghost-btn { padding: 7px 9px; font-size: 10px; } |
| .icon-btn { width: 33px; height: 33px; font-size: 14px; } |
| .board { min-width: 540px; } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, *::before, *::after { |
| animation-duration: .01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: .01ms !important; |
| scroll-behavior: auto !important; |
| } |
| } |
|
|
