/* Cavebeer Entertainment - the studio's home page (GitHub Pages; no cookies, no third-party content).
   The look: a dark cave lit by a warm amber lamp. Every app card wears its own game's colours. */
:root {
  --cave: #14100c;
  --cave-2: #1d1712;
  --stone: #3a2f25;
  --amber: #f5a623;
  --amber-light: #ffd38a;
  --foam: #fff4dc;
  --text: #efe6d8;
  --text-dim: #b4a690;
  --max: 560px;
}

* { box-sizing: border-box; }

html { background: var(--cave); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(245, 166, 35, 0.22), rgba(245, 166, 35, 0) 62%),
    linear-gradient(180deg, var(--cave-2), var(--cave) 55%);
  color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* --- studio header --- */
.studio { text-align: center; padding: 44px 0 10px; }
.studio .emblem {
  width: 112px; height: 112px; display: block; margin: 0 auto 14px;
  filter: drop-shadow(0 10px 24px rgba(245, 166, 35, 0.22));
}
.studio h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--foam);
}
.studio h1 span { display: block; font-size: 15px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase;
                  color: var(--amber); margin-top: 8px; }
.studio p { margin: 14px auto 0; max-width: 34ch; color: var(--text-dim); text-wrap: balance; }

/* --- the app cards --- */
.label {
  margin: 34px 0 12px;
  font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 12px;
}
.label::before, .label::after { content: ""; flex: 1; height: 1px; background: var(--stone); }

.apps { display: grid; gap: 14px; }

.app {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px 14px 14px;
  border-radius: 22px;
  text-decoration: none;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.app:hover { transform: translateY(-2px); }
.app:active { transform: scale(0.985); }
.app img { width: 72px; height: 72px; border-radius: 17px; flex: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.app-text { flex: 1; min-width: 0; }
.app-name { display: block; font-size: 20px; font-weight: 900; line-height: 1.2; }
.app-line { display: block; font-size: 15px; line-height: 1.35; margin-top: 3px; }
.app-go { flex: none; font-size: 30px; font-weight: 700; line-height: 1; margin-right: 2px; }

/* Idle Monster Forge: dark fantasy, gold on deep ember brown */
.app-mf {
  background: radial-gradient(140% 120% at 0% 0%, #3a1f10 0%, #1f120a 55%, #150c08 100%);
  border: 1.5px solid #6b4a1e;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 224, 138, 0.12);
}
.app-mf .app-name { color: #ffe08a; text-shadow: 0 0 14px rgba(240, 193, 75, 0.35); }
.app-mf .app-line { color: #d6c3a6; }
.app-mf .app-go { color: #f0c14b; }

/* Idle Transport Corp: sunny yellow, navy ink */
.app-itc {
  background: linear-gradient(180deg, #ffd36b, #faba34);
  border: 1.5px solid #d99a2b;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 -4px 0 #d99a2b;
}
.app-itc .app-name { color: #33364d; }
.app-itc .app-line { color: #4a4d63; }
.app-itc .app-go { color: #33364d; }

/* --- footer --- */
footer {
  text-align: center;
  padding: 40px 16px 48px;
  color: var(--text-dim);
  font-size: 14px;
}
footer nav { margin-bottom: 10px; }
footer a { color: var(--amber-light); text-decoration: none; font-weight: 700; margin: 0 10px; }
footer a:hover { text-decoration: underline; }

/* --- the imprint --- */
.back { display: inline-block; margin: 22px 0 0; color: var(--amber-light); text-decoration: none; font-weight: 800; }
.doc { background: rgba(29, 23, 18, 0.85); border: 1px solid var(--stone); border-radius: 20px; padding: 6px 22px 18px;
       margin: 16px 0 0; }
.doc h1 { font-size: 28px; margin: 18px 0 2px; color: var(--foam); }
.doc h2 { font-size: 18px; margin: 22px 0 4px; color: var(--amber-light); }
.doc p { margin: 0 0 8px; }
.doc .soft { color: var(--text-dim); font-size: 15px; }
.doc a { color: var(--amber-light); word-break: break-word; }
.doc .block p { margin: 0; }