/* genesvstheworld.eu: the app menu's look (desktop/menu/index.html: its colours, the earth skin's shapes, Marles's bubble, the
   background world's darkening), then the site's own layout */
:root { --bg:#0e0b08; --panel:#17120d; --panel2:#1f1913; --line:#3a3027; --text:#efe6dc; --muted:#a3968a; --accent:#8fcf6a; --accent2:#5fa843; --danger:#ef476f; --warn:#ffd166; }
  :root {
    --rough-panel:polygon(0.0% 0.8px,4.5% 1.9px,9.1% 1.3px,13.6% 2.1px,18.2% 2.2px,22.7% 0.2px,27.3% 0.0px,31.8% 2.9px,36.4% 0.9px,40.9% 0.8px,45.5% 3.5px,50.0% 1.6px,54.5% 2.9px,59.1% 1.7px,63.6% 2.2px,68.2% 0.5px,72.7% 2.2px,77.3% 3.0px,81.8% 1.8px,86.4% 2.6px,90.9% 2.3px,95.5% 0.2px,100.0% 2.7px,calc(100% - 2.1px) 4.5%,calc(100% - 1.1px) 9.1%,calc(100% - 0.1px) 13.6%,calc(100% - 3.0px) 18.2%,calc(100% - 1.7px) 22.7%,calc(100% - 2.5px) 27.3%,calc(100% - 3.1px) 31.8%,calc(100% - 2.5px) 36.4%,calc(100% - 3.2px) 40.9%,calc(100% - 1.4px) 45.5%,calc(100% - 2.8px) 50.0%,calc(100% - 1.6px) 54.5%,calc(100% - 3.3px) 59.1%,calc(100% - 3.1px) 63.6%,calc(100% - 0.3px) 68.2%,calc(100% - 0.5px) 72.7%,calc(100% - 0.8px) 77.3%,calc(100% - 3.4px) 81.8%,calc(100% - 1.5px) 86.4%,calc(100% - 2.2px) 90.9%,calc(100% - 1.1px) 95.5%,100.0% calc(100% - 1.8px),95.5% calc(100% - 1.4px),90.9% calc(100% - 1.2px),86.4% calc(100% - 2.0px),81.8% calc(100% - 2.0px),77.3% calc(100% - 3.2px),72.7% calc(100% - 2.4px),68.2% calc(100% - 3.3px),63.6% calc(100% - 3.0px),59.1% calc(100% - 3.5px),54.5% calc(100% - 2.3px),50.0% calc(100% - 0.6px),45.5% calc(100% - 3.0px),40.9% calc(100% - 3.4px),36.4% calc(100% - 3.2px),31.8% calc(100% - 2.0px),27.3% calc(100% - 2.5px),22.7% calc(100% - 0.7px),18.2% calc(100% - 2.9px),13.6% calc(100% - 2.0px),9.1% calc(100% - 1.0px),4.5% calc(100% - 0.2px),0.0% calc(100% - 3.0px),3.5px 95.5%,0.3px 90.9%,2.8px 86.4%,1.4px 81.8%,0.5px 77.3%,1.0px 72.7%,2.7px 68.2%,3.1px 63.6%,0.2px 59.1%,2.2px 54.5%,0.2px 50.0%,2.5px 45.5%,1.2px 40.9%,3.1px 36.4%,3.4px 31.8%,1.8px 27.3%,3.5px 22.7%,1.1px 18.2%,0.3px 13.6%,2.1px 9.1%,0.1px 4.5%);
    --rough-btn:polygon(0.0% 0.5px,7.1% 1.4px,14.3% 1.4px,21.4% 1.7px,28.6% 0.4px,35.7% 0.5px,42.9% 0.3px,50.0% 0.5px,57.1% 1.5px,64.3% 0.3px,71.4% 1.1px,78.6% 0.4px,85.7% 0.6px,92.9% 0.9px,100.0% 1.7px,calc(100% - 1.2px) 7.1%,calc(100% - 0.0px) 14.3%,calc(100% - 0.6px) 21.4%,calc(100% - 0.3px) 28.6%,calc(100% - 1.7px) 35.7%,calc(100% - 1.6px) 42.9%,calc(100% - 1.6px) 50.0%,calc(100% - 1.7px) 57.1%,calc(100% - 1.5px) 64.3%,calc(100% - 1.9px) 71.4%,calc(100% - 1.6px) 78.6%,calc(100% - 0.5px) 85.7%,calc(100% - 1.7px) 92.9%,100.0% calc(100% - 1.0px),92.9% calc(100% - 1.5px),85.7% calc(100% - 1.1px),78.6% calc(100% - 0.9px),71.4% calc(100% - 0.7px),64.3% calc(100% - 0.9px),57.1% calc(100% - 0.6px),50.0% calc(100% - 0.2px),42.9% calc(100% - 1.6px),35.7% calc(100% - 1.6px),28.6% calc(100% - 2.0px),21.4% calc(100% - 1.4px),14.3% calc(100% - 1.1px),7.1% calc(100% - 1.5px),0.0% calc(100% - 0.3px),1.4px 92.9%,0.9px 85.7%,0.4px 78.6%,0.4px 71.4%,1.0px 64.3%,0.5px 57.1%,0.9px 50.0%,1.2px 42.9%,0.8px 35.7%,0.3px 28.6%,1.0px 21.4%,0.5px 14.3%,0.5px 7.1%);
    --rough-btn2:polygon(0.0% 1.0px,7.1% 1.6px,14.3% 1.9px,21.4% 0.6px,28.6% 1.5px,35.7% 1.4px,42.9% 1.3px,50.0% 0.2px,57.1% 0.1px,64.3% 0.8px,71.4% 1.5px,78.6% 0.5px,85.7% 1.0px,92.9% 0.6px,100.0% 1.7px,calc(100% - 1.9px) 7.1%,calc(100% - 0.8px) 14.3%,calc(100% - 2.0px) 21.4%,calc(100% - 0.1px) 28.6%,calc(100% - 1.6px) 35.7%,calc(100% - 1.8px) 42.9%,calc(100% - 0.3px) 50.0%,calc(100% - 1.4px) 57.1%,calc(100% - 1.1px) 64.3%,calc(100% - 1.9px) 71.4%,calc(100% - 0.4px) 78.6%,calc(100% - 1.1px) 85.7%,calc(100% - 1.8px) 92.9%,100.0% calc(100% - 1.3px),92.9% calc(100% - 0.6px),85.7% calc(100% - 0.2px),78.6% calc(100% - 1.9px),71.4% calc(100% - 0.9px),64.3% calc(100% - 2.0px),57.1% calc(100% - 0.3px),50.0% calc(100% - 1.6px),42.9% calc(100% - 1.6px),35.7% calc(100% - 1.8px),28.6% calc(100% - 0.0px),21.4% calc(100% - 0.7px),14.3% calc(100% - 0.1px),7.1% calc(100% - 1.5px),0.0% calc(100% - 0.7px),1.9px 92.9%,0.7px 85.7%,1.5px 78.6%,1.7px 71.4%,0.5px 64.3%,1.1px 57.1%,1.9px 50.0%,1.1px 42.9%,0.7px 35.7%,0.5px 28.6%,1.6px 21.4%,0.4px 14.3%,1.2px 7.1%);
    --gold:linear-gradient(#dfb374, #c9995a); --goldInk:#2a1a0c; --terra:linear-gradient(#c97a3e, #9a5527); --clayInk:#e0a96a; }
  .mquote { display:flex; gap:12px; align-items:flex-start; width:min(460px, calc(100vw - 32px)); }
  .mquote:empty { display:none; }
  .mquote .mface { flex:none; display:flex; flex-direction:column; align-items:center; } .mquote .mface svg { width:76px; height:76px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
  .mname { display:block; margin-top:3px; font-size:11px; line-height:1.2; white-space:nowrap; text-align:center; color:var(--muted); } /* (his name under him, asked 2026-10-20) */
  .mquote .mbubble { position:relative; background:#fffdf8; color:#3b2a1a; border-radius:12px; padding:10px 13px; font-size:13.5px; line-height:1.45; box-shadow:0 4px 14px rgba(0,0,0,.45); animation:mqIn .6s ease-out; }
  .mquote .mbubble::before { content:''; position:absolute; left:-8px; top:24px; border:8px solid transparent; border-left:0; border-right-color:#fffdf8; }
  .mquote q { font-style:italic; quotes:'“' '”'; } .mquote cite { display:block; margin-top:6px; font-style:normal; font-size:12px; color:#7a5a3a; }
  @keyframes mqIn { from { opacity:0; transform:translateY(6px); } }
  /* Marles's hands and talking (public/index.html's) */
  .marles .mf-hand-l, .marles .mf-hand-r, .marles .mf-mouth { transform-box:fill-box; }
  .marles .mf-hand-l { transform-origin:10% 20%; animation:mfHandL 2.8s ease-in-out infinite; }
  .marles .mf-hand-r { transform-origin:90% 20%; animation:mfHandR 2.8s ease-in-out -1.4s infinite; }
  .talking .marles .mf-hand-r { animation:mfGesture 1s ease-in-out infinite; }
  .talking .marles .mf-mouth { transform-origin:50% 0; animation:mfTalk .2s ease-in-out infinite alternate; }
  @keyframes mfHandL { 50% { transform:translateY(-.8px) rotate(-5deg); } }
  @keyframes mfHandR { 50% { transform:translateY(-.8px) rotate(5deg); } }
  @keyframes mfGesture { 40% { transform:translate(-1px, -5px) rotate(18deg); } 70% { transform:translate(-.5px, -3px) rotate(8deg); } }
  @keyframes mfTalk { to { transform:scaleY(2.3); } }
  @media (prefers-reduced-motion: reduce) { .marles * { animation:none !important; } }
  #bg { position:fixed; inset:0; z-index:0; } #bg[hidden] { display:none; } .view { z-index:1; }
  #bg canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
  #bg::after { content:""; position:absolute; inset:0; pointer-events:none; /* (darkened, the menu reads first: darker still behind it in the middle, and at the edges) */
    background:radial-gradient(farthest-corner at 50% 50%, rgba(9,6,4,.35) 15%, rgba(9,6,4,.1) 45%, rgba(9,6,4,.55) 100%), rgba(9,6,4,.58); }
/* ---------- the website's own layout (the pieces above are the app menu's, desktop/menu/index.html) ---------- */
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--text); font:16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height:100vh; display:flex; flex-direction:column; }
a { color:#e0a96a; } a:hover { color:#f0d3a8; }
h1 { margin:0 0 6px; } h1 img { display:block; width:min(760px, 88vw); height:auto; margin:0 auto; }
h2 { font-size:24px; font-weight:600; margin:0 0 10px; color:#f0d3a8; text-shadow:0 2px 3px rgba(0,0,0,.6); }
.muted { color:var(--muted); } .small { font-size:13px; }
main, .bar, .foot { position:relative; z-index:1; }
main { flex:1; width:min(1120px, 100%); margin:0 auto; padding:0 max(16px, env(safe-area-inset-left, 0px)) 40px max(16px, env(safe-area-inset-right, 0px)); }
.view { display:none; } .view.on { display:block; }
/* the top bar: the mark, the tabs, Play */
.bar { display:flex; align-items:center; gap:16px; padding:12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); background:rgba(9,6,4,.55); border-bottom:1px solid rgba(0,0,0,.5); backdrop-filter:blur(4px); position:sticky; top:0; }
.mark { display:flex; align-items:center; gap:9px; color:#f0d3a8; text-decoration:none; font-weight:700; letter-spacing:.3px; white-space:nowrap; } .mark img { border-radius:6px; }
.tabs { display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.tabs button, .tabs a.tab { font:inherit; font-size:14px; color:var(--muted); background:rgba(0,0,0,.25); border:1px solid rgba(0,0,0,.55); padding:6px 13px; cursor:pointer; text-decoration:none; clip-path:var(--rough-btn); }
.tabs button:hover, .tabs a.tab:hover { color:var(--text); filter:brightness(1.15); }
.tabs button.on { background:var(--gold); color:var(--goldInk); border-color:transparent; box-shadow:inset 0 1px 0 #f2cf96, inset 0 -2px 0 #9c7240; font-weight:600; }
/* buttons, as the menu's */
.btn { display:inline-block; font:inherit; font-size:15px; color:var(--text); text-decoration:none; cursor:pointer; background:rgba(0,0,0,.3); border:1px solid rgba(0,0,0,.55); padding:10px 18px; clip-path:var(--rough-btn2); }
.btn:hover { border-color:#8a6a46; filter:brightness(1.1); color:var(--text); }
.btn.go { background:var(--terra); color:#fff3e2; border-color:transparent; box-shadow:inset 0 1px 0 #e6a36a, inset 0 -3px 0 #5d3014; text-shadow:0 -1px 0 rgba(0,0,0,.4); font-weight:700; letter-spacing:.4px; }
.btn.go:hover { color:#fff; }
.btn.big { font-size:17px; padding:14px 26px; } .btn.small { font-size:13.5px; padding:6px 13px; white-space:nowrap; }
.btn[aria-disabled="true"] { opacity:.5; pointer-events:none; }
.chip { font-size:12px; padding:2px 9px; border:1px solid #8a6a46; color:#e8c48a; background:rgba(0,0,0,.3); white-space:nowrap; }
.chip.live { color:#dfb374; border-color:#dfb374; } .chip.bad { color:#ff9b8a; border-color:#b0503c; }
/* the earth skin's panel (cracked clay in a rim of dry earth), on every box of the site */
:is(.panel, .choice, .card) {
  background:url(/game/tex/ui/cracks.svg) 0 0/260px 260px padding-box, url(/game/tex/ui/noise.svg) 0 0/180px 180px padding-box, radial-gradient(circle at 30% 20%, #5a4129, #3b2a1a 70%) padding-box, url(/game/tex/ground/dry-earth.webp) 0 0/460px 460px border-box;
  border:6px solid transparent; clip-path:var(--rough-panel); box-shadow:inset 0 0 0 1px #1d1107, inset 0 2px 4px rgba(0,0,0,.55), inset 0 0 30px rgba(0,0,0,.3); }
.panel { padding:22px 26px; margin:22px 0; } .panel p { margin:0; color:#e2d3c0; max-width:72ch; }
/* the hero */
.hero { min-height:calc(100vh - 140px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 0 30px; }
.hero .tag { font-size:19px; color:#d9c7ad; max-width:44ch; margin:6px 0 30px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.soon { margin:22px 0 0; color:var(--muted); font-size:14px; display:flex; gap:9px; align-items:center; }
/* the four, as the menu's choices */
.choices { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin:22px 0; }
@media (max-width: 900px) { .choices { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 520px) { .choices { grid-template-columns:1fr; } }
.choice { padding:24px 20px 20px; } .choice .ic { font-size:32px; line-height:1; }
.choice b { display:block; font-size:20px; margin:12px 0 4px; letter-spacing:.5px; color:#f0d3a8; } .choice span { color:#c9b294; font-size:14.5px; }
/* pictures */
.shots { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width: 800px) { .shots { grid-template-columns:1fr; } }
.shots figure { margin:0; padding:10px; } .shots img { display:block; width:100%; height:auto; max-width:100%; }
.shots figcaption { color:#c9b294; font-size:14px; padding:10px 6px 2px; }
.facts ul { margin:0; padding-left:20px; color:#e2d3c0; } .facts li { margin:7px 0; } .facts b { color:#f0d3a8; }
/* the server list */
#servers .head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:34px 0 16px; } #servers .head h2 { margin:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.card { padding:16px 18px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.card .name { font-size:18px; font-weight:600; color:#f0d3a8; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.card .meta { color:#c9b294; font-size:14px; } .card .meta.life { color:#d9c7ad; display:flex; flex-wrap:wrap; gap:2px 14px; } .card .meta.life span { white-space:nowrap; }
.card .acts { margin-top:auto; padding-top:6px; display:flex; }
/* Marles, bottom left of the first screen, as in the menu */
.hero { position:relative; } #quote { position:absolute; left:0; bottom:24px; width:360px; text-align:left; } /* (in the first screen only: it scrolls away with it) */ #quote .mbubble { font-size:12.5px; }
@media (max-width: 899px), (max-height: 700px) { #quote { display:none; } }
.foot { display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap; padding:18px 16px 26px; color:var(--muted); font-size:13.5px; }
.studio { display:flex; align-items:center; gap:8px; color:var(--muted); text-decoration:none; } .studio:hover { color:var(--text); }
@media (max-width: 560px) { .mark span { display:none; } .tabs button span, .tabs a.tab span { display:none; } }