:root { color-scheme: dark; --edge: clamp(.55rem, 1.2vmin, 1rem); --gap: clamp(.35rem, .8vmin, .72rem); --schema-padding: .34rem; --top-height: clamp(4.65rem, 7.5vh, 5.3rem); --status-height: clamp(2.2rem, 3.8vh, 2.55rem); --nav-size: clamp(3.5rem, 4.5vw, 4.65rem); --activity-size: clamp(2.85rem, 3.6vw, 3.35rem); --resource-width: min(52rem, calc(100vw - 31rem)); --radius-1: .34rem; --radius-2: .78rem; --radius-round: 999px; --ink: #f4f1e8; --muted: rgb(228 231 224 / .62); --black: rgb(8 10 11 / .92); --black-soft: rgb(13 16 17 / .76); --yellow: #d9bd58; --yellow-bright: #f3d675; --cyan: #5ecfd3; --teal: #66b89b; --coral: #d87961; --violet: #9480cf; --danger: #e26b5f; --schema: rgb(136 223 152 / .52); --map-base: rgb(95 95 32); --resource-wood: var(--teal); --resource-clay: var(--coral); --resource-iron: var(--cyan); --resource-crop: var(--yellow); --resource-culture: var(--violet); --font-ui: "Segoe UI Variable", "Inter", system-ui, sans-serif; --font-display: "Bahnschrift", "Segoe UI Variable", system-ui, sans-serif; --font-village: "Cinzel Decorative", "Cinzel", "Copperplate Gothic Light", Copperplate, "Old English Text MT", "Lucida Blackletter", "EB Garamond", Garamond, Georgia, serif; } * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; } body { color: var(--ink); background: #0b0e0d; font: 500 13px/1.35 var(--font-ui); } img { display: block; } a { color: inherit; text-decoration: none; } /* Seven-layer vocabulary. Schema is opt-in: add show-schema to . */ .layer-0 { z-index: 1; } .layer-1 { z-index: 10; } .layer-2 { z-index: 20; } .layer-5 { z-index: 50; } .layer-6 { z-index: 60; } .schema-frame { position: fixed; display: grid; min-width: 0; padding: 0; border: 0; background: transparent; } body.show-schema .schema-frame { padding: var(--schema-padding); outline: 1px dashed var(--schema); outline-offset: -1px; } .surface, .layer-3 { display: grid; min-width: 0; border: 1px solid rgb(217 189 88 / .62); border-radius: var(--radius-2); background: linear-gradient(135deg, rgb(217 189 88 / .07), transparent 42%), var(--black-soft); box-shadow: 0 .75rem 2rem rgb(0 0 0 / .2), inset 0 1px rgb(255 255 255 / .035); backdrop-filter: blur(12px) saturate(.85); -webkit-backdrop-filter: blur(12px) saturate(.85); } .layer-4 { position: relative; display: inline-grid; place-items: center; min-width: 2.1rem; min-height: 2.1rem; border: 1px solid rgb(217 189 88 / .66); border-radius: var(--radius-2); background: linear-gradient(90deg, rgb(217 189 88 / .08), transparent 58%), rgb(8 10 11 / .7); color: inherit; cursor: pointer; user-select: none; transition: border-color 130ms ease, background 130ms ease, transform 130ms ease, opacity 130ms ease; } .layer-4:hover, .layer-4:focus-visible, .layer-4[aria-pressed="true"], .layer-4.is-current { border-color: var(--yellow-bright); background: linear-gradient(90deg, rgb(94 207 211 / .12), transparent 60%), rgb(8 10 11 / .84); outline: none; } .infobit, .layer-6 { position: absolute; left: 50%; bottom: calc(100% + .5rem); display: grid; width: max-content; max-width: 17rem; gap: .12rem; padding: .45rem .6rem; border: 1px solid rgb(94 207 211 / .72); border-radius: var(--radius-1); background: rgb(5 7 8 / .96); box-shadow: 0 .7rem 1.8rem rgb(0 0 0 / .34); color: #fff; font-size: .7rem; font-style: normal; font-weight: 500; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, .25rem); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; } .layer-4:hover > .infobit, .layer-4:focus-visible > .infobit { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .village-panel { top: var(--edge); left: var(--edge); width: clamp(13rem, 18vw, 16rem); height: var(--top-height); align-content: center; gap: .05rem; padding: .55rem .9rem; border-radius: var(--radius-1); background: linear-gradient(90deg, rgb(8 10 11 / .32), transparent); } body.show-schema .village-panel { padding: .55rem .9rem; } .village-panel strong { overflow: hidden; color: #fffdf5; font-family: var(--font-village); font-size: clamp(1.42rem, 1.85vw, 1.9rem); font-weight: 650; letter-spacing: .012em; line-height: .98; text-overflow: ellipsis; text-shadow: 0 1px 0 rgb(0 0 0 / .9), 0 .18rem .75rem rgb(0 0 0 / .5); white-space: nowrap; } .rename-pencil { color: rgb(243 214 117 / .7); font-family: var(--font-ui); font-size: .43em; font-weight: 700; vertical-align: .24em; } .village-panel small { color: rgb(228 231 224 / .66); font-family: var(--font-display); font-size: .69rem; font-variant-numeric: tabular-nums; letter-spacing: .1em; line-height: 1; } .resource-panel { top: var(--edge); left: 50%; width: var(--resource-width); min-width: 26rem; height: var(--top-height); transform: translateX(-50%); } .resource-strip { height: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; overflow: hidden; background: linear-gradient(180deg, rgb(255 255 255 / .025), transparent 46%), rgb(8 10 11 / .78); } .resource { --resource-color: var(--yellow); display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "icon copy" "meter meter"; align-items: center; gap: .25rem .52rem; min-width: 0; padding: .46rem clamp(.48rem, .7vw, .72rem) .42rem; border-inline-start: 1px solid rgb(255 255 255 / .08); } .resource:first-child { border-inline-start: 0; } .resource-wood { --resource-color: var(--resource-wood); } .resource-clay { --resource-color: var(--resource-clay); } .resource-iron { --resource-color: var(--resource-iron); } .resource-crop { --resource-color: var(--resource-crop); } .resource-culture { --resource-color: var(--resource-culture); } .resource > img { grid-area: icon; width: 1.4rem; height: 1.4rem; object-fit: contain; } .resource-copy { grid-area: copy; display: grid; min-width: 0; align-content: center; } .resource strong { overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: clamp(.8rem, 1vw, .96rem); font-variant-numeric: tabular-nums; font-weight: 740; letter-spacing: .012em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; } .resource small { display: inline-flex; align-items: baseline; gap: .14rem; color: rgb(228 231 224 / .64); font-size: .6rem; font-variant-numeric: tabular-nums; line-height: 1.12; white-space: nowrap; } .resource small b { color: rgb(228 231 224 / .8); font-weight: 630; } .rate-divider { color: rgb(228 231 224 / .28); } .rate-period { color: rgb(228 231 224 / .38); font-size: .9em; } .storage-meter { grid-area: meter; display: block; width: 100%; height: .22rem; overflow: hidden; border-radius: var(--radius-round); background: rgb(205 210 207 / .2); } .storage-meter > i { display: block; width: var(--storage-fill, 0%); height: 100%; border-radius: inherit; background: var(--resource-color); box-shadow: 0 0 .4rem color-mix(in srgb, var(--resource-color) 54%, transparent); transition: width 500ms linear; } .resource.is-full strong { color: var(--danger); } .resource.is-full .storage-meter > i { background: var(--danger); } .resource-metric { grid-template-rows: 1fr; } .resource-metric .resource-copy { align-self: center; } .status-panel { top: var(--edge); right: var(--edge); width: max-content; height: var(--status-height); } .status-strip { height: 100%; grid-template-columns: auto 2rem 2rem; align-items: stretch; gap: 0; padding: .16rem .22rem; background: rgb(8 10 11 / .78); } .utc-clock { display: inline-grid; grid-template-columns: .9rem auto auto; align-items: center; gap: .26rem; padding: 0 .5rem 0 .25rem; border-inline-end: 1px solid rgb(217 189 88 / .22); } .utc-clock img { width: .85rem; height: .85rem; object-fit: contain; } .utc-clock time { font-family: var(--font-display); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .utc-clock small { color: rgb(228 231 224 / .44); font-size: .5rem; font-weight: 700; letter-spacing: .1em; } .status-action { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-1); background: transparent; } .status-action:hover, .status-action:focus-visible { background: rgb(255 255 255 / .05); } .status-action > img { width: 1.02rem; height: 1.02rem; object-fit: contain; } .sound-toggle[aria-pressed="true"] > img { filter: brightness(0) invert(1) drop-shadow(0 0 .3rem rgb(255 255 255 / .55)); } .sound-toggle[aria-pressed="false"] > img { filter: grayscale(1) brightness(.58); opacity: .5; } .sound-toggle[aria-pressed="false"]::after { content: ""; position: absolute; width: 1.08rem; height: 2px; border-radius: var(--radius-round); background: #8c342d; transform: rotate(-43deg); } .activity-stack { top: 50%; left: var(--edge); width: var(--activity-size); align-content: center; gap: .64rem; transform: translateY(-50%); } .activity-item { width: var(--activity-size); height: var(--activity-size); min-width: 0; min-height: 0; padding: .58rem; border-radius: var(--radius-round); background: rgb(8 10 11 / .7); } .activity-item > img { width: 1.38rem; height: 1.38rem; object-fit: contain; } .activity-yellow { border-color: var(--yellow); } .activity-coral { border-color: var(--coral); } .activity-cyan { border-color: var(--cyan); } .activity-violet { border-color: var(--violet); } .activity-teal { border-color: var(--teal); } .activity-tooltip { left: calc(100% + .55rem); bottom: 50%; width: clamp(13rem, 19vw, 19rem); transform: translate(-.35rem, 50%); text-align: left; } .activity-tooltip strong { font-family: var(--font-display); font-size: .76rem; } .activity-tooltip span { color: var(--muted); font-size: .66rem; } .activity-item:hover > .activity-tooltip, .activity-item:focus-visible > .activity-tooltip { transform: translate(0, 50%); } .utility-stack { top: 50%; right: var(--edge); width: calc(var(--nav-size) + .7rem); transform: translateY(-50%); } .utility-nav, .primary-nav { place-items: center; gap: .2rem; padding: .34rem; background: rgb(8 10 11 / .78); } .utility-nav { grid-template-columns: 1fr; } .primary-nav { grid-template-columns: repeat(5, var(--nav-size)); } .nav-action { grid-template-rows: 1fr auto; gap: .1rem; width: var(--nav-size); height: var(--nav-size); min-width: 0; min-height: 0; padding: .28rem .22rem .25rem; border: 0; border-radius: var(--radius-1); background: transparent; text-align: center; } .nav-action:hover, .nav-action:focus-visible, .nav-action.is-current { background: rgb(217 189 88 / .08); transform: translateY(-1px); } .nav-action > img { width: 2.1rem; height: 2.1rem; object-fit: contain; } .nav-label { overflow: hidden; max-width: 100%; color: rgb(228 231 224 / .48); font-size: .52rem; font-weight: 440; letter-spacing: .07em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .nav-action:hover .nav-label, .nav-action:focus-visible .nav-label, .nav-action.is-current .nav-label { color: rgb(244 241 232 / .88); } .utility-nav .infobit { right: calc(100% + .55rem); bottom: 50%; left: auto; transform: translate(.3rem, 50%); } .utility-nav .layer-4:hover > .infobit, .utility-nav .layer-4:focus-visible > .infobit { transform: translate(0, 50%); } .main-navigation { bottom: var(--edge); left: 50%; width: max-content; transform: translateX(-50%); } .settings-panel { position: fixed; top: 0; right: 0; display: grid; grid-template-rows: auto auto 1fr auto; width: min(22rem, 88vw); height: 100dvh; padding: 1rem; border-inline-start: 1px solid rgb(217 189 88 / .72); background: linear-gradient(150deg, rgb(217 189 88 / .08), transparent 32%), rgb(8 10 11 / .9); box-shadow: -1.3rem 0 3.5rem rgb(0 0 0 / .46); backdrop-filter: blur(16px) saturate(.82); -webkit-backdrop-filter: blur(16px) saturate(.82); opacity: 0; visibility: hidden; transform: translateX(calc(100% + 1.5rem)); transition: opacity 180ms ease, transform 220ms ease, visibility 220ms; } .settings-panel.is-open { opacity: 1; visibility: visible; transform: translateX(0); } .settings-panel > header, .advisor-panel > header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; min-height: 3rem; } .settings-panel > header strong, .advisor-panel > header strong { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .055em; text-transform: uppercase; } .panel-close { width: 2.2rem; height: 2.2rem; min-width: 0; min-height: 0; padding: .45rem; border-radius: var(--radius-round); } .panel-close img { width: 100%; height: 100%; object-fit: contain; } .settings-panel hr { width: 100%; height: 1px; margin: .65rem 0 .9rem; border: 0; background: linear-gradient(90deg, rgb(217 189 88 / .55), transparent); } .settings-menu { display: grid; align-content: start; gap: .18rem; } .panel-action { display: grid; grid-template-columns: 1.35rem 1fr; align-items: center; gap: .75rem; min-height: 2.8rem; padding: .55rem .7rem; border-radius: var(--radius-1); color: rgb(244 241 232 / .78); cursor: pointer; } .panel-action:hover, .panel-action:focus-visible { background: rgb(217 189 88 / .08); color: #fff; outline: 1px solid rgb(217 189 88 / .28); } .panel-action img { width: 1.25rem; height: 1.25rem; object-fit: contain; } .settings-panel footer { align-self: end; } .logout-action { color: rgb(226 107 95 / .9); } .pop-dialog { position: fixed; top: 50%; left: 50%; display: grid; width: min(34rem, calc(100vw - 2rem)); gap: 1rem; padding: 1.25rem; border: 1px solid var(--yellow-bright); border-radius: var(--radius-2); background: linear-gradient(145deg, rgb(94 207 211 / .08), transparent 38%), rgb(11 13 15 / .92); box-shadow: 0 0 0 100vmax rgb(0 0 0 / .52), 0 1.5rem 5rem rgb(0 0 0 / .55); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translate(-50%, -46%) scale(.97); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; } .pop-dialog.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .pop-dialog h2, .pop-dialog p { margin: 0; } .pop-dialog h2 { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; } .pop-dialog p { color: var(--muted); } .pop-dialog footer { display: flex; justify-content: flex-end; } .pop-dialog footer .layer-4 { grid-template-columns: 1.2rem auto; gap: .45rem; padding: .48rem .65rem; } .pop-dialog footer img { width: 1rem; height: 1rem; } .advisor-toggle, .advisor-panel { display: none; } .screen-placeholder { position: fixed; top: 50%; left: 50%; display: grid; width: min(34rem, calc(100vw - 2rem)); justify-items: center; gap: .65rem; padding: 2rem; border: 1px solid rgb(217 189 88 / .55); border-radius: var(--radius-2); background: rgb(8 10 11 / .68); box-shadow: 0 1rem 3rem rgb(0 0 0 / .28); backdrop-filter: blur(12px); text-align: center; transform: translate(-50%, -50%); } .screen-placeholder img { width: 4.5rem; height: 4.5rem; object-fit: contain; } .screen-placeholder h1, .screen-placeholder p { margin: 0; } .screen-placeholder h1 { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; } .screen-placeholder p { max-width: 28rem; color: var(--muted); } @media (max-width: 1180px) { :root { --resource-width: calc(100vw - (var(--edge) * 2)); } .resource-panel { top: calc(var(--edge) + var(--top-height) + var(--gap)); min-width: 0; } } @media (max-width: 760px) { :root { --edge: max(.45rem, env(safe-area-inset-left), env(safe-area-inset-right), env(safe-area-inset-top), env(safe-area-inset-bottom)); --gap: .42rem; --top-height: 4.2rem; --status-height: 2.35rem; --nav-size: clamp(3.25rem, 17vw, 4.2rem); } .desktop-only { display: none; } .village-panel { width: calc(58vw - var(--edge)); padding: .5rem .55rem; } .village-panel strong { font-size: clamp(1.08rem, 5.1vw, 1.45rem); } .village-panel small { font-size: .62rem; } .status-panel { max-width: calc(42vw - var(--edge)); } .status-strip { grid-template-columns: auto 1.8rem 1.8rem; } .utc-clock { grid-template-columns: .75rem auto; gap: .18rem; padding-inline: .2rem .35rem; } .utc-clock img { width: .72rem; height: .72rem; } .utc-clock time { font-size: .65rem; } .utc-clock small { display: none; } .resource-panel { top: calc(var(--edge) + var(--top-height) + var(--gap)); width: calc(100vw - (var(--edge) * 2)); height: 4.05rem; } .resource-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .resource-culture { display: none; } .resource { grid-template-columns: 1rem minmax(0, 1fr); gap: .18rem .25rem; padding: .35rem .28rem .3rem; } .resource > img { width: 1rem; height: 1rem; } .resource strong { font-size: clamp(.61rem, 2.8vw, .75rem); } .resource small { font-size: .46rem; gap: .08rem; } .storage-meter { height: .18rem; } .main-navigation { right: var(--edge); left: var(--edge); width: auto; transform: none; } .primary-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .08rem; padding: .24rem; } .nav-action { width: 100%; height: min(16vw, 4.2rem); padding: .22rem .12rem; } .nav-action > img { width: 1.65rem; height: 1.65rem; } .nav-label { font-size: .48rem; letter-spacing: .04em; } .advisor-toggle { position: fixed; display: inline-grid; z-index: 24; top: 56%; right: var(--edge); grid-template-rows: 1fr auto; width: 4.35rem; height: 4.35rem; gap: .04rem; padding: .42rem .35rem .32rem; border-color: #ff8428; background: rgb(8 10 11 / .78); transform: translateY(-50%); } .advisor-toggle img { width: 2.15rem; height: 2.15rem; object-fit: contain; } .advisor-toggle small { color: #ff9b4d; font-size: .62rem; font-weight: 750; } .advisor-panel { position: fixed; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .8rem; padding: max(var(--edge), env(safe-area-inset-top)) var(--edge) max(var(--edge), env(safe-area-inset-bottom)); overflow: auto; border: 0; background: linear-gradient(160deg, rgb(217 189 88 / .08), transparent 35%), rgb(7 9 10 / .94); box-shadow: 0 0 0 100vmax rgb(0 0 0 / .55); backdrop-filter: blur(18px) saturate(.82); -webkit-backdrop-filter: blur(18px) saturate(.82); opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; } .advisor-panel.is-open { opacity: 1; visibility: visible; transform: scale(1); } .advisor-panel > header > span:first-child { display: inline-grid; grid-template-columns: 2.2rem auto; align-items: center; gap: .55rem; } .advisor-panel > header > span:first-child img { width: 2.2rem; height: 2.2rem; } .advisor-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .advisor-stats > span { display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; gap: .03rem .55rem; align-items: center; padding: .65rem; border: 1px solid rgb(217 189 88 / .36); border-radius: var(--radius-2); background: rgb(255 255 255 / .035); } .advisor-stats img { grid-row: 1 / 3; width: 2rem; height: 2rem; object-fit: contain; } .advisor-stats small { color: var(--muted); font-size: .62rem; } .advisor-stats strong { font-family: var(--font-display); font-size: 1rem; } .advisor-feed { display: grid; align-content: start; gap: .45rem; } .advisor-feed article { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); align-items: center; gap: .65rem; padding: .65rem .72rem; border: 1px solid rgb(255 255 255 / .09); border-radius: var(--radius-1); background: rgb(255 255 255 / .025); } .advisor-feed article > img { width: 2rem; height: 2rem; object-fit: contain; } .advisor-feed article > span { display: grid; gap: .08rem; } .advisor-feed strong { font-family: var(--font-display); font-size: .78rem; } .advisor-feed small { color: var(--muted); font-size: .66rem; } .advisor-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding-top: .5rem; border-top: 1px solid rgb(217 189 88 / .35); } .advisor-actions .layer-4 { grid-template-rows: 2rem auto; min-height: 3.5rem; gap: .1rem; padding: .35rem; } .advisor-actions img { width: 1.8rem; height: 1.8rem; object-fit: contain; } .advisor-actions small { color: var(--muted); font-size: .56rem; text-transform: uppercase; } .settings-panel { width: 100vw; border-radius: 0; } .pop-dialog { width: calc(100vw - (var(--edge) * 2)); } .infobit { display: none; } body.advisor-open { overflow: hidden; } } @media (hover: none) and (pointer: coarse) { .layer-4:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }