/* GENERATED — DO NOT EDIT.
 * Extracted verbatim from the game source by site/game-sync.mjs at build time:
 *   .fermis-menu  <- civ2/src/MainMenu.js  (MENU_CSS)
 *   .fm-*         <- civ2/src/UIKit.js     (UI_KIT_CSS)
 * Edit the game, then rebuild. Site-specific overrides live in style.css,
 * which loads after this file.
 */

/* --- civ2/src/MainMenu.js : MENU_CSS --------------------------------------- */

.fermis-menu { position: fixed; inset: 0; z-index: 200; pointer-events: none; font-family: 'Jura', sans-serif; color: #eee; }
.fermis-menu * { font-family: 'Jura', sans-serif; box-sizing: border-box; }

.fermis-menu .center {
    position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; width: min(46vw, 560px);
}
.fermis-menu .center::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 165%; height: 340%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(2,3,8,0.78) 0%, rgba(2,3,8,0.6) 30%, rgba(2,3,8,0.32) 52%, rgba(2,3,8,0.0) 72%);
}
.fermis-menu .center img { width: 100%; height: auto; user-select: none;
    filter: drop-shadow(0 0 40px rgba(150,170,255,0.25)) drop-shadow(0 2px 12px rgba(0,0,0,0.85)); }
.fermis-menu .tagline {
    margin-top: 18px; color: rgba(220,226,245,0.7);
    font-size: clamp(10px, 1vw, 13px); letter-spacing: 10px; text-transform: uppercase; padding-left: 10px;
    text-shadow: 0 0 12px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.9);
}

.fermis-menu .rail {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: auto;
}
.fermis-menu .rail-btn {
    position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 18px;
    background: none; border: none; cursor: pointer; color: rgba(210,218,240,0.8);
    padding: 10px 14px; transition: color .2s ease, padding .3s ease; -webkit-tap-highlight-color: transparent;
}
.fermis-menu .rail-btn:hover, .fermis-menu .rail-btn:focus-visible { color: #fff; outline: none; padding-left: 30px; }
.fermis-menu .rail-btn::before {
    content: ""; position: absolute; inset: 0; background: rgba(8,10,20,0.75);
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%);
    transition: background .22s ease, backdrop-filter .22s ease; z-index: -1; pointer-events: none; backdrop-filter: blur(4px);
}
.fermis-menu .rail-btn:hover::before, .fermis-menu .rail-btn:focus-visible::before { background: rgba(16,20,38,0.9); backdrop-filter: blur(7px); }
.fermis-menu .rail-btn::after {
    content: ""; position: absolute; inset: 0; clip-path: polygon(22px 0, 23px 0, 1px 50%, 23px 100%, 22px 100%, 0 50%);
    background: rgba(150,170,255,0.55); opacity: 0; transition: opacity .22s ease; z-index: -1; pointer-events: none;
}
.fermis-menu .rail-btn:hover::after, .fermis-menu .rail-btn:focus-visible::after { opacity: 1; }
.fermis-menu .rail-label {
    font-size: 14px; letter-spacing: 5px; text-transform: uppercase; font-weight: 500;
    max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; text-align: right;
    transition: max-width .3s ease, opacity .28s ease; text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.fermis-menu .rail-btn:hover .rail-label, .fermis-menu .rail-btn:focus-visible .rail-label { max-width: 220px; opacity: 1; }
.fermis-menu .rail-key { margin-left: 12px; font-size: 11px; letter-spacing: 1px; opacity: 0.45; text-transform: none; }
.fermis-menu .rail-ico { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.fermis-menu .rail-btn:hover .rail-ico, .fermis-menu .rail-btn:focus-visible .rail-ico { transform: scale(1.06); }
.fermis-menu .rail-ico svg { width: 36px; height: 36px; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.95)); }

.fermis-menu .version { position: fixed; bottom: 14px; left: 20px; color: rgba(255,255,255,0.3);
    font-size: 10px; letter-spacing: 2px; text-shadow: 0 0 10px rgba(0,0,0,0.9); }

/* Saves overlay — opened by the Load rail button. */
.fermis-menu .saves-scrim { position: fixed; inset: 0; z-index: 1; pointer-events: auto; display: none;
    align-items: center; justify-content: center; background: rgba(2,3,8,0.45); backdrop-filter: blur(2px); }
.fermis-menu .saves-scrim.open { display: flex; }
.fermis-menu .saves { width: min(90vw, 420px); max-height: 70vh; overflow-y: auto; padding: 22px;
    background: rgba(10,13,24,0.92); border: 1px solid rgba(120,140,210,0.35); border-radius: 6px; }
.fermis-menu .saves h2 { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(200,210,240,0.8); }
.fermis-menu .save-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; margin-bottom: 8px; background: rgba(20,24,40,0.8); border: 1px solid rgba(90,105,160,0.4); border-radius: 4px; }
.fermis-menu .save-row .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fermis-menu .save-row .dt { font-size: 11px; opacity: 0.55; }
.fermis-menu .save-row button, .fermis-menu .saves .back {
    font-family: 'Jura', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
    padding: 6px 12px; color: #dfe4f5; background: rgba(30,36,58,0.9); border: 1px solid rgba(110,128,190,0.5); border-radius: 4px; }
.fermis-menu .save-row .del { background: rgba(58,36,36,0.9); border-color: rgba(125,64,64,0.7); }
.fermis-menu .saves .back { margin-top: 6px; width: 100%; }
.fermis-menu .saves .empty { opacity: 0.6; padding: 8px 2px 14px; }

/* Entrance animations — only on the first menu of the session (root has .intro). */
.fermis-menu.intro .center { opacity: 0; animation: fm-rise 1.6s cubic-bezier(.2,.7,.2,1) 3.6s forwards; }
.fermis-menu.intro .center::before { opacity: 0; animation: fm-fade 1.4s ease 4s forwards; }
.fermis-menu.intro .rail { opacity: 0; animation: fm-fade 1.2s ease 3.2s forwards; }
.fermis-menu.intro .version { opacity: 0; animation: fm-fade 1.2s ease 4.2s forwards; }
@keyframes fm-rise { from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes fm-fade { from { opacity: 0; } to { opacity: 1; } }


/* --- civ2/src/UIKit.js : UI_KIT_CSS ---------------------------------------- */

:root{
  --fm-accent:#8b96e8;
  --fm-accent-deep:rgba(60,54,140,0.55);
  --fm-accent-deep-hover:rgba(78,70,175,0.7);
  --fm-surface:rgba(8,10,20,0.75);
  --fm-surface-hover:rgba(20,24,44,0.85);
  --fm-surface-deep:rgba(6,8,16,0.7);
  --fm-border:rgba(120,132,180,0.28);
  --fm-border-strong:rgba(139,150,232,0.7);
  --fm-text:#d6dcf0;
  --fm-text-dim:#aeb6d4;
  --fm-text-muted:#7a84a4;
  --fm-text-bright:#fff;
  --fm-clip:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --fm-clip-sm:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.fm-font, .fm-btn, .fm-tab, .fm-plabel, .fm-panel-h, .fm-badge, .fm-input, .fm-select-btn, .fm-seg span,
.fm-check .lbl, .fm-radio .lbl, .fm-slot, .fm-notice .txt, .fm-kbd, .fm-sec { font-family:'Jura',sans-serif; }

/* Buttons */
.fm-btn{position:relative;padding:11px 24px;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--fm-text);
  background:var(--fm-surface);border:1px solid var(--fm-border);cursor:pointer;transition:.18s;clip-path:var(--fm-clip);}
.fm-btn:hover{color:var(--fm-text-bright);border-color:var(--fm-border-strong);background:var(--fm-surface-hover);}
.fm-btn:active{transform:translateY(1px);}
.fm-btn.primary{background:var(--fm-accent-deep);border-color:rgba(139,150,232,0.6);color:#fff;}
.fm-btn.primary:hover{background:var(--fm-accent-deep-hover);}
.fm-btn.danger{border-color:rgba(226,75,74,0.4);color:#f0b0b0;}
.fm-btn.danger:hover{border-color:rgba(226,75,74,0.8);background:rgba(80,20,20,0.6);color:#ffd5d5;}
.fm-btn:disabled{cursor:not-allowed;color:#7078a0;border-color:rgba(120,132,180,0.18);background:rgba(8,10,20,0.85);}
.fm-btn:disabled:hover{color:#7078a0;border-color:rgba(120,132,180,0.18);background:rgba(8,10,20,0.85);}
.fm-btn.icon{display:inline-flex;align-items:center;justify-content:center;gap:10px;}
.fm-btn.icon svg{width:18px;height:18px;}
.fm-btn.sm{padding:7px 14px;font-size:11px;letter-spacing:2px;}

/* Tabs */
.fm-tabs{display:flex;}
.fm-tab{padding:12px 20px;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--fm-text-muted);cursor:pointer;border:none;transition:.15s;background:none;}
.fm-tab:hover{color:#c4cae6;}
.fm-tab.on{color:#fff;border-bottom:2px solid var(--fm-accent);}

/* Panel */
.fm-panel{position:relative;padding:20px 22px;background:rgba(8,10,20,0.72);border:1px solid rgba(120,132,180,0.22);clip-path:var(--fm-clip);}
.fm-panel-h{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--fm-accent);margin:0 0 16px;}
.fm-prow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
.fm-prow:last-child{margin-bottom:0;}
.fm-plabel{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text-dim);}
.fm-sec{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--fm-text-muted);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(120,132,180,0.18);}

/* Slider */
.fm-slider{-webkit-appearance:none;appearance:none;width:180px;height:3px;background:rgba(120,132,180,0.3);outline:none;}
.fm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;background:var(--fm-accent);transform:rotate(45deg);cursor:pointer;}
.fm-slider::-moz-range-thumb{width:10px;height:10px;background:var(--fm-accent);border:none;cursor:pointer;}

/* Toggle */
.fm-toggle{width:46px;height:22px;border:1px solid rgba(120,132,180,0.4);background:var(--fm-surface-deep);position:relative;cursor:pointer;transition:.2s;clip-path:var(--fm-clip-sm);flex-shrink:0;}
.fm-toggle.on{border-color:rgba(139,150,232,0.8);background:rgba(60,54,140,0.4);}
.fm-toggle .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#7a80a0;transition:left .2s,background .2s;clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px);}
.fm-toggle.on .knob{left:26px;background:#a7b0f0;clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);}

/* Segmented (buttons, so they're focusable + testable by role) */
.fm-seg{display:inline-flex;border:1px solid rgba(120,132,180,0.3);flex-shrink:0;}
.fm-seg span, .fm-seg button{padding:7px 15px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text-muted);cursor:pointer;transition:.15s;white-space:nowrap;background:none;border:none;font-family:'Jura',sans-serif;}
.fm-seg span:not(:last-child), .fm-seg button:not(:last-child){border-right:1px solid rgba(120,132,180,0.3);}
.fm-seg span:hover, .fm-seg button:hover{color:#c4cae6;}
.fm-seg span.on, .fm-seg button.on{background:var(--fm-accent-deep);color:#fff;}

/* Checkbox */
.fm-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;}
.fm-check .box{width:20px;height:20px;border:1px solid rgba(120,132,180,0.5);background:var(--fm-surface-deep);display:flex;align-items:center;justify-content:center;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);}
.fm-check .box.on{background:rgba(60,54,140,0.6);border-color:var(--fm-accent);}
.fm-check .box svg{width:12px;height:12px;color:#fff;opacity:0;}
.fm-check .box.on svg{opacity:1;}
.fm-check .lbl{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text-dim);}

/* Radio */
.fm-radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;}
.fm-radio .dot{width:18px;height:18px;border:1px solid rgba(120,132,180,0.5);background:var(--fm-surface-deep);position:relative;transform:rotate(45deg);}
.fm-radio .dot::after{content:"";position:absolute;inset:4px;background:var(--fm-accent);opacity:0;transition:.15s;}
.fm-radio.on .dot{border-color:var(--fm-accent);}
.fm-radio.on .dot::after{opacity:1;}
.fm-radio .lbl{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text-dim);}

/* Text input */
.fm-input{width:100%;padding:10px 14px;font-size:13px;letter-spacing:2px;color:var(--fm-text);background:var(--fm-surface-deep);border:1px solid rgba(120,132,180,0.3);outline:none;transition:.15s;clip-path:var(--fm-clip-sm);}
.fm-input::placeholder{color:#5a6280;letter-spacing:2px;}
.fm-input:focus{border-color:var(--fm-border-strong);background:rgba(14,18,34,0.8);}

/* Native select (kit-styled) */
.fm-native-select{font-family:'Jura',sans-serif;min-width:180px;padding:9px 30px 9px 13px;font-size:12px;letter-spacing:1px;
  color:var(--fm-text);background:var(--fm-surface-deep);border:1px solid rgba(120,132,180,0.3);cursor:pointer;outline:none;
  -webkit-appearance:none;appearance:none;clip-path:var(--fm-clip-sm);transition:.15s;
  background-image:linear-gradient(45deg,transparent 50%,var(--fm-accent) 50%),linear-gradient(135deg,var(--fm-accent) 50%,transparent 50%);
  background-position:calc(100% - 16px) center,calc(100% - 11px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.fm-native-select:hover{border-color:var(--fm-border-strong);}
.fm-native-select:focus{border-color:var(--fm-border-strong);background-color:rgba(14,18,34,0.8);}
.fm-native-select option{background:#0a0d18;color:var(--fm-text);}

/* Dropdown */
.fm-select{position:relative;display:inline-block;}
.fm-select-btn{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:170px;padding:10px 14px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text);background:var(--fm-surface-deep);border:1px solid rgba(120,132,180,0.3);cursor:pointer;transition:.15s;clip-path:var(--fm-clip-sm);}
.fm-select-btn:hover{border-color:var(--fm-border-strong);}
.fm-select-btn svg{width:14px;height:14px;transition:.2s;}
.fm-select.open .fm-select-btn svg{transform:rotate(180deg);}
.fm-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:rgba(10,13,24,0.96);border:1px solid rgba(120,132,180,0.35);z-index:10;display:none;}
.fm-select.open .fm-select-menu{display:block;}
.fm-select-menu div{padding:9px 14px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text-dim);cursor:pointer;transition:.12s;}
.fm-select-menu div:hover{background:var(--fm-accent-deep);color:#fff;}

/* Save slot */
.fm-slot{position:relative;display:flex;align-items:center;gap:16px;padding:13px 18px;background:rgba(8,10,20,0.72);border:1px solid rgba(120,132,180,0.22);cursor:pointer;transition:.15s;clip-path:var(--fm-clip);margin-bottom:10px;}
.fm-slot:hover{border-color:var(--fm-border-strong);background:rgba(18,22,42,0.8);}
.fm-slot.empty{border-style:dashed;color:#4a5270;cursor:default;}
.fm-slot svg.ship{width:28px;height:28px;color:#c8ccdd;flex-shrink:0;}
.fm-slot .name{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#dfe4f4;}
.fm-slot .meta{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text-muted);margin-top:3px;}
.fm-slot .time{font-size:11px;letter-spacing:1px;color:var(--fm-text-muted);}

/* Badges / kbd / progress / notice */
.fm-badge{display:inline-block;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;border:1px solid rgba(120,132,180,0.4);color:var(--fm-text-dim);clip-path:var(--fm-clip-sm);}
.fm-badge.accent{border-color:var(--fm-accent);color:#c3caf5;background:rgba(60,54,140,0.35);}
.fm-badge.success{border-color:rgba(93,202,165,0.5);color:#9fe1cb;}
.fm-badge.warn{border-color:rgba(239,159,39,0.5);color:#fac775;}
.fm-kbd{display:inline-block;min-width:64px;text-align:center;font-size:12px;letter-spacing:2px;padding:5px 10px;color:var(--fm-text);background:var(--fm-surface-deep);border:1px solid rgba(120,132,180,0.35);clip-path:var(--fm-clip-sm);}
.fm-prog{width:100%;height:6px;background:var(--fm-surface-deep);border:1px solid rgba(120,132,180,0.3);position:relative;clip-path:var(--fm-clip-sm);}
.fm-prog .fill{position:absolute;top:0;left:0;bottom:0;background:var(--fm-accent);opacity:.85;}
.fm-notice{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(8,10,20,0.72);border:1px solid rgba(120,132,180,0.22);border-left:2px solid var(--fm-accent);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);}
.fm-notice .txt{font-size:12px;letter-spacing:1px;color:var(--fm-text-dim);line-height:1.5;}
.fm-notice svg{width:18px;height:18px;color:var(--fm-accent);flex-shrink:0;}

/* Card — a vertical catalog/product card: a preview media area (img or live canvas) with
   an overlaid tag row, above a body of title, description, an optional stat grid, and a
   price/action footer. Child class names are generic (.preview/.body/.stat/…) so they are
   scoped under .fm-card to avoid leaking into the rest of the app. */
.fm-card{position:relative;background:rgba(8,10,20,0.78);border:1px solid rgba(120,132,180,0.22);cursor:pointer;transition:.15s;clip-path:var(--fm-clip);display:flex;flex-direction:column;overflow:hidden;}
.fm-card:hover{border-color:var(--fm-border-strong);}
.fm-card .preview{position:relative;height:118px;flex:0 0 auto;background:radial-gradient(circle at 50% 32%,rgba(42,48,90,0.55),rgba(8,10,20,0.9));border-bottom:1px solid rgba(120,132,180,0.18);}
.fm-card .preview .media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.fm-card .preview .media canvas,.fm-card .preview .media img{width:100%;height:100%;object-fit:contain;display:block;}
.fm-card .tagrow{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;}
.fm-card .body{display:flex;flex-direction:column;gap:8px;padding:12px 14px;}
.fm-card .ctitle{margin:0;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fm-card .cdesc{margin:0;font-size:11px;letter-spacing:.4px;line-height:1.45;color:var(--fm-text-dim);}
.fm-card .stats{display:flex;gap:16px;}
.fm-card .stat{display:flex;flex-direction:column;gap:2px;}
.fm-card .stat .k{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text-muted);}
.fm-card .stat .v{font-size:13px;letter-spacing:1px;color:var(--fm-text);}
.fm-card .cfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.fm-card .price{font-size:16px;letter-spacing:1px;color:var(--fm-text-bright);}
.fm-card .price .unit{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-text-muted);margin-left:3px;}

/* Square icon button (kit primitive) — used in card footers and compact toolbars. */
.fm-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;color:var(--fm-text);background:var(--fm-surface-deep);border:1px solid rgba(120,132,180,0.3);cursor:pointer;transition:.15s;clip-path:var(--fm-clip-sm);}
.fm-iconbtn:hover{border-color:var(--fm-border-strong);background:var(--fm-surface-hover);color:var(--fm-text-bright);}
.fm-iconbtn.accent{background:var(--fm-accent-deep);border-color:rgba(139,150,232,0.6);color:#fff;}
.fm-iconbtn.accent:hover{background:var(--fm-accent-deep-hover);}
.fm-iconbtn svg{width:18px;height:18px;}

/* Full-screen overlay scaffold (menus) */
.fm-overlay{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;overflow-y:auto;color:var(--fm-text);}