/* =============================================================================
   EVOLUTION  -  styles. Layouts are anchored and fluid: bottom bars pinned to
   the bottom, map top-left, info top-right (plant/microbe), everything fills
   the screen without overlapping.
   ============================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0d1410; color: #cfe8d6;
  font-family: "Segoe UI", system-ui, sans-serif; overflow: hidden; }

.screen { display: none; width: 100vw; height: 100vh; }
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ---- menus ---- */
#menu, #select, #instructions, #settings {
  align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #16241a, #0a0f0c);
}
.menu-box { width: 480px; max-width: 92vw; padding: 32px;
  background: #111b14; border: 1px solid #25402c; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); text-align: center; }
.menu-box.wide { width: 640px; }
h1 { font-size: 52px; letter-spacing: 8px; color: #7fe6a3; margin-bottom: 6px; }
h2 { color: #7fe6a3; margin-bottom: 18px; }
h3 { color: #9fd; font-size: 15px; margin-bottom: 8px; }
.tag { color: #87a48f; margin-bottom: 26px; font-size: 14px; }
button.big { display: block; width: 100%; margin: 8px 0; padding: 13px;
  background: #1c2e22; color: #d7f5e0; border: 1px solid #2f5039;
  border-radius: 8px; font-size: 16px; cursor: pointer; transition: .12s; }
button.big:hover { background: #284536; border-color: #4caf7a; }
button.link { background: none; border: none; color: #6fae87; cursor: pointer;
  margin-top: 16px; font-size: 14px; }
.conn { margin-top: 18px; font-size: 12px; color: #5c7d66; }

.picks { display: flex; gap: 12px; margin-bottom: 16px; }
.pick { flex: 1; padding: 16px 10px; background: #16241a; border: 1px solid #2f5039;
  border-radius: 10px; cursor: pointer; color: #d7f5e0; display: flex;
  flex-direction: column; align-items: center; gap: 6px; transition: .12s; }
.pick:hover { background: #21392a; transform: translateY(-2px); }
.pick .pe { font-size: 34px; }
.pick b { font-size: 16px; }
.pick small { font-size: 11px; color: #87a48f; line-height: 1.3; }
.sub { margin-top: 10px; padding-top: 14px; border-top: 1px solid #24382b; }
.sub p { color: #9fc7a8; margin-bottom: 10px; font-size: 14px; }
.instr { text-align: left; }
.instr p { margin-bottom: 12px; line-height: 1.5; font-size: 14px; color: #b9d8c2; }
.row { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #1c2c21; }
.row input[type=text] { background: #0d150f; border: 1px solid #24382b; color: #9fc7a8;
  padding: 6px; border-radius: 6px; }

/* =============================================================================
   GAME LAYOUTS
   ============================================================================= */
.game { flex-direction: column; }

/* plant + microbe: top row (map left, info right) + anchored bottom bar */
.layout-pm { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 6px; gap: 6px; }
.layout-pm .toprow { flex: 1 1 auto; display: flex; gap: 6px; min-height: 0; }
.layout-pm .map { flex: 1 1 auto; min-width: 0; height: 100%;
  background: #0a120c; border-radius: 8px; display: block; cursor: grab; }
.layout-pm .map:active { cursor: grabbing; }
.layout-pm .infobox { flex: 0 0 300px; width: 300px; background: #111b14;
  border: 1px solid #25402c; border-radius: 8px; padding: 12px; overflow: auto; }

/* animal: map fills the top, info+controls anchored along the bottom */
.layout-animal { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 6px; gap: 6px; }
.layout-animal .map { flex: 1 1 auto; min-height: 0; width: 100%;
  background: #0a120c; border-radius: 8px; display: block; }

/* the bottom bar is always pinned to the bottom of its layout */
.bottombar { flex: 0 0 auto; background: #111b14; border: 1px solid #25402c;
  border-radius: 8px; }
.dna-bar { padding: 10px 14px; overflow: auto; }
.layout-pm .bottombar { height: 30vh; max-height: 240px; min-height: 150px; }
.animal-bottom { height: 30vh; max-height: 240px; min-height: 160px;
  display: grid; grid-template-columns: 300px 1fr; gap: 6px; padding: 6px; }
.animal-bottom .info { background: #0f1812; border: 1px solid #20342780; border-radius: 8px;
  padding: 12px; overflow: auto; }
.animal-bottom .dna-bar { overflow: auto; }

.preview { height: 80px; border-radius: 8px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; }
.info { font-size: 13px; line-height: 1.7; }
.info b { color: #9fe6b8; }
.info .hint { color: #6c8a76; font-size: 11px; line-height: 1.4; }
.bar { height: 9px; border-radius: 5px; background: #0d150f; overflow: hidden; margin: 3px 0 7px; }
.bar > i { display: block; height: 100%; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px;
  background: #1c2e22; border: 1px solid #2f5039; margin: 2px 3px 2px 0; }

/* ---- dna controls ---- */
.dna-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 16px; }
.dna-ctrl { font-size: 12px; }
.dna-ctrl label { display: flex; justify-content: space-between; color: #9fc7a8; }
.dna-ctrl input[type=range] { width: 100%; accent-color: #4caf7a; }
.dna-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.dna-btns button { padding: 5px 9px; font-size: 12px; background: #1c2e22;
  border: 1px solid #2f5039; color: #d7f5e0; border-radius: 6px; cursor: pointer; }
.dna-btns button:hover { background: #284536; }
.dna-btns button.on { background: #2f6b47; border-color: #4caf7a; }
.dna-btns button:disabled { opacity: .45; cursor: not-allowed; }
.bank { font-size: 13px; color: #ffd479; margin-bottom: 8px; }

/* ---- hud + scoreboard ---- */
.hud { position: fixed; top: 8px; left: 8px; background: rgba(10,18,12,.85);
  padding: 8px 12px; border-radius: 8px; font-size: 13px; pointer-events: none;
  border: 1px solid #25402c; }
.hud b { color: #ffd479; }
.hud .wx-rain { color: #6fb6ff; }
.hud .wx-sun { color: #ffcf5c; }
.scoreboard { position: fixed; top: 8px; right: 8px; background: rgba(10,18,12,.9);
  padding: 10px 14px; border-radius: 8px; font-size: 12px; border: 1px solid #25402c;
  min-width: 180px; z-index: 5; }
.scoreboard h4 { color: #7fe6a3; margin-bottom: 6px; }
.scoreboard .me { color: #ffd479; }

/* ---- pause / esc overlay ---- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center;
  background: rgba(6, 11, 8, 0.82); backdrop-filter: blur(2px); }
.overlay.hidden { display: none; }
.overlay .tag { margin-bottom: 18px; }

/* stat screen: creature + name on the left, inventory on the right */
.stat-box { position: relative; display: flex; gap: 20px; text-align: left; width: 680px; }
.stat-left { flex: 1 1 60%; }
.stat-right { flex: 0 0 34%; }
.name-row { display: flex; gap: 8px; margin-bottom: 4px; }
.name-row input { flex: 1; background: #0d150f; border: 1px solid #2f5039;
  color: #e6ffee; padding: 9px; border-radius: 8px; font-size: 16px; }
.namebtn { background: #2f6b47; border: 1px solid #4caf7a; color: #eaffef;
  border-radius: 8px; padding: 0 14px; cursor: pointer; }
.namebtn:hover { background: #38805590; }
.preview-canvas { width: 100%; height: 240px; background: #0a120c; border: 1px solid #25402c;
  border-radius: 10px; margin: 10px 0; display: block; }
.stat-genome { font-size: 12px; color: #9fc7a8; line-height: 1.6; }
.stat-genome .pill { background: #16241a; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.slot { aspect-ratio: 1 / 1; background: #0d150f; border: 1px dashed #335; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: #3a5547; font-size: 12px; }
.slot::after { content: "empty"; }
.close-x { position: absolute; top: 10px; right: 16px; margin: 0; }

#craftBody, #lineageBody { text-align: left; font-size: 14px; line-height: 1.8; color: #c4e3cd; }
#craftBody .pill, #lineageBody .pill { background: #16241a; }
#craftBody h4, #lineageBody h4 { color: #7fe6a3; margin: 12px 0 4px; }

.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: rgba(16, 30, 20, 0.95); border: 1px solid #2f5039; color: #d7f5e0;
  padding: 10px 18px; border-radius: 10px; font-size: 14px; z-index: 60; }
.toast.hidden { display: none; }

/* ---- start setup: microbe type, point allocator, colors ---- */
.mtype-row { display: flex; gap: 8px; }
.mtype { flex: 1; padding: 12px 8px; background: #16241a; border: 1px solid #2f5039;
  border-radius: 10px; color: #d7f5e0; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.mtype:hover { background: #21392a; }
.mtype.on { background: #2f6b47; border-color: #4caf7a; }
.mtype small { font-size: 10px; color: #87a48f; line-height: 1.3; }
.pts { color: #ffd479; font-weight: bold; }
.alloc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.alloc { display: flex; align-items: center; justify-content: space-between;
  background: #16241a; border: 1px solid #2f5039; border-radius: 8px; padding: 6px 10px; }
.alloc .lab { font-size: 13px; color: #cfe8d6; }
.alloc .ct { display: flex; align-items: center; gap: 8px; }
.alloc button { width: 26px; height: 26px; border-radius: 6px; background: #1c2e22;
  border: 1px solid #2f5039; color: #d7f5e0; cursor: pointer; font-size: 15px; }
.alloc button:hover { background: #2f6b47; }
.alloc .val { min-width: 14px; text-align: center; color: #9fe6b8; }
.alloc-color-label { font-size: 13px; color: #9fc7a8; margin-top: 6px; }
.color-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 6px 0 4px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.swatch.on { border-color: #fff; }

/* ---- minigame ---- */
.mg-bars { margin: 16px 0; }
.mg-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.mg-bar span { width: 60px; text-align: right; font-size: 13px; color: #9fc7a8; }
.bar.big { height: 18px; flex: 1; }
#mgMash { font-size: 18px; padding: 16px; }
#mgTime { font-size: 18px; margin-top: 10px; }

/* ---- hatch-from-egg picker ---- */
.egg-picker { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0; }
.egg-arrow { width: 44px; height: 64px; font-size: 22px; background: #1c2e22; color: #d7f5e0;
  border: 1px solid #2f5039; border-radius: 10px; cursor: pointer; }
.egg-arrow:hover { background: #284536; }
.egg-arrow:disabled { opacity: .3; cursor: not-allowed; }
.egg-display { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 150px; }
.egg-display canvas { width: 120px; height: 120px; }
#eggLabel { font-weight: 600; color: #e7f7ec; }
.hatch-btns { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.hatch-btns .big { min-width: 110px; }
.hatch-btns .big.ready { background: #2f6b47; border-color: #4caf7a; box-shadow: 0 0 12px #2f6b4788; }
.hatch-btns .big:disabled { opacity: .4; cursor: not-allowed; }
#hatchStatus { text-align: center; margin-top: 10px; min-height: 16px; }

/* ---- microbe effect panel (spreads across the whole bottom bar) ---- */
.fx-cols { display: flex; gap: 14px; height: 100%; align-items: stretch; width: 100%; }
.fx-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  background: #11201780; border: 1px solid #21372880; border-radius: 8px; padding: 8px 10px; overflow: auto; }
.fx-col-h { font-size: 11px; color: #7fae8c; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #25402f; padding-bottom: 4px; }
.fx-img { width: 84px; height: 84px; border-radius: 50%; align-self: center; }
.fx-btn-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-pill-btn { padding: 5px 9px; font-size: 12px; background: #1c2e22; border: 1px solid #2f5039;
  color: #d7f5e0; border-radius: 6px; cursor: pointer; }
.fx-pill-btn:hover { background: #284536; }
.fx-toggle-list { display: flex; flex-direction: column; gap: 4px; }
.fx-toggle { display: flex; align-items: center; justify-content: space-between;
  background: #16241a; border: 1px solid #2f5039; border-radius: 8px; padding: 5px 9px; font-size: 12px; gap: 8px; }
.fx-toggle button { padding: 3px 8px; border-radius: 6px; background: #1c2e22; border: 1px solid #2f5039; color: #d7f5e0; cursor: pointer; white-space: nowrap; }
.fx-toggle button.on { background: #2f6b47; border-color: #4caf7a; }
.fx-toggle button:disabled { opacity: .4; cursor: not-allowed; }
.fx-locked { opacity: 0.45; pointer-events: none; }