.shell{height:100vh;height:100dvh;max-width:760px;margin:0 auto;padding:calc(72px + env(safe-area-inset-top)) 14px calc(94px + env(safe-area-inset-bottom));display:flex;flex-direction:column;min-height:0;overflow:hidden}
.shell.no-nav{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.app-header{position:fixed;z-index:30;top:0;left:0;right:0;height:calc(66px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;background:linear-gradient(180deg,rgba(11,11,16,.96),rgba(11,11,16,.78),transparent);backdrop-filter:blur(14px)}
.header-logo{width:35px;height:35px;object-fit:contain}
.header-title{text-align:center;font-size:.98rem;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.bottom-nav{position:fixed;z-index:35;left:50%;bottom:calc(9px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 22px),560px);height:70px;padding:7px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;border:1px solid var(--line);border-radius:25px;background:rgba(18,18,26,.86);backdrop-filter:blur(24px);box-shadow:var(--shadow)}
.view{animation:viewIn .34s var(--ease);height:100%;display:flex;flex-direction:column;min-height:0;gap:12px;overflow:hidden}
.view-section{justify-content:flex-start}
.section-hero{padding:4px 2px 6px;flex:0 0 auto}
.section-hero h1{font-size:clamp(1.85rem,8.5vw,3.1rem);line-height:.96}
.section-hero p{margin-top:7px;max-width:56ch;color:var(--text-muted);line-height:1.4;font-size:.9rem}
.pack-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);flex:1;min-height:0;overflow:hidden}
.view-pack,.view-bedroom-play{gap:10px}
.pack-screen{height:100%;display:flex;flex-direction:column;min-height:0;gap:12px;overflow:hidden;padding:4px 2px 3px}
.card-progress{flex:0 0 auto;padding:2px 10px 0}
.flip-stage{flex:1;min-height:0;perspective:1200px;padding:4px 4px 2px}
.card-footer{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:0 4px 4px}
.card-meta-row{display:flex;justify-content:space-between;gap:8px;font-size:.74rem;color:var(--text-muted);padding:0 2px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.bedroom-play-layout{height:100%;display:flex;flex-direction:column;min-height:0;gap:10px;overflow:hidden}
.players{flex:0 0 auto}
.game-board{flex:1;min-height:0}
.dice-area{flex:0 0 auto}
@media (max-height:760px){
  .shell{padding-top:calc(68px + env(safe-area-inset-top));padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .shell.no-nav{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .section-hero h1{font-size:clamp(1.55rem,7vw,2.25rem)}
  .section-hero p{font-size:.82rem;line-height:1.32}
  .view{gap:8px}
  .pack-grid{gap:8px}
}
@media (min-width:620px) and (min-height:760px){.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Step 3.9 layout overrides */
.app-header{grid-template-columns:56px 1fr 56px;height:calc(74px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0}
.header-logo--large{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(255,117,157,.22))}
.header-title{font-size:1rem;padding:0 10px}
.section-hero{padding:6px 4px 8px}
.pack-grid{gap:12px;align-content:stretch}
.pack-screen{gap:14px}
.flip-stage{padding:8px 10px 4px}
.card-footer{padding:0 8px 4px;gap:10px}
.view-bedroom{gap:14px}
@media (max-height:760px){
  .app-header{height:calc(70px + env(safe-area-inset-top))}
  .header-logo--large{width:44px;height:44px}
  .pack-grid{gap:10px}
}

/* Step 4.1.1 header fix */
.app-header{position:fixed;z-index:30;top:0;left:0;right:0;height:calc(74px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(11,11,16,.96),rgba(11,11,16,.78),transparent);backdrop-filter:blur(14px)}
.app-header:has(.back-btn){grid-template-columns:56px 1fr 56px}
.header-logo--brand{width:136px;height:42px;object-fit:contain;justify-self:start;filter:drop-shadow(0 0 18px rgba(255,117,157,.24))}
.header-title{position:absolute;left:50%;transform:translateX(-50%);width:min(56vw,280px);text-align:center;font-size:.98rem;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;pointer-events:none}
@media (max-width:390px){
  .app-header{grid-template-columns:108px 1fr 48px;padding:env(safe-area-inset-top) 12px 0}
  .app-header:has(.back-btn){grid-template-columns:48px 1fr 48px}
  .header-logo--brand{width:124px;height:38px}
  .header-title{width:min(52vw,210px);font-size:.9rem}
}
@media (max-height:760px){
  .app-header{height:calc(70px + env(safe-area-inset-top))}
  .header-logo--brand{width:128px;height:39px}
}

/* Step 4.2 — symmetric header, cropped logo asset */
.app-header{
  grid-template-columns:64px minmax(0,1fr) 64px !important;
  gap:8px !important;
  height:calc(76px + env(safe-area-inset-top)) !important;
  padding:env(safe-area-inset-top) 14px 0 !important;
}
.header-logo--brand{
  width:58px !important;
  height:48px !important;
  object-fit:contain !important;
  justify-self:start !important;
  align-self:center !important;
  filter:drop-shadow(0 0 18px rgba(255,117,157,.28));
}
.header-title{
  position:static !important;
  left:auto !important;
  transform:none !important;
  width:auto !important;
  min-width:0;
  justify-self:stretch;
  text-align:center !important;
  padding:0 6px !important;
  pointer-events:auto !important;
  font-size:.98rem !important;
}
.app-header>.icon-btn{
  width:44px !important;
  height:44px !important;
  justify-self:end !important;
  align-self:center !important;
}
.app-header>.back-btn{
  width:44px !important;
  height:44px !important;
  justify-self:start !important;
}
@media (max-width:390px){
  .app-header{grid-template-columns:58px minmax(0,1fr) 58px !important;padding:env(safe-area-inset-top) 11px 0 !important}
  .header-logo--brand{width:54px !important;height:44px !important}
  .app-header>.icon-btn,.app-header>.back-btn{width:42px !important;height:42px !important}
  .header-title{font-size:.9rem !important}
}

/* v3.1 — lower bottom navigation in standalone/full-screen layouts */
.bottom-nav{
  bottom:max(4px, calc(env(safe-area-inset-bottom) - 10px)) !important;
}
@media (display-mode: standalone){
  .bottom-nav{
    bottom:max(4px, calc(env(safe-area-inset-bottom) - 10px)) !important;
  }
}