/* Frag Watch / Guess The Pro — 2026 premium game, rebuilt without legacy game CSS */
:root{--g3-bg:#101217;--g3-panel:#1f232b;--g3-edge:#3e444e;--g3-orange:#ff985f;--g3-text:#f4f3f5;--g3-muted:#a6b1bf}
body.g3-page{background:radial-gradient(ellipse 760px 440px at 26% 160px,#8f3e1d1a,transparent 78%),var(--g3-bg);min-height:100vh}
.g3-page button,.g3-page input{font:inherit}
.g3-page button:focus-visible,.g3-page a:focus-visible,.g3-page input:focus-visible,.g3-page summary:focus-visible{outline:2px solid #ffb888;outline-offset:3px}
.g3-main{max-width:1210px}
.g3-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:50px 0 30px;border-bottom:1px solid #343a43}
.g3-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#f4a672;font-weight:950;font-size:10px;letter-spacing:1.8px}
.g3-live-dot{width:7px;height:7px;border-radius:50%;background:#ff8b4a;box-shadow:0 0 0 5px #ff914522}
.g3-intro h1{font-size:clamp(48px,6.5vw,76px);letter-spacing:-.073em;font-weight:950;line-height:1;margin:14px 0 13px;color:#f6f4f6}
.g3-intro h1 em{font-style:normal;color:#ff9054}
.g3-intro p{color:#a3adba;font-size:13px;margin:0;line-height:1.6}
.g3-timer{display:flex;flex-direction:column;gap:3px;min-width:194px;padding:14px 18px;border:1px solid #835238;border-radius:10px;background:linear-gradient(135deg,#402e29,#29252a);box-shadow:0 10px 30px #0002}
.g3-timer>span{font-size:9px;letter-spacing:1.6px;font-weight:950;color:#ffd0a9}
.g3-timer strong{font-size:29px;line-height:1.32;font-weight:950;letter-spacing:1.6px;font-variant-numeric:tabular-nums;color:#fff9f4;white-space:nowrap}
.g3-timer small{font-size:9px;color:#ad998a;font-weight:800;letter-spacing:.65px}
.g3-layout{display:grid;grid-template-columns:minmax(0,410px) minmax(0,1fr);gap:16px;align-items:start;margin:22px 0 0}
.g3-mystery,.g3-play{min-width:0;border-radius:13px;overflow:hidden}
.g3-mystery{position:relative;border:1px solid #6e4e3d;background:linear-gradient(165deg,#25232a,#1c2027);box-shadow:0 15px 45px #0005}
.g3-mystery:before{content:"";height:3px;position:absolute;left:0;right:0;top:0;z-index:6;background:linear-gradient(90deg,#ff9554,#ad5032 65%,transparent)}
.g3-mystery-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 21px 13px}
.g3-mystery-top>span:first-child{font-size:10px;color:#f4ac82;font-weight:950;letter-spacing:1.15px}
.g3-lock{border:1px solid #625249;background:#3e2f29;border-radius:5px;padding:6px 10px;color:#ffbb8e;font-size:9px;font-weight:950;letter-spacing:.5px}
.g3-portrait{height:390px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 50% 37%,#6f492e66,transparent 54%),linear-gradient(145deg,#28272e,#151921)}
.g3-portrait-grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(#e5b69030 1px,transparent 1px),linear-gradient(90deg,#e5b69030 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,transparent 2%,black 60%,transparent)}
.g3-halo{position:absolute;top:18%;left:50%;transform:translateX(-50%);width:280px;height:280px;border:1px solid #e6a06c25;box-shadow:0 0 0 43px #df784c0c,0 0 0 86px #df784c07;border-radius:50%}
.g3-silhouette{position:absolute;bottom:-20px;left:50%;width:270px;height:320px;transform:translateX(-50%);fill:#bf76534b;opacity:.72;z-index:1;transition:opacity .4s}
.g3-portrait img{position:absolute;top:0;max-width:none;width:170%;height:100%;object-fit:cover;object-position:50% 48%;left:calc((100% - 170%)*.5);z-index:2;transition:filter .6s ease,opacity .6s ease,transform .6s ease}
.g3-portrait img[data-player-focus="left"]{left:0}
.g3-portrait img[data-player-focus="right"]{left:-70%}
.g3-portrait[data-stage="0"] img{display:none!important}
.g3-portrait[data-stage="1"] img{filter:blur(34px) brightness(.45) saturate(.8);transform:scale(1.08);opacity:.92}
.g3-portrait[data-stage="2"] img{filter:blur(20px) brightness(.61) saturate(.85);transform:scale(1.06);opacity:.96}
.g3-portrait[data-stage="3"] img{filter:blur(10px) brightness(.76) saturate(.95);transform:scale(1.04);opacity:1}
.g3-portrait[data-stage="4"] img{filter:blur(4px) brightness(.9) saturate(1);transform:scale(1.02);opacity:1}
.g3-portrait[data-stage="5"] img{filter:none;transform:none;opacity:1}
.g3-portrait[data-stage="0"] .g3-silhouette{opacity:.77}
.g3-portrait[data-stage="1"] .g3-silhouette,.g3-portrait[data-stage="2"] .g3-silhouette{opacity:.14}
.g3-portrait[data-stage="3"] .g3-silhouette,.g3-portrait[data-stage="4"] .g3-silhouette,.g3-portrait[data-stage="5"] .g3-silhouette{opacity:0}
.g3-question,.g3-monogram{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:clamp(110px,12vw,160px);font-weight:950;line-height:1;color:#ffc08d;text-shadow:0 9px 38px #0d0c10c9;z-index:4;transition:opacity .4s}
.g3-portrait[data-stage="0"] .g3-question{opacity:1}
.g3-portrait[data-stage="1"] .g3-question{opacity:.60}
.g3-portrait[data-stage="2"] .g3-question{opacity:.27}
.g3-portrait[data-stage="3"] .g3-question{opacity:.09}
.g3-portrait[data-stage="4"] .g3-question,.g3-portrait[data-stage="5"] .g3-question{display:none}
.g3-portrait-overlay{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 54%,#15191dcc 100%);pointer-events:none}
.g3-image-label{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap;padding:8px 13px;border:1px solid #8e6c524a;border-radius:6px;background:#15191cbb;backdrop-filter:blur(10px);font-size:10px;font-weight:950;letter-spacing:1.6px;color:#ffbe89}
.g3-portrait[data-stage="5"] .g3-image-label{color:#c8edbb;border-color:#73926c70}
.g3-mystery-bottom{padding:20px 22px 20px;background:linear-gradient(#23262e,#1f2229);border-top:1px solid #383f48;min-height:95px}
.g3-profile-label{display:block;font-size:9px;font-weight:950;letter-spacing:1.45px;color:#aeb7c5}
.g3-mystery-bottom h2{font-size:30px;font-weight:950;line-height:1.15;letter-spacing:-.045em;margin-top:8px;overflow-wrap:anywhere}
.g3-mystery-bottom p{margin:9px 0 0;font-size:11px;line-height:1.7;color:#d2b6a5}
.g3-milestones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:15px 20px;border-top:1px solid #373b45;background:#1b1e25}
.g3-milestone{padding:7px 3px;border-radius:5px;border:1px solid #454851;text-align:center;color:#717c8b;background:#2a2d35;font-size:10px;font-weight:950;letter-spacing:.6px}
.g3-milestone.unlocked{color:#1b2121;background:#ff985c;border-color:#ffae7e}
.g3-milestone:last-child{font-size:9px;letter-spacing:.25px}
.g3-play{padding:31px 31px 28px;min-height:557px;border:1px solid #3a414a;background:linear-gradient(160deg,#262a33,#1c2028);box-shadow:0 15px 45px #0003}
.g3-play-head{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:0 0 28px;border-bottom:1px solid #3b414b}
.g3-panel-kicker{font-size:10px;font-weight:950;color:#ffa970;letter-spacing:1.25px}
.g3-play-head h2{font-size:clamp(26px,3vw,33px);letter-spacing:-.05em;line-height:1.1;margin-top:12px}
.g3-attempts{flex:0 0 117px;display:flex;flex-direction:column;gap:6px;align-items:center;padding:10px 12px;border-radius:8px;border:1px solid #71513f;background:#362c2a}
.g3-attempts span{font-size:9px;color:#ffbd8c;font-weight:950;letter-spacing:1.35px}
.g3-attempts strong{font-size:25px;color:#f8ede9;font-weight:950;font-variant-numeric:tabular-nums;line-height:1.2}
.g3-entry{margin-top:25px}
.g3-entry label{display:block;color:#b8c1ce;font-size:10px;letter-spacing:.9px;font-weight:950;margin-bottom:10px}
.guess-combobox{position:relative}
.g3-search{display:flex;align-items:center;gap:9px;background:#14171d;border:1px solid #57616c;border-radius:9px;padding:6px 7px 6px 14px;min-height:58px}
.g3-search:focus-within{border-color:#ffad7b;box-shadow:0 0 0 3px #ff9d651c}
.g3-search svg{width:21px;height:21px;stroke:#8290a1;stroke-width:1.8;stroke-linecap:round;fill:none;flex-shrink:0}
.g3-search input{outline:none;border:none;min-width:0;flex:1;color:#f7f7f9;background:transparent;font-size:14px;padding:10px 2px}
.g3-search input::placeholder{color:#7d8798}
.g3-search button{flex-shrink:0;border:none;border-radius:7px;padding:12px 17px;min-height:43px;min-width:110px;color:#201c19;background:#ff9559;font-size:11px;font-weight:950;letter-spacing:.45px}
.g3-search button:not(:disabled):hover{background:#ffb48a}
.g3-search button:disabled{color:#98a0ac;background:#45474e;cursor:not-allowed}
.guess-suggestions{position:absolute;z-index:70;top:calc(100% + 6px);left:0;right:0;max-height:264px;overflow-y:auto;background:#252832;border:1px solid #826045;border-radius:8px;box-shadow:0 18px 55px #0009}
.guess-suggestions button{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%;background:transparent;color:#f2f3f5;border:none;border-bottom:1px solid #3b414a;text-align:left;padding:12px 15px}
.guess-suggestions button:last-child{border-bottom:0}
.guess-suggestions button:hover,.guess-suggestions button.active{background:#44352d}
.guess-suggestions b{font-size:13px}
.guess-suggestions small{font-size:10px;color:#aeb4bd;text-align:right}
.guess-message{color:#c8cfda;font-size:11px;line-height:1.65;min-height:18px;margin-top:9px}
.guess-message:empty{min-height:0;margin-top:0}
.guess-message.warn{color:#ffb995}
.g3-progress{margin-top:30px}
.g3-progress-heading{display:flex;justify-content:space-between;gap:15px;color:#b7bfcc;font-size:10px;letter-spacing:1.25px;font-weight:950}
.g3-progress-heading strong{color:#ffb48a;font-variant-numeric:tabular-nums}
.guess-slots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;margin-top:12px}
.guess-slots span{height:11px;background:#414751;border:1px solid #505964;border-radius:4px;transition:background .2s}
.guess-slots span.used{background:#ff8b4f;border-color:#ff9c65}
.guess-slots span.correct{background:#afdca4;border-color:#bfeab0}
.g3-empty-history{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:144px;margin-top:29px;background:#1c2027;border:1px dashed #3f4853;border-radius:9px;color:#8f9dab}
.g3-empty-history p{font-size:11px;margin:5px 0 0;color:#87929e}
.g3-empty-icon{font-size:25px;color:#5f6874}
.guess-history{margin-top:27px;padding-top:19px;border-top:1px solid #3c444d;min-width:0}
.history-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.history-heading h3{font-size:19px;font-weight:900;letter-spacing:-.04em}
.history-heading>span{font-size:10px;color:#ffd0ae;background:#3b302c;border:1px solid #654c3f;padding:6px 10px;border-radius:6px;font-weight:900}
.history-note{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 9px;font-size:9px;font-weight:850;letter-spacing:.25px;color:#9ca6b6}
.history-note span.hint-match{color:#b1e4a9}
.history-note span.hint-different{color:#f1abab}
.table-scroll{max-width:100%;overflow-x:auto;scrollbar-width:thin}
.comparison-table{border-collapse:separate;border-spacing:0 6px;width:100%;min-width:420px}
.comparison-table th{color:#9aa5b3;letter-spacing:.6px;text-align:left;font-size:9px;padding:7px 9px}
.comparison-table td{background:#292e37;color:#e9eaf0;font-size:11px;font-weight:750;border-top:1px solid #3c444e;border-bottom:1px solid #3c444e;padding:11px 8px}
.comparison-table td:first-child{font-weight:950;border-left:1px solid #3c444e;border-radius:6px 0 0 6px}
.comparison-table td:last-child{border-right:1px solid #3c444e;border-radius:0 6px 6px 0}
.comparison-table td.hit{background:#283c30;color:#c9efc1;border-color:#46644e}
.comparison-table td.miss{background:#3f2e31;color:#ffc0bc;border-color:#69474c}
.comparison-table td.unknown{background:#292e37;color:#aab4be}
.comparison-table td strong{margin-right:6px;font-weight:950}
.game-finished{display:block;margin-top:18px;padding:25px 27px;border-radius:12px;border:1px solid #78553e;background:radial-gradient(ellipse at 100% 0%,#76452b38,transparent 65%),#22252d}
.g3-result-eyebrow{display:block;color:#ffb37b;font-weight:950;letter-spacing:1.3px;font-size:10px}
.game-finished h2{font-size:clamp(25px,3.4vw,35px);letter-spacing:-.04em;margin:10px 0}
.game-finished p{font-size:12px;line-height:1.75;color:#b5c0cc;margin:0}
.game-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:19px}
.game-actions button{border:1px solid #cf8b61;border-radius:7px;padding:12px 17px;background:#ff975d;color:#201b18;font-size:11px;font-weight:950}
.game-actions button:hover{background:#ffb88c}
.g3-next-day{font-size:9px;font-weight:850;color:#a5afba;letter-spacing:.8px}
#share-message{margin-top:10px;font-size:11px}
.game-footnote{display:flex;justify-content:center;align-items:center;gap:15px;flex-wrap:wrap;margin:28px 0 0;padding-top:15px;border-top:1px solid #2e343c;color:#818f9f;font-size:9px;font-weight:850;letter-spacing:.7px}
.game-photo-attributions{font-size:10px;letter-spacing:0;font-weight:600}
.game-photo-attributions summary{cursor:pointer;color:#9f938b}
.game-photo-attributions[open]{width:min(100%,330px);padding:9px;border:1px solid #464046;border-radius:6px;background:#24272d}
#game-credit-list{padding:7px 0 0}
#game-credit-list a{color:#e2b495;text-decoration:underline;text-underline-offset:3px}
@media(max-width:990px){.g3-layout{grid-template-columns:minmax(0,350px) minmax(0,1fr)}.g3-portrait{height:350px}.g3-play{padding:23px}.g3-intro{padding-top:36px}}
@media(max-width:760px){
 .g3-intro{align-items:start;gap:18px;flex-direction:column;padding:25px 0 23px}
 .g3-intro h1{font-size:clamp(46px,9vw,64px)}
 .g3-timer{min-width:225px}
 .g3-layout{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:17px}
 .g3-portrait{height:310px}
 .g3-play{min-height:0;padding:24px}
 .g3-mystery-bottom{padding:17px 20px}
}
@media(max-width:520px){
 .g3-main{padding:0 16px}
 .g3-intro{padding:21px 0 18px}
 .g3-intro h1{font-size:46px;margin:10px 0}
 .g3-intro p{font-size:12px}
 .g3-timer{padding:10px 14px}
 .g3-timer strong{font-size:25px}
 .g3-mystery-top{padding:16px 16px 11px}
 .g3-portrait{height:270px}
 .g3-silhouette{height:270px;width:230px}
 .g3-halo{height:220px;width:220px}
 .g3-question{font-size:112px}
 .g3-mystery-bottom h2{font-size:25px}
 .g3-milestones{padding:11px 13px}
 .g3-play{padding:20px 16px}
 .g3-play-head{gap:10px;padding-bottom:18px}
 .g3-play-head h2{font-size:25px}
 .g3-attempts{flex-basis:98px;padding:10px}
 .g3-attempts strong{font-size:20px}
 .g3-entry{margin-top:20px}
 .g3-search{padding:5px 6px 5px 10px;gap:5px}
 .g3-search svg{width:18px;height:18px}
 .g3-search input{font-size:12px}
 .g3-search button{padding:10px 8px;min-width:74px;font-size:10px}
 .guess-slots{gap:4px}
 .guess-slots span{height:10px}
 .comparison-table{min-width:410px}
 .game-finished{padding:20px 17px}
 .game-footnote{gap:10px;font-size:9px;text-align:center}
}
@media(prefers-reduced-motion:reduce){.g3-portrait img,.g3-question,.g3-silhouette,.guess-slots span{transition:none!important}}


/* Crosshair Club solo portraits: fully contain the player inside the reveal. */
.g3-portrait img{
  left:0!important;top:0;width:100%;height:100%;
  max-width:100%;object-fit:contain;object-position:center bottom;
}
.g3-portrait img[data-player-focus="left"],
.g3-portrait img[data-player-focus="right"]{left:0!important}