/* Living World consumer site — v2 design pass.
   References: AI Dungeon Discover (card anatomy, genre chips, stats footers, amber CTA),
   NovelAI (serif display gravitas, deep violet-black), Character.AI (sidebar structure,
   handle/plays metadata), Hidden Door (type personality). One system: near-black canvas,
   amber = play, green = certified/live, serif titles for story gravitas. */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0b0b10; --panel: #14141b; --card: #17171f; --card-hi: #1e1e28;
  --text: #f0eff4; --dim: #9a9aa8; --line: #26262f; --line-hi: #34344a;
  --amber: #f5b942; --amber-deep: #e2a52e; --gold: #f5b942; --green: #6fe39a; --violet: #8b6ef0;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
}
html, body { height: 100%; background: var(--bg); color: var(--text); font: 14.5px/1.5 var(--sans); }
body { display: flex; }
::selection { background: rgba(245, 185, 66, .3); }

/* ---- sidebar ---- */
#side { width: 250px; min-width: 250px; height: 100vh; position: sticky; top: 0;
  background: linear-gradient(180deg, #0d0d13, #0b0b10); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 20px 14px; gap: 6px; z-index: 10; }
.logo { font: 700 21px var(--serif); letter-spacing: .01em; padding: 2px 10px 16px; }
.logo em { color: var(--amber); font-style: normal; }
.create { background: var(--text); color: #101014; border: 0; border-radius: 24px; font: 700 14.5px var(--sans);
  padding: 12px 20px; width: 138px; cursor: pointer; margin: 0 6px 14px; transition: transform .15s, box-shadow .15s; }
.create:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255, 255, 255, .12); }
.nav { display: flex; align-items: center; gap: 12px; color: var(--text);
  text-decoration: none; padding: 10px 12px; border-radius: 12px; font-weight: 600; font-size: 14px; }
.nav span { opacity: .75; width: 18px; text-align: center; }
.nav.active { background: var(--panel); box-shadow: inset 2px 0 0 var(--amber); }
.nav.dim { color: var(--dim); font-weight: 500; }
.nav:hover { background: var(--panel); }
.recentsLabel { color: var(--dim); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin: 16px 10px 6px; }
#recents { overflow-y: auto; }
.recent { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.recent:hover { background: var(--panel); }
.recent img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.recent .t { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sideFoot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; }
.acct { display: flex; gap: 10px; align-items: center; padding: 4px 8px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), #5a3fb8);
  display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.acctName { font-weight: 650; font-size: 13.5px; }
.acctSub { color: var(--dim); font-size: 11.5px; }

/* ---- main ---- */
#main { flex: 1; padding: 22px 36px 60px; max-width: 1560px; min-width: 0; }
#top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
#top h1 { font: 640 27px var(--serif); letter-spacing: .005em; }
#search { width: min(440px, 38vw); background: var(--panel); border: 1px solid var(--line);
  color: var(--text); border-radius: 22px; padding: 11px 20px; font: 14px var(--sans); outline: none;
  transition: border-color .15s; }
#search:focus { border-color: var(--line-hi); }
#search::placeholder { color: var(--dim); }

/* genre chips (AI Dungeon pattern) */
#chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 20px; }
.chipF { background: var(--panel); border: 1px solid var(--line); color: var(--dim); cursor: pointer;
  border-radius: 18px; padding: 7px 14px; font: 650 11.5px var(--sans); letter-spacing: .07em; text-transform: uppercase;
  transition: all .15s; }
.chipF:hover { color: var(--text); border-color: var(--line-hi); }
.chipF.on { background: var(--text); color: #101014; border-color: var(--text); }

/* ---- hero: cinematic, rotating ---- */
.hero { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 30px;
  min-height: 300px; cursor: pointer; border: 1px solid var(--line); isolation: isolate; }
.hero .heroArt { position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: opacity .6s, transform 8s ease-out; z-index: -2; }
.hero:hover .heroArt { transform: scale(1.04); }
.hero .heroShade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8, 8, 12, .93) 22%, rgba(8, 8, 12, .55) 55%, rgba(8, 8, 12, .12) 100%); }
.hero .heroText { position: relative; padding: 44px 46px; max-width: 640px; display: flex;
  flex-direction: column; gap: 12px; justify-content: center; min-height: 300px; }
.hero .k { color: var(--amber); font: 700 11.5px var(--sans); letter-spacing: .18em; }
.hero h3 { font: 640 40px/1.08 var(--serif); letter-spacing: .005em; }
.hero p { color: #cfcfda; font-size: 15.5px; max-width: 520px; }
.hero .heroMeta { display: flex; gap: 14px; align-items: center; color: var(--dim); font-size: 12.5px; }
.hero .heroMeta .cert { color: var(--green); }
.hero .heroBtns { display: flex; gap: 12px; margin-top: 10px; align-items: center; }
.hero .dots { position: absolute; right: 24px; bottom: 20px; display: flex; gap: 7px; }
.hero .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3);
  cursor: pointer; transition: all .2s; }
.hero .dot.on { background: var(--amber); width: 20px; border-radius: 4px; }

/* buttons */
.play { display: inline-flex; align-items: center; gap: 8px; background: var(--amber); color: #1a1205;
  border: 0; font: 800 15px var(--sans); border-radius: 24px; padding: 12px 28px; cursor: pointer;
  text-decoration: none; width: fit-content; transition: transform .15s, box-shadow .15s, filter .15s; }
.play:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 8px 26px rgba(245, 185, 66, .28); }
.play.disabled { background: var(--panel); color: var(--dim); box-shadow: none; cursor: default; }
.ghostBtn { color: var(--text); text-decoration: none; font: 600 13.5px var(--sans); opacity: .85;
  border: 1px solid var(--line-hi); padding: 11px 20px; border-radius: 24px; transition: all .15s; }
.ghostBtn:hover { opacity: 1; border-color: var(--dim); }

/* ---- rows + cards (AI Dungeon anatomy: art-top, stats footer) ---- */
.rowTitle { font: 640 20px var(--serif); margin: 30px 0 14px; display: flex; align-items: baseline; gap: 10px; }
.rowTitle span { color: var(--dim); font: 500 13px var(--sans); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.card { background: var(--card); border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: transform .18s, border-color .18s, box-shadow .18s; animation: cardIn .4s ease both; }
.card:hover { transform: translateY(-3px); border-color: var(--line-hi); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.card .artWrap { position: relative; aspect-ratio: 5 / 3; overflow: hidden; }
.card .artWrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.card:hover .artWrap img { transform: scale(1.05); }
.badge { position: absolute; top: 10px; left: 10px; font: 800 10px var(--sans); letter-spacing: .09em;
  border-radius: 7px; padding: 4px 9px; backdrop-filter: blur(6px); }
.badge.live { background: rgba(20, 40, 28, .8); color: var(--green); border: 1px solid rgba(111, 227, 154, .35); }
.badge.soon { background: rgba(42, 34, 14, .8); color: var(--amber); border: 1px solid rgba(245, 185, 66, .35); }
.card .body { padding: 13px 15px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card .cTitle { font: 640 17px var(--serif); letter-spacing: .005em; }
.card .cHandle { color: var(--dim); font-size: 11.5px; }
.card .cDesc { color: #b9b9c6; font-size: 12.8px; line-height: 1.45; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .cFoot { display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  padding-top: 10px; color: var(--dim); font-size: 12px; }
.card .cStats { display: flex; gap: 12px; align-items: center; }
.card .cPlayBtn { font: 700 11.5px var(--sans); letter-spacing: .06em; color: var(--amber);
  border: 1px solid rgba(245, 185, 66, .4); border-radius: 15px; padding: 5px 13px; }
.card:hover .cPlayBtn { background: var(--amber); color: #1a1205; }
.card .cPlayBtn.soonTxt { color: var(--dim); border-color: var(--line); }

/* ---- dev band ---- */
.devBand { display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: linear-gradient(115deg, #131c15, #101521 70%); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px 34px; margin-top: 44px; }
.devBand .k { color: var(--green); font: 700 11px var(--sans); letter-spacing: .16em; margin-bottom: 8px; }
.devBand h3 { font: 640 24px var(--serif); margin-bottom: 6px; }
.devBand p { color: var(--dim); max-width: 640px; font-size: 14px; }
.devActions { display: flex; flex-direction: column; gap: 10px; align-items: center; flex-shrink: 0; }
.devDocs { color: var(--text); text-decoration: none; font-size: 13.5px; opacity: .8; }
.devDocs:hover { opacity: 1; }

#foot { color: var(--dim); font-size: 12.5px; margin-top: 46px; border-top: 1px solid var(--line);
  padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---- modal ---- */
#overlay { position: fixed; inset: 0; background: rgba(5, 5, 8, .72); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 50; }
#modal { width: min(700px, 92vw); max-height: 90vh; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line-hi); border-radius: 20px; position: relative; animation: modalIn .22s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; } }
#modalClose { position: absolute; top: 14px; right: 16px; background: rgba(10, 10, 14, .6); border: 0;
  color: #ddd; font-size: 15px; cursor: pointer; border-radius: 50%; width: 32px; height: 32px; z-index: 2; }
#modal .mHead { position: relative; }
#modal .mArt { width: 100%; aspect-ratio: 5 / 2.4; object-fit: cover; display: block; }
#modal .mShade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(20, 20, 27, .96) 96%); }
#modal .mTitleRow { position: absolute; left: 26px; right: 26px; bottom: 14px; }
#modal h3 { font: 640 28px var(--serif); }
#modal .mHandle { color: var(--dim); font-size: 12.5px; margin-top: 2px; }
#modal .mBody { padding: 18px 26px 26px; }
#modal p { color: #c9c9d6; margin-bottom: 14px; font-size: 14px; }
#modal .cert { color: var(--green); font-size: 12.5px; margin-bottom: 14px; }
#modal .sayLabel { color: var(--dim); font: 700 10.5px var(--sans); letter-spacing: .12em; margin-bottom: 8px; }
#modal .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
#modal .chip { background: var(--card); border: 1px solid var(--line); color: #d8d8e4;
  font-size: 13px; border-radius: 16px; padding: 7px 13px; }
#modal .mAgent { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px;
  color: var(--dim); font-size: 12.5px; }
#modal .mAgent b { color: var(--text); }
#modal code { background: var(--card); border-radius: 6px; padding: 2px 7px; font-size: 12px; }
[hidden] { display: none !important; }

@media (max-width: 860px) {
  #side { display: none; }
  #main { padding: 18px 16px 50px; }
  .hero .heroText { padding: 28px 24px; }
  .hero h3 { font-size: 30px; }
  .devBand { flex-direction: column; align-items: flex-start; }
}

/* ---- the Architect chat (Create) ---- */
.archWrap { display: flex; flex-direction: column; height: min(72vh, 640px); }
.archHead { display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 14px; border-bottom: 1px solid var(--line); }
.archHead h3 { font: 640 24px var(--serif); }
.archSub { color: var(--dim); font-size: 12.5px; margin-top: 3px; }
.archNew { background: none; border: 1px solid var(--line-hi); color: var(--dim);
  border-radius: 16px; padding: 5px 12px; font: 600 12px var(--sans); cursor: pointer; }
.archNew:hover { color: var(--text); border-color: var(--dim); }
.archLog { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex;
  flex-direction: column; gap: 10px; }
.aMsg { max-width: 82%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap;
  font-size: 14px; line-height: 1.55; animation: cardIn .25s ease both; }
.aMsg.user { align-self: flex-end; background: var(--amber); color: #171204;
  border-bottom-right-radius: 4px; font-weight: 500; }
.aMsg.architect { align-self: flex-start; background: var(--card-hi);
  border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.aMsg.thinking { align-self: flex-start; color: var(--dim); font-size: 12px;
  font-style: italic; background: none; padding: 2px 6px; border-left: 2px solid var(--line-hi); }
.aMsg.thinking::before { content: "✦ "; color: var(--violet); }
.aMsg.thinking.done { opacity: .45; max-height: 38px; overflow: hidden; }
.aMsg.error { align-self: flex-start; background: rgba(255, 90, 90, .12);
  border: 1px solid rgba(255, 90, 90, .35); color: #ff9d9d; }
.archStatus { padding: 6px 24px 2px; color: var(--green); font-size: 12.5px;
  animation: pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot { 50% { opacity: .55; } }
.archForm { display: flex; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid var(--line); }
.archForm input { flex: 1; background: var(--card); border: 1px solid var(--line-hi);
  border-radius: 22px; padding: 11px 18px; color: var(--text); font: 14px var(--sans); }
.archForm input:focus { outline: none; border-color: var(--amber); }
.archForm button { background: var(--amber); border: 0; border-radius: 22px; color: #171204;
  font: 700 13.5px var(--sans); padding: 0 22px; cursor: pointer; }
.archForm button:disabled { opacity: .5; cursor: default; }
.editArch { background: none; border: 1px solid var(--line-hi); color: var(--amber);
  border-radius: 16px; padding: 6px 14px; font: 600 12.5px var(--sans); cursor: pointer; margin-left: 8px; }
.editArch:hover { border-color: var(--amber); }

/* unsaved guest worlds */
.badge.unsav { background: var(--amber); color: #171204; }

/* header dev link */
.devLink { color: var(--amber); font: 600 13.5px var(--sans); text-decoration: none;
  border: 1px solid var(--line-hi); border-radius: 18px; padding: 8px 16px; white-space: nowrap;
  transition: border-color .15s; }
.devLink:hover { border-color: var(--amber); }