/* Legacy interactive widgets extracted from app.css for prototype shell */
.search-suggest{position:absolute;top:calc(100% + .4rem);left:0;right:auto;z-index:200;margin:0;padding:.3rem;list-style:none;
  min-width:min(300px,88vw);width:max-content;max-width:min(90vw,440px);
  background:var(--paper);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);max-height:60vh;overflow:auto}
.suggest-item a .s-label{white-space:normal;line-height:1.25}
.suggest-item{margin:0}
.suggest-item a{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;padding:.5rem .7rem;border-radius:9px;text-decoration:none;color:var(--ink)}
.suggest-item a .s-label{font-weight:600;font-size:.92rem}
.suggest-item a .s-meta{font-size:.74rem;color:var(--muted);white-space:nowrap;flex:none}
.suggest-item.active a,.suggest-item a:hover{background:color-mix(in srgb,var(--grass-bright) 12%,var(--paper))}
.shirt-card-rating{font-family:"Archivo Narrow",sans-serif;font-size:.88rem;margin:.35rem 0 0;display:flex;align-items:center;gap:.25rem;color:var(--grass)}
.shirt-card-rating-stars{color:var(--grass-bright);font-size:.95rem;line-height:1}
.shirt-card-rating .muted{font-size:.82rem}
.challenge-lb-harmony{font-family:"Archivo Narrow",sans-serif;font-weight:700;font-size:1.15rem;color:var(--grass)}
.challenge-lb-harmony small{font-weight:500;opacity:.7;font-size:.75em}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(10,15,10,.92);display:flex;align-items:center;justify-content:center;padding:2vmin;overflow:auto;touch-action:pinch-zoom}
.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:zoom-in;transition:transform .2s var(--ease)}
.lightbox img.zoomed{cursor:zoom-out;max-width:none;max-height:none;transform:scale(2);border-radius:0}
.lightbox-close{position:absolute;top:1rem;right:1.4rem;background:none;border:none;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;opacity:.8}
.lightbox-close:hover{opacity:1}
.eleven-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.eleven-count{text-align:center;font-family:"Fraunces",serif;font-size:1.4rem;margin:1rem 0 0;color:var(--muted)}
.eleven-count [data-xi-count]{color:var(--grass-bright);font-weight:600}
.pitch{position:relative;width:100%;max-width:720px;margin:1.5rem auto 0;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;
  background:
    linear-gradient(0deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/100% 8.33% ,
    repeating-linear-gradient(180deg,#1f7a44 0 12.5%,#1b6e3d 12.5% 25%);
  box-shadow:var(--shadow-lg);border:3px solid rgba(255,255,255,.18)}
.pitch::before{content:"";position:absolute;left:8%;right:8%;top:6%;bottom:6%;border:2px solid rgba(255,255,255,.35);border-radius:6px}
.pitch::after{content:"";position:absolute;left:33%;right:33%;top:-9%;aspect-ratio:1/1;border:2px solid rgba(255,255,255,.3);border-radius:50%}
.slot{position:absolute;transform:translate(-50%,-50%);width:clamp(64px,15vw,88px);min-height:44px;padding:0;border:none;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.25rem;color:#fff}
.slot-pick{width:100%;border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;min-height:44px}
.slot-img{width:clamp(56px,12vw,76px);height:clamp(56px,12vw,76px);border-radius:50%;background:rgba(255,255,255,.16);
  background-size:cover;background-position:center;border:2.5px solid rgba(255,255,255,.85);box-shadow:0 6px 16px rgba(0,0,0,.35);
  display:grid;place-items:center;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.slot:hover .slot-img{transform:scale(1.07);border-color:var(--lime)}
.slot:not(.filled) .slot-img::after{content:"+";font-size:1.6rem;font-weight:700;color:rgba(255,255,255,.8)}
.slot-tag{font-family:"Archivo Narrow",sans-serif;font-size:.72rem;font-weight:600;max-width:96px;text-align:center;
  line-height:1.05;text-shadow:0 1px 3px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-cap{position:absolute;top:-6px;right:0;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  font:700 .85rem/42px "Archivo Narrow",sans-serif;text-align:center;border:1.5px solid rgba(255,255,255,.7);cursor:pointer;
  user-select:none;transition:transform .15s var(--ease),background .15s var(--ease);z-index:2}
.slot:not(.filled) .slot-cap{display:none}
.slot-cap:hover{transform:scale(1.08)}
.slot-cap.on{background:#F0C554;color:#16201A;border-color:#fff}
.slot.is-captain .slot-img{border-color:#F0C554;box-shadow:0 0 0 3px rgba(240,197,84,.55),0 6px 16px rgba(0,0,0,.35)}
.eleven-cap-hint{font-size:.85rem;color:var(--muted);text-align:center;margin:.6rem 0 0}
.eleven-toolbar{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end;margin-top:1.1rem}
.eleven-field{display:flex;flex-direction:column;gap:.3rem;flex:0 0 auto}
.eleven-field--grow{flex:1 1 240px;min-width:0}
.eleven-field>span{font-family:"Archivo Narrow",sans-serif;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.eleven-field select,.eleven-field input{border:1.5px solid var(--line);border-radius:10px;padding:.55rem .8rem;font:inherit;background:var(--cream);color:var(--ink);width:100%}
.eleven-field select:focus,.eleven-field input:focus{outline:none;border-color:var(--grass-bright)}
.harmony{display:flex;gap:1.1rem;align-items:center;max-width:720px;margin:1.2rem auto 0;padding:1rem 1.2rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.harmony[hidden]{display:none}
.harmony-score{flex:0 0 auto;font-family:"Fraunces",serif;font-weight:600;line-height:1;color:var(--grass-bright);
  font-size:2.6rem;display:flex;align-items:baseline;gap:.12rem}
.harmony-score small{font-size:1rem;color:var(--muted);font-family:"Archivo Narrow",sans-serif}
.harmony-body{flex:1 1 auto;min-width:0}
.harmony-eyebrow{font-family:"Archivo Narrow",sans-serif;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0}
.harmony-label{display:block;font-family:"Fraunces",serif;font-size:1.15rem;color:var(--ink);margin:.1rem 0 .45rem}
.harmony-meter{height:8px;border-radius:999px;background:var(--cream-2);overflow:hidden}
.harmony-meter span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--grass),var(--grass-bright));transition:width .4s var(--ease)}
.harmony-note{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)}
.harmony-covered{opacity:.85}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.eleven-save{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:1.4rem auto 0}
.eleven-save-hint{font-size:.82rem;color:var(--muted)}
.eleven-save .btn[disabled]{opacity:.5;cursor:not-allowed}
.eleven-vote{display:inline-flex;align-items:center;gap:.4rem}
.eleven-vote .vote-heart{opacity:.9}
.eleven-vote .vote-label{opacity:.85;font-weight:500}
.eleven-vote.voted,.eleven-vote[disabled]{cursor:default}
.eleven-show-cta{display:flex;gap:1.2rem;align-items:center;justify-content:center;flex-wrap:wrap;margin:1.6rem 0 0}
.eleven-show-gallery{color:var(--grass);font-weight:600}
.elevens-sort{display:flex;gap:.4rem;margin:1.2rem 0 0}
.elevens-sort a{padding:.4rem .9rem;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);font-family:"Archivo Narrow",sans-serif;font-weight:600;font-size:.85rem}
.elevens-sort a.on{background:var(--grass);color:#fff;border-color:var(--grass)}
.eleven-featured{display:grid;grid-template-columns:1.4fr 1fr;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;color:inherit;margin-top:1.4rem;box-shadow:0 6px 20px rgba(0,0,0,.07);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.eleven-featured:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.eleven-featured-thumb{position:relative;background:var(--grass);aspect-ratio:1200/630}
.eleven-featured-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.eleven-featured-ribbon{position:absolute;top:.8rem;left:.8rem;background:#F0C554;color:#16201A;font-family:"Archivo Narrow",sans-serif;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding:.3rem .7rem;border-radius:999px;z-index:1}
.eleven-featured-meta{display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:1.4rem 1.6rem}
.eleven-featured-meta strong{font-family:"Fraunces",serif;font-size:1.5rem;color:var(--ink);line-height:1.15}
.eleven-featured-cta{align-self:flex-start;margin-top:.4rem}
.eleven-promo-lead{color:var(--muted);max-width:62ch;margin:.2rem 0 1rem}
.eleven-gallery-link{display:inline-block;margin-left:.4rem;color:var(--grass);font-weight:600;white-space:nowrap}
.elevens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;margin-top:1.4rem}
.eleven-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;color:inherit;box-shadow:0 4px 14px rgba(0,0,0,.05);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.eleven-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.1)}
.eleven-card-thumb{display:block;aspect-ratio:1200/630;background:var(--grass)}
.eleven-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.eleven-card-meta{display:flex;flex-direction:column;gap:.35rem;padding:.8rem 1rem}
.eleven-card-meta strong{font-family:"Fraunces",serif;font-size:1.05rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eleven-card-stats{display:flex;gap:.8rem;font-family:"Archivo Narrow",sans-serif;font-size:.82rem;color:var(--muted)}
.ec-harmony{opacity:.85}
.elevens-pager{display:flex;gap:1rem;align-items:center;justify-content:center;margin:1.8rem 0 0;font-family:"Archivo Narrow",sans-serif}
.elevens-pager a{color:var(--grass);font-weight:600}
.elevens-pager span{color:var(--muted)}
.pitch--embed{margin:0;max-width:100%}
.picker{position:fixed;inset:0;z-index:200;background:rgba(17,26,21,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}
.picker-panel{background:var(--paper);width:100%;max-width:560px;max-height:82vh;border-radius:var(--r-lg) var(--r-lg) 0 0;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.picker-head{display:flex;gap:.6rem;padding:1rem;border-bottom:1px solid var(--line)}
.picker-head input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:.6rem 1rem;font:inherit;background:var(--cream)}
.picker-filters{display:flex;gap:.5rem;padding:.65rem 1rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.picker-filter{flex:1;min-width:140px}
.picker-filter select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:.5rem .7rem;font:inherit;background:var(--cream);color:inherit;cursor:pointer}
.picker-list{overflow:auto;padding:.5rem}
.picker-item{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;border:none;background:none;cursor:pointer;padding:.5rem .6rem;border-radius:10px;color:inherit}
.picker-item:hover{background:var(--cream-2)}
.picker-remove{width:100%;border:none;background:#fbecec;color:#b23;padding:.6rem;border-radius:10px;cursor:pointer;margin-bottom:.4rem;font:inherit;font-weight:600}
.picker-empty{text-align:center;color:var(--muted);padding:2rem}
.picker-retry{background:none;border:none;color:var(--grass);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.home-game-card{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:1.2rem;align-items:center;text-decoration:none;color:inherit;background:var(--paper);border-radius:var(--r-lg);padding:1rem;box-shadow:var(--shadow)}
.home-game-dna{display:block;min-height:140px;border-radius:12px}
.home-game-copy{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.home-game-copy .btn{margin-top:.4rem}
.game-archive-list{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem}
.game-archive-list a{display:flex;justify-content:space-between;padding:.7rem .9rem;background:var(--paper);border-radius:10px;box-shadow:var(--shadow);text-decoration:none;color:inherit}
.game-day-reveal{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:1.4rem;align-items:start}
.game-day-thumb{max-width:180px;border-radius:10px;margin-top:.6rem}
html[data-theme="dark"] .game-verdict.is-win{color:var(--grass-bright)}
.shirt-rating{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;margin:.7rem 0 0}
.shirt-rating .rating-avg{font-family:"Archivo Narrow",sans-serif;font-size:.95rem;display:inline-flex;align-items:baseline;gap:.35rem}
.shirt-rating .rating-avg-label{text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;color:var(--muted);font-weight:600}
.shirt-rating .stars{display:inline-flex;gap:.1rem}
.shirt-rating .star{border:none;background:none;padding:.15rem .2rem;margin:0;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--line);transition:color .12s,transform .1s;min-width:36px;min-height:36px}
.shirt-rating .star.on{color:#f4b400}
.shirt-rating .star:hover{transform:scale(1.12)}
.shirt-rating.saving .stars{opacity:.5;pointer-events:none}
.shirt-rating .rating-yours{font-size:.88rem}
.rating-summary{font-family:"Archivo Narrow",sans-serif;color:var(--ink);font-size:.98rem}
.rating-summary strong{font-family:"Fraunces",serif;font-size:1.1rem;color:var(--grass)}
.rating-summary .muted{color:var(--muted)}
.rating-saving{color:var(--muted);font-style:italic;opacity:.85}
.rating-error{color:#b3261e;font-style:italic}
html[data-theme="dark"] .rating-error{color:#f2a9a2}
.shirt-rating.saving .star{pointer-events:none;opacity:.7}
.game-page{padding-top:clamp(1.2rem,3vw,2rem);max-width:640px}
.game-head{margin:0 0 1.4rem}
.game-lead{color:var(--muted);margin:.4rem 0 0}
.game{display:flex;flex-direction:column;gap:1.1rem}
.game-dna{height:clamp(120px,26vw,190px);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.game-clues{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.game-clue{display:inline-flex;flex-direction:column;gap:.05rem;padding:.4rem .8rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);animation:clueIn .3s var(--ease)}
.game-clue .k{font-family:"Archivo Narrow",sans-serif;text-transform:uppercase;letter-spacing:.09em;font-size:.66rem;color:var(--muted)}
.game-clue .v{font-family:"Fraunces",serif;font-weight:600;color:var(--ink)}
.game-guesses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.game-guess{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .9rem;border-radius:12px;border:1px solid var(--line);background:var(--paper);font-weight:600}
.game-guess .g-mark{font-size:1.1rem;font-weight:700}
.game-guess.is-right{background:color-mix(in srgb,var(--grass) 14%,var(--paper));border-color:var(--grass)}
.game-guess.is-right .g-mark{color:var(--grass)}
.game-guess.is-wrong{color:var(--ink)}
.game-guess.is-wrong .g-mark{color:#b3261e}
.game-form{display:flex;gap:.6rem}
.game-input-wrap{position:relative;flex:1 1 auto;min-width:0}
.game-input-wrap input{width:100%;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:.7rem 1.1rem;font:inherit;color:var(--ink)}
.game-input-wrap input:focus{outline:none;border-color:var(--grass-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--grass-bright) 22%,transparent)}
.game-input-wrap input.shake{animation:shake .3s}
.game-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;list-style:none;margin:0;padding:.3rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);max-height:260px;overflow:auto}
.game-sug{padding:.55rem .8rem;border-radius:9px;cursor:pointer;font-weight:600}
.game-sug:hover,.game-sug.active{background:var(--cream-2)}
.game-remaining{font-family:"Archivo Narrow",sans-serif;color:var(--muted);margin:0;min-height:1.2em}
.game-result{border-top:1px solid var(--line);padding-top:1.1rem}
.game-verdict{font-family:"Fraunces",serif;font-size:1.2rem;margin:0 0 .7rem}
.game-verdict.is-win{color:var(--grass)}
.game-reveal{display:flex;align-items:center;gap:1rem;padding:.7rem;border:1px solid var(--line);border-radius:16px;background:var(--paper);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.game-reveal:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.game-reveal img{width:84px;height:105px;object-fit:cover;border-radius:10px;background:var(--cream-2);flex:none}
.game-reveal-meta{display:flex;flex-direction:column;gap:.15rem}
.game-reveal-meta strong{font-family:"Fraunces",serif;font-size:1.1rem}
.game-reveal-cta{color:var(--grass-bright);font-family:"Archivo Narrow",sans-serif;font-weight:600;margin-top:.2rem}
.game-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.game-stats{border-top:1px solid var(--line);padding-top:1.1rem}
.game-stats h2{font-size:1.15rem;margin:0 0 .8rem}
.game-stats h3{font-size:.9rem;margin:1.1rem 0 .5rem;color:var(--muted);font-family:"Archivo Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em}