/* 30PICK'EM — Universal Team Logo Shell v1
   One presentation shell for every team-logo surface. Markup comes from
   teamLogoShell() in premium-shell-v2.js:

     .logoShell.logoShell-<ctx>.logoShell--<mode>   outer ring + bezel
       .logoShellField                              inner safe area (clips)
         img.logoShellImg | .logoShellFallback
       [pick badges]                                outside the clip

   Proportions follow the approved board: inner safe area 80% of the outer
   diameter, logo box 72% of the inner area, object-fit:contain. Size is one
   custom property (--ls-size) set per context below, so every surface keeps
   its existing footprint. Pure CSS — no images, no animation. */

.logoShell{
  --ls-size:56px;
  --ls-rim:max(1.5px,calc(var(--ls-size) * .034));
  position:relative;
  flex:0 0 var(--ls-size);
  width:var(--ls-size);
  height:var(--ls-size);
  box-sizing:border-box;
  display:grid;
  place-items:center;
  border-radius:50%;
  /* Dark navy bezel over a cyan → gold gradient; the gradient shows only as a
     thin rim. */
  background:
    radial-gradient(closest-side,#07142a calc(100% - var(--ls-rim)),rgba(7,20,42,0) calc(100% - var(--ls-rim) + .75px)),
    linear-gradient(145deg,#86e8ff 0%,#34ade6 30%,#1a4a70 54%,#8a6a2c 78%,#e8c56e 100%);
  box-shadow:
    0 0 calc(var(--ls-size) * .14) rgba(52,182,255,.15),
    0 2px 5px rgba(0,0,0,.34);
}
.logoShellField{
  width:80%;
  height:80%;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 30%,#1a3d66 0%,#0e2645 56%,#091a33 100%);
  box-shadow:
    inset 0 0 0 1px rgba(130,205,255,.16),
    inset 0 -3px 6px rgba(0,0,0,.26);
}
.logoShellImg{
  display:block;
  width:72%;
  height:72%;
  object-fit:contain;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45));
  transform:scale(var(--ls-logo-scale,1));
}

/* Mode 2 — dark-logo protection: restrained neutral plate, same shell. */
.logoShell--contrast .logoShellField{
  background:radial-gradient(circle at 50% 30%,#f6f8fb 0%,#e3eaf2 58%,#ccd7e3 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 -3px 6px rgba(20,40,70,.16);
}
.logoShell--contrast .logoShellImg{filter:drop-shadow(0 1px 1px rgba(10,20,35,.22))}

/* Mode 3 — baked-background containment: a near-white plate plus multiply
   blending makes a baked white box take on the plate colour, and the field's
   circular clip hides any rectangle edge. Source pixels are not modified. */
.logoShell--contained .logoShellField{
  isolation:isolate;
  background:#f3f5f8;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.logoShell--contained .logoShellImg{
  width:84%;
  height:84%;
  mix-blend-mode:multiply;
  filter:none;
}

/* Fallback — missing or failed logo: team initials inside the same shell. */
.logoShell--fallback .logoShellField{
  background:radial-gradient(circle at 50% 30%,#1c4474 0%,#0f2a4d 60%,#0a1d38 100%);
}
.logoShellFallback{
  font-family:'Oswald',Inter,sans-serif;
  font-weight:700;
  font-size:max(8px,calc(var(--ls-size) * .27));
  line-height:1;
  letter-spacing:.02em;
  color:#dcebf7;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  user-select:none;
}

/* ---- Context sizes: each matches the footprint the surface already had. */
.logoShell-home{--ls-size:31px}          /* Home — Today in Sports */
.logoShell-gotw-home{--ls-size:38px}     /* Home — compact Game of the Week */
.logoShell-row{--ls-size:56px}           /* Picks — matchup rows */
.logoShell-gotw-pick{--ls-size:66px}     /* Picks — GOTW pick tiles */
.logoShell-pc5{--ls-size:46px}           /* Player Card — Favorite Teams */
@media(max-width:430px){
  .logoShell-row{--ls-size:48px}
  .logoShell-gotw-pick{--ls-size:64px}
}
@media(max-width:374px){
  .logoShell-pc5{--ls-size:42px}
}

/* Picks row pick/lock badges sit on the ring at 45°, not off the corner of a
   square box. */
.logoShell>.p2RowPickDot,.logoShell>.p2RowLockBadge{top:-1px;right:-1px;z-index:1}

/* Player Card: the list item keeps its grid slot; the shell draws the disc. */
#hubResumeBody .pc5Team.pc5TeamShell{border:0;background:none;overflow:visible}
