:root{--bg:#03090d;--panel:#07131b;--line:#194252;--lime:#caff00;--green:#24f87a;--red:#ff4459;--gold:#ffd21a;--txt:#f1f6f8;--muted:#93aab5;--header:84px}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;color:var(--txt);background:radial-gradient(ellipse at 50% 0,#0b202b,transparent 70%),var(--bg);font:12px Arial,Helvetica,sans-serif}
header{height:var(--header);padding:10px 14px;display:grid;grid-template-columns:245px 245px minmax(250px,1fr) 165px 100px;align-items:center;gap:16px;background:#061117;border-bottom:1px solid var(--line)}
.logo{font-size:35px;font-weight:1000;letter-spacing:-1.5px;color:var(--lime);line-height:.9}
.logo span{display:block;font-size:16px;color:white;font-style:italic;letter-spacing:1px;margin:5px 0 0 49px}
.slogan{font-size:13px;font-style:italic;line-height:1.6}.slogan small{font-size:9px}
.headerCope{min-width:0;width:100%;padding:9px 14px;border:1px solid #315160;border-radius:7px;background:linear-gradient(100deg,#0b2028,#07151d)}
.copeHeading{display:flex;align-items:center;gap:12px;font-weight:900;font-size:11px;white-space:nowrap}
#copeLabel{font-size:9px;color:#b9cbd2;margin-left:auto;overflow:hidden;text-overflow:ellipsis}
#copeScore{font-size:23px;color:var(--red);font-variant-numeric:tabular-nums}
.bar{height:10px;margin:6px 0;border-radius:8px;background:#02080d;overflow:hidden;border:1px solid #25434e}
#copeBar{height:100%;width:0;background:linear-gradient(90deg,#73c947,#ffc947,#ff425a);transition:width 900ms ease}
.copeScale{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.8px;color:#8faab5}
.steamGroup{text-align:center}.steam{display:flex;justify-content:center;align-items:center;height:33px;background:var(--lime);color:#071017;text-decoration:none;font-weight:900;border-radius:6px;font-size:11px}
.jokerLaugh{font-size:14px;letter-spacing:3px;font-style:italic;color:#ff3c80;font-weight:1000;margin-top:5px}
.topRefreshBtn{height:35px;background:var(--lime);color:#061117;border:0;border-radius:6px;font-size:10px;font-weight:900;cursor:pointer}
.topRefreshBtn:disabled{opacity:.6;cursor:wait}.topRefreshBtn:hover{filter:brightness(1.1)}
.srOnly{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#dashboard{height:calc(100svh - var(--header));padding:10px 12px 4px;display:grid;grid-template-rows:82px minmax(0,1fr) 20px;gap:8px}
.stats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.stat{min-width:0;position:relative;border:1px solid var(--line);border-radius:7px;padding:9px 10px;background:linear-gradient(135deg,#0a1b25,#040b10);overflow:hidden}
.stat .label{font-size:10px;font-weight:900;color:#adc2cc;letter-spacing:.3px;white-space:nowrap}
.stat .num{font-size:clamp(22px,2vw,32px);font-weight:1000;line-height:1.1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.stat small{font-size:9px;color:var(--muted);display:block;line-height:1.25}.stat #atlAt{font-size:9px}
.stat.green .num{color:var(--green)}.stat.red .num{color:var(--red)}.stat.gold .num{color:var(--gold)}
.iconBubble{position:absolute;right:10px;top:27px;font-size:24px;opacity:.7;pointer-events:none}
.stat:last-child .num{font-size:18px!important;max-width:140px}.stat:last-child small{font-size:8px}
.bodygrid{display:grid;grid-template-columns:clamp(110px,10.5vw,180px) minmax(0,1fr) clamp(180px,16vw,260px) clamp(155px,15vw,235px);gap:8px;min-height:0}
.panel{min-width:0;min-height:0;border:1px solid var(--line);border-radius:7px;background:linear-gradient(145deg,#081821,#040c11);overflow:hidden}
.panelHead,.chartTop{height:30px;flex:0 0 30px;padding:7px 9px;border-bottom:1px solid var(--line);font-weight:900;font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap}
.panelHead .muted{font-size:9px;color:#809ba7;font-weight:400;overflow:hidden;text-overflow:ellipsis}
.leftPoster{height:100%;display:flex;align-items:center;justify-content:center;background:#03090d}
.leftPoster img{display:block;width:100%;height:100%;object-fit:contain}
.centerCol{display:grid;grid-template-rows:minmax(120px,1.1fr) minmax(140px,.95fr) minmax(80px,.65fr);gap:8px;min-width:0;min-height:0}
.chartPanel{display:flex;flex-direction:column}.chartTop{font-size:10px}.tabs{display:flex;gap:3px}.tabs button{padding:4px 6px;border-radius:4px;border:1px solid #284854;background:#06131a;color:#a9bfca;font-size:9px;cursor:pointer}.tabs button.active{border-color:#7ba900;color:var(--lime)}
.chartWrap{position:relative;flex:1;min-height:0;padding:6px 8px;background:#051017}
canvas{width:100%;height:100%;display:block}#chart{cursor:crosshair;touch-action:pan-y}
#chartTooltip{position:absolute;z-index:20;pointer-events:none;background:#041016f5;border:1px solid #80a623;border-radius:5px;padding:8px 10px;font-size:11px;line-height:1.5;box-shadow:0 4px 18px #0008;white-space:nowrap}#chartTooltip strong{color:var(--lime);display:block;font-size:14px}
.midRow,.bottomCenter{display:flex;min-height:0}.midRow>.panel,.bottomCenter>.panel{flex:1}
#trophies-panel{display:flex;flex-direction:column}.trophyGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:5px;flex:1;min-height:0}
.trophyCard{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid #94802c;border-radius:5px;background:#031016;overflow:hidden;text-align:center}
.trophyCard.locked{border-color:#40515b}.trophyArt{min-height:0;flex:1;overflow:hidden}.trophyArt img{display:block;width:100%;height:100%;object-fit:contain}.trophyCard.locked img{filter:grayscale(1) brightness(.8)}
.trophyStatus{height:28px;flex:0 0 28px;padding:3px 1px;background:var(--lime);color:#071017;font-size:8px;font-weight:900;display:flex;flex-direction:column;justify-content:center}.locked .trophyStatus{background:#10212a;color:#a6bac5;border-top:1px solid #304653}.trophyDate{font-size:7px;margin-top:2px}
#hall-of-shame{display:flex;flex-direction:column}.tableWrap{flex:1;min-height:0;overflow:auto;padding:0 8px}table{width:100%;border-collapse:collapse;font-size:9px}th,td{padding:5px;text-align:left;border-bottom:1px solid #183541}th{position:sticky;top:0;background:#091821;color:#9fbac5;font-size:8px}td:first-child{color:#76919d}td:nth-child(2){white-space:nowrap}.redtxt{color:var(--red);font-weight:900}.goldtxt{color:var(--gold);font-weight:900}
.feedCol{min-height:0;display:flex}.feedCol>.panel{flex:1;display:flex;flex-direction:column}.feed{flex:1;min-height:0;overflow:auto;padding:0 9px}.event{display:grid;grid-template-columns:19px minmax(0,1fr) 32px;gap:5px;padding:10px 0;border-bottom:1px solid #17333f}.eventIcon{font-size:15px}.eventTitle{font-size:10px;font-weight:900;line-height:1.25}.eventCount{font-size:17px;font-weight:900;line-height:1.3}.eventText{font-size:10px;line-height:1.35;color:#acbec7}.eventTime{font-size:9px;color:#839faa}.event.red .eventTitle{color:var(--red)}.event.gold .eventTitle{color:var(--gold)}.event.green .eventTitle{color:var(--green)}
.rightCol{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(94px,.55fr);gap:8px;min-height:0}.memePanel{display:flex;flex-direction:column}.memeTitle{height:30px;flex:0 0 30px;padding:8px 9px;border-bottom:1px solid var(--line);font-size:10px;font-weight:900}.memeBody{min-height:0;flex:1;overflow:hidden;background:#030a0e}.memeBody img{display:block;width:100%;height:100%;object-fit:contain}
.randomCopiumPanel{display:flex;flex-direction:column}.randomCope{padding:7px 9px;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;font-size:10px;line-height:1.4}#copiumQuote{overflow:auto;min-height:0;flex:1}.copeBtn{min-height:27px;flex-shrink:0;background:var(--lime);border:0;border-radius:4px;color:#071017;font:900 9px Arial;cursor:pointer}
.gameJump{display:flex;align-items:center;justify-content:center;color:#9ab3bf;text-decoration:none;font-size:9px;letter-spacing:1.3px}.gameJump:hover{color:var(--lime)}
.gamePanel{margin:12px}.gameFrameWrap{height:min(76vw,760px);min-height:480px;background:#02080d}.gameFrame{width:100%;height:100%;border:0;display:block}
#api{display:none}.footer{padding:12px;display:flex;justify-content:space-between;gap:12px;color:#79949f;font-size:10px}
button:focus-visible,a:focus-visible,.trophyCard:focus-visible,canvas:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
@media(max-width:1400px){header{grid-template-columns:220px 180px minmax(260px,1fr) 140px 90px;gap:10px}.logo{font-size:31px}.logo span{font-size:14px;margin-left:34px}.slogan{font-size:11px}.slogan small{font-size:8px}.headerCope{padding:8px 10px}.copeHeading{font-size:10px;gap:7px}#copeLabel{font-size:8px}.stat .label{font-size:9px}.stat .num{font-size:25px}.iconBubble{font-size:20px;right:7px}.stat:last-child .num{font-size:15px!important}.panelHead .muted{display:none}.chartTop{flex-wrap:wrap;height:44px;flex-basis:44px;padding:5px 8px}.chartTop>span{font-size:9px}.tabs button{padding:3px 5px}.bodygrid{grid-template-columns:clamp(100px,10vw,140px) minmax(0,1fr) 180px 165px}.eventCount{font-size:15px}.eventText{font-size:9px}}
@media(max-height:760px) and (min-width:1100px){:root{--header:76px}#dashboard{grid-template-rows:76px minmax(0,1fr) 18px;padding-top:7px;gap:6px}.centerCol{grid-template-rows:minmax(115px,1.1fr) minmax(130px,.95fr) minmax(68px,.65fr);gap:6px}.headerCope{padding-top:5px;padding-bottom:5px}.stat{padding:7px 9px}.stat .num{margin:5px 0 3px}.rightCol{gap:6px}}
@media(max-width:1099px){header{height:auto;min-height:120px;grid-template-columns:1fr 1fr 100px;gap:8px}.logo{grid-column:1}.slogan{display:none}.headerCope{grid-row:2;grid-column:1/-1}.steamGroup{grid-column:2;grid-row:1}.topRefreshBtn{grid-column:3;grid-row:1}#dashboard{height:auto;min-height:calc(100svh - 120px);grid-template-rows:auto auto 24px}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{min-height:85px}.bodygrid{grid-template-columns:minmax(0,1fr) 190px}.leftPoster{display:none}.centerCol{grid-column:1;grid-row:1;grid-template-rows:240px 180px 150px}.rightCol{grid-column:2;grid-row:1;grid-template-rows:1fr 1fr 120px}.feedCol{grid-column:1/-1;height:230px}.footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#copeBar{transition:none}}
/* Keep the header meter inside its row, even with larger system font metrics. */
header{padding-top:6px;padding-bottom:6px}
.headerCope{height:62px;padding:6px 10px;display:grid;grid-template-rows:24px 8px 8px;row-gap:4px}
.copeHeading{height:24px;line-height:1}#copeScore{font-size:22px;line-height:1}
.headerCope .bar{height:8px;margin:0}.copeScale{line-height:1}
.feedCol .panelHead>span:last-child{font-size:0}.feedCol .panelHead>span:last-child:after{content:'●';font-size:9px}
@media(min-width:1100px){.bodygrid{grid-template-columns:clamp(110px,calc((100svh - 180px) / 3.2),280px) minmax(0,1fr) clamp(180px,16vw,260px) clamp(155px,15vw,235px)}}
@media(max-width:1400px){.iconBubble{display:none}}

/* V51: resolution-aware trophy cabinet with real, readable text and an enlarged view. */
.centerCol{grid-template-rows:minmax(120px,1fr) minmax(195px,1.15fr) minmax(70px,.65fr)}
.trophyGrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.trophyCard{font-family:inherit;color:var(--txt);padding:0;cursor:pointer;transition:border-color .15s,background .15s}
.trophyCard:hover{border-color:var(--lime);background:#0c242c}
.trophyArt{display:block;position:relative;width:100%;flex:1;min-height:24px}
.croppedArt{overflow:hidden}
.croppedArt img{position:absolute;top:0;left:0;width:100%;height:auto;object-fit:initial}
.trophyCard .croppedArt{flex:0 1 auto;aspect-ratio:1.2;max-height:calc(100% - 105px)}
.emojiArt{display:flex;align-items:center;justify-content:center;font-size:clamp(28px,3vw,66px);text-shadow:0 4px 18px #0008}
.trophyName{display:flex;align-items:center;justify-content:center;min-height:28px;flex:0 0 28px;font-size:clamp(9px,.7vw,14px);font-weight:900;line-height:1.15;padding:2px 3px}
.trophyReq{font-size:clamp(8px,.58vw,12px);color:#a9c3d3;padding:3px 2px;line-height:1.25}
.trophyTagline{font-size:clamp(8px,.55vw,12px);line-height:1.25;color:#9ab0bb;padding:3px 4px;flex:1;min-height:20px;overflow:hidden}
.trophyStatus{margin-top:auto;width:100%;font-size:clamp(8px,.5vw,10px)}
.trophyDate{font-size:clamp(7px,.45vw,9px)}
#trophies-panel .panelHead .muted{display:block;font-size:10px}
#trophyDialog{padding:26px 32px 30px;width:min(480px,calc(100vw - 28px));max-height:90svh;overflow:auto;background:radial-gradient(ellipse at top,#153642,#061117 75%);color:var(--txt);border:1px solid #829c33;border-radius:16px;text-align:center;box-shadow:0 20px 100px #000c}
#trophyDialog::backdrop{background:#01070bd9;backdrop-filter:blur(5px)}
.dialogClose{position:absolute;right:12px;top:10px;width:36px;height:36px;border:1px solid #34515c;border-radius:50%;background:#07131b;color:white;cursor:pointer;font-size:18px;z-index:1}
.dialogArt{width:200px;height:165px;margin:6px auto 18px}.dialogArt .trophyArt{height:165px;min-height:0}.dialogArt .emojiArt{font-size:110px}
.dialogStatus{font-size:11px;letter-spacing:1px;color:var(--lime);line-height:1.5}
#trophyDialogName{font-size:clamp(23px,3vw,34px);line-height:1.05;margin:18px 0 12px}
#trophyDialogThreshold{font-size:19px;color:#a8cce0;margin:0 0 20px}
#trophyDialogTagline{font-size:20px;font-style:italic;line-height:1.45;margin:0;color:#e4eef3}
@media(min-width:1800px){
 :root{--header:94px}header{grid-template-columns:270px 280px minmax(300px,1fr) 190px 110px}.logo{font-size:39px}.logo span{font-size:18px}.slogan{font-size:15px}.slogan small{font-size:11px}
 #dashboard{grid-template-rows:96px minmax(0,1fr) 24px;padding:12px 16px 5px;gap:10px}
 .bodygrid{grid-template-columns:clamp(190px,calc((100svh - 225px) / 3.1),365px) minmax(0,1fr) clamp(260px,15vw,380px) clamp(220px,13vw,330px);gap:10px}
 .panelHead,.chartTop{height:36px;flex-basis:36px;font-size:13px}.chartTop{font-size:12px}.tabs button{font-size:11px;padding:5px 8px}.centerCol{gap:10px}
 .stat .label{font-size:12px}.stat .num{font-size:34px}.stat small,.stat #atlAt{font-size:11px}.stat:last-child .num{font-size:22px!important}
 .memeTitle{font-size:12px;height:34px;flex-basis:34px}.eventTitle{font-size:12px}.eventCount{font-size:20px}.eventText{font-size:12px}.eventTime{font-size:10px}.event{padding:12px 0}
 table{font-size:11px}th{font-size:10px}th,td{padding:6px}.randomCope{font-size:12px}.copeBtn{font-size:11px;min-height:32px}
 .trophyCard .croppedArt{max-height:calc(100% - 116px)}
}
@media(min-width:2300px){
 :root{--header:104px}#dashboard{grid-template-rows:110px minmax(0,1fr) 28px;gap:12px}.stat .num{font-size:40px}.stat .label{font-size:14px}.stat small,.stat #atlAt{font-size:12px}
 .panelHead,.chartTop{font-size:15px;height:40px;flex-basis:40px}.panelHead .muted{font-size:12px}.eventTitle{font-size:14px}.eventCount{font-size:24px}.eventText{font-size:14px}.eventTime{font-size:12px}table{font-size:13px}th{font-size:12px}.memeTitle{font-size:14px}.randomCope{font-size:14px}.copeBtn{font-size:12px}
 .trophyName{font-size:16px;min-height:38px;flex-basis:38px}.trophyReq{font-size:13px}.trophyTagline{font-size:13px}.trophyStatus{height:34px;flex-basis:34px;font-size:11px}.trophyDate{font-size:10px}.trophyCard .croppedArt{max-height:calc(100% - 135px)}
}
@media(max-width:1400px){.centerCol{grid-template-rows:minmax(110px,.95fr) minmax(195px,1.25fr) minmax(65px,.55fr)}.trophyTagline{display:none}.trophyCard .croppedArt{max-height:calc(100% - 76px)}.trophyName{font-size:8px}.trophyReq{font-size:8px}}
@media(max-width:1099px){.bodygrid{grid-template-columns:minmax(0,1fr) 190px}.leftPoster{display:flex;grid-column:2;grid-row:2;height:440px}.centerCol{grid-template-rows:240px 210px 150px}.feedCol{grid-column:1;grid-row:2;height:440px}.trophyTagline{display:none}}
@media(max-width:650px){.bodygrid{display:flex;flex-direction:column}.centerCol{display:grid;grid-template-rows:230px 410px 180px;order:0}.trophyGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.leftPoster{order:3;height:480px}.rightCol{order:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:220px 120px}.randomCopiumPanel{grid-column:1/-1}.feedCol{order:2;min-height:300px;height:300px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}header{grid-template-columns:1fr 100px}.logo{font-size:25px}.logo span{font-size:11px;margin-left:20px}.steamGroup{display:none}.topRefreshBtn{grid-column:2}.headerCope{grid-column:1/-1}.footer{font-size:9px}}
/* Complete cartoon trophies, with larger detail previews. */
.trophyCard .fullArt{flex:1 1 auto;min-height:35px;background:#061016}
.fullArt img{position:static;width:100%;height:100%;object-fit:contain}
.trophyCard .trophyTagline{flex:0 0 auto;min-height:30px}
.trophyCard.locked .fullArt img{filter:saturate(.8) brightness(.88)}
.dialogArt{width:min(350px,100%);height:auto;aspect-ratio:1}
.dialogArt .fullArt{height:100%;aspect-ratio:1}
@media(max-width:650px){.dialogArt{width:min(290px,100%)}}
.memeZoom{display:block;width:100%;padding:0;border:0;border-radius:0;cursor:zoom-in;color:inherit}
.memeZoom:hover{box-shadow:inset 0 0 0 1px var(--lime)}
#memeDialog{width:min(900px,calc(100vw - 24px));max-height:94svh;padding:14px;background:#061117;color:var(--txt);border:1px solid #829c33;border-radius:14px;box-shadow:0 20px 100px #000c;overflow:auto}
#memeDialog::backdrop{background:#01070bd9;backdrop-filter:blur(5px)}
#memeDialogTitle{font-size:16px;margin:4px 45px 14px 4px}
#memeDialogImg{display:block;width:100%;height:auto;max-height:calc(94svh - 76px);object-fit:contain;border-radius:6px}