/* ---------- home: the tavern lobby (Epic Seven-style painted hub with the crew hanging out) ---------- */

/* painted icons in the dock (every screen) */
.dk > i.ic { width: 32px; height: 32px; background: center / contain no-repeat; filter: drop-shadow(1px 2px 0 #000); }

/* the stage: painted tavern, warm light, the team standing on its floor.
   The painting is scaled up and bottom-anchored so the floor fills the lower half; its sea horizon (the eye line) lands ~41% down,
   and every hero's height follows that perspective from where their feet touch the boards. */
.h-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #1a0f07; }
.hs-bg { position: absolute; inset: -3%; background: var(--bg) 50% 100% / auto 122% no-repeat; filter: saturate(1.08) contrast(1.06) brightness(.7) blur(1.6px);
  animation: hsDrift 40s ease-in-out infinite alternate; transform-origin: 50% 70%; }
@keyframes hsDrift { from { transform: scale(1); } to { transform: scale(1.02) translateX(-.4%); } }
.hs-glow { position: absolute; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; }
.hs-glow.g1 { left: 62%; top: 30%; width: 26%; height: 44%; background: radial-gradient(closest-side, rgba(255,140,40,.5), rgba(255,100,20,.16) 55%, transparent); animation: hsFlick 2.6s ease-in-out infinite; }
.hs-glow.g2 { left: 84%; top: 56%; width: 18%; height: 30%; background: radial-gradient(closest-side, rgba(255,190,90,.42), transparent); animation: hsFlick 3.4s ease-in-out -1s infinite; }
.hs-glow.g3 { left: -6%; top: -8%; width: 40%; height: 46%; background: radial-gradient(closest-side, rgba(255,180,80,.34), transparent); animation: hsFlick 4.1s ease-in-out -2s infinite; }
@keyframes hsFlick { 0%, 100% { opacity: .85; transform: scale(1); } 30% { opacity: 1; transform: scale(1.04); } 55% { opacity: .7; } 75% { opacity: .95; transform: scale(.98); } }
.hs-rays { position: absolute; inset: -20% -10%; mix-blend-mode: screen; opacity: .45; pointer-events: none;
  background: repeating-linear-gradient(112deg, transparent 0 7%, rgba(255,214,150,.10) 8% 11%, transparent 12% 19%, rgba(255,214,150,.06) 20% 22%, transparent 23% 30%);
  -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 80%); mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 80%);
  animation: hsRays 16s ease-in-out infinite alternate; }
@keyframes hsRays { from { transform: translateX(-2%); opacity: .3; } to { transform: translateX(2%); opacity: .55; } }
/* a warm pool of firelight on the boards where the crew stand */
.hs-pool { position: absolute; left: 18%; right: 14%; top: 62%; height: 46%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,160,70,.32), rgba(255,120,40,.12) 55%, transparent); }
/* one colour grade over painting + crew so both sit in the same lantern light */
.hs-grade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 50% 60% at 72% 48%, rgba(255,140,40,.55), transparent 70%), linear-gradient(180deg, rgba(255,190,110,.35), rgba(120,50,10,.5)); }
.hs-vig { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(14,7,2,.78), rgba(14,7,2,0) 15%), linear-gradient(0deg, rgba(14,7,2,.82), rgba(14,7,2,0) 18%),
    radial-gradient(ellipse 75% 70% at 52% 55%, transparent 55%, rgba(20,8,0,.6)); }
.hs-motes { position: absolute; inset: 0; pointer-events: none; }
.hs-motes i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #ffd89a; box-shadow: 0 0 6px 2px rgba(255,190,100,.6); opacity: .8;
  animation: hsMote var(--t) linear var(--dl) infinite; }
@keyframes hsMote { 0% { opacity: .8; transform: translate(0, 0); } 80% { opacity: .45; } 100% { opacity: 0; transform: translate(40px, -160px); } }

/* the crew: three depth rows; back row smaller, higher, hazier */
.hs-crew { position: absolute; inset: 0; }
#ui .hc-fig { pointer-events: auto; }
.hc-fig { position: absolute; width: var(--h); height: var(--h); transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: pointer; }
.hc-fig.z0 { z-index: 3; } .hc-fig.z1 { z-index: 2; } .hc-fig.z2 { z-index: 1; }
.hc-body { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; animation: hcBreathe 3.6s ease-in-out var(--d) infinite; isolation: isolate;
  filter: drop-shadow(-8px 3px 9px rgba(25,8,0,.45)); transition: filter .2s; }
.hc-body.flip { scale: -1 1; }
.hc-body img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: saturate(.92) sepia(.12) contrast(1.04); }
/* lantern grade: warm on top, umber toward the floor (ambient occlusion), clipped to the figure */
.hc-grade, .hc-rim, .hc-rim::before { position: absolute; inset: 0; pointer-events: none; }
.hc-grade { -webkit-mask: var(--src) 50% 100% / contain no-repeat; mask: var(--src) 50% 100% / contain no-repeat; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(255,214,160,.9) 0%, rgba(255,190,130,.9) 55%, rgba(170,95,45,.95) 86%, rgba(90,45,15,1) 100%); }
/* rim light: the figure minus a shifted copy of itself = a sliver of edge. Fire on the right (hot orange), lanterns on the left (soft gold) */
.hc-rim { mix-blend-mode: screen; background: linear-gradient(90deg, rgba(255,140,50,.25) 20%, #ff9a3a 60%, #ffc46a);
  mask: var(--src) 50% 100% / contain no-repeat, var(--src) calc(50% - 4px) calc(100% + 2px) / contain no-repeat; mask-composite: subtract; }
.hc-rim::before { content: ''; mix-blend-mode: screen; opacity: .3; background: linear-gradient(90deg, #ffd890, #ffb860 35%, transparent 60%);
  mask: var(--src) 50% 100% / contain no-repeat, var(--src) calc(50% + 2px) 100% / contain no-repeat; mask-composite: subtract; }
.hc-fig.z1 .hc-body { filter: drop-shadow(-6px 3px 7px rgba(25,8,0,.45)) brightness(.9); }
.hc-fig.z2 .hc-body { filter: brightness(.76) saturate(.85) blur(.5px); }
.hc-fig.z2 .hc-grade { background: linear-gradient(180deg, rgba(255,200,140,.95), rgba(220,140,80,.95) 70%, rgba(110,55,20,1)); }
.hc-fig:hover .hc-body { filter: drop-shadow(0 0 3px #ffd36b) drop-shadow(0 0 14px rgba(255,190,80,.8)) brightness(1.08); }
@keyframes hcBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.008, 1.016) translateY(-1px); } }
/* contact shadow: a tight dark core under the boots inside a wide soft falloff on the boards */
.hc-shadow { position: absolute; left: 24%; right: 24%; bottom: -2.2%; height: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12,4,0,.85), rgba(12,4,0,.5) 55%, transparent); }
.hc-shadow::after { content: ''; position: absolute; left: -45%; right: -55%; top: -60%; bottom: -70%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,6,0,.42), rgba(20,6,0,.16) 60%, transparent); }
.hc-fig.z2 .hc-shadow { opacity: .8; }
.hc-tag { position: absolute; bottom: 101%; left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 6px; white-space: nowrap; pointer-events: none; z-index: 2;
  text-shadow: -1px -1px 0 #1b0d02, 1px -1px 0 #1b0d02, -1px 1px 0 #1b0d02, 1px 1px 0 #1b0d02, 0 2px 6px rgba(0,0,0,.8); }
.hc-tag b { font: 400 21px/1 'Lilita One'; color: #fff4e0; letter-spacing: .3px; }
.hc-tag i { font: 400 18px/1.1 'Lilita One'; font-style: normal; color: #ffae3b; }
.hc-fig.z1 .hc-tag b { font-size: 19px; } .hc-fig.z1 .hc-tag i { font-size: 16px; }
.hc-fig.z2 .hc-tag b { font-size: 16px; } .hc-fig.z2 .hc-tag i { font-size: 14px; }
/* the leader's line: waits a few seconds after you arrive, then comes and goes */
.hc-say { position: absolute; left: 60%; top: -2%; max-width: 200px; padding: 7px 12px; border-radius: 14px; background: rgba(255,248,236,.95); color: #3a2410;
  font: 800 12px/1.25 Nunito; text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 2px rgba(120,70,20,.35); white-space: normal; width: max-content; pointer-events: none; z-index: 3;
  opacity: 0; animation: hcSay 9s ease-in-out 6s infinite; transform-origin: 10% 100%; }
.hc-say::after { content: ''; position: absolute; left: 18px; bottom: -9px; border: 6px solid transparent; border-top: 10px solid rgba(255,248,236,.95); border-bottom: 0; }
@keyframes hcSay { 0% { opacity: 0; transform: scale(.85); } 6%, 60% { opacity: 1; transform: scale(1); } 68%, 100% { opacity: 0; transform: scale(.85); } }

/* ---------- the HUD over the tavern: E7-like glass + gold, no comic boxes */
body.at-home #topbar { background: linear-gradient(rgba(12,6,2,.75), rgba(12,6,2,0)); }
body.at-home #dock { background: linear-gradient(rgba(14,7,2,0), rgba(14,7,2,.55) 60%); }
body.at-home .dk:not(.dk-summon) { width: 84px; height: 76px; background: none; border: 0; box-shadow: none; transform: none; color: #fff1d6;
  font: 15px 'Lilita One'; text-shadow: -1px -1px 0 #1b0d02, 1px -1px 0 #1b0d02, -1px 1px 0 #1b0d02, 1px 1px 0 #1b0d02, 0 2px 4px #000; }
body.at-home .dk:not(.dk-summon) > i, body.at-home .dk:not(.dk-summon) > span { transform: none; }
body.at-home .dk > i.ic { width: 46px; height: 46px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.8)); transition: transform .15s; }
body.at-home .dk:not(.dk-summon):hover { transform: none; } body.at-home .dk:not(.dk-summon):hover > i.ic { transform: translateY(-3px) scale(1.06); }
body.at-home .dk.on:not(.dk-summon) { background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(255,190,90,.35), transparent); color: #ffd36b; }
body.at-home .dk.on:not(.dk-summon)::after { left: 22%; right: 22%; bottom: 2px; height: 2px; background: linear-gradient(90deg, transparent, #ffd36b, transparent); }
body.at-home .dk .badge { transform: none; top: -2px; right: 6px; }

/* side rail: icon + label straight on the scene */
.scr-home .rail { top: 72px; left: 8px; gap: 2px; }
.scr-home .rl { width: 70px; height: 58px; background: none; border: 0; box-shadow: none; color: #fff1d6; font: 13px 'Lilita One';
  text-shadow: -1px -1px 0 #1b0d02, 1px -1px 0 #1b0d02, -1px 1px 0 #1b0d02, 1px 1px 0 #1b0d02, 0 2px 4px #000; }
.scr-home .rl > i.ic { width: 38px; height: 38px; background: center / contain no-repeat; filter: drop-shadow(0 3px 3px rgba(0,0,0,.85)); transition: transform .15s; }
.scr-home .rl:hover { transform: none; } .scr-home .rl:hover > i.ic { transform: scale(1.12) rotate(-4deg); }
.scr-home .rl .badge { top: -2px; right: 6px; }

/* captain's log + today: dark glass with gold hairlines */
.scr-home .h-log { left: 84px; top: 76px; width: 236px; gap: 8px; z-index: 2; }
.scr-home .hl-card { transform: none; padding: 10px 12px 9px; border-radius: 6px; color: #f3e3c4;
  background: linear-gradient(160deg, rgba(38,22,10,.86), rgba(16,9,4,.8)); border: 1px solid rgba(226,180,96,.7);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,150,.2), 0 10px 24px rgba(0,0,0,.5); }
.scr-home .hl-head b { font: 22px/1 Bangers; letter-spacing: 1.5px; color: #ffcf6a; text-shadow: 0 2px 0 #3a1c00; }
.scr-home .hl-head small { color: #d8c3a0; opacity: 1; }
.scr-home .hl-stats div { border-top: 1px solid rgba(226,180,96,.45); }
.scr-home .hl-stats small { color: #c7ab7c; opacity: 1; }
.scr-home .hl-stats b { font-size: 20px; color: #fff; }
.scr-home .hl-card .h-goal { color: #f3e3c4; border-top: 1px dashed rgba(226,180,96,.4); }
.scr-home .hl-card .h-goal small { color: #ff9d4a; }
.scr-home .hl-today { border-radius: 6px; background: linear-gradient(160deg, rgba(38,22,10,.86), rgba(16,9,4,.8)); border: 1px solid rgba(226,180,96,.7); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.scr-home .ht-head { padding: 6px 12px; color: #fff1d6; } .scr-home .ht-head b { font-size: 19px; color: #ffcf6a; }
.scr-home .ht-n { border: 1px solid #000; }
.scr-home .h-camp { background: rgba(16,9,4,.8); border-left-color: #ffb648; color: #ffe2a8; border-radius: 0 4px 4px 0; font-size: 12px; }

/* featured banner: gilded frame */
.scr-home .h-right { width: 360px; right: 14px; top: 72px; z-index: 2; }
.scr-home .feat { height: 186px; border: 2px solid #e2b460; border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.65), inset 0 0 0 4px rgba(255,214,140,.35), 0 0 22px rgba(255,170,60,.35), 0 12px 26px rgba(0,0,0,.55); }
.scr-home .feat b { font-size: 34px; color: #fff3d0; text-shadow: 0 2px 0 #5a2c00, 0 0 12px rgba(255,170,60,.6), 3px 3px 0 #000; }
.scr-home .ft-go { box-shadow: 0 3px 0 #000, 0 0 12px rgba(255,200,90,.6); }

/* next island: the big Set Sail emblem in the bottom-right corner */
.scr-home .cont { position: fixed; right: 16px; bottom: 12px; width: 330px; height: 96px; z-index: 7; padding: 10px 120px 10px 16px; border: 2px solid #e2b460; border-radius: 48px 10px 10px 48px;
  background: linear-gradient(90deg, rgba(16,9,4,.94) 20%, rgba(30,16,6,.72) 70%, rgba(30,16,6,.4)), var(--art) center 40% / cover;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), 0 0 20px rgba(255,170,60,.35), 0 10px 22px rgba(0,0,0,.6); }
.scr-home .cont { overflow: visible; }
.scr-home .cont:hover { transform: translateY(-3px); }
.scr-home .cont::after { content: ''; position: absolute; right: -6px; top: 50%; width: 118px; height: 118px; margin-top: -59px; background: url('../../assets/gen/icon_settings.webp') center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(255,190,80,.55)); animation: wheel 24s linear infinite; }
.scr-home .cont .stamp { background: none; border: 0; padding: 0; transform: none; color: #ffae3b; font: 14px Bangers; letter-spacing: 2px; }
.scr-home .cont b { margin-top: 0; font-size: 28px; color: #fff3d0; text-shadow: 0 2px 0 #3a1c00, 2px 2px 0 #000; }
.scr-home .cont > span { color: #e8d4b0; font-size: 12px; }
.scr-home .cont em { right: 18px; bottom: -11px; z-index: 2; font-size: 15px; padding: 1px 12px; background: linear-gradient(#ffe07a, #f4a21d); color: #261400; border: 2px solid #000; border-radius: 3px; transform: none; box-shadow: 0 3px 0 #000, 0 0 12px rgba(255,200,90,.6); animation: none; }

/* treasure hold: bottom-left, same gilded glass */
.scr-home .h-right .hold { position: fixed; left: 14px; bottom: 14px; right: auto; top: auto; width: 300px; height: 74px; z-index: 7; padding: 8px 12px; border-radius: 10px;
  background: linear-gradient(160deg, rgba(38,22,10,.9), rgba(16,9,4,.86)); border: 1px solid rgba(226,180,96,.8); color: #f3e3c4;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.2), 0 10px 22px rgba(0,0,0,.55); }
.scr-home .h-right .hold .hold-t b { color: #ffcf6a; font-size: 17px; } .scr-home .h-right .hold small { color: #f3e3c4; font-size: 12px; }
.scr-home .h-right .hold .bar { background: rgba(0,0,0,.5); }
.scr-home .h-right .hold.full { box-shadow: 0 0 0 1px #ffd36b, 0 0 20px rgba(255,196,61,.7), 0 10px 22px rgba(0,0,0,.55); }
.scr-home .hold-ic { width: 56px; height: 56px; flex: none; background: center / contain no-repeat; filter: drop-shadow(0 3px 3px rgba(0,0,0,.8)); font-size: 0; }

/* phones: keep the crew, hand the corners back to the old stacked layout */
@media (max-width: 760px) {
  .hc-fig { --h: 200px !important; } .hc-fig.z2, .hc-tag, .hc-say { display: none; }
  .scr-home .cont, .scr-home .h-right .hold { position: relative; left: auto; right: auto; bottom: auto; width: 100%; }
  .scr-home .cont::after { width: 80px; height: 80px; margin-top: -40px; }
  .scr-home .h-right { width: auto; }
}

/* steady E7-style notification dots on the hub, and a banner swap that never fades the card out */
body.at-home .rl .badge, body.at-home .dk .badge { animation: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; border: 1.5px solid #2a0d00;
  background: radial-gradient(circle at 35% 30%, #ff8a4a, #e0381a 70%); font: 13px/17px 'Lilita One'; box-shadow: 0 2px 4px rgba(0,0,0,.6); transform: none; }
.scr-home .feat.swap { animation: hFeatIn .5s ease-out; }
@keyframes hFeatIn { 40% { background-position: 0 0, 70% 12%, 0 0, 0 0; filter: brightness(1.25); } }
/* back row: name plates sit beside the body, on the outer side, so they never stack on the front row's */
.hc-tag.side { bottom: auto; top: 30%; left: 64%; transform: none; flex-direction: column; align-items: flex-start; gap: 0; }
.hc-tag.side.l { left: auto; right: 64%; align-items: flex-end; }
/* phones: the desktop corners above would fight the stacked phone layout from theme.css */
@media (max-width: 760px) {
  .scr-home .h-log { left: 66px; right: 8px; width: auto; top: 62px; }
  .scr-home .h-right { left: 66px; right: 8px; top: auto; bottom: 6px; width: auto; }
  .scr-home .feat { height: 128px; } .scr-home .feat b { font-size: 24px; }
  .scr-home .cont { height: 92px; padding: 6px 70px 6px 10px; border-radius: 10px; } .scr-home .cont b { font-size: 18px; }
  .scr-home .cont::after { width: 64px; height: 64px; margin-top: -32px; right: 2px; }
  .scr-home .cont em { right: 6px; bottom: -8px; font-size: 12px; }
  .scr-home .h-right .hold { height: 92px; padding: 6px 8px; } .scr-home .hold-ic { width: 34px; height: 34px; }
  .scr-home .rl { width: 54px; height: 50px; font-size: 10px; } .scr-home .rl > i.ic { width: 30px; height: 30px; }
}
@media (max-width: 760px) { .hs-crew { inset: 12% 0 30% 0; } }

/* ---------- round 2 layout: E7-style split HUD so the floor in the middle belongs to the crew */
/* dock: hub buttons gather bottom-left (the big Set Sail emblem holds the bottom-right), centre stays open for the leader's feet */
@media (min-width: 761px) {
  body.at-home #dock { justify-content: flex-start; padding-left: 12px; background: linear-gradient(90deg, rgba(14,7,2,.7), rgba(14,7,2,.35) 34%, rgba(14,7,2,0) 46%); }
  /* treasure hold rides above the dock on the left, as a slim plate */
  .scr-home .h-right .hold { left: 14px; bottom: 104px; width: 262px; height: 58px; padding: 6px 10px; }
  .scr-home .hold-ic { width: 44px; height: 44px; }
  .scr-home .h-right .hold .hold-t b { font-size: 15px; } .scr-home .h-right .hold small { font-size: 11px; }
  /* featured banner: the timer becomes its own pill so nothing stacks on it */
  .scr-home .feat b { max-width: 66%; font-size: 32px; }
  .scr-home .feat small { position: absolute; right: 10px; top: 10px; margin: 0; padding: 2px 9px; border-radius: 10px; background: rgba(10,5,2,.78); border: 1px solid rgba(226,180,96,.7);
    color: #ffd68a; font: 800 11px/16px Nunito; text-shadow: none; }
  .scr-home .feat small:empty { display: none; }
}
/* the campaign note sits under the event banner instead of stacking a fourth panel on the left */
@media (min-width: 761px) {
  .scr-home .h-log .h-camp { position: fixed; right: 14px; top: 266px; width: 360px; box-sizing: border-box; padding: 5px 10px; }
}
/* the leader's line floats up-left, over the bar, clear of every face */
.hc-say { left: auto; right: 60%; top: -13%; transform-origin: 90% 100%; }
.hc-say::after { left: auto; right: 16px; }
.hc-fig.z2 .hc-body { filter: brightness(.88) saturate(.9) blur(.35px); }

/* ---------- round 3: E7-style chrome (no boxes on the scene), a crisper room, and blurred foreground props for depth */
/* the painting reads as a real place: sharper and brighter; focus falloff comes from the foreground props instead */
.hs-bg { filter: saturate(1.1) contrast(1.05) brightness(.8) blur(.6px); }
/* foreground: an out-of-focus tavern table right at the lens on the right, framing the crew like E7's stools */
.hs-fg { position: absolute; z-index: 120; bottom: -14vh; width: 52vh; height: 52vh; background: center bottom / contain no-repeat; pointer-events: none;
  filter: blur(3px) brightness(.55) saturate(1.1) drop-shadow(0 -6px 16px rgba(0,0,0,.5)); }
.hs-fg.r { right: 1%; width: 60vh; height: 60vh; bottom: -7vh; background-image: url('../../assets/gen/home_fg_right.webp'); filter: blur(2.5px) brightness(.72) saturate(1.1) drop-shadow(-10px -4px 18px rgba(0,0,0,.55)); }
@media (max-width: 760px) { .hs-fg { display: none; } }

/* top bar: round gilded portrait + rank, purse as bare icons and numbers floating on the scene */
body.at-home #topbar { padding: 6px 14px 0 8px; gap: 8px; align-items: flex-start; background: linear-gradient(rgba(10,5,1,.72), rgba(10,5,1,.35) 55%, rgba(10,5,1,0)); height: 84px; box-sizing: border-box; }
body.at-home #topbar .tb-cap { height: 70px; padding: 0 8px 0 0; gap: 10px; transform: none; background: none; border: 0; box-shadow: none; color: #fff4e0; }
body.at-home .tb-cap > * { transform: none; }
body.at-home .cap-face { width: 64px; height: 64px; border: 0; background-color: #3a2410; background-size: 160% auto;
  box-shadow: 0 0 0 2px #2a1404, 0 0 0 4px #e8b65c, 0 0 0 5px #6a3c0c, 0 0 0 7px rgba(255,214,140,.5), 0 0 18px 6px rgba(255,170,60,.35), 0 4px 10px 6px rgba(0,0,0,.5); }
body.at-home .cap-t { grid-template-columns: auto; row-gap: 3px; }
body.at-home .cap-t small { font: 16px/1 'Lilita One'; letter-spacing: .3px; text-transform: none; opacity: 1; color: #fff4e0;
  text-shadow: -1px -1px 0 #1b0d02, 1px -1px 0 #1b0d02, -1px 1px 0 #1b0d02, 1px 1px 0 #1b0d02, 0 2px 4px #000; }
body.at-home .cap-t b { font: 20px/1 'Lilita One'; color: #ffae3b; text-shadow: -1px -1px 0 #1b0d02, 1px -1px 0 #1b0d02, -1px 1px 0 #1b0d02, 1px 1px 0 #1b0d02, 0 2px 4px #000; }
body.at-home .cap-t b::before { content: 'Rank. '; }
body.at-home .cap-t .bar { grid-column: 1; width: 96px; height: 4px; background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px rgba(226,180,96,.5); border-radius: 2px; }
body.at-home .cap-t .bar i { background: linear-gradient(90deg, #ff9a3a, #ffd36b); }
body.at-home .tb-cur { margin: 10px 0 0 auto; gap: 30px; padding: 0 18px; background: none; border: 0; box-shadow: none; transform: none; }
body.at-home .tb-cur .cur { padding: 0; border: 0; transform: none; gap: 8px; font: 22px 'Lilita One'; color: #fff4e0;
  text-shadow: -1px -1px 0 #1b0d02, 1px -1px 0 #1b0d02, -1px 1px 0 #1b0d02, 1px 1px 0 #1b0d02, 0 2px 5px #000; }
body.at-home .tb-cur .cur i { font-size: 22px; filter: drop-shadow(0 2px 2px #000); }
body.at-home .tb-cur .cur.berries i { font-size: 25px; color: #ffc43d; }
body.at-home .tb-cur .cur small { font-size: 16px; opacity: .7; }
body.at-home #topbar .tb-mute, body.at-home #topbar .tb-set { margin: 8px 0 0; width: 40px; height: 40px; border-radius: 50%; border: 0; transform: none;
  background: radial-gradient(circle, rgba(30,16,6,.75), rgba(30,16,6,.35)); box-shadow: 0 0 0 1.5px rgba(226,180,96,.75), 0 3px 8px rgba(0,0,0,.6); font-size: 19px; }
body.at-home #topbar .tb-mute { margin-left: 14px; }

/* toasts on the hub: dark glass slip with a gold hairline, not a paper note */
body.at-home .toast { transform: none; border-radius: 4px; border: 1px solid rgba(226,180,96,.8); color: #fff1d6; font: 700 14px Nunito; padding: 8px 18px;
  background: linear-gradient(90deg, rgba(16,9,4,.2), rgba(16,9,4,.88) 18%, rgba(16,9,4,.88) 82%, rgba(16,9,4,.2)); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
body.at-home .toast b { color: #ffcf6a; }
body.at-home #toasts { top: 88px; }

/* captain's log: E7 keeps the scene clear, so the card fades into the room instead of sitting in a box */
@media (min-width: 761px) {
  .scr-home .rail { top: 90px; gap: 0; }
  .scr-home .rl { height: 54px; }
  .scr-home .h-log { top: 96px; width: 230px; }
  .scr-home .hl-card { border: 0; border-left: 2px solid #e2b460; border-radius: 0; padding: 8px 14px 8px 12px;
    background: linear-gradient(90deg, rgba(16,9,4,.82), rgba(16,9,4,.62) 65%, rgba(16,9,4,0)); box-shadow: none; }
  .scr-home .hl-today { border: 0; border-left: 2px solid #e2b460; border-radius: 0; background: linear-gradient(90deg, rgba(16,9,4,.82), rgba(16,9,4,.55) 65%, rgba(16,9,4,0)); box-shadow: none; }
  .scr-home .h-right { top: 92px; }
  .scr-home .h-log .h-camp { top: 286px; }
}
/* phones: shrink the bare-purse top bar so it fits a 390px width */
@media (max-width: 760px) {
  body.at-home #topbar { height: 60px; padding: 6px 8px 0; gap: 4px; }
  body.at-home #topbar .tb-cap { height: 48px; gap: 6px; }
  body.at-home .cap-face { width: 42px; height: 42px; }
  body.at-home .cap-t b { font-size: 16px; } body.at-home .cap-t .bar { width: 52px; }
  body.at-home .tb-cur { margin-top: 10px; gap: 10px; padding: 0 4px; }
  body.at-home .tb-cur .cur { font-size: 15px; gap: 4px; } body.at-home .tb-cur .cur i { font-size: 14px; } body.at-home .tb-cur .cur.berries i { font-size: 16px; }
  body.at-home .tb-cur .cur small { display: none; } body.at-home .tb-cur { gap: 7px; } body.at-home .cap-t .bar { width: 40px; }
  body.at-home #topbar .tb-mute, body.at-home #topbar .tb-set { width: 32px; height: 32px; font-size: 15px; margin-top: 8px; }
  body.at-home #topbar .tb-mute { margin-left: 2px; }
  body.at-home #toasts { top: 64px; }
}

/* ---------- round 4: a lived-in room, not a lineup. Off-duty lobby paintings (seated, leaning, toasting) at E7 scale,
   spread over three depths, and a HUD pulled to the edges so the floor in the middle belongs to the crew */
.hc-fig.lobby .hc-body img { filter: saturate(.95) sepia(.08) contrast(1.05); }
/* the lobby paintings are already lit by the lanterns: a lighter grade so they keep their own warm light */
.hc-fig.lobby .hc-grade { background: linear-gradient(180deg, rgba(255,226,186,.95) 0%, rgba(255,206,150,.95) 60%, rgba(196,120,64,.95) 90%, rgba(120,60,24,1) 100%); }
.hc-fig.lobby.z2 .hc-body { filter: brightness(.82) saturate(.88) blur(.4px); }
.hc-fig.lobby .hc-shadow { left: 20%; right: 20%; bottom: -1.5%; height: 7%; }
.hc-fig.lobby .hc-tag { bottom: 96%; }
.hc-fig.lobby .hc-tag.side { top: 22%; left: 72%; } .hc-fig.lobby .hc-tag.side.l { left: auto; right: 72%; }
@media (min-width: 761px) {
  /* side rail becomes a row of bare icons up in the top bar, E7-style, clearing the left wall */
  .scr-home .rail { top: 10px; left: 222px; flex-direction: row; gap: 4px; z-index: 6; }
  .scr-home .rl { width: 50px; height: 56px; font-size: 11px; justify-content: flex-start; padding-top: 2px; }
  .scr-home .rl > i.ic { width: 32px; height: 32px; }
  .scr-home .rl .badge { top: -4px; right: 2px; min-width: 17px; height: 17px; font-size: 11px; line-height: 14px; padding: 0 4px; }
  .scr-home .rail-pop { left: 0; top: 64px; bottom: auto; }
  /* the Captain's Log card leaves the scene; Today stays as one slim pill under the portrait */
  .scr-home .h-log { left: 12px; top: 92px; width: 210px; }
  .scr-home .hl-card { display: none; }
  .scr-home .hl-today { background: linear-gradient(90deg, rgba(16,9,4,.75), rgba(16,9,4,.4) 70%, rgba(16,9,4,0)); }
  .scr-home .ht-head { padding: 4px 10px; } .scr-home .ht-head b { font-size: 16px; }
  /* treasure hold: a single painted icon with a fill ring on the left wall, like E7's Pack button */
  .scr-home .h-right .hold { left: 14px; bottom: 100px; width: 74px; height: 80px; padding: 0; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2px;
    background: none; border: 0; box-shadow: none; }
  .scr-home .h-right .hold.full { box-shadow: none; }
  .scr-home .h-right .hold .hold-ic { width: 52px; height: 52px; }
  .scr-home .h-right .hold.full .hold-ic { filter: drop-shadow(0 3px 3px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(255,200,80,.85)); }
  .scr-home .h-right .hold .hold-t { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .scr-home .h-right .hold .hold-t b { font: 13px 'Lilita One'; color: #fff1d6; text-shadow: -1px -1px 0 #1b0d02, 1px -1px 0 #1b0d02, -1px 1px 0 #1b0d02, 1px 1px 0 #1b0d02, 0 2px 4px #000; white-space: nowrap; }
  .scr-home .h-right .hold .bar { width: 48px; height: 4px; }
  .scr-home .h-right .hold small { display: none; }
  /* campaign note: a thin line under the banner, not a fourth box */
  .scr-home .h-log .h-camp { top: 284px; background: linear-gradient(90deg, rgba(16,9,4,0), rgba(16,9,4,.7) 20%); border: 0; text-align: right; }
}
/* the foreground table is smaller and lower in the lobby so it frames the right-hand hero instead of hiding them */
@media (min-width: 761px) { .scr-home .hs-fg.r { width: 46vh; height: 46vh; bottom: -11vh; right: 0; } }