/* Factory Empire only: industrial navy, copper controls, readable production data. */
.factory-page {
  --bg:#0c1219; --surface:#151f2b; --line:#2a3746;
  --text:#eef3f8; --soft:#b4c2d0; --dim:#93a5b7;
  --brand:#ffc078; --brand2:#a6b4ff;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 4% 18%,#8e5a2926,transparent 38%),
    radial-gradient(ellipse at 96% 12%,#32678840,transparent 45%),
    linear-gradient(180deg,#101e2c 0%,#0c1219 75%);

  color-scheme:dark;
}
/* Static, noninteractive scenery stays behind the game and account widgets. */
.factory-page::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url('/public/factory-district.svg') center bottom / max(1600px,100vw) auto no-repeat;
  opacity:.7;
}
.factory-page .grid {
  z-index:-1; opacity:.65;
  background-image:
    linear-gradient(90deg,#83adc40b 1px,transparent 1px),
    linear-gradient(#83adc40b 1px,transparent 1px),
    linear-gradient(90deg,#83adc410 1px,transparent 1px),
    linear-gradient(#83adc410 1px,transparent 1px);
  background-size:32px 32px,32px 32px,160px 160px,160px 160px;
  mask-image:linear-gradient(#000,transparent 85%);
  -webkit-mask-image:linear-gradient(#000,transparent 85%);
}
.factory-page .fe-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 95% 100%,#e8ad6026,transparent 60%),
    repeating-linear-gradient(90deg,transparent 0 47px,#96b9d00a 47px 48px);
}
.factory-page .fe-line {
  background:
    radial-gradient(circle at 12px 12px,#75889b66 2px,transparent 3px) 0 0 / 100% 100%,
    linear-gradient(90deg,#ffc07812,transparent 35%),
    repeating-linear-gradient(0deg,transparent 0 31px,#91b5d008 31px 32px),#101a25;
  box-shadow:inset 0 1px 0 #ffffff06,0 12px 32px #00000026;
}
@media(max-width:760px) {
  .factory-page::before {background-size:1100px auto; background-position:30% bottom; opacity:.4}
}
.factory-page .topbar {background:#0c1219cc; padding:16px max(22px,calc((100vw - 1160px)/2));}
.factory-page .game-wrap {max-width:1204px; padding-top:30px}
.factory-page .fe-hero {position:relative; min-height:150px; overflow:hidden; padding:24px 28px; margin-bottom:14px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(110deg,#1c2b3b,#14202d);}
.factory-page .fe-hero > div {position:relative; z-index:1}
.factory-page .fe-hero-icon {width:64px; height:64px; border-color:#ffc07845; background:#ffc07812; border-radius:18px; z-index:1}
.factory-page .fe-hero-icon .ico {width:34px; height:34px}
.factory-page .page-title {font-size:clamp(1.65rem,3vw,2.3rem); letter-spacing:-.05em}
.factory-page .fe-hero .sub {margin-top:5px; font-size:.92rem}
.fe-skyline {position:absolute; width:44%; height:auto; inset-inline-end:12px; bottom:0; fill:none; stroke-width:2; stroke-linejoin:round; pointer-events:none; opacity:.65}
.sky-ground {stroke:#3b5167}.sky-building {fill:#213447; stroke:#68829a}.sky-detail {stroke:#7899b6}.sky-crane {stroke:#cc9b61}.sky-light {fill:#ffc078; stroke:none}
.factory-page .res-bar {grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:12px 0; margin-bottom:12px}
.factory-page .res {padding:16px 20px; border-radius:14px; background:linear-gradient(135deg,#1b2836,#141e29)}
.factory-page .res::before {top:16px; bottom:16px; border-radius:3px}
.factory-page .res .label {font-size:.82rem; gap:8px; color:var(--soft)}
.factory-page .res .value {font-size:clamp(1.45rem,2.5vw,2rem); margin:8px 0 4px; letter-spacing:-.04em}
.factory-page .fe-line {padding:24px; margin-bottom:20px; border:1px solid var(--line); border-radius:18px; gap:0}
.factory-page .fe-station {flex:1; min-width:0}
.factory-page .fe-hand {flex:.95}
.factory-page .fe-card {width:auto; flex:1; min-width:0; height:180px; justify-content:center; padding:14px 8px; border-radius:12px; background:linear-gradient(#233346,#182432); border-color:#3b5064; box-shadow:0 5px 0 #080f17}
.factory-page .fe-card > .ico {width:34px; height:34px; margin-bottom:4px}
.factory-page .fe-card.empty {opacity:.65; border-style:dashed; background:#14202b; box-shadow:none}
.factory-page .fe-card .fe-name {color:var(--text); overflow-wrap:anywhere}
.factory-page .fe-card .fe-out {min-height:1.2em}
.factory-page .fe-link {width:28px; margin:0 5px}
.factory-page .click-btn {width:100%; min-height:180px; justify-content:center; gap:10px; color:#21170c; background:linear-gradient(145deg,#ffd39c,#edaa58); border-color:#ffcf92; border-radius:12px; box-shadow:0 5px 0 #915b2b; touch-action:manipulation}
.factory-page .click-btn .ico {width:38px; height:38px; color:#62401c}
.factory-page .click-btn b {color:#62401c; background:#ffffff45; border-radius:8px; padding:1px 17px}
.factory-page .click-btn:hover {background:linear-gradient(145deg,#ffe0b8,#ffc078)}
.factory-page .click-btn:active {box-shadow:0 2px 0 #915b2b}
.factory-page .daily {border-left-width:1px; border-color:#395848; background:linear-gradient(100deg,#1b302b,#15232a); padding:16px 20px}
.factory-page .daily.done {opacity:1; border-color:var(--line); background:var(--surface)}
.factory-page .daily-head .btn:not(:disabled) {background:#b7e8c8; color:#163724; border-color:#b7e8c8}
.factory-page .panels {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; margin-top:28px}
.factory-page .panels > section {min-width:0}
.factory-page .panel-title {color:var(--text); font-size:1.02rem; letter-spacing:0; margin-bottom:14px}
.factory-page .list {gap:10px}
.factory-page .item {padding:16px; gap:4px 12px; border-radius:14px; background:#151f2b}
.factory-page .item .item-icon {width:42px; height:42px; border-radius:12px; background:#253344}
.factory-page .item .item-icon .ico {width:24px; height:24px}
.factory-page .item .name,.factory-page .item .meta,.factory-page .item .flowline {min-width:0; overflow-wrap:anywhere}
.factory-page .item.ready {border-color:#b48551; background:linear-gradient(110deg,#30291f,#19232d)}
.factory-page .item.ready .btn.buy {background:#ffc078; border-color:#ffc078; color:#2a1c0c}
.factory-page .item.locked {opacity:.75}
.factory-page .item .item-progress {margin-top:8px; height:4px}
.factory-page .btn {min-height:40px; font-family:inherit}
.factory-page .btn:focus-visible {outline:2px solid var(--brand); outline-offset:3px}
.factory-page .btn:disabled {opacity:.6}
.factory-page .ach {padding:22px; border:1px solid var(--line); border-radius:18px; background:#101a24; margin-top:28px}
.factory-page .ach-list {grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:16px}
.factory-page .ach-item {padding:14px; background:#172330}
.factory-page .ach-item.locked {opacity:.75}
.factory-page .ach-item.done {background:#192e2a}
.factory-page .save-row {margin-top:24px}
@media(min-width:761px) { .factory-page .fe-hero > div {max-width:55%} }
@media(max-width:1000px) {
  .factory-page .panels {grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px) {
  .factory-page .game-wrap {padding:20px 16px 40px}
  .factory-page .fe-hero {padding:22px 18px; min-height:130px; gap:12px}
  .fe-skyline {opacity:.16; width:65%}
  .factory-page .fe-hero-icon {width:48px; height:48px}
  .factory-page .res-bar {grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .factory-page .res {padding:10px 14px}
  .factory-page .res .value {margin:3px 0; font-size:1.4rem}
  .factory-page .fe-line {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; overflow:visible}
  .factory-page .fe-hand {grid-column:1/-1}
  .factory-page .click-btn {flex-direction:row; min-height:70px; gap:16px}
  .factory-page .click-btn .ico {width:28px; height:28px}
  .factory-page .fe-link {display:none}
  .factory-page .fe-card {height:158px}
  .factory-page .item {padding:12px; gap:4px 10px}
  .factory-page .ach {padding:16px}
}
@media(max-width:420px) {
  .factory-page .item {grid-template-columns:auto minmax(0,1fr)}
  .factory-page .item .name {grid-column:2; grid-row:1}
  .factory-page .item .flowline {grid-column:2; grid-row:2}
  .factory-page .item .meta {grid-column:2; grid-row:3}
  .factory-page .item .buttons {grid-column:2; grid-row:4; margin-top:6px}
  .factory-page .item .buttons .btn {flex:1}
  .factory-page .item .item-progress {grid-column:2}
  .factory-page .topbar {gap:10px; padding:12px 16px}
  .factory-page .who {flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce) {
  .factory-page *, .factory-page *::before, .factory-page *::after {animation:none!important; transition:none!important}
}