@font-face{font-family:BattleComic;src:url('assets/bangers.ttf') format('truetype');font-display:swap}
@font-face{font-family:BattleScript;src:url('assets/lobster.ttf') format('truetype');font-display:swap}
.current-grid>.comic-rivals,.current-grid>.feature-card-shell{grid-column:1/-1;min-width:0}
.comic-rivals,.feature-card-shell{width:100%;max-width:980px;margin:auto;container-type:inline-size}
.comic-rivals .battle-card{font-family:var(--body);overflow:visible}
.comic-rivals .battle-info,.comic-rivals .battle-footer{font-family:var(--display);text-transform:none}
.comic-rivals .battle-stage{width:100%}
.comic-rivals .battle-results{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:12px;border:2px solid #fffbee;border-radius:15px;background:#212942}
.comic-rivals .battle-results>span{display:flex;align-items:center;gap:7px;font-size:14px}
.feature-card{position:relative;aspect-ratio:3/2;isolation:isolate;margin:0;color:#fffbee;font-family:var(--body);text-align:center}
.feature-frame{position:absolute;inset:0;width:100%;height:100%;z-index:-1;object-fit:contain}
.feature-mobile-heading{display:none}
.feature-card p,.feature-card h3{margin:0;text-transform:none;letter-spacing:0}
.feature-card .table-result{background:transparent;padding:0;font-size:inherit;color:inherit;border:0}
.feature-card .score{color:inherit}
.armored-player{position:absolute;top:43.2%;left:16%;width:68%;font:800 clamp(20px,4.3cqw,42px)/1.1 var(--display);overflow-wrap:anywhere;text-shadow:2px 3px #090e20}
.armored-player small{font:700 .45em var(--body)}
.armored-match{position:absolute;top:51.8%;left:17%;width:66%;font:700 clamp(12px,2.2cqw,23px)/1.2 var(--body)}
.armored-selection{position:absolute;top:57%;left:18%;width:64%;font:400 clamp(26px,7cqw,70px)/1.05 BattleComic,sans-serif!important;color:#a5ff40;-webkit-text-stroke:.14cqw #090e20;paint-order:stroke fill;overflow-wrap:anywhere}
.armored-status{position:absolute;top:70.7%;left:19%;width:62%;font:700 clamp(12px,1.7cqw,18px)/1.2 var(--body)}
.armored-footer{position:absolute;top:76%;left:21%;width:58%;height:7%;display:flex;align-items:center;justify-content:space-between;gap:12px;font:800 clamp(10px,2.1cqw,21px)/1.2 var(--body)}
.armored-footer strong{color:#a5ff40;text-transform:uppercase;display:flex;align-items:center;gap:4px}
.armored-footer svg,.friendship-footer svg{width:1.1em;height:1.1em;vertical-align:middle;flex-shrink:0}
.friendship-card{color:#090e20}
.friendship-match{position:absolute;top:51.8%;left:33%;width:34%;font:800 clamp(10px,1.75cqw,18px)/1.2 var(--body)}
.friendship-selection{position:absolute;top:58.2%;left:27%;width:46%;font:400 clamp(24px,5.3cqw,54px)/1.07 BattleComic,sans-serif!important;overflow-wrap:anywhere}
.friendship-players{position:absolute;top:68%;left:24%;width:52%;height:10%;display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:10px}
.friendship-players>div{min-width:0;display:grid;gap:.6cqw}
.friendship-players strong{font:800 clamp(16px,2.7cqw,29px)/1.05 var(--display);overflow-wrap:anywhere}
.friendship-players strong small{font:700 .45em var(--body)}
.friendship-players>div>span{font:700 clamp(11px,1.6cqw,17px)/1.1 var(--body)}
.friendship-amp{font:400 5cqw/1 BattleComic,sans-serif;color:#ffdf06;-webkit-text-stroke:1px #090e20;paint-order:stroke fill}
.friendship-footer{position:absolute;top:80%;left:18%;width:64%;height:6%;display:flex;align-items:center;justify-content:space-between;gap:10px;font:800 clamp(10px,1.65cqw,18px)/1.2 var(--body)}
.friendship-footer strong{text-transform:uppercase;background:#ffe86f;border-radius:20px;padding:.5cqw .8cqw;display:flex;align-items:center;gap:5px}


.inventory>div{box-shadow:3px 4px #090e20,inset 0 2px 3px #ffffff20}
.weekly-comic{color:#090e20;background:linear-gradient(170deg,#fffef5,#f5efdf);border:4px solid #fffbee;outline:2px solid #090e20;box-shadow:5px 6px #090e20,inset 0 0 0 2px #090e20,inset 0 3px 3px white;border-radius:21px;overflow:hidden;padding:20px 22px 8px;margin:26px 0 30px;position:relative;isolation:isolate}
.weekly-comic:before{content:"";position:absolute;top:0;right:0;width:220px;height:125px;z-index:-1;background:radial-gradient(#ce655925 1px,transparent 1.4px) 0 0/7px 7px;mask-image:linear-gradient(225deg,#000,transparent)}
.weekly-header{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:0 0 18px}
.weekly-title{min-width:0}.weekly-title p{font:800 13px var(--body);letter-spacing:.5px;margin:0 0 5px}.weekly-title h2{font:800 23px/1.15 var(--display);letter-spacing:-.4px;margin:0;text-transform:none}
.weekly-comic .bubble{font:400 27px/1 BattleComic,Impact,sans-serif;background:linear-gradient(#fff8a6,#f1d65c);border:3px solid #090e20;border-radius:13px;padding:10px 15px;box-shadow:2px 3px #090e20,inset 0 2px 2px #ffffffb0;transform:rotate(-4deg);display:block;white-space:nowrap;position:relative;flex:none}
.weekly-comic .bubble:after{content:"";position:absolute;width:12px;height:10px;bottom:-8px;right:20px;background:#f1d65c;border-bottom:3px solid #090e20;border-right:3px solid #090e20;transform:skewY(-28deg)}
.weekly-comic.complete .bubble{background:linear-gradient(#d6ffe3,#a8edb8)}.weekly-comic.complete .bubble:after{background:#a8edb8}
.weekly-comic .submission-count{font-size:13px;font-weight:800;background:#fff7be;border:2px solid #ddd4a3;border-radius:30px;padding:7px 12px;white-space:nowrap}
.weekly-comic.complete .submission-count{background:#d9f5de;border-color:#9bb6a0}
.weekly-comic .slate-row{display:grid;grid-template-columns:128px minmax(0,1fr) auto;align-items:center;gap:20px;border-top:1px solid #beb9aa;padding:17px 0;min-height:98px}
.weekly-comic .slate-label{border-left:5px solid #bba75a;padding-left:13px}.slate-label strong{font:800 18px/1.15 var(--display);display:block}.slate-label small{display:block;font-size:12px;color:#596070;margin-top:4px}.slate-row.special .slate-label{border-color:#a88fd2}
.weekly-comic .slate-content{min-width:0}.slate-content h3{font:800 21px/1.2 var(--display);letter-spacing:-.2px;margin:0 0 5px;display:flex;align-items:center;gap:9px;overflow-wrap:anywhere;text-transform:none}
.slate-content .pick-enhancement{flex:none}.slate-content .pick-enhancement img{width:35px;height:30px;object-fit:contain}.slate-content .pick-enhancement small,.slate-content .plain-pick{display:none}
.slate-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:#4b525a;font-size:13px}.slate-status{font-size:12px;font-weight:800;padding:3px 8px;border-radius:6px;background:#ffecab;color:#53441a}.slate-row.done .slate-status{background:#d3efdb;color:#1e5637}.slate-row.closed .slate-status{background:#e0dfda;color:#40444e}
.weekly-cta{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:2px solid #090e20;border-radius:12px;background:#f87885;color:#090e20;font:800 14px var(--body);box-shadow:2px 3px #090e20,inset 0 2px 2px #ffffff8c;white-space:nowrap;cursor:pointer}.slate-row.done .weekly-cta{background:#a8edb8}.slate-row.closed .weekly-cta{background:#b5a0f4}.weekly-cta:hover{filter:brightness(1.07)}
@media(max-width:760px){.weekly-comic{padding:17px 17px 4px}.weekly-header{flex-wrap:wrap;gap:13px}.weekly-title{flex:1}.weekly-title h2{font-size:21px}.weekly-comic .bubble{font-size:24px}.weekly-comic .slate-row{grid-template-columns:104px minmax(0,1fr);gap:12px 16px;padding:17px 0}.slate-label{align-self:start;margin-top:3px}.slate-row .weekly-cta{grid-column:2;justify-self:start}.slate-content h3{font-size:20px}.weekly-header .submission-count{margin-left:auto}}
/* Full approved frames remain intact on phones. Data stays in the printed slots.
   A readable disclosure below each frame provides full values at small sizes. */
@media(max-width:620px){.current-grid{grid-template-columns:minmax(0,1fr)}}
.feature-card{overflow:visible}
.feature-frame{display:block;clip-path:none;object-fit:contain;pointer-events:none}
.feature-card .armored-player{font-size:4.3cqw;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature-card .armored-match{font-size:2.2cqw;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature-card .armored-selection{font-size:7cqw!important;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature-card .armored-status{font-size:1.7cqw}
.feature-card .armored-footer{font-size:2.1cqw;gap:1cqw}
.feature-card .friendship-match{font-size:1.75cqw;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature-card .friendship-selection{font-size:5.3cqw!important;line-height:1.07;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature-card .friendship-players{grid-template-columns:minmax(0,1fr) 4cqw minmax(0,1fr);gap:1cqw}
.feature-card .friendship-players strong{font-size:2.7cqw;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature-card .friendship-players>div>span{font-size:1.6cqw;line-height:1.1}
.feature-card .friendship-footer{font-size:1.65cqw;gap:1cqw}
.feature-card .friendship-amp{font-size:5cqw;-webkit-text-stroke:.1cqw #090e20}
.feature-card-details{margin:8px 0 0;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:14px/1.5 var(--body);color:var(--cream);text-align:left}
.feature-card-details summary{padding:12px 0;min-height:44px;cursor:pointer;font-weight:700}
.feature-card-details summary:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.feature-card-details p{margin:0 0 10px;overflow-wrap:anywhere}
@media(min-width:621px){.feature-card-details:not(.has-long-content){display:none}}
@media(max-width:430px){.weekly-header{display:grid;grid-template-columns:1fr auto}.weekly-comic .bubble{grid-column:1/3;justify-self:start;margin-bottom:6px}.weekly-title h2{font-size:20px}.weekly-header .submission-count{font-size:11px;padding:5px 8px}.weekly-comic .slate-row{grid-template-columns:80px minmax(0,1fr);gap:11px}.slate-label{padding-left:9px!important}.slate-label strong{font-size:16px}.slate-content h3{font-size:19px}.weekly-comic{padding-left:13px;padding-right:13px}}

.comic-rivals .rival h2{text-transform:none}

/* 3.3.1 iPhone hardening — Home Current Week / "PICK IS IN!".
   visual-refresh.css remains the owner of this component. */
@media(max-width:500px){
  .weekly-comic{
    padding:15px 14px 8px;
    margin:20px 0 24px;
    border-radius:18px;
  }

  .weekly-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px 12px;
    align-items:start;
    padding-bottom:14px;
  }

  .weekly-title{
    grid-column:1/-1;
    min-width:0;
    order:3;
  }

  .weekly-comic .bubble{
    grid-column:1;
    justify-self:start;
    max-width:100%;
    margin:0;
    padding:8px 11px;
    font-size:clamp(20px,6.3vw,24px);
    line-height:1;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .weekly-header .submission-count{
    grid-column:2;
    justify-self:end;
    align-self:center;
    margin:0;
    max-width:112px;
    text-align:center;
    white-space:normal;
    line-height:1.25;
    font-size:11px;
    padding:5px 8px;
  }

  .weekly-title p{
    margin-bottom:4px;
    font-size:11px;
    line-height:1.3;
  }

  .weekly-title h2{
    font-size:19px;
    line-height:1.16;
    overflow-wrap:anywhere;
  }

  .weekly-comic .slate-row{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    min-height:0;
    padding:14px 0;
  }

  .weekly-comic .slate-label{
    margin:0;
    padding:0 0 0 10px !important;
    border-left-width:4px;
  }

  .weekly-comic .slate-label strong{
    font-size:16px;
    line-height:1.15;
  }

  .weekly-comic .slate-label small{
    margin-top:2px;
    font-size:11px;
  }

  .weekly-comic .slate-content{
    min-width:0;
    padding-left:14px;
  }

  .weekly-comic .slate-content h3{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    min-width:0;
    margin:0 0 6px;
    font-size:18px;
    line-height:1.2;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .weekly-comic .slate-content .pick-enhancement img{
    width:30px;
    height:26px;
    flex:none;
  }

  .weekly-comic .slate-meta{
    gap:6px 8px;
    font-size:12px;
    line-height:1.35;
  }

  .weekly-comic .weekly-cta{
    grid-column:1;
    width:100%;
    min-height:42px;
    justify-self:stretch;
    justify-content:center;
    margin:2px 0 0;
    padding:9px 12px;
    font-size:13px;
    white-space:normal;
  }
}

@media(max-width:360px){
  .weekly-header{
    grid-template-columns:1fr;
  }

  .weekly-comic .bubble,
  .weekly-header .submission-count,
  .weekly-title{
    grid-column:1;
    justify-self:start;
  }

  .weekly-header .submission-count{
    max-width:none;
    text-align:left;
  }

  .weekly-comic .slate-content{
    padding-left:10px;
  }
}
