@import url('/app.v6.css');

/* Scribble brand layer v4 — visual-only overrides; gameplay layout remains in app.v6.css. */
:root{
  --scribble-navy:#071c49;
  --scribble-night:#131329;
  --scribble-gold:#ffbf16;
}
body{
  background:
    radial-gradient(circle at 50% -12%,rgba(31,93,193,.28),transparent 42%),
    var(--scribble-night);
}

/* Compact start-screen brand mark. The previous 200px+ hero wasted too much vertical space. */
h1.logo{
  display:block;
  width:min(26vw,118px);
  max-width:118px;
  aspect-ratio:1;
  height:auto;
  margin:0 auto 2px;
  overflow:hidden;
  text-indent:-9999px;
  color:transparent;
  background:url('https://cdn.hedyassist.com/public/hedy/4caf90c880c54ac484a7c903ebe25de2/projects/proj_32e267908a7d45d8855bdc1330a13e84/app/v2/objects/sha256/02/02db2b08573883492f8d9fa4da5308abf417be7472a57452d3b417113647a7f9?v=4') center/contain no-repeat;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));
}
h1.logo .pen{display:none!important}
h1.logo + .tag{
  text-align:center;
  margin-top:0;
  color:#b9c3ee;
}
@media (max-width:420px){
  h1.logo{width:min(24vw,92px);max-width:92px}
}
@media (max-height:720px){
  h1.logo{width:min(22vw,82px);max-width:82px}
  h1.logo + .tag{font-size:.92em}
}
@media (prefers-reduced-motion:no-preference){
  h1.logo{animation:scribbleLogoIn .28s cubic-bezier(.2,.85,.25,1) both}
  @keyframes scribbleLogoIn{
    from{opacity:0;transform:translateY(5px) scale(.97)}
    to{opacity:1;transform:none}
  }
}

/* Existing app hooks, when present. */
.installIco,
.installIcon,
[class*="install" i][class*="ico" i],
[class*="install" i][class*="icon" i]{
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  border-radius:11px!important;
  font-size:0!important;
  line-height:0!important;
  color:transparent!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
  background:#071c49 url('https://cdn.hedyassist.com/public/hedy/4caf90c880c54ac484a7c903ebe25de2/projects/proj_32e267908a7d45d8855bdc1330a13e84/app/v2/objects/sha256/f9/f9b38e391461feaa4d0f5f2be16adaf4623a1c268f7af3179d5a017539cd1efd?v=4') center/cover no-repeat!important;
  box-shadow:0 3px 12px rgba(0,0,0,.36)!important;
}
.installIco *,
.installIcon *,
[class*="install" i][class*="ico" i] *,
[class*="install" i][class*="icon" i] *{display:none!important}

/* v4 post-render hook inserts this when the app's install banner uses an emoji fallback. */
.brandInstallBarV4{
  align-items:center!important;
}
.brandInstallMarkV4{
  display:block!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:11px!important;
  background:#071c49 url('https://cdn.hedyassist.com/public/hedy/4caf90c880c54ac484a7c903ebe25de2/projects/proj_32e267908a7d45d8855bdc1330a13e84/app/v2/objects/sha256/f9/f9b38e391461feaa4d0f5f2be16adaf4623a1c268f7af3179d5a017539cd1efd?v=4') center/cover no-repeat!important;
  box-shadow:0 3px 12px rgba(0,0,0,.36)!important;
}
.brandInstallOldIconV4{display:none!important}
@media (max-width:420px){
  .brandInstallMarkV4{flex-basis:38px!important;width:38px!important;height:38px!important;min-width:38px!important}
}

.tvBrand{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.65vh;
}
.tvBrand::before{
  content:"";
  width:3.2vh;
  height:3.2vh;
  flex:0 0 3.2vh;
  border-radius:.7vh;
  background:#071c49 url('https://cdn.hedyassist.com/public/hedy/4caf90c880c54ac484a7c903ebe25de2/projects/proj_32e267908a7d45d8855bdc1330a13e84/app/v2/objects/sha256/f9/f9b38e391461feaa4d0f5f2be16adaf4623a1c268f7af3179d5a017539cd1efd?v=4') center/cover no-repeat;
}