/* Civic Atlas: softly carved surfaces, circular emblems and a generous card table.
   Shared geometry lives here so every game menu uses the same visual language. */
:root {
  --paper:#f6f3ec;
  --ink:#303334;
  --muted:#6c706c;
  --line:#d9d5cb;
  --radius-control:12px;
  --radius-card:20px;
  --radius-panel:26px;
  --surface:linear-gradient(150deg,#fffdf8f7,#f3efe6f5);
  --shadow:0 8px 28px #333c4019,0 2px 5px #3c362c0a,inset 0 1px 0 #fff;
}
button { -webkit-tap-highlight-color:transparent; }
.btn,.icon-btn,select,input:not([type=range]):not([type=checkbox]),.move-grid button { border-radius:var(--radius-control); }
.btn { min-height:40px; padding:12px 20px; font-size:12px; letter-spacing:.1px; box-shadow:inset 0 1px 0 #fff8; }
.btn.primary,.menu-choice.continue-choice { background:linear-gradient(145deg,#c65843,#ad3d31); border-color:#ac4033; box-shadow:inset 0 1px 0 #f6b0a15c,0 5px 14px #a43c2920; }
.btn.primary:hover:not(:disabled),.menu-choice.continue-choice:hover { background:linear-gradient(145deg,#ca604a,#a2362a); box-shadow:0 7px 20px #a43c2930; }
.btn.ghost { box-shadow:none; }
.btn.ghost:hover:not(:disabled) { background:#e8e2d75e; border-color:transparent; }
.icon-btn { width:36px; height:36px; border-radius:50%; background:#fffdf8e6; border-color:#d8d2c58f; box-shadow:0 2px 6px #38352f0a; }
.icon-btn:hover:not(:disabled) { background:#fff; box-shadow:0 4px 12px #38352f12; }
.eyebrow { letter-spacing:1.5px; }
.meter,.meter>div { border-radius:99px; }
.meter { height:5px; overflow:hidden; }
/* A welcoming, open start screen. */
.start-screen,.draft-screen { background:radial-gradient(ellipse at 80% 25%,#dce7e45c,transparent 48%),radial-gradient(ellipse at 15% 90%,#eed7c348,transparent 50%),#f6f3ec; }
.site-header { border:0; height:92px; }
.site-header .brand-mark { border:1px solid #cbbb9f5c; border-radius:50%; width:44px; height:44px; padding:9px; background:#fffaf18c; }
.site-header .brand-mark svg { width:26px; height:26px; }
.start-main { padding-top:20px; padding-bottom:32px; min-height:calc(100dvh - 155px); }
.start-copy h1 { font-size:clamp(58px,6.6vw,96px); line-height:1.05; letter-spacing:-3.5px; }
.start-copy>p { color:#666f6b; font-size:14px; max-width:365px; line-height:1.85; }
.start-actions { gap:12px; padding:10px; margin-left:-10px; max-width:410px; background:#fffdf852; border:1px solid #fffc; border-radius:26px; box-shadow:0 12px 38px #3f433807; }
.menu-choice { border-radius:18px; padding:18px 20px; gap:16px; background:#fffdf8c7; border-color:#d8d2c5a1; }
.menu-choice>svg { box-sizing:content-box; padding:12px; background:#e8e1d45c; border:1px solid #c4b8a733; border-radius:50%; }
.menu-choice.continue-choice>svg { background:#ffffff13; border-color:#ffffff24; }
.menu-choice strong { font-size:25px; }
.menu-choice small { font-size:11px; }
.menu-secondary { padding:0 4px; }
.menu-secondary .btn { padding:10px; font-size:11px; }
.atlas-ring { border-color:#b6c5bd65; background:radial-gradient(circle,#e0e7de00 55%,#c9d8ce1c); }
.atlas-ring:before { inset:24px; border-color:#b6c5bd45; }
.start-art-caption { padding:14px 24px; border-radius:60px; background:#faf8f280; align-self:center; backdrop-filter:blur(8px); }
.start-art-caption p { font-size:15px; }
.start-footer { border-color:#d4d2c253; letter-spacing:1.2px; }
/* Founding choices feel like collectibles, each with its own softly lit plinth. */
.draft-screen:before { display:none; }
.draft-main { padding-top:20px; }
.gallery-intro h1 { text-transform:none; font-size:clamp(36px,3.7vw,54px); line-height:1.08; letter-spacing:-1.7px; }
.gallery-intro p { font-size:13px; }
.specimen-collection { gap:20px; align-items:stretch; }
.origin-card { padding:10px; border:1px solid #d5cdbd70; border-radius:26px; background:linear-gradient(155deg,#fffefaab,#e9e6db70); box-shadow:0 8px 26px #4b49340a,inset 0 1px #fff; }
.origin-card:hover { border-color:#b7ada0; box-shadow:0 13px 28px #4b493416; background:#fdfbf5df; }
.origin-card.selected { border-color:#b54d3d; box-shadow:0 0 0 2px #b54d3d18,0 14px 30px #74472b15; background:linear-gradient(155deg,#fffaf2,#f4e8d9); }
.origin-art { height:210px; border-radius:20px; background:radial-gradient(ellipse at 50% 75%,#d7dbcd70,transparent 65%); }
.origin-art img { width:108%; }
.origin-body { flex:1; min-height:146px; border-radius:17px; padding:18px 16px; border:1px solid #fff9; background:linear-gradient(145deg,#fffdf5e6,#f5f0e6c9); box-shadow:0 3px 12px #645e4109; }
.origin-body:after { display:none; }
.origin-body h2 { text-transform:none; letter-spacing:-.3px; font-size:25px; padding-bottom:10px; border-color:#d7d0c361; }
.origin-kind { font-size:8px; letter-spacing:1px; color:#77796e; }
.origin-effects span { font-size:11px; line-height:1.5; }
.origin-effects svg { width:14px; height:14px; }
.origin-card.selected .origin-body { border-color:#c78a6f40; box-shadow:inset 0 1px #fff; }
.origin-seal { right:12px; top:-30px; }
.specimen-number { left:15px; bottom:12px; }
.specimen-description { font-size:11px; padding:15px 10px 8px; line-height:1.7; }
.charter-strip { border:1px solid #ffffffb3; border-radius:22px; padding:7px; gap:7px; background:#fffcf29c; box-shadow:0 4px 20px #383b2a06; margin-top:24px; }
.charter-caption { min-width:145px; padding:15px 18px; }
.charter-slot { border:0; border-radius:16px; padding:15px 18px; }
.charter-slot.current { background:#eee1d469; box-shadow:inset 0 0 0 1px #bd715431; }
.charter-slot.filled:not(.current) { background:#e5e9df57; }
.slot-text small { font-size:8px; }
.slot-text strong { font-size:12px; }
.slot-number { width:32px; height:32px; border-radius:50%; background:#f8f4eb; display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.seed-wrap { font-size:8px; }
.seed-wrap input { border:1px solid #d7d1c3; padding:10px 12px; width:148px; font-size:10px; background:#fffaf08f; }
.seed-note { font-size:10px; }
.review-box { border-radius:28px; padding:20px; background:#fffaf07a; border:1px solid #fff9; gap:20px; }
.review-copy h2 { font-size:34px; }
/* Floating HUD: fewer boxes, softly separated resources and pill navigation. */
.game-header { top:16px; left:18px; right:18px; gap:14px; align-items:center; }
.game-header .brand,.resource-bar,.turn-display,.game-nav,.inspector,.deck-block,.end-turn-block { background:var(--surface); border:1px solid #fff9; box-shadow:var(--shadow); backdrop-filter:blur(16px); border-radius:var(--radius-card); }
.game-header .brand { padding:12px 15px; min-height:66px; }
.game-header .brand-mark { border:0; border-radius:50%; padding:0; width:30px; }
.resource-bar { gap:0; padding:5px 4px; flex:1; }
.resource { height:54px; flex:1; min-width:0; justify-content:center; background:none; box-shadow:none; border:0; border-radius:0; padding:7px 12px; gap:10px; }
.resource+.resource { border-left:1px solid #d8d4c45c; }
.resource svg { color:var(--blue); width:19px; height:19px; }
.resource-label { font-size:7px; letter-spacing:.8px; color:#666f68; }
.resource strong { font-size:22px; }
.resource small { font-size:8px; color:#69766c; }
.turn-display { min-height:66px; padding:10px 14px; gap:9px; }
.turn-display .icon-btn { width:30px; height:30px; }
.game-nav { top:96px; left:18px; padding:5px; gap:3px; border-radius:50px; }
.nav-item { padding:10px 14px; border:0; border-radius:30px; font-size:11px; gap:7px; }
.nav-item.active { color:#9e3e2e; background:#ecd9ca8c; box-shadow:inset 0 0 0 1px #bd715421; }
.nav-item:hover { background:#e2dfd480; }
.nav-item svg { width:15px; height:15px; }
.map-topline { right:18px; top:108px; gap:7px; }
.map-chip { border-radius:30px; padding:9px 12px; background:#f8f7eed4; }
.recent-event { left:20px; top:157px; border:0; border-radius:14px; padding:10px 14px; background:#faf7edc9; max-width:430px; }
.map-controls { right:20px; bottom:228px; padding:5px; border-radius:40px; background:#faf7ecd9; box-shadow:var(--shadow); gap:5px; }
.map-controls .icon-btn { width:32px; height:32px; background:#fffdf7a1; }
.map-help { bottom:280px; border-radius:20px; padding:7px 12px; }
.inspector { left:18px; bottom:20px; width:300px; max-height:350px; border-radius:24px; }
.inspector-art { border-radius:17px; }
.inspector-title h2 { font-size:25px; }
.inspector-title p { font-size:10px; }
.inspector-title .eyebrow { font-size:7px; letter-spacing:1px; }
.inspector-body { padding:0 17px 16px; }
.info-note { font-size:11px; }
.unit-row { border-radius:12px; border-color:#d5d0c57d; background:#fffcf66b; padding:10px; }
.research-mini { border-color:#d5d0c57d; }
.inspector-foot { background:#e6e7dd70; border-color:#d5d0c57d; }
.command-dock { bottom:20px; left:336px; right:18px; height:186px; gap:12px; }
.deck-block { width:66px; padding:15px 10px; border-radius:20px; }
.deck-block .eyebrow { font-size:7px; line-height:1.7; letter-spacing:.4px; }
.deck-stats { font-size:9px; line-height:1.9; }
.deck-block .tiny { font-size:8px; }
.hand { gap:9px; }
.action-card { --card-tone:#496f7c; --card-wash:#dfe9e9; padding:13px 12px 12px; border-radius:18px; border:1px solid #c8c4b8c9; border-bottom:3px solid #c9c5b9; background:linear-gradient(155deg,#fffdf8,#f4f0e6); box-shadow:0 8px 20px #28383b1f,inset 0 1px #fff; max-width:178px; isolation:isolate; }
.action-card:before { content:''; position:absolute; inset:5px 5px auto; height:64px; border-radius:14px 14px 24px 24px; z-index:-1; background:radial-gradient(ellipse at 25% 15%,#fff9,transparent 65%),var(--card-wash); opacity:.8; }
.action-card[data-type=MILITARY] { --card-tone:#98514a; --card-wash:#ebd9d3; }
.action-card[data-type=IMPROVEMENT],.action-card[data-type=ECONOMY] { --card-tone:#876447; --card-wash:#ede2cb; }
.action-card[data-type=SCIENCE] { --card-tone:#616283; --card-wash:#e1deec; }
.action-card[data-type=CULTURE],.action-card[data-type=SETTLEMENT] { --card-tone:#9b5f4c; --card-wash:#ebdace; }
.action-card:hover:not(:disabled) { transform:translateY(-10px); border-color:var(--card-tone); box-shadow:0 15px 30px #28383b33,inset 0 1px #fff; z-index:2; }
.action-card.chosen { transform:translateY(-10px); border-color:var(--accent); box-shadow:0 0 0 2px #b9413138,0 14px 30px #28383b26; }
.action-card:disabled { opacity:.64; }
.card-symbol { width:42px; height:42px; margin:0 0 15px; border-radius:50%; color:var(--card-tone); background:#fffcf4c9; border:1px solid #fff9; box-shadow:0 2px 6px #423d3211; }
.card-symbol svg { width:25px; height:25px; stroke-width:1.4; }
.card-cost { top:15px; right:11px; min-width:27px; height:27px; padding:0 6px; display:flex; align-items:center; justify-content:center; gap:2px; border:1px solid #fff9; border-radius:50px; color:var(--card-tone); font-size:15px; background:#fffcf4b3; }
.card-cost svg { width:10px; height:10px; }
.card-type { font-size:7px; letter-spacing:.65px; color:var(--card-tone); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-title { font-size:17px; line-height:1.12; margin-bottom:8px; letter-spacing:-.2px; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-text { font-size:10px; line-height:1.5; color:#636b63; }
.card-price { font-size:9px; color:#846754; }
.end-turn-block { width:104px; padding:13px 9px; border-radius:22px; }
.end-turn-block .btn { min-height:78px; border-radius:50px; font-size:14px; text-transform:none; letter-spacing:0; }
.turn-tip { font-size:8px; }
.saved-label { font-size:7px; line-height:1.5; text-align:center; }
.target-banner { bottom:226px; border:1px solid #d8c1ac; border-radius:18px; padding:13px 16px; background:#fffaf2f5; }
.empty-hand { border-radius:20px; }
#toast { bottom:230px; border:1px solid #e0ccba; border-radius:18px; padding:14px 20px; }
/* The same softness continues into every management screen. */
.modal-backdrop { background:#28333875; backdrop-filter:blur(8px); padding:24px; }
.modal { width:min(890px,100%); border-radius:28px; padding:34px; background:radial-gradient(ellipse at 100% 0,#e1e9e23d,transparent 45%),linear-gradient(145deg,#fbf9f3,#f3f0e7); border:1px solid #ffffffe0; box-shadow:0 32px 100px #1d292a59,inset 0 1px #fff; scrollbar-gutter:stable; }
.close-modal { position:sticky; top:0; right:auto; display:grid; margin:-16px -2px -20px auto; z-index:3; background:#fffaf3; box-shadow:var(--shadow); }
.modal h2 { font-size:36px; letter-spacing:-.6px; margin-top:13px; }
.modal-intro { font-size:13px; line-height:1.8; }
.tech-grid,.market-grid,.project-grid { gap:14px; }
.tech-card,.market-card,.project-card,.embassy,.agenda-card,.archive-entry,.battle-forces>section,.difficulty-choice,.construction-panel { border-radius:18px; border-color:#d6d0c394; background:linear-gradient(155deg,#fffef9,#f7f3e9); box-shadow:0 3px 10px #3f423209,inset 0 1px #fff; }
.tech-card { padding:20px; }
.tech-card:disabled,.project-card:disabled { opacity:.68; }
.tech-card>svg,.project-card>svg,.market-card>svg { box-sizing:content-box; padding:11px; border-radius:50%; background:#dce5e370; border:1px solid #fff; margin-bottom:8px; }
.tech-card.active,.difficulty-choice.selected { background:linear-gradient(150deg,#fffaf0,#f1e2d3); border-color:#c28b70; box-shadow:0 0 0 2px #bf765714; }
.tech-card h3,.project-card h3,.market-card h3 { font-size:24px; }
.tech-card p,.project-card p,.market-card p { font-size:12px; line-height:1.7; }
.tech-card:not(:disabled):hover,.project-card:not(:disabled):hover,.agenda-card:hover { border-color:#b8a28a; box-shadow:0 8px 18px #49463314; }
.ledger-notice,.save-error,.war-notice,.battle-outcome,.victory-routes p { border-radius:15px; }
.standings-wrap { border-radius:16px; }
.settings-list { border:0; display:grid; gap:9px; }
.settings-row { padding:16px 18px; border:1px solid #d6d0c365; border-radius:16px; background:#fffdf6a1; }
.settings-row input[type=checkbox] { appearance:none; position:relative; flex-shrink:0; width:42px; height:25px; border:1px solid #b5b9b0; border-radius:30px; background:#d0d5cc; transition:background .2s; }
.settings-row input[type=checkbox]:after { content:''; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fffdf6; box-shadow:0 1px 4px #37483a30; transition:transform .2s; }
.settings-row input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); }
.settings-row input[type=checkbox]:checked:after { transform:translateX(17px); }
.settings-row select { border-radius:10px; }
.settings-footer kbd,.help-sections kbd,.roster-heading kbd { border-radius:5px; }
.roster-row { border-radius:12px; border-color:#d8d2c367; }
.city-heading,.campaign-name { border-color:#d8d2c367; }
.chronicle-entry { border-color:#d8d2c367; }
@media(min-width:1500px) {
  .origin-art { height:255px; }
  .command-dock { height:200px; left:356px; gap:15px; }
  .inspector { width:320px; }
  .action-card { padding:15px; }
  .card-title { font-size:19px; }
  .card-text { font-size:11px; }
  .card-symbol { margin-bottom:18px; }
  .card-cost { right:15px; }
  .map-controls,.target-banner { bottom:240px; }
  .map-help { bottom:292px; }
}
@media(min-width:701px) and (max-width:1180px) {
  .game-header { gap:9px; }
  .game-header .brand { padding:11px; }
  .game-header .brand-mark { display:none; }
  .resource { padding:7px; gap:6px; }
  .resource small { display:block; margin:0; font-size:7px; }
  .resource strong { font-size:20px; }
  .resource-label { font-size:6px; }
  .turn-display { padding:10px; }
  .turn-display .icon-btn { display:inline-grid; width:27px; height:27px; }
  .game-nav { max-width:calc(100% - 36px); }
  .nav-item { padding:10px 12px; }
  .map-topline { display:none; }
  .command-dock { left:18px; height:180px; }
  .inspector { bottom:220px; max-height:265px; width:270px; }
  .inspector-foot { display:none; }
  .action-card { max-width:none; }
  .target-banner { left:auto; right:18px; width:min(350px,44%); transform:none; bottom:225px; }
  .map-controls { bottom:225px; }
  .map-help { bottom:277px; }
}
@media(max-width:1000px) {
  .draft-gallery { grid-template-columns:1fr; gap:26px; }
  .gallery-intro { display:grid; grid-template-columns:1fr 1fr; gap:15px; align-items:center; padding:0; }
  .gallery-intro h1 { font-size:40px; }
  .gallery-intro p { max-width:350px; margin:0; }
  .chapter-mark,.intro-foot { display:none; }
  .origin-art { height:190px; }
  .origin-body { padding:15px 12px; }
  .origin-body h2 { font-size:23px; }
  .origin-effects span { font-size:10px; }
  .specimen-collection { gap:12px; }
  .charter-caption { display:none; }
  .slot-text strong { font-size:11px; }
}
@media(min-width:701px) and (max-width:900px) {
  .hand { overflow-x:auto; padding:3px 2px 6px; scrollbar-width:thin; scrollbar-color:#b7b8a8 transparent; scroll-snap-type:x proximity; }
  .action-card { flex:1 0 132px; min-width:132px; max-width:155px; padding:10px; scroll-snap-align:start; }
  .action-card:before { height:50px; }
  .card-symbol { width:34px; height:34px; margin-bottom:13px; }
  .card-symbol svg { width:23px; height:23px; }
  .card-cost { top:12px; right:10px; }
  .card-title { font-size:16px; }
  .action-card:hover:not(:disabled),.action-card.chosen { transform:none; }
}
@media(max-width:700px) {
  .site-header { height:76px; padding:0 20px; }
  .site-header .brand-mark { width:36px; height:36px; padding:6px; }
  .header-center { display:none; }
  .start-main { display:flex; flex-direction:column; padding:30px 24px; gap:12px; min-height:0; }
  .start-copy { width:100%; }
  .start-copy h1 { font-size:clamp(50px,11vw,72px); letter-spacing:-2px; }
  .start-copy>p { font-size:13px; max-width:430px; }
  .start-actions { max-width:none; margin-inline:0; padding:8px; border-radius:24px; }
  .menu-choice { padding:15px; gap:12px; }
  .menu-choice strong { font-size:23px; }
  .menu-choice>svg { padding:10px; width:21px; height:21px; }
  .start-art { width:100%; max-width:440px; align-self:center; }
  .start-art>img { width:100%; margin:0; }
  .start-art-caption { margin-top:-12px; padding:12px; }
  .draft-main { padding:20px 18px 0; }
  .gallery-meta .eyebrow { font-size:7px; letter-spacing:.9px; }
  .gallery-intro { display:block; }
  .gallery-intro h1 { font-size:40px; }
  .gallery-intro p { margin-top:13px; font-size:13px; }
  .specimen-collection { grid-template-columns:1fr; gap:14px; }
  .origin-card { display:grid; grid-template-columns:35% minmax(0,1fr); align-items:center; padding:10px; border:1px solid #d5cdbd90; }
  .origin-art { height:150px; }
  .origin-art img { width:124%; }
  .origin-body { min-height:150px; padding:14px; }
  .origin-body h2 { font-size:23px; }
  .origin-kind { font-size:7px; }
  .origin-effects span { font-size:10px; }
  .specimen-description { grid-column:1/-1; padding:12px 8px 4px; font-size:11px; }
  .origin-seal { width:40px; height:40px; top:-24px; }
  .charter-strip { display:grid; gap:5px; }
  .charter-slot { padding:11px 12px; border:0; }
  .slot-text { display:flex; align-items:center; gap:12px; }
  .slot-text small { min-width:72px; font-size:7px; margin:0; }
  .draft-footer { flex-wrap:wrap; }
  .draft-actions { width:100%; justify-content:end; }
  .draft-actions .btn.primary { min-width:0; flex:1; }
  .review-box { grid-template-columns:1fr; padding:18px; }
  .review-landscape { max-width:330px; margin:auto; }
  .review-copy h2 { font-size:30px; }
  .game-header { top:10px; left:12px; right:12px; height:108px; display:block; }
  .game-header .brand { position:absolute; left:0; top:0; min-height:40px; padding:10px 12px; border-radius:16px; }
  .game-header .brand-mark { display:none; }
  .game-header .brand-name { font-size:12px; }
  .game-header .brand-name span { display:inline; font-size:10px; }
  .game-header .brand small { display:none; }
  .turn-display { position:absolute; top:0; right:0; min-height:40px; padding:6px 9px; border-radius:16px; gap:4px; }
  .turn-display .eyebrow { display:none; }
  .turn-display strong { margin:0; font-size:15px; }
  .turn-display .icon-btn { display:inline-grid; width:27px; height:27px; margin:0; }
  .resource-bar { position:absolute; top:50px; left:0; right:0; padding:4px 2px; border-radius:18px; }
  .resource { height:46px; padding:4px; gap:5px; }
  .resource svg { width:13px; height:13px; }
  .resource-label { font-size:6px; letter-spacing:.1px; }
  .resource strong { font-size:18px; }
  .resource small { display:block; margin:0; font-size:6px; }
  .game-nav { top:126px; left:12px; right:12px; max-width:none; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding:4px; }
  .game-nav .nav-item { font-size:10px; flex-shrink:0; padding:9px 11px; gap:5px; }
  .nav-item svg { width:13px; height:13px; }
  .nav-spacer { flex-shrink:0; }
  .map-topline,.recent-event,.map-help { display:none; }
  .compass { top:185px; right:19px; }
  .command-dock { left:12px; right:12px; bottom:12px; height:207px; display:grid; grid-template-columns:1fr 110px; grid-template-rows:37px 1fr; gap:8px; }
  .deck-block { grid-row:1; grid-column:1; width:auto; padding:6px 12px; flex-direction:row; align-items:center; border-radius:14px; }
  .deck-block .eyebrow,.deck-block .tiny { display:none; }
  .energy-count { font-size:19px; }
  .deck-stats { font-size:8px; }
  .deck-stats br { display:none; }
  .end-turn-block { grid-row:1; grid-column:2; width:auto; padding:0; border:0; background:none; }
  .end-turn-block .btn { flex-direction:row; min-height:37px; padding:7px; font-size:12px; border-radius:14px; }
  .end-turn-block .turn-tip,.saved-label { display:none; }
  .hand { grid-row:2; grid-column:1/-1; overflow-x:auto; overflow-y:hidden; padding:4px 2px 6px; gap:9px; scrollbar-width:thin; scrollbar-color:#b7b8a8 transparent; scroll-snap-type:x proximity; }
  .action-card { min-width:126px; max-width:145px; padding:10px; border-radius:16px; scroll-snap-align:start; }
  .action-card:before { height:47px; border-radius:11px 11px 20px 20px; }
  .card-symbol { width:31px; height:31px; margin-bottom:12px; }
  .card-symbol svg { width:21px; height:21px; }
  .card-cost { top:10px; right:10px; min-width:24px; height:24px; font-size:14px; }
  .card-type { font-size:6px; }
  .card-title { font-size:15px; margin-bottom:6px; }
  .card-text { font-size:9px; line-height:1.4; }
  .card-price { font-size:8px; }
  .action-card:hover:not(:disabled),.action-card.chosen { transform:translateY(-3px); }
  .inspector { left:12px; right:auto; bottom:234px; width:270px; max-height:168px; border-radius:20px; }
  .inspector-art { width:55px; height:55px; margin:12px; border-radius:13px; }
  .inspector-title { min-height:78px; padding:13px 12px 7px 80px; }
  .inspector-title h2 { font-size:22px; }
  .inspector-title .eyebrow { font-size:6px; }
  .inspector-title p { font-size:9px; }
  .inspector-body { padding:0 12px 12px; }
  .inspector-body .yield-row { position:static; margin:2px 0 10px; }
  .inspector-foot { display:none; }
  .map-controls { left:auto; right:12px; bottom:234px; flex-direction:column; padding:4px; gap:3px; }
  .map-controls .icon-btn { width:30px; height:30px; }
  .target-banner { left:12px; right:12px; bottom:414px; width:auto; max-width:none; transform:none; padding:10px 12px; border-radius:15px; }
  .target-banner p { font-size:10px; }
  #toast { bottom:414px; padding:11px 15px; font-size:11px; }
  .modal-backdrop { padding:12px; }
  .modal { border-radius:24px; padding:27px 20px; max-height:94dvh; }
  .modal h2 { font-size:31px; }
  .modal-intro { font-size:12px; }
  .tech-grid,.project-grid,.market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .tech-card,.project-card,.market-card { padding:14px; border-radius:16px; }
  .tech-card h3,.project-card h3,.market-card h3 { font-size:22px; }
  .tech-card p,.project-card p,.market-card p { font-size:11px; }
  .settings-row { padding:15px; }
  .settings-row>span,.settings-row>label { min-width:140px; }
  .settings-row select { max-width:none; width:100%; }
  .settings-footer { line-height:2; }
  .modal-actions { flex-wrap:wrap; }
}
@media(max-width:380px) {
  .resource { gap:3px; }
  .resource svg { width:11px; }
  .resource-label { font-size:5px; }
  .game-header .brand-name { font-size:11px; }
  .game-header .brand-name span { font-size:9px; }
  .turn-display .icon-btn { width:23px; height:23px; }
  .inspector { width:calc(100% - 70px); }
  .origin-body h2 { font-size:20px; }
  .origin-effects span { font-size:9px; }
  .market-grid,.project-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; }
  .action-card:hover:not(:disabled),.origin-card:hover .origin-art img { transform:none; }
}
@media(forced-colors:active) {
  .settings-row input[type=checkbox] { appearance:auto; }
  .settings-row input[type=checkbox]:after { display:none; }
}
.building-benefit{display:flex;flex-direction:column;gap:4px;margin:9px 0;padding:9px 10px;border:1px solid #769d8b66;border-radius:8px;background:#13343b70;font-size:12px;line-height:1.4;white-space:normal}
.building-benefit>strong,.placement-benefit>strong{font-size:11px;color:#c4ddd1;font-weight:600}
.preview-yields{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;color:#f3e4be;font-weight:700}
.preview-yields>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.preview-yields svg{width:17px;height:17px;flex-shrink:0}
.building-benefit .location-bonus{color:#9bcdb2;font-size:11px}
.building-description .building-benefit small{margin:0;font-size:11px}
.placement-benefit{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.placement-benefit small{line-height:1.4!important}
.resource-uses ul{list-style:none;margin:8px 0;padding:0}
.resource-uses li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #d1bc8a26;font-size:12px}
.resource-uses li strong{color:#e5ca8c}
.race-strategy{padding:12px 14px;border-left:2px solid #c2a46b;background:#21302d77;border-radius:0 8px 8px 0;margin:12px 0}
.race-strategy>strong{font-size:12px;color:#e5ca8c}
.race-strategy small{font-size:11px;line-height:1.5;color:#b1c0bf}
@media(max-width:700px){.placement-compact .placement-benefit small{display:none}.placement-compact .placement-benefit{margin-top:3px;gap:2px}.placement-compact .placement-benefit>strong{font-size:10px}.placement-compact .preview-yields{font-size:12px}.building-benefit{padding:7px 8px}}