:root {
  --ink: #123f3b; --muted: #65827f; --green: #075b53; --mint: #34c98b;
  --lime: #b9e85b; --sun: #f6c64e; --line: #d8e7df;
  --shadow: 0 18px 45px rgba(13, 63, 57, .13);
  font-family: Inter, ui-rounded, "Segoe UI", sans-serif; color: var(--ink); background: #e7f3ec;
}
html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 8% 8%, #f7e6a9 0 5%, transparent 18%), linear-gradient(145deg, #e9f4e8, #d3ecdd); font-size: 15px; }
button, input { touch-action: manipulation; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; }
.topbar { height: 74px; padding: 0 clamp(16px, 4vw, 52px); display: flex; align-items: center; justify-content: space-between; color: #fff; background: linear-gradient(95deg, #06443f, #087268); box-shadow: 0 5px 24px #073e3933; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--sun); color: #164b43; font-weight: 900; box-shadow: inset 0 -3px 0 #d99e26; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; } .brand small { font-size: 9px; letter-spacing: 1.8px; opacity: .75; margin-top: 2px; }
.top-actions { display: flex; gap: 8px; align-items: center; } .save-status { font-size: 12px; opacity: .8; }
.button, .mini-button, .icon-button { border: 0; font: inherit; font-weight: 800; cursor: pointer; transition: .18s transform, .18s box-shadow, .18s background; }
.button:hover, .mini-button:hover, .icon-button:hover { transform: translateY(-1px); }
.button { border-radius: 12px; padding: 11px 17px; } .button-light { background: #fff; color: var(--green); }
.button-primary { background: linear-gradient(110deg, #087267, #25ad78); color: #fff; box-shadow: 0 10px 22px #08726744; }
.button-outline { background: #fff; color: var(--green); border: 1px solid var(--line); }
.top-button { padding: 9px 12px; background: #ffffff16; color: #fff; border: 1px solid #ffffff35; }
main { padding: 24px clamp(12px, 3vw, 44px) 34px; }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); max-width: 940px; margin: 0 auto 8px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 9px 30px #205f5020; overflow: hidden; }
.stats div { padding: 12px 14px; border-right: 1px solid var(--line); } .stats div:last-child { border: 0; }
.stats small, .stats strong { display: block; } .stats small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
.stats strong { font-size: 18px; margin-top: 4px; }
.resources { max-width: 940px; margin: 0 auto 18px; display: flex; gap: 16px; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); font-weight: 800; }
.resources strong { color: var(--ink); margin-left: 3px; } .event-status { margin-left: auto; padding: 5px 10px; border-radius: 20px; background: #ffffff99; color: #25806d; }
.game-layout { display: grid; grid-template-columns: minmax(205px, 255px) minmax(420px, 720px) minmax(190px, 235px); gap: 18px; max-width: 1260px; margin: auto; align-items: start; }
.panel, .world-wrap { background: #fffffff0; border: 1px solid #fff; border-radius: 20px; box-shadow: var(--shadow); }
.panel { padding: 19px; } .panel-heading, .balance-title { display: flex; justify-content: space-between; align-items: start; }
.eyebrow { font-size: 9px; letter-spacing: 1.4px; font-weight: 900; color: #139277; } .panel h2 { font-size: 18px; margin: 4px 0 16px; }
.icon-button { width: 30px; height: 30px; border-radius: 50%; background: #e8f5ee; color: var(--green); }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tools-strip { min-width: 0; } .tools-nav { display: none; }
.tool { min-height: 58px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: #f8fcf9; text-align: left; color: var(--ink); cursor: pointer; }
.tool:hover { border-color: #78caae; } .tool.active { color: #fff; border-color: var(--green); background: linear-gradient(135deg, #087267, #105a53); box-shadow: 0 8px 16px #075b5333; }
.tool .symbol { font-size: 18px; display: block; } .tool strong { font-size: 10px; } .tool small { display: block; font-size: 8px; opacity: .7; margin-top: 2px; }
.city-card { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 13px; } .city-card label { font-size: 10px; font-weight: 800; color: var(--muted); }
.name-row { display: flex; gap: 6px; margin-top: 5px; } .name-row input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px; color: var(--ink); font: inherit; font-weight: 700; } .name-row .button { padding: 8px 10px; }
.selection-card { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 11px; background: #fff7d9; border: 1px solid #f4d977; border-radius: 12px; }
.selection-icon { font-size: 22px; } .selection-card small, .selection-card strong { display: block; } .selection-card small { font-size: 8px; text-transform: uppercase; color: #8a6b1c; } .selection-card strong { font-size: 10px; margin-top: 2px; }
.world-wrap { padding: 13px; } .world-header { display: flex; justify-content: space-between; align-items: center; padding: 1px 3px 11px; font-size: 11px; font-weight: 800; }
.live-dot { display: inline-block; width: 8px; height: 8px; background: var(--mint); border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 4px #34c98b22; }
.mini-button { padding: 7px 10px; border-radius: 8px; margin-left: 5px; background: #eef6f1; color: var(--green); font-size: 10px; } .mini-button.accent { background: var(--green); color: #fff; }
.zoom-button { display: none; }
.island-frame { padding: 5.5%; background: linear-gradient(150deg, #5fd5d0, #2daeba); border-radius: 18px; box-shadow: inset 0 0 35px #03728755; overflow: hidden; }
.city-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; aspect-ratio: 1; background: #89c869; border: 7px solid #f0d57e; border-radius: 13%; padding: 4%; box-shadow: 0 11px 20px #075b5355; }
.tile { position: relative; aspect-ratio: 1; border: 0; border-radius: 18%; background: linear-gradient(145deg, #8ed66b, #6eba5f); cursor: pointer; padding: 0; color: #fff; display: grid; place-items: center; box-shadow: inset 0 -2px 0 #4e9e4d66; }
.tile:nth-child(4n+1) { background: linear-gradient(145deg, #99db72, #70bf60); } .tile:hover, .tile:focus-visible { outline: 2px solid #fff; z-index: 2; filter: brightness(1.1); }
.tile span { font-size: clamp(10px, 1.65vw, 21px); line-height: 1; filter: drop-shadow(0 1px 1px #0004); }
.tile.road { background: #849196; border-radius: 5%; } .tile.home { background: #4cb8cb; } .tile.shop { background: #f3b83f; } .tile.factory { background: #9e87bc; } .tile.park { background: #3baa72; } .tile.solar { background: #386daf; } .tile.water { background: #2b9ac4; } .tile.farm { background: #d29c36; } .tile.fire { background: #df6d45; } .tile.police { background: #3f68a7; }
.tile[data-level="2"]::after, .tile[data-level="3"]::after { position: absolute; right: -2px; top: -3px; padding: 1px 3px; border-radius: 5px; background: #fff; color: var(--green); font-size: 7px; font-weight: 900; content: "II"; } .tile[data-level="3"]::after { content: "III"; }
.message { text-align: center; min-height: 18px; margin: 9px 0 0; font-size: 11px; font-weight: 700; color: var(--muted); }
.goals { display: grid; gap: 8px; } .goal { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f9fcfa; } .goal-top { display: flex; justify-content: space-between; gap: 6px; font-size: 9px; font-weight: 800; }
.goal-top span:last-child { color: #159274; } .goal i, .project-meter { display: block; height: 6px; border-radius: 5px; background: #e1ece5; margin-top: 8px; overflow: hidden; } .goal b, .project-meter b { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--lime)); border-radius: 5px; } .goal.done { border-color: #90d8ad; background: #ecfaef; }
.daily-card { margin-top: 12px; padding: 12px; border-radius: 13px; background: #fff7d9; border: 1px solid #f2da81; } .daily-card small, .daily-card strong { display: block; } .daily-card small { font-size: 8px; color: #8a6b1c; font-weight: 900; letter-spacing: 1px; } .daily-card strong { font-size: 11px; margin: 4px 0 8px; }
.daily-card div { display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 800; }
.daily-card button, .market-actions button, .vote-actions button, .friend-row button, .project-row button { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; background: #fff; color: var(--green); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; } .daily-card button:disabled { opacity: .45; cursor: not-allowed; }
.balance-card { margin-top: 13px; padding: 12px; border-radius: 14px; background: #eef8f2; } .balance-title { font-size: 10px; } .balance-title span { color: var(--muted); }
.meter-row { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; margin-top: 10px; font-size: 9px; font-weight: 800; } .meter-row i { height: 6px; background: #d7e7dc; border-radius: 4px; overflow: hidden; } .meter-row b { display: block; height: 100%; width: 0; background: #20b47c; transition: width .3s; }
.modal-backdrop { position: fixed; inset: 0; display: none; place-items: center; padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); background: #052f2cc7; backdrop-filter: blur(8px); z-index: 50; } .modal-backdrop.active { display: grid; }
.start-card { display: grid; grid-template-columns: minmax(250px, 430px) minmax(280px, 420px); max-width: 850px; background: #fff; border-radius: 27px; overflow: hidden; box-shadow: 0 30px 80px #012b2888; } .start-card img { width: 100%; height: 100%; object-fit: cover; }
.start-copy { padding: clamp(26px, 5vw, 56px); display: flex; flex-direction: column; align-items: start; justify-content: center; } .start-copy h1 { font-size: clamp(30px, 4vw, 50px); line-height: 1.02; margin: 10px 0 15px; letter-spacing: -1.8px; } .start-copy p { color: var(--muted); line-height: 1.65; margin: 0 0 20px; } .start-copy .button { width: 100%; margin-top: 8px; } .start-copy > small { color: var(--muted); font-size: 10px; line-height: 1.5; margin-top: 14px; text-align: center; width: 100%; }
.help-card, .civic-card { position: relative; padding: 30px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); } .help-card { max-width: 480px; } .help-card h2, .civic-card h2 { margin: 7px 0 16px; } .help-card ol { padding-left: 22px; color: var(--muted); line-height: 1.7; }
.modal-close { position: absolute; right: 15px; top: 13px; border: 0; background: none; font-size: 27px; color: var(--muted); cursor: pointer; }
.civic-card { width: min(920px, 95vw); max-height: 92vh; overflow: auto; } .civic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .civic-grid section { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #f9fcfa; } .civic-grid h3 { margin: 0 0 5px; font-size: 14px; } .civic-grid p { margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.market-actions, .vote-actions { display: flex; flex-wrap: wrap; gap: 6px; } .friend-row, .project-row { display: flex; gap: 6px; align-items: center; } .friend-row input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; font-size: 11px; }
.leaderboard { margin: 10px 0 0; padding-left: 22px; font-size: 10px; line-height: 1.7; } .project-meter { height: 8px; margin: 0 0 8px; } .project-meter b { width: 0; } .project-row { justify-content: space-between; font-size: 10px; }
.friend-preview { margin-top: 12px; padding: 13px; border-radius: 12px; background: #eaf7f1; font-size: 11px; } .ownership-note { display: block; margin-top: 16px; color: var(--muted); font-size: 9px; text-align: center; }
@media (max-width: 980px) { .game-layout { grid-template-columns: 220px 1fr; } .goals-panel { grid-column: 1 / -1; } .goals { grid-template-columns: repeat(3, 1fr); } .balance-card { display: none; } }
@media (max-width: 720px) {
  .topbar { position: sticky; top: 0; z-index: 20; height: 64px; padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); } .save-status { display: none; } .top-button { min-height: 42px; padding: 7px 9px; font-size: 10px; } .brand small { display: none; }
  main { padding: 12px 8px calc(30px + env(safe-area-inset-bottom)); } .stats { grid-template-columns: repeat(3, 1fr); border-radius: 13px; } .stats div { padding: 9px 5px; text-align: center; } .stats div:nth-child(3) { border-right: 0; } .stats div:nth-child(-n+3) { border-bottom: 1px solid var(--line); } .stats small { font-size: 7px; } .stats strong { font-size: 14px; }
  .resources { flex-wrap: wrap; gap: 7px 12px; margin-bottom: 10px; } .event-status { width: 100%; margin: 0; text-align: center; }
  .game-layout { display: flex; flex-direction: column; gap: 10px; } .world-wrap { order: 2; width: 100%; padding: 8px; } .build-panel { position: sticky; top: 64px; z-index: 15; order: 1; width: 100%; padding: 8px; border-radius: 14px; } .goals-panel { order: 3; width: 100%; }
  .build-panel .panel-heading { align-items: center; padding: 0 2px 6px; } .build-panel .panel-heading .eyebrow { display: none; } .build-panel .panel-heading h2 { margin: 0; font-size: 13px; } .icon-button { min-width: 40px; min-height: 40px; }
  .tools-strip { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 5px; align-items: stretch; } .tools-nav { display: grid; place-items: center; min-width: 38px; min-height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: #eaf7f1; color: var(--green); font-family: inherit; font-size: 25px; font-weight: 900; line-height: 1; cursor: pointer; touch-action: manipulation; } .tools-nav:disabled { opacity: .3; cursor: default; }
  .tools { display: flex; min-width: 0; max-width: 100%; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 0 1px 5px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; } .tools::-webkit-scrollbar { display: none; } .tool { flex: 0 0 72px; min-height: 56px; text-align: center; padding: 6px 4px; scroll-snap-align: start; } .tool .symbol { font-size: 20px; } .tool strong { font-size: 10px; } .tool small { display: none; } .city-card, .selection-card { display: none; } .goals { grid-template-columns: 1fr; }
  .world-header { min-height: 44px; } .mini-button { min-height: 40px; padding: 8px 12px; } .island-frame { overflow: auto; padding: 10px; border-radius: 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .message { margin: 8px 6px 2px; line-height: 1.4; }
  .start-card { grid-template-columns: 1fr; width: min(430px, 100%); max-height: 100%; overflow: auto; border-radius: 20px; } .start-card img { height: 210px; } .start-copy { padding: 22px; } .start-copy h1 { font-size: 32px; }
  .civic-grid { grid-template-columns: 1fr; } .civic-card { width: 100%; max-height: 100%; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); } .market-actions button, .vote-actions button, .friend-row button, .project-row button { min-height: 44px; }
}
@media (max-width: 520px) {
  .topbar { height: 60px; } .brand-mark { width: 38px; height: 38px; border-radius: 11px; } .brand strong { font-size: 16px; }
  .top-actions { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 7px; padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: linear-gradient(95deg, #06443f, #087268); box-shadow: 0 -5px 24px #073e3940; }
  .top-actions .button { width: 100%; min-height: 44px; padding: 8px 5px; font-size: 10px; white-space: nowrap; } .top-button { display: block; }
  main { padding-bottom: calc(82px + env(safe-area-inset-bottom)); } .build-panel { top: 60px; }
  .zoom-button { display: inline-block; } .city-grid { width: 100%; max-width: none; min-width: 0; gap: 2px; border-width: 5px; padding: 4%; border-radius: 11%; } .island-frame.zoomed .city-grid { width: 552px; min-width: 552px; gap: 3px; padding: 18px; } .tile span { font-size: clamp(10px, 4.2vw, 19px); } .island-frame.zoomed .tile span { font-size: 19px; }
  .start-card img { height: 170px; } .start-copy { padding: 18px; } .start-copy h1 { font-size: 28px; margin: 8px 0 12px; } .start-copy p { line-height: 1.5; margin-bottom: 12px; }
}
@media (max-width: 360px) { .brand-mark { width: 36px; height: 36px; } .brand strong { font-size: 15px; } .top-actions { gap: 5px; padding-left: 7px; padding-right: 7px; } }
@media (hover: none) and (pointer: coarse) { .button:hover, .mini-button:hover, .icon-button:hover { transform: none; } .tool, .tile, .button, .mini-button, .icon-button { min-height: 44px; } }