
#legacy-builders-app{
  --ink:#07111f;
  --navy:#09182c;
  --blue:#1478d4;
  --sky:#56c8ff;
  --gold:#ffc83d;
  --orange:#ff8a34;
  --green:#50c878;
  --purple:#9a68e8;
  --cream:#fff8e7;
  --muted:#b9c7da;
  --card:#10233d;
  --card2:#162e4d;
  --line:rgba(255,255,255,.12);
  --shadow:0 20px 55px rgba(0,0,0,.38);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--cream);
  width:100%;
  background:#06111f;
  isolation:isolate;
}
#legacy-builders-app *{box-sizing:border-box}
#legacy-builders-app button,#legacy-builders-app a{font:inherit}
#legacy-builders-app button{border:0}
#legacy-builders-app .hidden{display:none!important}
#legacy-builders-app .lb-shell{min-height:100dvh;background:linear-gradient(180deg,#08213d,#07111f)}
#legacy-builders-app .screen{animation:lbRise .38s ease both}
@keyframes lbRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes lbGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,200,61,0)}50%{box-shadow:0 0 0 9px rgba(255,200,61,.08)}}

/* Home */
#legacy-builders-app .lb-home{
  min-height:100dvh;
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#071425;
}
#legacy-builders-app .lb-home-art{
  position:absolute;inset:0;
  background:url('legacy-builders-world.png') center 18%/cover no-repeat;
  transform:scale(1.02);
}
#legacy-builders-app .lb-home-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,14,28,.08) 0%,rgba(4,14,28,.2) 34%,rgba(4,14,28,.96) 72%,#07111f 100%),
    linear-gradient(90deg,rgba(2,10,20,.55),transparent 70%);
}
#legacy-builders-app .lb-home-content{
  position:relative;z-index:1;width:100%;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
  text-align:center;
}
#legacy-builders-app .lb-brand-chip,
#legacy-builders-app .lb-book-chip{
  display:inline-flex;padding:7px 11px;border-radius:999px;
  background:rgba(6,17,31,.72);border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(10px);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
#legacy-builders-app .lb-logo-mark{
  width:58px;height:58px;border-radius:18px;margin:14px auto 10px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--gold),var(--orange));
  color:#19223a;font:900 1.25rem Georgia,serif;
  border:3px solid rgba(255,255,255,.8);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  animation:lbFloat 4s ease-in-out infinite;
}
#legacy-builders-app h1{
  margin:0;text-transform:uppercase;line-height:.82;
  font:900 clamp(3.15rem,15vw,5.8rem)/.82 Georgia,"Times New Roman",serif;
  text-shadow:0 5px 0 #39270b,0 10px 28px rgba(0,0,0,.7);
  color:#fff;
}
#legacy-builders-app h1 span{color:var(--gold)}
#legacy-builders-app .lb-tagline{margin:14px 0 10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;font-size:.76rem}
#legacy-builders-app .lb-book-chip{color:var(--gold)}
#legacy-builders-app .account-panel{
  display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  width:min(100%,560px);margin:16px auto 12px;padding:12px;
  background:rgba(9,24,44,.88);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;text-align:left;backdrop-filter:blur(12px);box-shadow:var(--shadow);
}
#legacy-builders-app .account-avatar{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--purple),#6138a8);font-size:1.25rem
}
#legacy-builders-app .account-copy small{display:block;color:var(--sky);font-weight:800;text-transform:uppercase;font-size:.65rem;letter-spacing:.09em}
#legacy-builders-app .account-copy strong{display:block;font-size:1rem}
#legacy-builders-app .account-copy p{margin:2px 0 0;color:var(--muted);font-size:.72rem;line-height:1.25}
#legacy-builders-app .account-actions{display:flex;gap:6px}
#legacy-builders-app .account-actions .btn{
  width:38px;height:38px;min-width:0;padding:0;border-radius:12px;font-size:0;
  display:grid;place-items:center;background:#173153;color:#fff;text-decoration:none
}
#legacy-builders-app .account-actions .btn::before{content:"↗";font-size:1rem}
#legacy-builders-app .lb-main-actions{display:grid;gap:10px;width:min(100%,560px);margin:0 auto}
#legacy-builders-app .lb-action{
  width:100%;min-height:64px;padding:10px 15px;border-radius:17px;
  display:flex;align-items:center;gap:13px;text-align:left;color:#fff;
  border:2px solid rgba(255,255,255,.25);box-shadow:0 10px 0 rgba(2,8,18,.38),0 18px 35px rgba(0,0,0,.25);
  cursor:pointer;transition:.16s ease
}
#legacy-builders-app .lb-action:active{transform:translateY(4px);box-shadow:0 6px 0 rgba(2,8,18,.38)}
#legacy-builders-app .lb-action:disabled{opacity:.42;filter:grayscale(.7)}
#legacy-builders-app .lb-action-primary{background:linear-gradient(180deg,#ffcf46,#efa81c);color:#18233a}
#legacy-builders-app .lb-action-blue{background:linear-gradient(180deg,#37a9ff,#176fd0)}
#legacy-builders-app .lb-action-green{background:linear-gradient(180deg,#65d984,#249553)}
#legacy-builders-app .lb-action-icon{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.2);font-size:1.18rem;font-weight:900
}
#legacy-builders-app .lb-action strong{display:block;font-size:1.02rem}
#legacy-builders-app .lb-action small{display:block;opacity:.8;font-size:.72rem;margin-top:2px}
#legacy-builders-app .lb-world-strip{margin:18px auto 0;display:flex;justify-content:center;align-items:center;gap:8px;color:#c9d7e9;font-size:.68rem;text-transform:uppercase;font-weight:800}
#legacy-builders-app .lb-world-strip i{width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* Screens */
#legacy-builders-app .lb-screen{min-height:100dvh;background:linear-gradient(180deg,#0b2c50,#071421);padding:14px 12px 92px}
#legacy-builders-app .panel{border-radius:22px}
#legacy-builders-app .lb-screen-head,#legacy-builders-app .lb-game-head{
  display:flex;gap:12px;align-items:flex-start;padding:14px;
  border:1px solid var(--line);background:linear-gradient(145deg,#183b61,#102b49);
  border-radius:20px;box-shadow:var(--shadow)
}
#legacy-builders-app .lb-screen-head small,#legacy-builders-app .lb-game-head small{color:var(--gold);font-weight:800;text-transform:uppercase;font-size:.67rem;letter-spacing:.08em}
#legacy-builders-app .lb-screen-head h2{margin:2px 0 4px;font:800 1.55rem Georgia,serif}
#legacy-builders-app .lb-screen-head p{margin:0;color:var(--muted);font-size:.83rem}
#legacy-builders-app .lb-icon-btn{
  width:42px;height:42px;border-radius:13px;background:#244f7d;color:#fff;font-weight:900;font-size:1.2rem;cursor:pointer
}
#legacy-builders-app .archetypes{
  display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:16px 2px 12px;
  scrollbar-width:none
}
#legacy-builders-app .archetypes::-webkit-scrollbar{display:none}
#legacy-builders-app .arch{
  min-height:250px;scroll-snap-align:center;padding:18px;border-radius:22px;
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.18),transparent 30%),
    linear-gradient(160deg,#1b5184,#132846);
  border:2px solid rgba(255,255,255,.14);box-shadow:0 16px 35px rgba(0,0,0,.28);
  cursor:pointer;transition:.2s;position:relative;overflow:hidden
}
#legacy-builders-app .arch:nth-child(3n+2){background:linear-gradient(160deg,#754bb0,#342858)}
#legacy-builders-app .arch:nth-child(3n+3){background:linear-gradient(160deg,#237b68,#153e3b)}
#legacy-builders-app .arch.selected{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 0 0 4px rgba(255,200,61,.14),0 18px 38px rgba(0,0,0,.34)}
#legacy-builders-app .arch-icon{font-size:3.2rem;margin-bottom:18px}
#legacy-builders-app .arch h3{font:800 1.45rem Georgia,serif;margin:0 0 8px}
#legacy-builders-app .arch p{color:#d8e5f2;line-height:1.45}
#legacy-builders-app .badge{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(255,200,61,.16);color:var(--gold);font-size:.72rem;font-weight:800}
#legacy-builders-app .lb-sticky-action{position:sticky;bottom:10px;z-index:4;margin-top:6px}

/* Game */
#legacy-builders-app .lb-game-head{
  display:grid;grid-template-columns:1fr auto;position:sticky;top:8px;z-index:8;
  padding:12px 14px;background:rgba(12,36,62,.92);backdrop-filter:blur(13px)
}
#legacy-builders-app .lb-game-head strong{display:block;font-size:.98rem}
#legacy-builders-app .track{grid-column:1/-1;height:7px;background:#06101d;border-radius:999px;overflow:hidden}
#legacy-builders-app .track span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--orange));transition:width .35s}
#legacy-builders-app .lb-game-main{padding-top:12px}
#legacy-builders-app .resource-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
#legacy-builders-app .resource{
  padding:10px 5px;border-radius:15px;text-align:center;
  background:linear-gradient(180deg,#193c63,#102943);border:1px solid rgba(255,255,255,.11)
}
#legacy-builders-app .resource:nth-child(1){background:linear-gradient(180deg,#b88018,#704b08)}
#legacy-builders-app .resource:nth-child(2){background:linear-gradient(180deg,#187fc2,#10517e)}
#legacy-builders-app .resource:nth-child(3){background:linear-gradient(180deg,#9b57bb,#5d3472)}
#legacy-builders-app .resource:nth-child(4){background:linear-gradient(180deg,#2a9c63,#17603f)}
#legacy-builders-app .resource span{display:block;font-size:.63rem;text-transform:uppercase;font-weight:800;opacity:.78}
#legacy-builders-app .resource strong{display:block;font-size:1.2rem;margin-top:2px}
#legacy-builders-app .scene{border-radius:24px;overflow:hidden;background:#fff;color:#13243a;box-shadow:var(--shadow)}
#legacy-builders-app .scene-visual{
  min-height:145px;padding:16px;position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(9,24,44,.08),rgba(9,24,44,.76)),
    url('legacy-builders-world.png') center 36%/cover no-repeat;
}
#legacy-builders-app .scene-kicker{
  position:relative;z-index:2;display:inline-flex;padding:6px 9px;border-radius:999px;
  background:rgba(6,18,32,.8);color:var(--gold);font-size:.67rem;font-weight:900;text-transform:uppercase
}
#legacy-builders-app .scene-orb{
  position:absolute;width:85px;height:85px;border-radius:50%;right:20px;bottom:-22px;
  background:radial-gradient(circle at 35% 35%,#fff,var(--sky) 25%,#2368bf 65%,#10224a);
  border:4px solid rgba(255,255,255,.8);box-shadow:0 10px 25px rgba(0,0,0,.38);
  animation:lbGlow 3s ease-in-out infinite
}
#legacy-builders-app .scene-copy{padding:18px}
#legacy-builders-app .scene h2{margin:0;font:800 1.65rem Georgia,serif;color:#10233d}
#legacy-builders-app .scene p{color:#52657d;line-height:1.55}
#legacy-builders-app .dialogue{padding:13px 14px;border-radius:14px;background:#eef7ff;border-left:4px solid var(--blue);color:#24415e}
#legacy-builders-app .choice-grid{display:grid;gap:9px;margin-top:14px}
#legacy-builders-app .choice{
  width:100%;padding:14px;border-radius:15px;text-align:left;color:#fff;font-weight:800;
  background:linear-gradient(180deg,#2889d6,#1762a4);border:2px solid rgba(255,255,255,.18);
  box-shadow:0 5px 0 #0b4478;cursor:pointer
}
#legacy-builders-app .choice:nth-child(2){background:linear-gradient(180deg,#9a68e8,#6945a8);box-shadow:0 5px 0 #4b2f7e}
#legacy-builders-app .choice:nth-child(3){background:linear-gradient(180deg,#59c97a,#2d9651);box-shadow:0 5px 0 #1f6c39}
#legacy-builders-app .choice:active{transform:translateY(3px);box-shadow:none}
#legacy-builders-app .lb-companion-panel{
  margin-top:12px;padding:14px;border-radius:20px;background:linear-gradient(160deg,#132e4b,#0c2036);
  border:1px solid var(--line)
}
#legacy-builders-app .tabbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
#legacy-builders-app .tab{padding:9px 4px;border-radius:11px;background:#183a5d;color:#c9d8e8;font-size:.7rem;font-weight:800}
#legacy-builders-app .tab.active{background:var(--gold);color:#14203a}
#legacy-builders-app .side-section{display:none}
#legacy-builders-app .side-section.active{display:block}
#legacy-builders-app .rel-card,#legacy-builders-app .journal-item,#legacy-builders-app .inventory-item,#legacy-builders-app .council-card,#legacy-builders-app .skool-item{
  margin-top:9px;padding:12px;border-radius:14px;background:#193b5f;border:1px solid rgba(255,255,255,.09)
}
#legacy-builders-app .rel-meter{height:7px;background:#071523;border-radius:999px;overflow:hidden;margin-top:7px}
#legacy-builders-app .rel-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold))}
#legacy-builders-app .lb-bottom-dock{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:20;
  width:min(100%,760px);display:grid;grid-template-columns:repeat(5,1fr);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(6,17,31,.94);border-top:1px solid rgba(255,255,255,.15);backdrop-filter:blur(16px)
}
#legacy-builders-app .lb-bottom-dock button{background:transparent;color:#9eb1c7;padding:5px 2px;display:grid;gap:2px;place-items:center}
#legacy-builders-app .lb-bottom-dock button span{font-size:1.25rem}
#legacy-builders-app .lb-bottom-dock button small{font-size:.61rem;font-weight:800}
#legacy-builders-app .lb-bottom-dock .dock-main span{
  width:46px;height:46px;margin-top:-24px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--gold),var(--orange));border:4px solid #07111f;color:#17233b;box-shadow:0 9px 22px rgba(0,0,0,.35)
}

/* Modals */
#legacy-builders-app .modal{
  position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;
  background:rgba(2,8,17,.78);backdrop-filter:blur(8px)
}
#legacy-builders-app .modal-box{
  width:100%;max-height:88dvh;overflow:auto;padding:24px 16px calc(22px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;background:linear-gradient(180deg,#163b62,#091a2d);border-top:1px solid rgba(255,255,255,.16);
  position:relative;box-shadow:0 -18px 55px rgba(0,0,0,.45)
}
#legacy-builders-app .modal-box small{color:var(--gold);text-transform:uppercase;font-weight:900;letter-spacing:.09em}
#legacy-builders-app .modal-box h2{margin:5px 0 10px;font:800 1.8rem Georgia,serif}
#legacy-builders-app .modal-box p{color:#c1d1e1;line-height:1.55}
#legacy-builders-app .modal-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;background:#244e78;color:#fff;font-size:1.3rem}
#legacy-builders-app .modal-icon{font-size:2rem;margin-bottom:8px}
#legacy-builders-app .modal-center{text-align:center}
#legacy-builders-app .score{font:900 3.2rem Georgia,serif;color:var(--gold);margin:8px 0}
#legacy-builders-app .round-summary{text-align:left;padding:12px;border-radius:15px;background:#0d2945}
#legacy-builders-app .lb-text-btn{margin-top:13px;background:transparent;color:#d6e4f2;font-weight:800}
#legacy-builders-app .toast{
  position:fixed;left:50%;bottom:88px;z-index:70;transform:translate(-50%,20px);
  padding:11px 15px;border-radius:999px;background:#132c48;color:#fff;border:1px solid rgba(255,255,255,.16);
  opacity:0;pointer-events:none;transition:.25s
}
#legacy-builders-app .toast.show{opacity:1;transform:translate(-50%,0)}
#legacy-builders-app .footer-note{text-align:center;padding:12px;color:#7f95ad;font-size:.68rem;background:#07111f}

/* Desktop enhancement, still designed from mobile up */
@media(min-width:760px){
  #legacy-builders-app .lb-home-content{padding-left:max(5vw,40px);text-align:left;width:650px}
  #legacy-builders-app .lb-logo-mark{margin-left:0}
  #legacy-builders-app .account-panel,#legacy-builders-app .lb-main-actions{margin-left:0}
  #legacy-builders-app .lb-world-strip{justify-content:flex-start}
  #legacy-builders-app .archetypes{grid-auto-flow:initial;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr);overflow:visible}
  #legacy-builders-app .lb-screen{padding-left:max(4vw,24px);padding-right:max(4vw,24px)}
  #legacy-builders-app .lb-game-main{display:grid;grid-template-columns:1.35fr .65fr;gap:14px}
  #legacy-builders-app .resource-grid{grid-column:1/-1}
  #legacy-builders-app .lb-companion-panel{margin-top:0}
  #legacy-builders-app .modal{align-items:center;justify-content:center}
  #legacy-builders-app .modal-box{width:min(620px,calc(100% - 30px));border-radius:24px}
}
