/* A game-like entrance: the room is the hero, controls stay legible. */
.home:before {
  background: linear-gradient(90deg, #06171ccd 0%, #06171c8a 27%, transparent 57%),
    linear-gradient(0deg, #06171ce8 0%, transparent 25%);
}
.home #home-screen { overflow: hidden; }
.home-top { top: 12px; left: 7%; right: 5%; }
.home-top button { border: 1px solid #b9ddd353; border-radius: 30px; padding: 9px 15px; background: #0a252a8c; backdrop-filter: blur(12px); }
.home-copy { left: 7%; top: 33%; max-width: 460px; }
.home-copy h1 { font-size: clamp(46px, 5vw, 78px); line-height: 1; margin: 0 0 28px; text-shadow: 0 8px 28px #06171ca6; }
.home-copy em { color: #a6eee0; }
.home-actions { gap: 10px; }
.home-actions button { font-weight: 650; box-shadow: 0 12px 32px #0213185e; }
.home-preview { left: 64%; top: auto; bottom: 14%; transform: translateX(-10%); border-radius: 40px; padding: 4px; background: #061c21aa; backdrop-filter: blur(14px); }
.preview-tabs { margin: 0; }
.preview-tabs button { font-size: 12px; }
.home-bottom { bottom: 22px; left: 7%; right: 7%; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.home-bottom .creator-credit {
  order: -1;
  min-width: 0;
  gap: 13px;
  padding: 10px 16px 10px 10px;
  border: 1px solid #e1c89070;
  border-radius: 18px;
  background: linear-gradient(120deg, #0b292bdc, #102a2cb5);
  box-shadow: 0 12px 35px #0113188f, inset 0 1px #ffffff21;
  backdrop-filter: blur(14px);
}
.home-bottom .creator-avatar { width: 72px; height: 72px; border-width: 3px; }
.home-bottom .creator-credit strong { color: #f4efe0; font-size: 14px; font-weight: 700; }
.home-bottom .creator-credit-details > span { color: #d7cfbb; }
.home-offline { color: #b3cbca; font: 10px monospace; text-align: right; letter-spacing: .4px; }
@media (max-width: 800px), (max-width: 1000px) and (max-height: 500px) {
  .home:before { background: linear-gradient(180deg, #06171cc9 0%, #06171c1c 27%, #06171c24 49%, #06171cee 100%); }
  .home #home-screen { overflow: hidden; }
  .home-top { top: 2px; left: 20px; right: 18px; }
  .home-copy { left: 20px; right: 20px; top: 13%; max-width: 380px; }
  .home-copy h1 { font-size: clamp(35px, 9vw, 52px); margin: 0; }
  .home-actions { position: fixed; left: 18px; right: 18px; bottom: calc(106px + env(safe-area-inset-bottom)); margin: 0; z-index: 2; }
  .home-actions button { font-size: 13px; min-height: 52px; }
  .home-preview { position: fixed; top: auto; bottom: calc(174px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 3px; }
  .preview-tabs button { min-height: 39px; padding: 9px 12px; font-size: 11px; }
  .home-bottom { position: fixed; bottom: calc(13px + env(safe-area-inset-bottom)); left: 18px; right: 18px; display: flex; align-items: center; gap: 5px; }
  .home-bottom .creator-credit { font-size: 10px; gap: 10px; padding: 8px 11px 8px 8px; }
  .home-bottom .creator-credit strong { font-size: 11px; }
  .home-bottom .creator-credit-links { display: flex; font-size: 9px; }
  .home-bottom .creator-credit-links a:first-child { display: none; }
  .home-bottom .creator-avatar { width: 60px; height: 60px; }
  .home-offline { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .home-copy { top: 21%; left: 5%; }
  .home-copy h1 { font-size: 34px; }
  .home-actions { position: static; margin-top: 16px; }
  .home-actions button { min-height: 42px; padding: 9px 12px; }
  .home-preview { left: 73%; bottom: 23%; }
  .home-bottom { display: flex; left: 5%; right: 5%; }
}
@media (max-width: 390px) and (min-height: 501px) {
  .preview-tabs button span { display: none; }
  .preview-tabs button { font-size: 17px; min-width: 47px; }
}

/* Shared cultural collection controls, comfortably sized for touch. */
.culture-tabs{display:flex;gap:8px;padding:10px 16px;flex-wrap:wrap;border-bottom:1px solid #ffffff18}
.culture-tabs button{flex:1;min-height:44px;min-width:120px}
.culture-tabs button[aria-pressed="true"]{background:#a0e8df;color:#103038;border-color:#a0e8df}