/* Terrarium Tycoon: a sunlit greenhouse. Pale glass-green paper, moss and amber, soft serif, rounded leaf shapes.
   Light theme on purpose: the game is cozy and daylit. */
body.t-terrarium {
  --stage: #eef2ea;
  --stage-2: #ffffff;
  --bg: #eef2ea;
  --ink: #1f2a20;
  --dim: #5b6a5b;
  --line: rgba(31, 42, 32, .12);
  --g: #4f8a3c;
  --amber: #e0a03a;
  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --r-lg: 36px;
  --r-md: 26px;
  color-scheme: light;
  background-color: var(--bg);
  background-image:
    radial-gradient(60% 40% at 8% 0%, rgba(224, 160, 58, .16), transparent 70%),
    radial-gradient(50% 40% at 100% 30%, rgba(79, 138, 60, .12), transparent 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-size: 18px;
}
.t-terrarium h1, .t-terrarium h2, .t-terrarium h3 { font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -.02em; font-weight: 650; }
.t-terrarium :focus-visible { outline-color: var(--g); }

/* Header */
.t-terrarium .top.solid { background: rgba(238, 242, 234, .82); }
.t-terrarium .nav { background: rgba(255, 255, 255, .72); border-color: var(--line); }
.t-terrarium .nav a { color: var(--dim); }
.t-terrarium .nav a:hover, .t-terrarium .nav a[aria-current="page"] { background: rgba(79, 138, 60, .12); color: var(--ink); }
.t-terrarium .nav .cta { background: var(--ink); color: #fff; }
.t-terrarium .nav .cta:hover { background: var(--g); color: #fff; }

/* Hero: an inset pane of glass */
.t-terrarium .gp-hero { margin: 84px var(--gut) 0; border-radius: 44px; height: clamp(520px, 80vh, 820px); color: #fff; box-shadow: 0 30px 80px -30px rgba(31, 42, 32, .45); }
.t-terrarium .gp-hero::before { background: linear-gradient(180deg, rgba(20, 32, 20, 0) 35%, rgba(20, 32, 20, .82) 100%); }
.t-terrarium .gp-hero h1 { font-weight: 700; font-size: clamp(56px, 9.4vw, 148px); letter-spacing: -.035em; line-height: .9; }
.t-terrarium .gp-hero .tagline { font-family: var(--f-display); font-style: italic; font-weight: 400; color: #f3f5ee; }
.t-terrarium .crumbs { color: #eef3e8; }
.t-terrarium .tag { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .35); color: #fff; font-family: var(--f-body); }
.t-terrarium .tag::before { background: #b9e08a; box-shadow: none; }

/* Buttons */
.t-terrarium .btn { background: #fff; border-color: var(--line); color: var(--ink); font-family: var(--f-body); font-weight: 700; }
.t-terrarium .btn:hover { background: #f6f8f3; }
.t-terrarium .btn .ar { background: rgba(79, 138, 60, .12); }
.t-terrarium .btn.primary { background: var(--g); color: #fff; }
.t-terrarium .btn.primary .ar { background: rgba(255, 255, 255, .2); }
.t-terrarium .btn.primary:hover { background: #3e7230; }
.t-terrarium .gp-hero .btn:not(.primary) { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); color: #fff; backdrop-filter: blur(8px); }

/* Facts: a floating white card */
.t-terrarium .facts-bar { border: 0; margin-top: -56px; position: relative; z-index: 2; }
.t-terrarium .facts-bar dl { background: #fff; border-radius: 28px; box-shadow: 0 18px 50px -24px rgba(31, 42, 32, .35); padding: 6px 12px; margin: 0 clamp(0px, 3vw, 40px); }
.t-terrarium .facts-bar div { padding: 18px 20px; }
.t-terrarium .facts-bar div + div { border-left: 1px dashed var(--line); }
.t-terrarium .facts-bar dd { font-family: var(--f-display); font-size: 21px; font-weight: 600; }
@media (max-width: 900px) { .t-terrarium .facts-bar div { border-bottom: 1px dashed var(--line); border-left: 0 !important; } }

/* Copy */
.t-terrarium .gp-sec h2 { font-weight: 650; }
.t-terrarium .gp-sec h2::after { content: ""; display: block; width: 46px; height: 46px; margin-top: 14px; border-radius: 0 60% 0 60%; background: linear-gradient(135deg, #8cc56c, var(--g)); transform: scale(.55); transform-origin: left; }
.t-terrarium .pitch .log { font-weight: 500; font-style: italic; letter-spacing: -.02em; }
.t-terrarium .pitch .log::first-letter { color: var(--g); font-style: normal; font-weight: 700; }
.t-terrarium .pitch .txt { color: #3d4a3d; }

/* Loop: leaves on a stem */
.t-terrarium .loop li { background: #fff; border: 0; border-radius: 26px; box-shadow: 0 10px 30px -18px rgba(31, 42, 32, .35); padding: 26px 22px; }
.t-terrarium .loop li::before { border-radius: 0 60% 0 60%; width: 38px; height: 38px; background: linear-gradient(135deg, #8cc56c, var(--g)); color: #fff; font-family: var(--f-display); }
.t-terrarium .loop li:not(:last-child)::after { background: var(--amber); height: 3px; border-radius: 3px; }
.t-terrarium .loop b { font-weight: 650; }

/* Gallery */
.t-terrarium .showcase figure { border-radius: 30px; box-shadow: 0 16px 40px -24px rgba(31, 42, 32, .5); }
.t-terrarium .showcase figcaption { background: rgba(255, 255, 255, .9); color: var(--ink); font-weight: 700; }

/* Features */
.t-terrarium .feat { background: #fff; border: 0; border-radius: 26px; padding: 24px; box-shadow: 0 10px 30px -20px rgba(31, 42, 32, .35); }
.t-terrarium .feat:hover { background: #fbfdf8; box-shadow: 0 0 0 2px rgba(79, 138, 60, .35); }
.t-terrarium .feat b { font-weight: 650; font-size: 21px; }
.t-terrarium .feat b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 0 60% 0 60%; background: var(--amber); vertical-align: .1em; }

/* Status */
.t-terrarium .status { border-top: 2px solid var(--ink); }
.t-terrarium .status div + div { border-left-style: dashed; }
.t-terrarium .status b { font-weight: 650; }

/* More + footer */
.t-terrarium .more-grid .tile { border-radius: 30px; }
.t-terrarium .more-grid .tile, .t-terrarium .more-grid .tile p { color: #fff; }
.t-terrarium .more-grid .tile p { color: #e9e6ee; }
.t-terrarium .sec-head h2 { color: var(--ink); }
.t-terrarium .foot { border-color: var(--line); }
.t-terrarium .more-grid .tile { background: #1f2a20; }