.pixel-break{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:24px}.pixel-break-head{display:grid;gap:6px;order:1}.pixel-break-copy{display:contents}.pixel-break-copy-main{display:grid;gap:10px;order:2;padding:18px 20px;border:1px solid rgba(87,220,255,.22);border-radius:16px;background:linear-gradient(135deg,rgba(9,24,47,.82),rgba(18,15,48,.72))}.pixel-break-copy-main::before{content:"TODAY'S GAME";font-family:monospace;font-size:.82rem;font-weight:900;letter-spacing:.12em;color:#dd73ff}.pixel-break h2,.pixel-break p{margin:0}.pixel-break-copy-main h2{font-size:clamp(2rem,4vw,3.45rem);line-height:1.02;letter-spacing:-.035em}.pixel-break-copy-main #pixel-break-description{max-width:80ch;font-size:1.05rem;line-height:1.55;opacity:.94}.pixel-break-challenge-context{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:7px 11px;border:1px solid rgba(255,220,70,.28);border-radius:999px;background:rgba(255,205,40,.07);color:#ffe36b;font-size:.82rem;font-weight:900;letter-spacing:.035em}.pixel-break-brand{margin:0;font-weight:900;letter-spacing:.04em}.pixel-break-actions{display:flex;gap:10px;flex-wrap:wrap;order:4}.pixel-break-frame-shell{position:relative;width:100%;min-height:520px;padding:14px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(8,12,28,.94),rgba(5,7,19,.98));box-sizing:border-box;order:3}.pixel-break-frame{display:block;width:100%;height:min(72vh,720px);min-height:492px;border:0;border-radius:12px;background:#050713}.pixel-break-note{opacity:.8;order:5}
.city-research-head{margin-bottom:18px}.city-research-head p{max-width:70ch}.city-research-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.city-research-card{padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(10,14,30,.58)}.city-research-card h3{margin:.45rem 0}.city-research-source{display:inline-block;margin-top:10px;font-size:.86rem}.city-research-separation{font-size:.9rem;opacity:.82;border-left:3px solid currentColor;padding-left:12px}@media(max-width:700px){.pixel-break{padding:20px}.pixel-break-actions{flex-direction:column}.pixel-break-actions .btn{width:100%;box-sizing:border-box;text-align:center}.pixel-break-frame-shell{padding:10px;min-height:68vh}.pixel-break-frame{min-height:calc(68vh - 20px)}}
/* v7 2026-08-22 — Pixel Break real-phone responsive containment.
   Universal rule: text and controls reflow before anything clips or hides. */
.pixel-break,
.pixel-break-copy-main,
.pixel-break-frame-shell,
.pixel-break-frame,
.pixel-break-copy-main > *{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.pixel-break-copy-main h2,
.pixel-break-copy-main #pixel-break-description{
  overflow-wrap:anywhere;
  word-break:normal;
}
.pixel-break-challenge-context{
  width:auto;
  min-width:0;
  max-width:100%;
  justify-self:start;
  white-space:normal;
  flex-wrap:wrap;
  overflow-wrap:anywhere;
  line-height:1.35;
}
.pixel-break-frame{max-width:100%;}

@media(max-width:700px){
  .pixel-break{
    width:100%;
    padding:16px 12px;
    gap:14px;
  }
  .pixel-break-copy-main{
    width:100%;
    padding:16px 14px;
  }
  .pixel-break-copy-main h2{
    font-size:clamp(1.8rem,8.8vw,2.45rem);
    line-height:1.05;
    letter-spacing:-.025em;
  }
  .pixel-break-copy-main #pixel-break-description{
    font-size:1rem;
    line-height:1.48;
  }
  .pixel-break-challenge-context{
    display:flex;
    border-radius:16px;
    padding:8px 10px;
    font-size:.78rem;
    letter-spacing:.02em;
  }
  .pixel-break-frame-shell{
    width:100%;
    padding:8px;
    min-height:0;
  }
  .pixel-break-frame{
    width:100%;
    min-height:0;
  }
}

@media(max-width:420px){
  .pixel-break{padding:14px 8px;}
  .pixel-break-copy-main{padding:14px 12px;}
  .pixel-break-copy-main h2{font-size:clamp(1.65rem,8.5vw,2.1rem);}
}


/* v11 2026-08-22 — Public City Research Desk spacing guardrail.
   Boxed public surfaces must reserve deliberate internal padding and
   separation so headings, copy, sources, and cards never crowd a border. */
#city-research-desk{
  min-width:0;
  margin-top:20px;
  padding:clamp(24px,4vw,42px);
  box-sizing:border-box;
}
#city-research-desk .city-research-head{
  display:grid;
  gap:12px;
  margin:0 0 20px;
}
#city-research-desk .city-research-head > *{
  min-width:0;
  max-width:100%;
}
#city-research-desk .city-research-head h2{
  margin:0;
}
#city-research-desk .city-research-head p{
  margin:0;
}
#city-research-desk .city-research-grid{
  min-width:0;
}
#city-research-desk .city-research-card{
  min-width:0;
  padding:20px;
  box-sizing:border-box;
}
#city-research-desk .city-research-card > *{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}
@media(max-width:720px){
  #city-research-desk{
    margin-top:16px;
    padding:20px 16px;
  }
  #city-research-desk .city-research-card{
    padding:17px;
  }
}